Links
CSS is DOOMed - Rendering DOOM in 3D with CSS
No, CSS is awesome. CSS is better than ever and it is only getting better. And that is why I built DOOM in CSS. Every wall, floor, barrel, and imp is a , positioned in 3D space using CSS transforms. The game logic runs in JavaScript, but the rendering is entirely CSS. You can play it right now.
Why? Because I wanted to find the limits of what a browser can do. See how powerful modern CSS is. And because it’s DOOM. In CSS. Do you really need more of a reason?
CSS subgrid is super good
CSS subgrid is perfect for WordPress and other CMS content that is spat out as a giant blob of HTML. We basically have to centre the content wrapper for top-level prose to look presentable. With the technique I’ve shown we can break out more complex block patterns and then use subgrid to align their contents back inside. It only takes a single class to start!
What Is CSS Containment and How Can I Use It?
CSS containment lets you isolate layout and paint work to self-contained ‘islands’. Here’s what each contain value does and how to use it safely.
Making Complex CSS Shapes Using shape()
Creating rectangles, circles, and rounded rectangles is the basic of CSS. Creating more complex CSS shapes such as triangles, hexagons, stars, hearts, etc. is more challenging but still a simple task if we rely on modern features.
There’s no need to include ‘navigation’ in your navigation labels
Marking up navigation is pretty straightforward, but here’s a nice reminder on how the
aria-labelshould be written.
Videos
Responsive Type Doesn’t Have To Be Complicated
Miriam has spent a lot of time digging into the different approaches, the math involved, the user implications, and the ways modern CSS can help us out. There are equations and graphs! But you don’t need anything that complicated to build a type scale for your next site. With the right units, we can get excellent results from a few lines of (readable) code — without relying on third party tools.
Sponsor
Sponsored by Cloud Four
Thanks to Cloud Four for sponsoring this week’s newsletter! They solve complex responsive web design and development challenges for ecommerce, healthcare, fashion, B2B, SaaS, and nonprofit organizations.
If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.