Fixing compat pain points, color-mix(), blend modes and masking.
Today marks a year since the first lockdown here in the UK, I just had a look back at my intro to the email as we were heading into that lockdown. I am not sure I imagined we would still be here a year later.
However, here we are. Hopefully there is some light at the end of the tunnel, though this virtual life looks set to go on a little longer.
Rachel Andrew, CSS Layout News
Compat2021: Eliminating five top compatibility pain points on the web
Google is partnering with other browser vendors and industry partners to fix the top five browser compatibility pain points for web developers: CSS Flexbox, CSS Grid, position: sticky, aspect-ratio, and CSS transforms.
color-mix() - CSS: Cascading Style Sheets | MDN
color-mix() function is in Firefox Nightly and Safari TP. It's one of a whole bunch of interesting things that are part of CSS Color Level 4 and 5. I'm working through documenting them for MDN.
Accessible Text Labels For All
How to create more descriptive button or link text labels to improve the e-commerce experience for screen readers users.
Building a Settings component
A fast-paced look at building a Settings component with a lot of CSS Grid. There is a video version too.
Image Fragmentation Effect With CSS Masks and Custom Properties | CSS-Tricks
This is a nice effect and also demonstrates a good use case for
Taming Blend Modes: `difference` and `exclusion` | CSS-Tricks
A really detailed dive into blend modes from Ana Tudor.
Transition.css - easy transitions with clip-path
Some nice little transitions to copy and paste or just to poke at to see how they work.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.