web development using CSS
I have contributed several articles on CSS (Cascading Stylesheets), one of the languages used to write Web pages, to CSS Discuss. CSS Discuss (css-d) is a discussion and help forum for Web developers, consisting of a mailing list and associated Wiki.
I have provided links below to some of my articles. Please note that others may have amended my original articles since I wrote them. Many of these articles have selected links to further advice.
-
Media Stylesheets – how to write stylesheets for various media including print; Media Types and CSS3 Media Queries
- Print Stylesheets – printing Web documents using CSS; stationery sizes; page breaks
- Handheld Stylesheets – how to design stylesheets for handheld devices
- Projection Stylesheets – how to design stylesheets for projection devices
- Speech Stylesheets – how to design stylesheets for speech synthesisers
- Fluid Design – how to make Web pages fit a wide range of screen sizes; Media Types and CSS3 Media Queries (this site is itself an example – see description below)
- Diagnostic CSS – using CSS as a testing/diagnostic tool
- Progressive Enhancement using CSS – exploiting the advanced CSS support of modern browsers
- Which Browsers – deciding which browsers to use for development and testing
- Browser Stats – a guide to deciding which browsers to support
- Printing Page Headers and Footers
- Printing Tables – table headers and footers; controlling page breaks
A demonstration of fluid design using Media Queries
This site represents a demonstration of extreme fluidity. I've done this as a practical demonstration of what can be achieved now on live, working sites. It uses a table-less design based on absolute positioning (Dug Falby's A List Apart #151 design).
Let's not lose sight of the practical reason for all this advanced technical stuff: it's simply to enable users to view Web pages with a layout that is easily readable and usable, no matter what size of screen and window they have, even on mobiles and other handheld devices.
CSS3 Media Queries is currently a Candidate Recommendation (as at February 2008) and is stable enough to consider using. Opera (Opera 7 on) and Safari 3 have partial support for it. There is a summary of Opera's Media Queries partial support (see the table near the end headed CSS3 Media Queries).
On this site, I am defining Media Query viewport size in pixels but Opera now seems to support ems, so I may switch to that unit to improve overall fluidity control.
- In all browsers, the pages are rendered with two columns (menu and body) if the window (viewport) is wide enough. A maximum width is set so that the lines of body text are not uncomfortably too wide to read (Internet Explorer 6 doesn't support max-width). The text is right-justified.
- As the viewport is made progressively narrower, the body text wraps to a narrower width. But the right-justification eventually starts to reduce readability, as gaps between words become too great. In Opera and Safari, if you reload the page, it will be laid out ragged-right, thus restoring readability.
-
Eventually, the two columns start to overlap as the viewport width decreases.
To lessen usability problems (especially with IE), the body column slides over
the menu column.
This is achieved by giving the body column its own background (albeit the same image
as the page background) and a z-index higher than that of the menu column.
- If you are using Internet Explorer (IE) you have now reached the limit of fluidity for the page.
- In Opera and Safari, if you reload the page, the menu column slides below the body column, rather like float behaviour.
- In Opera and Safari, at even narrower widths (reload the page!), the floated side panels are unfloated.
- In Opera and Safari, at very narrow widths, the title/logo image is replaced by its Alt text and lists are simplified.
My log files show that browsers download all the linked stylesheets even though they don't understand or support Media Queries or Alternate Stylesheets. The guilty parties include IE7, IE6 and IE5. Firefox 2 does support Alternate Stylesheets but it also loads the Media Queries and Handheld stylesheets despite its lack of support.
How is it done? The document has the following stylesheets:-
- A main stylesheet, applying to all media.
- A Media Queries stylesheet, applying override styles on narrow viewports, both screen and handheld.
There are two further stylesheets:-
- A Print stylesheet, in which the on-screen menu is suppressed and a source footer added.
- An Alternate Stylesheet, titled "Single-column (low-vision)". Alternate Stylesheets are not supported by IE. In Opera, you can switch to it using the View menu and selecting Style. In Firefox, you can switch to it using the View menu and selecting Page Style. Users with vision impairment but with some residual vision will probably have set their browser's base font size to a high value. Very large text is comparable to a narrow window, so this stylesheet contains some rules in common with those in the Media Queries stylesheet, giving a single text column with the menu below it.
One page of the site – Advice on viruses – uses a further stylesheet for Handheld devices. It is geared to Opera's Small Screen emulation and there are no guarantees how it looks on real handheld devices. Handhelds vary greatly in their capability. When Opera is installed on a handheld, it is able to render pages according to the specific capabilities and limitations of the device. It's therefore usually better to let Opera do this rather than try to adapt the page layout with a generic Handheld stylesheet.