Data di pubblicazione: 21 ottobre 2024
La scorsa settimana abbiamo introdotto un nuovo pannello in DevTools: l'assistenza AI 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 sviluppare codice esistente di cui non hai alcuna conoscenza pregressa e, nel peggiore dei casi, nemmeno 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. 👀
Prompt da 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
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 esattamente cosa vuoi fare, ma non riesci a trovare il giusto insieme 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à
È importante rendere il tuo sito web accessibile e facile da usare con le tecnologie per la disabilità. Prendi in considerazione l'accessibilità fin dall'inizio dello sviluppo, anziché come un ripensamento, e cerca di seguire le linee guida per l'accessibilità dei contenuti web (WCAG) durante tutto il processo di sviluppo.
Utilizza l'assistenza IA per ricevere suggerimenti su dove un <div> potrebbe essere sostituito con un elemento HTML più semantico, su come può 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 pregressa. Indossa la tuta da lavoro e mettetevi all'opera nell'hangar di Chrome DevTools.
E non dimenticare di comunicarci la tua esperienza nel nostro issue tracker pubblico.