5 snippets CSS pratiques pour les développeurs web avec démonstration

De nos jours, les feuilles de style CSS sont un incontournable dans le développement de n’importe quel site web.

L’un des principaux défis auxquels les développeurs web doivent faire face lors de la création d’un site web est à la grande quantité de navigateurs dans le marché, qui rendent difficile la tâche de produire un site beau, fonctionnel et performant.

La solution, dans un monde idéal, c’est de respecter les standards du web (W3C), qui font notre site compatible avec tous les navigateurs. Malheureusement, ceci est faux. Ce n’est pas tous les navigateurs web qui respectent les standards ni toutes les personnes qui ont leur navigateur à jour, sans parler que l’industrie du développement web évolue très vite et les standards prennent des années à être implémentés.

Donc, bien que respecter les standards c’est parfait, il faut s’assurer que notre code est compatible avec tous les navigateurs (cross-browser) et nous assurer d’utiliser une syntaxe correcte.

Pour vous faciliter la tâche, j’ai préparé ici une liste de quelques snippets CSS que j’utilise assez souvent et qui peuvent être très pratiques pour vos projets :

Changer la couleur de la sélection

::-moz-selection { /* Pour firefox */
background:red;
color:white;
}

::selection { /* Pour les autres navigateurs */
background: red;
color:white;
}

Démonstration : http://jsfiddle.net/brunomargenats/Z5WSG/

Coins arrondis (sans images)

.rounded-corners {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}

Démonstration: http://jsfiddle.net/brunomargenats/9UWqW/

Lien sur un bloc complet

#nav li a { display:block; }

Démonstration : http://jsfiddle.net/brunomargenats/54Q8w/

Centrer le site web

<div id="page-wrap"></div>

 

#page-wrap {
     width: 960px;
     margin: 0 auto;
}

Démonstration : http://jsfiddle.net/brunomargenats/CaNn3/

Ombrage d’éléments

<span class="ombrage_texte">Ombrage appliqué aux textes</span>

 

#ombrage_exterieure {
-moz-box-shadow: 0 0 5px 5px #999;
-webkit-box-shadow: 0 0 5px 5px #999;
box-shadow: 0 0 5px 5px #999;
}

#ombrage_interieure {
-moz-box-shadow: inset 0 0 5px 5px #999;
-webkit-box-shadow: inset 0 0 5px 5px #999;
box-shadow: inset 0 0 5px 5px #999;
}

.ombrage_texte {
 text-shadow: 1px 1px 3px #444;
 color: #000;
}

Démonstration : http://jsfiddle.net/brunomargenats/6fn9q/2/

Bonus : Images à côté des liens selon leur type

a[href^="http://"]{
padding-left: 20px;
background: url(external.png) no-repeat center left;
}

 

a[href^="mailto:"]{
padding-left: 20px;
background: url(mail.png) no-repeat center left;
}

 

a[href$=".pdf"]{
padding-left: 20px;
background: url(pdf.png) no-repeat center left;
}

Démonstration : http://jsfiddle.net/brunomargenats/2nuCN/

Share Button

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *