Bidouillage de Boîtes

Contenu

Ici un échantillon de div avec la classe "content".

Cette div est "stylée" presque comme la div "topbox" :

div.content { 
  border:20px solid;
  padding:30px;
  background: #ffc;
}

avec un ajout important. Il y a une seconde règle de style, qui prend le dessus d'un bogue de parsage CSS dans IE5/Windows et IE5.5/Windows, pour appliquer une largeur qui est ensuite outrepassée.

div.content { 
  width:400px; 
  voice-family: "\"}\""; 
  voice-family:inherit;
  width:300px;
}

Cette div (comprenant ses bordures) devrait aussi être aussi large que la barre bleue, même dans IE5/Windows et IE5.5/Windows.

En plus, nous ajoutons une règle supplémentaire immédiatement suivie de la règle de style au dessus, pour aider les UAS qui supportent les sélecteurs CSS2 et le modèle de boîte CSS, mais ont le même bogue de parsage que IE5.x/Windows mentionné au-dessus. Je l'appelle la règle "sois joli avec Opera 5". Et soyez sûr de ne laisser aucun espace autour du '>'.

html>body .content {
  width:300px;
}

Coucou2 ! Cette photo de Lucie fait 299 pixels de large et se place ici à titre de test .A+ tard

Pour finir, notez que les UAs qui ont le bogue de parsage illustré par la valeur "\"}\"", pourrait potentiellement ignorer la prochaine règle, de telle manière que la règle "sois joli dans Opera 5" serve à aider ces parseurs errants "chopés" là où va la feuille de style.

Pour démontrer que le parsage des CSS des UAs peut recouvrer ce point, j'ai ajouté une règle supplémentaire juste après la précédente simplement pour clarifier.

p.ruletest { color: blue }

Ce paragraphe a une class="ruletest" et devrait ainsi être coloré en bleu. S'il est rouge, une règle d'avant (qui devrait avoir été outrepassée par la dernière) est en train de prendre un effet non attendu. Notez que cette dernière règle de style n'est pas nécessaire, et qu'elle est seulement ici pour illustrer que le bidouillage de modèle de boîte règle proprement le nettoyage.

Validez les feuilles de style comme fichiers média indépendants

03/09/2002 Jonathan Horn a noté que le validateur CSS du W3C renvoie des erreurs quand la propriété 'voice-family' est utilisée dans une 'feuille de style écran'.

Comme je le faisais remarquer dans les commentaires de Dave Shea's mezzoblue, c'est une erreur du validateur W3C CSS. Le validateur devrait renvoyer un message d'alerte, pas une erreur, quand les propriétés qui ne sont pas supportées par un médium particulier sont utilisées, et cela a été rendu compte au W3C :

Mon conseil : validez votre feuille de style comme un fichier média indépendant, aussi vous saurez que vous utilisez une CSS valide, et ensuite l'importerez à l'intérieur d'un élément média dépendant aussi bien que nécessaire.

Addenda

20020404. Prerit Bhakta a remarqué que si vous insérez le prologue ?xml :

<?xml version="1.0"?>

IE6/Windows utilise ensuite le modèle de boîte avec une bizarrerie de caractère.

Depuis que le prologue ?xml n'est pas nécessaire, je recommande de simplement l'omettre.

TopBox

Contenu

Validez les feuilles de style comme fichiers média indépendants

Addenda