Un CSS estable, potente y digno de herramientas que puedes usar hoy en día.
Creo que todo desarrollador de frontend debe saber que :has() es más que un "selector superior", cómo y por qué de un subgrid, cómo anidar con la sintaxis de CSS integrada, cómo permitir que el navegador equilibre el ajuste del texto del título y cómo usar las unidades de consulta del contenedor.
Esta publicación es una continuación de los 6 fragmentos de CSS del año pasado que todo desarrollador de frontend debe conocer en 2023.
CSS:has(.potential-beyond-being-a-parent-selector)
:has()
:has() llegó a los principales navegadores a fines de 2023. Este nuevo selector parece inocente y pequeño, pero te sorprenderás con todos los casos de uso que puede desbloquear: juegos, reactividad, diseño adaptado al contenido, componentes inteligentes y mucho más que se explora bien en este artículo de Jhey.
Estos son algunos ejemplos del uso de :has() como selector superior. Tiene este nombre porque, por lo general, el tema de un selector está al final, como ul li, donde li es el asunto y obtiene los estilos. Con :has(), el elemento al comienzo del selector puede convertirse en el asunto. En el siguiente ejemplo, el botón tiene un espacio si hay un elemento dentro con una clase de .icon. La tarjeta cambia de orientación si hay una imagen adentro.
button:has(.icon) {
gap: 1ch;
}
.card:has(img) {
grid-auto-flow: row;
}
Un selector largo deseado es cambiar un diseño en función de la cantidad de elementos que tiene. Ahora, esto es posible con :has(), ya que puede mantener el contenedor como el sujeto mientras consulta la cantidad de elementos secundarios.
main:has(> :nth-child(5)) {…}
Otro ejemplo de nivel superior es cambiar los estilos configurados en todo el documento cuando una casilla de verificación específica en la página esté habilitada:
html:has(#dark-mode:checked) {…}
Estos son casos de uso simples que no cambian el tema del selector. Si solo miras ejemplos como este, es posible que creas que :has() se limita a ser un selector superior. Sin embargo, considera los siguientes
ejemplos. Estos comprueban si hay algo basado en un elemento principal común y, luego, giran el selector que está sujeto a un elemento secundario en algún lugar más profundo de la página.
En este ejemplo, se muestra un elemento de error de formulario si alguna de sus entradas no es válida:
form:has(:user-invalid) .error {
display: block;
}
Este se desliza fuera del área de contenido principal cuando una barra de navegación lateral tiene una clase de .--is-open:
html:has(#sidenav.--is-open) main {
translate: -320px;
}
Esta es una demostración divertida que usa :has() como selector superior, :has() con consultas de cantidad y consultas de contenedor para crear un diseño de cuadrícula que pueda mostrar de forma elegante 1 a 12 elementos en orientación horizontal o vertical:
Crear una subcuadrícula
subgrid
Durante muchos años, la comunidad web de frontend solicitó ayuda a la subcuadrícula para completar y terminar el potente y popular motor de diseño de cuadrícula de CSS. Ahora está disponible en los tres motores principales.
Obtén más información sobre la subcuadrícula aquí si deseas obtener una descripción general.
body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
> article {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
}
}
Anidar con CSS
nesting
El anidamiento de CSS integrado está disponible en todos los navegadores principales en 2023. Incluso actualicé mi sitio web para quitar el proceso de compilación que compilaba la anidación y ahora envío una hoja de estilo más pequeña. Sí, las hojas de estilo con anidación son más pequeñas y todas las Herramientas para desarrolladores del navegador están listas para representarlas.
Puedes encontrar una descripción general de la sintaxis de anidación de CSS aquí para obtener todos los detalles. El siguiente ejemplo de código muestra un ejemplo de sintaxis.
.you {
.can-totally-ship-this {
&.if-you-wanted {
/* it's VERY MUCH like SCSS */
&:is(:hover, :focus-visible) {
/* put a bird on it */
}
}
}
}
.for-theming {
@media (prefers-color-scheme: dark) {
/* you can nest media queries */
}
}
/* or for theming with [data-theme="dark"] */
.button {
background: black;
color: white;
/* nest and do more than just append, flip it and reverse it */
[data-theme="dark"] & {
background: white;
color: black;
}
}
Permita que el navegador equilibre los títulos
balance
pretty
Sin text-wrap: balance, los desarrolladores y los redactores de contenido tienen que realizar las sugerencias de salto de línea, como los elementos <wbr> o ­. Se trata, en general, de una batalla perdida porque, apenas se traduzca, se acerque o se modifique el contenido, no hay garantía de que esas sugerencias de ajuste estén en el lugar correcto para la nueva presentación del contenido.
Con el ajuste de texto equilibrado, puedes dejar esta tarea para el navegador. Puedes ver una comparación en el siguiente CodePen.
Usa unidades de consulta de contenedor
cqw
La publicación del año pasado sugirió que todos los desarrolladores de frontend deberían saber cómo escribir una consulta de contenedor. Si aún no lo aprendiste, haz que 2024 sea el año para el éxito y revisa también las unidades de consulta de contenedores. A modo de descripción general, Ahmad Shadeed escribió un excelente artículo sobre las unidades de consulta de contenedores en 2021.
Hay seis unidades de contenedor nuevas:
- Una variante intercalada
cqi. - Una variante de ancho
cqw. - Una variante de bloque
cqb. - Una variante de altura
cqh. - Una variante para la longitud que sea menor
cqmin - Una variante para la longitud que sea mayor a
cqmax
Considera una situación para animaciones intrínsecas y relativas en un contenedor. Un elemento secundario que se desliza por completo desde su contenedor con 100cqi, que es el 100% del tamaño intercalado del contenedor
@keyframes slide-out-of-container {
to {
translate: -100cqi;
}
}
A continuación, se muestra una tarjeta con tipografía responsiva del contenedor y una imagen que se adapta a la orientación del contenedor, convirtiéndose en la mitad de su tamaño si la orientación es horizontal.
.card {
:is(h2,h3) {
font-size: clamp(1.5rem, 5cqi, 4rem);
}
img {
inline-size: 100cqi;
@container (orientation: landscape) {
inline-size: 50cqi;
}
}
}
Si estas unidades son nuevas para ti, te recomendamos que revises todas las unidades disponibles en 2024.