¡Qué es! Importante #12: Pruebas de Safari, ::marca de verificación, posicionamiento del ancla HTML y más

Autor Team Estudio Arquitectos

Publicado el: mayo 29, 2026

¿Qué es importante? #12 Hablando de lo antiguo (probado en Safari cuando no tienes Safari), lo nuevo (::checkmark), medio (ancla posicionada pero usando HTML), etc.

¡Abróchate el cinturón de seguridad!

Prueba en Safari cuando no tengas Safari

La ventana del navegador Safari en macOS muestra el cuadro de diálogo Acerca de Safari con filtros de ruido translúcidos de color rojo y naranja. — fuente: Maestro de interfaz de usuario

Safari es el segundo navegador web más popular, pero sólo está disponible para usuarios de Apple. me parece bien. Quiero decir, Apple invirtió mucho dinero para hacer de Safari un navegador propietario que esté profundamente integrado con el software y hardware de Apple. Sin embargo, esto hace que probar el sitio web en Safari sea un poco complicado. Declan Kidlow explicó nuestras opciones Prueba en Safari cuando no tengas Safari.

primer vistazo `::checkmark`

Sunkami Fafulola nos dio nuestro primer vistazo ::checkmark Pseudoelementolo que resuelve el viejo problema de no poder aplicar (realmente) estilo a las marcas de verificación. Tenga en cuenta que esto también apunta a los indicadores de estado marcados para radios y selecciones, ¡no solo a las casillas de verificación!

Diferentes estilos de estilo `border-shape` + `shape()`

Acompaña a Afi señalar que podemos Crea más estilos de formas cuando se combinan border-shape y shape() Función (en comparación con clip-path) y puede cambiar fácilmente entre ellos.

Tres variaciones de una forma ondulada representadas en rojo, que muestran una versión con contorno, una versión con relleno sólido y una versión recortada dentro de un cuadrado rojo sólido. — fuente: Consejos CSS

Una guía concisa `sibling-index()` y `sibling-count()`

Durgesh Pawar hizo uno Investigación en profundidad sibling-index() y sibling-count()mostrándonos todas las cosas interesantes que podemos hacer con estas funciones CSS casi básicas.

Reserva de inserción de CodePen

Además, no te pierdas el de Durgesh. Una serie de dos partes sobre los obstáculos de la conversión de vistas Justo en CSS-Tricks.

Utilice atributos de datos y asociaciones ancla de gestión de alto nivel. `attr()`

¡Esto es realmente mío! muy decepcionado de escuchar anchor Se han eliminado los atributos, esto proporcionaría una forma de gestionar asociaciones de anclaje utilizando HTML. Demuestro mi técnica alternativa que implica Administrar asociaciones de anclaje con propiedades de datos y avanzadas attr().

No voy a estropear CSS, pero aquí están las diferentes sintaxis HTML que he explorado:

<!-- anchor attribute -->
<div anchor="anchorA">Boat A</div>
<div id="anchorA">Anchor A</div>

<!-- Data attributes with custom ident (requires attr()) -->
<div data-boat="--anchorA">Boat A</div>
<div data-anchor="--anchorA">Anchor A</div>

<!-- Data attributes (requires attr() and ident()) -->
<div data-boat="anchorA">Boat A</div>
<div data-anchor="anchorA">Anchor A</div>

Participe en la Encuesta de Estado CSS 2026

Imagen oficial de la Encuesta de estado de CSS 2026, que muestra un logotipo de CSS estilizado dentro de un diamante rosa y morado sobre un fondo oscuro.

¡Es esa época del año otra vez!

Me encantan estas encuestas “tal cual” (especialmente Estado actual de CSS 2026 investigación, pero estoy seguro de que ya lo sabes). Pero este año se siente diferente y no soy el único que lo nota.

Arrastrarse desde el principio:

Respira hondo. Cálmate. Está bien si no comprende todas las nuevas propiedades de CSS. La verdad es que pocos de nosotros lo hacemos.

Mira, uno de los objetivos de esta encuesta es siempre ayudar a los desarrolladores a conocer las últimas y mejores mejoras de CSS. La desventaja es que todo este progreso a veces puede resultar abrumador.

Es por eso que este año hicimos un esfuerzo consciente para reducir la cantidad de funciones cubiertas en la encuesta y, en cambio, centrarnos en las funciones más importantes.

Lo entiendo totalmente. Mantenerse al día con CSS es cada vez más difícil. ¡Mi lista de “cosas a revisar” es cada vez más larga! Dicho esto, nunca ha habido un momento más emocionante para ser fanático de CSS. La sensación cuando aprendes una nueva característica y luego lanzan dos más es abrumadora, pero de la mejor manera.

Sin embargo, el tiempo no crece en los árboles, por lo que tenemos que determinar en qué características invertir, para qué sirven estas encuestas “tal cual”. Este año van a trabajar duro y centrarse realmente en lo que más importa.

Pero si tienes apetito todo Cosas de CSS, escuché que hay un gran blog ¡Para tal fin!