DEV Community

Chloe
Chloe

Posted on • Originally published at cgweb.co.uk on

4 1

CSS @supports rule

A quick post on @supports rule which although I know about I rarely use. This is described by MDN as allowing you to "specify declarations that depend on a browsers support for specific CSS features".

A couple of simple examples to check if a single feature is supported or not:

@supports (display:grid){ 
  main { display: grid; } 
} 
@supports not (display:grid){ 
  main { display: block; } 
} 
Enter fullscreen mode Exit fullscreen mode

These simple examples can be made more complex through the use of not, and and or operators. Firstly the not operator is used to check if a property/value is not supported e.g. display grid in the example above will be matched in Internet Explorer but ignored in modern browsers. The and operator will only be matched when all expressions evaluate to true - multiple options can be chained together e.g.

@supports (display:grid) and (display:inline-grid) { 
  // do something 
} 
Enter fullscreen mode Exit fullscreen mode

The or operator will match if any of the given expressions are matched e.g.

@supports (display:grid) or (display: flex){ 
  // do something 
} 
Enter fullscreen mode Exit fullscreen mode

I also learnt it is possible to check for support of custom properties e.g.

@supports (--bgcolor: red){ 
  body { 
    background-color: var(--bgcolor); 
  } 
} 
Enter fullscreen mode Exit fullscreen mode

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay