Trucs et astuces CSS

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 :

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]-->

Lire le billet consacré aux commentaires conditionnels.

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

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

La deuxième ligne est une propriété spécifique à Mozilla. Solution trouvée sur http://web.covertprestige.info/test/…

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