La :has()
pseudoclase es, sin lugar a dudas, mi nueva función CSS favorita. Sé que lo es para muchos de ustedes también, al menos aquellos de ustedes que tomaron la encuesta State of CSS. La capacidad de escribir selectores al revés nos da más superpoderes que nunca creí posibles.
Digo "más superpoderes" porque ya ha habido un montón de ideas inteligentes realmente sorprendentes publicadas por un grupo de personas súper inteligentes, como:
Este artículo no es una guía definitiva para :has()
. Tampoco está aquí para regurgitar lo que ya se ha dicho. Solo soy yo (hola 👋) saltando al carro por un momento para compartir algunas de las formas que es más probable que use :has()
en mi trabajo del día a día… es decir, una vez que sea oficialmente compatible con Firefox que es inminente.
Cuando eso suceda, puede apostar que comenzaré a usar :has()
por todo el lugar. Estos son algunos ejemplos del mundo real de cosas que construí recientemente y pensé: "Vaya, esto será mucho mejor una vez". :has()
es totalmente compatible.”
Evite tener que llegar fuera de su componente de JavaScript
¿Alguna vez ha creado un componente interactivo que a veces necesita afectar los estilos en otra parte de la página? Tomemos el siguiente ejemplo, donde <nav>
es un Mega menú, y al abrirlo cambia los colores de la <header>
contenido por encima de él.
Siento que necesito hacer este tipo de cosas todo el tiempo.
Este ejemplo particular es un componente React que hice para un sitio. Tuve que "llegar fuera" de la parte Reaccionar de la página con document.querySelector(...)
y alternar una clase en el <body>
, <header>
, u otro componente. Ese no es el fin del mundo, pero seguro que se siente un poco asqueroso. Incluso en un sitio completamente React (por ejemplo, un sitio Next.js), tendría que elegir entre administrar un menuIsOpen
estado mucho más arriba en el árbol de componentes, o haga la misma selección de elementos DOM, que no es muy React-y.
Con :has()
, el problema desaparece:
header:has(.megamenu--open) { /* style the header differently if it contains an element with the class ".megamenu--open" */
}
¡No más jugar con otras partes del DOM en mis componentes de JavaScript!
Mejor creación de bandas en la experiencia de usuario
Agregar "franjas" de filas alternativas a sus tablas puede ser una buena mejora de UX. Ayudan a sus ojos a realizar un seguimiento de la fila en la que se encuentra mientras escanea la tabla.
Pero en mi experiencia, esto no funciona muy bien en mesas con solo dos o tres filas. Si tiene, por ejemplo, una tabla con tres filas en el <tbody>
y está "cortando" cada fila "par", podría terminar con una sola raya. Eso no vale realmente un patrón y puede hacer que los usuarios se pregunten qué tiene de especial esa fila resaltada.
Usando esta técnica donde usos bramus :has()
para aplicar estilos basados en el número de niños, podemos aplicar rayas de tabla cuando hay más de, digamos, tres filas:
¿Qué hacer más elegante? También puede decidir hacer esto solo si la tabla también tiene al menos una cierta cantidad de columnas:
table:has(:is(td, th):nth-child(3)) { /* only do stuff if there are three or more columns */
}
Eliminar la lógica de clase condicional de las plantillas
A menudo necesito cambiar el diseño de una página dependiendo de lo que hay en la página. Tome el siguiente diseño de cuadrícula, donde la ubicación del contenido principal cambia las áreas de la cuadrícula dependiendo de si hay una barra lateral presente.
Eso es algo que podría depender de si hay páginas hermanas configuradas en el CMS. Normalmente haría esto con lógica de plantilla para agregar condicionalmente Clases de modificadores BEM al envoltorio de diseño para tener en cuenta ambos diseños. Ese CSS podría verse así (reglas de respuesta y otras cosas omitidas por brevedad):
/* m = main content */
/* s = sidebar */
.standard-page--with-sidebar { grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page--without-sidebar { grid-template-areas: '. m m m m m m m m m . .';
}
En cuanto a CSS, esto está totalmente bien, por supuesto. Pero hace que el código de la plantilla sea un poco desordenado. Dependiendo de su lenguaje de plantillas, puede ser bastante feo agregar condicionalmente un montón de clases, especialmente si tiene que hacer esto con muchos elementos secundarios también.
Contrasta eso con un :has()
-enfoque basado en:
/* m = main content */
/* s = sidebar */
.standard-page:has(.sidebar) { grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page:not(:has(.sidebar)) { grid-template-areas: '. m m m m m m m m m . .';
}
Honestamente, eso no es mucho mejor en cuanto a CSS. Pero eliminar las clases de modificadores condicionales de la plantilla HTML es una buena victoria si me preguntas.
Es fácil pensar en decisiones de microdiseño para :has()
- como una tarjeta cuando tiene una imagen en ella — pero creo que también será muy útil para estos cambios de diseño de macros.
Mejor gestión de la especificidad
Si usted lee mi ultimo articulo, sabrás que soy un fanático de la especificidad. Si, como yo, no quiere que sus puntajes de especificidad exploten al agregar :has()
y :not()
a lo largo de sus estilos, asegúrese de usar :where()
.
Eso es porque la especificidad de :has()
está basado en el elemento más específico en su lista de argumentos. Entonces, si tiene algo como una identificación allí, su selector será difícil de anular en la cascada.
Por otra parte, la especificidad de :where()
siempre es cero, sin aumentar nunca la puntuación de especificidad.
/* specificity score: 0,1,0. Same as a .standard-page--with-sidebar modifier class
*/
.standard-page:where(:has(.sidebar)) { /* etc */
}
El futuro es brillante
Estas son solo algunas cosas que no puedo esperar para poder usar en producción. El CSS-Tricks Almanac también tiene un montón de ejemplos. ¿Qué estás deseando hacer con :has()
? ¿Con qué tipo de ejemplos del mundo real te has topado donde :has()
hubiera sido la solución perfecta?
- Distribución de relaciones públicas y contenido potenciado por SEO. Consiga amplificado hoy.
- Platoblockchain. Inteligencia del Metaverso Web3. Conocimiento amplificado. Accede Aquí.
- Fuente: https://css-tricks.com/more-real-world-uses-for-has/
- 1
- 11
- 7
- 9
- 98
- a
- capacidad
- Poder
- Nuestra Empresa
- arriba
- Mi Cuenta
- afectar
- Todos
- ya haya utilizado
- hacerlo
- las increíbles ofertas de
- y
- Otra
- Aplicá
- enfoque
- áreas
- argumento
- artículo
- basado
- porque
- Bet
- mejores
- entre
- Poco
- Soplo
- construido
- Manojo
- Puede conseguir
- tarjeta
- cascadas
- a ciertos
- el cambio
- Cambios
- sus hijos
- Elige
- clase
- privadas
- cms
- código
- Columnas
- componente
- contiene
- contenido
- podría
- Curso
- CO
- decisiones
- definitivo
- Dependiente
- Diseño
- No
- "Hacer"
- DOM
- No
- DE INSCRIPCIÓN
- elementos
- especialmente
- etc.
- Incluso
- NUNCA
- Cada
- ejemplo
- ejemplos
- experience
- Ojos
- Favoritos
- Feature
- pocos
- en fin
- Firefox
- siguiendo
- adelante
- Desde
- completamente
- obtener
- da
- Va
- va
- maravillosa
- Cuadrícula
- cuadrícula-plantilla-áreas
- guía
- suceder
- es
- ayuda
- esta página
- hi
- más alto
- Destacado
- HTML
- HTTPS
- ENFERMO
- ideas
- imagen
- es la mejora continua
- in
- interactivo
- IT
- JavaScript
- tan siquiera solo una
- Guardar
- Tipo
- Saber
- idioma
- Apellido
- Disposición
- que otros
- pequeño
- Mira
- mirando
- Lote
- Macro
- hecho
- Inicio
- para lograr
- administrar
- muchos
- podría
- momento
- más,
- MEJOR DE TU
- Mozilla
- ¿ Necesita ayuda
- Nuevo
- Next
- Next.js
- normalmente
- número
- Oficialmente
- ONE
- apertura
- Otro
- afuera
- parte
- particular
- partes
- Patrón de Costura
- Personas
- perfecto
- Colocar
- Platón
- Inteligencia de datos de Platón
- PlatónDatos
- posible
- presente
- bastante
- Problema
- Producción
- publicado
- en comunicarse
- Reaccionar
- Leer
- mundo real
- recientemente
- la eliminación de
- sensible
- FILA
- reglas
- Ejecutar
- Said
- mismo
- escanear
- selección
- set
- Compartir
- página web
- inteligente
- So
- a medida
- algo
- algo
- en alguna parte
- especial
- soluciones y
- especificidad
- comienzo
- Estado
- raya
- Rayas
- papa
- súper
- Soportado
- mesa
- ¡Prepárate!
- TD
- plantilla
- La
- El Estado
- el mundo
- cosa
- cosas
- pensamiento
- Tres
- a lo largo de
- a
- tonelada
- demasiado
- TOTALMENTE
- seguir
- verdadero
- Al revés
- us
- utilizan el
- usuarios
- ux
- esperar
- formas
- ¿
- sean
- que
- QUIENES
- ganar
- preguntando
- Actividades:
- mundo
- valor
- se
- escribir
- Usted
- tú
- zephyrnet