20 Astuces avancées de CSS pour les pros

Qui ne s’est jamais pris la tête parce que son code CSS ne faisait pas ce qui était attendu ? Ou alors ce dernier est tellement complexe et perché qu’il est impossible de s’y retrouver sans caféine en intraveineuse…Et bien réjouissez-vous, amis galériens, voici 20 astuces pour les utilisateurs avancés de CSS !

Relativement méconnu, les fonctionnalités avancées existantes en CSS sont pourtant très puissantes, faciles à apprendre et quelque fois indispensables une fois qu’on les connaît ! On peut remercier WebdesignerWall pour son dernier article présentant 20 astuces en CSS pour augmenter son niveau en CSS.

Les pré-processeurs comme LESS ou SCSS ont fait du chemin depuis quelques années en facilitant l’implémentation de CSS, en faisant gagner du temps et en ajoutant des possibiltiés mais… si on s’y connaît vraiment, on peut déjà faire plein de choses très rapidement avec du CSS natif.

Concrètement, les lignes qui vont suivre vous serviront à : cibler rapidement un élément grâce à des sélecteurs précis, minimiser les duplications de règles, standardiser le code pour tout le document et débuter son code sur un document vierge pour éviter toute erreur. Et surtout, de vous éviter des dizaines de lignes de CSS lorsque vous pouvez le faire avec une seule propriété ou sélecteur qu’il suffit de connaître !

Voici donc les 20 astuces à garder à l’esprit et même à mettre en favori pour ne pas les oublier :

1. Utiliser un Reset CSS

Depuis des années maintenant, il est conseillé d’utiliser un reset CSS au début de sa feuille de style pour normaliser le design sur tous les navigateurs avant de commencer. Mais avec ces simples lignes, vous enlevez tout le superflu des règles habituelles pour ne garder que l’essentiel :

* {    
  box-sizing: border-box;   
  margin: 0;    
  padding: 0;  
}

2. Hériter le box-sizing depuis l’HTML

html {    
    box-sizing: border-box;  
}    
*, *:before, *:after {    
    box-sizing: inherit;  
}

Cela facilite le changement de box-sizing quand on utilise des plugins ou applications tierces qui utilisent des comportement différents.

3. En finir avec les hacks de margin avec Flexbox

Aaaahh l’enfer de faire des colonnes de float, et de devoir tout casser et calculer pour avoir les bonnes marges partout… Fini les nth-, first-, et last-child, utilisez plutôt la propriété space-between dans flexbox. Avec ça les gouttières des colonnes auront toujours le même espacement.

 .flex-container {
 display: flex;
 justify-content: space-between;
 }
 .flex-container .item {
 flex-basis: 23%;
 }

4. Utiliser :not() pour styliser les bordures des listes

Imaginez une liste utilisée comme dans un menu de navigation par exemple avec des séparations entre chaque élément, telle qu’une bordure verticale, seulement il ne faut pas la laisser pour le dernier élément… il était donc commun jusqu’ici d’utiliser :last-child pour ça :

.nav li {
 border-right: 1px solid #666;
 }
 .nav li:last-child {
 border-right: none;
 }

Voici donc une petite version plus courte et plus propre avec l a pseudo-classe :not() et certain c’est plus simple et sémantique que bien d’autres méthodes.

.nav li:not(:last-child) {    
    border-right: 1px solid #666;  
}

5. Ajouter line-height à body :


Pour appliquer à tout votre projet d’un coupun interlignage plus aéré et pour ne pas le répéter à chaque élément <p>, <h*>, etc, appliquez-le tout de suite à body :

body {    
    line-height: 1.5;  
}

Notez que nous ne donnons pas  d’unité ici, nous lui disons simplement de faire la hauteur de ligne une fois et demie plus grande que la taille de la police pour un texte donné.

6. Centrer verticalement n’importe quoi :

html, body {
 height: 100%;
 margin: 0;
 }
 body {
 -webkit-align-items: center;
 -ms-flex-align: center;
 align-items: center;
 display: -webkit-flex;
 display: flex;
 }

7. Utiliser du SVG pour les icônes :

Cela s’adapte très bien à tous les navigateurs et remplacera tous vos autres formats de logos :

.logo {
 background: url("logo.svg");
 }

Si il y a des soucis d’accessibilité (notamment à cause d’icônes dans des boutons), essayez ceci pour maintenir l’accessibilité :

.no-svg .icon-only:after {    
    content: attr(aria-label);  
}

8. Utiliser le sélecteur « Chouette » :

Utiliser le sélecteur (*) suivi de (+) permet de définir des règles pour tous les éléments du document qui suivent d’autres éléments. Par exemple dans l’exemple suivant, tous les titres <h3> qui suivent un titre <h2> auront un espacement de 1.5rems, idem pour un paragraphe suivant un autre paragraphe ou tout élément qui suit un précédent. Pratique !

* + * {
 margin-top: 1.5rem;
 }

9. Rythme visuel vertical constant :

Pour votre confort de lecture de votre code, ceci devrait vous satisfaire si jamais le sélecteur « chouette » est trop généraliste et que vous voulez cibler des portions du design seulement :

.intro > * {
 margin-bottom: 1.25rem;
 }

10. Utiliser box-decoration-break pour rendre vos textes mieux encadrés :

Imaginons que vous voulez appliquer une couleur de fond, des marges et du padding à de longues lignes de texte mais qu’à chaque retour à la ligne vous ne souhaitez pas l’appliquer à un gros bloc mais à des lignes de textes séparées. Cette propriété permet d’appliquer le style tout en maintenant les margins et paddings intacts.

.p {
 display: inline-block;
 box-decoration-break: clone;
 -o-box-decoration-break: clone;
 -webkit-box-decoration-break: clone;
 }

11. Egaliser la largeur des cellules :

Travailler en tableau peut être un supplice donc utilisez ceci pour rendre toutes vos colonnes de même largeur :

.calendar {
 table-layout: fixed;
 }

12. Forcer les liens vides à s’afficher avec les sélecteurs d’attribut :

Particulièrement utile pour les liens vides insérés par les CMS où il n’y aura pas de texte mais un lien HTML quand même présent.

a[href^="http"]:empty::before {
 content: attr(href);
 }

13. Styliser les liens par défaut :

Encore une fois, plus que d’ajouter un style à chaque élément tout au long de votre document, stylisez une fois tous les liens <a> par défaut. Ce code permettra d’appliquer le style à tous les liens qui n’ont pas encore de style appliqué (particulièrement pratique quand on utilise des CMS comme WordPress) :

a[href]:not([class]) {
 color: #999;
 text-decoration: none;
 transition: all ease-in-out .3s;
 }

14. Ratio intrinsèque des boîtes :

Pour créer une boîte avec un ratio intrinsèque, il suffit d’appliquer un padding top ou bottom à une div :

.container {
 height: 0;
 padding-bottom: 20%;
 position: relative;
 }
 .container div {
 border: 2px dashed #ddd;
 height: 100%;
 left: 0;
 position: absolute;
 top: 0;
 width: 100%;
 }

15. Styliser l’affichage d’image cassée :

Une image qui ne s’affiche pas, ça arrive souvent et pour plusieurs raisons, alors voici une petite astuce pour styliser sa page dans ces cas particuliers :

img {
 display: block;
 font-family: Helvetica, Arial, sans-serif;
 font-weight: 300;
 height: auto;
 line-height: 2;
 position: relative;
 text-align: center;
 width: 100%;
 }
 img:before {
 content: "We're sorry, the image below is missing :(";
 display: block;
 margin-bottom: 10px;
 }
 img:after {
 content: "(url: " attr(src) ")";
 display: block;
 font-size: 12px;
 }

16. Utiliser rem pour le Global Sizing; Utiliser em pour le Local Sizing :

Après avoir défini la taille de la police de manière globale à html, par exemple font-size:15px, vous pouvez utiliser rems pour le font-size des éléments conteneurs :

article {
 font-size: 1.25rem;
 }
 aside {
 font-size: .9rem;
 }

Et puis définir la taille des textes en em pour les éléments textuels :

h2 {
 font-size: 2em;
 }
 p {
 font-size: 1em;
 }

Maintenant, chaque élément conteneur devient compartementalisé et plus facile à styliser, maintenir et est plus flexible.

17. Cacher les vidéos en lecture automatique qui ne sont pas muettes :

Evitez à vos utilisateurs de subir celà, nan vraiment, c’est pas cool.

video[autoplay]:not([muted]) {
 display: none;
 }

18. Utiliser :root pour plus de flexibilité :

Vous pouvez calculer la taille de la police en fonction de la hauteur et de la largeur de la fenêtre à l’aide des éléments suivants: root: et des unités viewports. Le pied lorsqu’on travaille en responsive !

:root {
 font-size: calc(1vw + 1vh + .5vmin);
 }

body {
 font: 1rem/1.6 sans-serif;
 }

19. Appliquez font-size sur les éléments de formulaire pour une meilleure expérience sur mobile :

Pour éviter que les navigateurs mobiles (iOS Safari, etc.) ne permettent de zoomer sur les éléments de formulaire HTML lorsqu’un menu déroulant <select> est utilisé, ajoutez font-size sur les inputs :

input[type="text"],
 input[type="number"],
 select,
 textarea {
 font-size: 16px;
 }

20. Utiliser les variables CSS :

Enfin, le plus gros level-up vient avec les variables CSS, qui vous permettent de déclarer un ensemble de valeurs de propriétés communes pouvant être réutilisées via un mot clé n’importe où dans votre code. (Pas trop tôt !)

Votre projet peut avoir un ensemble de couleurs à utiliser à travers tout votre site pour garder le design cohérent. Répéter ces valeurs de couleur à plusieurs reprises dans votre CSS n’est pas seulement une corvée, mais aussi sujettes aux erreurs. Si une couleur doit être modifiée à un certain moment, vous serez forcé de la trouver et de la remplacer, ce qui n’est pas fiable ou rapide, et lors de la construction de produits pour les utilisateurs finaux, les variables rendent la personnalisation beaucoup plus facile. Par exemple:

:root {
 --main-color: #06c;
 --accent-color: #999;
 }

h1, h2, h3 {
 color: var(--main-color);
 }
 a[href]:not([class]),
 p,
 footer span{
 color: var(--accent-color);
 }

Encore une fois, un grand merci à WebdesignerWall pour avoir partagé ces astuces CSS. Ce blog reste une pointure à connaître pour tout UI designer ou développeur front end. Avez-vous des astuces à rajouter ?

Auteur: Gaétan Weltzer, comme toujours en fait.