Hai mai applicato CSS a un elemento, ma non funziona?
Con Chrome DevTools puoi scoprire i problemi di CSS a colpo d'occhio, eseguire il debug e testarli.
Guarda il video per scoprire in che modo il riquadro Elementi > Stili evidenzia vari problemi relativi al CSS:
Proprietà con sintassi non validaProprietà sostituitaProprietà non attiva
Ereditato da
parent
Proprietà ereditata
Proprietà non ereditata
Proprietà abbreviata espandibile
Proprietà con scrittura lunga sostituitaProprietà di scrittura lunga attiva
foglio di stile dello user agent
- Proprietà non modificabile
Proprietà non modificabile sostituita
Altri suggerimenti per il debug:
- Utilizza il filtro nel riquadro Stili per concentrarti sulla proprietà che ti interessa.
- Utilizza il riquadro Calcolata per visualizzare tutti i valori vincenti Cascade e i relativi valori calcolati.
- Nel riquadro Calcolato, espandi una proprietà e fai clic su un link per trovare la relativa origine nel riquadro Stili.
Per scoprire di più su tutti i modi in cui DevTools evidenzia i problemi relativi al CSS, consulta l'articolo Trovare CSS non validi, sostituiti, inattivi e di altro tipo.
Per migliorare le tue competenze CSS, consulta Imparare CSS.
Per scoprire come creare siti web belli e funzionali per tutti, consulta Imparare il responsive design.