CSS

::selection is cool, but scoping it to selectors like :nth-child(5n+2) is even more fun, especially on a love filled ay like Valentine’s Day.

The & is a powerful addition to CSS, allowing us to craft selectors without repetition and helping organization and understanding.

The typical approach for these inputs is using multiple HTML inputs, one for each character. But is that a good idea?

Just four declarations in CSS can handle this nicely, while avoiding the vertical scrollbar issue.

We’ll get into layered content, clip-path, and the :has() selector to build a responsive slider with live videos. We can do it by hand, but a few SCSS loops will help make it more manageable.

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.