Suggerimenti per DevTools: scoprire i problemi relativi al CSS

Sofia Emelianova
Sofia Emelianova

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:

  • Avviso. Proprietà con sintassi non valida

  • Casella di controllo. Proprietà sostituita

  • Casella di controllo. Proprietà non attiva Informazioni.Con un suggerimento.

  • Ereditato da parent

    • Casella di controllo. Proprietà ereditata
    • Casella di controllo. Proprietà non ereditata
  • Casella di controllo. Proprietà abbreviata espandibile Espandi.

    • Casella di controllo. Proprietà con scrittura lunga sostituita
    • Casella di controllo. Proprietà 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.