DanLevy.net

Quiz : Connaissez‑vous le CSS moderne ? (2025)

Êtes‑vous assez front‑end ?

Quiz : Connaissez‑vous le CSS ?

1. 

Échauffement

Quelle est la bonne façon d’utiliser une variable CSS nommée --main-color pour définir la couleur de fond d’un élément ?

:root {
  --main-color: blue;
}
div {
  /* How do we use --main-color here? */
}

Les variables CSS s’utilisent avec la fonction var, donc la bonne réponse est background-color: var(--main-color);. Cette syntaxe récupère la valeur de --main-color et l’applique.

Les autres options peuvent rappeler d’autres langages ou syntaxes de préprocesseurs, comme Sass ou Less.

2. 

Fonctions CSS

Si la largeur du parent/conteneur est de 400 px, quelle sera la largeur calculée de l’élément suivant ?

div {
  width: min(250px, 50%);
}

La fonction min() choisira la plus petite valeur entre 250 px et 50 % de la largeur du parent.

Pour comprendre la valeur calculée, nous devons convertir les unités relatives en pixels :

  • 50% de 400px vaut 200px
  • 250px est déjà en pixels
/* This gets computed to */
width: min(250px, 200px);
/* -> 200px wins */

La fonction min() est particulièrement utile en conception réactive, où vous pouvez garantir qu’un composant (ou une taille de police) ne dépasse pas une certaine limite.

3. 

Fonctions CSS

Étant donné un conteneur de 200 px de largeur, quelle serait la largeur calculée du <div> ?

div {
  width: max(50px, 10%, 6rem);
}

La fonction max() accepte 2 entrées ou plus et utilise automatiquement la plus grande valeur. En supposant que la taille de police racine soit la valeur par défaut du navigateur 16px, la largeur donne 96px.

Pour comprendre la valeur calculée, il faut convertir les unités relatives en pixels :

  • 50px est déjà en pixels
  • 10% de 200px vaut 20px
  • 6rem correspond à 6 * 16px (la taille de police par défaut), soit 96px
/* This gets computed to */
width: max(50px, 20px, 96px);
/* -> 96px wins */

4. 

Fonctions de grille CSS

Quel est l’effet d’utiliser minmax(100px, 200px) pour une piste de grille CSS ?

grid-template-columns: minmax(100px, 200px);

Utiliser minmax(100px, 200px) permet à la piste de grille de redimensionner entre 100px et 200px, s’adaptant à l’espace disponible sans jamais descendre en dessous de 100px ni dépasser 200px.

Vous pouvez créer des mises en page auto‑ajustées où le conteneur et les enfants jouent chacun un rôle dans le calcul des dispositions. C’est puissant lorsqu’on le combine avec repeat() et auto-fill ou auto-fit, qui créeront autant de pistes que possible dans les limites.

5. 

Variables CSS

Quelle couleur aura le fond pour le CSS suivant ?

div {
  background: var(--primary, olivedrab);
}

La fonction var() vous permet de définir une valeur de secours si la variable n’est pas définie. Dans ce cas, le fond sera olivedrab (#6b8e23) parce que --primary n’est pas défini.

C’est une excellente façon de garantir que vos styles ne se cassent pas si une variable manque ou n’est pas prise en charge.

6. 

Fonctions CSS

Que fait la fonction clamp() ?

.card {
  width: clamp(200px, 50vw, 500px);
}

La fonction clamp() permet à la largeur de s’ajuster en fonction de 50vw, tout en la maintenant dans une fourchette de 200 px à 500 px.

Cela signifie que la largeur sera de 200 px lorsque 50vw serait inférieur à 200 px, de 500 px lorsque 50vw serait supérieur à 500 px, et linéaire entre ces limites.

Elle rend votre mise en page auto‑magiquement responsive ! Ce qu’il faut retenir sur clamp, c’est qu’elle combine des unités fixes avec des unités réactives ou calculées.

En général, on évite d’utiliser des unités de viewport pour les tailles de police, mais avec clamp() on peut garantir que la taille de police ne devienne ni trop petite ni trop grande.

7. 

Nesting CSS

Le CSS prend‑il en charge le nesting nativement ?

Oui ! Nous avons enfin le nesting CSS natif ! Le CSS a introduit la syntaxe de nesting native ces dernières années (2023), permettant un style hiérarchique directement dans le CSS.

8. 

Imbrication CSS

Est-ce une utilisation correcte de l’imbrication CSS native ?

.container {
  color: black;
  .title {
    color: white;
    background: black;
  }
}

La classe .title est imbriquée dans la classe .container, et les propriétés sont appliquées comme prévu.

C’est une excellente façon de garder les styles liés ensemble et d’éviter les sélecteurs trop longs.

9. 

Imbrication CSS

Quelle couleur de fond sera appliquée aux div enfants directs de .container ?

.container {
  background-color: red;
  > div {
    background-color: white;
  }
  background-color: blue !important;
}

Le sélecteur > dans la règle imbriquée applique background-color: white uniquement aux éléments div enfants directs de .container.

La dernière règle, background-color: blue !important;, est une petite distraction. Elle est en dehors de la règle imbriquée et sera appliquée à tous les éléments .container.

10. 

Variables CSS

Comment modifier la valeur d’une variable CSS à l’exécution ?

Les variables CSS peuvent être définies via des classes et JavaScript. Elles peuvent même être définies « après » leur utilisation technique.

document.documentElement.style.setProperty('--main-color', 'blue');

Cela changera la valeur de --main-color en blue pour tout le document.

Les variables CSS sont mutables et peuvent être modifiées à l’exécution via JavaScript.

Elles peuvent également être modifiées en ajoutant ou en retirant des classes, ce qui est un schéma courant pour le thémage.

11. 

Variables CSS

Quelle sera la largeur calculée de l’élément ?

:root {
  --base-width: 100px;
}
div {
  width: calc(var(--base-width) + 10px);
}

La fonction calc() combine la valeur de --base-width (100 px) avec 10 px supplémentaires, ce qui donne une largeur de 110 px.

Loading comments...