CSS: aspect-ratio, clamp() and :focus-within

February 20, 2021

Twitter is one of my first source of information about web development. In the last year, I read some interesting tweets about some new CSS properties that:

  1. make definitely easier some stuff that before required some hacks
  2. improve the UX of our Web applications and websites.

In this short post, I put them together so it will be easy to find them when I will need them instead of scrolling up and down my feed.


The new CSS aspect-ratio property lets you set the proportion of any element's dimensions without padding-top hacks!

Comparison between padding-top hack and aspect-ratio

Read the original tweet by Addy Osmani.


The clamp() function is a great example of how CSS keeps evolving with the demands of website design.

Instead of having to write an algebraic formula for fluid typography, clamp() will do all the work for us.

Description of clamp() parameters

Read the original tweet by Jessica Chan.


:focus-within pseudoclass allows to style element that contains a focused element.

You can use it to e.g. put more emphasis on a fieldset the user is filling at a certain moment.

Read the original tweet by Tomek Sułkowski.

Did you find this post useful? What about Buy Me A Coffee

A photo of Elia Contini
Written by
Elia Contini
Sardinian UX engineer and a Front-end web architect based in Switzerland. Marathoner, traveller, wannabe nature photographer.