Inline if() in CSS 🤔: What You Need to Know About This Upcoming Feature

#css #webdev #html #frontend

Last week, the CSS Working Group gathered in Spain, and there was some exciting news

🥁

they agreed to add an inline if() function to CSS.

This idea had been bouncing around for a while, but they finally managed to pin it down to an MVP that could be implemented quickly. After some friendly chats with implementers and putting out a solid proposal, they reached a consensus. It's a significant leap forward for CSS, adding some nifty new tricks to the toolkit 🎉.

Lets see how this will work ( according to the proposal ):


.my-element {
    color: if(
        style(--status: active) ? var(--color-active-30) :
        style(--status: error) ? var(--color-error-30) :
        /* Add other statuses here */
        var(--color-default-30)
    );
    background-color: if(
        style(--status: active) ? var(--color-active-95) :
        style(--status: error) ? var(--color-error-95) :
        /* Add other statuses here */
        var(--color-default-95)
    );
}

Based on the --status variable, we can conditionally change the css properties in a single line.

You can also use it using pre defined variables.

:root {
    --xl: media(width > 1600px);
    --l: media (width > 1200px);
    --m: media (width > 800px);
}
/* usage */
border-width: if(
    var(--xl) ? var(--size-3) :
    var(--l) or var(--m) ? var(--size-2) :
    var(--size-1)
);

Browser Support:

Don’t get too excited just yet—it'll likely take at least 1-2 years for this to make its way into our browsers. So, while the future of CSS looks bright, we’ll need to be patient 😀!

Stay tuned and follow me for the latest updates and tips on new web development features, so you'll be the first to know when the future of CSS and other web technologies lands in your browser!