Nesting in CSS

The ability to use nesting in CSS has been around for well over 10 years now. If you’ve used LESS or SASS, then you’re probably no stranger to how it works. But you’ve never been able to achieve this natively in the browser without a CSS preprocessor, until recently! In this article, we’ll see how the CSS Nesting module works, examples of how to use it, and tradeoffs you should consider with this new feature.

Responsive type scales with composable CSS utilities

If you’ve ever attempted to create responsive type that seamlessly adapts and scales between pre-determined sizes within a type scale based on viewport or container widths, you may have wrestled with JavaScript or wrangled with CSS calculators. But with the help of calc(), clamp(), and a somewhat wonky use of CSS vars, we can simplify this process and tap into the dynamism that modern CSS affords. We can create truly fluid type scales, with composable and responsive type utilities that let your type resize and adapt to the viewport or container width.

Expert CSS: The CPU Hack

This is some seriously wild stuff. Jane finds a way to create a CPU using only CSS, and then demonstrates it by building CSS-only Conway's game of life and Breakout! My jaw is on the floor.

Fun with stroke-dasharray

The stroke-dasharray attribute in SVG is more flexible compared to the dashed style in CSS. While there are numerous articles and examples about its usages, including line animations, pie charts, circular progress bars, or even hamburger menu icons, there's still something new to explore.

The Ultimate Low-Quality Image Placeholder Technique

Largest Contentful Paint candidates are penalised for upscaling and also for low entropy. By understanding how the upscaling algorithm works, and how to calculate target filesizes from input dimensions, we can generate the smallest possible legitimate LCP image which can be used as a low-quality placeholder while we wait for our full-resolution image to arrive. The best of both worlds.