Css - How to include different properties for different browser inside inline style?

user_6377312 0
Viewed 42

I have inline style (for now I cant change it) where height is set to either px or fit-content in my code. The property fir content does not work in chrome. I tried to do the following (but its not working)

<div style={{height: "fit-content -moz-fit-content"}}></div> //its in a react

I was hoping that in firefox, if fit-content wont work, it will take -moz-fit-content. However that doesnt work. I also dont want to do any checks which browser it currently is in my code as its not suppose to be good. Any ideas? Thank you!

css javascript
1 Answers

I was having the same issue, but changing my autoprefixer config from "last 2 firefox versions" to "Firefox >= 66" (the current ESR version) fixed it.

Accroding to the current version of caniuse, fit-content should always be prefixed with -moz- for Firefox until now. But in the autoprefixer, fit-content has been unprefixed since Firefox >= 66.

autoprefixer version: 9.7.0

browsers: Firefox >=66

user_134566250
Related