soy Kseso y esto EsCSS

Novedades en las @media queries level 4 de Css: ¿tienes puntero? y ¿:hover?

Las nuevas @media queries de Css incluidas en el último documento del W3c (level 4) que las desarrolla. Codifica en función de si hay puntero, si puede hacer :hover o por un rango de valores.

Novedades en las @media queries level 4 de Css: ¿tienes puntero? y ¿:hover?

·Por Kseso ✎ 1
Novedades en @media queries level 4 de Css

Recientito como pan del día está el último documento que desarrolla las @medias queries de Css: Media Queries Level 4 vió la luz el pasado día 5, con estatus de First Public Working Draft.

Y en una lectura rápida y sin entrar a fondo en sus contenidos, porque desde ahora hasta que alcance el status de recomendación y el marchamo de usable cambios tendrá, sí reparé en alguna nueva @media querie que seguro será bien recibida y te pondrá los dientes largos y estarás deseando poder usarla (o no, que esto sólo es una introducción).

Novedades en @media queries Css

Vamos con las novedades más significativas que trae el último documento sobre las @medias queries Css:

@media queries por Rangos

Hasta ahora si se querían aplicar una serie de reglas para un rango determinado de tamaños, por ejemplo de 600px a 1000px, cabía la posibilidad de jugar con los operadores lógicos y alguna propiedad:

@media (min-width: 600px) and (max-width: 1000px) { /* conjunto de reglas chulas*/ }

Ahora lo tendremos mucho más fácil y comprensible: basta con indicar el rango de tamaños en el que aplicar las reglas con los operadores correspondientes a mayor | menor | igual qué:

@media (600px < width < 1000px) { /* conjunto de reglas chulas*/ }

Media Features in a Range Context

Interaction Media Features: ¿Tienes puntero?

Uno de los aspectos a tener presente al definir las reglas Css es la cantidad cada día mayor de aparatos que carecen de dispositivo señalador o puntero. Y por lo tanto tener presente cómo compatibilizar los selectores que incluyen alguna pseudoclase como :hover.

Tres son las nuevas @media queries que introduce este documento para lidiar con la existencia o no de punteros y que tipo de señalizador tiene el dispositivo:

@media (pointer)
La @media querie 'pointer' se utiliza para consultar acerca de la presencia y la precisión de un dispositivo señalizador como opción principal. Valores posible:
  1. none: no hay puntero.
  2. coarse: hay algún puntero con capacidades limitadas.
  3. fine: puntero plénamente funcional.
@media (hover)
de forma "casual" = "¿puedes hacer :hover sobre los elementos con tu dispositivo señalizador principal?
  1. none: No. no puedo.
  2. on-demand: Sí, pero mediante alguna función o acción intermedia. Como una pulsación prolongada en los ciertos dispositivos táctiles.
  3. hover: Sin problemas. El dispositivo puede hacer :hover de forma sencilla y simple.
@media (any-pointer | any-hover)
A diferencia de las dos anteriores que se refieren al disponibilidad o no como opción principal, estan dos @media queries obvian ese detalle y preguntan por la posibilidad de señalar o hacer :hover con independencia de que sea más o menos "inmediato" su uso. Los valores posibles son los mismos que los de 'pointer' y 'hover' respectivamente.
@media (pointer:coarse) { #checkbox_1:checked ~ .elmt { opacity: 1; } } @media (hover) { .menu li:hover ul { display: block; left: auto; } }

@media query light-level

Y como última novedad el documento Media Queries Level 4 incluye la regla @media light-level para el control del contraste de la web en función de la luz ambiente.

Sobre esta no me explayo, pues ya le dediqué un artículo en exclusividad hace unas fechas (20/02/2014): Light-level: una @media query Css para el control de la luminosidad y sus cambios. Sólo recordarte un ejemplo de uso posible:

@media (light-level: normal) { p { background: url("texture.jpg"); color: #333; font-weight: 300;} } @media (light-level: dim) { p { background: #222; color: #ccc; font-weight: 700;} } @media (light-level: washed) { p { background: #fff; color: #000; font-size: 2em; font-weight: 900;} }

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso