css: un


Desde que los desarrolladores escriben código CSS, estamos buscando desesperadamente una forma de diseñar un elemento principal en función de las características secundarias. Esto no ha sido posible hasta ahora. CSS introdujo el :has ¡pseudo-clase que permite diseñar un padre basado en un selector CSS relativo!

Veamos algunos casos de uso para :has en CSS:

/*
  If an `a` element contains an image, set the `a`'s display
*/
a:has(img) {
  display: block;
}

/*
  If a `figure` has a `caption` with a `multiline` class
  allow the `figure` to have any height
*/
figure {
  height: 200px;
}
figure:has(caption.multiline) {
  height: auto;
}

/*
  Hide an advert containing `div` until ads load
  and have been injected
*/
.ad-container {
  display: none;
}
.ad-container:has(.ad) {
  display: block;
}

/*
  If we have an `article` element without a heading,
  add top padding because `H1`s have top padding
*/
article:not(:has(h1)) {
  padding-top: 20px;
}

Safari de Apple es el primer navegador compatible :has , aunque deberíamos ver más pronto, ya que es parte de la especificación oficial de CSS. Ahora que tenemos esta nueva pseudoclase, ¿crees que la usarás mucho? ¿O seguirá con sus soluciones actuales?

Supervisión del rendimiento del sitio web
Supervisión del rendimiento del sitio web
Supervisión del rendimiento del sitio web
Supervisión del rendimiento del sitio web
  • Bienvenidos a mi nueva oficina

    Bienvenidos a mi nueva oficina

    Mi primer desarrollo web profesional fue en una pequeña imprenta donde me sentaba todo el día en un cubículo sin ventanas. Sufrí en este entorno confinado durante casi cinco años antes de poder encontrar un trabajo remoto donde trabajaba desde casa. La primera...

  • De la webcam al GIF animado: ¡el secreto detrás de chat.meatspac.es!
  • Presentamos MooTools ScrollSidebar

    Presentamos MooTools ScrollSidebar

    ¿Con qué frecuencia reúne un bloque de navegación HTML o un bloque de utilidad de elementos que desea poder ver en todas partes de una página? Creé una solución que te permitirá hacer esto de forma transparente: ScrollSidebar. ScrollSidebar te permite...

  • Sombras de cuadro CSS entre navegadores

    Sombras de cuadro CSS entre navegadores

    Las sombras de cuadro han existido en la web por un tiempo, pero no se crearon con CSS; tuvimos que usar un juego de Photoshop para crearlas. Para alguien sin talento para el diseño, que soy yo, la necesidad de usar Photoshop era nula. Solo porque nosotros...

Si quieres conocer otros artículos parecidos a css: un puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas