Le CSS que l'on consulte le plus, avec les valeurs que produisent les générateurs CSS du site. Essayez-le dans le Convertisseur d'Unités CSS, le Générateur d'Ombre CSS (Box Shadow), le Générateur de Border Radius CSS, le Générateur de Dégradé CSS, le Générateur de clamp() CSS, le Générateur de CSS Grid et le Générateur de Cubic Bezier.
Unités
| Unité | Relative à | À utiliser pour |
|---|---|---|
px |
Un pixel CSS (1/96 de pouce) | Bordures, filets, ombres |
rem |
Taille de police racine (en général 16px) | Tailles de police et espacements suivant les réglages de l'utilisateur |
em |
Taille de police de l'élément lui-même | Marges internes qui suivent le texte |
% |
La propriété correspondante du parent | Largeurs et mises en page fluides |
vw vh |
1 % de la largeur ou de la hauteur de la fenêtre | Sections plein écran, typographie fluide |
dvh |
Hauteur dynamique de fenêtre (barres mobiles) | Mises en page pleine hauteur sur mobile |
ch |
Largeur du caractère 0 |
Longueurs de ligne lisibles comme 65ch |
fr |
Une part de l'espace libre dans une grille | Colonnes et lignes de grille |
24px font 1.5rem avec la racine par défaut de 16px ; le Convertisseur d'Unités CSS fait le calcul.
Raccourcis
- Quatre valeurs tournent dans le sens horaire depuis le haut :
margin: haut droite bas gauche. Deux valeurs sontvertical horizontal; une valeur fixe les quatre. - Ombre de boîte :
box-shadow: décalage-x décalage-y flou étendue couleur, avecinseten tête pour une ombre intérieure. Exemple :box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.25); - Rayon de bordure : un à quatre coins depuis le haut gauche dans le sens horaire.
border-radius: 8px 8px 8px 8px;arrondit tous les coins ;border-radius: 50%fait un cercle à partir d'un carré. - Dégradé :
linear-gradient(135deg, #667eea, #764ba2). L'angle0degpointe vers le haut,90degvers la droite et135degvers le coin inférieur droit. Utilisezradial-gradient(circle, a, b)pour un dégradé radial.
Typographie fluide avec clamp()
clamp(min, préféré, max) garde une valeur entre un minimum et un maximum tandis que le terme central évolue avec la fenêtre. Pour passer de 16px à 320px de fenêtre à 32px à 1280px, le générateur produit clamp(1rem, 0.6667rem + 1.6667vw, 2rem). Gardez le maximum sous environ 2,5 fois le minimum pour que le texte puisse encore atteindre 200 % de zoom.
Grille et flex en une ligne
- Grille de cartes adaptative, sans media queries :
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; - Centrer n'importe quoi :
display: grid; place-items: center; - Élément flexible :
flex: 1 1 0partage l'espace à parts égales ;flex: 0 0 autogarde sa taille naturelle.
Courbes d'accélération
| Mot-clé | Courbe |
|---|---|
linear |
cubic-bezier(0, 0, 1, 1) |
ease |
cubic-bezier(0.25, 0.1, 0.25, 1) |
ease-in |
cubic-bezier(0.42, 0, 1, 1) |
ease-out |
cubic-bezier(0, 0, 0.58, 1) |
ease-in-out |
cubic-bezier(0.42, 0, 0.58, 1) |
Concevez la vôtre avec le Générateur de Cubic Bezier.
Spécificité
La spécificité se compte en (ID, classes et pseudo-classes, éléments) et se compare de gauche à droite. #nav .item a:hover vaut (1, 2, 1) et l'emporte sur tout sélecteur sans ID. Les styles en ligne l'emportent sur tous, et !important contourne la spécificité : évitez-le.
Contraste des couleurs
WCAG demande un rapport de contraste d'au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte (environ 24px, ou 19px en gras). Noir sur blanc donne 21:1 et #767676 sur blanc 4.54:1, le gris le plus clair qui convient au texte courant. Vérifiez des paires avec le Vérificateur de Contraste des Couleurs ; voyez Comment fonctionnent la couleur et le contraste.