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é.
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.
QCM
21
Corrigé
Quelle est la principale différence entre :is() et :where() en termes de spécificité ?
A. :is() a toujours une spécificité nulle, contrairement à :where().
B. :where() a toujours une spécificité nulle, alors que :is() prend celle de son argument le plus fort.
C. :is() additionne les spécificités de tous ses arguments pour surpasser l'ID.
D. Les deux partagent la même spécificité, mais :is() est plus performant sur mobile.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
:where() permet de grouper des sélecteurs sans alourdir leur poids, ce qui est idéal pour des styles de base réinitialisables.
QCM
22
Corrigé
En CSS Grid, que permet d'accomplir la valeur 'subgrid' appliquée à grid-template-columns ?
A. Elle divise chaque cellule en quatre sous-cellules égales automatiquement.
B. Elle force l'élément enfant à définir ses propres colonnes sans lien avec le parent.
C. Elle permet à l'élément enfant d'utiliser les pistes (tracks) définies sur son parent direct.
D. Elle crée une grille indépendante du flux principal pour les éléments fixes.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Le subgrid permet d'aligner parfaitement des descendants profonds sur la structure de la grille parente sans calcul manuel.
QCM
23
Corrigé
Quel sélecteur permet de cibler un élément parent uniquement s'il contient un enfant spécifique (sélecteur relationnel) ?
A. :within-child()
B. :is-parent()
C. :contains()
D. :has()
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
:has() est le sélecteur relationnel qui permet enfin de styliser un élément en fonction de son contenu descendant.
QCM
24
Corrigé
Dans le modèle de boîte 'border-box', si width=300px, padding=30px et border=5px, quelle est la largeur totale de la boîte de contenu ?
A. 230px
B. 300px
C. 265px
D. 335px
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
300px (total) - 60px (padding L+R) - 10px (border L+R) = 230px. Border-box inclut padding et border dans la width.
QCM
25
Corrigé
Quelle propriété CSS permet d'optimiser le rendu en ignorant le calcul des éléments hors du viewport ?
A. content-visibility: auto
B. will-change: transform
C. render-strategy: offscreen
D. display: skip-render
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Cette propriété améliore considérablement les performances de rendu en sautant le travail de mise en page des éléments non visibles.
QCM
26
Corrigé
À quoi sert la propriété 'isolation: isolate' en CSS ?
A. À bloquer l'héritage des variables CSS vers les enfants.
B. À créer un nouveau contexte d'empilement (stacking context) sans modifier le z-index.
C. À empêcher le texte d'être sélectionné par l'utilisateur.
D. À retirer l'élément du flux normal du document pour l'isoler visuellement.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Isolate permet de confiner les mix-blend-mode et les z-index internes sans affecter le positionnement global.
QCM
27
Corrigé
L'unité 'ch' est basée sur quelle mesure typographique précise ?
A. La hauteur moyenne des lettres minuscules (x-height).
B. La largeur du caractère '0' (zéro) de la police actuelle.
C. La hauteur de la ligne de base (baseline) multipliée par deux.
D. La largeur totale du glyphe 'M' majuscule.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'unité ch est idéale pour limiter la largeur des paragraphes à un nombre de caractères confortable pour la lecture.
QCM
28
Corrigé
Quelle valeur de 'object-fit' conserve le ratio d'une image en remplissant le conteneur, au risque de la rogner ?
A. contain
B. fill
C. none
D. cover
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
Cover redimensionne l'image pour couvrir tout le conteneur en gardant ses proportions, idéal pour les headers responsives.
QCM
29
Corrigé
À quoi sert la propriété 'scroll-margin-top' ?
A. Ajouter un padding fixe au sommet de la page pour les mobiles.
B. Définir un décalage pour qu'un élément ancré ne soit pas caché par un header fixe.
C. Ralentir la vitesse de défilement vers le haut de 20%.
D. Empêcher le scroll horizontal sur les appareils tactiles.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
C'est la solution standard pour éviter que les barres de navigation 'sticky' ne recouvrent la cible d'un lien d'ancre.
QCM
30
Corrigé
Quel sélecteur cible un lien <a> dont l'attribut href commence exactement par 'https' ?
A. a[href^='https']
B. a[href$='https']
C. a[href*='https']
D. a[href|='https']
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
L'opérateur ^= sélectionne les attributs dont la valeur commence par la chaîne de caractères spécifiée.
QCM
31
Corrigé
Que fait 'flex-basis: 0' par rapport à 'flex-basis: auto' ?
A. Il masque l'élément s'il n'y a pas assez de place dans le conteneur.
B. Il ignore la taille du contenu pour distribuer l'espace de manière égale selon flex-grow.
C. Il force l'élément à prendre 100% de la largeur du parent par défaut.
D. Il empêche l'élément de rétrécir si le conteneur est trop petit.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
En mettant la base à 0, Flexbox ne tient plus compte de la taille intrinsèque du texte pour calculer l'espace à remplir.
QCM
32
Corrigé
Quel pseudo-élément permet de styliser spécifiquement le texte sélectionné par l'utilisateur ?
A. ::text-select
B. ::highlight
C. ::selection
D. ::active-text
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
::selection permet de modifier la couleur de fond et du texte lors de la sélection active sur la page.
QCM
33
Corrigé
Quelle propriété permet d'appliquer un flou sur les éléments situés DERRIÈRE un bloc semi-transparent ?
A. filter: blur()
B. background-filter: 5px
C. backdrop-filter: blur(5px)
D. opacity-blur: true
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Backdrop-filter applique des effets graphiques à la zone située derrière l'élément, créant l'effet 'verre dépoli'.
QCM
34
Corrigé
Comment s'appelle le mécanisme où les marges verticales de deux blocs adjacents fusionnent en une seule ?
A. Margin nesting
B. Margin overflow
C. Margin collapse
D. Margin grouping
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Le margin collapse fait que seule la plus grande marge entre deux éléments successifs est conservée.
QCM
35
Corrigé
Quelle est la particularité des Container Queries (@container) ?
A. Elles ne fonctionnent que sur les images de type SVG.
B. Elles adaptent le style selon la taille du parent immédiat et non du viewport global.
C. Elles sont 10x plus rapides que les Media Queries traditionnelles.
D. Elles nécessitent l'utilisation obligatoire de l'unité % uniquement.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Les Container Queries permettent de créer des composants modulaires qui s'adaptent à l'espace qui leur est alloué.
QCM
36
Corrigé
Quel mot-clé de 'background-repeat' répète une image sans la couper, en ajustant l'espacement ?
A. round
B. space
C. stretch
D. fill
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
La valeur 'space' répartit les répétitions de l'image uniformément pour qu'elles tiennent sans être tronquées.
QCM
37
Corrigé
En CSS, que permet de réaliser la fonction clamp(1rem, 5vw, 2rem) ?
A. Forcer le texte à rester sur une seule ligne quel que soit le zoom.
B. Définir une valeur fluide qui ne descend jamais sous 1rem et ne dépasse pas 2rem.
C. Arrondir les pixels à l'entier le plus proche pour éviter le flou.
D. Multiplier la taille de la police par la largeur de l'écran par 5.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Clamp est l'outil ultime pour la typographie fluide sans multiplier les media queries.
QCM
38
Corrigé
Quelle propriété permet de définir l'ordre de priorité d'affichage sur l'axe Z ?
A. depth-index
B. layer-order
C. z-index
D. stack-priority
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Le z-index gère la superposition des éléments (nécessite une position autre que 'static').
QCM
39
Corrigé
Quel sélecteur cible tous les éléments <li> qui suivent un autre <li> à n'importe quel niveau frère ?
A. li + li
B. li || li
C. li > li
D. li ~ li
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
L'opérateur '~' est le combinateur de frères généraux, ciblant tous les voisins suivants.
QCM
40
Corrigé
Que signifie précisément l'unité 'rem' ?
A. Relative Element Margin.
B. Root em : relatif à la taille de police de l'élément racine (html).
C. Real Electronic Measure.
D. Ratio Em : calculé selon la densité de pixels de l'écran.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Contrairement à 'em', 'rem' évite les problèmes d'héritage en cascade en se référant toujours à la racine.
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
Ces 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.
