Con la llegada de nuevos dispositivos y la facilidad para conectarse a internet a través de ellos, se ha derivado en un cambio para la maquetación de las páginas web y con ello el diseño responsivo y la accesibilidad.
Imagina que en una familia de 6 personas: los padres, un hijo mayor, una hija adolescente y dos niños pequeños, necesitan comprar una playera blanca; al momento de ir a la tienda, se van a encontrar con que el proveedor ha maquilado diversas playeras blancas en diferentes tamaños y comprarán aquella con la talla adecuada a la complexión de cada persona. Es así como funciona el diseño responsivo, el proveedor, que viene a ser el desarrollador de diseño o frontend, debe considerar que la página web sea de la talla adecuada (resolución de pantalla) para los diferentes dispositivos sin que la página se comprometa visualmente.
Pero no sólo es el diseño responsivo de lo que se preocupan los frontends, sino también de la accesibilidad que pueda tener la página web, es decir, que personas con discapacidad (visual, motriz, auditiva, cognitiva) puedan tener acceso e interactuar con ella, y esto es algo que la misma OMS (Organización Mundial de la Salud) ha decretado.
Para tratar lo anterior, han surgido tecnologías que permiten a los frontends consolidar una página web para todos. Una de ellas es Media Query.
“Si esto ocurre, entonces hacer eso debes”.
Las Media Queries son reglas que forman parte de la tecnología de CSS que nos permiten crear estilos condicionales para nuestras páginas web, aplicables únicamente en determinadas situaciones. Para familiarizarnos con los tecnicismos, a las condicionales se les denomina media types y los atributos o características de estas se denominan media features. El funcionamiento de las media queries es muy simple: si la media type declarada se resuelve como verdadera, es decir, se cumple; las reglas de estilo definidas para esa condición se aplican, ¡listo!.
Las media type se pueden declarar en el encabezado de la página:
<link rel="stylesheet" href="style-print.css" media="print">
Lo anterior nos indica que si la página se está visualizando para imprimir, entonces se aplica la hoja de estilo “style-print.css”.
Otra manera de declarar una media type, es dentro del archivo .css:
media only screen and (max-width: 500px) {
body {
background-color: #CCCCFF;
}
}
Esta forma nos indica que si el ancho del navegador es más pequeño que 500px entonces el color de fondo actual cambiará al que se indica en código hexadecimal.
La sintaxis general para la segunda forma es:
@media media type and (media features) {
reglas de estilo css…
}
Ver el ejemplo en Codepen:
See the Pen YXMMgW by Nancy Gpe. Toledo Ramos (@GitHuberian) on CodePen.
