Browser Specific CSS Hack 


CSS Hack for different browsers without writing separate CSS file



Here, I'm going to discuss about the one way of css hack for different browsers with out going for separate file. Sometimes, we have to restrict ourselves to not keeping the all the css for specific browser in different file. For this reason, following js file is helpful.






For clean code, you might make use of the javascript file here:




By including the line:




<script src="css_browser_selector.js" type="text/javascript"></script>

You can write subsequent css with the following simple pattern:


.ie7 [thing] {
  background-color: orange
}
.chrome [thing] {
  background-color: gray
}



This js file will add corresponding classes of browser name, operating version and other things to HTML tag. So, we can make use of them and target specific browser.



I'm sure there are other ways of css browser hacks. Thanks for Reading!
Location: Bangalore, Karnataka, India

Comments

Post a Comment

Popular posts from this blog

Gradient Border Colors with CSS

Image
CSS3 has all the new features. With these features, we are now able to build image-less websites. Earlier,  We were using image when it comes to showing gradient colors. Now, it becomes much leaner with the use of CSS3 Gradient Background. But CSS3 Gradient does not stop only for background use. Did you know that you can also utilize it within borders? Let's see how to do this. First Method The first method is by applying CSS3 Gradient within pseudo-elements. Well, let’s see how the trick works. Top To Bottom Gradient Border We will start off with a simple gradient that spreads from top to bottom. To get started, create a box with a div, as follows. HTML <div class="box"></div> CSS .box {       width: 400px;       height: 400px;       background: #eee;   } To form the gradient in the box borders, set a solid border on the top and bottom side of the box first. And also create 2 rectangles ...
Read more

Differences between HTML4 and HTML5

Image
10 Differences Between HTML4 & HTML5 It’s going to be a while before HTML5 is the new standard and everything HTML5 has to offer is supported by all the important browsers. If you’re a web dev, what should you do? If you’re new to the game or you’re an old pro, you eventually have to ask yourself when and how to begin transitioning over. Perhaps the first thing that you should learn and keep in mind is exactly what the differences between the two are. Here are ten important differences between HTML4 and HTML5: 1. HTML5 Is a Work in Progress As cool as it is to  see what HTML5 can do for you,  it hasn’t been standardized like HTML4. You don’t have to worry about updating pages built using HTML4. It’s more than ten years old and it’s a set standard. If you jump into HTML5 with both feet, you’re going to be making updates. Elements and attributes are added and modified several times a year. Of course, this is dependent how much...
Read more

CSS Equal Height Columns, Three Different Ways

Image
Here, we look at three different ways to achieve equal height columns with just CSS. This is a common scenario that troubles a lot of people, so I’m going to demonstrate some elegant pure CSS solutions. Achieving equal height columns with just CSS is such a common scenario with a few simple solutions. In projects that follow a standard content-sidebar layout, it just helps to have both of the containers seemingly stretch to the bottom of the page. It just looks better, cleaner, and more complete. I’m going to highlight three different ways that this can be achieved, using strictly CSS. No JavaScript, no jQuery to calculate the height of one and set it on the other. Just plain old beautiful CSS. First, let’s look at some graphics below that show us the problem and the desired solution. The Problem The Solution Diving In It’s common for designs/developers to want to achieve this look just purely for aesthetic purposes. It often finishes the page nicer, and makes ever...
Read more