Webtagr - Technology News Summarizer

CSS Random() Function: Say Goodbye to JavaScript for Random Animations

2025-08-24

CSS is getting a `random()` function, a game-changer for web design! Generate random numbers directly in CSS without JavaScript for things like animation delays, randomized layouts, and random colors. The function takes min, max, and step arguments, offering various ways to share randomness – using custom properties or the `element-shared` keyword for element- or global-level sharing. The article uses examples like creating a star field, randomly placed rectangles, and photo stacks to showcase the power of `random()`, inviting developers to provide feedback to shape the feature's future.

(webkit.org)

Development random function

CSS Anchor Positioning: Responsive Menus Without JavaScript

2025-08-13

This article explores CSS's new anchor positioning feature, enabling element placement based on other elements' positions. Create responsive menus and tooltips with minimal CSS, eliminating the need for JavaScript. The tutorial details `position-anchor`, `position-area`, `position-try`, and the `anchor()` function, comparing logical and physical property usage. A responsive menu example demonstrates adaptability across screen sizes.

(webkit.org)

Development Anchor Positioning

CSS contrast-color(): Automating Color Contrast for Accessibility

2025-05-17

CSS's new `contrast-color()` function simplifies color choices by automatically selecting black or white text to contrast with a given background color. This article delves into its usage, compares the WCAG 2.1 and APCA algorithms for contrast calculation, and explores how to use `prefers-contrast` media queries for better accessibility. While currently limited to black/white, future iterations may offer more customizable options. The function simplifies development while improving accessibility, particularly when managing multiple color states.

(webkit.org)

Development Color Contrast

Safari's text-wrap: pretty: A New Era in Web Typography

2025-04-08

Safari Technology Preview 216 introduces `text-wrap: pretty`, revolutionizing web text layout. Leveraging paragraph-based algorithms, it tackles longstanding typographic issues like excessively short last lines, uneven ragged edges, and distracting typographic rivers. Unlike traditional line-by-line algorithms, `pretty` evaluates the entire paragraph, optimizing layout for improved readability and aesthetics. While Chrome and other browsers support `pretty`, Safari's implementation is more comprehensive, adjusting the entire paragraph instead of just the last few lines. `text-wrap: balance` focuses on making all lines roughly the same length, ideal for headlines and shorter text. Developers should choose the appropriate `text-wrap` value based on their needs and be mindful of performance implications.

(webkit.org)

Development web typography

WebKit's Declarative Web Push: More Efficient, More Private

2025-04-03

WebKit introduces Declarative Web Push to address power consumption and privacy concerns with traditional Web Push. Traditional Web Push relies on Service Workers, making it vulnerable to Intelligent Tracking Prevention (ITP) and prone to subscription revocation due to processing failures. Declarative Web Push allows for sending and displaying notifications without a Service Worker, embedding notification content directly in the push message. This enhances efficiency and privacy while maintaining backward compatibility with existing Web Push.

(webkit.org)

Development

CSS Item Flow: Unifying Flexbox, Grid, and Masonry Layouts

2025-04-02

CSS Grid and Flexbox are powerful layout tools, but they fall short for complex layouts like masonry. A new proposal, "Item Flow," aims to solve this by unifying Flexbox's `flex-flow` and Grid's `grid-auto-flow` properties. It introduces new properties like `item-direction`, `item-wrap`, `item-pack`, and `item-slack`, enabling more flexible and powerful layout control. This would give Flexbox dense packing and Grid the ability to disable wrapping, while providing a clean solution for masonry layouts. The result is a more unified and user-friendly CSS layout system.

(webkit.org)

Development Layout