Il W3C rilascia le CSS Conditional Rules in RC

Il W3C ha rilasciato ufficialmente in RC (Release Candidate) il modulo relativo alle Conditional Rules (regole condizionali). Il modulo in questione specifica il comportamento del browser per le regole CSS condizionali: caricare e quindi applicare alla pagina web visualizzata sezioni di stylesheet in funzione di particolari condizioni.

Uno degli aspetti interessanti di questo modulo è la possibilità  di nidificare alcune "@-rule" (leggi at-rule) come @media e @support.

Ogni regola condizionale specifica una condizione che, se verificata, indica al processore CSS di applicare le regole specificate all'interno del blocco. Se la condizione non è verificata, il blocco interno deve essere ignorato.

Ad esempio, il codice seguente applica lo stile (display: none) all'elemento #navigation se "il media è una stampante" (@media print).

@media print {
/* hide navigation controls when printing */
#navigation { display: none }
}

Ovviamente le regole possono essere innestate:

@media print { // rule (1)
/* hide navigation controls when printing */
#navigation { display: none }
@media (max-width: 12cm) { // rule (2)
/* keep notes in flow when printing to narrow pages */
.note { float: none }
}
}

La regola interna (.note { float: none }) verrà  applicata solo se si verificheranno tutte le regole "innestanti" (@media print + @media (max-width: 12cm)).

Oltre a @media, i blocchi condizionali possono essere usati anche con @support, che consente di applicare uno stile solo se il browser (o, meglio, il processore CSS del browser) supporta determinate regole CSS.
Ad esempio, lo stile seguente viene applicato solo se il processore supporta gli ombreggiamenti. Nel caso la caratteristica non fosse supportata, sarebbe possibile applicare dei work-around.

@supports ( box-shadow: 2px 2px 2px black ) or
( -moz-box-shadow: 2px 2px 2px black ) or
( -webkit-box-shadow: 2px 2px 2px black ) or
( -o-box-shadow: 2px 2px 2px black ) {
.outline {
color: white;
-moz-box-shadow: 2px 2px 2px black;
-webkit-box-shadow: 2px 2px 2px black;
-o-box-shadow: 2px 2px 2px black;
box-shadow: 2px 2px 2px black; /* unprefixed last */
}
}

Maggiori informazioni sul sito W3C: http://www.w3.org/TR/css3-conditional/.