Gabarits CSS élastiques

Support de présentation pour l'atelier technique "Gabarits CSS élastiques" - Sixième Séminaire AccessiWeb - 18 juin 2007.

Sommaire

• Unités pour le container principal : gabarit frozen ("px") ou gabarit fluide ("%" ou "auto").
• Unités pour le texte ("px" contre "em, %, ...").
• Les différents navigateur et leurs fonctions d'augmentation de la taille du texte (texte seul ou zoom).
• Problématiques du télescopage à l'agrandissement du texte :
  • mise en page par tableaux.
  • mise en page sans tableau.
• Gabarit élastique (zoom) : container principal en "em" (ou "auto" + max-width en "em").
• Gabarit élastique (zoom), expérimentations :
  • Max-width : éviter le scroll horizontal précoce (+ simuler le max-width pour IE5 à 6).
  • Min-width : simuler un comportement "tableau" pour éviter le télescopage dans des agrandissements extrêmes.

Exemples

1. fluid vs frozen
2. table vs tabless
3. frozen vs elastic
4. elastic avec max-width (vs frozen)
5. les 2 techniques pour elastic + max-width (dont 1 min-width facultatif)
6. feuille de style perso avec grosse font
7. javascript max et min-width
8. css max-width pour IE
9. css max-width + elastic pour IE

Ressources à consulter

• Gabarit élastique :
  • Elastic Design by Patrick Griffiths
  • Fixed or fluid width? Elastic!
• Simuler "min-width" et "max-width" :
  • CSS minimum and maximum sizes
  • max-width in Internet Explorer
  • Gabarits CSS Accessibles (troisième Séminaire AccessiWeb).
• Cibler IE5 à 6 (win) :
  • Les syntaxes de commentaires conditionnels pour IE Windows