L
e CSS moderne joue un rôle central dans la conception d’interfaces web à la fois élégantes, accessibles et performantes.
Au-delà des styles de base, il intègre aujourd’hui des mécanismes avancés permettant de gérer les interactions utilisateur, l’adaptabilité aux écrans et la cohérence visuelle des mises en page.
Maîtriser ces notions est devenu indispensable pour les étudiants, développeurs et candidats aux examens liés au web.
Les concepts abordés ici touchent à des aspects essentiels comme la gestion des états d’un élément, l’organisation de l’empilement visuel, le comportement des images et la création de mises en page réellement responsives.
Ils permettent de mieux comprendre comment le navigateur interprète et applique les règles de style dans des situations concrètes.
Cette approche donne les clés pour produire des interfaces fiables, modernes et adaptées aux usages actuels.
L’objectif est d’accompagner le lecteur dans une compréhension progressive et structurée des mécanismes fondamentaux du CSS avancé.
Le CSS moderne joue un rôle central dans la conception d’interfaces web à la fois élégantes, accessibles et performantes.
Au-delà des styles de base, il intègre aujourd’hui des mécanismes avancés permettant de gérer les interactions utilisateur, l’adaptabilité aux écrans et la cohérence visuelle des mises en page.
Maîtriser ces notions est devenu indispensable pour les étudiants, développeurs et candidats aux examens liés au web.
Les concepts abordés ici touchent à des aspects essentiels comme la gestion des états d’un élément, l’organisation de l’empilement visuel, le comportement des images et la création de mises en page réellement responsives.
Ils permettent de mieux comprendre comment le navigateur interprète et applique les règles de style dans des situations concrètes.
Cette approche donne les clés pour produire des interfaces fiables, modernes et adaptées aux usages actuels.
L’objectif est d’accompagner le lecteur dans une compréhension progressive et structurée des mécanismes fondamentaux du CSS avancé.
QCM
1
Corrigé
Quelle pseudo-classe permet de cibler un élément qui est la cible d'une URL contenant un identifiant (ancre) ?
A. :active
B. :target
C. :focus
D. :visited
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
La pseudo-classe :target permet de styliser un élément vers lequel pointe un lien interne (#id).
QCM
2
Corrigé
Comment définir une valeur de secours (fallback) lors de l'utilisation d'une variable CSS ?
A. var(--color, #000)
B. var(--color) || #000
C. var(--color !default #000)
D. var(--color); fallback: #000;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Le deuxième argument de la fonction var() est utilisé si la variable n'est pas définie.
QCM
3
Corrigé
Quelle propriété permet d'isoler un élément pour que ses enfants avec 'z-index' ne se mélangent pas au reste de la page ?
A. z-index: 0;
B. isolation: isolate;
C. stacking: context;
D. display: block;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
La propriété 'isolation' crée un nouveau contexte d'empilement (stacking context).
QCM
4
Corrigé
Quel sélecteur cible tous les éléments <input> qui ne sont pas de type 'checkbox' ?
A. input:not([type='checkbox'])
B. input:except([type='checkbox'])
C. input(!checkbox)
D. input:filter(not checkbox)
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
La pseudo-classe :not() permet d'exclure certains éléments d'une sélection.
QCM
5
Corrigé
Quelle propriété CSS définit l'ordre logique d'un élément par rapport au texte (gauche/droite) indépendamment de la langue ?
A. margin-left
B. margin-inline-start
C. margin-start
D. padding-inline-left
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Les propriétés logiques (inline-start) s'adaptent automatiquement aux langues s'écrivant de droite à gauche.
QCM
6
Corrigé
Que permet de faire la fonction CSS 'clamp(1rem, 5vw, 2rem)' ?
A. Arrondir une valeur
B. Définir une valeur fluide avec un minimum et un maximum
C. Multiplier des unités différentes
D. Calculer la moyenne de trois nombres
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Clamp fixe une valeur entre une borne basse, une valeur dynamique et une borne haute.
QCM
7
Corrigé
Quelle propriété CSS est utilisée pour créer un effet de 'scrolling magnétique' ?
A. scroll-behavior
B. scroll-snap-type
C. scroll-attachment
D. smooth-scroll
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Scroll-snap permet de forcer l'arrêt du défilement sur des points précis (comme des diapositives).
QCM
8
Corrigé
Quel est l'effet de 'pointer-events: none;' sur un bouton ?
A. Il change le curseur en flèche
B. Il rend le bouton totalement transparent aux clics
C. Il grise le bouton
D. Il empêche le survol (hover)
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'élément ignore les interactions souris ; le clic traverse l'élément pour toucher ce qui est dessous.
QCM
9
Corrigé
Comment appelle-t-on le fait qu'une classe hérite de plusieurs styles selon sa place dans le code ?
A. L'héritage
B. La cascade
C. La spécificité
D. L'importation
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Le 'Cascading' (C de CSS) est l'algorithme qui détermine quel style l'emporte.
QCM
10
Corrigé
Quelle propriété permet de contrôler le comportement d'une image dans un conteneur sans la déformer ?
A. image-rendering
B. object-fit
C. background-size
D. aspect-ratio
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Object-fit (cover, contain) gère le redimensionnement du contenu d'une balise <img> ou <video>.
QCM
11
Corrigé
Quel sélecteur cible les éléments <p> qui n'ont aucun texte et aucun enfant ?
A. p:blank
B. p:empty
C. p:void
D. p:no-content
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
:empty sélectionne les éléments sans nœuds enfants (y compris les nœuds de texte).
QCM
12
Corrigé
En Responsive Design, quel est l'avantage majeur des unités 'rem' sur les 'px' ?
A. Elles sont plus précises
B. Elles s'adaptent aux réglages d'accessibilité (taille de police) de l'utilisateur
C. Elles sont plus faciles à calculer
D. Elles ne fonctionnent qu'en CSS Grid
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Le 'rem' est basé sur la racine ; si l'utilisateur augmente la police de son navigateur, tout le design s'adapte.
QCM
13
Corrigé
Quelle propriété CSS permet de définir un aspect ratio fixe (ex: 16/9) à un élément ?
A. aspect-ratio
B. box-ratio
C. image-proportions
D. dimension-lock
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
La propriété aspect-ratio permet de maintenir des proportions sans calculer de padding-bottom.
QCM
14
Corrigé
Que signifie la valeur 'currentColor' en CSS ?
A. La couleur noire par défaut
B. La couleur de fond du parent
C. La couleur du lien visité
D. La valeur de la propriété 'color' de l'élément actuel
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
currentColor est une variable native qui reprend la couleur du texte actuelle (utile pour les bordures ou SVG).
QCM
15
Corrigé
Quel sélecteur cible un élément <input> dont la valeur saisie est invalide selon ses attributs ?
A. :wrong
B. :invalid
C. :error
D. :not-valid
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
:invalid permet de styliser les erreurs de formulaire en temps réel.
QCM
16
Corrigé
Quelle propriété CSS permet de forcer le rendu d'un élément sur sa propre couche GPU (accélération matérielle) ?
A. will-change
B. transform: translateZ(0);
C. gpu-boost: active;
D. render-layer: high;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
'will-change' avertit le navigateur d'un changement imminent pour optimiser les performances.
QCM
17
Corrigé
Quelle est la fonction du sélecteur ':nth-of-type(2n)' ?
A. Cibler uniquement le deuxième élément
B. Cibler tous les éléments pairs d'un type
C. Cibler tous les éléments impairs
D. Cibler tous les éléments sauf le deuxième
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
2n (ou even) cible les éléments 2, 4, 6, etc.
QCM
18
Corrigé
Quelle propriété CSS permet de modifier la couleur de l'accentuation native (checkbox, radio) ?
A. accent-color
B. input-color
C. control-tint
D. widget-color
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
accent-color permet de personnaliser la couleur des contrôles de formulaire natifs sans les refaire en CSS.
QCM
19
Corrigé
Que fait 'all: unset;' sur un élément ?
A. Il supprime l'élément du DOM
B. Il réinitialise toutes les propriétés CSS à leurs valeurs par défaut ou héritées
C. Il rend l'élément invisible
D. Il applique un style moderne automatiquement
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'all: unset' est radical pour nettoyer tous les styles appliqués précédemment à un élément.
QCM
20
Corrigé
Quelle propriété CSS permet d'ajouter un flou derrière un élément sans affecter l'élément lui-même ?
A. filter: blur();
B. layer-blur: active;
C. background-filter: blur();
D. backdrop-filter: blur();
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
Très utilisé pour les effets de 'Glassmorphism', il floute ce qui est visible à travers l'élément.
Mots & Définitions
Consultez les définitions des termes importants.
Une pseudo-classe CSS permet de cibler un élément selon un état particulier ou une situation spécifique, sans modifier le HTML. Elle est souvent utilisée pour réagir aux interactions de l’utilisateur ou au contexte du document. C’est un outil essentiel pour enrichir le comportement visuel des interfaces.
Une variable CSS est une valeur personnalisée définie par le développeur et réutilisable dans plusieurs règles de style. Elle facilite la maintenance et la cohérence visuelle d’un site. Les valeurs de secours permettent d’assurer un affichage correct si la variable n’est pas définie.
Le contexte d’empilement définit la manière dont les éléments se superposent visuellement sur une page. Il permet d’isoler un groupe d’éléments afin que leurs niveaux d’affichage ne perturbent pas le reste de l’interface. C’est un concept clé pour gérer les superpositions complexes.
Un sélecteur CSS avancé permet de cibler précisément des éléments selon leurs attributs, leur position ou leur état. Il offre un contrôle fin sur l’application des styles. Ces sélecteurs améliorent la précision sans alourdir le code HTML.
Les unités logiques permettent de définir des espacements indépendants du sens de lecture de la langue. Elles s’adaptent automatiquement aux contextes gauche-droite ou droite-gauche. Cela favorise la création d’interfaces réellement internationales.
La fonction clamp() permet de définir une valeur flexible encadrée par une limite minimale et maximale. Elle est couramment utilisée pour créer des tailles responsives fluides. Cette approche améliore l’adaptation aux différentes tailles d’écran.
Le scroll snap est une fonctionnalité CSS qui permet d’aligner automatiquement le défilement sur des zones précises. Il améliore l’expérience utilisateur lors de la navigation par défilement. Cette technique est souvent utilisée dans les carrousels ou sections pleine page.
La gestion des événements pointeur contrôle la façon dont un élément réagit aux interactions de la souris ou du tactile. Elle permet notamment de désactiver toute interaction sans modifier l’apparence visuelle. C’est utile pour gérer des états temporaires.
La cascade décrit la manière dont le navigateur décide quelle règle CSS appliquer lorsqu’il y a plusieurs styles concurrents. Elle repose sur l’ordre du code, la spécificité et l’importance des règles. Comprendre la cascade est fondamental pour maîtriser le rendu final.
La propriété object-fit contrôle la façon dont un média s’adapte à son conteneur. Elle permet de préserver les proportions d’une image ou d’une vidéo sans déformation. C’est un outil courant pour des mises en page modernes et propres.
L’aspect-ratio permet de fixer une proportion constante entre la largeur et la hauteur d’un élément. Il garantit une mise en page stable, même avant le chargement complet du contenu. Cette propriété simplifie grandement le responsive design.
Backdrop-filter applique un effet visuel à l’arrière-plan situé derrière un élément. Il permet de créer des effets de flou ou de transparence avancés. Cette propriété est souvent utilisée dans les interfaces modernes et épurées.
À propos de ce QCM
C
es QCM évaluent des notions clés qui constituent le socle du CSS avancé.
Ils s’appuient sur la compréhension des sélecteurs et des pseudo-classes, indispensables pour cibler des éléments selon leur état, leur contenu ou leur contexte.
Cette maîtrise permet d’écrire des styles précis et efficaces, tout en conservant un code clair et maintenable.
Une attention particulière est portée aux variables CSS et aux fonctions modernes, qui facilitent la gestion des valeurs répétitives et l’adaptation fluide aux différentes tailles d’écran.
Ces outils renforcent la cohérence graphique et simplifient les ajustements globaux dans une feuille de style.
Les unités logiques et les propriétés liées au responsive design montrent comment concevoir des interfaces adaptées à toutes les langues et à tous les supports.
Les QCM abordent également la gestion de la superposition des éléments et des contextes d’empilement, un point souvent délicat mais essentiel pour éviter les conflits visuels.
À cela s’ajoutent des notions liées à l’expérience utilisateur, comme le contrôle du défilement, des interactions pointeur et du rendu graphique avancé.
Travailler ces concepts permet de développer une compréhension approfondie du fonctionnement interne du CSS.
L’utilisateur apprend à analyser un rendu, à anticiper le comportement du navigateur et à corriger efficacement des problèmes complexes.
Cette approche favorise l’autonomie, l’auto-évaluation et une préparation solide aux examens, concours ou projets professionnels liés au développement web.
Conclusion
L
’ensemble de ces QCM constitue un excellent support pour consolider des bases solides en CSS avancé.
Ils permettent d’aborder des notions souvent déterminantes dans la qualité finale d’une interface, tant sur le plan visuel que fonctionnel.
En s’entraînant régulièrement, l’apprenant renforce sa compréhension des mécanismes du langage et gagne en assurance face à des situations concrètes.
Cette progression continue facilite la maîtrise du CSS moderne et prépare efficacement aux exigences académiques et professionnelles du développement web.
