TIL @Supports

POSTED ON: Sep 02, 2022

TAGS: css defensive-coding

Unsupported CSS can break things.

You typically wrap it in a @Supports rule.

@supports (display: flex) {
    .flex-container > * {
        text-shadow: 0px 0px 2px blue;
        float: none;
    }

    .flex-container {
        display: flex;
    }
}

But that's if you KNOW.

What if you don't?

<button>
  Send
</button>


<style>
/* The background color won't change on :hover or :focus
 because the invalid :touch pseudo-class makes the whole
list invalid  */
button:focus,
button:hover,
button:touch {
  background: red;
}
</style>

This is where :where() comes in handy!

The cool thing about :where()

button:where(:focus,
             :hover,
             :touch,
             :smell,
             :feel,
             :admire) {
  background: red;
}

Doesn't break! Love it!

(but also you should fix your rules.)

Here’s what I didn’t know about :where()

Related TILs

Tagged: css

• Next: TIL reusing variablesDo not reuse variables. Do not double define variables that represent the same thing.
• Previous: TIL what a Shader isModern GPUs are incredibly flexible. Developers use shaders - to program the GPU to perform effects and complex rendering techniques. Devs write code in a shader language from an API (such as OpenGL) and a shader compiler in the video driver translates that code into binaries that your PC's GPU can run