0

I'd like to conditionally apply justify-content: safe center based on browser support like

@supports (justify-content: safe center) {
  div {
    justify-content: safe center;
  }
}

Both Blink and Webkit which currently do not support this keyword pass the condition while not actually supporting the safe keyword as seen by the overflowed second line in below example:

https://jsfiddle.net/pgw3t1hq/

Is there a way to get these browsers to fail the condition and reflect what they actually support?

silverwind
  • 3,296
  • 29
  • 31
  • https://stackoverflow.com/questions/639999/is-there-a-way-to-do-browser-specific-conditional-css-inside-a-css-file – Jeremy Harris Nov 04 '19 at 20:45
  • 1
    potential alternative: https://stackoverflow.com/q/33454533/3597276 – Michael Benjamin Nov 04 '19 at 21:03
  • Yes, seems like browser detection is the way to go until the browsers fix their bugs or implement it. Issue is that they do recognize `safe center` as valid syntax while not actually supporting the feature itself, so `@supports` is a lie in this case. – silverwind Nov 05 '19 at 08:18

0 Answers0