CSS

T

CSS Intermediate

The popover Attribute: Dropdowns Without the JavaScript

Toggle behavior, light dismiss, Escape handling, top-layer rendering - the popover attribute gives you all of it declaratively. Menus and tooltips just got dramatically simpler.

May 15, 2025 2 min 1,715 Read →

D

JavaScript Beginner

data-* Attributes: The Contract Between Your HTML, CSS and JS

dataset gives JavaScript typed-ish access to data attributes, CSS can select on them and even display them with attr() - one mechanism, three languages, zero coupling.

Apr 16, 2025 2 min 1,336 Read →

G

CSS Beginner

gap Works in Flexbox Too (Kill Your Margin Hacks)

The lobotomized owl, :not(:last-child) margins, negative-margin wrappers - all workarounds for spacing between flex items. gap has worked in flexbox everywhere since 2021.

Aug 24, 2024 2 min 3,417 Read →

T

CSS Beginner

The Pseudo-Elements Everyone Forgets: ::marker and ::selection

List bullets and text-highlight colors are both fully styleable with dedicated pseudo-elements - no list-style: none rebuilds, no browser defaults clashing with your brand.

Aug 15, 2024 2 min 4,210 Read →

Y

CSS Beginner

Your Animations Might Be Making People Sick

Vestibular disorders make parallax and zoom animations physically unpleasant for a lot of people. Respecting the reduced-motion setting takes ten lines and is table stakes for professional work.

Aug 6, 2024 2 min 1,470 Read →

A

CSS Advanced

Animating CSS Gradients (Yes, Really) with @property

Gradients famously cannot be transitioned - until you teach the browser that your custom property is a color or angle. @property makes CSS variables animatable with types.

Jul 27, 2024 2 min 2,174 Read →

C

CSS Advanced

content-visibility: The Rendering Shortcut Nobody Uses

One CSS property tells the browser to skip layout and paint for off-screen sections entirely. On long pages it can cut initial rendering work dramatically - no virtualization library needed.

Jul 20, 2024 2 min 3,649 Read →

P

CSS Intermediate

position: sticky Isn't Broken - Your Overflow Is

Sticky elements that refuse to stick are almost always trapped by an ancestor with overflow set, or a parent that is exactly as tall as they are. Here is the debugging checklist.

Jul 14, 2024 2 min 747 Read →

F

CSS Intermediate

Fluid Typography with One Line of clamp()

Stop writing a font-size media query for every breakpoint. clamp() scales type smoothly with the viewport between a floor and a ceiling you control.

Jul 5, 2024 2 min 4,441 Read →

C

CSS Intermediate

CSS Counters: Auto-Number Anything Without Touching HTML

Numbered steps, section headings like "2.3", even line numbers - CSS counts elements natively, updates automatically when content is reordered, and needs zero markup changes.

Jul 1, 2024 2 min 3,693 Read →

:

CSS Beginner

:focus-visible Ends the outline: none Wars

Designers hate focus rings on click, keyboard users need them to navigate at all. :focus-visible gives each group what they want - and browsers already use it by default.

Jun 27, 2024 2 min 3,708 Read →

A

CSS Beginner

Anchor Links Hiding Under Your Fixed Header? scroll-margin-top

Every site with a sticky header has the same bug: jump to #section and the heading lands underneath the header. The fix is one CSS property almost nobody knows.

Jun 22, 2024 2 min 764 Read →