Data di pubblicazione: 21 ottobre 2024
La scorsa settimana abbiamo introdotto un riquadro completamente nuovo in DevTools: l'assistenza per l'IA può aiutarti a eseguire il debug dei problemi di stile con Gemini direttamente in DevTools.
Vuoi scoprire cosa può fare? Dai un'occhiata a questi 5 fantastici modi in cui questa nuova funzionalità può semplificare la definizione dello stile della tua pagina, dalla comprensione dei layout alla riparazione degli aerei.
1. Informazioni sui layout
Quando crei siti web, non sempre parti da zero. Spesso devi creare una base di codice esistente di cui non hai alcuna conoscenza preliminare, e nel peggiore dei casi non c'è nessuno intorno a te.
Chiedi all'IA di spiegarti il layout di un elemento e scopri perché viene visualizzato in quel modo fino all'ultimo nodo e perché questo overflow: hidden; su un elemento è effettivamente presente per un motivo. 👀
Chiedi di provare
Give me a summary of how this element and its children are laid out and re-create the layout in ASCII.
2. Programmazione in coppia
Il CSS è diventato davvero potente. Con così tante possibilità, a volte è normale farsi un po' di confusione: mi serve align-items? Oppure justify-items? O meglio justify-self o align-content?
A volte sai davvero cosa vuoi fare, ma non riesci a ottenere l'insieme corretto di proprietà CSS. La prossima volta che ti trovi in questa situazione, spiega il problema all'IA e lascia che risolva il problema per te.
L'assistenza AI esaminerà il codice esistente e lo confronterà con ciò che stai cercando di ottenere, suggerendo le correzioni necessarie da esaminare, applicare e copiare nella base di codice.
3. Consulente per l'accessibilità
Rendere il tuo sito web accessibile e facile da usare con le tecnologie per la disabilità è importante. Considera l'accessibilità sin dall'inizio dello sviluppo, piuttosto che un ripensamento e mira a seguire le linee guida per l'accessibilità dei contenuti web (WCAG) durante tutto il processo di sviluppo.
Utilizza l'assistenza dell'AI per ricevere suggerimenti su dove potrebbe essere sostituito un <div> con un
elemento HTML più semantico, su come potrebbe essere utile un attributo aria-* aggiuntivo
o su come migliorare il contrasto di colore.
Prompt da provare
What about color contrast in this element?
4. Personalizzare il report
Le tendenze vanno e vengono: ci sono stati gradienti, ombre e bordi netti, seguiti dal design piatto, fino all'era del design di oggi con colori neon brillanti su sfondi scuri.
A volte non è stancante quanto possono essere uniformi le cose sul web? Se è uno di quei giorni, chiedi all'assistenza AI di cambiare e rendere il web un po' più divertente, come in una giostra di un parco a tema.
Prompt da provare
This element looks a little boring. Can you make it look like a pirates theme park ride?
5. Diventare meccanico aeronautico
Spiega i problemi di stile, aiuta a risolverli, consiglia sull'accessibilità e consente di modificare gli stili esistenti. L'assistenza dell'IA può già aiutarti in molti modi e non è tutto. Riesci a credere che l'assistenza AI ti aiuti persino a riparare gli aerei? Non è richiesta alcuna esperienza precedente. Mettiti alla prova nel complesso e sporca le mani con l'Hangar DevTools di Chrome.
E non dimenticare di comunicarci la tua esperienza nel nostro issue tracker pubblico.