Supports es el Modernizr de CSS3

Todas las funcionalidades relacionadas con el diseño que actualmente se hacen con JavaScript se están empezando a adoptar en CSS de una forma más simple e intuitiva. Hace unos días hablé de cuando usar y cuando no Modernizr y mencioné la regla @supports, que tiene como fin aplicar estilos CSS si se cumplen ciertas condiciones (como que se admita transformaciones 3D, sombras...), por lo que sustituiría a Modernizr en el terreno del diseño.

1. /* Si admite la rotación se visualizará */


2. @supports (transform: rotate(-30deg)){


3. div{


4. transition:1s all ease;


5. }


6. }

El ejemplo anterior es algo básico que se podría hacer con @supports, que por desgracia solo tiene compatibilidad con Opera y con Firefox (activándolo) . Pero la forma de usarse es simplemente: añadir tras @supports las propiedades CSS que tienen que poder ejecutarse o no y según esas reglas el contenido de @supports se aplicará. También se pueden aplicar varias reglas juntas y usar operadores como and, or y not.



via Pedro Gutiérrez [Xitrus - RSS] http://xitrus.es/blog/83/Supports_es_el_Modernizr_de_CSS3