Este artículo pretende ser una introducción a algunas de las nuevas directivas que están por venir en CSS.

La directiva @supports

La primera de la que os quiero hablar es la directiva @supports que, para hacernos una idea, será una especie de modernizr nativo.
No me extenderé más sobre ella porque hace poco escribí un artículo invitado en creativasfera, que podéis leer aquí.

La directiva @viewport

La segunda es la directiva @viewport. Digamos que es el intento de la W3C para tranferir la meta viewport a CSS. La directiva básica sería algo como:

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

Además hay otros valores como min/max-width, min/max-height, min/max/user-zoom, zoom, orientation. Aquí está la referencia completa de la W3C.

La directiva @document

Finalmente me gustaría hablar de la directiva @document, que es una directiva condicional que se aplicará dependiendo de la url actual.

Un ejemplo sería el siguiente:

@document url(http://contacto.emiliocobos.net) {
	/*Reglas sólo para mi página de contacto*/
}
@document domain(emiliocobos.net){
	/* Reglas para todo el dominio */
}
@document  url-prefix(http://emiliocobos.net/tag/) {
	/* Reglas para las páginas de las etiquetas de este blog */
}
@document  regexp("https://.*") {
	/* Reglas para las páginas que sean SSL */
}

Podéis leer más sobre la directiva document en la W3C o MDN.

Soporte

Estas propiedades son altamente experimentales, así que no deberíais usarlas hasta que no se hayan asentado. Excepto @viewport. Esa directiva recomiendo incluirla ahora mismo. Primero porque ya hay cierto soporte (Opera e IE 10). Segundo porque el soporte irá a más y ocupa poco, no compromete la visibilidad de la página.

La directiva @supports será implementada en Firefox 17 (aunque probablemente haya que activar alguna flag para que funcione), y en Opera y Webkit ya se están poniendo con ello.

La directiva @document era propietaria de mozilla hasta hace poco, y por lo tanto puede ser usada a partir de Firefox 3.6 como @-moz-document (excepto la función regexp). De hecho Stylus para Firefox usa esta función (ni idea de como lo hace para otros navegadores). Del resto de navegadores aún no hay noticia.