CSS-Trickz! also ready to join Digital Ocean

You probably want CSS-Tricks

Fixed-Height Cards: More Fragile Than They Look

Written by: Kevine Nzapdi

Getting a multi-column of cards to line up equally is is a headache we’ve all faced, and it gets even harder when working with fixed heights.

Continue reading "Fixed-Height Cards: More Fragile Than They Look" at CSS-Tricks

What’s !important #10: HTML-in-Canvas, Hex Maps, E-ink Optimization, and More

Written by: Daniel Schwarz

Developers have been experimenting with HTML-in-Canvas, a hexagonal world map-analytics feature, a web-based OS for e-ink devices, replacing image sources using the content property, and more. This is What’s !important #10.

Continue reading "What’s !important #10: HTML-in-Canvas, Hex Maps, E-ink Optimization, and More" at CSS-Tricks

The Importance of Native Randomness in CSS

Written by: Alvaro Montoro

We’re getting new functions for generating random numbers in CSS! But the road to get here has been a long and winding one.

Continue reading "The Importance of Native Randomness in CSS" at CSS-Tricks

Quick Hit #129

Written by: Daniel Schwarz

Firefox 150 shipped ariaNotify(), an alternative to ARIA live regions, but it lacks Safari support and is unreliable on macOS.

Continue reading "Quick Hit #129" at CSS-Tricks

Quick Hit #128

Written by: Daniel Schwarz

Safari TP 242 trials the more advanced version of attr() from CSS Values and Units Module Level 5.

Continue reading "Quick Hit #128" at CSS-Tricks

Let’s Use the Nonexistent ::nth-letter Selector Now

Written by: Lee Meyer

My shim might give the powers that be another reason to say native support isn’t necessary, or if lots of people use my :nth-letter hack in the wild, the browser gods might recognize the need to implement it for real.

Continue reading "Let’s Use the Nonexistent ::nth-letter Selector Now" at CSS-Tricks

Quick Hit #127

Written by: Daniel Schwarz

Firefox 150 becomes the first to implement the newest version of color-mix() that accepts more than two <color>s, and light-dark() […]

Continue reading "Quick Hit #127" at CSS-Tricks

Quick Hit #126

Written by: Daniel Schwarz

Firefox 150 ships :muted and all other media-based pseudo-classes, but they lack support in Chrome.

Continue reading "Quick Hit #126" at CSS-Tricks

Recreating Apple’s Vision Pro Animation in CSS

Written by: John Rhea

Putting CSS’s more recent scrolling animation capabilities to the test to recreate a complex animation of the Apple Vision Pro headset from Apple’s website.

Continue reading "Recreating Apple’s Vision Pro Animation in CSS" at CSS-Tricks

Quick Hit #125

Written by: Daniel Schwarz

Firefox 150 ships revert-rule, which rolls the rule back to when it didn’t have its current value. It’ll be Baseline […]

Continue reading "Quick Hit #125" at CSS-Tricks

Enhancing Astro With a Markdown Component

Written by: Zell Liew

I use a Markdown Component for two main reasons: (1) It reduces the amount of markup I need to write, and (2) it converts typographic symbols. Here’s how it works.

Continue reading "Enhancing Astro With a Markdown Component" at CSS-Tricks

Quick Hit #124

Written by: Daniel Schwarz

Firefox 150 ships animation-range and its longhands, making them baseline.

Continue reading "Quick Hit #124" at CSS-Tricks