CSS Equivalent of the “if” statement

Question

Is there any way to use conditional statements in CSS?

Answer 1

The @supports rule (92% browser support July 2017) rule can be used for conditional logic on css properties:

@supports (display: -webkit-box) {
    .for_older_webkit_browser { display: -webkit-box }
}

@supports not (display: -webkit-box) {
    .newer_browsers { display: flex } 
}

Answer 2

There is no native IF/ELSE for CSS available. CSS preprocessors like SASS (and Compass) can help, but if you’re looking for more feature-specific if/else conditions you should give Modernizr a try. It does feature-detection and then adds classes to the HTML element to indicate which CSS3 & HTML5 features the browser supports and doesn’t support. You can then write very if/else-like CSS right in your CSS without any preprocessing, like this:

.geolocation #someElem {
   /* only apply this if the browser supports Geolocation */
}
.no-geolocation #someElem {
   /* only apply this if the browser DOES NOT support Geolocation */
}

Keep in mind that you should always progressively enhance, so rather than the above example (which illustrates the point better), you should write something more like this:

#someElem {
   /* default styles, suitable for both Geolocation support and lack thereof */
}
.geolocation #someElem {
   /* only properties as needed to overwrite the default styling  */
}

Note that Modernizr does rely on JavaScript, so if JS is disabled you wouldn’t get anything. Hence the progressive enhancement approach of #someElem first, as a no-js foundation.

Answer 3

Changing your css file to a scss file would allow you to do the trick. An example in Angular would be to use an ngClass and your scss would look like:

 .sidebar {
    height: 100%;
    width: 60px;

    &.is-open {
        width: 150px
    }
} 

Answer 4

No. But can you give an example what you have in mind? What condition do you want to check?

Maybe Sass or Compass are interesting for you.

Quote from Sass:

Sass makes CSS fun again. Sass is CSS, plus nested rules, variables, mixins, and more, all in a concise, readable syntax.

Answer 5

Your stylesheet should be thought of as a static table of available variables that your html document can call on based on what you need to display. The logic should be in your javascript and html, use javascript to dynamically apply attributes based on conditions if you really need to. Stylesheets are not the place for logic.

Answer 6

The only conditions available in CSS are selectors and @media. Some browsers support some of the CSS 3 selectors and media queries.

You can modify an element with JavaScript to change if it matches a selector or not (e.g. by adding a new class).