When I started digging into the layout algorithms, everything started to make more sense. Mysteries that had bothered me for years were solved. I realized that CSS is actually a pretty darn robust language, and I started to really enjoy writing it! In this blog post, we’ll look at how this new lens can help us make sense of what’s happening in CSS. And we’ll use that lens to solve a surprisingly-common mystery.
In this article, we’ll talk about how to adapt our sites to the different scenarios of a device pointer: whether it has a pointer or not, or how accurate it is. To adapt our site to those devices’ needs we’ll talk about how to properly use media queries hover, pointer, any-hover and any-pointer.
The CSS logical functions calc(), clamp(), min() and max() are supported by all modern web browsers. But, despite being readily available – a simple GitHub search tells us that adoption for these functions has been slow. So, how exactly do we use them to build fluid and responsive layout experiences? Let’s find out.
Largest Contentful Paint (LCP) is my favourite Core Web Vital. It’s the easiest to optimise, and it’s the only one of the three that works the exact same in the lab as it does in the field (don’t even get me started on this…). So, in this post, I want to go deep and show you some interesting tricks and optimisations, as well as some pitfalls and bugs, starting with some very simple tips.
If you are just starting your digital accessibility journey, you may feel overwhelmed with all the information on the topic. Don’t worry: this article will help you understand some of the most common web accessibility issues you will encounter as you start reviewing and testing your website and applications for accessibility errors.
Thanks to Cloud Four for sponsoring this week’s newsletter! 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.
Tweet
Share