Bidouillage de boîtes
De Mi caja de notas
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>