Archive for » 2011 «
It is absolutely important to use CSS shorthands. If you use them, your code becomes easier to read and comprehend, and the filesize of your CSS files gets noticeably smaller. CSS shorthands are correctly rendered by all major web browsers, that is why you don’t need to worry about compatibility. Let’s study the most commonly-used CSS shorthands.
1. Margin & padding. Instead of this:
h1 {
margin-top:1em;
margin-right:0;
margin-bottom:2em;
margin-left:0.5em;
padding-top:1em;
padding-right:0;
padding-bottom:2em;
padding-left:0.5em;
}
Use this:
h1 {margin:1em 0 2em 0.5em; padding:1em 0 2em 0.5em}
2. Borders. Instead of this:
h1{
border-width: 1px;
border-style: solid;
border-color: #FFF;
}
Use this:
h1 {border:1px solid #000;}
3. Border width. Instead of this:
h1 {
border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;
}
Use this:
h1 {border-width:1px 2px 3px 4px;}
4. Background Color. Instead of this:
div {
background-color:#FFF;
background-image:url(background-pic.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
}
Use this:
div {background:#FFF url(background-pic.gif) no-repeat fixed 0 0;}
5. Fonts. Instead of this:
h1 {
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:100%;
font-family:Arial,sans-serif;
}
Use this:
h1 {font:italic small-caps bold 1em/100% Arial,sans-serif;}
6. List Style. Instead of this:
ul {
list-style-type:square;
list-style-position:inside;
list-style-image:url(pic.gif);
}
Use this:
ul {list-style:square inside url(pic.gif);}
7. Outline. Instead of this:
h1 {
outline-color:#FFF;
outline-style:solid;
outline-width:2px;
}
Use this:
h1 {outline:#f00 solid 2px;}
As you see, nothing complicated here. Feel free to post your comments and your own CSS tips and tricks.
Hello my dear readers,
Modern site should be both fast and beautiful. Today I am going to share with you some hints that can help you improve your website performance.
1. When you want to create a hyperlink to a directory, always add a trailing slash (‘/’), otherwise your browser will have to do one more additional request to the server to find out that you are linking not to a file but to a directory.
2. If you update some pages very often, it makes sense to forbid browsers cache these pages. This is how it can be done: just add these meta-tags:
<META HTTP-EQUIV=”Expires” CONTENT=”Mon, 01 Jan 1990 1:00:00 GMT”>
<META HTTP-EQUIV=”Pragma” CONTENT=”no-cache”>
3. Specify the width and height of EVERY image you insert into your web pages. This helps browser render your pages faster.
more…