Des Citations qui Tapent à l'Oeil ?
par Source SitePoint
dimanche 24 juillet 2005
J'utilise le 'Alternate Box Model Hack #3 pour 'déboucher' le rendu dans Internet Explorer 5 et 5.5. Il y a une explication complète de cette technique (et d'autres) sur CSS-Discuss.
La chose la plus impressionnante à propos des citations est que les gens les lisent !
En termes plus simples, disons que la plupart des navigateurs modernes comprennent la déclaration
'!important'
et lui donnent la première règle de priorité.
Néanmoins IE5 et IE5.5 ignorent la déclaration
'!important'
et permettent à la seconde règle d'écraser la première règle. Nous avons tiré profit de cette erreur en nettoyant l'image et en réinitialisant la zone de remplissage avec cette seconde règle. IE6 ferait malheureusement la même chose, mais heureusement un bug de rendu magique déclenché par les balises de commentaires immédiatement avant la colonne signifie qu'il ignore la seconde règle. Ah,... Quand les mauvaises choses se cassent joliment.
Note : J'ai dû utiliser une syntaxe longue pour le 'background' dans la Design View Newsletter (pour des raisons de mise en page). J'ai mélangé ces 3 règles d'arrière-plan en une règle unique raccourcie ci-dessous pour qu'elle soit plus simple.
.pullquote {
width: 180px;
float:right;
padding: 10px;
font-size:1.5em;
line-height:1.5em;
margin:10px;
background: url(../Images/fermetureguillemets.gif) no-repeat bottom right !important;
background /**/:url(); /* Désactive l'effet citation dans IE5 + */
padding:0px 25px 5px 0px;
}
.pullquote:first-letter {
background: url(../Images/ouvertureguillemets.gif) no-repeat left top!important;
padding:5px 2px 10px 35px!important;
padding /**/:0px; /* Désactive l'effet citation dans IE5 + */
background /**/: url(); /* Désactive l'effet citation dans IE5 */
}
.style2 {color: #999}
pre {
border:1px solid #dd9;
font:12px "Courier New", Courier, mono;
padding:10px;
}
.style3 {
color: #FF0000;
font-weight: bold;
}
PS. Je dois admettre avoir étudié l'option de supprimer la zone de remplissage utilisée pour la fermeture des guillemets et ajouté deux espaces au dernier mot de la citation pour éviter le chevauchement de la citation (cad. 'em!' devient 'em! ') . Oui, cela semble plus serré, mais en faire ça me fait ressentir un manque de propreté ;). Votre serviteur. (Gee,.. J'aimerais un élément ':last-letter')
