Webtagr - Resumen de noticias de tecnología

Función random() de CSS: Adiós a JavaScript para animaciones aleatorias

2025-08-24

CSS está recibiendo una función `random()`, ¡un cambio de juego para el diseño web! Genera números aleatorios directamente en CSS sin JavaScript para cosas como retrasos de animación, diseños aleatorios y colores aleatorios. La función toma argumentos min, max y step, ofreciendo varias maneras de compartir aleatoriedad: usando propiedades personalizadas o la palabra clave `element-shared` para compartir a nivel de elemento o global. El artículo usa ejemplos como crear un campo de estrellas, rectángulos colocados aleatoriamente y pilas de fotos para mostrar el poder de `random()`, invitando a los desarrolladores a proporcionar retroalimentación para dar forma al futuro de la función.

(webkit.org)

Desarrollo función random

Posicionamiento de ancla CSS: Menús responsivos sin JavaScript

2025-08-13

Este artículo explora la nueva función de posicionamiento de ancla de CSS, que permite colocar elementos en función de la posición de otros elementos. Crea menús y sugerencias de herramientas responsivos con CSS mínimo, eliminando la necesidad de JavaScript. El tutorial detalla `position-anchor`, `position-area`, `position-try` y la función `anchor()`, comparando el uso de propiedades lógicas y físicas. Un ejemplo de menú responsivo demuestra la adaptabilidad en diferentes tamaños de pantalla.

(webkit.org)

Desarrollo Posicionamiento de ancla

CSS contrast-color(): Automatizando el Contraste de Colores para la Accesibilidad

2025-05-17

La nueva función `contrast-color()` de CSS simplifica las elecciones de color seleccionando automáticamente texto negro o blanco para contrastar con un color de fondo determinado. Este artículo profundiza en su uso, compara los algoritmos WCAG 2.1 y APCA para el cálculo del contraste y explora cómo usar las consultas de medios `prefers-contrast` para una mejor accesibilidad. Si bien actualmente se limita al negro y blanco, las futuras iteraciones pueden ofrecer opciones más personalizables. La función simplifica el desarrollo y mejora la accessibilidad, especialmente al gestionar varios estados de color.

(webkit.org)

Desarrollo Contraste de Colores

text-wrap: pretty en Safari: Una Nueva Era en la Tipografía Web

2025-04-08

Safari Technology Preview 216 introduce `text-wrap: pretty`, revolucionando el diseño de texto en la web. Utilizando algoritmos basados en párrafos, aborda problemas tipográficos de larga data, como líneas finales excesivamente cortas, bordes irregulares y ríos tipográficos que distraen. A diferencia de los algoritmos tradicionales línea por línea, `pretty` evalúa todo el párrafo, optimizando el diseño para mejorar la legibilidad y la estética. Si bien Chrome y otros navegadores admiten `pretty`, la implementación de Safari es más completa, ajustando todo el párrafo en lugar de solo las últimas líneas. `text-wrap: balance` se centra en hacer que todas las líneas tengan aproximadamente la misma longitud, ideal para títulos y textos más cortos. Los desarrolladores deben elegir el valor `text-wrap` adecuado según sus necesidades y ser conscientes de las implicaciones de rendimiento.

(webkit.org)

Desarrollo tipografía web

Web Push Declarativo de WebKit: Más eficiente, más privado

2025-04-03

WebKit presenta Web Push Declarativo para abordar los problemas de consumo de energía y privacidad del Web Push tradicional. El Web Push tradicional depende de Service Workers, lo que lo hace vulnerable a la Prevención Inteligente de Seguimiento (ITP) y propenso a la revocación de suscripciones debido a fallos de procesamiento. Web Push Declarativo permite enviar y mostrar notificaciones sin un Service Worker, incorporando el contenido de la notificación directamente en el mensaje push. Esto mejora la eficiencia y la privacidad, manteniendo la compatibilidad con versiones anteriores de Web Push.

(webkit.org)

Desarrollo

CSS Item Flow: Unificación de Layouts Flexbox, Grid y Masonry

2025-04-02

CSS Grid y Flexbox son herramientas de diseño potentes, pero se quedan cortas en diseños complejos como el diseño masonry. Una nueva propuesta, "Item Flow", pretende solucionar esto unificando las propiedades `flex-flow` de Flexbox y `grid-auto-flow` de Grid. Introduce nuevas propiedades como `item-direction`, `item-wrap`, `item-pack` y `item-slack`, permitiendo un control de diseño más flexible y potente. Esto proporcionaría a Flexbox el empaquetado denso y a Grid la capacidad de desactivar el salto de línea, al tiempo que ofrece una solución limpia para los diseños masonry. El resultado es un sistema de diseño CSS más unificado y fácil de usar.

(webkit.org)

Desarrollo