Monday 8 July 2013

Cross Browser CSS

Import css_browser_selector.js in your head section
  • Internet Explorer - yellow
  • Internet Explorer 7 - orange
  • Gecko Engine on Windows (Firefox, Mozilla, Camino) - red
  • Gecko Engine on Linux (Firefox, Mozilla, Camino) - pink
  • Gecko Engine on Other OS (Firefox, Mozilla, Camino) - gray
  • Opera - green
  • Konqueror - blue
  • Safari - black
  • Chrome - cyan

Example

<html>
 <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="css_browser_selector.js"></script>
<style type="text/css">
.ie .example {
  background-color: yellow
}
.ie7 .example {
  background-color: orange
}
.gecko .example {
  background-color: gray
}
.win.gecko .example {
  background-color: red
}
.linux.gecko .example {
  background-color: pink
}
.opera .example {
  background-color: green
}
.konqueror .example {
  background-color: blue
}
.webkit .example {
  background-color: black
}
.example {
  width: 100px;
  height: 100px;
}
.no_js { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }
</style>


 </head>
 <body>
    <p class="example"> Hi Test </p>
 </body>
</html>

0 comments:

Post a Comment

Leave a comment on blog quality.

Blogger

Related Posts Plugin for WordPress, Blogger...