Tag-Archive for » css «
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.
Have you ever thought of how CSS rules are rendered by browsers? How do browsers define which CSS rules have higher priority? Beginning web developers sooner or later come to the question of CSS Specificity. Just imagine your CSS file has the following lines:
p {color:white;}
p {color:red;}
How should browsers render this code? There must be some way to determine the importance of this or that line. And this way exists – it’s called CSS Specificity.
more…
No matter whether you are an experienced web designer or a beginner – these tips may be useful for you. Check them out.
1. Usability tip. Never, never, never use “text-decoration: underline” for the text that is not actually a hyperlink. Trust me, your visitors will hate you clicking and clicking on this text and finally undertanding that underlined text doesn’t lead anywhere.
2. Don’t squeeze content too much: your text should be able to ‘breath’ – add margins and paddings, and of course don’t forget about ‘line-height’ property.
3. When createting opacity effect, don’t forget about cross-browser support. Therefore, use:
-ms-
-moz-
-khtml- vendor prefixes,and for Internet Explorer use “filter: alpha(opacity=50)” property.
4. Liquid layouts are cool until they are seen on displays with large resolution. If you care about your most advanced visitors, use max-width and min-width, this will create limits for layout expansion (unfortunately, these attributes don’t work in IE)
5. Always create a printer-friendly CSS file. Think about users who want to print some materials from your website. They don’t have to print your beautiful header and footer, use ‘display:none’ for these parts of your site. In fact, an ideal document for printing includes the name of your site, logo, the content and copyright. Trust me, your visiters will be thankful to you.