Question 281001 in CSS Question posted in
Some basic documentation can be found here.

How to detect css functions support?

I want to be able to detect if the browser supports specific CSS mathematical functions like mod(), exp(), sqrt(), etc. (currently only supported by Firefox and Safari)

I tried using javascript CSS.supports('--myVar','mod(7,2)') but that always returns true for variables.

I also tried experimenting directly in CSS using @supports at-rule but that only works for properties.

Tags:

2

Answers


  1. 0

    Use a normal property that accepts the value of the function to check.

    CSS.supports('line-height', 'mod(7, 2)')

// or

CSS.supports('line-height: mod(7, 2)')

    Chromium

    enter image description here

    Firefox

    enter image description here

    Login or Signup to reply.
  2. 0

    I also tried experimenting directly in CSS using @supports at-rule but that only works for properties.

    This is not true. It works for the property and the value used. The browser needs to recognize both of them.

    body {
  background: blue;
}

@supports (opacity: mod(1, 1)) {
  body {
    background: red;
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search