MY TOP 5 CSS TRICKS:

web-design

1. Block vs. Inline Level Elements

Nearly all HTML elements are either block or inline elements. The characteristics of block elements include:

• Always begin on a new line
• Height, line-height and top and bottom margins can be manipulated
• Width defaults to 100% of their containing element, unless a width is specified
• The characteristics of inline elements, on the other hand, are the opposite of block elements:
• Begin on the same line
• Height, line-height and top and bottom margins can’t be changed.
• Width is as long as the text/image and can’t be manipulated
• Have an inline element start on a new line.
• Have a block element start on the same line
• Control the width of an inline element (particularly useful for navigation links)
• Manipulate the height of an inline element
• Set a background colour as wide as the text for block elements, without having to specify a width

2. Another Box Model Hack Alternative

The box model hack is used to fix a rendering problem in pre-IE 6 browsers on PC, whereby the border and padding are included in, rather than added onto, the width of an element. A number of CSS-based solutions have been put forward to remedy this; here’s another one that I really like:

padding: 2em; 

border: 1em solid green; 

width: 20em; 

width/**/:/**/ 14em;

The first width command is read by all browsers; the second by all browsers except IE5.x on PC. Because the second command comes second, it takes precedence over the first: any command that comes second will always override a preceding command. So, how does all this work?

By placing empty comment tags (/**/) before the colons, we instruct IE5.0 to ignore the command. Likewise, if we place empty comment tags after the colon, IE5.5 will ignore the command. Using these two rules in conjunction with each other, we can hide the command from all of IE5.x browsers.

3. Minimum Width for a Page

A very handy CSS command that exists is the min-width command, whereby you can specify a minimum width for any element. This can be particularly useful for specifying a minimum width for page.Unfortunately, IE doesn’t understand this command, so we’ll need to come up with a new way of making this functionality work in this browser. First, we’ll insert a div under the body tag, as we can’t assign a minimum width to the body.Next, we create our CSS commands, to create a minimum width of 600px:

#container 

{ 

min-width: 600px; 

width:expression(document.body.clientWidth < 600? "600px": "auto" ); 

}

The first command is the regular minimum width command; the second is a short JavaScript command that only IE understands. Do note, though, that this command will cause your CSS document to become invalid; you may prefer to insert it into the head of each HTML document to get around this.

You might also want to combine this minimum width with a maximum width:

#container 

{ 

min-width: 600px; 

max-width: 1200px; 

width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto"); 

}

4. IE and Width and Height Issues

IE has a rather strange way of doing things. It doesn’t understand the min-width and min-height commands, but instead interprets width and height as min-width and min-height — go figure!

This can cause problems, because we may need boxes to be resizable should we need to fit more text into them, or should the user resize the text. If we use only the width and height commands on a box, non-IE browsers won’t allow the box to resize. If we only use the min-width and min-height commands, though, we can’t control the width or height in IE!

This can be especially problematic when using background images. If you’re using a background image that’s 80px wide and 35px high, you’ll want to make sure that the default size for a box using this image is exactly 80 x 35px. However, if users resize the text, the box size will need to expand gracefully.

To resolve this problem, you can use the following code for a box with class="box":

.box 

{ 

width: 80px; 

height: 35px; 

} 

 

html>body .box 

{ 

width: auto; 

height: auto; 

min-width: 80px; 

min-height: 35px; 

}

All browsers will read through the first CSS rule, but IE will ignore the second rule because it makes use of the child selector command. Non-IE browsers will read through the second one, which will override the values from the first rule, because this CSS rule is more specific, and CSS rules that are more specific always override those that are less specific.

5. Text-transform Command

One of the lesser known, but really useful CSS commands is the text-transform command. Three of the more common values for this rule are: text-transform: uppercase, text-transform: lowercase and text-transform: capitalize. The first rule turns all characters into capital letters, the second turns them all into small letters, and the third makes the first letter of each word a capital letter.

This command is incredibly useful to help ensure consistency in style across an entire Website, particularly if it has a number of content editors. Say for example your style guide dictates that words in headings must always begin with capital letters. To ensure that this is always the case, use text-transform: capitalize. Even if site editors forget about the capitalisation, their mistake won’t show up on the Website.

It’s also preferable to use text-transform: uppercase to capitalise words, as screen readers may pronounce shorter words in capital letters as acronyms. A great example of this is ‘CONTACT US’, which is pronounced as ‘contact U S’ by some screen readers.