WDRL — Edition 290: CSS Flexgrids, image performance and selectors

Celý článek

Hey,

this time we’re going to look deeply into a lot of CSS articles together with optimising images. In CSS, we get nice tools that help us create better layouts, faster. We also look at new technologies like parent selectors, like responsive images in CSS, reverting CSS settings and container queries.

One thing that I recognize now that I have my gardening job is that I finally am able to look at web things from a more distant perspective. Which is nice because I now don’t spend any thoughts and nerves on discussions about »native HTML« and similar things that drive Twitter’s platform and make it so negative. When reading my Twitter feed, often a little bit later than the tweets were written, so many things seem unnecessary to me. Previously, I struggled with it a lot and spent hours wasting time on topics that in reality aren’t relevant to me as a person or for our community. I learnt that what matters really is doing something for the community instead of arguing against other people’s opinions. It’s one of the reasons why I started writing the newsletter again, it’s why I organise events here in my neighbourhood nowadays.

Enjoy your week with a smile now, no matter what your brain says. Worth a try, isn’t it?
—Anselm

Generic

• We all love regular expressions, don’t we? Here’s a guide how to write better RegExp in PHP.

Web Performance

• Jake Archibald shares another summary of how to serve sharp images to high density screens while saving data efficiently.

CSS

• Chris Coyier shares the differences and use cases for inherit, initial, unset and revert properties in CSS.
• Ahmad Shadeed shares how to make custom scrollbars in CSS the modern way. While this is very useful, don’t style them unless you really need this. Also, keep in mind the different light/dark modes and high contrast and other media queries and helpful accessibility functionality.
• This layout generator lets you create and adjust CSS Grid layouts very easily with a UI.
• Let’s talk about Flexbox: “How can we create equal columns with Flexbox](https://css-tricks.com/equal-columns-with-flexbox-its-more-complicated-than-you-might-think/)? This is the best example to show why we now have Flexbox and CSS Grid but none could ever replace the other, they’re for different purposes.
• LayoutIt! is another layout generator for CSS Grids, a bit different in its UI than the other one mentioned in the newsletter. Both great, try them!
• Max Böck on media queries in times of container queries. While we’re inclined to think container queries would replace media queries in all cases, that’s not entirely true. For page layouts itself, media queries will stay the easiest and most suitable solution. For small projects where we don’t necessarily need a huge component system, they will be the go to solution. For big projects, they will play a smaller role in future.
• Adrian Bece explores an early draft of :has(), a CSS parent selector that may come into our browsers soon.
• Someone remembers image-set() in CSS? Safari supports it since a long time, actually before we had picture support. Now Firefox added support, so we can have another look into it and check the use-cases: Responsive images in CSS.

I hope you’re doing fine and have a way to stay positive, find your way to make an impact and help build a better society, better friendships and make our world a little better.
If you want to support my work, you can give back via PayPal or Stripe. Thank you!

Anselm