DEV Community

Cover image for Inline if() in CSS πŸ€”: What You Need to Know About This Upcoming Feature
Aslam Shah
Aslam Shah

Posted on

Inline if() in CSS πŸ€”: What You Need to Know About This Upcoming Feature

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)
    );
}



Enter fullscreen mode Exit fullscreen mode

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)
);




Enter fullscreen mode Exit fullscreen mode

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!

Photo by Cam Adams on Unsplash

Top comments (1)