QCMUP.COM

Liste QCM HTML/CSS Corrigé – Partie 18

Entraînez-vous avec des questions corrigées, progressez étape par étape, puis consolidez vos notions grâce aux définitions et explications.

30 questions Réponses expliquées Réviser → Pratiquer
Liste QCM HTML/CSS Corrigé – Partie 18 – HTML/CSS

L es variables CSS et les fonctions de calcul modernes ont profondément transformé la manière de concevoir les styles web.

Elles permettent aujourd’hui de créer des interfaces plus flexibles, plus cohérentes et beaucoup plus faciles à maintenir.

Dans les formations en développement web, les examens techniques et les concours, ces notions sont devenues incontournables, car elles traduisent une réelle compréhension du CSS moderne.

Les QCM proposés abordent les principes fondamentaux liés aux variables, à leur portée, à leur héritage et à leur interaction avec les fonctions de calcul.

Ils mettent également en lumière l’usage d’unités relatives, la création de valeurs fluides et l’adaptation des styles aux préférences utilisateur.

L’objectif est d’apprendre à centraliser les décisions de design tout en gardant une grande souplesse.

Le lecteur est accompagné dans une approche professionnelle du CSS, orientée vers la lisibilité, la performance et l’évolutivité des projets.

Les variables CSS et les fonctions de calcul modernes ont profondément transformé la manière de concevoir les styles web.

Elles permettent aujourd’hui de créer des interfaces plus flexibles, plus cohérentes et beaucoup plus faciles à maintenir.

Dans les formations en développement web, les examens techniques et les concours, ces notions sont devenues incontournables, car elles traduisent une réelle compréhension du CSS moderne.

Les QCM proposés abordent les principes fondamentaux liés aux variables, à leur portée, à leur héritage et à leur interaction avec les fonctions de calcul.

Ils mettent également en lumière l’usage d’unités relatives, la création de valeurs fluides et l’adaptation des styles aux préférences utilisateur.

L’objectif est d’apprendre à centraliser les décisions de design tout en gardant une grande souplesse.

Le lecteur est accompagné dans une approche professionnelle du CSS, orientée vers la lisibilité, la performance et l’évolutivité des projets.

QCM 1 Corrigé

Quelle est la syntaxe correcte pour déclarer une variable CSS globale ?

A. $main-color: #333;
B. --main-color: #333;
C. var(--main-color: #333);
D. @main-color: #333;
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
Les variables CSS natives doivent impérativement commencer par deux tirets '--'.

QCM 2 Corrigé

Où déclare-t-on généralement les variables pour qu'elles soient accessibles dans tout le projet ?

A. body { ... }
B. :root { ... }
C. html { ... }
D. * { ... }
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
La pseudo-classe :root cible l'élément le plus haut (html) et offre la portée la plus large par héritage.

QCM 3 Corrigé

Comment utiliser une variable nommée '--gap' dans une propriété margin ?

A. margin: --gap;
B. margin: var(--gap);
C. margin: calc(--gap);
D. margin: $gap;
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
La fonction var() est nécessaire pour récupérer et injecter la valeur d'une variable.

QCM 4 Corrigé

Que permet le deuxième argument de la fonction var() : var(--color, black) ?

A. Il définit une couleur de survol
B. Il sert de valeur de secours (fallback) si la variable n'est pas définie
C. Il mélange les deux couleurs
D. Il n'est pas autorisé
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
Si --color est manquante ou invalide, le navigateur utilisera 'black'.

QCM 5 Corrigé

Les variables CSS sont-elles sensibles à la casse (différence majuscules/minuscules) ?

A. Non, jamais
B. Oui, --MainColor et --maincolor sont différentes
C. Seulement sur Safari
D. Seulement pour les couleurs
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
Contrairement à la plupart des propriétés CSS, les variables personnalisées respectent la casse.

QCM 6 Corrigé

Quelle est la règle impérative pour l'addition dans calc(100% + 20px) ?

A. Aucun espace n'est permis
B. Il faut obligatoirement des espaces autour de l'opérateur +
C. L'opérateur doit être entre guillemets
D. On ne peut pas mélanger % et px
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
Sans espaces, le '+' ou le '-' peut être confondu avec un signe de valeur positive ou négative.

QCM 7 Corrigé

Quelle fonction permet de limiter une valeur entre un minimum, une valeur idéale et un maximum ?

A. limit()
B. minmax()
C. clamp()
D. range()
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : C

Justification :
clamp(min, val, max) évite d'utiliser plusieurs media queries pour la typographie fluide.

QCM 8 Corrigé

Que fait la fonction min(50%, 400px) ?

A. Elle prend toujours 50%
B. Elle sélectionne la valeur la plus petite des deux selon le contexte
C. Elle additionne les deux valeurs
D. Elle crée une erreur
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
min() est utile pour s'assurer qu'un élément ne dépasse jamais une certaine taille fixe ou relative.

QCM 9 Corrigé

Peut-on modifier la valeur d'une variable CSS via JavaScript ?

A. Non, c'est impossible
B. Oui, via la méthode setProperty()
C. Seulement en utilisant jQuery
D. Oui, mais il faut recharger la page
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
element.style.setProperty('--var', 'value') permet de dynamiser les thèmes en temps réel.

QCM 10 Corrigé

Quel est l'avantage des variables CSS par rapport aux variables Sass ($var) ?

A. Elles sont plus courtes à écrire
B. Elles sont lues par le navigateur et peuvent être modifiées à la volée ou via media queries
C. Sass n'est plus supporté
D. Elles ne fonctionnent que sur Chrome
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
Les variables CSS existent au 'runtime', ce qui permet de changer de thème sans recompiler le code.

QCM 11 Corrigé

Dans calc(10 / 2), quel est le résultat ?

A. 5
B. 10/2
C. Une erreur car il n'y a pas d'unité
D. 2
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : A

Justification :
calc() peut effectuer des calculs sur des nombres purs, souvent pour des ratios.

QCM 12 Corrigé

Comment définir une variable qui n'existe que dans un bloc spécifique (ex: .card) ?

A. .card { --card-bg: white; }
B. :root .card { --card-bg: white; }
C. variable --card-bg: white inside .card;
D. C'est impossible, elles sont toujours globales
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : A

Justification :
Les variables respectent la portée (scope) du sélecteur où elles sont déclarées.

QCM 13 Corrigé

Quelle fonction permet de calculer la valeur la plus grande entre plusieurs options ?

A. large()
B. max()
C. ceiling()
D. highest()
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
max() retient la valeur supérieure parmi ses arguments.

QCM 14 Corrigé

Est-il possible d'utiliser une variable à l'intérieur d'un calc() ?

A. Oui : calc(var(--width) * 2)
B. Non, calc() ne supporte pas var()
C. Seulement pour les additions
D. Seulement si la variable est un chiffre sans unité
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : A

Justification :
L'imbrication de var() dans calc() est l'une des techniques les plus puissantes du CSS moderne.

QCM 15 Corrigé

Que se passe-t-il si vous faites calc(10px * 10px) ?

A. 100px
B. 100px²
C. C'est une erreur de syntaxe (multiplication d'unités)
D. 100
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : C

Justification :
Dans calc(), on ne peut multiplier une unité que par un nombre pur, pas par une autre unité.

QCM 16 Corrigé

Quelle unité est souvent utilisée avec clamp() pour créer du texte fluide ?

A. px
B. vw (viewport width)
C. cm
D. pt
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
Utiliser vw comme valeur centrale permet à la police de croître proportionnellement à la fenêtre.

QCM 17 Corrigé

Comment réinitialiser une variable à sa valeur héritée ?

A. --var: none;
B. --var: inherit;
C. --var: initial;
D. --var: reset;
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
inherit force la variable à reprendre la valeur du parent.

QCM 18 Corrigé

Quelle fonction permet d'inverser une couleur si elle est stockée en variable ?

A. invert()
B. On ne peut pas directement, il faut utiliser calc() sur les valeurs HSL/RGB
C. reverse()
D. negative()
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
Le CSS moderne permet de décomposer les couleurs en variables pour manipuler les teintes avec calc().

QCM 19 Corrigé

Que signifie l'unité 'ch' souvent utilisée avec les variables pour le texte ?

A. La hauteur de ligne
B. La largeur approximative du caractère '0'
C. Le choix de la police
D. Une unité de couleur
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
Très utile pour limiter la largeur d'un bloc de texte de manière lisible.

QCM 20 Corrigé

Peut-on utiliser var() dans une media query, par exemple : @media (min-width: var(--tablet)) ?

A. Oui, partout
B. Non, ce n'est pas encore supporté nativement dans les définitions de media queries
C. Seulement avec un plugin
D. Seulement sur Firefox
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
Actuellement, les variables ne peuvent pas être utilisées dans la déclaration d'une media query (sauf via post-processeur).

QCM 21 Corrigé

Quelle est la valeur de '--my-var' si on écrit : '--my-var: calc(2 + 2);' ?

A. 4
B. calc(2 + 2)
C. Une erreur
D. NaN
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : A

Justification :
calc() évalue l'expression mathématique avant de l'assigner.

QCM 22 Corrigé

Comment appelle-t-on le fait qu'une variable déclarée dans :root soit disponible dans un footer ?

A. La cascade
B. L'héritage
C. La portée globale
D. Toutes ces réponses
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : D

Justification :
Les Custom Properties suivent les règles standards de la cascade et de l'héritage CSS.

QCM 23 Corrigé

Que se passe-t-il si vous assignez une variable à une autre : --a: var(--b); ?

A. Cela crée une erreur
B. C'est une assignation valide (chaining)
C. Cela ne fonctionne que pour les nombres
D. La page devient blanche
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
On peut parfaitement chaîner les variables.

QCM 24 Corrigé

Quelle fonction permet d'arrondir une valeur calculée (nouveauté CSS) ?

A. round()
B. floor()
C. ceil()
D. Toutes ces réponses
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : D

Justification :
Les nouvelles fonctions mathématiques CSS incluent désormais l'arrondi, le plancher et le plafond.

QCM 25 Corrigé

Quelle propriété permet d'animer une variable CSS ?

A. transition: --my-var 1s;
B. @property (nécessite l'enregistrement de la variable)
C. On ne peut pas animer une variable
D. animate-variable: --my-var;
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
L'at-rule @property permet de définir le type de la variable (ex: <color>) pour permettre son animation.

QCM 26 Corrigé

Quel sélecteur permet de surcharger une variable globale pour le mode sombre ?

A. @media (prefers-color-scheme: dark) { :root { --bg: #000; } }
B. body.dark { --bg: #000; }
C. Les deux sont valides
D. Aucun des deux
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : C

Justification :
On peut redéfinir la même variable dans différents contextes pour changer l'apparence sans toucher aux autres règles.

QCM 27 Corrigé

Que fait calc(100% / 3) ?

A. 33%
B. 33.3333%
C. Une erreur
D. 0.33
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
Pratique pour créer des colonnes de largeur égale sans se soucier des décimales infinies.

QCM 28 Corrigé

L'unité 'rem' peut-elle être utilisée dans une variable ?

A. Oui
B. Non
C. Seulement pour les paddings
D. Seulement si elle est entre parenthèses
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : A

Justification :
N'importe quelle unité CSS valide peut être stockée dans une Custom Property.

QCM 29 Corrigé

Peut-on utiliser les variables CSS dans les styles inline HTML ?

A. Non
B. Oui, style='--p: 20px;'
C. Seulement pour les images
D. Oui, mais avec l'attribut data-var
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
C'est une méthode très efficace pour passer des données spécifiques (ex: progression d'une barre) du JS/HTML vers le CSS.

QCM 30 Corrigé

Quelle est la limite de profondeur pour l'imbrication des fonctions calc() ?

A. 2 niveaux
B. 5 niveaux
C. Aucune limite théorique fixée par la spécification
D. On ne peut pas imbriquer deux calc()
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : C

Justification :
On peut imbriquer les calculs, bien que cela puisse nuire à la lisibilité.

Mots & Définitions
Consultez les définitions des termes importants.

Les variables CSS permettent de stocker des valeurs réutilisables directement interprétées par le navigateur. Elles facilitent la cohérence visuelle et la maintenance d’un projet. Leur grande force est de pouvoir évoluer dynamiquement selon le contexte.

Les custom properties sont le nom technique des variables CSS. Elles sont déclarées avec un préfixe spécifique et peuvent être héritées dans l’arbre du document. Elles constituent une brique essentielle du CSS moderne.

Le sélecteur :root cible l’élément racine du document et sert souvent à définir des variables globales. Les valeurs déclarées à ce niveau sont accessibles partout par héritage. C’est une pratique standard pour centraliser les réglages.

La fonction var() permet d’utiliser la valeur d’une variable CSS dans une propriété. Elle accepte une valeur de secours pour garantir un rendu fiable. Elle est indispensable pour exploiter les custom properties.

La valeur de secours est utilisée lorsque la variable demandée n’existe pas ou n’est pas valide. Elle sécurise l’affichage et évite les comportements imprévus. C’est une bonne pratique pour les projets robustes.

La portée d’une variable CSS dépend de l’endroit où elle est déclarée. Une variable définie dans un bloc ne s’applique qu’à ce bloc et à ses descendants. Cela permet de créer des thèmes ou des composants isolés.

L’héritage permet à certains éléments de récupérer automatiquement des valeurs définies plus haut dans le document. Les variables CSS utilisent pleinement ce mécanisme. Cela réduit la duplication et améliore la cohérence.

Calc() permet d’effectuer des calculs dynamiques en combinant différentes unités CSS. Elle est très utilisée pour créer des dimensions flexibles. Son bon usage demande de respecter une syntaxe stricte.

Clamp() limite une valeur entre un minimum, une valeur idéale et un maximum. Elle est idéale pour la typographie fluide et les layouts adaptatifs. Elle évite l’usage excessif des media queries.

La fonction min() retourne la plus petite valeur parmi celles fournies. Elle est utile pour empêcher un élément de devenir trop large. Elle favorise des interfaces plus contrôlées.

Max() sélectionne la valeur la plus grande parmi plusieurs options. Elle sert à garantir un minimum visuel ou fonctionnel. Elle complète parfaitement min() et clamp().

Les unités relatives s’adaptent au contexte comme la taille de l’écran ou de la police. Elles rendent les interfaces plus accessibles et flexibles. Elles sont souvent combinées avec les variables CSS.

L’unité vw correspond à un pourcentage de la largeur de la fenêtre d’affichage. Elle est fréquemment utilisée pour créer des tailles fluides. Elle joue un rôle clé dans le responsive design.

Rem est une unité basée sur la taille de police de l’élément racine. Elle garantit une échelle cohérente dans tout le projet. Elle est particulièrement utile pour l’accessibilité.

L’unité ch représente la largeur approximative du caractère zéro de la police utilisée. Elle est souvent utilisée pour contrôler la largeur des champs ou du texte. Elle améliore la lisibilité.

Les variables CSS distinguent les majuscules des minuscules. Deux noms similaires peuvent donc représenter des variables différentes. Cela impose une rigueur de nommage.

Le chaînage consiste à définir une variable à partir d’une autre variable. Cette technique facilite les thèmes et les variantes. Elle rend le système de styles plus modulaire.

Certaines variables CSS peuvent être animées si elles sont correctement déclarées. Cela ouvre la porte à des effets avancés sans JavaScript. C’est une évolution récente du CSS.

La règle @property permet d’enregistrer une variable CSS avec un type précis. Elle rend possible son animation fluide. C’est une fonctionnalité avancée du CSS moderne.

Les variables CSS peuvent être modifiées dynamiquement via JavaScript. Cette interaction permet de créer des interfaces réactives et personnalisables. Elle renforce le lien entre style et logique.

Le mode sombre adapte les couleurs d’une interface selon les préférences utilisateur. Les variables CSS facilitent grandement cette adaptation. Elles permettent de changer un thème en un seul endroit.

La cascade détermine comment les styles sont appliqués et surchargés. Elle influence directement le comportement des variables CSS. Comprendre la cascade est essentiel pour éviter les conflits.

À propos de ce QCM

L es thèmes évalués dans ces QCM couvrent les bases essentielles de la gestion dynamique des styles en CSS.

Les variables permettent d’abord de centraliser des valeurs clés comme les espacements, les couleurs ou les tailles.

Cette centralisation réduit les répétitions et simplifie les modifications globales, ce qui est indispensable dans des projets de taille moyenne ou grande.

Les fonctions de calcul apportent une seconde dimension.

Grâce à elles, il devient possible de combiner des unités différentes et d’adapter les dimensions au contexte réel d’affichage.

Ces mécanismes favorisent des mises en page fluides, capables de s’ajuster automatiquement sans multiplier les règles conditionnelles.

Les QCM mettent également en avant l’importance de la portée et de l’héritage.

Savoir où déclarer une variable et comment la surcharger permet de créer des composants autonomes tout en conservant une cohérence globale.

Cette logique est très utilisée pour gérer des thèmes, des variantes ou des états spécifiques.

Enfin, l’interaction avec JavaScript et les fonctionnalités récentes du CSS montrent que les styles ne sont plus figés.

Ils peuvent évoluer en temps réel selon les actions de l’utilisateur ou ses préférences.

Travailler ces notions développe une compréhension approfondie du CSS moderne, renforce l’autonomie et prépare efficacement aux exigences académiques et professionnelles du front-end.

Conclusion

C es QCM constituent un excellent support pour maîtriser les variables CSS et les fonctions de calcul avancées.

Ils permettent de consolider des notions clés liées à la flexibilité, à la maintenance et à l’évolutivité des styles.

En s’entraînant régulièrement, l’apprenant développe des réflexes solides pour structurer son CSS de manière professionnelle.

Cette progression favorise des interfaces plus cohérentes, adaptables et durables, en phase avec les standards actuels du développement web.