Le Jardin Zen continue de faire des étincelles ! Au delà de la mise en page (des goûts et des couleurs...) l'auteur du Jardin, Dave Shea, se lance dans une réflexion qui fait plaisir à lire. En substance, IE6/Win étant la pour durer jusqu'en 2005, et le trio Mozilla / Opera / Safari (abregé en MOS)implémentant déjà des sélecteurs CSS3 (specification encore non finalisée), il est possible de mettre à profit cette différence. Cette pratique est justement démontrée dans son dernier design pour CSS Zen Garden.

Voici une liste non exaustive des sélecteurs CSS2 qui vous intéresseront, car bien supportés par MOS et pas par IE :

  • Child Selector, eg. #content>.introduction
  • Direct or Adjacent Sibling, eg. #footer + .bottomLink
  • Attribute Matching, eg. img[border]
  • Attribute Value, eg. acronym[title="Document Object Model"]
  • Attribute Substrings, eg. acronym[title="Object"]

Et quelques sélecteurs CSS3 :

  • Substring Prefix, eg. a[href^="http://www.mezzoblue"]
  • Substring Suffix, eg. a[href$="mezzoblue.com"]
  • Substring Match, eg. a[href*="zoblue"]

Accessoirement, on découvre dans les commentaires de cet article une astuce pour cacher des feuilles de style à IE6, de la même façon qu'on peut en cacher à Netscape 4. Fabuleux !