luis montez luis montez - 2 months ago 14
CSS Question

Css cross-browser code

I was making my website using mozilla and chrome and edge as the main resource to see if It was working good dynamically.

But when I opened the IE browser my css, like "transforms" where all formatted in a odd way, the places where they were originally were not the same anymore in IE.

Is there a way to make css do a selection or restrict for each browser, like for chrome It uses "transform" then on IE it would use "right".

I can't use "right" on chrome or it will be desformatted so, I would like to know if there is a special condition.

Answer

When writing CSS or JS you'll want to check browser compatibility tables for the features that you use. You can find this on official resource websites such as https://www.w3schools.com/cssref/css3_browsersupport.asp

For transforms in particular, have a look at: https://www.w3schools.com/cssref/css3_pr_transform.asp

You'll either need to use features that are compatible across all the browsers that you wish to support (taking into account their versions) or, as you mentioned, code alternatives by detecting what features are available in your user's browser. A tool such as https://modernizr.com/ can help with that.