CSS Tricks and Tips
Today is CSS Naked Day, so I would like to share some CSS tips and tricks which I have learnt. First I would like to share about CSS Padding.
Cross Browser Padding:
This is one issue where most of the developers get struck.
In the CSS box model, “padding” is the distance from a box edge to its inner stuff, whereas “margin” is the distance to stuff outside the box.Now, when you give something a specific width, say “200px” (200 pixels), and you add a padding of “10px”, this means that the box has a width of 220 pixels (200 + 10 at the left side and + 10 at the right side). Probably not the most intuitive, and the programmers of older versions of Internet Explorers got it wrong and will not add the padding to the overall box size (so in IE5, the width is 200 pixels, even if there’s a 10 pixel padding).
There are so many tricks for this issue,one such is
.navigation
{
padding-left: 5px;
padding-right: 5px;
}
.navigation
{
width: 200px;
}
.navi\gation
{
width: 220px;
}
The first selector is for all browsers and defines the basic box. The second selector is for conforming browsers who we hope to get the padding/ width calculation right. And the third selector is for older versions of Internet Explorer which we “hope” get the calculation wrong (per the W3C guidelines), so we help out a little by using a backslash preceding a selector letter that’s in the range from g-z.
Css Colors:
Everyone working with CSS must be bugged withe color codes, one best way what i do is, I will open Photoshop->color palette and will fetch the values from there. But some times, typing these cods are real headache, here is one shortcut for color codes, but this code works with xxyyzz formats only. The trick is for codes with “xxyyzz” formats you can use “xyz”. Sounds kool?
Media Independent:
Now days people use so many ways so access net, through computer, mobile, PDAs etc. So you dont know through which means your vistor is accessing you. But you have to deliver your web content such that it is compatible with all these. But creating seperate content for each is not a welcome move, rather you can change you CSS accordingly, how to do that. Here you go.
<link rel=”stylesheet” href=”default.css” type=”text/css” media=”screen,projection,print” />
<link rel=”stylesheet” href=”mobile.css” type=”text/css” media=”handheld” />
If you don’t add “projection” to the default media mix, Opera users will be in trouble.
Center IT:
we often want to have a “page”- or “content”-class div to center everything. One way to do so is to use “margin-left: auto; margin-right: auto; position: relative”. Wecan even use absolutely positioned layers inside this div.
Quick but no so neat round corners:
If you want to have a very quick way to give something rounded corners, and you don’t really care if the effect is lost on some browsers, you can use a definition like the following: “-moz-border-radius: 8px”.
Opacity:
To make a div layer (or mostly anything else) blend in with the background, you can use the following property-value pairs:
-moz-opacity: .5;
filter: alpha(opacity=50);
The first is for Firefox, the second for Internet Explorer. This effect can also create neat shadows – just use an empty shadow layer (that is, a div of the class “shadow”), give it a slight offset, a black background, and put it behind another box.
PS: You want to access a “moz” value in JavaScript? Use something like this (note the upper-case “m” and “o”):
var elm = document.getElementById(”myElm”);
myElm.style.MozOpacity = .5;
You can drop the “-moz-” prefix in all modern versions of Firefox.
Resources : Google code labs, Glogoscoped, W3org
