CSS estable, potente y digno de herramientas que puedes usar actualmente.
Creo que todos los desarrolladores front-end deben saber que :has() es más que un "selector principal".
el cómo y el por qué de una subgrid, cómo anidar con la sintaxis de CSS integrada, cómo dejar que la
ajuste de texto del título del equilibrio del navegador y cómo usar las unidades de consulta de contenedor
Esta publicación es una continuación de los 6 fragmentos de CSS del año pasado que todo desarrollador de frontend debería conocer en 2023.
CSS:has(.potential-beyond-being-a-parent-selector)
:has()
:has() llegó a todos los navegadores principales a fines del 2023 Este nuevo selector parece
pequeño e inocente, pero te sorprenderás de todos los casos de uso que puede desbloquear:
juegos, reactividad, diseño adaptado al contenido, componentes inteligentes y
se explican mucho más 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 se puede convertir
del asunto. En el siguiente ejemplo, el botón tiene un espacio si hay un elemento en su interior.
con una clase de .icon. La tarjeta cambia de orientación si hay una imagen en su interior.
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 contiene. Esto ahora es posible
con :has(), ya que puede mantener el contenedor como sujeto mientras se consulta la cantidad de elementos secundarios.
main:has(> :nth-child(5)) {…}
Otro ejemplo de nivel superior, en la que se cambian los estilos establecidos en todo el documento Cuando se habilita una casilla de verificación específica de la página:
html:has(#dark-mode:checked) {…}
Estos son casos de uso simples que no cambian el tema del selector. Si solo ves ejemplos,
de esta manera, podrías pensar que :has() está limitado a ser un selector superior. Ten en cuenta lo siguiente:
ejemplos. Estos buscan elementos basados en un principal en común y, luego, giran el selector
a un niño en alguna parte de la página.
En este se muestra un elemento de error de formulario si alguna de sus entradas no es válida:
form:has(:user-invalid) .error {
display: block;
}
Esta se desliza hacia afuera del área de contenido principal cuando un panel de navegación lateral tiene una clase de .--is-open:
html:has(#sidenav.--is-open) main {
translate: -320px;
}
Esta es una demostración divertida en la que se usa :has() como selector superior, :has() con consultas sobre la cantidad
y contenedores para crear un diseño de cuadrícula capaz de mostrar de forma elegante
Entre 1 y 12 elementos en orientación horizontal o vertical:
Crea una subcuadrícula
subgrid
Durante muchos años, la comunidad web de front-end solicitó subgrid para completar y finalizar el popular y potente motor de diseño de cuadrícula de CSS. Ahora está disponible en los tres motores principales.
Si deseas obtener una visión general, obtén más información sobre la subcuadrícula aquí.
body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
> article {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
}
}
Anida el estilo CSS
nesting
La anidación de CSS integrada comenzó a estar disponible en todos los navegadores principales en 2023. Incluso actualicé mi sitio web para eliminar 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 anidadas son más pequeñas y todas las Herramientas para desarrolladores del navegador están listas para representarlo.
Aquí encontrarás una descripción general de la sintaxis de anidamiento de CSS. para ver 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;
}
}
Permite que el navegador equilibre los titulares
balance
pretty
Sin text-wrap: balance, los desarrolladores y redactores de textos deben quedar en espera de las sugerencias de salto de línea
como elementos <wbr> o ­. Es principalmente una batalla perdedora porque tan pronto como
contenido se traduzca, haga zoom o modifique de alguna manera, no hay garantía de que
las sugerencias de ajuste estarán en el lugar correcto para la nueva presentación del contenido.
Con el ajuste de texto equilibrado, puedes dejarle este trabajo al navegador. Puedes ver una comparación en el siguiente CodePen.
Usa unidades de consulta de contenedor
cqw
En la publicación del año pasado, se sugirió que todo desarrollador front-end debería saber cómo escribir un una consulta de contenedor. Si aún no has aprendido, haz que el 2024 sea el año para dar el salto. y también obtienes unidades de consulta en contenedores. En resumen, Ahmad Shadeed escribió un excelente artículo sobre las unidades de consulta de contenedores en 2021.
Existen seis nuevas unidades de contenedor contenido:
- Una variante intercalada
cqi. - Una variante de ancho
cqw. - Una variante de bloque
cqb. - Una variante de altura
cqh. - Es una variante para la longitud que sea menor
cqmin. - Es una variante para la longitud más grande de
cqmax.
Considera una situación para animaciones intrínsecas y relativas a un contenedor. Un elemento secundario que se desliza fuera por completo de su contenedor con 100 cqi, es decir, el 100% del tamaño intercalado del contenedor.
@keyframes slide-out-of-container {
to {
translate: -100cqi;
}
}
Esta es una tarjeta con tipografía receptiva de contenedor y una imagen que se adapta a la orientación del contenedor, y se convertirá en la mitad del 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, probablemente te convenga revisa todas las unidades disponibles para ti en el 2024.