Links
Printing music with CSS Grid
Too often have I witnessed the improvising musician sweaty-handedly attempting to pinch-zoom an A4 pdf on a tiny mobile screen at the climax of a gig. We need fluid and responsive music rendering for the web!
An Alternative Proposal for CSS Masonry
The Chrome team is keen to see an implementation of masonry type layouts on the web. However, we feel that implementing it as part of the CSS Grid specification as proposed in the recent WebKit post would be a mistake. We also feel that the WebKit post argued against a version of masonry that no one was proposing.
Superior Range Syntax
Syntactic sugar? Far from it. Thanks to the new range syntax we finally have a proper way to query the viewport size, i.e. the thing that has opened the door for Responsive Web Design many years ago. Use it, and never look back.
Popover API lands in Baseline
It's happening! One of the features I am most hyped about has just landed across all modern browsers and is officially a part of Baseline 2024. And this feature is the Popover API. Popover provides so many awesome primitives and developer affordances for building layered interfaces like tooltips, menus, teaching UIs, and more.
Combining CSS :has() And HTML <select> For Greater Conditional Styling
Amit Sheen demonstrates using
:has()
to apply styles conditionally when a certain<option>
in a<select>
element is chosen by the user and how we gain even more conditional styling capabilities when chaining:has()
with other pseudo-classes, such as:not()
— no JavaScript necessary.
Videos
23 CSS features you should know (and be using) by now
As much as I love talking about cool new CSS features, there are a ton of super useful features that have fantastic browser support that go under the radar. So today, it's time to go over a bunch of those and I'm joined by my good buddy Adam Argyle.
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.