A list of CSS tips and tricks that will make your life so much easier! I have also make a list of CSS shorthands for your convenience.
Introduction
CSS (Cascading Style Sheet) is not very difficult to learn. The hardest thing is to ensure the CSS layout being displayed identically among different browsers. Even though CSS3 will be released soon, but I believe it will take quite a long time for all the browsers to start supporting it, especially all the old browsers like Internet Explorer 6 *AHEM*.
Right, here is a list of CSS tips and tricks that I believe will help you! You might also want to use some of the tools that will help you in web design and development - 22 extremely useful tools for web designers and developers
1. Avoid CSS hacks, use future proof method
We should avoid using hacks unless there are no other ways to fix it. Because, we will not able to know when those hacks will stop working. The most common way to tackle with different version of IEs is using the if else statement:
<!--[If IE 5]>
ie 5
<![endif]-->
<!--[If lte 6]>
ie 6 and lower
<![endif]-->
<!--[If gte 7]>
ie 7 or higher
<![endif]-->
2. Use group selector
Using group selector is a good practise to minimize your coding effort and also save a few bytes out of your stylesheet. We can group the selector to avoid repeating declaring the same properties for different elements
h1, h2, h3, h4, h5, h6 {
font-family:arial;
margin:0.5em 0;
padding:0;
}
3. Center elements
It's easy to center an element, for firefox and safari, we only need to specify the width and margin left and right set to auto. However, you will need to specify text-align to center in the parent element for IE.
body {
text-align:center; /* for ie */
}
#container {
width:800px;
margin:0 auto;
text-align:left;
}
4. CSS Positioning
This is something I've just discovered it few weeks ago. Set the abolute position within a container. #item will appear inside the #container exactly 200px from the left and 50px from the top.
#container {
position: relative;
width:500; height:300;
}
#item {
position: absolute;
left: 200px;
top: 50px;
}
5. Text transform
This is something I discovered long time ago, CSS has the ability to transform text to lowercase, uppercase and capitalized the first character of a word. w3schools CSS - Text transform
h1 {text-transform:uppercase; }
h2 {text-transform:capitalize; }
p { text-transform:lowercase; }
6. Remove links or textbox hightlight border
When you click on textbox or link, you will able to see a border highlighting the element. It's even more obvious if you are using mac os. Luckily, you can solve it using outline property. I used it when I set the indentation of a link text to -999em and also when I'm building a textfield with rounded border.
a, input { outline:none; }
7. Hidden text
I think the correct way to do it is using text-indent. And also, you'd want to apply outline:none to hide the border. We use hidden text when we're using images to replace text but we want to make sure search engine can crawl the keyword.
a {
text-indent:-999em;
outline:none;
background: url(button.jpg) no-repeat 0 0;
width:100px; height:50px;
display:block;
}
8. Keep consistent with SUP and SUB
I have a chance to work on one website that uses ® and ™ massively (bad... bad experience). The problem I was facing is, the sup and sub being rendered differently in different browsers, so, I found this and it solved my problem. Adobe Advisor / CSS
sup,
sub {
height: 0;
line-height: 1;
vertical-align: baseline;
_vertical-align: bottom;
position: relative;
}
sup { bottom: 1ex; }
sub { top: .5ex; }
9. CSS Transparency Setting for all browsers
Yes, I can never able to remember it, so I guess it's a must to list it out here for future reference.
.transparent_class {
filter:alpha(opacity=50); /* ie */
-moz-opacity:0.5; /* old mozilla browser like netscape */
-khtml-opacity: 0.5; /* for really really old safari */
opacity: 0.5; /* css standard, currently it works in most modern browsers like firefox, */
}
10. PNG Fix for IE6
Yes, this is the best thing ever to fix ie6 annoying short coming (it doesn't work with background-position). However, if you want a better solution to could fix all the png images in your css files, you can try this IE PNG Fix from twinhelix and the new version support background position!
.png_hack{
background-image: url(../img/the_image.png) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/the_image.png');
}
11. Prevent line break
This is a simple css tips, but some of us might not know about it. It forces the text display in one line.
view plaincopy to clipboardprint?
h1{ white-space:nowrap; }
12. Force page breaks when printing your document
When you're creating a printer friendly webpages, you want to know about these property. More about printing CSS property, visit W3C CSS Print Reference and also the CSS3 stardard
h1{ page-break-before:always; }
h2{ page-break-after:avoid; }
h2{ page-break-inside:always; }
13. Remove vertical textarea scollbar in IE
Remember that annoying textarea scrollbar that display by default in IE? Yes, we can remove it.
textarea{
overflow:auto;
}
14. 3D push button effect
You can create a 3D button effect easily using CSS. The most important thing is the border, set light color on top and left border, and dark color on bottom and left (shadow).
a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}
a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}
15. CSS Tooltips
So, you must be thinking, we will need javascript to make tooltips! :) I got this trick from Kollermedia.
a:hover {
background:#ffffff; /*BG color is a must for IE6*/
text-decoration:none;
}
a.tooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:130px;
}
a.tooltip:hover span{
display:inline;
position:absolute;
background:#ffffff;
border:1px solid #cccccc;
color:#6c6c6c;
}
view plaincopy to clipboardprint?
<a href="#" class="tooltip">Tooltip <span> Extra info </span> </a>
16. CSS links sequence
Apparently, the sequence of the links is very important, read more. Honestly, I don't use this much, but hey, good for future reference! :)
a:link {
color: #000;
text-decoration: underline
}
a:visited {
color: #666;
}
a:hover {
color: #333;
text-decoration: none;
}
a:active {
color: #333;
text-decoration: none;
}
17. CSS Shorthands!
Last but not least, here are the CSS shorthands that will make our life easier!
/* MARGIN */
h1 {margin:1em 0 2em 0.5em;}
h1 {margin-top:1em;
margin-right:0;
margin-bottom:2em;
margin-left:0.5em;
}
/* BORDER */
h1 {border:1px solid #000;}
h1 {border-width:1px;
border-style:solid;
border-color:#000;
}
/* BORDER WIDTH */
h1 {border-width:1px 2px 3px 4px;}
h1 {border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;
}
/* BACKGROUND */
div {background:#f00 url(background.gif) no-repeat fixed 0 0;}
div {background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
}
/* FONT */
h1 {font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;}
h1 {font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
}
/* LIST STYLE */
ul {list-style:square inside url(image.gif);}
ul {list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
}
/* OUTLINE */
h1 {outline:#f00 solid 2px;}
h1 {outline-color:#f00;
outline-style:solid;
outline-width:2px;
}
Source : http://www.queness.com/post/402/15-css-tips-and-tricks
Introduction
CSS (Cascading Style Sheet) is not very difficult to learn. The hardest thing is to ensure the CSS layout being displayed identically among different browsers. Even though CSS3 will be released soon, but I believe it will take quite a long time for all the browsers to start supporting it, especially all the old browsers like Internet Explorer 6 *AHEM*.
Right, here is a list of CSS tips and tricks that I believe will help you! You might also want to use some of the tools that will help you in web design and development - 22 extremely useful tools for web designers and developers
1. Avoid CSS hacks, use future proof method
We should avoid using hacks unless there are no other ways to fix it. Because, we will not able to know when those hacks will stop working. The most common way to tackle with different version of IEs is using the if else statement:
<!--[If IE 5]>
ie 5
<![endif]-->
<!--[If lte 6]>
ie 6 and lower
<![endif]-->
<!--[If gte 7]>
ie 7 or higher
<![endif]-->
2. Use group selector
Using group selector is a good practise to minimize your coding effort and also save a few bytes out of your stylesheet. We can group the selector to avoid repeating declaring the same properties for different elements
h1, h2, h3, h4, h5, h6 {
font-family:arial;
margin:0.5em 0;
padding:0;
}
3. Center elements
It's easy to center an element, for firefox and safari, we only need to specify the width and margin left and right set to auto. However, you will need to specify text-align to center in the parent element for IE.
body {
text-align:center; /* for ie */
}
#container {
width:800px;
margin:0 auto;
text-align:left;
}
4. CSS Positioning
This is something I've just discovered it few weeks ago. Set the abolute position within a container. #item will appear inside the #container exactly 200px from the left and 50px from the top.
#container {
position: relative;
width:500; height:300;
}
#item {
position: absolute;
left: 200px;
top: 50px;
}
5. Text transform
This is something I discovered long time ago, CSS has the ability to transform text to lowercase, uppercase and capitalized the first character of a word. w3schools CSS - Text transform
h1 {text-transform:uppercase; }
h2 {text-transform:capitalize; }
p { text-transform:lowercase; }
6. Remove links or textbox hightlight border
When you click on textbox or link, you will able to see a border highlighting the element. It's even more obvious if you are using mac os. Luckily, you can solve it using outline property. I used it when I set the indentation of a link text to -999em and also when I'm building a textfield with rounded border.
a, input { outline:none; }
7. Hidden text
I think the correct way to do it is using text-indent. And also, you'd want to apply outline:none to hide the border. We use hidden text when we're using images to replace text but we want to make sure search engine can crawl the keyword.
a {
text-indent:-999em;
outline:none;
background: url(button.jpg) no-repeat 0 0;
width:100px; height:50px;
display:block;
}
8. Keep consistent with SUP and SUB
I have a chance to work on one website that uses ® and ™ massively (bad... bad experience). The problem I was facing is, the sup and sub being rendered differently in different browsers, so, I found this and it solved my problem. Adobe Advisor / CSS
sup,
sub {
height: 0;
line-height: 1;
vertical-align: baseline;
_vertical-align: bottom;
position: relative;
}
sup { bottom: 1ex; }
sub { top: .5ex; }
9. CSS Transparency Setting for all browsers
Yes, I can never able to remember it, so I guess it's a must to list it out here for future reference.
.transparent_class {
filter:alpha(opacity=50); /* ie */
-moz-opacity:0.5; /* old mozilla browser like netscape */
-khtml-opacity: 0.5; /* for really really old safari */
opacity: 0.5; /* css standard, currently it works in most modern browsers like firefox, */
}
10. PNG Fix for IE6
Yes, this is the best thing ever to fix ie6 annoying short coming (it doesn't work with background-position). However, if you want a better solution to could fix all the png images in your css files, you can try this IE PNG Fix from twinhelix and the new version support background position!
.png_hack{
background-image: url(../img/the_image.png) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/the_image.png');
}
11. Prevent line break
This is a simple css tips, but some of us might not know about it. It forces the text display in one line.
view plaincopy to clipboardprint?
h1{ white-space:nowrap; }
12. Force page breaks when printing your document
When you're creating a printer friendly webpages, you want to know about these property. More about printing CSS property, visit W3C CSS Print Reference and also the CSS3 stardard
h1{ page-break-before:always; }
h2{ page-break-after:avoid; }
h2{ page-break-inside:always; }
13. Remove vertical textarea scollbar in IE
Remember that annoying textarea scrollbar that display by default in IE? Yes, we can remove it.
textarea{
overflow:auto;
}
14. 3D push button effect
You can create a 3D button effect easily using CSS. The most important thing is the border, set light color on top and left border, and dark color on bottom and left (shadow).
a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}
a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}
15. CSS Tooltips
So, you must be thinking, we will need javascript to make tooltips! :) I got this trick from Kollermedia.
a:hover {
background:#ffffff; /*BG color is a must for IE6*/
text-decoration:none;
}
a.tooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:130px;
}
a.tooltip:hover span{
display:inline;
position:absolute;
background:#ffffff;
border:1px solid #cccccc;
color:#6c6c6c;
}
view plaincopy to clipboardprint?
<a href="#" class="tooltip">Tooltip <span> Extra info </span> </a>
16. CSS links sequence
Apparently, the sequence of the links is very important, read more. Honestly, I don't use this much, but hey, good for future reference! :)
a:link {
color: #000;
text-decoration: underline
}
a:visited {
color: #666;
}
a:hover {
color: #333;
text-decoration: none;
}
a:active {
color: #333;
text-decoration: none;
}
17. CSS Shorthands!
Last but not least, here are the CSS shorthands that will make our life easier!
/* MARGIN */
h1 {margin:1em 0 2em 0.5em;}
h1 {margin-top:1em;
margin-right:0;
margin-bottom:2em;
margin-left:0.5em;
}
/* BORDER */
h1 {border:1px solid #000;}
h1 {border-width:1px;
border-style:solid;
border-color:#000;
}
/* BORDER WIDTH */
h1 {border-width:1px 2px 3px 4px;}
h1 {border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;
}
/* BACKGROUND */
div {background:#f00 url(background.gif) no-repeat fixed 0 0;}
div {background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
}
/* FONT */
h1 {font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;}
h1 {font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
}
/* LIST STYLE */
ul {list-style:square inside url(image.gif);}
ul {list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
}
/* OUTLINE */
h1 {outline:#f00 solid 2px;}
h1 {outline-color:#f00;
outline-style:solid;
outline-width:2px;
}
Source : http://www.queness.com/post/402/15-css-tips-and-tricks
