¿Qué es importante #6: encabezado, forma del borde, truncamiento del texto en el medio, etc.

Aunque han sido unas semanas tranquilas con las nuevas funciones de la plataforma web, todavía nos enfrentamos a una pregunta: ¿Qué es importante? Superpoblado. Parece que la comunidad online tiene mucho que decir, ¡así que abróchate el cinturón!

@keyframes La animación puede ser una cadena.

Compartido por Peter Croner un hecho interesante @keyframes animación – Pueden ser cadenas:

@keyframes "@animation" {
  /* ... */
}

#animate-this {
  animation: "@animation";
}

Dios mío, es hora de aprender un dato divertido de #CSS: los nombres de fotogramas clave pueden ser cadenas. ¿Por qué? Bueno, si quieres que tus fotogramas clave se llamen “@keyframes”, ¡obviamente! #webdev

(imagen o incrustar)

—Peter Croner (@sirpepe.bsky.social) 18 de febrero de 2026 10:33

No sé por qué harías esto, pero ciertamente es algo interesante de aprender. @keyframes ¡Después de 11 años de soporte para varios navegadores!

: y = en consulta de estilo

Otro truco oculto, este de Acompaña a Afise ha demostrado que podemos Reemplace los dos puntos en consultas de estilo con signos iguales. Temani hace un gran trabajo explicando las diferencias, pero aquí hay un fragmento de código rápido para resumirlo:

.Jay-Z {
  --Problems: calc(98 + 1);

  /* Evaluates as calc(98 + 1), color is blueivy */
  color: if(style(--Problems: 99): red; else: blueivy);

  /* Evaluates as 99, color is red */
  color: if(style(--Problems = 99): red; else: blueivy);
}

en breve, = Evaluar --Problems diferente de :aunque Jay-Z sin duda tiene 99 (él mismo lo dice).

declarativo <dialog>s (y más reciente .visually-hidden)

Espectáculo de David Bushell como crear <dialog>Usar directivas de llamada de forma declarativauna característica útil que nos permite omitir algunos J’Script en favor de HTML, y ahora está disponible en todos los navegadores web.

Además, debido a una pregunta curiosa planteada por Ana Tudor, de este artículo surgió una pregunta sobre Número mínimo de estilos requeridos para categorías de utilidades visualmente ocultas. ¿Todavía siete?

Quizás no…

Cómo truncar texto desde la mitad

Wes Bos comparte un ingenioso truco Truncar texto por la mitad Sólo usa CSS:

Alguien en Reddit publicó una demostración en la que CSS trunca el texto por la mitad. No publicaron el código, así que aquí está mi intento usando Flexbox

(imagen o incrustar)

– Wes Jefe (@wesbos.com) 9 de febrero de 2026 17:31

Donnie D’Amato probó una solución más nativa, usando ::highlight()pero ::highlight() Desafortunadamente, existen algunas limitaciones. Como lo menciona Henry Wilkinson, Hazel Bahrach pide soluciones nativas en 2019 Todavía hay un boleto abierto, ¡así que crucemos los dedos!

Cómo gestionar variables de color utilizando la sintaxis de color relativa

Theo Soti muestra Cómo gestionar variables de color utilizando la sintaxis de color relativa. Si bien esta no es una característica o concepto nuevo, es francamente el mejor y más completo tutorial que he leído que aborda estas complejidades.

Cómo personalizar tu lista (a la manera moderna)

En un artículo similar en Piccalilli, Richard Rutter nos ofrece una descripción completa Cómo personalizar una listaaunque este tiene algunas cosas que sólo puedo asumir que son CSS moderno. qué es symbols()? qué es @counter-style y extends? Richard te guía todo.

¿No puedes conseguir suficiente sin receta? juan diego armado Una guía completa de CSS-Tricks está aquí.

Cómo utilizar Establecer proporciones de fuente :heading

Safari Technology Preview 237 inició recientemente la prueba :heading/:heading(), Como explica Stuart Robson. Acciones de seguimiento Pero mejor porque nos muestra cómo pow() se puede utilizar para escribir una lógica de tipo más limpia, aunque terminé optando por la antigua <h1>–<h6> Elementos con implementación más sencilla :heading No sibling-index():

:root {
  --font-size-base: 16px;
  --font-size-scale: 1.5;
}

:heading {
  /* Other heading styles */
}

/* Assuming only base/h3/h2/h1 */

body {
  font-size: var(--font-size-base);
}

h3 {
  font-size: calc(var(--font-size-base) * var(--font-size-scale));
}

h2 {
  font-size: calc(var(--font-size-base) * pow(var(--font-size-scale), 2));
}

h1 {
  font-size: calc(var(--font-size-base) * pow(var(--font-size-scale), 3));
}

Introducción a Oona Kravitz border-shape

Hablando de nuevas funciones, border-shape Teniendo en cuenta que tenemos – o voluntad tener – corner-shape. Sin embargo, border-shape es diferente, Como explica Yuna. Resuelve el problema de los límites (porque Sí bordes), permitiendo más formas e incluso shape() FunciónEn general, funciona de manera diferente entre bastidores.

Modern.css quiere que dejes de escribir CSS como si fuera 2015

Es hora de empezar a utilizar todo el CSS moderno, y eso es exactamente lo que moderno.css Quiero ayudarte a hacerlo. ¿Has olvidado que todas estas excelentes funciones no eran compatibles la primera vez que las leíste? ¿O los que te perdiste o te saltaste por completo? Bueno, modern.css tiene 75 fragmentos de código y sigue contando, y todo lo que tienes que hacer es copiarlos.

Kevin Powell también tiene algunos fragmentos de CSS para ti

¿Qué pasa con los comentaristas? ¡Ellos también tienen algunos!

honestamente, kevin es el único orador de desarrolladores web que realmente sigo en YouTube, y él es entonces Cerca de un millón de fans Ahora, asegúrate de presionar el botón “Suscribir” del viejo K-Po.

si te lo perdiste

De hecho, ¡no te perdiste mucho! Firefox 148 Publicado shape() Funciónque alguna vez estuvo vinculado a banderas, pero ahora es una característica básica. Vista previa de la tecnología Safari 237 ser el primero en ser juzgado :heading. Eso es todo lo que hemos visto en nuestro navegador favorito durante las últimas semanas (menos la habitual serie de actualizaciones más pequeñas, por supuesto).

Dicho esto, aleación de cromo, viaje de cazay Firefox anunció sus objetivos Interoperabilidad 2026reveló las características de la plataforma web que pretenden mantener consistentes en todos los navegadores web este año, entre otras más que Compensa la falta de funciones brillantes esta semana.

También próximamente (pero ahora disponible para pruebas en Chrome Canary, como border-shape)Sí scrolled Palabra clave para la consulta del contenedor de estado de desplazamiento. brahms habla scrolled Consulta de estado de desplazamiento aquí.

Recuerda, si no quieres perderte nada, puedes conseguir estos clic rápido Cuando aparecen noticias en la barra lateral trucos-css.com.

¡Nos vemos en dos semanas!