Better defaults, please


I know I'm in the 2% of people who view the web without javascript turned on. I'm know I'm in the n% who turn images off by default in email. I know this.

And even if I didn't, I would still feel uncomfortable with having my text color so close to my background color that it is unreadable without having javascript turned on to adjust the color of the fonts with a font-face:

It's okay to default colors to legible ones. Really.

I think I might need to add this to my Front-End Fast book: test with javascript turned off or otherwise hobbled ("the CDN isn't working and jQuery doesn't load from the Googs, is your website still legible?" sort of thing).

And for anyone looking, yeah, I know that using the center tag isn't cool either. Working on it.

5 + 3 ways to hide an element with CSS


I had a phone interview today with a company that I am incredibly hopeful to be contracting for shortly. The work is in my area of expertise (hello, Drupal); they seem okay with my request for 20 hours a week for the next 2-3 months (with the understanding that I can ramp up to 40 if needed for a project, as long as I drop back down to 20 as the norm); and I'd be working with a friend I've worked with before. Always a good thing.

In the interview, I was asked, "Using CSS, how many ways can you hide an element? Not from a bot, but from a user. I have been told four, but can remember only three."

I thought about it for a moment, and replied, "I can give you five."

Such the overachiever.

Starting with this layout:

The the five ways I answered:

1. Use the display property.

Make Safari on iOS not screw up your fonts


Make Safari on iOS not screw up your fonts:

@media screen and (max-device-width: 480px) { html { -webkit-text-size-adjust: none; } }

Flared tabs


Given this HTML:


... this CSS will give you flared tabs:

body {
ul {
    padding:10px 0 0;
li {
    border-radius:10px 10px 0 0;
li a {
    padding:0 30px;
li a:before,
li a:after,
li:after {
li a:before,
li:before {
li a:after,
li:after {
li:after {
li a:before,
li a:after {
li:nth-child(2) {
li:nth-child(2) a:before,
li:nth-child(2):before {
li:nth-child(2) a:after,

CSS defaults

Via http://nimbupani.com/safe-css-defaults.html
Property Value
background transparent (transparent stands for rgba(0, 0, 0, 0)) or none or 0 0
border none or 0
border-image none
border-radius 0
box-shadow none
clear none
color No value, so best option is to use inherit to cascade from a parent element’s color value.
content normal
display inline
float none
font normal
height auto
letter-spacing normal
line-height normal
max-width none
max-height none
min-width 0
min-height 0
opacity 1
overflow visible
page-break-inside auto
position static (not relative)
text-shadow none
text-transform none
transform none
transition none
vertical-align baseline
visibility visible
white-space normal
width auto
word-spacing normal
z-index auto (not none or 0)

Ten New Ways to Speed up Download Times

Book page

From: http://www.evolt.org/article/10_new_ways_to_speed_up_download_time/20/60294/index.html?format=print

10 new ways to speed up download time

Author: trenton (evolt@webcredible.co.uk);

1. Avoid tables for layout

Here are six reasons why pages that use CSS for layout download faster than tabular pages:

  • Browsers read through tables twice before downloading them, once to work out its structure and once to determine its content
  • Tables appear on the screen all in one go - no part of the table will appear until the entire table is downloaded and rendered
  • Tables encourage the use of spacer images to aid with positioning
  • CSS generally requires less code than cumbersome tables
  • All code to do with the layout can be placed in an external CSS document, which will be called up just once and then cached on the user's computer; table layout, stored in each HTML document, must be loaded up each time a new page downloads
  • With CSS you can control the order items download on to the screen - make the content appear before slow-loading images and your site users will definitely appreciate it

2. Don't use images to display text

It's our old friend CSS to the rescue again. There's no need to use images to display text as so much can be accomplished through CSS. Have a look at this code

a:link.example, a:visited.example, a:active.example  {
border:4px #00f outset
a:hover.example {
border:4px #00f inset

This will give you a really simple button that appears to be pushed down when you mouseover it - See it in action if you like. To find just how far you can take this concept check out the CSS articles at A List Apart.

3. Call up images through CSS

It's possible to present images as part of the background, called up through CSS. If you've got an image that's 200px by 100px you can use the following HTML code:

<div class="pretty-image"></div>

And this CSS:

.pretty-image { background: url(filename.gif); width: 200px; height: 100px }

This may at first seem a little pointless but this technique could really increase the download time of your pages. Browsers basically download background images after everything else. By using this technique, your text will load instantaneously and your site users can freely roam about the page while your 50kb fancy image downloads.

This technique is absolutely fine for decorational images that are effectively just screen furniture. However, if the image is part of the content, you need still need to use the IMG or OBJECT tag to apply it to the document. You could use an IMG with the above class and a transparent image as the src, but that represents an accessibility issue, as the user needs to have your CSS enabled to reach the image content.

4. Use contextual selectors

This is inefficient:

<p class="text">This is a sentence</p>
<p class="text">This is another sentence</p>
<p class="text">This is yet another sentence</p>
<p class="text">This is one more sentence</p>

.text { color: #03c; font-size:2em }

Instead of assigning a value to each individual paragraph, we can nest them within a <div> tag and assign a value to this tag:

<div class="text">
<p>This is a sentence</p>
<p>This is another sentence</p>
<p>This is yet another sentence</p>
<p>This is one more sentence</p>

.text p { color: #03c; font-size:2em }

This second CSS example basically says that every paragraph within class="text" should be assigned a colour value of #03c and a font size of 2em.

At first glance this doesn't look too important, but if you can apply this properly throughout your document you can easily knock off 20% of the file size.

You may have noticed the colour values are shorter than normal. #03c is a shortened version of #0033cc - you can assign this abbreviated value to any colour value like this.

5. Use shorthand CSS properties



font: 1em/1.5em bold italic serif

...instead of

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif



border: 1px black solid

...instead of

border-width: 1px;
border-color: black;
border-style: solid



background: #fff url(image.gif) no-repeat top left

...instead of

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

Margin, padding, border


margin: 2px 1px 3px 4px
(top, right, bottom, left)

...instead of

margin-top: 2px
margin-right: 1px;
margin-bottom: 3px;
margin-right: 4px


margin: 5em 1em 3em
(top, left and right, bottom)

...instead of

margin-top: 5em;
margin-bottom: 1em;
margin-right: 1em;
margin-right: 4em


margin: 5% 1%
(top and bottom, left and right)

...instead of

margin-top: 5%;
margin-bottom: 5%;
margin-right: 1%;
margin-right: 1%

These rules can be applied to margin, border and padding.

6. Minimise white space, line breaks and comment tags

Every single letter or space in your HTML and CSS code takes up one byte. It doesn't sound like much but it all adds up. Don't hit return so often, don't indent lines and squash up those stylesheet rules together.

You may need proper linebreaks and indentation to keep the code maintainable (for example when several developers work on the same documents). In this case you could think of a tool that strips unneccessary whitespace only when the documents get published to the live site.

7. Use relative call-ups

Never use an absolute call up as it takes up more space, and more importantly, takes the browser longer to download the page. An example of an absolute call up is: <a href="http://www.URL.com/filename.htm">. Much better would be <a href="filename.htm">. But what if some files are in different folders to other ones? Use absolute or relative linking:

  • <a href="/"> - Calls up http://www.URL.com
  • <a href="/filename.html"> - Calls up http://www.URL.com/filename.html
  • <a href="/directory/filename.html"> - Calls up http://www.URL.com/directory/filename.html
  • <a href="./"> - Calls up index.html within that directory
  • <a href="../"> - Calls up index.html one directory above
  • <a href="../filename.html"> - Calls up filename.html one directory above
  • <a href="../../"> - Calls up index.html two directories above

8. Remove unnecessary META tags and META content

Most META tags are completely unnecessary and do nothing. If you're interested, you can see a list of META tags that are available. The most important tags for search engine optimisation are the keywords and description tags, although due to mass abuse these have lost a lot of importance in recent times. When using these META tags try to keep the content for each under 200 characters - anything more increases the size of your pages. Lengthy META tags aren't good for search engines anyway because they dilute your keywords.

9. Put CSS and JavaScript into external documents

We all know to do this, yet we so often don't do it!

To place CSS in an external document use:

<link type="text/css" rel="stylesheet" href="filename.css" />

To place JavaScript in an external document use:

<script language="JavaScript" src="filename.js" type="text/javascript"></script>

Any external file is called up just once and then cached on the user's computer. Instead of repeating JavaScript or CSS over and over again in HTML files, just write it out once in an external document.

And don't forget, there's no limit to the number of these external documents that you can use! Instead of making one huge CSS document, have one main one and some others that are specific to certain areas of your site.

10. Use / at the end of directory links

Don't do this: <a href="http://www.URL.com/directoryname">

Do this instead: <a href="http://www.URL.com/directoryname/">

Why? If there's no slash at the end of the URL the browser doesn't know if the link is pointing to a file or to a directory. By including the slash the browser instantly knows that the URL is pointing to a directory and doesn't need to spend any time trying to work it out.

Reader Rating

Don't want the reader rating?? Then Remove It.

This article currently has a rating of 3.71 out of 17 total ratings.

shaggy wrote on 03/08/2004

"5. Use shorthand CSS properties"

I'd rather use the full form if I'm not sure about something or need to make it easier to read.

"Never use an absolute call up as it ... takes the browser longer to download the page"

It doesn't take much longer to download the page but it definitely makes the site harder to maintain and test with a local/dev copy.

"10. Use / at the end of directory links"

Browsers are not actually that smart to start figuring out such things, but it takes an additional request/response from the server to redirect the browser to the dir/ URL.

12) Minimizing HTTP requests, AKA do not load too many files at the same times (like 20 images), so most browsers can multithread

13) use HTTP compression with mod_gzip or similar products. (I haven't tried this one yet)

lemoncurry wrote on 03/08/2004

hmn.. this is a little weak, to say replacing a class="text" with a smarter css rule will knock 20% is far fetched... if u designed ur stylesheet more intelligently it wouldn't need class="text" on every P!!!!! too generalised.... the fact is most people can grasp classes, rules, and matching tags. What is neglected by most sites, are the advanced cascading concepts of css, eg. inheritance and what is and what is not explicitly supported by a browser. Similarly with JS, how to build intelligent adv objects is neglected and to some extent the modular ideas encompassed by xhtml1.1

if the site is built from several sources (xml, data) this will be quicker to assemble as one flat file... but that can only then be cached as a final page, id seriously consider whats happening on the actual server.... External files are better when universal across the site, its a far more important point: use css instead of spacers and images! no more small design elements....

secondly just use an editor with the carriage return character turned on, it makes worrying about whitespace easy, and u can ensure it uses as least as possible whilst writing it... saves more time...

ras wrote on 03/08/2004

Got inspired and took a look at my web site. This is what I started with:

.bannerText A {



.bannerText A:active {



.bannerText A:hover {



.bannerText A:visited {



And this is how it ended up looking:

.bannerText A,

.bannerText A:active,

.bannerText A:hover,

.bannerText A:visited { COLOR: white; TEXT-DECORATION: none; }

Much easier to read and shortened the stylesheet considerably. Also it is possible to declare this class in the TD field in stead of in the actual link, thus saving a lot of extra typing, when you can apply it to x amount of links with one line.

flump wrote on 03/09/2004

@ras: that code could be improved more.
.bannerText a { COLOR: #FFF; TEXT-DECORATION: none; }

will do what you want.

also it doesnt take longer to download pages like http://mysite.com/mypage.htm
the browser has to convert all your page links to this format before requesting each page/file anyway.

ras wrote on 03/09/2004

@flump: You're right, if I didn't have a general A { COLOR: #000066; TEXT-DECORATION: underline; } ruining it all for me... Otherwise you're spot on!

RichardM wrote on 03/11/2004

"Never use an absolute call up as it takes up more space, and more importantly, takes the browser longer to download the page."

I'm pretty sure that's wrong.
Every GET request to a webserver would pretty much look like this in the server logs wether the URLs are relative or absolute:
www.evolt.org - - [11/Mar/2004:13:40:18 -0000] "GET /index.html HTTP/1.1" 200 6306

As far as I can see, it wouldn't take the browser any longer (or shorter) to download the file because the request would always be the same, unless it uses some kind of persistent connection to the server.

joek wrote on 03/11/2004

"As far as I can see, it wouldn't take the browser any longer (or shorter) to download the file because the request would always be the same"

Acutally, I think the issue might be about filesize. "http://www.domain.com/filename.html" uses more characters than just "filename.html". In similar advice is to use shortened directory names for common elements, like "s" instead of "styles" or "i" instead of "images", because those small savings of a few characters can add up on larger pages.

notabene wrote on 03/15/2004

"Tables appear on the screen all in one go - no part of the table will appear until the entire table is downloaded and rendered"

That's not true anymore. It was, back in Netscape 4 days. But not anymore. Mozilla for instance displays table cells as soon as it has read their content. Then it most often has to re-lay out the page, since basically there won't be only one cell per row.


To place JavaScript in an external document use:

<script language="JavaScript" src="filename.js" type="text/javascript"></script>

Please keep in mind that language="JavaScript" implicitly says that the browser can consider the script as Javascript 1.0 or any superior version. Most often, one tends to test every method/property before using it, thus JS versioning (1.0, 1.1, 1.2 etc) tends to become obsolete, and the language attribute has been declared deprecated in HTML 4.01.

mrnbk wrote on 03/16/2004


1. Avoid tables for layout

"CSS generally requires less code than cumbersome tables"

Less code != better code

3. Call up images through CSS

Nonsense. Browsers usually use placeholders for big images.

4. Use contextual selectors

"You may have noticed the colour values are shorter than normal. #03c is a shortened version of #0033cc - you can assign this abbreviated value to any colour value like this."

You can, but you should not use those.

10. Use / at the end of directory links

True, but the *problem* is on the server side:

http://www.URL.com/directoryname -> 2 HTTP requests

http://www.URL.com/directoryname/ -> 1 HTTP request

$ telnet www.evolt.org 80
Connected to www.evolt.org (
Escape character is '^]'.
GET /evolt HTTP/1.0
Host: www.evolt.org

HTTP/1.1 302 Object Moved
Location: http://www.evolt.org/evolt/
Server: Microsoft-IIS/5.0
Content-Type: text/html
Content-Length: 150
Connection: Close

Document Moved
Object MovedThis document may be found hereConnection closed by foreign host.

@899, Nbk

dotcomikaze wrote on 03/18/2004

4. Use contextual selectors

"You may have noticed the colour values are shorter than normal. #03c is a shortened version of #0033cc - you can assign this abbreviated value to any colour value like this."

You can, but you should not use those.

Why not?

nainil wrote on 04/05/2004


Web site visitors hate to wait, so many Web designers preload images to speed
up page display. Although JavaScript is the most common way to preload images,
it isn't your only option. Consider using the CSS DISPLAY property instead. It
may be more reliable and it requires less complex code.

The article below shows it all


haidary wrote on 04/20/2004

First, the way you're calling up images with CSS is actually bad. Why? I don't see any way to give that image alt text do you? It also requires you to use extraneous markup (the div). Only use images in style sheets if they're part of the site style, not if they're related to the content.

Second (@ nainil), the display property shouldn't help you preload anything as the W3C defines it to completely supress rendering of an element and its contents. If the element isn't rendered than it wouldn't make sense if the image was loaded anyway. If it gets loaded in a browser while it's displayed as none it's a bug (even if the vendor doesn't consider it one).

joek wrote on 05/11/2004

I would think that the download time saved by using shorthand CSS properties would be a drop in the ocean: like milliseconds (or nanoseconds).

"One raindrop raises the sea."

Think of it this way: FC0 is 50% smaller than FFCC00. Sure, in the larger scope of your whole CSS file, it may only be a little, but in the long run (as your CSS file grows), a little can add up.

Or think of it another way... do you save pennies? Why? Because eventually they'll add up.

freewanderer wrote on 05/16/2004

Jain, How about using CSS-P for layout? There are plenty of workarounds available to make CSS positioning work in modern browsers ( IE 5+, NN5+, Mozilla etc.). It's high time to move on to standards-based designing.

freewanderer wrote on 05/20/2004

There are plenty of resources out there on the web explaining the art of CSS-P, which will help you get rid of all the messy tables.

Some nice tutorials for CSS are housed at css.maxdesign.com.au.

CSS Positioning can be found at www.positioniseverything.net.

All the best CSS related stuff tend to appear at www.alistapart.com.

I'll come up with some more places soon.

mantik wrote on 06/06/2004

I love to use nested tables. They are just so handy for laying out xml pages. But I know that they can be a problem, so I try to make sure that they're really necessary to my design. Almost worse than nested tables are entire Web pages enclosed in one table. Your page won't appear until the entire table has been written by the browser. If possible, try to break Web pages into several small tables.

Ten CSS tricks you may not know : evolt.org, Code

Book page

From http://www.evolt.org/article/Ten_CSS_tricks_you_may_not_know/17/60369/

Ten CSS tricks you may not know

Trenton Moss (trenton)

1. CSS font shorthand rule

When styling fonts with CSS you may be doing this:

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif

There's no need though as you can use this CSS shorthand property:

font: 1em/1.5em bold italic small-caps verdana,serif

Much better! Just a couple of words of warning: This CSS shorthand version will only work if you're specifying both the font-size and the font-family. Also, if you don't specify the font-weight, font-style, or font-varient then these values will automatically default to a value of normal, so do bear this in mind too.

2. Two classes together

Usually attributes are assigned just one class, but this doesn't mean that that's all you're allowed. In reality, you can assign as many classes as you like! For example:

<p class="text side">...</p>

Using these two classes together (separated by a space, not with a comma) means that the paragraph calls up the rules assigned to both text and side. If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.

3. CSS border default value

When writing a border rule you'll usually specify the colour, width and style (in any order). For example, border: 3px solid #000 will give you a black solid border, 3px thick. However the only required value here is the border style.

If you were to write just border: solid then the defaults for that border will be used. But what defaults? Well, the default width for a border is medium (equivalent to about 3 to 4px) and the default colour is that of the text colour within that border. If either of these are what you want for the border then you can leave them out of the CSS rule!

4. !important ignored by IE

Normally in CSS whichever rule is specified last takes precedence. However if you use !important after a command then this CSS command will take precedence regardless of what appears after it. This is true for all browsers except IE. An example of this would be:

margin-top: 3.5em !important; margin-top: 2em

So, the top margin will be set to 3.5em for all browsers except IE, which will have a top margin of 2em. This can sometimes come in useful, especially when using relative margins (such as in this example) as these can display slightly differently between IE and other browsers.

(Many of you may also be aware of the CSS child selector, the contents of which IE ignores.)

5. Image replacement technique

It's always advisable to use regular HTML markup to display text, as opposed to an image. Doing so allows for a faster download speed and has accessibility benefits. However, if you've absolutely got your heart set on using a certain font and your site visitors are unlikely to have that font on their computers, then really you've got no choice but to use an image.

Say for example, you wanted the top heading of each page to be ‘Buy widgets’, as you're a widget seller and you'd like to be found for this phrase in the search engines. You're pretty set on it being an obscure font so you need to use an image:

<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>

This is OK but there's strong evidence to suggest that search engines don't assign as much importance to alt text as they do real text (because so many webmasters use the alt text to cram in keywords). So, an alternative would be:

<h1><span>Buy widgets</span></h1>

Now, this obviously won't use your obscure font. To fix this problem place these commands in your CSS document:

background: url(widget-image.gif) no-repeat;

h1 span
position: absolute;

The image, with your fancy font, will now display and the regular text will be safely out of the way, positioned 2000px to the left of the screen thanks to our CSS rule.

6. CSS box model hack alternative

The box model hack is used to fix a rendering problem in pre-IE 6 browsers, where by the border and padding are included in the width of an element, as opposed to added on. For example, when specifying the dimensions of a container you might use the following CSS rule:

width: 100px
border: 5px
padding: 20px

This CSS rule would be applied to:

<div id="box">...</div>

This means that the total width of the box is 150px (100px width + two 5px borders + two 20px paddings) in all browsers except pre-IE 6 versions. In these browsers the total width would be just 100px, with the padding and border widths being incorporated into this width. The box model hack can be used to fix this, but this can get really messy.

A simple alternative is to use this CSS:

width: 150px

#box div
border: 5px
padding: 20px

And the new HTML would be:

<div id="box"><div>...</div></div>

Perfect! Now the box width will always be 150px, regardless of the browser!

7. Centre aligning a block element

Say you wanted to have a fixed width layout website, and the content floated in the middle of the screen. You can use the following CSS command:

width: 700px
margin: 0 auto

You would then enclose <div id="content"> around every item in the body of the HTML document and it'll be given an automatic margin on both its left and right, ensuring that it's always placed in the centre of the screen. Simple... well not quite - we've still got the pre-IE 6 versions to worry about, as these browsers won't centre align the element with this CSS command. You'll have to change the CSS rules:

text-align: center

text-align: left
width: 700px
margin: 0 auto;

This will then centre align the main content, but it'll also centre align the text! To offset the second, probably undesired, effect we inserted text-align: left into the content div.

8. Vertically aligning with CSS

Vertically aligning with tables was a doddle. To make cell content line up in the middle of a cell you would use vertical-align: middle. This doesn't really work with a CSS layout. Say you have a navigation menu item whose height is assigned 2em and you insert this vertical align command into the CSS rule. It basically won't make a difference and the text will be pushed to the top of the box.

Hmmm... not the desired effect. The solution? Specify the line height to be the same as the height of the box itself in the CSS. In this instance, the box is 2em high, so we would insert line-height: 2em into the CSS rule and the text now floats in the middle of the box - perfect!

9. CSS positioning within a container

One of the best things about CSS is that you can position an object absolutely anywhere you want in the document. It's also possible (and often desirable) to position objects within a container. It's simple to do too. Simply assign the following CSS rule to the container:

position: relative

Now any element within this container will be positioned relative to it. Say you had this HTML structure:

<div id="container"><div id="navigation">...</div></div>

To position the navigation exactly 30px from the left and 5px from the top of the container box, you could use these CSS commands:

position: absolute;
left: 30px;
top: 5px

Perfect! In this particular example, you could of course also use margin: 5px 0 0 30px, but there are some cases where it's preferable to use positioning.

10. Background colour running to the screen bottom

One of the disadvantages of CSS is its inability to be controlled vertically, causing one particular problem which a table layout doesn't suffer from. Say you have a column running down the left side of the page, which contains site navigation. The page has a white background, but you want this left column to have a blue background. Simple, you assign it the appropriate CSS rule:

background: blue
width: 150px

Just one problem though: Because the navigation items don't continue all the way to the bottom of the screen, neither does the background colour. The blue background colour is being cut off half way down the page, ruining your great design. What can you do!?

Unfortunately the only solution to this is to cheat, and assign the body a background image of exactly the same colour and width as the left column. You would use this CSS command:

background: url(blue-image.gif) 0 0 repeat-y

This image that you place in the background should be exactly 150px wide and the same blue colour as the background of the left column. The disadvantage of using this method is that you can't express the left column in terms of em, as if the user resizes text and the column expands, it's background colour won't.

At the time of writing though, this is the only solution to this particular problem so the left column will have to be expressed in px if you want it to have a different background colour to the rest of the page.

This article was written by Trenton Moss. He's founder and Director of Webcredible and knows an awful lot about web usability and accessibility and the Disability Discrimination Act.