Let’s Use the Emergent CSS random() Function in all the Browsers
The journey to create a polyfill for the upcoming CSS random() function that works in all browsers. Let’s Use the…
Read at source →Source
CSS-Tricks
Web design tips and techniques
Technology · 23 articles · fetched about 1 hour ago
What’s !important #18: <geolocation>, Syntax ::highlight()ing, named-feature(), and More
Well, that’s a wrap. No, not a flex-wrap, but rather today marks a new day, week, month, season, aaaand new edition of…
Read at source →
Creating Web Widgets Using the Document Picture-in-Picture API
The general idea is that we create a Document Picture-in-Picture window (DPIP window), and then we put HTML, CSS, and…
Read at source →
AdSponsoredSiguimi
Pure chronological social — no algorithm
See who you follow, newest first. Free to join. Posts that stay visible — not buried by an algo.
Join siguimi.com →
animation-trigger
The CSS animation-trigger property allows you to delay the start of a CSS animation until a specific trigger occurs.…
Read at source →
MicroLighter: Syntax Highlighter
Syntax highlighting for code blocks without the complicated markup, spans, classes, and bloated JavaScript, courtesy of…
Read at source →
WordPress PHP-Only Block Registration
Seven and half years after blocks arrived in Core, WordPress introduces a way to build blocks without React annd build…
Read at source →
Resolved: CSS Class Prefix Selector
A newly resolved proposal would allow us to select classes that are a prefix for variations with a wildcard, like…
Read at source →
CSS Navigation Matching, Early Days
Apply a style when someone navigates from one specific page to another. The idea being it'd make the sources for…
Read at source →
WordPress.com Student Plan
As someone who teaches beginning web development, I find that building a WordPress site makes for a great final…
Read at source →
Dark mode toggles: two states are enough
Lea's pushing back on light/dark mode implementations that display three state options for visitors: light, dark, and…
Read at source →
What’s !important #17: Custom Highlight API, CSS Navigation Matching, Fixing text-stroke, and More
Plus, how to style skeleton UIs, how to enable diagonal scrolling, how images can overflow themselves, and yet, still…
Read at source →
Blocked aria-hidden: The Warning is Right, and Every Fix You’ve Found is Wrong
The warning is correct. And the recommended fixes you've probably seen are wrong. Here's what you can do instead to…
Read at source →
Animating CSS border-image
Border images are an overlooked feature. One neat fact is that border image slices can run across entire borders on an…
Read at source →
SmashingConf Freiburg 2026, September 7-10
Smashing Magazine’s in-person conferences are back and returning to the wonderful city of Freiburg next month,…
Read at source →
Using and Styling the Dialog Element
There's a lot of nuance to the element, a seemingly little piece of web architecture. I've got some notes from digging…
Read at source →
2026 State of CSS, Devs Surveys
A few notes and takeaways from the 2026 State of CSS survey results, including a nice CSS-Tricks cameo! 2026 State of…
Read at source →
Gap Decorations Are Now Available, Here’s What’s New
Today, with CSS gap decorations fully supported in Chrome and Edge, starting with version 149, you can now very easily…
Read at source →
Get Ready For the Powerful CSS border-shape Property!
We recently got the shape() function and corner-shape property. What else could we possibly need as far as making…
Read at source →
What’s !important #16: sibling-index() Animations, Use Cases for the infinity Keyword, Container Stuck Queries, and More
The soon-Baseline sibling-index() function for animations, CSS and the 2026 FIFA World Cup, use cases for the infinity…
Read at source →
writing-mode
The writing-mode CSS property sets whether lines of text are laid out horizontally or vertically, and the direction in…
Read at source →pointer-events
The pointer-events property controls whether an element can become the target of pointer events like clicks, hover…
Read at source →
What’s !important #15: Boundary-aware CSS, Time-based CSS, Full-bleed CSS, and More
Read all about boundary-aware CSS, accessible grid lanes, time-based web designs, full-bleed, the customizable select,…
Read at source →
What’s !important #14: Gap Decorations, random(), <select> field-sizing, and More
I know you’re busy, so for What’s !important #14, I’ll be sprinting through what’s been a stacked couple of weeks…
Read at source →Showing all 23 articles