CODEWITHSUNDEEP
htmlcsswordpress
luis montez
luis montez

Reputation: 35

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.

Upvotes: 0

Views: 401

Answers (2)

Muhammad Kamran
Muhammad Kamran

Reputation: 561

use following hacks for browsers specification.

google chrome:

@media screen and (-webkit-min-device-pixel-ratio:0)
 { 
     #element { properties:value; } 
 }

firefox:

 @-moz-document url-prefix() { 
     #element { properties:value; } 
 }
Opera:
 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
     #element { properties:value; }
 }
safari:
 @media screen and (-webkit-min-device-pixel-ratio:0) {
     #element { properties:value; }
 }
Internet Explorer 9 and lower :
<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Internet Explorer 10 & 11 :
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
}
Microsoft Edge 12 :
@supports (-ms-accelerator:true) {
  /* IE Edge 12+ CSS styles go here */ 
}

And for future details and specification see following links W3school & Site Point

Upvotes: 1

Optimae
Optimae

Reputation: 1002

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.

Upvotes: 1

Related Questions