La semana pasada estuvimos hablando de pseudo-elementos y pseudo-clases en CSS. En esa entrada vimos cómo estas features de CSS nos permitían generar código más conciso, inteligible y fácil de mantener. Hoy me gustaría compartir contigo algunas propiedades adicionales de CSS que permiten adaptar la página web a las preferencias de tus visitantes.
La magia de object-fit y object-position
La primera propiedad que veremos hoy es object-fit. object-fit es una propiedad CSS que permite establecer cómo un elemento de reemplazo (por ejemplo, una imagen) debe escalarse para ocupar el espacio de su contenedor. Como esto suena un poco abstracto, vamos a verlo mejor con un ejemplo.
Supón que tenemos la siguiente imagen vertical:
y que queremos meterla en un área de este tamaño:
Es decir, queremos que la imagen mida 15em de altura y que ocupe un 80% del ancho disponible. En principio, lo único que tenemos que hacer es especificar las propiedades width y height para conseguir el efecto deseado:
.custom-size {
height: 15em;
width: 80%;
}Pero si lo hacemos así veremos cómo la imagen pasa a «deformarse»:
Para evitar que la imagen se «deforme» cuando le aplicamos un ancho y alto cualesquiera, mucha gente suele usar la propiedad background de CSS. Así, en lugar de añadir la imagen usando la etiqueta img, lo que hacen es crear un div que sirva como contenedor:
<div id="custom-image"></div>y luego meten la imagen vía CSS, la cual se puede escalar y posicionar como queramos 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%;
}dando como resultado esto:
Usar un div para escalar imágenes sin deformarlas metiéndolas como fondo de ese div es una mala solución ya que estamos dejando de usar etiquetas HTML semánticamente correctas para apañar un problema visual. Además, renunciar a la etiqueta img implica renunciar a un montón de propiedades interesantes: srcset para usar imágenes responsive, loading para activar la carga lazy de imágenes, etc.
Si quieres escalar una imagen para que ocupe unas dimensiones concretas y no quieres deformar la imagen en el proceso, lo único que debes hacer es usar la propiedad object-fit y object-position, las cuales se comportan igual que los ya clásicos background-size y background-position. Basta un CSS como el siguiente:
.custom-size {
height: 15em;
object-fit: cover;
object-position: center;
width: 80%;
}con una etiqueta img de toda la vida:
<img class="custom-size" src="…/image.jpg" />para conseguir el resultado ideal:
Si quieres saber más sobre esta propiedad, aquí te dejo un enlace con toda la información necesaria.
Adaptándote al usuario con media queries
Las media queries son un mecanismo que permite añadir reglas CSS a tu sitio web en función de las características del dispositivo o la aplicación desde el que se está accediendo a la web. Probablemente las hayas usado ya si has implementado alguna web responsive, pero las media queries permiten hacer muchas más cosas…
Nelio Popups
¡Un plugin fantástico! Es muy fácil crear ventanas emergentes con el editor que ya conoces y las opciones que ofrece están muy bien diseñadas.
Juan Hernando
Media queries clásicas
Definir media queries en una hoja de estilos CSS es tan fácil como añadir la directiva @media en el mismo junto a dos cosas: por un lado, el conjunto de reglas asociadas a esa media query y, por otro, las reglas que determinan cuándo se pueden usar dichas reglas. Hasta ahora, lo más habitual ha sido usar las media queries como un mecanismo para implementar diseños responsive.
Para crear un diseño responsive aplicábamos un conjunto de reglas u otras según el ancho width del navegador. Por ejemplo, podemos hacer que la barra lateral del siguiente párrafo:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis leo in turpis interdum, at 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.
cambie de color pasando por todos los colores del arcoiris en función del ancho del navegador con los siguientes estilos 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;
} }Fíjate que el código anterior está implementado enfocando los estilos desde la perspectiva mobile first. Es decir, definimos un conjunto de reglas básicas (que funcionen para el móvil) y según la pantalla va creciendo de tamaño, añadimos reglas que estilen la página en el escritorio.
Cómo implementar un modo oscuro con CSS
De un tiempo a esta parte se ha puesto de moda el «modo oscuro», tanto en móviles como en escritorio. ¿Sabías que existe una media query para detectar las preferencias del usario y ver si usa el modo oscuro?
Usando la propiedad prefers-color-scheme podemos ver si el usuario prefiere un esquema de colores claro (light) u oscuro (dark). Sabiendo esto, podemos crear dos esquemas de colores diferentes para nuestra web (uno claro y el otro oscuro) que respete las preferencias del usuario sin perder nuestra identidad.
Por ejemplo, usando el siguiente ejemplo 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>acompañado de las siguientes reglas:
.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; }
}podemos conseguir el siguiente resultado:
Otros ejemplos curiosos con media queries
Existen un montón de media queries que puedes usar (tienes una lista completa aquí), pero me gustaría enseñarte una muy útil para acabar. En concreto, quiero explicarte cómo aplicar estilos diferentes según si la página va a visualizarse en el navegador o va a ser impresa en papel. El efecto es tan sencillo como añadir la propiedad print o screen a tu media query:
@media print { … }
@media screen { … }o, según como, crear dos hojas de estilo diferentes e incluir una u otra añadiendo una propiedad especial a la etiqueta link:
<link media="print" src="…/print.css" />
<link media="screen" src="…/default.css" />Si creas una hoja de estilo específiac para imprimir tus páginas, puedes esconder las partes dinámicas de la web que no tienen sentido en una versión impresa (como, por ejemplo, el menú o los formularios) y puedes hacer pijadas como, por ejemplo, que las URL de los enlaces sean visibles. Aquí te dejo un ejemplo
@media print {
.menu {
display: none;
}
.show-links a:after {
content: " (" attr(href) ")";
}
}y aquí ves el resultado de cómo quedaría:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis leo in turpis interdum, at 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, no podía dejar escapar la oportunidad de hablarte de las propiedades personalizadas de CSS (también conocidas como variables CSS), ya que son especialmente útiles para implementar el modo oscuro, hacer que nuestra web tenga paletas de colores, etc.
Las variables CSS son exactamente lo que estás pensando: una forma de dar nombre a un valor CSS que luego podemos usar en nuestras reglas CSS. Así, por ejemplo, podríamos definir una variable con el color por defecto de nuestro texto, otra con el color de un botón de acción, otra con el padding de un botón de acción, etc.
Las variables CSS son un nombre cualquiera que empieza con dos guiones (--) y que definimos dentro de un bloque de reglas:
element {
--main-color: red;
--main-padding: 2em 1em;
}El selector que usas en el bloque de reglas donde hayas definido la variable CSS determina el ámbito de la misma. Es decir, si defines una variable dentro de una regla div.banner, esa variable solo estará disponible en ese ámbito. No obstante, lo más habitual es crear las variables en el ámbito global usando la pseudo-clase :root:
:root {
--main-color: red;
--main-padding: 2em 1em;
}Para poder usar una variable CSS, debes usar la función var:
p {
color: var(--main-color);
padding: var(--main-padding);
}CSS está aquí para ayudarte
El esqueleto HTML de una página web es como los cimientos de una casa. Cuando crees una página web, preocúpate primero de crear una buena estructura HTML que sea semánticamente correcta y que no contenga nodos innecesarios. Si lo haces bien, tendrás una base sólida sobre la que aplicar todos los trucos que comparto contigo en estas entradas.
Espero que te haya gustado la entrada de hoy y, si es así, compártela con tus amigos. ¡Hasta la próxima!
Imagen destacada de William Daigneault en Unsplash.
Deja una respuesta