CSS Best Practices
- Make sure pages continue to work when style sheets are disabled (Effective Use of Style Sheets)
- Use CSS to control font size instead of the <FONT> tag. (Beyond Pixels: Choosing Text Sizes)
- Use the following syntax to include the stylesheet. This syntax is not
supported by older browsers that do not fully support CSS, so they will
skip the stylesheet.
(See Designing
with Web Standards, p. 226) [Note: @import "/path/to/filename.css"
also works, but this is not as well supported in current browsers. Stick
to the url(..) syntax instead.]
<style type="text/css">
@import url("/path/to/filename.css");
< /style>
- Also
<style type="text/css" media="all"></style>(Eric Meyer on CSS, p. 239)
Notes from Designing with Web Standards
- Box model hack. IE5.x/Windows calculates padding, borders, and margins
incorrectly. Hack is to estimate the width it is supposed to be, add a
CSS selector IE5.x/Windows doesn't understand (
voice-family ...), and then specify the actual width. (p. 283). - That is, IE5.x/Windows does not add padding and borders to
the overall size as it should. In the CSS box model, padding and
borders are added to the overall size. (From
Table Hacks to CSS Layout: A Web Designer's Journey)
- Wrong. A box 300 pixels wide, with 20 pixels of inner padding, is 300 pixels wide in IE5.x/Windows. That seems right, but it’s wrong according to the CSS1 spec.
- Right. A box 300 pixels wide, with 20 pixels of inner padding on each side, is 340 pixels wide in CSS-compliant browsers (300 + 20 pixels on the left + 20 pixels on the right).
- "Be nice nice to Opera rule" (p. 284)
- Whitespace bug. IE carries over bug from Netscape that adds whitespace if there is whitespace in the markup. (p. 287)
- Use absolute position to emulate float. (p. 289)
Example websites referenced in Designing with Web Standards
- i3forum.
- For buttons as stylesheets instead of .gifs, see also CSS Design: Taming Lists and Using Lists for DHTML Menus
- For style switching, see style switcher and Alternative Style: Working With Alternate Style Sheets.
- For CSS instead of buttons, including class="here" for current page, see CSS Design: Taming Lists.
- On fonts, see CSS Experiments - Web Fonts and Embedded Fonts
Notes from Eric Meyer on CSS: Mastering the Language of Web Design by Eric A. Meyer
- Strip out all of the following:
font<br>&bgcolorandbackgroundattributesalignandvalignattributes- table attributes of
width,border, andcellpadding(exceptcellspacing) - attributes on body element such as
textandlink.
- Containing block: any positioned element is positioned with respect to its containing block.
- The big advantage of absolute positioning instead of float is that it isn't dependent on the placement of an element in the document. With floating, you can only floar to the left or right, and the placement of the float might depend on what elements come before it. Positioned elements can be put anywhere in relation to their containing block. (p. 207)
- Whether floating or positioning a column, browser bugs make it almost a requirement that you place the column's div without any border, padding, margin, or background. Simply use the div as an invisible construct inside which you place elements that have whatever borders, margins, and so on that they need. (p. 208)
Web safe fonts
Arial, Helvetica, sans-serif
Times New Roman, Times, serif
Courier New, Courier, mono
Georgia, Times New Roman, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif
- For screen, use pixels, ems, or percentages. For print, use points. 72 points = 1 inch. There is no clearly defined mapping between pixels and the physical world. (Eric Meyer on CSS, p. 122. See also Web Typography Tutorial - Day 2)
Web safe colors
Stats
CSS Resources
- Holy CSS ZeldMan -- CSS, Accesibility and Standards Links
- web standards software and learning
- Other links
- Blue Robot's Layout Reservoir
- Eric Costello's CSS Layout Technique
- Owen Brigg's "Little Boxes" visual layouts page
- css Zen Garden
- CSS Creator > Multi-level menu
- Drop-Down Menus, Horizontal Style (A List Apart)
- CSS Design: Taming Lists (breadcrumb strips -- A List Apart)
- Other books
- Building Accessible Websites by Joe Clark
