flexbox, pseudo-classes et responsif ¶Si le flux de la page est vertical par défaut, la propriété display: flex permet d’attribuer à un élément un flux horizontal :
.container {
display: flex;
}Tous les éléments à l’intérieur de l’élément container seront positionnés côte à côte.
Une flexbox possède quelques propriétés intéressantes :
| propriété | description | valeurs possibles |
|---|---|---|
justify-content |
détermine l’espacement horizontal des éléments de la flexbox | center, flex-start, flex-end, space-between, space-around, space-evenly |
flex-wrap |
détermine si les éléments de la flexbox peuvent sauter à la ligne s’il n’y pas pas assez de place | nowrap, wrap, wap-reverse |
align-items |
détermine l’alignement vertical des éléments de la flexbox | stretch, flex-start, flex-end, center |
align-content |
exactement comme justify-content, mais contrôle cette fois l’espacement vertical des éléments en cas de plusieurs lignes. |
La propriété display: flex; permet de faire beaucoup plus que simplement cela, mais c’est une bonne première approche.
Le site 1-Line Layouts regroupe dix mises en page types, et propose des snippets (des bouts de code à copier-coller) permettant de reproduire ces mises en page, de façon responsive.
:hover et autres pseudo-classes[4] ¶En plus des sélecteurs CSS que nous avons déjà vus (h1 {…}, div {…}, .ma-classe {…}, etc…), il existe un certain nombre de sélecteurs un peu spéciaux, commençant par :, et permettant de cibler des éléments dans certains états et certaines conditions.
Ils s’utilisent de la façon suivante :
div {
/* style du div en conditions normales */
}
div:hover {
/* style du div lorsque survolé (hover en anglais) */
}Quelques pseudo-classes utiles :
| pseudo-classe | description |
|---|---|
:hover |
cible un élement survolé |
:active |
cible un élement en tain d’être activé (par exemple un lien en train d’être cliqué) |
:visited |
cible un lien déjà visité (par exemple, les liens :visited par défaut son violets) |
:first-child |
cible le premier enfant de l’élément |
:last-child |
cible le dernier enfant de l’élément |
:nth-child(even) |
cible un enfant sur deux (tous les numéros pairs) |
:nth-child(odd) |
cible un enfant sur deux (tous les numéros impairs) |
Un élément peut changer de propriétés au cours de sa vie (par exemple un div rouge qui devient vert au survol).
La transition d’une propriété à l’autre peut être animée en utilisant la propriété CSS transition.
Dans l’exemple ci-dessous, le div rouge deviendra bleu en ½ seconde lorsqu’il est survolé :
div {
transition: background 0.5s;
background: red;
}
div:hover {
background: blue;
}La propriété transition s’écrit de la façon suivante :
transition: propriété durée easing;La durée se note en seconde (ex: 0.5s) ou millisecondes (ex: 500ms).
La valeur d’easing (lissage de mouvement) est optionnelle, et peut être un mot clef parmis les suivants :
| fonction d’easing | description |
|---|---|
linear |
valeur par défaut, pas de lissage |
ease-in |
commence doucement, fini vite |
ease-out |
commence vite, fini doucement |
ease-in-out |
commence vite, accélère, fini en ralentissant |
steps(10) |
animation en 10 à-coups |
cubic-bezier(.29, 1.01, 1, -0.68) |
fonction de lissage custom |
La fonction cubic-bezier peut être générée sur cubic-bezier.com
Les medias queries sont des règles CSS spéciales qui permettent d’appliquer un style particulier en fonction de certaines propriétés du navigateur.
Elles sont particulièrement utiles pour gérer des mises en pages responsives, puisqu’elles permettent d’appliquer des styles différents selon la taille de l’écran.
body {
font-size: 20px;
}
@media (max-width: 600px) {
body {
font-size: 14px;
}
}Dans l’exemple ci-dessus, le corps typo sera fixé à 14px sur les écrans de moi de 600px de largeur.
Attention ! Contrairement aux pseudo-classes vues plus haut, les medias queries s’appliquent à tout le document, et doivent donc contenir des blocs entiers de style CSS (sélecteur + propriétés).
Quelques media queries utiles :
| media query | description |
|---|---|
@media (min-width: 900px) |
l’écran fait 900px de large ou plus |
@media (max-width: 900px) |
l’écran fait 900px de large ou moins |
@media (min-width: 500px) and (max-width: 800px) |
l’écran fait entre 500px et 800px de large |
@media (min-height: 900px) |
l’écran fait 900px de haut ou plus |
@media (orientation: portrait) |
l’écran est au format portrait |
@media (orientation: landscape) |
l’écran est au format paysage |
@media screen |
le document est affiché sur un écran |
@media print |
le document est imprimé |
@media (prefers-color-scheme: dark) |
le document est affiché sur un appareil avec le darkmode activé |
(en) A Complete Guide to Flexbox, CSS Tricks ↩︎
(en) 1-Line Layouts ↩︎
Pseudo-classes, MDN ↩︎
transition, MDN ↩︎