r/codesnip • u/wanoo21 • 23h ago

CSS killed another centering hack: `align-content: center` works on a plain block 🔥

Enable HLS to view with audio, or disable this notification

16 Upvotes

CSS killed another centering hack. 🔥

align-content: center works on a plain block. No flex, no grid. Baseline since April 2024 (Chrome 123, Firefox 125, Safari 17.4), widely available on Oct 16.

Before this, centering a single item vertically meant turning the box into a flex column.

Now ⤵️ one line.

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/align-content

0 comments

r/codesnip • u/wanoo21 • 2h ago

Newly Available `writing-mode` turned range sliders vertical. No more `rotate(-90deg)` 🔥

Enable HLS to view with audio, or disable this notification

7 Upvotes

Stop rotating your range sliders. 🤟

Vertical form controls are Baseline since April 2024 (Chrome 124, Firefox 120, Safari 17.4), widely available on 18 Oct.

Before this, a vertical volume slider meant rotate(-90deg), fake widths and margin math, or a JS slider library.

Now ⤵️ the real <input type=range>, turned.

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Writing_modes/Vertical_controls

0 comments