Seven most essential css features

Seven most essential css features

1. Box Model

This box model technique is used for fixing the rendering problem in the internet-explorer6 browsers. when the padding and border are included in the width of the element, as be opposed to added on

                padding: 4em; border: 1em solid red; width: 30em; width/**/:/**/ 25em;
        

2. Comments for Conditions

That means conditional comments are only for internet explorer and these are not supported by any other browsers. For other browsers these are just as normal comments and therefor, these comments are safe to use

this should be written as below

<!--[if IE]> css code goes here<![endif]-->

This above code will applies internet explorer versions, i.e 5.01, 5.5 and 6.0, but if we want to apply it to above versions 

<!--[if lte IE 6]>    Some Css Code<![endif]-->

when we finish testing, we remove this features for the sepration of files, so the css would be clean and tidy. These kind of files will be called as header section of file with the comments on conditons

<!--[if lte IE 6]>    <link rel="stylesheet" type="text/css" href="ie_hacks.css" /><![endif]-->

3. Max-width  and Min-width  of an element

Internet explorer don't understand this kind of command, so we have to find a new way of making this work for this browser. Let's see an example, we will apply this property to a div which have id wrapper

<wrapper><div id="nav">

Next step we will create css commands, so we will create a minimum widht of 750px

              #wrapper{
                    min-width: 750px;
                    width:expression(document.body.clientWidth < 750? "750px": "auto" );
              }    
        

4. Easy Selector

In most of css features deals with the selector bugs. In the below list different internet explorer and the beginnnings of selector which are known to select element in them. these selectors are the valid css

For IE6 and below

             * html {}   
        

For IE7 and below

                *:first-child+html {} * html {}
        

5. hover on whatever

This selectors will provides you the coolest effect for webpages like and its in tables. Most of the browsers have no problem with this, except the internet explorer this browser look into the stylesheet and ecah rule and javascript.

if the hover selector can be tracked and etc can be changed for an element behaviour, then there is a possibility to create a behavior which enables hover effect for an element

6. Transparent PNG 

Internet explorer cannot handle tranparent png as well.You will see an ugly grayish type background everytime it seems to be transparent. Beacause we cannot use the GIFs they are not good higher resolutions and images. So we have to css feature to resolve this. Following steps will hepls us to do this:

                img.pngfix { 	
                    behavior: url(pngHack.htc); 
                 }
        

7. Stylegala

Stylegala this method is use to detect version of browser and it serves the different css rules for the different agents, we dont have to use any tricks of css and conditional comments. At the same the user or the validator will not been to see the css rules specified for other browser than the browsers they are using. He had to use some simple PHP code for browser detection type same as any css feature