light bulb icon

Conseils d’expert en CSS Awesome

Une collection de conseils pour vous aider à mener vos compétences CSS au niveau pro.

Pour d’autres listes géniales, consultez la liste organisée par [@sindresorhus](https://github.com/sindresorhus/) des listes impressionnantes.

Table des matières

Conseils d’expert

  1. Utilisez un Reset CSS
  2. Hériter de box-sizing
  3. Utilisez unset au Lieu de Réinitialiser Toutes les Propriétés
  4. Utiliser :not() pour Appliquer / ne pas Appliquer des Bordures à la Barre de Navigation
  5. Vérifiez si la police est installée localement
  6. Ajouter line-height à body
  7. Définissez : focus pour les Éléments de Formulaire
  8. Tout Centrer Verticalement
  9. Listes Séparées par des Virgules
  10. Sélectionner des Éléments en Utilisant un nth-child Négatif
  11. Utiliser SVG pour les Icônes
  12. Utilisez le Sélecteur “chouette lobotomisée”
  13. Utilisez max-height pour des Sliders en CSS Pur
  14. Cellules de Tableau à Largeur Égale
  15. Se Débarrasser des Hacks de Marge Avec Flexbox
  16. Utiliser des Sélecteurs d’Attribut avec des Liens Vides
  17. Style “Par Défaut” des Liens
  18. Ratio de Boîtes Intrinsèque
  19. Styliser des Images Cassées
  20. Utilisez rem pour le Dimensionnement Global; Utilisez em pour le Dimensionnement Local
  21. Masquer les Vidéos Lancées Automatiquement qui ne sont pas Mises en Sourdine
  22. Utilisez :root pour le Type Flexible
  23. Réglez font-size sur les Éléments de Formulaire pour une Meilleure Expérience Mobile
  24. Utiliser les Événements de Pointeur pour Contrôler les Événements de la Souris
  25. Définit display: none sur les sauts de ligne utilisés comme espacement

Utilisez un Reset CSS

La réinitialisation CSS aide à faire respecter une cohérence de style entre les différents navigateurs en faisant table rase pour les éléments de style. Vous pouvez utiliser la bibliothèque de réinitialisation CSS comme Normalize, et al, ou vous pouvez utiliser une approche de réinitialisation plus simplifiée : 

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

Maintenant, les éléments seront dépouillés des marges et de zones de remplissage, et box-sizing vous permet de gérer la mise en page avec le modèle de boîte CSS.

Démo

Remarque: Si vous suivez le conseil Hériter box-sizing ci-dessous vous pouvez choisir de ne pas inclure la propriété box-sizing dans votre reset CSS.

retour à la table des matières

Hériter de box-sizing

Laisser box-sizing être héritée de html:

html {
  box-sizing: border-box;
}

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

Cela rend plus facile le fait de changer box-sizing dans des plugins ou autres composants qui exploitent d’autres comportements.

Démo

retour à la table des matières

Utilisez unset au Lieu de Réinitialiser Toutes les Propriétés

Lors de la réinitialisation des propriétés d’un élément, il n’est pas nécessaire de réinitialiser chaque propriété individuelle : 

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  outline: none;
  padding: 0;
}

Vous pouvez spécifier toutes les propriétés d’un élément en utilisant le raccourci all. Définir la valeur sur unset change les propriétés d’un élément à leurs valeurs initiales : 

button {
  all: unset;
}

Remarque: les raccourcis all etunset ne sont pas pris en charge dans IE11.

retour à la table des matières

Utiliser :not() pour Appliquer / ne pas Appliquer des Bordures à la Barre de Navigation

Au lieu de mettre à l’encadrement…

/* add border */
.nav li {
  border-right: 1px solid #666;
}

… puis l’enlever du dernier élément…

/* remove border */
.nav li:last-child {
  border-right: none;
}

…Utiliser la pseudo-classe :not() pour appliquer uniquement aux éléments que vous voulez : 

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

Le sélecteur CSS définit la frontière comme un humain la décrirait.

Démo

retour à la table des matières

Vérifiez si la police est installée localement

Vous pouvez vérifier si une police est installée localement avant de la récupérer à distance, ce qui est également une bonne astuce de performance. 

@font-face {
  font-family: "Dank Mono";
  src:
    /* Full name */
    local("Dank Mono"),
    /* Postscript name */
    local("Dank Mono"),
    /* Otherwise, download it! */
    url("//...a.server/fonts/DankMono.woff");
}

code {
  font-family: "Dank Mono", system-ui-monospace;
}

Pointe du chapeau à Adam Argyle pour avoir partagé ce protip et cette démo.

retour à la table des matières

Ajouter line-height à body

Vous n’avez pas besoin d’ajouter line-height à chaque <p>, <h*>, et al. séparément. Au lieu de cela, ajoutez-le à body: 

body {
  line-height: 1.5;
}

De cette façon, les éléments textuels peuvent hériter de body facilement.

Démo

retour à la table des matières

Définissez :focus pour les éléments de formulaire

Les personnes voyantes utilisant le clavier se fient au focus pour déterminer où vont les événements de clavier sur la page. Mettez en évidence les éléments de formulaire, de façon cohérente par rapport à la mise en œuvre par défaut du navigateur : 

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  box-shadow: none;
  outline: #000 dotted 2px;
  outline-offset: .05em;
}

Démo

retour à la table des matières

Tout Centrer Verticalement

Non, ce n’est pas de la magie noire, vous pouvez vraiment centrer des éléments verticalement. Vous pouvez le faire avec flexbox… 

html,
body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-align-items: center;  
  -ms-flex-align: center;  
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

…et aussi avec CSS Grid :

body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}

Vous voulez centrer autre chose ? Verticalement, horizontalement… quoi que ce soit, à tout moment, en tout lieu ? CSS-Tricks a un article sympa sur comment faire tout cela.

Remarque: Surveillez certains comportement bogués avec flexBox dans IE11.

Démo

retour à la table des matières

Listes Séparées par des Virgules

Faites que les liste d’éléments ressemblent de vraies listes, séparées par des virgules : 

ul > li:not(:last-child)::after {
  content: ",";
}

Utilisez la pseudo-classe :not() and aucune virgule ne sera ajoutée au dernier élément.

Remarque: Il est possible que cette astuce ne soit pas idéale pour l’accessibilité, en particulier pour les lecteurs d’écran. Et copier / coller à partir du navigateur ne fonctionne pas avec le contenu généré par CSS. Procéder avec prudence.

retour à la table des matières

Sélectionner des Éléments en Utilisant un nth-child Négatif

Utilisez un nth-child négatif en CSS pour sélectionner des éléments de 1 à n. 

li {
  display: none;
}

/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
  display: block;
}

Ou, puisque vous avez déjà appris un peu en utilisant :not(), essayez : 

/* select all items except the first 3 and display them */
li:not(:nth-child(-n+3)) {
  display: none;
}

Démo

retour à la table des matières

Utiliser SVG pour les Icônes

Il n’y a aucune raison de ne pas utiliser SVG pour les icônes :

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

Le SVG permet de bien mettre à l’échelle et ce pour tous types de résolution, de plus il est pris en charge dans tous les navigateurs depuis retour au IE9. Donc laissez tombé vos fichiers .png, .jpg ou .gif-JIF-etc.

Remarque: Si vous avez seulement des boutons sous forme d’icônes SVG pour les utilisateurs voyants et que le SVG ne parvient pas à charger, cela vous aidera à maintenir l’accessibilité : 

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

retour à la table des matières

Utilisez le Sélecteur “Chouette Lobotomisée”

Il a peut être un nom étrange, mais utiliser le sélecteur universel (*) avec le sélecteur de frère adjacent (+) peut fournir une capacité de CSS puissante : 

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

Dans cet exemple, tous les éléments dans le flux du document qui suivent d’autres éléments recevront margin-top: 1.5em.

Pour en savoir plus sur le sélecteur “chouette lobotomisée”, lire la publication de Heydon Pickering sur A List Apart.

Démo

retour à la table des matières

Utilisez max-height pour des Sliders en CSS Pur

Mettre en œuvre des sliders en CSS uniquement en utilisant max-height avec débordement caché : 

.slider {
  max-height: 200px;
  overflow-y: hidden;
  width: 300px;
}

.slider:hover {
  max-height: 600px;
  overflow-y: scroll;
}

L’élément s’étends jusqu’à la valeur max-height au survol et le slider s’affiche à la suite du débordement.

retour à la table des matières

Cellules de Tableau à Largeur Égale

Il peut être pénible de travailler avec des tableaux. Essayez d’utiliser table-layout: fixed pour maintenir les cellules à largeur égale : 

.calendar {
  table-layout: fixed;
}

Des tableaux sans douleurs.

Démo

retour à la table des matières

Se Débarrasser des Hacks de Marge Avec Flexbox

Lorsque vous travaillez sur les gouttières des colonnes, vous pouvez vous débarrasser de nth, first- et last-child en utilisant la propriété flexbox space-between : 

.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%;
}

Maintenant les gouttières de vos colonnes apparaissent toujours uniformément espacées.

retour à la table des matières

Utiliser des Sélecteurs d’Attribut avec des Liens Vides

Affichez des liens lorsque l’élément <a> n’a pas de valeur de texte mais que l’attribut href a un lien : 

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

C’est assez pratique.

Démo

retour à la table des matières

Style “Par Défaut” des Liens

Ajouter un style pour les liens " par défaut" :

a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}

Maintenant, les liens qui sont insérés via un CMS, qui ne disposent généralement pas d’un attribut class, auront une distinction sans affecter de manière générique la cascade.

retour à la table des matières

Ratio de Boîtes Intrinsèque

Pour créer une boîte avec une proportion intrinsèque, tout ce que vous devez faire est d’appliquer une zone de remplissage en haut ou en bas de à un 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%;
}

En utilisant 20% pour le rembourrage, cela rend la hauteur de la boîte égale à 20% de sa largeur. Peu importe la largeur de la fenêtre d’affichage, la div enfant gardera son ratio d’aspect (100% / 20% = 5: 1).

Démo

retour à la table des matières

Styliser des Images Cassées

Faire des images cassées esthétiquement plus agréables avec un peu de CSS : 

img {  
  display: block;
  font-family: sans-serif;
  font-weight: 300;
  height: auto;
  line-height: 2;
  position: relative;
  text-align: center;
  width: 100%;
}

Maintenant, ajoutez les règles pseudo-éléments pour afficher un message d’utilisateur et une référence URL de l’image brisée : 

img::before {  
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img::after {  
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

En savoir plus sur la styliser de ce patron dans Ire Aderinokun’ message original.

retour à la table des matières

Utilisez rem pour le Dimensionnement Global; Utilisez em pour le Dimensionnement Local

Après avoir défini la taille de la police de base à la racine (html { font-size: 100%; }), définir la taille de la police pour les éléments textuels à em : 

h2 {
  font-size: 2em;
}

p {
  font-size: 1em;
}

Définissez ensuite la taille de police pour les modules à rem: 

article {
  font-size: 1.25rem;
}

aside .module {
  font-size: .9rem;
}

Maintenant, chaque module devient compartimentée et plus faciles à styliser, plus maintenable, et flexible.

retour à la table des matières

Masquer les Vidéos Lancées Automatiquement qui ne sont pas Mises en Sourdine

Ceci est une super astuce pour une feuille de style personnalisée par l’utilisateur. Évitez de surcharger un utilisateur avec le son d’une vidéo lue Automatiquement lorsque la page est chargée. Si le son n’est pas coupé, ne pas montrer la vidéo : 

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

Encore une fois, nous trions parti de l’utilisation de la pseudo-classe :not().

retour à la table des matières

Utilisez :root pour le Type Flexible

La taille type de police dans une mise en page responsive devrait être en mesure de s’ajuster à chaque fenêtre d’affichage. Vous pouvez calculer la taille de la police basée sur la hauteur de la fenêtre et la largeur en utilisant : root: 

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

Démo

Maintenant, vous pouvez utiliser l’unitée de root em basée sur la valeur calculée par: root: 

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

retour à la table des matières

Réglez font-size sur les Éléments de Formulaire pour une Meilleure Expérience Mobile

Pour éviter aux navigateurs mobiles (iOS Safari, et al.) de zoomer sur des éléments de formulaire HTML quand un menu déroulant <select> est touché, ajoutez font-size à la règle de sélection : 

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

:dancer:

retour à la table des matières

Utiliser les Événements de Pointeur pour Contrôler les Événements de la Souris

Les événements de pointeur vous permettent de spécifier comment la souris interagit avec l’élément qu’elle touche. Pour désactiver l’événement de pointeur par défaut sur un bouton, par exemple : 

.button-disabled {
  opacity: .5;
  pointer-events: none;
}

C’est aussi simple que cela.

retour à la table des matières

Définit display: none sur les sauts de ligne utilisés comme espacement

Comme Harry Roberts l’a souligné, cela peut aider à empêcher les utilisateurs du système de gestion de contenu d’utiliser des sauts de ligne supplémentaires pour l’espacement: 

br + br {
  display: none;
}

retour à la table des matières

Prise en charge par les navigateurs

Les versions actuelles de Chrome, Firefox, Safari, Opera, Edge, et IE11.