Quiz 12 — Utilitaires (2) & Utility API
⏱️ TL;DR — 50 questions sur display, position, bordures, ombres, object-fit et l’Utility API (Partie 7). Réponds de tête, puis déplie.
1. Que fait d-none d-md-block ?
Réponse
Caché sous md, affiché (block) à partir de md.
2. Valeurs de d-* ?
Réponse
none, inline, inline-block, block, grid, flex, table…
3. Masquer un élément à l’impression ?
Réponse
d-print-none.
4. Visible seulement à l’impression ?
Réponse
d-none d-print-block.
5. Différence d-none / invisible ?
Réponse
d-none retire du flux + lecteurs d’écran ; invisible garde l’espace.
6. Empiler des boutons pleine largeur ?
Réponse
d-grid gap-2.
7. Masquer visuellement mais garder accessible ?
Réponse
visually-hidden.
8. Afficher un lien « Menu » seulement sur mobile ?
Réponse
d-block d-lg-none.
9. Élément qui défile (overflow) ?
Réponse
overflow-auto.
10. Rogner le débordement ?
Réponse
overflow-hidden.
11. Bordure sur les 4 côtés ?
Réponse
border.
12. Retirer seulement la bordure du haut ?
Réponse
border-top-0.
13. Bordure colorée ?
Réponse
border-{couleur} (ex. border-primary).
14. Épaisseur de bordure ?
Réponse
border-1 … border-5.
15. Coins arrondis standard ?
Réponse
rounded.
16. Forme de pilule ?
Réponse
rounded-pill.
17. Cercle ?
Réponse
rounded-circle.
18. Aucun arrondi ?
Réponse
rounded-0.
19. Arrondir seulement le haut ?
Réponse
rounded-top.
20. Trois niveaux d’ombre ?
Réponse
shadow-sm, shadow, shadow-lg.
21. Aucune ombre ?
Réponse
shadow-none.
22. Recadrer une image dans son cadre ?
Réponse
object-fit-cover.
23. Valeurs d’object-fit-* ?
Réponse
cover, contain, fill, scale, none.
24. Ignorer les événements souris ?
Réponse
pe-none (pointer-events).
25. Sélectionner tout au clic ?
Réponse
user-select-all.
26. Faire flotter à droite ?
Réponse
float-end.
27. À partir de quoi les utilitaires sont-ils générés ?
Réponse
La map Sass $utilities.
28. Clé qui génère les variantes responsives ?
Réponse
responsive: true.
29. Ajouter des états :hover à un utilitaire ?
Réponse
Clé state: hover.
30. Désactiver un utilitaire existant ?
Réponse
Le fusionner avec null.
31. L’Utility API marche-t-elle avec le CDN ?
Réponse
Non — build Sass requis.
32. Fonction Sass pour ajouter une entrée à $utilities ?
Réponse
map-merge.
33. Clé qui définit la propriété CSS visée ?
Réponse
property.
34. Clé qui définit le préfixe de classe ?
Réponse
class.
35. Ordre d’import pour l’Utility API ?
Réponse
utilities avant vos modifs, utilities/api après.
36. Générer .cursor-pointer, principe ?
Réponse
Ajouter une entrée cursor avec property: cursor.
37. Concept équivalent côté Tailwind ?
Réponse
theme.extend.
38. align-middle fait quoi ?
Réponse
Alignement vertical d’un inline/table-cell.
39. clearfix sert à ?
Réponse
Contenir des enfants flottants.
40. overflow-x-auto : utilité ?
Réponse
Défilement horizontal (ex. tableaux larges).
41. border-opacity-* fait quoi ?
Réponse
Règle l’opacité de la bordure.
42. Empiler beaucoup d’ombres : conséquence ?
Réponse
Lourd visuellement + perf de rendu.
43. d-grid gap-2 d-md-flex justify-content-md-end fait quoi ?
Réponse
Boutons empilés mobile, alignés à droite dès md.
44. Galerie de vignettes homogènes : combo ?
Réponse
object-fit-cover + ratio fixe.
45. Classe pour un ratio d’aspect ?
Réponse
ratio (+ ratio-1x1, ratio-16x9…).
46. Rendre un élément invisible mais présent ?
Réponse
invisible.
47. Bordure douce colorée ?
Réponse
border-{couleur}-subtle.
48. rounded-3 vs rounded ?
Réponse
Plus arrondi (échelle 0–5).
49. Modifier les valeurs d’un utilitaire width existant ?
Réponse
map-merge sur l’entrée width avec de nouvelles values.
50. Résumé : à quoi sert l’Utility API ?
Réponse
Générer/modifier/désactiver des classes utilitaires en Sass.
Quiz suivant : Quiz 13 — Sass (1) : variables & options.