Bidouillage de boîtes

Produis tes souvenirs (apprentissage CSS 2002-09-15) (Fichier extrait d'une sauvegarde disque dur MyPassport 43.01 IndieWeb > IndieWeb 2013 > Bazar indieweb 2013)

Lien de référence : http://www.tantek.com/CSS/Examples/boxmodelhack.html

Cet article est une débauche. Vous pouvez m’aider à l'améliorer.

---

<-- -->

Bidouillage de Boîtes

TopBox

lien original (seul lien de référence) • © copyright 2001 by Tantek Çelik. All rights reserved.

Adaptation (fr) par xtof pour auto-apprentissage laborieux des subtilités des CSS ;-). Merci Tantek.

Ici un échantillon de div avec la class "topbox".

Une bordure de 20px, 30px d'espace autour de l'élément et 300px de large.

div.topbox { 
  border:20px solid;
  padding:30px;
  background: #ffc;
  width:300px;
}

La largeur totale incluant les bordures et l'espace autour de l'élément devrait être de 400px.

20+30+300+30+20 = 400

Les agents utilisateurs qui interprètent mal le modèle de boîte CSS1 en plaçant bordure et espacement autour de l'élément à l'intérieur de la largeur spécifiée devraient donner un résultat d'une largeur totale de seulement 300px, et une largeur de contenu de seulement 200px.

300-20-30-30-20 = 200

Les barres rouges et bleues en dessous sont là pour la comparaison. Cette div (incluant ses bordures) devrait être aussi large que la barre bleue.

 

 

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;
} 

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 :

• http://lists.w3.org/Archives/Public/www-validator-css/2001Jul/0086.html
• http://lists.w3.org/Archives/Public/www-validator-css/2001Oct/0070.html

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.

Style • Structure • Standards en Francophonie... • christophe@elanceur.org --> </body> </html>