CSS Tips I Wish I Knew When I First Started
I have been working with CSS for many years now, and although it is relatively easy to learn, there are always some tips and tricks that you don’t know about, and new stuff to be learnt all the time. I wanted to take a moment to give you some tips and tricks that I wish I knew when I first started using CSS.
Resets & Browser Inconsistencies
It’s not big secret that not all browsers are created equal. Internet Explorer may show something completely different than Mozilla Firefox. Mozilla Firefox may show something completely different to Apple Safari.
We also don’t know what the default margin, padding, font-size, etc. are for these browsers. To handle these differences, many CSS developers like to level the playing field by creating a CSS Reset. In the early stages, we would have just used a global reset, which would look like the following:
* { margin: 0; padding: 0; }
It soon became clear that resetting only the margin & padding wasn’t really enough. Developers started to created a CSS Reset. Eric Meyer created a widely accepted and comprehensive set of reset rules.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: “”;
}
blockquote, q {
quotes: “” “”;
}
This has become the most popular CSS reset available today. It is also important to note that some elements have been deliberately excluded from the list, including Input, Button and HR.
User ‘Overflow: Hidden’ to clear floats
I always used to use a clearing div to clear any floating divs I was using. This would always look like the following:
.clear { clear:both; }
Although this does work perfectly fine, it can make your code look messy. Instead you can use overflow: hidden on your container div tag. So you could use the following:
#contain { overflow: hidden; }
Grouping elements together
One of the rules of keeping good coding is to keep your code simple, clean and easy to read. This technique helps with readability as well as performance. In the early days, I used to do two or three elements that are doing the same thing, until I found out you can group these elements together.
So instead of writing:
h1 { color: #444; }
h2{ color: #444; }
You can group these elements like so:
h1, h2 { color:#444; }
Use CSS Shorthand
Using CSS Shorthand has two beneficial aspects to it, the first one being less code. The second is improving the performance. So instead of writing the following:
body {
font-family: verdana;
font-size: .7em;
line-height: 1.4em;
margin-bottom: 10px;
margin-top: 10px;
}
You can write the same thing with less lines and less coding:
body {
font: normal .7em/1.4em verdana,;
margin: 10px 0;
}
Box Model – Margin, Padding & Borders
The box model is the basis for all layouts. If you use CSS, you need to take the box model into account. It governs the dimensions & spacing of the elements on a page.
All box models have five spacing properties: width, height, padding, margin and border. Width and height are tricky attributes, as they require a bit of calculation. When measuring an element’s width, designers must consider the entire box.
Using the example above, the box has a total width of 260px. The margin, padding, and border are 30px each (remember, that’s 30px on top, 30 on bottom, 30 right, and 30 left). So, in this example, the margin takes up 60 pixels of the box’s width. Likewise, the border and padding consume 60px each. All together, the margin, border, and padding amount to 180 pixels of the box’s total width.
We know that the box’s total width is 260px, but in CSS the width attribute refers to the content area on the inside of the box. So, for this example, we have to subtract 180 pixels (for margin, border, and padding) from 260 (total box width), leaving us with a content area of 80px. Therefore, our CSS looks like this:
div {
margin:30px;
border:30px solid yellow;
padding:30px;
width:80px;
height:80px;
}
Conditional Comments
IE is one of the worst browsers to develop CSS for, while most browsers show the same thing about 80% of the time, IE will not. Therefore you will be doing a lot of IE Hacks to make sure your website shows the same in all browsers.
This can take a lot of CSS to accomplish, making your main style sheet larger than it really needs to be. So the easiest way to accomplish this is to use the HTML conditional comments to detect IE browsers and display the CSS.:
Target All versions of IE
Using conditional comments to target IE and cut out your hacks will slim down your main style sheet, and help load the page quicker in browsers that don’t need the correction code.
That’s it
That’s it for now. I am always learning new stuff, and with CSS3 making its way through, there will more than likely be another tutorial on the way.
I’m hesitant to admit it, but I’m not a huge football fan. My boyfriend, however, loves “his” team — the USC Trojans. And if there’s one thing I’ve learned over the years, it’s that football fans will use any excuse to dress up or decorate with their team colors. Actually, real fans don’t even need a reason to show team spirit.
Thanks for you patience on this one. It took a good deal longer to complete given the sheer size and level of detail the retina display has. It wasn’t a simple scale-up from the last file. It was clear as we created it that Apple has spent a lot of time considering how each element should be translated to such a dense resolution. What were single pixel elements are now two or three pixels thick and effects are exaggerated to become visible. For anyone designing for the retina display (640×960) it really is quite a different experience. When you work at 100% everything seems absolutely huge but small details get lost when viewing it on the device. You really need to be mindful of how it looks on the phone since your monitor displays things so differently.
