Interviewfragen zu HTML und CSS (Middle) mit Antworten

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

Diesen Test machen
  1. 1.Welche Spezifität hat der Selektor nav#main .item:hover > a::before?
  2. 2.Wie überschreibt man eine !important-Regel einer fremden Bibliothek, ohne ihren Code anzufassen?
  3. 3.Wozu wird die Kurzform flex: 1 ausgeschrieben?
  4. 4.Wie unterscheidet sich flex-basis bei einem Flex-Item in einer Zeile (flex-direction: row) von width?
  5. 5.In einem Flex-Item wird langer Text mit text-overflow: ellipsis nicht abgeschnitten und dehnt stattdessen die Spalte. Wie behebt man das?
  6. 6.Wie unterscheidet sich repeat(auto-fill, minmax(200px, 1fr)) von repeat(auto-fit, minmax(200px, 1fr))?
  7. 7.Wie legt man in Grid mit benannten Bereichen das Layout „Header oben, Seitenleiste und Inhalt in der Mitte, Footer unten“ fest?
  8. 8.Was ist ein implizites Grid?
  9. 9.Was macht place-items: center an einem Grid-Container?
  10. 10.Wann passt Grid besser und wann Flexbox?
  11. 11.Welchen Wert ergibt font-size: clamp(1rem, 2.5vw, 2rem) auf einem 1000px breiten Bildschirm (1rem = 16px)?
  12. 12.Warum nutzt man logische Eigenschaften wie margin-inline-start statt margin-left?
  13. 13.Wie unterscheidet sich transition von animation?
  14. 14.Welche Eigenschaften animiert man am besten für flüssige 60 FPS?
  15. 15.Warum ist transform: translate() für Bewegungsanimationen oft besser, als left bei einem Element mit position: absolute zu ändern?
  16. 16.Wie sollte man will-change verwenden?
  17. 17.Was ist Critical CSS?
  18. 18.Was misst die Metrik CLS (Cumulative Layout Shift)?
  19. 19.Welche Technik verhindert Layout-Verschiebungen durch ladende Bilder am besten?
  20. 20.Was macht font-display: swap in @font-face?
  21. 21.Wofür sind die Attribute srcset und sizes an <img>?
  22. 22.Wann braucht man <picture> statt nur <img srcset>?
  23. 23.Was macht loading="lazy" an <img>, und wann sollte man es NICHT nutzen?
  24. 24.Was macht object-fit: cover an einem <img> mit gesetzter width und height?
  25. 25.Welche Spezifität hat :where(.card, #hero) p?
  26. 26.Was trifft der Selektor .card:has(img)?
  27. 27.Wie unterscheiden sich CSS-Variablen (--x) grundsätzlich von Sass-Variablen ($x)?
  28. 28.Was ist ein Stacking Context, und warum „funktioniert“ z-index: 9999 womöglich nicht?
  29. 29.position: sticky funktioniert nicht, obwohl top: 0 gesetzt ist. Was ist die wahrscheinlichste Ursache?
  30. 30.Was ist ein Block Formatting Context (BFC), und wie erzeugt man einen?
  31. 31.Was ist neu an der Syntax @media (width >= 768px)?
  32. 32.Wofür sind Container Queries @container?
  33. 33.Warum kann height: 100vh auf Mobilgeräten höher als der sichtbare Bereich sein, und wie behebt man das?
  34. 34.Was bedeutet der Wert currentColor?
  35. 35.Wie unterscheiden sich die Werte initial, inherit und unset?
  36. 36.Wie benennt man in BEM richtig die Klasse für den Titel im Block card in seiner Variante „Akzent“?
  37. 37.Wie lösen CSS Modules Kollisionen von Klassennamen?
  38. 38.Warum ist :focus-visible zum Stylen des Fokusrahmens besser als :focus?
  39. 39.Was macht tabindex="-1"?
  40. 40.Wann ist aria-label gerechtfertigt?
  41. 41.Wie wendet man in Tailwind einen beliebigen Wert an, der nicht im Theme steht?
  42. 42.Warum kann man einen Tailwind-Klassennamen nicht als ` bg-${color}-500 ` zusammenbauen?
  43. 43.Wie ergänzt man in Tailwind v4 eine eigene Farbe brand, damit bg-brand, text-brand usw. funktionieren?
  44. 44.Wofür sind group und peer in Tailwind?
  45. 45.Eine React-Komponente verbindet externe Klassen: className={"p-2 " + props.className} und bekommt p-4. Welches Padding ergibt sich?
  46. 46.Wofür ist die Tailwind-Direktive @apply, und warum sollte man sie nicht übermäßig nutzen?
  47. 47.Wie berücksichtigt man Nutzer, denen Animationen Beschwerden bereiten?
  48. 48.Wie baut man ein zweispaltiges Layout mit fester Seitenleiste und Inhalt, der den Rest füllt?
  49. 49.Welches Bildformat komprimiert Fotos in modernen Browsern meist am besten?
  50. 50.Wie bindet man Styles nur für den Druck richtig ein?
  51. 51.Welche Spezifität hat :is(#hero, .card) p?
  52. 52.Was bringt aspect-ratio: 16 / 9 an einem Video-Container?
  53. 53.Was bedeutet inset: 0 an einem absolut positionierten Overlay?
  54. 54.Was macht grid-auto-flow: dense?
  55. 55.Warum gibt man einem Icon in einer Flex-Zeile mit langem Text flex-shrink: 0?
  56. 56.Wie schiebt man das letzte Item einer Flex-Navigation ganz nach rechts?
  57. 57.Was macht object-position: top zusammen mit object-fit: cover?
  58. 58.Wofür ist @supports?
  59. 59.Wie folgt man in reinem CSS dem dunklen Systemthema des Nutzers?
  60. 60.Was macht color-scheme: light dark an :root?
  61. 61.Wofür ist accent-color?
  62. 62.Was trifft .field:focus-within?
  63. 63.Wie ändert man die Farbe von Listenpunkten, ohne den Text anzufassen?
  64. 64.Wie kann CSS Überschriften wie „Step 1“, „Step 2“ automatisch nummerieren?
  65. 65.Wie kürzt man Text auf drei Zeilen mit Auslassungspunkten?
  66. 66.Warum gibt es unter einem <img> in einem <div> eine kleine Lücke?
  67. 67.Was ändert transform-origin?
  68. 68.Warum gilt transition: all 0.3s als schlechte Angewohnheit?
  69. 69.Warum setzt man aria-hidden="true" an ein dekoratives Icon neben einer Button-Beschriftung?
  70. 70.Wie bringt man einen Screenreader dazu, nach einer asynchronen Aktion „Saved“ anzusagen, ohne den Fokus zu verschieben?
  71. 71.Was braucht <div role="button">, um sich wie ein echter Button zu verhalten?
  72. 72.Wie versteckt man ein Text-Label optisch, behält es aber für Screenreader?
  73. 73.Welches alt sollte ein Link nur aus einem Icon zur Startseite haben?
  74. 74.Wie stylt man in Tailwind ein Element nach einem Attribut data-state?
  75. 75.Was macht srcset="logo.png 1x, logo@2x.png 2x"?