TESTS XHTML-CSS

Styles alternatifs

• Feuilles de styles permanentes, alternatives et préférées en (X)HTML (Les différents modes de liaison possible entre un jeu de feuilles de style et un document HXTML, voir le billet Feuilles de styles permanentes, alternatives et préférées en (X)HTML) :
  • Styles permanents, préférés, alternatifs avec l'élément link
  • Styles permanents, préférés, alternatifs avec l'élément link et l'élément style combinés, styles externes.
  • Styles permanents, préférés, alternatifs avec l'élément link et l'élément style combinés, styles internes.
  • Styles permanents, préférés, alternatifs avec l'instruction xml-stylesheet
  • Styles permanents, préférés, alternatifs avec l'en-tête HTTP1.0 link
  • Styles permanents, préférés, alternatifs avec l'en-tête HTTP Default-Style
  • Styles permanents, préférés, alternatifs avec la meta http-equiv="Default-Style"

• Plusieurs CSS print (Utilisation des styles alternatifs pour proposer plusieurs styles d'impression différents, voir le billet Plusieurs styles alternatifs pour imprimer).

Tests CSS2.1

Propriétés CSS

• IE Windows et la syntaxe de la propriété clip, page 1 et IE Windows et la syntaxe de la propriété clip, page 2 (virgules ou espaces comme séparateurs des valeurs de rect). Voir les billets :
  • Rogner une image en CSS
  • Syntaxe de la propriété clip
  • Utiliser Clip pour masquer du contenu de manière accessible ?
  • Mettre un titre en image et rester accessible

• Float, clear et contextes de formatage (avec un zest de haslayout pour IE5.x-6.0 Windows)

• Positionnement absolu et semi-flux (Exemples d'interaction entre le flux et la position absolue lorsque les valeurs de top</top> et <code>bottom ne sont pas spécifiées)

Bugs CSS

• IE Windows, layout et bugs de rendus CSS :
  • Les flottants
    • Extension du conteneur doté de layout aux enfants flottants
    • Restriction de la propriété clear aux flottants situés dans le conteneur doté de layout
    • Ecrasement d'un conteneur doté de layout et de la propriété overflow:auto
    • Ecoulement d'un élément en flux doté de layout à côté d'un flottant
    • Décalage d'une position relative dotée de layout jouxtant un flottant
    • Three Pixels Jog et layout
    • Three Pixels Jog, layout et DropShadow
  • Les listes
    • Disparition ou mauvais positionnement des marqueurs d'une liste dotée de layout
    • Espaces horizontaux excédentaires dans une liste d'éléments blocs dotés de layout
    • Réinitialisation des compteurs de listes ordonnées quand un item est doté de layout
    • Alignement vertical des marqueurs de liste quand les items sont dotés de layout
    • Prise en compte des espaces non significatifs dans les listes dont les items sont dotés de layout
  • Les tableaux
    • Largeur et positionnement d'un tableau dimensionné en pourcentage à côté d'un élément flottant, selon le layout.
  • La position relative
    • Prise en compte de la position relative du parent d'un élément flottant selon le layout
    • Disparition du background d'une liste dans un élément flottant en position relative, selon le layout
    • Disparition des couleurs d'arrière-plan et des bordures de liens blocks dans une liste dotée de layout et en position relative
  • Position absolue
    • Positionnement incorrect ou disparition des éléments en positionnement absolu, selon le layout
    • Dimensionnement incorrect des éléments en positionnement absolu, selon le layout
  • Soulignement (text-decoration)
    • Tests globaux du soulignement
    • Test soulignement et layout, à terminer
  • bordures latérales et padding-bottom d'un élément (text-decoration)
    • Extension de la zone de contenu des éléments suivants un div ou un blockquote dénué de layout, doté de bordures latérales et de padding-bottom

Astuces de mises en page

Sauf avis contraire explicite dans le test/billet concerné, ce qui suit ne constitue en aucun cas des gabarits de mise en page prêt à l'emploi, certifiés compatibles avec les navigateurs actuels, passé ou futur, et encore moins accessibles.

• 3 Colonnes flottantes et un ordre HTML rigoureux (utilisation de la position relative pour intervertir l'emplacement de deux colonnes flottantes).
• 2 Colonnes de même hauteur et 3 Colonnes de même hauteur(utilisation de la propriété display-table). Voir le billet Des colonnes de même hauteurs en CSS.
• 3 colonnes de même hauteur (utilisation de la propriété border de la colonne centrale).
• Centrer 3 blocs de hauteur constante côte à côte dans un design fluide (Utilisation de la propriété display: table).

Divers CSS

• CSS et encodage, quelques tests (Comment utiliser des caractères absents du jeu de caractère d'une feuille de style ? Voir l'article Feuilles de style, jeux et codage de caractères).