Interviewfragen zu HTML und CSS (Senior) mit Antworten

75 Fragen fürs Vorstellungsgespräch zu HTML und CSS (Senior) mit richtigen Antworten, Erklärungen und Links zur Dokumentation.

Diesen Test machen
  1. 1.Wie beeinflussen Cascade Layers @layer die Priorität von Styles?
  2. 2.Wie stehen normale (nicht !important) Styles mit und ohne Layer zueinander?
  3. 3.Was macht @scope (.card) to (.card__content) { img { ... } }?
  4. 4.Welches Problem löst subgrid?
  5. 5.Welche Phasen durchläuft der Browser, um nach einer Style-Änderung einen Frame zu aktualisieren?
  6. 6.Was ist Layout Thrashing (erzwungenes synchrones Layout)?
  7. 7.Was bringt contain: layout paint (oder contain: content)?
  8. 8.Wie beschleunigt content-visibility: auto lange Seiten?
  9. 9.Warum funktionieren ::before und ::after nicht an <img> und <input>?
  10. 10.Wofür ist float in modernen Layouts noch angebracht?
  11. 11.Warum empfiehlt man für Breakpoints in Media Queries oft em statt px?
  12. 12.Was passiert mit einem Element mit position: fixed, wenn ein Vorfahre transform: translateZ(0) hat?
  13. 13.Wie unterscheidet sich overflow: clip von overflow: hidden?
  14. 14.Wie bindet man Sass-Module ein, seit @import veraltet ist?
  15. 15.Wie unterscheidet sich Dart Sass von Node Sass?
  16. 16.Welche Probleme hat Runtime-CSS-in-JS (styled-components, Emotion) mit SSR und React Server Components?
  17. 17.Welche Techniken verringern Gewicht und Performance-Kosten eines eigenen Webfonts?
  18. 18.Wie ändert sich die Strategie zum Bündeln von Assets beim Wechsel von HTTP/1.1 zu HTTP/2+?
  19. 19.Was ist ein Performance-Budget?
  20. 20.Wie unterscheiden sich Labordaten (Lighthouse) von Felddaten (CrUX, RUM)?
  21. 21.Welche drei Metriken bilden heute die Core Web Vitals?
  22. 22.Wie baut man ohne JavaScript eine horizontale Galerie, deren Slides „einrasten“?
  23. 23.Was ermöglicht @property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }?
  24. 24.Wie stylt man das Innere einer Web Component, wenn Shadow DOM ihre Styles isoliert?
  25. 25.Wie unterscheiden sich min-content, max-content und fit-content als Breitenwerte?
  26. 26.Was erzeugt auch ohne position und z-index einen neuen Stacking Context?
  27. 27.Unter welchen Bedingungen kollabieren die vertikalen Margins eines Elternelements und seines ersten Kindes?
  28. 28.Warum kann ein langes Wort oder eine breite Tabelle eine Grid-Spalte 1fr „sprengen“?
  29. 29.Warum ist oklch() für Design-Systeme bequemer als hsl()?
  30. 30.Wofür ist color-mix(in oklch, var(--brand) 80%, white)?
  31. 31.Was bringt natives CSS Nesting (&)?
  32. 32.Wofür nutzt man CSS Anchor Positioning?
  33. 33.Was ist die View Transitions API?
  34. 34.Was ist das Minimum für einen barrierefreien modalen Dialog?
  35. 35.Was macht das Attribut inert?
  36. 36.Welchen Mindestkontrast verlangt WCAG Stufe AA für normalen Text?
  37. 37.Wie unterscheiden sich die WCAG-Konformitätsstufen A, AA und AAA?
  38. 38.Wann braucht man ARIA-Attribute, und wann kommt man besser ohne aus?
  39. 39.Was macht text-wrap: balance an einer Überschrift?
  40. 40.Was sind HTML-Landmarks, und warum sind sie wichtig?
  41. 41.Welches Problem der Barrierefreiheit ist typisch für SPAs, wenn die „Seite“ auf dem Client wechselt?
  42. 42.Wie unterscheidet sich Tailwind v4 grundsätzlich von v3?
  43. 43.Wie lässt man den Dark Mode von Tailwind v4 einer Klasse .dark statt der Systemeinstellung folgen?
  44. 44.Du entwirfst die CSS-Architektur einer mehrsprachigen Website mit Arabisch (RTL) und Japanisch. Was musst du einplanen?
  45. 45.Welcher Ansatz für fließende Typografie respektiert die Schriftskalierung des Nutzers am besten?
  46. 46.Eine Tabelle mit 10.000 Zeilen ruckelt beim Scrollen. Welche Lösung ist am wirksamsten?
  47. 47.Eine Galerie mit 50 YouTube-Videos lädt sehr langsam. Was tut man zuerst?
  48. 48.Wie unterscheidet sich preload von prefetch in <link rel>?
  49. 49.Wie unterscheidet sich defer von async an <script>?
  50. 50.Ein Designer besteht in einem komplexen Formular auf völlig eigenen Styles für jedes Bedienelement. Was ist ein sinnvoller Ansatz?
  51. 51.Was bedeutet font-size: 5cqi in einer Container Query?
  52. 52.Warum stylt man Fehler mit :user-invalid statt mit :invalid?
  53. 53.Was bringt das Attribut popover?
  54. 54.Welches Problem löst @starting-style?
  55. 55.Was ermöglichen scrollgesteuerte Animationen (animation-timeline: scroll())?
  56. 56.Was macht color: light-dark(#111, #eee)?
  57. 57.Was braucht hyphens: auto, um richtig zu funktionieren?
  58. 58.Warum nutzt man in Tabellen und Timern font-variant-numeric: tabular-nums?
  59. 59.Was ist der Hauptvorteil eines Variable Fonts?
  60. 60.Wie verringert size-adjust in einem Fallback-@font-face Layout-Verschiebungen?
  61. 61.Was macht fetchpriority="high" am Hero-Bild?
  62. 62.Warum ergänzt man an der Wurzel einer Komponente isolation: isolate?
  63. 63.Was verhindert overscroll-behavior: contain am scrollbaren Rumpf eines Modals?
  64. 64.Welche Layout-Verschiebung verhindert scrollbar-gutter: stable?
  65. 65.Was passiert im Windows-Hochkontrastmodus (Forced Colors) mit deinen Farben?
  66. 66.Was ist ein Skip-Link?
  67. 67.Wie verbindet man eine Fehlermeldung richtig mit einem Eingabefeld?
  68. 68.Was verlangt das WCAG-Kriterium „Reflow“?
  69. 69.Was verlangt WCAG 2.2 „Target Size (Minimum)“?
  70. 70.Warum erzeugen Build-Werkzeuge CSS-Dateien mit Inhalts-Hashes (app.3f9a1c.css)?
  71. 71.Warum teilt man Design Tokens in eine primitive und eine semantische Ebene?
  72. 72.Warum nutzt man dir="auto" an nutzergeneriertem Inhalt wie Kommentaren?
  73. 73.Warum zieht man für Lazy Loading oder Einblend-Effekte IntersectionObserver Listenern auf scroll vor?
  74. 74.Warum meidet man @import in reinen CSS-Dateien?
  75. 75.Was wählt li:nth-child(2 of .visible)?