CSS Moderno y sus novedades
Es muy posible que lleves tiempo sin tocar CSS y desconozcas muchas de las novedades que incorpora CSS actualmente. En este artículo haremos un repaso de tareas comunes que hoy en día se pueden hacer de una forma mejor que la comunmente utilizada. En los siguientes ejemplos, encontrarás la forma tradicional de hacer las cosas en la tab izquierda, y en la tab derecha la forma más moderna.
Agrupación de selectores
Tipos de combinadores lógicos
Esencialmente, tenemos dos combinadores lógicos principales :is()
y :where()
. De todas formas, aquí te dejo una tabla donde podemos ver que mecanismos de combinadores lógicos tenemos a nuestra disposición:
Combinadores lógicos | Descripción |
:is() | Agrupaciones que se puede combinar con otros selectores. |
:where() | Agrupaciones identico al anterior, pero con menor especificidad CSS. |
:has() | Permite seleccionar elementos padres que tengan ciertas características en sus hijos. |
:not() | Permite seleccionar elementos que no cumplan ciertas características. |
Combinador :is()
Resscribir de forma más compacta y sencilla los selectores múltiples combinados:
1 2 3 4 5
.container .item, .container .parent, .container .element { /* ... */ }
1 2 3
.container :is(.item, .parent, .element) { /* ... */ }
Observa que hemos indicado los 3 casos iniciales en un sólo selector (que añade 3 posibilidades diferentes por parámetro). Esto permite crear código mucho más compacto y sencillo de leer y escribir.
Antiguamente, esta pseudoclase era conocida como
:matches()
, pero finalmente fue renombrada a:is()
, por lo que es posible que encontremos ejemplos de esta forma si accedemos a documentación antigua.
El combinador :where()
Por otro lado, existe otro combinador lógico denominado :where()
, que funciona exactamente igual que el combinador :is()
. La única diferencia que tiene es en cuanto la especificidad CSS.
Mientras que el combinador :is()
, la especificidad es el valor más alto de la lista de parámetros de :is()
, en el caso de :where()
la especificidad es siempre cero.
Veamos el siguiente ejemplo:
1
2
3
4
5
6
7
8
9
/* Especificidad (0,2,0) */
.container :is(.list, .element, .menu) {
/* ... */
}
/* Especificidad (0,1,0) */
.container :where(.list, .element, .menu) {
/* ... */
}
¿Cuándo usar cada uno?
Selector | Especificidad | ¿Cuándo usarlo? |
---|---|---|
:is() | Hereda la más alta | Cuando quieras agrupar selectores manteniendo su especificidad |
:where() | Cero | Para reglas “por defecto” o fáciles de sobreescribir |
El combinador
:where()
puede ser útil para casos en los que se quiere anular la especificidad de un elemento fácilmente si se sobrescribe con otro selector. Esto lo hace especialmente interesante para crear unos estilos con especificidad muy baja que posteriormente van a ser sobreescritos y no queremos que la especificidad lo evite o lo vuelva complejo de sobreescribir.
Colores RGB
Escribir colores RGB con canales alfa (transparencia):
1 2 3
.container { background: rgba(255, 255, 0, 0.5): }
1 2 3
.container { background: rgb(100% 100% 0 / 50%); }
Nesting CSS
Crear componentes CSS nativos autocontenidos dentro de otros:
1 2 3 4 5 6 7 8 9 10 11
.parent { background: grey; } .parent .element { background: darkred; } .parent .element:hover { background: red; }
1 2 3 4 5 6 7 8 9 10 11
.parent { background: grey; & .element { background: darkred; &:hover { background: red; } } }
Centrado CSS
Realizar un centrado en ambos ejes directamente, con una sola propiedad:
1 2 3 4 5
.parent { display: grid; justify-content: center; align-items: center; }
1 2 3 4
.parent { display: grid; place-items: center; }
Variables CSS
Utilizar custom properties para guardar información:
1 2 3 4 5
.parent { width: 300px; height: 300px; background: grey; }
1 2 3 4 5 6 7
.parent { --size: 300px; width: var(--size); height: var(--size); background: var(--color, grey); }
Media Queries
Posibilidad de utilizar una sintaxis más amigable para media queries:
1 2 3 4 5 6
@media (min-width: 800px) and (max-width: 1280px) { .menu { background: red; } }
1 2 3 4 5
@media (800px <= width <= 1280px) { .menu { background: red; } }