Évaluation finale

Quiz du cours « CSS3 — architecture, responsive avancé et performance »

12 questions à choix unique pour vérifier que le parcours est acquis. Une seule tentative de réponse par question, correction immédiate.

80 % de bonnes réponses sont nécessaires pour valider le cours. Vous pouvez repasser le quiz autant de fois que nécessaire : seul votre meilleur score est conservé.

Pour préparer la refonte de la page de l’atelier, comment classeriez-vous une règle qui définit la disposition générale des horaires et du bloc de contact ?

Comme un style de mise en page, distinct des styles globaux et des styles propres aux composants Comme un style global, car elle concerne plusieurs blocs Comme un style de composant, même si elle organise plusieurs zones de la page Comme une règle de variante, car elle modifie la disposition

Vous souhaitez fixer explicitement l’ordre de priorité des couches « base », « layout » et « components ». Quelle syntaxe convient ?

@layer base, components, layout; @layer base, layout, components; @layer { base, layout, components; } @layer order(base, layout, components);

Quelle déclaration permet de réutiliser une couleur de conception tout en prévoyant une valeur de repli si la variable n’est pas définie ?

color: var(--color-accent, #2f6b3c); color: --color-accent(#2f6b3c); color: var(--color-accent) || #2f6b3c; color: var(--color-accent: #2f6b3c);

Le bloc contact doit avoir une variante mise en évidence sans modifier les styles des autres composants. Quelle approche convient ?

Ajouter un sélecteur global qui cible tous les blocs placés en fin de page Modifier la règle de base de tous les blocs pour qu’ils héritent de la mise en évidence Créer une classe de modificateur explicite, par exemple .contact--mis-en-avant Ajouter une règle qui cible chaque élément descendant du bloc contact par sa balise

Dans une règle de composant, quel est l’intérêt de :where() lorsqu’on cherche à limiter la spécificité ?

Il augmente la priorité du sélecteur sans ajouter de classe Il transforme le sélecteur en règle globale Il empêche les propriétés héritées d’atteindre le composant Il permet de regrouper des conditions sans ajouter de spécificité

Vous utilisez une propriété personnalisée de couleur définie dans :root. Que permet principalement cette déclaration ?

De donner à la variable une portée limitée au premier composant de la feuille De rendre la valeur disponible par héritage dans les éléments descendants, sauf surcharge locale De créer automatiquement une classe portant le nom de la variable De garantir que la valeur l’emporte sur toute règle placée dans une autre couche

Une règle CSS n’apparaît pas comme utilisée dans la couverture du navigateur pendant votre audit. Quelle action est la plus prudente ?

La supprimer immédiatement, car la couverture prouve qu’elle est morte La déplacer dans une couche de priorité supérieure Vérifier les autres pages et états concernés avant de décider de la supprimer La remplacer par une règle plus générale de même apparence

Vous voulez faire varier un espacement entre deux valeurs définies, sans qu’il descende sous le minimum ni dépasse le maximum. Quelle fonction CSS est adaptée ?

clamp(minimum, valeur-fluide, maximum) var(minimum, valeur-fluide, maximum) calc(minimum, valeur-fluide, maximum) minmax(minimum, valeur-fluide, maximum)

La présentation du bloc de conseils doit changer selon la largeur réelle de son conteneur plutôt que celle de la fenêtre. Quelle solution correspond à cet objectif ?

Utiliser uniquement une requête média sur la largeur du viewport Déclarer un conteneur adapté, puis appliquer une règle avec @container Ajouter une classe de variante différente à chaque largeur d’écran Utiliser une propriété min-width sur les éléments descendants sans déclarer de conteneur

Quel choix aide à réserver l’espace d’une image avant son chargement et à limiter les déplacements du contenu ?

Appliquer uniquement font-display: swap à la feuille de style Masquer l’image jusqu’à la fin de son chargement Déclarer une largeur très grande pour éviter tout recalcul Définir ses dimensions intrinsèques ou un rapport avec aspect-ratio

Quelle organisation facilite la maintenance d’une feuille style.css unique pour la page de l’atelier ?

Regrouper les règles par zone et responsabilité, avec des sections lisibles et des commentaires utiles Mélanger les règles de tous les composants afin de réduire le nombre de sections Placer les règles les plus spécifiques au début et les styles globaux à la fin sans les distinguer Répéter les styles communs dans chaque composant pour éviter les variables

Avant de livrer la feuille refondue, comment vérifier que les composants ne provoquent pas de débordement selon la largeur ?

Tester uniquement la largeur de bureau, puisque les dimensions fluides couvrent les autres cas Comparer les trois blocs les plus visibles sans vérifier les seuils de changement Contrôler la page à plusieurs largeurs, vérifier les seuils de présentation et corriger les débordements observés Supprimer les règles dont le rendu diffère entre les formats

Toutes les questions doivent être répondues.