CSS

Just in case you didn’t know, you don’t need a page to have ID’s on elements anymore in order to jump down to a particular place. We’ve reached support across all major browsers to link to Text Fragments, like: https://frontendmasters.com/courses/#:~:text=Web%20Performance%20Fundamentals%2C%20v2 The #:~: syntax is kinda funky, but here we are, and it’s not too hard […]

Hey we might as well spill out all these wishes as the CSS feature train has been rolling and we oughta get while the getting is good.

I’ve seen other websites for helping you generate cubic-bezier() values in CSS for animations and transitions, but Easing Wizard is the best. Importantly, it helps you with the newer linear() style timings as well, which are more powerful. All the different types, the presets, the customization options, the different styles of previews, the clean design… […]

Set a variable in Pug, then create an inline script which sets that variable for using in JavaScript and use setProperty to pass it to CSS.

If you’ve applied `container` to an element, know that, for the next little while, that makes a new “formatting context” in Safari, and does not in Chrome or Firefox.

Safari is first to drop text-box in CSS, which plenty of people are excited for as it takes care of aligning text in many cases without the use of fragile magic numbers. They say: Now you can declare which font metric you want the browser to consider the edge of the text box when calculating […]

It’s quite fun to have an element react to another element scrolling in an unexpected way!

A “game” where you enter the right CSS to move to the next level, teaching you CSS anchor positioning along the way. In the vein of Flexbox Froggy, which I know clicked with a ton of people. Made by Thomas Park, who’s company Codepip actually makes a ton of these experiences.

You can make a table responsive by letting it horizontally scroll. But if you do that, make sure any paragraph style text isn’t any wider than the screen.