A classic problem in CSS is maintaining the aspect ratio of images across related components, such as cards. The newly supported aspect-ratio property in combination with object-fit provides a remedy to this headache of the past! Let’s learn to use these properties, in addition to creating a responsive gradient image effect for extra flair.
In every project where I use Tailwind CSS, I end up adding something to it. Some of these things I add in every single project: I define -webkit-tap-highlight-color; I add a bottom padding set to env(safe-area-inset-bottom); I dress up unordered lists with interpuncts; Allow me to elaborate on all three.
Where to put the label in a web form? In the early days, we talked about left-aligned labels versus top-aligned labels. These days we talk about floating labels. Let’s explore why they aren’t a very good idea, and what to use instead.
Hopefully you’re already starting to see the benefit here. Instead of defining and switching armloads of custom properties, we’re dealing with two and setting all the others just once on :root. That’s a huge improvement from where we started.
If you need to hide something both visually and from the accessibility tree, use display: none or the hidden HTML attribute. If you need to hide something from the accessibility tree but keep it visible, use aria-hidden=“true”. If you need to visually hide something but keep it accessible, use the visually hidden CSS declaration group.
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