RPX Blog

Una Kravets from the Chrome team has posted a new blog detailing conditional IF statements coming to CSS. They will look something like this:

button {
  aspect-ratio: 1;
  width: if(media(any-pointer: fine): 30px; else: 44px);
}

The above width declaration will make the button a little larger on mobile/touch devices so it's easier to tap with a finger.

As mentioned in the article, the new if() function will allow things like in-line media queries, @supports stataments, state-based styling and a variety of other functionality

This functionality is not quite ready for production, it is currently only available in Chrome(137+) and Edge(137+) but should be coming to other major browsers in the coming months.

Like all new browser features we'll be evaluating these new tools and adding it to our workflow once it's hit baseline browser compatibility.

This is a test

This is another test

Another Test

This is another test