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 :
<!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;
opacity: 0.5;
-khtml-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; }
5 participations à l'article
OUla !!! Ce billet m’avais échappé. L’erreur est corrigé, cela tombe plutot bien car impossible de remettre la main sur le code du Commentaire conditionnels qui devrait me servir de plus en plus à l’avenir.
Salut !
Il existe depuis quelques temps déjà. Mais bon il était peu visible ;) Comment va ?
J’oubliais : j’ai mis le champ de recherche en haut à gauche. Je l’ai testé, il fonctionne à merveille, même sur la requête "commentaire conditionnel", étonnant, non ?
Exact, la prochaine fois j’utiliserais au maximum les fonctionnalités que propose le blog pour de la recherche d’info… Et puis maintenant je n’ai plus d’excuse pour louper des articles, avec le petit calendrier tout devient plus facile.
Tiens au fait j’en profite pour suggérer un petit tutorial sur l’alignement d’un menu en bas de page. En gros comment faire un align bottom sur une liste (qui servirait de menu) sachant que celle-ci peu être gérée dynamiquement (on peu avoir 3 choix comme 20). J’ai du faire la chose aujourd’hui et je me suis bien cassé les dents avant de trouver, et je ne suis pas sur de la bonne forme de mon code….. Bref !!!! Je me suis dis que cela était un défi à relever pour "Magic CSS" :D !!!!!
Magnifique collection d’astuces. Merci !