CSS and User Interface

Mes feuilles de style CSS commencent systématiquement par une remise à zéro des espacements. Je suis tombé par hasard sur deux billets sur le sujet, CSS Negotiation and a Sanity Saving Shortcut et un plus récent Global White Space Reset. Le second mentionne le correctif pour Firefox. Curieusement je suis tombé sur ce bug pour la première fois la semaine dernière !

Le premier billet mentionne aussi une façon élégante d'invoquer la feuille de style, qui présente les avantages suivants :

• Pas de scintillement au chargement (FOUC) avec IE.
• La spécification de deux média empêche Netscape 4 de charger le CSS.
• ... et d'autres plus mineurs

Enfin, il offre une opinion sur la manière d'appeler le CSS pour Internet Explorer. La première suggestion est parfaite, la seconde raisonnable — je vais l'essayer pour évaluer son côté pratique. Quant à la troisième, le filtrage pour IE5, elle me paraît carrément over the top. À confirmer !

I've set up a site to experiment with various layouts: MS3 layouts here.

Well, layouts is somewhat audacious, as there is but one today... But there will be more! I will analyze the comments on my osCommerce blog entry and add layouts. The requirements and a few comments are included in the page. I won't repeat them here.

Fell free to download the HTML and CSS — If you want to submit a CSS that uses the current markup, mail it to me; if you require a different markup, mail both HTML and CSS, I will upload them and report here. Please don't post entire files in the comments, as it makes very hard reading.

Please note the HTML and CSS validate. I would like to keep it that way.

Note to self: check with Harald if we're not using XHTML instead.

The MS3 default template will use a CSS based layout. I will not go over advantages and disadvantages of CSS vs. tables, this has been amply debated over the years. Let's say CSS Zen Garden is testimony to the versatility of CSS2 layouts.

We have also decided the contents of the page should come first in the HTML:

• It will definitely improve accessibility. See for example Techniques for Web Content Accessibility Guidelines 1.0, checkpoint 5.3
• It might lead to better positioning in search engines.

Also we're not using javascript for positioning.