Different CSS for each browser?

by

Ideal solution you want does not exist:

Unfortunately, a cross browser solution does not exist IF you are trying to do it on the HTML itself. However, it will work for most versions of IE. Like such:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="https://stackoverflow.com/questions/14227531/includes/myIEGeneralStyle.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="includes/myIE6Style.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="includes/myIE7Style.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="includes/myIE8Style.css" />
<![endif]-->

So the best solution:

How about a Javascript solution like such: Browser Detection. Read a bit about this class to better clarify, what that file is basically doing is simply the concept like such:

var browser = navigator.userAgent.toLowerCase().indexOf('chrome') > -1 ? 'chrome' : 'other';

Obviously, it does more than just detect type of browser. In fact, it knows the version, OS, and much more detail that you can read about in that link. But, it does go and check all the types of browsers by replacing ‘chrome’ with ‘mozilla’, ‘explorer’ and so on…

Then to add your css files, just follow up with conditional statements like so:

if (BrowserDetect.browser.indexOf("chrome")>-1) {
document.write('<'+'link rel="stylesheet" href="https://stackoverflow.com/questions/14227531/component/chromeCSSStyles.css" />');
} else if (BrowserDetect.browser.indexOf("mozilla")>-1) {
    document.write('<'+'link rel="stylesheet" href="http://stackoverflow.com/component/mozillaStyles.css" />');
} else if (BrowserDetect.browser.indexOf("explorer")>-1) {
    document.write('<'+'link rel="stylesheet" href="http://stackoverflow.com/component/explorerStyles.css" />');
}

Good luck and hope this helps!

More Related Contents:

  1. CSS Button styling – Need some help -html css RADIO BUTTON LINK
  2. Make body have 100% of the browser height
  3. Change Select List Option background colour on hover
  4. How to center elements on the last row in CSS Grid?
  5. Is there an equivalent to background-size: cover and contain for image elements?
  6. Using margin:auto to vertically-align a div
  7. Placing border inside of div and not on its edge
  8. CSS background image to fit width, height should auto-scale in proportion
  9. Position: absolute and parent height?
  10. Adding external CSS in an HTML file
  11. Responsive CSS Trapezoid Shape
  12. How can I set the max-width of a table cell using percentages?
  13. make div’s height expand with its content
  14. Prevent flex items from stretching
  15. Hexagon shape with a border/outline
  16. Flex items not respecting margins and box-sizing: border-box
  17. Why cannot change checkbox color whatever I do? [duplicate]
  18. Align the form to the center in Bootstrap 4 [duplicate]
  19. CSS for changing color of last word in h1
  20. CSS box shadow around a custom shape?
  21. How are `display: table-cell` widths calculated?
  22. How can I target a specific column or row in a CSS grid layout?
  23. body { overflow-x: hidden; } breaks position: sticky
  24. How to create a triangle in CSS3 using border-radius
  25. Bootstrap 3 grid, does it *really* matter how many columns are in a row?
  26. How to make a flex item not fill the height of the flex container? [duplicate]
  27. Floating Div Over An Image
  28. How to remove the space between list items [duplicate]
  29. What is HTML’s tag default display type?
  30. How to create a heart shape using CSS?

Leave a Comment