Issue 295

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.

web.dev

color-mix() - CSS: Cascading Style Sheets | MDN

The 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.

mozilla.org

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.

sarasoueidan.com

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.

web.dev

Image Fragmentation Effect With CSS Masks and Custom Properties | CSS-Tricks

This is a nice effect and also demonstrates a good use case for @property.

css-tricks.com

Taming Blend Modes: `difference` and `exclusion` | CSS-Tricks

A really detailed dive into blend modes from Ana Tudor.

css-tricks.com

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.

transition.style