Css
Junior
Quiz-Css-Junior
Flexbox
Css-Grid
Media-Queries
Css-Variables
Custom-Properties
Animations-Css
Transitions
Entretien-Css-Junior
Qcm-Css-Junior
Css-Moderne
Front-End
📝
Entretien CSS Junior — Flexbox et Responsive
20 questions CSS niveau junior : Flexbox, Grid, media queries, pseudo-classes, animations, variables CSS. Préparez un entretien développeur junior avec des questions pratiques.
Banque de révision : les 50 questions corrigées
Voici l'intégralité des 50 questions de « Entretien CSS Junior — Flexbox et Responsive », chacune avec sa bonne réponse et son explication. Le quiz interactif ci-dessus en tire une sélection aléatoire à chaque tentative — utilisez cette liste complète pour réviser.
Explication :
Flexbox (Flexible Box Layout) est un module CSS de mise en page unidimensionnelle. Il gère soit une rangée, soit une colonne à la fois. Il excelle pour : aligner des éléments, distribuer l'espace, gérer l'ordre visuel. Pour les layouts 2D complexes (grilles), on préfère CSS Grid.
Montre que tu distingues Flexbox (1D) et Grid (2D). Donne un exemple concret : navbar (Flexbox) vs layout page entière (Grid).
Explication :
Dans un conteneur flex en direction
row, justify-content agit sur l'axe principal (horizontal). align-items agit sur l'axe transversal (vertical). Donc justify-content: center centre horizontalement, align-items: center centre verticalement.
Explication :
flex: 1 est un raccourci pour flex-grow: 1; flex-shrink: 1; flex-basis: 0%. Cela signifie que l'élément peut grandir et rétrécir librement. Si plusieurs enfants ont flex: 1, ils partagent l'espace disponible équitablement.
Explication :
flex-wrap contrôle si les éléments flex passent sur une nouvelle ligne quand il n'y a plus de place. Valeurs : nowrap (défaut, pas de retour à la ligne), wrap (retour à la ligne vers le bas), wrap-reverse (retour à la ligne vers le haut). flex-flow est un raccourci pour flex-direction + flex-wrap.
Explication :
display: grid; grid-template-columns: repeat(3, 1fr) crée 3 colonnes égales. 1fr signifie "1 fraction de l'espace disponible". repeat(3, 1fr) est équivalent à 1fr 1fr 1fr. On évite 33% car il ignore les gaps et peut provoquer un débordement.
L'unité
fr est l'atout majeur de Grid. Elle distribue l'espace disponible APRÈS soustraction des gaps et des colonnes de taille fixe.
Explication :
Une media query applique des styles conditionnellement selon les caractéristiques de l'appareil : largeur/hauteur du viewport (
max-width, min-width), résolution, orientation, préférence de thème (prefers-color-scheme), etc. C'est la base du Responsive Web Design.
Explication :
@media (max-width: 767px) cible les écrans dont la largeur est inférieure ou égale à 767px (mobile-first inverse). On utilise 767px et non 768px car le breakpoint Bootstrap pour tablet est à 768px — on veut donc les écrans STRICTEMENT en dessous.
Explication :
Les custom properties (variables CSS) se déclarent avec le préfixe
-- : --primary-color: #3498db; et s'utilisent via var() : color: var(--primary-color);. Elles sont héritées, peuvent être modifiées en JavaScript, et s'appliquent dans le contexte de cascade normale. Souvent déclarées sur :root pour être globales.
Montre leur utilité pour un système de design tokens : un changement de variable propage instantanément le style dans tout le site. Mentionne aussi le fallback :
var(--color, blue).
Explication :
::before insère un pseudo-élément avant le contenu de l'élément. ::after l'insère après. Ces pseudo-éléments nécessitent obligatoirement la propriété content (même vide : content: "") pour s'afficher. Ils sont couramment utilisés pour des décorations CSS ou des icônes.
Explication :
:hover est une pseudo-classe qui cible un élément quand l'utilisateur survole avec le curseur. C'est idéal pour les effets interactifs. Note : sur les appareils tactiles, :hover peut se comporter différemment. La pseudo-classe :focus cible l'élément qui a le focus clavier.
Explication :
La propriété
order sur un élément flex enfant modifie son ordre d'affichage. La valeur par défaut est 0. Les éléments sont triés du plus petit au plus grand. order: -1 place l'élément avant tous les autres (valeur 0). Attention : cela modifie uniquement l'ordre visuel, pas l'ordre de tabulation (accessibilité).
Explication :
:nth-child(2) cible le 2ème enfant quel que soit son type. :nth-of-type(2) cible le 2ème enfant du type de l'élément sélectionné. Exemple : p:nth-child(2) cible le 2ème enfant si c'est un <p>. p:nth-of-type(2) cible le 2ème <p> quel que soit sa position globale.
Ce distinguo est fréquent en entretien. Illustre avec un exemple où l'élément 2 est un
<span> — p:nth-child(2) ne le sélectionnerait pas.
Explication :
transition crée une animation douce lors du changement d'une propriété CSS (ex: au survol). Syntaxe : transition: propriété durée timing-function délai. Exemple : transition: background-color 0.3s ease. Pour des animations plus complexes et en boucle, on utilise animation avec @keyframes.
Explication :
transform: translateX(50px) déplace visuellement l'élément de 50px vers la droite sans affecter le flux du document (l'espace d'origine est conservé). transform est performant car il peut être accéléré par le GPU. Pour les translations en Y : translateY(), en XY : translate(x, y).
Explication :
Le Mobile First consiste à écrire les styles par défaut pour les petits écrans, puis à utiliser des media queries avec
min-width pour ajouter des styles au fur et à mesure que la largeur augmente. Ex : @media (min-width: 768px) { ... }. C'est la stratégie recommandée pour la performance (les mobiles ne chargent pas les styles desktop inutiles).
Contraste avec "Desktop First" qui part des grands écrans et utilise
max-width. Mobile First est la norme moderne car les mobiles représentent souvent plus de 50% du trafic.
Explication :
align-self sur un élément flex enfant permet de surcharger l'align-items défini sur le parent, pour cet élément seulement. Les valeurs valides sont : flex-start, flex-end, center, stretch, baseline, auto (valeur par défaut = hérite de align-items du parent).
Explication :
Les
@keyframes utilisent from/to ou des pourcentages (0%/100%). Exemple : @keyframes slide { from { opacity: 0; } to { opacity: 1; } }. Ensuite on applique l'animation : animation: slide 0.5s ease-in-out. On peut aussi combiner : from { } 50% { } to { }.
Explication :
La spécificité est calculée par un score en 4 niveaux : (inline styles, IDs, classes/attributs/pseudo-classes, éléments/pseudo-éléments). Par exemple :
#id .class p = (0,1,1,1). La règle avec le score le plus élevé l'emporte. En cas d'égalité, c'est l'ordre d'apparition qui décide.
Mémorise le tableau : ID=100, classe=10, élément=1. Et rappelle que
!important brise la cascade — à éviter sauf cas extrêmes.
Explication :
display: grid transforme l'élément en conteneur de grille (grid container). Ses enfants directs deviennent automatiquement des éléments de grille (grid items). On définit ensuite la structure avec grid-template-columns, grid-template-rows, gap, etc.
Explication :
gap (anciennement grid-gap) définit l'espace entre les cellules de la grille. On peut définir deux valeurs : gap: 20px 10px (rangées colonnes). gap fonctionne aussi avec Flexbox (uniquement entre éléments, pas sur les bords externes). Ne pas confondre avec margin qui ajoute de l'espace autour des éléments.
Explication :
width fixe une largeur exacte. max-width fixe une limite maximale — l'élément peut être plus étroit (ex: sur mobile) mais ne dépassera jamais cette valeur. Un pattern courant : width: 100%; max-width: 1200px; margin: 0 auto; — pleine largeur sur mobile, centré et limité sur desktop.
C'est une combinaison classique pour les containers de contenu. Parle aussi de
min-width pour éviter que les éléments ne deviennent trop étroits.
Explication :
:not() est une pseudo-classe de négation. p:not(.intro) cible tous les <p> qui n'ont PAS la classe intro. On peut combiner : input:not([type="submit"]):not([disabled]). Elle accepte des sélecteurs simples (et des listes en CSS moderne).
Explication :
white-space: nowrap force le texte à rester sur une seule ligne, ignorant les espaces et les retours à la ligne. Souvent combiné avec overflow: hidden et text-overflow: ellipsis pour afficher "..." quand le texte est tronqué.
Explication :
calc() permet d'effectuer des calculs CSS en combinant différentes unités. Exemple : width: calc(100% - 80px) — prend 100% de la largeur parente moins 80px. C'est idéal pour des layouts mixtes. Les opérateurs +, -, *, / sont supportés. Les espaces autour de + et - sont obligatoires.
Cas d'usage concret : sidebar de 300px fixe + contenu qui prend le reste —
width: calc(100% - 300px). Aujourd'hui, CSS Grid et Flexbox remplacent souvent ce besoin.
Explication :
font-display (dans @font-face) contrôle comment la police est affichée pendant son chargement. Valeurs clés : swap (affiche police de remplacement, puis swap quand chargée — recommandé pour performance), block (attends la police), fallback, optional.
Explication :
position: sticky est hybride : l'élément se comporte comme relative dans le flux normal, mais devient fixed par rapport au plus proche ancêtre scrollable quand on atteint le seuil défini (top: 0 par exemple). Parfait pour les headers collants de tableaux ou de navigation.
Explication :
rem (root em) est toujours relatif à la taille de police de l'élément <html> (généralement 16px par défaut). em est relatif à la taille de police de l'élément parent — ce qui peut causer des effets de cumul imprévus dans des éléments imbriqués. rem est plus prévisible.
Recommande rem pour les tailles de police et les espacements globaux (prévisible), em pour des composants auto-scalables (ex: icône dont la taille suit le texte du bouton).
Explication :
flex-direction sur le conteneur flex définit l'axe principal. Valeurs : row (défaut, gauche à droite), row-reverse (droite à gauche), column (haut en bas), column-reverse (bas en haut). Changer la direction inverse aussi les rôles de justify-content et align-items.
Explication :
object-fit: cover est l'équivalent de background-size: cover pour les balises <img> et <video>. L'image couvre entièrement le conteneur en conservant ses proportions — elle peut être rognée. object-position permet de centrer la zone de focus.
Explication :
@media (prefers-color-scheme: dark) détecte la préférence de thème sombre configurée au niveau de l'OS de l'utilisateur. C'est la façon native d'implémenter le dark mode en CSS pur. Exemple : @media (prefers-color-scheme: dark) { body { background: #1a1a1a; color: white; } }.
Pour un toggle manuel, combine cette media query avec des custom properties CSS (variables) — modifie les variables via JavaScript pour switcher le thème sans réécrire toutes les règles.
Explication :
grid-column: 1 / -1 étend l'élément de la ligne de grille 1 jusqu'à la dernière ligne (-1 = dernière). C'est un raccourci pour "pleine largeur". Équivalent à grid-column: 1 / span all. Très utile pour les headers ou footers dans une grille.
Explication :
flex-shrink contrôle comment un élément flex peut rétrécir quand l'espace est insuffisant. flex-shrink: 0 empêche l'élément de rétrécir (taille minimum garantie). flex-grow contrôle la capacité à grandir. flex-basis définit la taille initiale avant distribution de l'espace.
Explication :
:valid et :invalid sont des pseudo-classes CSS qui reflètent l'état de validation HTML5 natif des champs de formulaire. Un <input type="email" required> a la pseudo-classe :invalid si vide, :valid si correctement rempli. Permet de styliser les états sans JavaScript.
Mentionne aussi
:user-invalid (CSS moderne) qui ne s'active qu'après que l'utilisateur ait interagi avec le champ, évitant les messages d'erreur précoces.
Explication :
Les pseudo-éléments
::before et ::after nécessitent la propriété content pour exister. Valeurs possibles : content: "texte", content: url("icon.svg"), content: attr(data-label) (lit un attribut HTML), content: "" (vide mais nécessaire pour les formes décoratives).
Explication :
Avec
box-sizing: border-box, la width et height définies incluent déjà le padding et la border. Ainsi, si un élément a width: 200px et padding: 20px, le contenu fait 160px. Avec la valeur par défaut content-box, la largeur totale serait 240px.
Explication :
will-change informe le navigateur en avance des propriétés qui vont changer, permettant la promotion sur le GPU. Exemple : will-change: transform, opacity. À utiliser avec parcimonie — seulement sur les éléments vraiment animés, et à retirer après l'animation. Un usage excessif peut dégrader la mémoire.
Précise qu'il faut l'ajouter juste AVANT l'animation (via JS) et le retirer après. Ne pas l'ajouter en CSS permanent sauf cas justifié.
Explication :
La propriété
gap (anciennement grid-gap) est maintenant supportée en Flexbox. Elle crée un espace entre les éléments flex (pas sur les bords extérieurs du conteneur). gap: 16px ajoute 16px entre chaque élément. On peut définir séparément : row-gap et column-gap.
Explication :
:first-child cible un élément qui est le premier enfant direct de son parent, indépendamment du type de l'élément. p:first-child cible un <p> seulement s'il est le premier enfant. À distinguer de :first-of-type qui cible le premier élément de son type.
Explication :
La règle classique pour les images responsives est
img { max-width: 100%; height: auto; }. max-width: 100% empêche l'image de dépasser son conteneur. height: auto maintient les proportions originales. L'image peut être plus petite que sa taille native mais jamais plus grande que son conteneur.
Mentionne aussi l'attribut HTML
loading="lazy" pour le chargement différé des images, et l'élément <picture> pour servir différentes résolutions.
Explication :
animation-fill-mode: forwards fait en sorte que l'élément conserve les styles du dernier keyframe après la fin de l'animation. Par défaut (none), l'élément revient à son style initial. backwards applique les styles du premier keyframe pendant le délai d'animation. both combine les deux.
Explication :
place-items est un raccourci pour align-items + justify-items en CSS Grid. place-items: center centre les éléments à la fois verticalement ET horizontalement dans leurs cellules de grille. C'est la façon la plus simple de centrer parfaitement un élément dans une cellule Grid.
Explication :
Un stacking context (contexte d'empilement) est créé par certaines propriétés comme
position non-static + z-index non-auto, opacity < 1, transform, filter. Dans ce contexte, le z-index est évalué localement — un enfant ne peut jamais dépasser son contexte parent, peu importe son z-index.
Ce concept explique pourquoi un
z-index: 9999 ne fonctionne parfois pas — si le parent a un z-index défini, il crée un contexte isolé.
Explication :
A + B est le sélecteur de frère adjacent — il cible l'élément B qui est immédiatement après A dans le DOM et partage le même parent. A ~ B cible TOUS les frères B qui suivent A.
Explication :
display: flow-root crée un Block Formatting Context (BFC) sans les effets secondaires de overflow: hidden. Un BFC isole les flottants (clearfix moderne), empêche le margin collapse, et crée un contexte de mise en page indépendant. C'est la méthode moderne pour remplacer le hack clearfix.
Explication :
Flexbox est idéal pour : navbars, listes d'éléments dans une direction, centrage simple, layouts où le contenu dicte la taille. Grid est idéal pour : layouts 2D complexes, grilles de cartes, page layouts. Une règle pragmatique : si tu as besoin de contrôle sur deux axes simultanément, utilise Grid ; sinon, Flexbox suffit souvent.
Les deux peuvent être combinés : Grid pour le layout de page, Flexbox pour les composants internes. La frontière n'est pas toujours nette — utilise ce qui est le plus lisible.
Explication :
clamp(min, préféré, max) renvoie une valeur comprise entre min et max. Exemple : font-size: clamp(16px, 4vw, 32px) — la taille sera minimum 16px, idéalement 4% du viewport, mais jamais plus de 32px. Parfait pour la typographie fluide responsive.
Explication :
::first-letter (avec double deux-points — syntaxe moderne) cible la première lettre d'un élément bloc. Il permet de créer des lettrines (grande capitale décorative). Propriétés applicables : font-size, color, float, font-weight. Seuls les éléments bloc (pas inline) le supportent.
Explication :
Pour tronquer du texte avec "...", il faut trois propriétés ensemble :
white-space: nowrap (empêche le retour à la ligne), overflow: hidden (cache le dépassement), text-overflow: ellipsis (affiche "..."). Pour les cas multi-lignes, on utilise display: -webkit-box; -webkit-line-clamp: 3 (maintenant standard).
Ce "trio CSS" est demandé en entretien. Mentionne aussi
-webkit-line-clamp pour tronquer après N lignes — c'est devenu standard.
Explication :
grid-auto-flow: dense modifie l'algorithme de placement de la grille : il essaie de remplir les "trous" laissés par des éléments de grande taille avec des éléments plus petits qui arrivent après. Utile pour les galeries photo de taille variable. Attention : cela peut modifier l'ordre visuel.
Explication :
Le Critical CSS est l'ensemble minimal de règles CSS nécessaires pour rendre la partie "above the fold" (visible sans défilement) de la page. On l'inclut en
<style> inline dans le <head> pour éviter le FOUC (Flash Of Unstyled Content) et améliorer le First Contentful Paint (FCP), une métrique Core Web Vitals.
Des outils comme Penthouse ou Critical.js extraient automatiquement le critical CSS. C'est une optimisation de performance avancée souvent demandée pour les postes senior.
Quiz
Junior
20 questions
15 min
Entretien TypeScript Junior — Generics, Classes et Modules
Quiz
Junior
20 questions
15 min
Entretien Tailwind CSS Junior — Layout, Plugins, Variants
Quiz
Junior
20 questions
15 min
Entretien JavaScript Junior — Closures, DOM et Async
Quiz
Débutant
20 questions
15 min
Entretien CSS Débutant — Sélecteurs et Box Model
Quiz
Junior
20 questions
15 min
Entretien jQuery Junior : AJAX, plugins et perf
Quiz
Junior
20 questions
15 min
Entretien React Junior : Hooks, Context et Router
Quiz
Junior
20 questions
15 min
Entretien Next.js Junior : data fetching et middleware
Quiz
Junior
20 questions
15 min
Entretien Vue Junior : Composition API et Pinia
Quiz
Junior
20 questions
15 min
HTML Junior — Sémantique et accès
Quiz
Junior
20 questions
15 min
Entretien Git Junior — Merge, Rebase et Conflits
Quiz
Junior
20 questions
15 min
Entretien Node.js Junior — Express, REST et Middleware
Quiz
Débutant
20 questions
15 min
Entretien Tailwind CSS Débutant — Utilities et Bases
Quiz
Senior
20 questions
15 min
Entretien CSS Senior — Architecture et Performance
Quiz
Junior
20 questions
15 min
Entretien Angular Junior — Signals, RxJS et @defer
Quiz
Débutant
20 questions
15 min
Entretien Vanilla JS Débutant — DOM et Événements
Quiz
Débutant
20 questions
15 min
HTML Débutant — Balises et structure
Quiz
Junior
20 questions
15 min
NestJS Junior — Guards & Middleware
Quiz
Débutant
20 questions
15 min
Entretien React Débutant — Composants, Props et State
Quiz
Junior
20 questions
15 min
Entretien Spring Boot Junior : Security et JPA
Quiz
Débutant
20 questions
15 min