Share
È ora che iniziamo ad imparare qualche nuovo CSS, no??
Siamo abituati alle nuove funzionalità introdotte nei framework di sinistra e destra, ma spesso dimentichiamo che le nuove funzionalità vengono costantemente sviluppate nei linguaggi web principali che utilizziamo ogni giorno.
La bozza CSS Selectors di livello 4 del 15 gennaio delinea un salto importante nelle funzionalità per i CSS.
Prima di iniziare, dovresti sapere: il CSS che trovi in questo articolo, oggi, non funzionerà in gran parte nei browser. Anche il più nuovo del nuovo. La ragione di ciò è che la bozza è esattamente quella: una bozza. Questa è la quarta versione della bozza di selettori di livello 4, che è stata avviata nel 2011. I selettori suggeriti nella bozza sono una specifica per i nuovi selettori che vengono proposti dagli editori del documento stesso, attraverso molta deliberazione e collaborazione con persone nella comunità che partecipano alla mailing list del W3C.
Che cosa significa questo? Significa che nel prossimo futuro, probabilmente vedremo molte di queste funzionalità implementate, e molte saranno consegnate nelle versioni di sviluppo di browser come Chrome e Firefox.
Diamo un'occhiata ad alcuni dei nuovi selettori!
Abbiamo visto il :non selettore prima nei selettori di livello 3. Tuttavia, la bozza attuale del livello 4 :non il selettore consente più argomenti con una corrispondenza più complessa.
In precedenza, :non potrebbe essere utilizzato solo con un singolo selettore e non può essere combinato. Ad esempio, livello 3 :non potrebbe assomigliare a questo:
a: not ([href * = "somesite.com"])
Questo sceglierebbe tutti i tag di ancoraggio che non ne avevano uno href compresa la stringa "Somesite.com". Ma con la nuova bozza, possiamo fare cose più interessanti.
Copriremo : ha a breve, ma per ora, ecco un selettore che seleziona tutti i collegamenti che non sono discendenti diretti di elementi con una classe di col o una classe che inizia con col (come le classi di griglia di Bootstrap col-md-4). Ignorerà anche le ancore che hanno elementi img come discendenti.
a: not ([class | = "col"]> a,: has (img))
Questo selettore ci consente anche di fare cose come:
div: not (div + div)
Questo seleziona tutti i div che non sono i fratelli next-in-line di altre div.
Con l'aggiunta del : Nth-last-child pseudo-classe possiamo anche fare cose del genere:
div: not (.container> div: nth-last-child (-n + 2))
Questo selezionerebbe tutte le div tranne quelle che sono discendenti diretti di .contenitore elementi e sono gli ultimi due fratelli.
Come puoi vedere, queste regole possono diventare molto potenti e complesse; ma aggiungiamo ancora più flessibilità nel mix introducendo il : ha pseudo selettore.
Il : ha lo pseudo-selettore consente di selezionare gli elementi che hanno gli argomenti passati come figli. Ad esempio, per selezionare tutti i collegamenti di ancoraggio con elementi immagine come figli, si utilizza la seguente sintassi:
a: has (img)
però, : ha non è limitato ai semplici selettori. Puoi combinare : ha con :non e : Nth- * i selettori per creare selettori relazionali abbastanza complessi.
Ad esempio, selezioniamo tavolo elementi che hanno più di dieci righe:
table: has (tr: nth-of-type (11))
Che ne dici di selezionare a corpo elemento il cui ultimo elemento figlio non è un piè di pagina?
body: not (: has (footer: last-child))
Attualmente possiamo scegliere come target i collegamenti ipertestuali usando : Link e : visited. Questo va oltre il semplice utilizzo del un selettore, in quanto controlla la presenza di href, e controlla la cronologia di navigazione dell'utente per determinare se un determinato collegamento è stato visitato.
: link,: visited color: blue;
Con i selettori di livello 4 proposti, potremmo definire tutti i collegamenti, visitati o meno, utilizzando : Qualsiasi-link. Lo stile sopra riportato è relativamente equivalente a:
: any-link colore: blu;
Fino ai selettori di livello 4, il CSS è stato assegnato a globale scopo. In altre parole, se aggiungi il seguente CSS:
div colore: # 444;
tutte le div riceveranno il colore: # 444 regola di stile. (Ciò presuppone che non vengano applicati altri stili concorrenti.) I selettori di livello 4 consentono di avere fogli di stile e tag di stile ambito a un elemento:
Questo è al di fuori del campo di applicazione.
In questo esempio, abbiamo applicato un ambito a un tag di stile all'interno del a parte elemento. Le regole in questo tag di stile si applicano solo ai discendenti di stilel'elemento genitore.
Il : partite lo pseudo-selettore ci consente di verificare se un elemento corrisponde a un elenco di elementi. Ad esempio, se si desidera scegliere come target tutti i tag anchor, paragraph e h2 all'interno di un articolo, è possibile ottenere ciò con quanto segue:
articolo: corrispondenze (h2, a, p)
Questo sostituisce la sintassi molto più verbosa in precedenza:
articolo a, articolo h2, articolo p
Nota: A partire da questa versione della bozza, : partite () non può essere usato con :non, : ha, o un altro annidato : partite.
Accentsconagua
>> Probabilmente hai familiarità con lo spazio che ci consente di scrivere regole discendenti, come tutte le ancore all'interno di un div:
div a
Ma fino ad ora non abbiamo visto un selettore discendente esplicito. Con i selettori di livello 4 ne abbiamo uno: >>.
Tuttavia, tieni presente che ciò comporta un carattere extra non necessario nel tuo CSS, poiché puoi ottenere lo stesso effetto con uno spazio di un singolo carattere, quindi fai attenzione a come lo usi. Presumibilmente funge da ponte tra il selezionatore immediato del bambino, >, e il selettore di accesso shadow-dom, >>>.
|| Questo selettore è una gradita aggiunta per lo stile dei tavoli. Diamo un'occhiata ad alcuni markup per una tabella base:
| ID | Nome | |
|---|---|---|
Lo stile di elementi raggruppati orizzontalmente (cioè all'interno della stessa riga) è stato storicamente relativamente semplice da realizzare. Elementi di stile raggruppati verticalmente è tutto un altro gioco con la palla.
Per modellare tutti gli elementi che fanno parte della colonna con la classe personale-info, potremmo aggiungere più classi al markup e modificarle direttamente, oppure, guardando ai selettori di livello 4, potremmo usare il || selettore. Il || selettore ti permette di bersagliare in modo pulito quelli TD elementi come segue:
.informazioni personali || td
Questo avvolge la nostra panoramica di alcune delle nuove funzionalità provenienti dai selettori di livello 4! Questi potenti e nuovi set di strumenti a risparmio di byte non sono completamente bloccati, ma i browser stanno iniziando a implementarli nelle loro prime forme sperimentali, quindi state attenti agli aggiornamenti delle specifiche. Ovviamente quando saranno formalizzati, li copriremo qui su Tuts+!
Guarda il nostro corso su The CSS of the Future, in cui Craig Campbell copre, tra le altre cose:
