Resumen
La regla-at CSS @media
asocia un grupo de declaraciones anidadas, en un bloque CSS delimitado por llaves, con una condición definida por un media query. La regla-at @media
puede ser usada no solo en el nivel superior de la hoja de estilos, sino también dentro de cualquier grupo de reglas conditionales.
La regla-at @media
puede ser accesible por medio de la interfaz de modelo de objeto CSSMediaRule
.
Sintaxis
@media <media-query-list> { <group-rule-body> }where
<media-query-list> = <media-query>#
where
<media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?
where
<media-condition> = <media-not> | <media-and> | <media-or> | <media-in-parens>
<media-type> = <ident>
<media-condition-without-or> = <media-not> | <media-and> | <media-in-parens>where
<media-not> = not <media-in-parens>
<media-and> = <media-in-parens> [ and <media-in-parens> ]+
<media-or> = <media-in-parens> [ or <media-in-parens> ]+
<media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed>where
<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )where
<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value> | <mf-value> [ '<' | '>' ]? '='? <mf-name> | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value> | <mf-value> '>' '='? <mf-name> '>' '='? <mf-value>where
<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>
Un <media-query>
está compuesto por un tipo de medio opcional y/o un conjunto de características de medio.
Tipos de medios
- all
- Aplicable a todos los dispositivos.
- Destinado material paginado y para documentos visibles en pantalla en modo de vista previa para impresión. Por favor, consulte la sección de medios paginados, y la sección de Media en el tutorial de Introducción para más información acerca de problemas de formateo específicos para los medios paginados.
- screen
- Destinado a principalmente a pantallas de computadora a color.
- speech
- Destinado a sintetizadores de voz. Nota: CSS2 tenía un tipo de medio similar llamado 'aural' para este propósito. Vea el apéndice sobre hojas de estilo aural para más detalles.
tty
, tv
, projection
, handheld
, braille
, embossed
, aural
), pero fueron descontinuados en Media Queries 4 y no deben ser usados.Características de Medios (media feature)
Cada característica de medios verifica una característica específica del navegador o dispositivo.
Nombre | Resumen | Notas |
---|---|---|
width |
Anchura del viewport | |
height |
Altura del viewport | |
aspect-ratio |
Relación de aspecto anchura-altura del viewport | |
orientation |
Orientación del viewport | |
resolution |
Densidad de pixeles del dispositivo | |
scan |
Proceso de escaneo del dispositivo | |
grid |
¿El dispositivo es un grid o un mapa de bits? | |
update-frequency |
Qué tan rápido (si lo hace) puede el dispositivo modificar la apariencia del contenido | Incluido en Media Queries Nivel 4 |
overflow-block |
Cómo maneja el dispositivo el contenido que excede los límites del viewport a lo largo del eje de bloque | Incluido en Media Queries Nivel 4 |
overflow-inline |
¿Puede desplazarse hacia el contenido que excede los límites del viewport? | Incluido en Media Queries Nivel 4 |
color |
Componente de número de bits por color del dispositivo, o cero si el dispositivo no es a color. | |
color-index |
Número de entradas en la tabla de búsqueda de color del dispositivo, o cero si el dispositivo no usa una tabla. | |
display-mode |
Modo de visualización de la aplicación, según se especifique en la propiedad display del manifiesto de la aplicación web. | Definido en la especificación del Manifiesto de Aplicación Web. |
monochrome |
Bits por pixel en el buffer de marco monocromático del dispositivo, o 0 si el dispositivo no es monocromático. | |
inverted-colors |
¿El agente usuario o el Sistema Operativo está invirtiendo los colores? | Incluido en Media Queries Nivel 4 |
pointer |
¿El mecanismo de entrada principal es un dispositivo apuntador? y de ser así, ¿qué tan preciso es? | Incluido en Media Queries Nivel 4 |
hover |
¿El mecanismo de entrada principal permite que el usuario posicione el puntero sobre los elementos? | Incluido en Media Queries Nivel 4 |
any-pointer |
¿Hay algún mecanismo de entrada que sea dispositivo apuntador? y de ser así, ¿qué tan preciso es éste? | Incluido en Media Queries Nivel 4 |
any-hover |
¿Algún mecanismo de entrada disponible permite que el usuario posicione el puntero sobre los elementos? | Incluido en Media Queries Nivel 4 |
light-level |
Nivel de luz ambiental actual | Incluido en Media Queries Nivel 4 |
scripting |
¿Se soporta lenguaje de script (p.ej. JavaScript)? | Incluido en Media Queries Nivel 4 |
device-width |
Anchura de la superficie de representación del dispositivo | Descontinuado en Media Queries Nivel 4 |
device-height |
Altura de la superficie de representación del dispositivo | Descontinuado en Media Queries Nivel 4 |
device-aspect-ratio |
Relación de aspecto anchura-altura del dispositivo | Descontinuado en Media Queries Nivel 4 |
-webkit-device-pixel-ratio |
Número de pixeles reales del dispositivo por pixel CSS | No estándar; Específica de WebKit/Blink. De ser posible, use la característica resolution en su lugar . |
-webkit-transform-3d |
¿Se soportan transformaciones 3D? |
No estándar; Específica de WebKit/Blink |
-webkit-transform-2d |
¿Se soportan transformaciones 2D? |
No estándar; Específica de WebKit |
-webkit-transition |
Se soportan transiciones CSS? |
No estándar; Específica de WebKit |
-webkit-animation |
¿Se soportan animaciones CSS? |
No estándar; Específica de WebKit |
Ejemplos
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }
}
@media screen, print {
body { line-height: 1.2 }
}
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
body { line-height: 1.4 }
}
Especificaciones
Especificación | Estado | Comentarios |
---|---|---|
Compatibility Standard La definición de 'CSS Media Queries' en esta especificación. |
Living Standard | Estandariza las características -webkit-device-pixel-ratio y -webkit-transform-3d . |
CSS Conditional Rules Module Level 3 La definición de '@media' en esta especificación. |
Candidate Recommendation | Define la sintaxis básica de la regla @media . |
Media Queries Level 4 La definición de '@media' en esta especificación. |
Candidate Recommendation |
Se agregan las características |
Media Queries La definición de '@media' en esta especificación. |
Recommendation | Sin cambios. |
CSS Level 2 (Revision 1) La definición de '@media' en esta especificación. |
Recommendation | Definición inicial. |
Compatibilidad de navegadores
Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Soporte básico (all , print , screen ) |
1.0 | 1.0 (1.7 o anterior) | 6.0 | 9.2 | 1.3 |
speech |
Sin soporte | Sin soporte | Sin soporte | 9.2 | Sin soporte |
Media features (características de medios) | 1.0 | 1.0 (1.7 o anterior) | 9.0 | 9.2 | 1.3 |
Característica display-mode |
? | 47 (47) | ? | ? | ? |
Característica | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Soporte básico (all , print , screen ) |
1.0 | 1.0 (1.7) | (Yes) | 9.0 | 3.1 |
speech |
Sin soporte | Sin soporte | Sin soporte | 9.0 | Sin soporte |
Media features (características de medios) | 1.0 | 1.0 (1.7) | (Yes) | 9.0 | 3.1 |
Característica display-mode |
? | (Yes) | ? | ? | ? |
Véase también
- Media queries
- El modelo CSSOM
CSSMediaRule
asociado a esta regla-at.