Le quotidien de l’intégrateur HTML est parfois assombri par la survenance de bugs plus ou moins gênants. Ces derniers jours, je me suis débattu avec un décalage de couleur entre une image au format png et un fond spécifié en hexadécimal. Et comme si ça ne suffisait pas, Internet Explorer et Firefox n’ont pas aimés que je débute l’intitulé d’un identifiant avec un underscore ! Pfff… Pour finir si l’utilisation de overflow: hidden pour clearer les float est une bonne idée, cette propriété peut avoir des effets de bord indésirables. Enfin, voyons ça de plus près :

Le png c’est bien, mais le gif c’est mieux !

J’ai tenté en vain de raccorder le fond d’une image avec la couleur équivalente en hexadécimal à cause d’une légère différence de teinte qui n’avait pas lieu d’être : les valeurs entre la couleur sélectionnée avec la pipette de Photoshop et celle que j’indiquais dans ma feuille de style étaient identiques.

Puis j’ai eu l’idée de modifier le format du fond en passant du png au gif. Et là, bingo, mes deux couleurs se sont raccordées sans solution de continuité. Je précise que ce léger problème n’apparaissait que sur IE6, Firefox et Opera me restituant les bonnes teintes.

Toutefois si vous désirez absolument conserver le format png vous pouvez lire ce fil du forum Alsacréations qui décrit le même phénomène avec une solution logicielle : tweakpng pour enlever les informations liées au réglage du Gamma.

Ca me rappelle que le même phénomène se produit lorsqu’on veut raccorder certaines couleurs présentes dans une animation Flash avec une couleur en hexa dans le code HTML. Je me demande si le fait que Flash utilise le format png n’en serait pas la raison. Si des adeptes de Flash passent par ici j’aimerais bien savoir comment ils gèrent ce problème.

Ne débutez pas un id avec un underscore, car IE6 et Firefox n’aiment pas ça

C’est typiquement le genre de truc qu’il vaut mieux vérifier avant d’appeler SOS médecin : j’en ai fait l’amère expérience il y a peu. C’est assez curieux car les spécifications autorisent bien l’usage du souligné et du tiret pour les identificateurs et les classes…

En CSS2, les identificateurs (ainsi que les noms des éléments et ceux des classes et IDs des sélecteurs) ne peuvent contenir que des caractères parmi [A-Za-z0-9] et ISO 10646 supérieurs à 161, ainsi que le tiret (-) et le souligné (_) ; ils ne peuvent commencer ni par un tiret ni par un chiffre.

Donc, si j’ai bien lu : le tiret (-) est autorisé sauf au début, tandis que le souligné (_) est valide partout. Peut-être un excès de zèle de la part des navigateurs ?

overflow: hidden : cachez ce menu que je ne saurais voir

Lorsqu’on utilise la propriété float pour placer du contenu à gauche ou à droite d’un élément, il est souvent nécessaire de rétablir le flux, pour celà, on peut utiliser clear: left|right|both pour éviter que le bloc en question ait des voisins à gauche, à droite ou des deux côtés. Ce clear peut également être utilisé sur un élément HTML comme hr, br ou div.

Suite à mon billet sur la question du rétablissement du flux après un float, j’ai eu l’occasion de redécouvrir la propriété overflow: hidden|visibble|auto qui, en plus de gérer le débordement du contenu d’un élément, permet de créer un contexte de formatage qui a les mêmes conséquences que clear: both pour rétablir le flux.

Aussitôt lu, aussitôt testé avec succès, je commençais à me servir d’overflow: hidden quand je me suis rendu compte que la conséquence évoquée plus haut n’annulait pas sa fonction première : rendre visible ou pas le débordement d’un élément contenu dans un bloc auquel on applique overflow: hidden.

En effet, si l’on a un menu déroulant en position: absolute dans un bloc dont un ancêtre possède overflow: hidden et si la hauteur de cette ancêtre est inférieure à la hauteur du menu déroulant en question, ce dernier est coupé dans les limites de l’ancêtre… Voir à se sujet le billet de Rémi Prévost et les commentaires associés.

Hum… j’espère que c’est plus simple à comprendre qu’à expliquer ;)

Articles sur le même sujet

• Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire
• Opacité CSS et effet de trame avec GIF/PNG transparent
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ?
• Améliorations cosmétiques et ergonomiques sur ce blog

Pour obtenir un effet d’opacité sur un élément, il existe le format d’image PNG 24 bits qui accepte jusqu’à 256 niveaux de transparence. Malheureusement Internet Explorer 6 ne prend pas en charge cette intéressante caractéristique… Je vais vous proposer une méthode full CSS et une autre permettant d’utiliser des images GIF ou PNG transparentes de manière créative avec une page d’exemples à la clé.

Effet de transparence avec CSS

En attendant la version 7 d’Internet Explorer censée résoudre le problème, nous pouvons regarder ce que propose CSS :

 .trans50 {
     filter: alpha(opacity=50);
     -moz-opacity: 0.5;
     -khtml-opacity: 0.5;
     opacity: 0.5;
}

L’ensemble, bien que non-valide d’après les validateurs CSS, n’en est pas moins très efficace. A un détail près : il semble qu’Internet Explorer n’applique pas l’opacité sur un élément ne possédant pas de largeur explicite ou dont la largeur est égale à width: auto.

Ces quatre lignes permettent d’appliquer un effet de transparence paramétrable à n’importe quel élément. Qu’il s’agisse d’appliquer une opacité à un aplat de couleur se trouvant au-dessus d’une photo, ou à une photo se trouvant au-dessus d’un aplat de couleur, ou, pourquoi pas, d’appliquer l’opacité à une photo par dessus une autre… Rien n’est permis (question validateur), mais tout est possible ;)

Effet de transparence avec une image GIF ou PNG

Pour obtenir un effet d’opacité, je me suis rendu compte que l’on pouvait également utiliser un GIF ou un PNG transparent et laisser transparaitre l’image de fond à travers les mailles du filet. Très simple à mettre en oeuvre, cette technique est très puissante en ce qu’elle permet d’obtenir de très beaux effets de transparence, tout en laissant la possibilité de jouer sur le point de trame.

Je vous laisse avec un aperçu des possibilités offertes par les CSS et les GIF ou PNG transparents pour obtenir des effets d’opacité. Comme toujours, n’hésitez pas à afficher le code source de l’exemple.

Télécharger le fichier .html ou .php et les images

Linkographie. Effet de trame et d’opacité

A propos de PNG

http://www.libpng.org/pub/png/

Le site de l’inventeur du PNG. Indispensable.

http://openweb.eu.org/articles/png_vs_gif/

Très bonne source d’information sur le format PNG en français.

http://www.chevrel.org/fr/carnet/…

Encore un peu de pédagogie !

A propos des effet de transparence

http://www.babylon-design.com/site/…

Blog sur le développement web et les css en particulier qui m’a été fort utile

Articles sur le même sujet

• Trucs et astuces CSS
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• [résolu] Les folles journées de l'intégrateur HTML et ses petits tracas…
• Quelques notes — Programme de formation HTML & CSS
• IE6 — Gérer la transparence du format PNG 24 bits

Cette page regroupe des trucs & astuces CSS que j’ajoute régulièrement : bookmarkez, blogmarker, favorisez, bref faites tourner… Si vous cherchez plutôt des exemples de design CSS plus complets, les billets présents dans cette page consacrée au design web avec CSS devrait vous intéresser ;)

Si vous avez vous aussi quelques astuces CSS à partager, n’hésitez pas à le faire dans les commentaires.

• La feuille blanche
• Raccourci pratique pour les bordures CSS
• Transparence
• Commentaires conditionnels d’IE vs hacks CSS
• Barre de défilement et décalage d’une page centrée
• Centrer un bloc horizontalement et verticalement dans la fenêtre du navigateur
• Centrer un bloc horizontalement dans la fenêtre du navigateur
• Modifier les caractéristiques des liens avec LoVe HAte

La feuille blanche

Document XHTML pour partir de bonnes bases :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
        <head>
            <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
            <meta http-equiv="Content-Language" content="fr" />
            <title>Un titre explicite contenant les mots-clés de la page</title>
            <link rel="icon" type="image/png" href="favicon.png" />
            <script type="text/javascript" src="/js/jquery.js"></script>
            <link media="screen" rel="stylesheet" type="text/css" href="/style.css" />
            <!--[if lt IE 7]>
                <script type="text/javascript" src="/js/ie7/IE7.js"></script>
            <![endif]-->
            <!--[if IE]>
             <link rel="stylesheet" type="text/css" href="/ie.css" />
            <![endif]-->
        </head>
        <body>
       </body>
</html>

Consultez cet article d’OpenWeb pour mieux connaitre les différentes DTD et les gabarits XHTML prêt à l’emploi.

J’ajoute souvent un Reset CSS au choix pour débuter la feuille de style :

• Remise des marges à zéro avec le sélecteur universel
• Reset CSS Reloaded
• INITIAL
• YUI Reset CSS
• undohtml.css

Lire l’indispensable article de Blog & Blues pour plus d’informations sur la diminution de la taille par défaut de la police et l’utilisation de l’unité de mesure em

Quelques informations supplémentaires au sujet de la remise à zéro des margin et padding pour tous les éléments sur leftjustified.net.

On a toujours besoin d’un peu d’interactivité sur nos pages web. La bibliothèque Javascript jQuery est idéal : empreinte légère, et facilité d’utilisation, plugins nombreux, communauté réactive. Lire cette introduction à jQuery et cette liste de 240 plugins pour jQuery.

Raccourci pratique pour les bordures CSS

Ces deux propriétés CSS permettent de gérer l’épaisseur, le style, la couleur d’une bordure ainsi que les côtés où elle apparait.

.bordure {
    border: 1px solid #DF001A;
    border-width: 0 0 3px 0;
}

Cet exemple affiche une bordure de 3 pixels au bas de l’élément dont la classe est bordure. La valeur de 1px de la première déclaration CSS est surchargée par la valeur de la deuxième ligne.

Pour afficher une bordure de 1 pixel en haut et 3 pixels à gauche, il suffit de modifier la deuxième ligne comme ceci : border-width: 1px 0 0 3px;

Transparence

div.transparence {
    filter:alpha(opacity=50);
    -moz-opacity:  0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

La gestion de l’opacité est un chemin semé d’embûches. Heureusement, il existe des chemins de traverse pour pallier le manque de support des propriété standards par les navigateurs.

J’ai trouvé les 3 premières lignes chez ac-graphic.net et la quatrième chez babylon-design. La première ligne est destinée à IE, la deuxième à Firefox, la troisième est un standard en CSS3 ! et la dernière à Konqueror.

P.S. : Pour une compatibilité maximale, il est conseillé de mettre les 4 lignes ensemble.

Commentaires conditionnels d’IE vs hacks CSS

<!--[if IE]>
    <style type="text/css">
        @import "/style/pour_ie.css";
    </style>
<![endif]-->

Barre de défilement et décalage d’une page centrée

html {
    overflow-y: scroll;
    overflow: -moz-scrollbars-vertical;
}

Centrer un bloc horizontalement et verticalement dans la fenêtre du navigateur

#page {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30em;
    height: 30em;
    margin: -15em 0 0 -15em;
    border: 1px solid #000;
    text-align: left;
    background-color: #990;
}

Centrer un bloc horizontalement dans la fenêtre du navigateur

#page {
    position: relative; /* optionel mais utile par la suite /
    width: 80%;
    margin: 0 auto;
    text-align: left; / optionel : reliquat d'un bug sous ie5.5 */
}

Modifier les caractéristiques des liens avec LoVe F HAte

a          { color: #CAB3A5; }
a:link     { color: #CAB3A5; }
a:visited  { color: #CAB3A5; }
a:focus    { color: #CAB3A5; }
a:hover    { color: #DB9D41; }
a:active   { color: #FFF; }

Articles sur le même sujet

• Quelques notes sur XHTML et CSS, au fil de l’eau…
• Exercice de style CSS et HTML : table vs div
• Menu HTML et CSS, sliding doors et item current en PHP
• Opacité CSS et effet de trame avec GIF/PNG transparent
• IE6 — Gérer la transparence du format PNG 24 bits