Características interesantes de CSS que debe conocer

La semana pasada estuvimos hablando de pseudo-elementos y pseudo-clases en CSS. En esa publicación, vimos cómo estas funciones de CSS nos permiten generar un código más conciso, inteligible y fácil de mantener. Hoy me gustaría compartir con ustedes algunas propiedades CSS adicionales para crear sitios web adaptables que tengan en cuenta las preferencias de sus visitantes .

Relaciones de aspecto con object-fit object-position

object-fit es una propiedad de CSS que le permite establecer cómo se debe cambiar el tamaño de un elemento de reemplazo (por ejemplo, una imagen) para que se ajuste a su contenedor. Veamos qué significa esto con un ejemplo concreto, ¿de acuerdo?

Supongamos que tenemos la siguiente imagen vertical:

y queremos mostrarlo dentro de la siguiente área:

que tiene 15em de alto y ocupa el 80% del ancho disponible. En principio, podrías pensar que todo lo que tenemos que hacer es establecer un width y height específico para nuestra imagen, ¿verdad?

 .custom-size { height: 15em; width: 80%; }

Bueno, si lo haces, verás que la relación de aspecto de la imagen está desordenada:

Para evitar que una imagen se distorsione al usar un ancho y alto específicos, los desarrolladores solían confiar (y algunos aún lo hacen) en la propiedad de background CSS de un div . Entonces, en lugar de agregar la imagen usando la etiqueta img , creamos un contenedor div :

 <div></div>

establezca las dimensiones correctas en dicho div y luego agregue la imagen real a través de CSS usando las propiedades background-size y background-position :

 #custom-image { background-image: url( …/image.jpg ); background-size: cover; background-position: center; height: 15em; width: 80%; }

Y aquí puedes ver el resultado:

Escalar y recortar imágenes mediante el uso de propiedades de background CSS en una etiqueta div es una mala solución, porque ya no está utilizando la etiqueta HTML semánticamente correcta: img . Además, las etiquetas img incluyen un montón de propiedades geniales que darán como resultado sitios web más rápidos y accesibles: una propiedad alt que describe la imagen, srcset para que responda, loading para lazy load, etc.

Si desea escalar y recortar una imagen para que se ajuste a algunas dimensiones específicas sin distorsionar la imagen en sí, todo lo que tiene que hacer es usar las propiedades CSS object-fit y object-position , que se comportan como background-size y background-position hacer:

 .custom-size { height: 15em; object-fit: cover; object-position: center; width: 80%; }

Si aplica las reglas anteriores a una etiqueta img :

 <img class="custom-size" src="…/image.jpg" />

este es el resultado que obtienes:

que es exactamente lo que te interesaba, ¿no?

Si quieres saber más sobre esta propiedad, aquí tienes un enlace con toda la información necesaria.

Diseño adaptativo con consultas de medios

Las consultas de medios son un mecanismo que le permite agregar reglas CSS a su sitio web en función de las características del dispositivo o aplicación desde la cual sus visitantes acceden a la web. Estoy bastante seguro de que está algo familiarizado con ellos, ya que las consultas de medios son la base para crear sitios web receptivos, ¡pero hay mucho más que puede hacer con ellos!

Consultas de medios clásicas

Usar una consulta de medios en una hoja de estilos CSS es tan fácil como agregar la palabra clave @media con dos cosas: por un lado, una condición que describe cuándo la consulta de medios está activa y, por otro lado, el conjunto de reglas CSS que deben se cargará cuando se cumpla la condición. Por eso, las media queries son la base para construir diseños responsive: simplemente aplicas unas reglas u otras dependiendo del width del navegador del visitante.

Por ejemplo, supongamos que desea cambiar la barra lateral del siguiente párrafo:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. El león en el porche es suave y feo a veces, pero es un elemento al aire libre. Pero la necesidad de los empresarios llamado estrés térmico. Microondas reservado, pero mi puerta es siempre oa veces de autor en masa. Android y Nunc sodales interdum, tincidunt erat ac, tincidunt elit. Sin embargo, ultricies ac, arcu metus Sed congue. Para mayor comodidad, tema la proteína mejorada con leo. Es un tellus orci, tempor id egestas nec, al menos conseguir algunos jugadores.

para que utilice todos los colores del arcoíris dependiendo del ancho del navegador. Así es como puede lograr este comportamiento a través de CSS:

 .colored-border { border-left: 0.5em solid red; padding-left: 1em; } @media ( min-width: 400px ) { .colored-border { border-color: orange; } } @media ( min-width: 600px ) { .colored-border { border-color: yellow; } } @media ( min-width: 800px ) { .colored-border { border-color: green; } } @media ( min-width: 1000px ) { .colored-border { border-color: cyan; } } @media ( min-width: 1200px ) { .colored-border { border-color: blue; } } @media ( min-width: 1400px ) { .colored-border { border-color: violet; } }

Bastante fácil, ¿verdad? Simplemente necesitamos aplicar un color diferente cada vez que el ancho del navegador supere cierto umbral. Tenga en cuenta que implementamos esto utilizando un primer enfoque móvil, porque se aplican reglas "nuevas" a medida que la pantalla se hace más grande. Cambia el ancho de la ventana y verás el resultado.

Cómo implementar el modo oscuro con CSS

Los modos oscuros están de moda ahora, tanto en dispositivos móviles como de escritorio. ¿Sabías que hay una consulta de medios para ver si los usuarios prefieren los modos oscuros? Con la consulta de medios prefers-color-scheme puede ver si el usuario prefiere un esquema de color light u dark . Lo que significa que ahora tiene el poder de crear dos versiones de su sitio web para que coincida con las preferencias de todos sus visitantes.

Por ejemplo, considere el siguiente fragmento HTML:

 <div class="force-light-theme">Light Theme</div> <div class="force-dark-theme">Dark Theme</div> <br> <div class="theme">Dynamic (based on your settings)</div>

y estas reglas CSS:

 .force-light-theme { background: #eee; color: black; } .force-dark-theme { background: #333; color: white; } @media (prefers-color-scheme: light) { .theme { background: #eee; color: black; } } @media (prefers-color-scheme: dark) { .theme { background: #333; color: white; } }

Dependiendo de su configuración, verá que la parte "Dinámica" del fragmento HTML anterior se parece al tema claro o al tema oscuro:

Muy bien, ¿eh? ¡Y sencillo!

Otros casos de uso interesantes con consultas de medios

Hay muchas consultas de medios que puede usar (tiene una lista completa aquí), pero me gustaría centrarme en una en particular. En concreto, quiero explicarte cómo aplicar diferentes estilos dependiendo de si la página se muestra en el navegador o está a punto de imprimirse. Todo lo que tiene que hacer es usar la palabra clave de print o screen para la consulta de medios de la siguiente manera:

 @media print { … } @media screen { … }

o cree dos archivos CSS separados, uno para cada caso de uso, e inclúyalos en su HTML usando la propiedad de media de una etiqueta de link :

 <link media="print" src="…/print.css" /> <link media="screen" src="…/default.css" />

Lo interesante de esto es que puedes crear una hoja de estilo que transforme tu sitio en una pieza de contenido diseñada para ser impresa. Así, por ejemplo, podría ocultar partes dinámicas de la web que no tienen sentido en una versión impresa (como menús o formularios). O incluso puede asegurarse de que algunas cosas que se pierden cuando se imprimen se vuelven visibles, como por ejemplo, la URL de destino de un enlace:

 @media print { .menu { display: none; } .show-links a:after { content: " (" attr(href) ")"; } }

cuyo resultado es el siguiente:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis leo en turpis interdum, en pharetra velit elementum. Nam eget lacus sed lacus dictum scelerisque. Proin porta ligula sed mi semper, vel interdum massa auctor. Pellentesque et massa congue, tincidunt erat ac, tincidunt elit. Sed ac dolor metus. Nam commodo metus sed ligula consectetur interdum. Curabitur odio est, tempor id egestas nec, aliquam at nisl.

Variables CSS

Finalmente, hablemos de otra increíble característica de CSS: las propiedades personalizadas de CSS (también conocidas como variables de CSS). Los sitios web complejos tienen una gran cantidad de CSS y es bastante común que el mismo valor se repita una y otra vez. Por ejemplo, su paleta de colores, bordes, rellenos, etc., se utilizan en todas partes. Bueno, las variables CSS simplifican esta complejidad. ¡Y son extremadamente útiles para implementar el modo oscuro fácilmente!

Las variables CSS son exactamente lo que está pensando: una forma de almacenar y reutilizar un valor CSS específico detrás de un nombre significativo. Es mucho más fácil entender qué es --main-text-color que #333 , ¿no?

La declaración de una propiedad personalizada se realiza mediante un nombre de propiedad personalizada que comienza con un guión doble ( -- ) y un valor de propiedad que puede ser cualquier valor CSS válido. Como cualquier otra propiedad, esto está escrito dentro de un conjunto de reglas, así:

 element { --main-color: red; --main-padding: 2em 1em; }

El selector que usa en el bloque de reglas donde ha definido la variable CSS determina su alcance. Es decir, si define una variable dentro de una regla div.banner , esa variable solo estará disponible en ese ámbito. Sin embargo, lo más común es crear variables en el ámbito global utilizando la pseudoclase :root :

 :root { --main-color: red; --main-padding: 2em 1em; }

Para usar una variable CSS, simplemente necesita especificar su nombre dentro de la función var :

 p { color: var(--main-color); padding: var(--main-padding); }

CSS está aquí para ayudarte

La estructura HTML de una página web es como los cimientos de una casa: necesita una base sólida si desea construir algo sólido. Al crear una página web, asegúrese de utilizar un árbol HTML limpio y semánticamente correcto. Esto dará como resultado una página que funcionará en todos los navegadores para todos los visitantes, y la aplicación de trucos CSS encima será simple y efectiva.

Espero que les haya gustado el post de hoy. Si lo hiciste, compártelo con tus amigos.

Imagen destacada de William Daigneault en Unsplash.