# CSS-Tricks

A learning community for front-end designers and developers

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## Let's Use the Emergent CSS random() Function in all the Browsers

DevFeed: [Let's Use the Emergent CSS random() Function in all the Browsers](<https://devfeed.tech/articles/let-s-use-the-emergent-css-random-function-in-all-the-browsers-4260.md>)

Original publisher: [Read original article](<https://css-tricks.com/css-random-function-polyfill/>)

Author: Lee Meyer

Published: 2026-08-31T15:12:19Z

Content type: article

Language: en

Sources: [CSS-Tricks](<https://devfeed.tech/sources/css-tricks.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [browser](<https://devfeed.tech/topics/browser.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>)

Tags: [articles](<https://devfeed.tech/tags/articles.md>), [browser](<https://devfeed.tech/tags/browser.md>), [browsers](<https://devfeed.tech/tags/browsers.md>), [css](<https://devfeed.tech/tags/css.md>), [css-functions](<https://devfeed.tech/tags/css-functions.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [polyfill](<https://devfeed.tech/tags/polyfill.md>), [random](<https://devfeed.tech/tags/random.md>), [resource](<https://devfeed.tech/tags/resource.md>), [ui](<https://devfeed.tech/tags/ui.md>), [ux](<https://devfeed.tech/tags/ux.md>)

### AI overview

This article explores the emerging CSS random() function and the effort to create a polyfill that works across browsers. It discusses controlled randomness in web layouts and UX, including a custom JavaScript confetti implementation, and considers how CSS could reduce the need for JavaScript or third-party frameworks.

### Source excerpt

The journey to create a polyfill for the upcoming CSS random() function that works in all browsers. Let's Use the Emergent CSS random() Function in all the Browsers originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

## What's !important #18: , Syntax ::highlight()ing, named-feature(), and More

DevFeed: [What's !important #18: , Syntax ::highlight()ing, named-feature(), and More](<https://devfeed.tech/articles/what-s-important-18-syntax-highlight-ing-named-feature-and-more-4267.md>)

Original publisher: [Read original article](<https://css-tricks.com/whats-important-18/>)

Author: Daniel Schwarz

Published: 2026-08-31T14:08:55Z

Content type: article

Language: en

Sources: [CSS-Tricks](<https://devfeed.tech/sources/css-tricks.md>)

Topics: [Web Development](<https://devfeed.tech/topics/web-development.md>), [Dark Mode](<https://devfeed.tech/topics/dark-mode.md>)

Tags: [api](<https://devfeed.tech/tags/api.md>), [articles](<https://devfeed.tech/tags/articles.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [css](<https://devfeed.tech/tags/css.md>), [custom-highlight-api](<https://devfeed.tech/tags/custom-highlight-api.md>), [dark-mode](<https://devfeed.tech/tags/dark-mode.md>), [developers](<https://devfeed.tech/tags/developers.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [news](<https://devfeed.tech/tags/news.md>)

### AI overview

A CSS-focused roundup covering delayed tooltips, progressive enhancement for geolocation, Custom Highlight API syntax highlighting, CSS grid data in custom properties, and dark-mode choices.

### Source excerpt

Well, that's a wrap. No, not a flex-wrap, but rather today marks a new day, week, month, season, aaaand new edition of What's important (#18), bringing you the best content that developers have produced over the last couple of weeks or so. What's !important #18: <geolocation>, Syntax ::highlight()ing, named-feature(), and More originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

## Creating Web Widgets Using the Document Picture-in-Picture API

DevFeed: [Creating Web Widgets Using the Document Picture-in-Picture API](<https://devfeed.tech/articles/creating-web-widgets-using-the-document-picture-in-picture-api-4258.md>)

Original publisher: [Read original article](<https://css-tricks.com/creating-web-widgets-using-the-document-picture-in-picture-api/>)

Author: Daniel Schwarz

Published: 2026-08-27T14:41:06Z

Content type: tutorial

Language: en

Sources: [CSS-Tricks](<https://devfeed.tech/sources/css-tricks.md>)

Topics: [Web Development](<https://devfeed.tech/topics/web-development.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [interactive website](<https://devfeed.tech/topics/interactive-website.md>)

Tags: [api](<https://devfeed.tech/tags/api.md>), [articles](<https://devfeed.tech/tags/articles.md>), [browser](<https://devfeed.tech/tags/browser.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [css](<https://devfeed.tech/tags/css.md>), [firefox](<https://devfeed.tech/tags/firefox.md>), [html](<https://devfeed.tech/tags/html.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [picture-in-picture](<https://devfeed.tech/tags/picture-in-picture.md>), [web](<https://devfeed.tech/tags/web.md>)

### AI overview

A tutorial on using the Document Picture-in-Picture API to create persistent web widgets, including a cloned stock ticker. It covers HTML, CSS, JavaScript, browser support checks, and styling considerations for content moved into a DPIP window.

### Source excerpt

The general idea is that we create a Document Picture-in-Picture window (DPIP window), and then we put HTML, CSS, and JavaScript into it. Creating Web Widgets Using the Document Picture-in-Picture API originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

## animation-trigger

DevFeed: [animation-trigger](<https://devfeed.tech/articles/animation-trigger-4255.md>)

Original publisher: [Read original article](<https://css-tricks.com/almanac/properties/a/animation-trigger/>)

Author: Saleh Mubashar

Published: 2026-08-26T15:38:41Z

Content type: article

Language: en

Sources: [CSS-Tricks](<https://devfeed.tech/sources/css-tricks.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [css animation](<https://devfeed.tech/topics/css-animation.md>), [scroll-triggered animations](<https://devfeed.tech/topics/scroll-triggered-animations.md>), [Playback](<https://devfeed.tech/topics/playback.md>), [Document Object Model (DOM)](<https://devfeed.tech/topics/dom.md>), [API](<https://devfeed.tech/topics/api.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>)

Tags: [animation](<https://devfeed.tech/tags/animation.md>), [api](<https://devfeed.tech/tags/api.md>), [concepts](<https://devfeed.tech/tags/concepts.md>), [css](<https://devfeed.tech/tags/css.md>), [css-animation](<https://devfeed.tech/tags/css-animation.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [playback](<https://devfeed.tech/tags/playback.md>), [scroll-triggered-animations](<https://devfeed.tech/tags/scroll-triggered-animations.md>)

### AI overview

An overview of the CSS animation-trigger property, which starts, pauses, reverses, or resets CSS animations in response to named timeline- or event-based triggers. The article explains its syntax, trigger scope, animation actions, and distinction from scroll-driven animations.

### Source excerpt

The CSS animation-trigger property allows you to delay the start of a CSS animation until a specific trigger occurs. animation-trigger originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

## MicroLighter: Syntax Highlighter

DevFeed: [MicroLighter: Syntax Highlighter](<https://devfeed.tech/articles/microlighter-syntax-highlighter-4262.md>)

Original publisher: [Read original article](<https://css-tricks.com/microlighter-syntax-highlighter/>)

Author: Geoff Graham

Published: 2026-08-25T14:10:34Z

Content type: article

Language: en

Sources: [CSS-Tricks](<https://devfeed.tech/sources/css-tricks.md>)

Topics: [Syntax Highlighting](<https://devfeed.tech/topics/syntax-highlighting.md>), [CSS](<https://devfeed.tech/topics/css.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [WordPress](<https://devfeed.tech/topics/wordpress.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [css](<https://devfeed.tech/tags/css.md>), [custom-highlight-api](<https://devfeed.tech/tags/custom-highlight-api.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [links](<https://devfeed.tech/tags/links.md>), [resource](<https://devfeed.tech/tags/resource.md>), [web](<https://devfeed.tech/tags/web.md>), [wordpress](<https://devfeed.tech/tags/wordpress.md>)

### AI overview

MicroLighter is a CSS-focused syntax highlighter for code blocks that uses Custom Highlights and aims to provide themes, line numbers, multiple-language support, semantic markup, and modular features with less JavaScript and fewer dependencies. The article also reports a substantially smaller bundle than Prism after integrating it into a WordPress site.

### Source excerpt

Syntax highlighting for code blocks without the complicated markup, spans, classes, and bloated JavaScript, courtesy of Uncle Dave. MicroLighter: Syntax Highlighter originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

## WordPress PHP-Only Block Registration

DevFeed: [WordPress PHP-Only Block Registration](<https://devfeed.tech/articles/wordpress-php-only-block-registration-4268.md>)

Original publisher: [Read original article](<https://css-tricks.com/wordpress-php-block-registration/>)

Author: Fränk Klein

Published: 2026-08-24T13:54:02Z

Content type: tutorial

Language: en

Sources: [CSS-Tricks](<https://devfeed.tech/sources/css-tricks.md>)

Topics: [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [articles](<https://devfeed.tech/tags/articles.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [php](<https://devfeed.tech/tags/php.md>), [rest-api](<https://devfeed.tech/tags/rest-api.md>), [wordpress](<https://devfeed.tech/tags/wordpress.md>), [wordpress-blocks](<https://devfeed.tech/tags/wordpress-blocks.md>)

### AI overview

WordPress 7.0 adds PHP-only block registration, generating the JavaScript registration, editor preview, and sidebar controls from PHP definitions. The article explains the approach and its limits, including reduced interaction within the block preview.

### Source excerpt

Seven and half years after blocks arrived in Core, WordPress introduces a way to build blocks without React annd build pipelines. All you need is PHP. WordPress PHP-Only Block Registration originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

## Resolved: CSS Class Prefix Selector

DevFeed: [Resolved: CSS Class Prefix Selector](<https://devfeed.tech/articles/resolved-css-class-prefix-selector-4263.md>)

Original publisher: [Read original article](<https://css-tricks.com/resolved-css-class-prefix-selector/>)

Author: Geoff Graham

Published: 2026-08-21T15:13:03Z

Content type: opinion

Language: en

Sources: [CSS-Tricks](<https://devfeed.tech/sources/css-tricks.md>)

Topics: [Web Development](<https://devfeed.tech/topics/web-development.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>)

Tags: [chrome](<https://devfeed.tech/tags/chrome.md>), [css](<https://devfeed.tech/tags/css.md>), [feature](<https://devfeed.tech/tags/feature.md>), [links](<https://devfeed.tech/tags/links.md>), [selectors](<https://devfeed.tech/tags/selectors.md>)

### AI overview

The article discusses a resolved CSS proposal for wildcard class-prefix selectors such as `.prefix-*`. It considers readability, performance, compatibility, specificity, and the wait for browser support.

### Source excerpt

A newly resolved proposal would allow us to select classes that are a prefix for variations with a wildcard, like .prefix-*. Resolved: CSS Class Prefix Selector originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

## CSS Navigation Matching, Early Days

DevFeed: [CSS Navigation Matching, Early Days](<https://devfeed.tech/articles/css-navigation-matching-early-days-4259.md>)

Original publisher: [Read original article](<https://css-tricks.com/css-navigation-matching-early-days/>)

Author: Geoff Graham

Published: 2026-08-19T14:44:41Z

Content type: article

Language: en

Sources: [CSS-Tricks](<https://devfeed.tech/sources/css-tricks.md>)

Topics: [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [articles](<https://devfeed.tech/tags/articles.md>), [css](<https://devfeed.tech/tags/css.md>), [css-navigation](<https://devfeed.tech/tags/css-navigation.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [view-transitions](<https://devfeed.tech/tags/view-transitions.md>)

### AI overview

An early look at CSS Navigation Matching for declaratively styling cross-document view transitions based on navigation routes and URL patterns.

### Source excerpt

Apply a style when someone navigates from one specific page to another. The idea being it'd make the sources for cross-document view transitions declarative in CSS rather than managing that stuff in JavaScript. CSS Navigation Matching, Early Days originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

## WordPress.com Student Plan

DevFeed: [WordPress.com Student Plan](<https://devfeed.tech/articles/wordpress-com-student-plan-4269.md>)

Original publisher: [Read original article](<https://css-tricks.com/wordpress-student-plan/>)

Author: Geoff Graham

Published: 2026-08-19T08:50:00Z

Content type: opinion

Language: en

Sources: [CSS-Tricks](<https://devfeed.tech/sources/css-tricks.md>)

Topics: [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [education](<https://devfeed.tech/tags/education.md>), [hosting](<https://devfeed.tech/tags/hosting.md>), [html](<https://devfeed.tech/tags/html.md>), [links](<https://devfeed.tech/tags/links.md>), [web-development](<https://devfeed.tech/tags/web-development.md>), [wordpress](<https://devfeed.tech/tags/wordpress.md>)

### AI overview

The article welcomes WordPress.com's free one-year Student plan as a practical way for students to host web-development projects. It argues that the plan removes a recurring cost and hosting barrier while still allowing direct code access.

### Source excerpt

As someone who teaches beginning web development, I find that building a WordPress site makes for a great final project. Hosting those projects has always been a roadblock though. WordPress.com Student Plan originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

## Dark mode toggles: two states are enough

DevFeed: [Dark mode toggles: two states are enough](<https://devfeed.tech/articles/dark-mode-toggles-two-states-are-enough-4261.md>)

Original publisher: [Read original article](<https://css-tricks.com/dark-mode-toggles-two-states-are-enough/>)

Author: Geoff Graham

Published: 2026-08-17T14:15:50Z

Content type: article

Language: en

Sources: [CSS-Tricks](<https://devfeed.tech/sources/css-tricks.md>)

Topics: [Dark Mode](<https://devfeed.tech/topics/dark-mode.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [dark-mode](<https://devfeed.tech/tags/dark-mode.md>), [links](<https://devfeed.tech/tags/links.md>), [os](<https://devfeed.tech/tags/os.md>), [ui](<https://devfeed.tech/tags/ui.md>), [ui-ux-design](<https://devfeed.tech/tags/ui-ux-design.md>), [ux](<https://devfeed.tech/tags/ux.md>)

### AI overview

The article argues that persistent light/dark theme controls generally need only two states. Sites should follow the system preference by default and let users override it, reducing interface complexity and cognitive load.

### Source excerpt

Lea's pushing back on light/dark mode implementations that display three state options for visitors: light, dark, and system. Dark mode toggles: two states are enough originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

## What's !important #17: Custom Highlight API, CSS Navigation Matching, Fixing text-stroke, and More

DevFeed: [What's !important #17: Custom Highlight API, CSS Navigation Matching, Fixing text-stroke, and More](<https://devfeed.tech/articles/what-s-important-17-custom-highlight-api-css-navigation-matching-fixing-text-stroke-and-more-4266.md>)

Original publisher: [Read original article](<https://css-tricks.com/whats-important-17/>)

Author: Daniel Schwarz

Published: 2026-08-14T14:01:51Z

Content type: article

Language: en

Sources: [CSS-Tricks](<https://devfeed.tech/sources/css-tricks.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [API](<https://devfeed.tech/topics/api.md>), [browser](<https://devfeed.tech/topics/browser.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [articles](<https://devfeed.tech/tags/articles.md>), [browser](<https://devfeed.tech/tags/browser.md>), [css](<https://devfeed.tech/tags/css.md>), [css-navigation](<https://devfeed.tech/tags/css-navigation.md>), [custom-highlight-api](<https://devfeed.tech/tags/custom-highlight-api.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [news](<https://devfeed.tech/tags/news.md>)

### AI overview

CSS-Tricks' roundup covers the CSS Custom Highlight API, image overflow, text-stroke fixes, skeleton UI styling, viewport-unit uses, and diagonal scrolling. It highlights CSS techniques alongside the JavaScript required to use the Custom Highlight API.

### Source excerpt

Plus, how to style skeleton UIs, how to enable diagonal scrolling, how images can overflow themselves, and yet, still more. Basically, how to do a lot of really cool (CSS) stuff. What's !important #17: Custom Highlight API, CSS Navigation Matching, Fixing text-stroke, and More originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

## Blocked aria-hidden: The Warning is Right, and Every Fix You've Found is Wrong

DevFeed: [Blocked aria-hidden: The Warning is Right, and Every Fix You've Found is Wrong](<https://devfeed.tech/articles/blocked-aria-hidden-the-warning-is-right-and-every-fix-you-ve-found-is-wrong-4257.md>)

Original publisher: [Read original article](<https://css-tricks.com/blocked-aria-hidden-fix/>)

Author: Durgesh Rajubhai Pawar

Published: 2026-08-12T13:43:56Z

Content type: tutorial

Language: en

Sources: [CSS-Tricks](<https://devfeed.tech/sources/css-tricks.md>)

Topics: [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [aria](<https://devfeed.tech/tags/aria.md>), [articles](<https://devfeed.tech/tags/articles.md>), [browser](<https://devfeed.tech/tags/browser.md>), [bug](<https://devfeed.tech/tags/bug.md>), [dialog](<https://devfeed.tech/tags/dialog.md>)

### AI overview

A tutorial on correctly resolving blocked `aria-hidden` warnings when closing dialogs: move focus out of the region before making it hidden or inert.

### Source excerpt

The warning is correct. And the recommended fixes you've probably seen are wrong. Here's what you can do instead to properly fix the issue. Blocked aria-hidden: The Warning is Right, and Every Fix You've Found is Wrong originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

## Animating CSS border-image

DevFeed: [Animating CSS border-image](<https://devfeed.tech/articles/animating-css-border-image-4256.md>)

Original publisher: [Read original article](<https://css-tricks.com/animating-css-border-image/>)

Author: Preethi

Published: 2026-08-10T15:58:47Z

Content type: tutorial

Language: en

Sources: [CSS-Tricks](<https://devfeed.tech/sources/css-tricks.md>)

Topics: [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [animation](<https://devfeed.tech/tags/animation.md>), [articles](<https://devfeed.tech/tags/articles.md>), [border-image](<https://devfeed.tech/tags/border-image.md>), [css](<https://devfeed.tech/tags/css.md>), [css-animation](<https://devfeed.tech/tags/css-animation.md>), [html](<https://devfeed.tech/tags/html.md>), [images](<https://devfeed.tech/tags/images.md>), [user-interfaces](<https://devfeed.tech/tags/user-interfaces.md>)

### AI overview

A CSS tutorial on animating border images with gradients to create interface effects, including limitations and a basic HTML/CSS setup.

### Source excerpt

Border images are an overlooked feature. One neat fact is that border image slices can run across entire borders on an element, and animating it creates beautiful effects. Animating CSS border-image originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

## Using and Styling the Dialog Element

DevFeed: [Using and Styling the Dialog Element](<https://devfeed.tech/articles/using-and-styling-the-dialog-element-4265.md>)

Original publisher: [Read original article](<https://css-tricks.com/using-and-styling-the-dialog-element/>)

Author: Geoff Graham

Published: 2026-08-07T14:06:43Z

Content type: tutorial

Language: en

Sources: [CSS-Tricks](<https://devfeed.tech/sources/css-tricks.md>)

Topics: [dialog](<https://devfeed.tech/topics/dialog.md>), [HTML](<https://devfeed.tech/topics/html.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [architecture](<https://devfeed.tech/tags/architecture.md>), [articles](<https://devfeed.tech/tags/articles.md>), [articles-guides](<https://devfeed.tech/tags/articles-guides.md>), [dialog](<https://devfeed.tech/tags/dialog.md>), [guides](<https://devfeed.tech/tags/guides.md>), [html](<https://devfeed.tech/tags/html.md>), [html-elements](<https://devfeed.tech/tags/html-elements.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [web](<https://devfeed.tech/tags/web.md>)

### AI overview

A practical guide to using the native HTML <dialog> element, covering basic markup, opening dialogs with JavaScript, modal behavior, backdrops, focus, closing methods, declarative HTML approaches, and experimental invoker commands.

### Source excerpt

There's a lot of nuance to the <dialog> element, a seemingly little piece of web architecture. I've got some notes from digging into it. Using and Styling the Dialog Element originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.