Krypton Solid

Polyfill de consulta de elementos – Revista Smashing

Polyfill de consulta de elementos – Revista Smashing

El diseño web receptivo ha transformado la forma en que se diseñan y construyen los sitios web. Nos ha inspirado a pensar más allá de las clasificaciones de dispositivos y a utilizar consultas de medios para adaptar un diseño al tamaño de la ventana gráfica del navegador. Esto, sin embargo, se desvía de la estructura jerárquica de CSS y caracteriza los elementos relativos a la ventana gráfica, en lugar de a su contenedor.

El diseño web receptivo ha transformado la forma en que se diseñan y construyen los sitios web. Nos ha inspirado a pensar más allá de las clasificaciones de dispositivos y a utilizar consultas de medios para adaptar un diseño al tamaño de la ventana gráfica del navegador. Esto, sin embargo, se desvía de la estructura jerárquica de CSS y caracteriza los elementos relativos a la ventana gráfica, en lugar de a su contenedor.

El uso extensivo de consultas de medios puede ser la respuesta para hoy, pero es no es una solución viable a largo plazo. Las consultas de medios no permiten módulos reutilizables que se adapten en función del tamaño de sus contenedores.

Otras lecturas en SmashingMag:

¿Qué es el diseño web adaptable?

El diseño web receptivo no se limita a un conjunto de tecnologías; más bien, es un enfoque diferente para diseñar y construir sitios web. Yo, como muchos, tomé Las palabras de Ethan sobre el diseño web receptivo demasiado literalmente y pasó por alto la esencia de lo que se decía:

«Cuadrículas fluidas, imágenes flexibles y consultas de medios son los tres ingredientes técnicos para el diseño web receptivo, pero también requieren una forma diferente de pensar».

Hemos logrado grandes cosas al adoptar los «ingredientes técnicos» establecidos para el diseño web receptivo, pero tenemos mucho espacio para crecer cuando se trata de una «forma diferente de pensar». Pensar de manera diferente debería afectar no solo cómo diseñamos y construimos nuestros sitios web, sino también cómo diseñamos y construimos las herramientas y tecnologías en las que se basan nuestros sitios web.

Diseño modular

Cuando supe cómo se pueden utilizar las consultas de medios en el diseño web receptivo, me entusiasmaron las posibilidades. Sin embargo, no pasó mucho tiempo antes de que me enterara de las limitaciones. Las consultas de medios son excelentes para adaptar diseños a varios tamaños de pantalla, pero terribles para crear diseños modulares. El CSS modular ya es bastante difícil y las consultas de medios brindan muy poca o ninguna ayuda. Los diseños verdaderamente modulares deben responder a los tamaños de los contenedores, no solo al tamaño de la ventana gráfica. Sin embargo, las consultas de medios se basan en la ventana gráfica, en lugar del contenedor de un elemento. Hay alguna esperanza de CSS estándar en el horizonte, en forma de Borrador de trabajo del W3C, al permitir que se rompa la herencia en cascada y restablecer un elemento a sus valores predeterminados. Pero, ¿qué pasa con las consultas de medios?

El truco de @media

Los desarrolladores web son maestros en tomar algo creado para un propósito y usarlo para lograr otras cosas. La historia de la Web está plagada de ejemplos de esto, y las consultas de los medios no son una excepción. Felicitaciones a Ian Storm Taylor por escribir sus pensamientos en el artículo «Las consultas de medios son un truco. » Los hacks son necesarios en la Web para proporcionar la funcionalidad deseada hasta que se logre el soporte adecuado, así como para brindar soporte a los navegadores más antiguos. La Estados del W3C, «Al utilizar consultas de medios, las presentaciones se pueden adaptar a una gama específica de dispositivos de salida sin cambiar el contenido en sí. » La palabra clave aquí es «puede», pero solo porque lata haz algo, no significa que tú debería… ¿Pero tenemos otra opción?

La consulta de elementos

Presentamos la consulta del elemento. Una consulta de elementos es similar a una consulta de medios en que, si se cumple una condición, se aplicará algo de CSS. Condiciones de consulta de elementos (como min-width, max-width, min-height y max-height) se basan en elementos, en lugar del navegador. Desafortunadamente, CSS aún no admite consultas de elementos, pero eso no debería impedirnos soñar, piratear y presionar por nuevos estándares.

Ejemplo conceptual

Considere el siguiente ejemplo, en el que el menú de navegación debería volverse visible cuando alcance un ancho mínimo de 500 píxeles (que representa una de las muchas sintaxis posibles):

nav (min-width: 500px) {
    display: block;
}

Compare esto con una consulta de medios en la que la visibilidad del menú de navegación depende del ancho de la ventana gráfica y debe tener en cuenta el relleno y otras declaraciones de los elementos principales:

@media all and (min-width: 520px) {
    nav {
        display: block;
    }
}

Ahora imagine tener que construir un componente modular que debe colocarse en contenedores de varios tamaños en una sola página. Un enfoque actual es proporcionar diferentes clases temáticas (como .module–large) para activar CSS en consultas de medios. Sin embargo, esto agrega muchas complicaciones y requiere que un módulo sepa cómo reaccionará su padre a varios anchos de ventana gráfica.

Problemas: condiciones no válidas y en bucle

Hay varios casos en los que el CSS de una consulta de elemento invalidaría la consulta de elemento en sí o crearía recursividad. Con suerte, el navegador podría detectar estas condiciones y responder adecuadamente.

Considere los siguientes ejemplos.

Una vez que un elemento alcanza los 500 píxeles de ancho, se redimensiona a 200 píxeles, momento en el que la regla ya no se aplicaría:

.element (min-width: 500px) {
    width: 200px;
}

Una vez que el ancho de un elemento alcanza los 31.250 ems, su tamaño de fuente se reduciría, lo que cambia la definición de la unidad em:

.element (min-width: 31.250em) {
    font-size: 0.75em;
}

Una vez que el ancho de un contenedor alcanza los 450 píxeles, el tamaño de su hijo cambia a 400 píxeles, lo que reduciría el tamaño del contenedor:

.container { float: left; }
.child { width: 500px; }
.container (min-width: 450px) > .child {
    width: 400px;
}

Hay muchos otros ejemplos de este tipo, pero entiendes el punto: las consultas de elementos no son tan simples como esperábamos.

Polyfill de consulta de elementos

Las consultas de elementos parecen bastante impresionantes, pero también tienen algunos problemas reales. Para ayudar a resolverlos, escribí un polyfill de prueba de concepto. El polyfill me ha permitido comprender cómo puede reaccionar un navegador ante diversas condiciones. A medida que avanzaba, me di cuenta de que el polyfill podría tener un valor real en el debate de la comunidad web sobre las consultas de elementos, y que algunos desarrolladores incluso podrían comenzar a utilizar las consultas de elementos hoy.

El script elementQuery polyfill está disponible en GitHub para que lo use, bifurque y contribuya.

Sintaxis del selector

La sintaxis utilizada en los ejemplos anteriores causó limitaciones, por lo que actualicé el polyfill para admitir una sintaxis de selector de atributos. La ~= selector de atributos comprueba si el valor está contenido en una lista delimitada por espacios (compatible con los navegadores modernos anteriores a Internet Explorer 6).

Los siguientes ejemplos muestran reglas CSS que utilizan la sintaxis necesaria para el polyfill elementQuery.

Esta regla se consulta a sí misma por una sola condición:

header[min-width~="500px"] {
    background-color: #eee;
}

Esta regla se consulta a sí misma por múltiples condiciones:

header[min-width~="500px"][max-width~="800px"] {
    background-color: #eee;
}

Esta regla consulta a un padre por una condición:

header[min-width~="31.250em"] nav {
    clear: both;
}

Cómo funciona

Desafortunadamente, el polyfill elementQuery requiere JavaScript y el Chisporrotear motor selector (que está incrustado en jQuery). Cuando el modelo de objetos de documento (DOM) está listo, elementQuery escanea el document.styleSheets colección para cualquier regla CSS que use elementQuery. Cuando encuentra una coincidencia, extrae la siguiente información:

  • Selector. Como header, ul > li.class
  • Tipo de consulta min-width, max-width, min-height, max-height
  • Valor de la consulta. Como 500px, 31.250em

elementQuery luego usa esta información para agregar o eliminar atributos de elementos que coinciden con el selector y la condición de consulta dados.

Soporte ampliado

La mayoría de los navegadores, pero no Internet Explorer, no brindan acceso al contenido de las hojas de estilo entre dominios, lo que causa problemas cuando los archivos CSS se entregan desde una red de entrega de contenido. Además, analizar las hojas de estilo lleva tiempo (aunque no mucho). Entonces, creé dos ramas para elementQuery: Maestro y pinchar. La rama maestra incluye el código para extraer la información necesaria de elementQuery (selector, tipo de consulta, valor de consulta), y también proporciona un selectors() función para exportar la información. La rama prod requiere que la información se declare en JavaScript, lo que evita el problema del archivo entre dominios y el tiempo necesario para analizar las hojas de estilo.

Aquí hay un ejemplo de cómo exportar información elementQuery usando la rama maestra:

console.log(JSON.stringify(elementQuery.selectors()));

Y aquí hay un ejemplo de cómo importar información elementQuery usando la rama prod:

elementQuery({"header":{"min-width":["500px","31.250em"],"max-width":["800px"]}});

Ejemplos de trabajo

He reunido algunos ejemplos de trabajo en CodePen (usando la rama maestra) con los que puede experimentar o bifurcar. Me encantaría ver qué otros ejemplos crean las personas (que probablemente serán mucho más geniales que el mío). Solo asegúrate de etiquetarlos con #elementquery para que otros puedan beneficiarse.

  • Red: elementos anidados
  • Menú: elementQuery basado en ancho
  • Blockquote: elementQuery basado en altura

Ser creativo

No escribí esto solo para que se suban al tren de las consultas de elementos, sino para alentar a las personas a pensar en cómo podemos resolver los problemas que limitan nuestro medio. Mantengamos la discusión y hagamos de la Web un lugar mejor. ¡Así que vuélvete loco y haz cosas geniales!

Otras lecturas

(Fuente de la imagen en la portada: Más allá de los puntos de interrupción de consultas de medios comunes)

Deja un comentario