Tutte le novità sui CSS di livello 4

I CSS4 sono tra Noi!!! Ebbene si, il futuro è tra noi. Come hai detto? Non hai ancora imparato tutto […]
Tutte le novità sui CSS di livello 4

I CSS4 sono tra Noi!!!

Ebbene si, il futuro è tra noi. Come hai detto? Non hai ancora imparato tutto quello che c’è da sapere sui CSS3 che già spunta fuori il working draft dei CSS livello4? Non preoccuparti più di tanto, come gia ti abbiamo detto molte volte i CSS di livello 3 sono da considerarsi quasi come una camera stagna, composti infatti da moduli, essi vivono in autonomia a prescindere dall’implementazione di nuovi selettori o regole portanti.

Documentazione

La documentazione parla chiaro: “This module is an early-stage Working Draft. If you are looking for a stable Selectors specification, use Selectors 3″. Questa è solo una bozza, se sei in cerca di specifiche stabili utilizza quelle inerenti ai selettori di terzo livello. Quindi non preoccupatevi, ne passerà di acqua sotto i ponti prima che il Livello 4 divenga stabile e utilizzabile.

Le novità

Di novità ce ne sono. All’interno della documentazione ufficiale è presente una comoda tabella riassuntiva di tutti i selettori con affianco specificato il livello di appartenenza! Ti ripropongo l’elenco della documentazione con esempi concreti.

Negation pseudo-class

/* Il seguente selettore intercetta nel documento html
tutti i pulsanti che non hanno come attributo "disable" */
button:not([DISABLED])

Matches-any pseudo-class

/* Il seguente selettore intercetta nel documento html
qualsiasi ancora appartenente ad un li che sia in stato hover o focus */
li a:matches(:hover, :focus)

Attribute selectors: Case-sensitivity

/* La seguente regola CSS andrà a stilizzare l'attributo frame
quando questo ha come valore "hsides" in tutte le sue forme
( HSIDES, hSides... etc ) */
[frame=hsides i] { border-style: solid none; }

The local link pseudo-class

/* La seguente regola previene i link che puntano alla pagina
corrente dall'essere sottolineati se e solo se fanno parte di nav.
La pseudo calsse in questione accetta un valore numerico non negativo
come argomento che indica il numero dei path level da intercettare. */
nav :local-link { text-decoration: none; }

Time-dimensional Pseudo-classes (current / past / future)

/* Il seguente selettore renderà gialli tutti gli elementi html indicati
tra parentesi durante il rendering del documento tramite sintesi vocale. */
:current(p, li, dt, dd){background: yellow;}

The indeterminate-value pseudo-class

/* Questo particolare selettore consente di agire sugli elementi della
user interface come ad esempio radiobutton o checkbox quando il loro
stato non si trova nella condizione di indeterminato, come nei casi di
pre-scelta di un gruppo di radio. */
:indeterminate{display:block;}

Structural pseudo-classes

/* E' molto simile a nth-child ma ha in più l'aggiunta della keyword "of"
che specifica maggiormente la selezione. In questo caso verranno intercettati
tutti i paragrafi dispari che hanno la classe text associata. */
p:nth-match(even of .text)

Grid-Structural pseudo-classes

/* Il selettore :column che ha come parametri uno o più selettori,
intercetta tutte le celle che soddisfano quella condizione. Accetta
inoltre anche valori interi e la notazione sia nella forma an+b
che even/odd. Il seguente esempio intercetta tutte le celle appartenenti
alle colonne con classe selected. */
:column(col.selected){background: yellow; }
E:nth-column(n)
E:nth-last-column(n)

Reference combinator

/* Questo selettore identifica le label(quando è in stato :hover
oppure :focus) per tutti gli input associati /for/ */
label:matches(:hover, :focus) /for/ input {color:red;}

Determining the subject of a selector

/* Con il simbolo $ si può identificare l'oggetto del selettore.
In questo caso il bordo verrà applicato all'elemento UL solo se avrà
al suo interno child li con classe "click" */
$ul li.click {border:1px solid red}

Conclusioni

Di novità ce ne sono, è tutto ancora in stato draft, quindi tieni d’occhio la documentazione per restare aggiornato su nuove implementazioni.

  • Pingback: Tutte le novità sui CSS di livello 4 | hey you design blog()

  • http://www.iwebdesigner.it Zep

    Ma questi nuovi selettori sono gia’ interpretabili dai browser? Non credo…se ne sa qualcosa?

    Comunque complimenti a tutti e due per il blog! Davvero interessante! =)

  • http://www.stefanovollono.it Stefano Vollono

    Grazie Mille Zep, a nome di tutti e due!!! Fa sempre piacere ricevere complimenti.

    Non credo ci sia ancora alcun tipo di supporto da parte dei browser; le specifiche sono ancora in stato “draft” e potrebbero cambiare o aggiornarsi in qualsiasi momento!

    A presto ciao!

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github