Después de las media queries llegan las feature queries en CSS3

Post original en JASoft.org: http://www.jasoft.org/Blog/post/Despues-de-las-media-queries-llegan-las-feature-queries-en-CSS3.aspx

QuerySi alguna vez has utilizado Modernizr sabrás que esta biblioteca de JavaScript te permite determinar qué características soporta un navegador y cuáles no, tanto mediante código como mediante CSS (gracias a unas clases que añade a tu página por código).

La verdad es que Modernizr está muy bien, pero añade complejidad a las páginas y puede afectar al rendimiento ya que debe procesarse antes de poder aplicar las correcciones apropiadas. ¿No sería estupendo que pudiésemos hacer este tipo de comprobaciones directamente con reglas CSS?

Al igual que CSS3 nos trajo las media queries para poder hacer consultas sobre el medio en el que se visualiza una página, introdujo también las “CSS feature queries” que se consiguen mediante el uso de la palabra clave @supports en las reglas CSS.

Del mismo modo que las media queries usan regiones de tipo @media para agrupar reglas que sólo actuarán bajo ciertas condiciones, @supports hace lo mismo pero si sse cumplen condiciones sobre el soporte de ciertas características.

Por ejemplo, esta es una media query que se aplica cuando el usuario está visualizando la página por pantalla y con un ancho de la página menor de 1350px:

@media screen and (max-width:1350px) {

 

    /* Las reglas que se necesiten */

 

}

Pues con @supports la cosa es parecida, por ejemplo, podemos escribir:

@supports ( box-shadow: 2px 2px 2px black ) {

  .textoFlotante {

    color: white;

    box-shadow: 2px 2px 2px black;

  }

}


En este caso lo que se está comprobando es si el navegador actual soporta la propiedad box-shadow (para crear sombras) con unos determinados valores….

[continúa…]

Lee el post completo en JASoft.org: http://www.jasoft.org/Blog/post/Despues-de-las-media-queries-llegan-las-feature-queries-en-CSS3.aspx

Sin categoría

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *