Cómo usar las consultas de funciones CSS

El mundo del diseño web cambia constantemente y es emocionante mantenerse al día con las nuevas tendencias de diseño en CSS. Si eres uno de los primeros en adoptar CSS, es posible que ya estés deseando usar cosas como CSS Grid Layouts, CSS Blend Modes o algo con flexibilidad tipográfica que permita una manera fácil de crear capitulares con CSS.

Con tantos avances nuevos en CSS, es emocionante saber que nuevas formas de diseñar sitios web están en el ámbito de la posibilidad. Tradicionalmente, los diseñadores tenían que esperar para crear sitios con estas nuevas técnicas debido al problema de soporte del navegador. No desea crear para sus clientes un sitio que la mayoría de los navegadores no admitan, ¿verdad? Esto a menudo puede ser decepcionante para aquellos que están "diseñando con anticipación", pero no se pierde toda esperanza. La mayoría de las veces, hay una manera de crear una buena experiencia para todos los usuarios, sin importar qué navegador estén usando. No hay mucho que podamos hacer para forzar la compatibilidad del navegador deseado de nuestros clientes, pero hay formas en que podemos hacer que nuestros diseños cobren vida, incluso con limitaciones. Ahí es donde entran las consultas de características CSS.

Cómo tener en cuenta la compatibilidad desigual del navegador en el diseño web

¿Te suenan los términos “degradación elegante” y “mejora progresiva”? Probablemente son dos términos que usa regularmente cuando analiza formas de ayudar con las limitaciones de los navegadores más antiguos. Incluso si no llama a estos enfoques por su nombre, probablemente haya puesto en práctica los conceptos de estos.

Antes de sumergirse en las consultas de características de CSS, es importante comprender las formas comunes de abordar la inconsistencia del navegador. Estos dos enfoques han existido por mucho más tiempo y ofrecen dos formas diferentes de pensamiento de diseño.

Degradación elegante

Además de sonar como el nombre de una banda de los años 90, la degradación elegante usa la idea de proporcionar todas las campanas y silbatos en los navegadores más modernos, pero se "degradará con gracia" a un nivel más bajo de funcionalidad en los navegadores más antiguos.

Es tentador optar por el factor “wow” todo el tiempo utilizando todos los atributos CSS nuevos y brillantes que pueda, pero es importante no perder el enfoque en lo que es más importante, que es el contenido real del sitio. Por eso tus visitantes están ahí; necesitan poder ver e interactuar fácilmente con el contenido del sitio. En los navegadores más antiguos, la experiencia puede no ser tan agradable, pero brindará a sus usuarios una funcionalidad básica adecuada para que aún puedan ver el contenido del sitio sin que aparezcan cosas rotas o faltantes en la página.

mejora progresiva

Básicamente, la mejora progresiva es como una degradación elegante, excepto que al revés. El enfoque es similar, pero hace las cosas al revés. Se planifica una experiencia de usuario básica para todos los navegadores, por lo que hay coherencia con la forma en que se representan las cosas en un nivel básico, para garantizar que el contenido se pueda ver adecuadamente y que el usuario pueda realizar las tareas necesarias con lo que se proporciona. Luego se integra una funcionalidad más avanzada y estará disponible para los navegadores que puedan representarla.
Una buena manera de pensarlo es que la degradación elegante comienza de manera compleja con el objetivo de brindar una experiencia simple cuando sea necesario. Las mejoras progresivas comienzan de manera simple y luego se agregan a eso con la experiencia rica en funciones deseada.

modernizador

Cómo crear un diseño simple con CSS Grid Layouts

Si alguna vez ha incursionado en el diseño de impresión, sabe de dónde se originó la idea de los diseños de cuadrícula. Una cuadrícula es una herramienta de medición precisa que se utiliza para colocar elementos de diseño en una página. Esta idea es a menudo u...

Modernizer es la herramienta más ampliamente adoptada en una mejora progresiva. Modernizr es una biblioteca de JavaScript que comprueba si un navegador es compatible con las tecnologías web de próxima generación. No entraré en todos los detalles técnicos aquí, pero básicamente Modernizer verifica si una función está disponible en el navegador y devuelve true o false . Esto permite a los desarrolladores probar algunas de las nuevas tecnologías y proporcionar alternativas para los navegadores que no las admiten. Se hace necesario tener en cuenta cuando se necesitan polyfills.

Es una buena solución, pero Modernizer requiere JavaScript, que es pequeño en tamaño pero aún más lento que usar solo CSS. Y aunque no es común, ¿qué pasa si JavaScript no se ejecuta? Eso anula el propósito, lo que hace que las consultas de características sean una opción bastante atractiva para manejar las inconsistencias del navegador.

Consultas de características CSS

Las consultas de características de CSS son una forma de realizar un método de detección de características nativo del navegador. Estas consultas analizan si un navegador ha implementado correctamente una propiedad CSS. Esencialmente, el navegador "informa" sobre si se admite o no una determinada propiedad o valor de CSS. El resultado determina si aplicar o no un bloque de CSS.

Cuando se utilizan consultas de características CSS, es útil estar en la mentalidad de degradación elegante o mejora progresiva. Los diseñadores pueden adoptar un enfoque de degradación elegante cuando ciertas funciones no son compatibles. Las hojas de estilo utilizarán las nuevas funciones cuando estén disponibles, pero se degradarán con gracia cuando esas funciones no sean compatibles con el navegador.

En su mayor parte, existe un soporte de navegador bastante bueno para consultas de funciones CSS. Tenga en cuenta que actualmente no son compatibles con todos los navegadores, especialmente con las versiones anteriores de Internet Explorer. Asegúrese de hacer referencia a Can I Use para obtener información actualizada. No se desanime por la falta de soporte de IE para consultas de características. Cuando haga la planificación de su sitio, piense en el plan general de CSS y en lo que no tendrá soporte y comience desde allí.

Ejemplos de consulta de funciones

Para comprender completamente las Consultas de funciones de CSS, es útil verlas en acción escribiendo pequeñas pruebas en su CSS para ver si una función en particular es compatible o no. Esto lo ayudará a escribir y aplicar CSS en función de lo que sea (o no sea) compatible con un navegador y optimizar su página para el conjunto de funciones disponibles.

Diseños de cuadrícula CSS

Tomemos como ejemplo los diseños de cuadrícula CSS. Han sido un tema candente en la comunidad de diseño web, pero debido a que aún no son convencionales, podemos usar Consultas de características para probarlas. Usaremos la regla @supports y apuntaremos a los navegadores con soporte de cuadrícula. Puede notar que la sintaxis de una consulta de características (el símbolo @ ) se parece mucho a una consulta de medios, por lo que es fácil de escribir y recordar.

Si el navegador entiende display: grid , en la declaración de consulta de características CSS, se aplicarán los estilos dentro de los corchetes. De lo contrario, se saltará a nuestro respaldo.

// fallback code for older browsers (and those that do not support Feature Queries)
.content {
height: 400px;
background-color: purple;
color: white;
}
// start grid CSS

@supports (display: grid) {
.content {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
background: #f5c531;
height: 400px;
}
}


Como puede ver, se especifican diferentes estilos, dependiendo de si el navegador admite diseños de cuadrícula o no. Solo los navegadores experimentales entienden display: grid actualmente, por lo que mostrarán lo siguiente:

 Cómo un navegador que admite diseños de cuadrícula CSS representaría el código.
		


En cuanto a los navegadores más antiguos, mostrarán el respaldo, que tiene un fondo morado:
 Cómo un navegador que no admite diseños de cuadrícula CSS representaría el código.

Personalización de texto con capitulares
Las mayúsculas son una capacidad CSS bastante ingeniosa que le da una elegancia extra a la tipografía. Esta propiedad le dice al navegador que la letra sea más grande, como se suele diseñar las letras capitulares. Por ejemplo, la primera letra de la primera palabra de un párrafo podría tener el tamaño de cinco líneas de texto. La letra podría estar en negrita, con un pequeño margen en el lado derecho.
Sin embargo, no son universalmente compatibles, por lo que es mejor crear una alternativa que tenga un estilo similar al que mostraría un navegador compatible. En este ejemplo, usaremos el mismo color, estilo en negrita y fuente serif para el diseño. Podemos dar cuenta de la compatibilidad limitada initial-letter creando este estilo predeterminado como respaldo.
Veamos un ejemplo para crear una letra capitular con un enfoque diferente en lugar de usar initial-letter . (Este será su código de respaldo).

p::first-letter {
float: left;
font-size: 5em;
line-height: 1;
font-weight: bold;
margin-right: .2em;
color: #00FFFF;
font-family: serif;
}


Eso funciona, pero puede crear letras capitulares de manera más eficiente utilizando CSS Feature Queries y usando todo el potencial de CSS con initial-letter . Así es como se vería:
@supports (initial-letter: 5) or (-webkit-initial-letter: 5) {
p::first-letter {
-webkit-initial-letter: 5;
initial-letter: 5;
color: #00FFFF;
font-weight: bold;
margin-right: 0.5em;
font-family: serif;
}
}


¿Notas algo un poco diferente aquí? Tenemos algo de lógica en nuestra consulta de características con or . Actualmente, initial-letter solo se admite en Safari 9, por lo que requiere un prefijo -webkit . También es una buena idea incluir la versión sin prefijo (la compatibilidad con navegadores aumentará en el futuro). Tenga en cuenta que cuando esté experimentando, puede usar or , and , y not en sus consultas de funciones.
Esto es lo que se representa desde un navegador que admite la propiedad initial-letter :

Nuevos efectos de imagen
Hay tantos nuevos efectos de imagen que se pueden hacer con CSS. La compatibilidad con el navegador varía, por supuesto, pero algunos de estos nuevos efectos son geniales. ¿Quién hubiera pensado que las superposiciones ya no eran solo una capa de Photoshop? Echemos un vistazo a mix-blend-modes y cómo se pueden aplicar a las imágenes, cuando sean compatibles.
Además de determinar si un navegador es compatible o no con una característica específica, las Consultas de características son una herramienta para agrupar declaraciones CSS para que se ejecuten como un grupo. El siguiente ejemplo parece complejo, pero una vez que se desglosa, tendrá más sentido.
Aquí hay un fragmento HTML simple que tiene una clase aplicada en la etiqueta <article> .
&amp;amp;amp;lt;article class=&amp;amp;quot;feature-img&amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;img src=&amp;amp;quot;example-img.jpg&amp;amp;quot; /&amp;amp;amp;gt;
&amp;amp;amp;lt;/article&amp;amp;amp;gt;


El CSS:
@supports (mix-blend-mode: overlay) and ((background: linear-gradient(rgb(166, 80, 80), rgb(139, 0, 0))) or (background: -webkit-linear-gradient(rgb(166, 80, 80), rgb(139, 0, 0)))) {

.feature-img {
background: -webkit-linear-gradient(rgb(166, 80, 80), rgb(139, 0, 0));
background: linear-gradient(rgb(166, 80, 80), rgb(139, 0, 0));
}
.feature-img img {
mix-blend-mode: overlay;
}
}


Como ya sabes, la condición debe incluir tanto una propiedad como un valor. En el ejemplo anterior, está comprobando la propiedad mix-blend-mode y el valor de overlay para esa propiedad. Algunos navegadores de Android más antiguos requieren el prefijo -webkit- para degradados lineales, por lo que se ha incluido en el bloque @supports . Tenga en cuenta que cuando agrupa una serie de condiciones, es necesario el uso correcto de paréntesis.
Específicamente, este bloque está buscando navegadores que permitan el mix-blend-mode de superposición y la capacidad de representar un linear-gradient . Si eso es compatible, la imagen tendrá una superposición con un degradado aplicado, dándole un color rojo.
 La imagen original se muestra a la izquierda. Cuando un navegador es compatible con mix-blend-mode: overlay , aplica una superposición roja a la imagen con un degradado.

Para los navegadores que no tienen compatibilidad mix-blend-mode , usaría esta sintaxis con not . Se aplicarían algunos estilos, pero muy limitados en comparación con los de la consulta anterior.
@supports not(mix-blend-mode: overlay) {
.feature-img img {
opacity: 0.5;
filter: alpha(opacity=50);
}
}


 La imagen original se muestra a la izquierda, que no tiene CSS aplicado. La imagen de la derecha es lo que mostrarán los navegadores que no admitan mix-blend-mode: overlay .

Si no ha utilizado Consultas de características CSS antes, esta es una buena introducción a las posibilidades de adoptar este enfoque. Están ocurriendo muchas cosas nuevas y geniales con CSS, y las Consultas de características de CSS permiten una forma de utilizar algunas de las nuevas capacidades que aún no son totalmente compatibles.

		
		
¿Quieres más consejos de diseño? Suscríbete a El Diseño!
		
Le enviaremos los últimos tutoriales de diseño e inspiración directamente a su bandeja de entrada, una vez a la semana.
		

		
		¡Sí por favor!