Trucs et astuces CSS

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

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

Document XHTML pour partir de bonnes bases :

            <title>Un titre explicite contenant les mots-clés de la page</title>



            <!--[if lt IE 7]&gt;-->


            <!--[if IE]&gt;-->

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 :

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

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



5 commentaires pour “Trucs et astuces CSS”

  1. Cap° dit :

    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.

  2. br1o dit :

    Salut ! Il existe depuis quelques temps déjà. Mais bon il était peu visible ;) Comment va ?

  3. br1o dit :

    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 ?

  4. Cap° dit :

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

  5. DanielR dit :

    Magnifique collection d’astuces. Merci !



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site