29 Novembre 2021
Expand search form

Cos’è la specificità CSS?

Porta il tuo JavaScript al livello successivo a Frontend Masters.

Copriamo specificamente questo argomento. (rimshot!)

Il modo migliore per spiegarlo è iniziare con un esempio di dove la specificità si confonde e forse non si comporta come ci si aspetterebbe. Poi daremo un’occhiata più da vicino a come calcolare il valore effettivo di specificità per determinare quale selettore ha la precedenza.

Ecco un semplice elenco non ordinato:

Ora volete designare uno di questi come vostro drink preferito e cambiare un po’ il suo stile. Avete bisogno di un gancio per questo, quindi lo applicate tramite un nome di classe sull’elemento della lista.

Ora apri il tuo CSS e fai il tuo stile per la tua nuova classe:

Poi dai un’occhiata al tuo lavoro, ma ahimè, non ha funzionato! Il testo del tuo drink preferito non è diventato rosso o in grassetto! Qui c’è qualcosa di sospetto.

Curiosando di più nel CSS, trovi questo:

Ecco il tuo problema proprio lì. Due diversi selettori CSS stanno dicendo a quel testo che colore e font-weight essere. C’è solo una dichiarazione per font-size, quindi chiaramente quella avrà effetto. Questi non sono “conflitti” di per sé, ma il browser ha bisogno di decidere quale di queste dichiarazioni onorare. Lo fa seguendo un insieme standard di regole di specificità.

Penso che questo confonda alcuni principianti perché non hanno ancora capito bene come funziona. Potrebbero pensare che siccome la dichiarazione .favorite è “più in basso nel CSS” o perché è “più vicino al testo reale” nell’HTML che sarà quella che “vince”.

In effetti, l’ordine dei selettori nel vostro CSS gioca un ruolo e quello “più in basso” in effetti vince quando i valori di specificità sono esattamente gli stessi. Per esempio:

Il colore sarà nero… ma sto divagando.

Il punto qui è vuoi essere specifico quanto più ha senso esserlo ogni volta che ne avete la possibilità. Anche con il semplice esempio presentato sopra, alla fine diventerà ovvio che usare semplicemente il nome di una classe per puntare a quella “bevanda preferita” non è sufficiente, o non sarebbe molto sicuro anche se funzionasse. Sarebbe stato intelligente usare questo:

Questo è quello che io chiamo “essere specifici quanto ha senso essere”. In realtà si potrebbe essere molto più specifici e usare qualcosa come questo:

Ma questo è esagerato. Rende il tuo CSS più difficile da leggere e non produce alcun beneficio reale. Un altro modo per aumentare il valore di specificità per la vostra classe “.favorite” è usare la dichiarazione !important.

Una volta ho sentito dire che !important è come un trucco mentale Jedi per i CSS. In effetti lo è, e potete forzare la vostra volontà sullo stile degli elementi usandolo. Ma !important impone quella volontà aumentando drasticamente la specificità di quella particolare proprietà dei selettori.

La dichiarazione !important può essere facilmente usata in modo improprio se fraintesa. È usato al meglio per mantenere il tuo CSS più pulito, in esempi in cui sai che gli elementi con un particolare selettore di classe dovrebbero usare un certo insieme di stile non importa cosa. Al contrario, non usato solo come una stampella veloce per sovrascrivere lo stile di qualcosa invece di capire come il CSS era strutturato e funzionante dall’autore originale.

Uno dei miei esempi classici è:

Lo uso spesso in situazioni in cui ci sono più blocchi flottanti, per l’ultimo blocco a destra in una fila. Questo assicura che l’ultimo blocco non abbia alcun margine destro che gli impedirebbe di appoggiarsi comodamente al bordo destro del suo genitore. Ognuno di questi blocchi ha probabilmente dei selettori CSS più specifici che applicano il margine destro per cominciare, ma !important lo spezzerà e se ne occuperà con una classe semplice/pulita.

Calcolo del valore di specificità CSS

Perché il nostro primo tentativo di cambiare il colore e il font-weight è fallito? Come abbiamo imparato, era perché semplicemente usando il nome della classe da solo aveva un valore di specificità più basso e veniva superato dall’altro selettore che mirava alla lista non ordinata con il valore ID. Le parole importanti in quella frase erano classe e ID. I CSS applicano pesi di specificità molto diversi alle classi e agli ID. Infatti, un ID ha infinitamente più valore di specificità! Cioè, nessuna quantità di classi da sola può superare un ID.

Diamo un’occhiata a come vengono effettivamente calcolati i numeri:

  • Se l’elemento ha uno stile in linea, automaticamente 1 vince (1,0,0,0 punti)
  • Per ogni valore di ID, applica 0,1,0,0 punti
  • Per ogni valore di classe (o pseudo-classe o selettore di attributo), applicare 0,0,1,0 punti
  • Per ogni riferimento di elemento, applicare 0,0,0,1 punti

Si possono generalmente leggere i valori come se fossero solo un numero, come 1,0,0,0 è “1000”, e quindi vince chiaramente su una specificità di 0,1,0,0 o “100”. Le virgole sono lì per ricordarci che questo non è davvero un sistema “base 10”, nel senso che si potrebbe tecnicamente avere un valore di specificità come 0,1,13,4 – e quel “13” non si rovescia come farebbe un sistema base 10.

Aggiornamento: La sorta di pseudo-classe :not() non aggiunge specificità di per sé, solo ciò che è all’interno delle parentesi viene aggiunto al valore di specificità.

Potresti anche essere interessato agli argomenti

Cosa diavolo è la specificità CSS?

In definitiva, puoi solo evitarla per così tanto tempo. La specificità è un concetto essenziale che devi afferrare per essere uno sviluppatore efficace. Oggi vi guiderò attraverso i concetti di specificità in modo semplice e facile da capire….What the Heck Is CSS Specificity?On:21 Jun 2013Category:CSSLength:8 min read1 more row-Jun 21, 2013

Continua…

Qual è la specificità di un selettore ID CSS?

I selettori ID hanno la più alta specificità tra i selettori CSS: 1, 0, 0, 0. A causa della natura unica della definizione dell’attributo ID, di solito stiamo stilizzando un elemento molto specifico quando richiamiamo l’ID nel nostro CSS. – La specificità è 1, 0, 0, 1 perché abbiamo un selettore di tipo e un selettore di ID.

Continua…

Come fa il CSS a determinare la specificità?

La specificità di un selettore viene calcolata come segue: se l’elemento ha uno stile in linea, aggiungi “1” punto alla colonna “a”. … Per ogni valore ID, aggiungere “1” punto alla colonna “b” – (0,1,0,0 punti)Per ogni valore di classe (o pseudo-classe o selettore di attributo), aggiungere “1” punto alla colonna “c” – (0,0,1,0 punti)Altri elementi…-Sep 2, 2015

Continua…

Perché la specificità è importante nei CSS?

Sommario. Da questo articolo, possiamo vedere che la specificità dei CSS è un argomento importante da capire perché può farti risparmiare ore di debug. Con questa conoscenza, puoi facilmente scoprire perché i tuoi stili non vengono applicati. … La specificità CSS è un insieme di regole che determinano quale stile viene applicato ad un elemento.

Continua…

Come faccio ad applicare un CSS a un div specifico?

1 RispostaUtilizza il preprocessore CSS. .leftmenu { @include ‘style.css’; }Riscrivi il CSS manualmente.Riscrivi il CSS automaticamente.Usa IFRAME come sandbox.Jan 23, 2017

Continua…

Come faccio a sovrascrivere una classe CSS in HTML?

Per sovrascrivere un attributo definito da una classe CSS, basta aggiungere un nuovo stile in linea dopo la definizione della classe del DIV.

Continua…

Come ottimizzare le tue pagine web per la stampa?

I seguenti sono i miei consigli per conquistare la stampa senza cambiare l’integrità del vostro sito web.Create un foglio di stile per la stampa. … Evitare le tabelle HTML non necessarie. … Sapere quali porzioni della pagina non hanno alcun valore di stampa. … Usare le interruzioni di pagina. … Dimensionare la pagina per la stampa. … Prova! 6 febbraio 2008

Continua…

Usare l’importante è un male?

Anche se tecnicamente !important non ha nulla a che fare con la specificità, interagisce direttamente con essa. L’uso di !important, tuttavia, è una cattiva pratica e dovrebbe essere evitato perché rende il debugging più difficile rompendo la naturale cascata nei vostri fogli di stile.

Continua…

Cos’è la specificità CSS e come funziona?

“La specificità è il mezzo con cui i browser decidono quali valori di proprietà CSS sono i più rilevanti per un elemento e, quindi, saranno applicati.” Ciò significa che la specificità CSS è un insieme di regole utilizzate dai browser nel determinare quale degli stili definiti dallo sviluppatore sarà applicato ad un elemento specifico.

Continua…

Come si calcola la specificità?

La specificità è calcolata come il numero di individui non malati correttamente classificati diviso per tutti gli individui non malati. Quindi 720 risultati veri negativi divisi per 800, o tutti gli individui non malati, per 100, ci danno una specificità del 90%. Quindi la specificità è la proporzione di non-malati correttamente classificati.

Continua…

Qual è l’ordine di priorità dei CSS?

Quindi, se due regole CSS hanno come obiettivo lo stesso elemento HTML, e la prima regola CSS ha la precedenza sulla seconda, allora tutte le proprietà CSS specificate nella prima regola CSS hanno la precedenza sulle proprietà CSS dichiarate nella seconda regola.

Continua…

Cos’è l’override CSS?

Quando una regola importante viene usata su una dichiarazione di stile, questa dichiarazione prevarrà su qualsiasi altra dichiarazione. Quando due dichiarazioni in conflitto con le regole importanti vengono applicate allo stesso elemento, verrà applicata la dichiarazione con una maggiore specificità.

Continua…

Cosa fa un preprocessore CSS?

I preprocessori CSS sono linguaggi di scripting che estendono le capacità predefinite dei CSS. Ci permettono di usare la logica nel nostro codice CSS, come variabili, annidamento, ereditarietà, mixins, funzioni e operazioni matematiche.

Continua…

Cos’è lo scoped CSS?

– UNOFF. Permette alle regole CSS di essere limitate ad una parte del documento, in base alla posizione dell’elemento di stile. L’attributo è stato rimosso dalla specifica attuale.

Continua…

Come si fa a rendere un PDF Printer Friendly?

Usate font comuni quando redigete il documento sorgente: Font come Times New Roman, Arial e Helvetica sono compatibili con la maggior parte dei sistemi operativi e firmware delle stampanti. Incorporare tutti i font nel PDF: Questo è particolarmente importante quando si usano font specifici della disciplina o dell’applicazione.

Continua…

Articolo precedente

Perché il fiume Po è importante per l’Italia?

Articolo successivo

Qual è il nome commerciale dell’idralazina?

You might be interested in …

Quanto costa una porta d’ingresso girevole?

Le porte a bilico sono una tendenza crescente tra i proprietari di case. Queste porte in stile moderno sono colossali e forniscono un appello di lusso a qualsiasi casa contemporanea. Dimensioni gioca un fattore enorme […]

A cosa serve una curette Gracey?

Il 15/16 Gracey Curette è stato introdotto nel 1993. È stata progettata per aumentare l’accesso ai molari dove può essere difficile posizionare correttamente la curette di Gracey 11/12. Viene utilizzata sulle superfici mesiali dei denti […]