Seven most essential css features
Posted By : Rajan Rawat | 28-Nov-2017
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
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Rajan Rawat
Rajan is a UI Developer, having good knowledge of HTML, CSS and javascript. His hobbies are internet surfing and watching sports.