Interviewfragen zu HTML und CSS mit Antworten

Beispielfragen

Ein paar Fragen aus jedem Level mit richtiger Antwort und Erklärung.

HTML und CSS · Junior

1. Warum beginnen HTML-Dokumente mit <!DOCTYPE html>?
   ▸Antwort zeigen

   Richtige Antwort: Um den Standardmodus statt des Quirks-Modus einzuschalten

   DOCTYPE ist weder ein Tag noch ein Verweis auf eine Ressource. Es sagt dem Browser, dass die Seite modernen Standards folgt, und schaltet den Standardmodus ein. Ohne es fällt der Browser in den Quirks-Modus und bildet Fehler alter Browser nach (etwa ein anderes Box-Modell). Die Kodierung setzt <meta charset="utf-8">, nicht DOCTYPE.

2. Welche Gruppe enthält nur semantische HTML5-Elemente?
   ▸Antwort zeigen

   Richtige Antwort: <header>, <nav>, <main>, <article>, <footer>

   Semantische Elemente beschreiben die Bedeutung von Inhalt: Kopfbereich, Navigation, Hauptinhalt, eigenständiger Artikel, Fußbereich. <div> und <span> sind neutrale Container ohne Bedeutung, <b> und <i> sind präsentationell (Hervorhebung ohne Wichtigkeit). Semantik hilft Screenreadern, Suchmaschinen und der Lesbarkeit des Codes.

3. Wie viele sichtbare <main>-Elemente darf eine Seite haben, und wofür ist es?
   ▸Antwort zeigen

   Richtige Antwort: Eines - es enthält den eindeutigen Hauptinhalt der Seite

   <main> markiert den Hauptinhalt des Dokuments, der für die Seite eindeutig ist (ohne Header, Menü und Footer). Sichtbar darf nur eines sein (weitere brauchen das Attribut hidden). Es ist eine Landmark für Screenreader: Nutzer springen direkt zum Inhalt. <section> ist ein thematischer Abschnitt, kein Ersatz für <main>.

4. Wie unterscheidet sich <div> standardmäßig von <span>?
   ▸Antwort zeigen

   Richtige Antwort: <div> ist ein Block-Element, <span> ein Inline-Element

   <div> hat standardmäßig display: block: Es nimmt die volle Breite des Elternelements ein und beginnt in einer neuen Zeile. <span> hat display: inline: Es fließt im Text und ist so breit wie sein Inhalt. Keines trägt Semantik - beide sind Container zum Gruppieren und Stylen.

HTML und CSS · Middle

1. Welche Spezifität hat der Selektor nav#main .item:hover > a::before?
   ▸Antwort zeigen

   Richtige Antwort: (1, 2, 3) - eine ID, Klasse + Pseudoklasse, zwei Typen + Pseudoelement

   Man zählt nach Spalten: IDs - #main (1); Klassen, Attribute und Pseudoklassen - .item und :hover (2); Typen und Pseudoelemente - nav, a, ::before (3). Kombinatoren (>, Leerzeichen) tragen keine Spezifität bei. Eine Pseudoklasse wiegt wie eine Klasse, ein Pseudoelement wie ein Typselektor.

2. Wie überschreibt man eine !important-Regel einer fremden Bibliothek, ohne ihren Code anzufassen?
   ▸Antwort zeigen

   Richtige Antwort: Eine eigene Regel ebenfalls mit !important und spezifischerem Selektor schreiben

   Eine normale Regel schlägt !important nie, egal wie spezifisch sie ist. Zwischen mehreren !important-Deklarationen gelten wieder Spezifität und Reihenfolge. Weitere Möglichkeiten: ein Inline-Style mit !important oder Cascade Layers - für !important ist die Reihenfolge der Layer umgekehrt. Am besten verzichtet man im eigenen Code auf !important.

3. Wozu wird die Kurzform flex: 1 ausgeschrieben?
   ▸Antwort zeigen

   Richtige Antwort: flex-grow: 1; flex-shrink: 1; flex-basis: 0%

   flex: 1 = 1 1 0%: Die Basisgröße ist null, also wird der ganze Platz streng im Verhältnis zu flex-grow aufgeteilt - die Spalten werden unabhängig vom Inhalt gleich. flex: auto = 1 1 auto - geteilt wird nur der freie Platz über die Inhaltsgröße hinaus. flex: none = 0 0 auto.

4. Wie unterscheidet sich flex-basis bei einem Flex-Item in einer Zeile (flex-direction: row) von width?
   ▸Antwort zeigen

   Richtige Antwort: flex-basis ist die Anfangsgröße auf der Hauptachse; ist es nicht auto, hat es Vorrang vor width

   flex-basis setzt die Anfangsgröße des Items auf der Hauptachse, aus der grow und shrink berechnet werden. Bei flex-basis: auto wird width genutzt (oder height in einer Spalte). Bei flex-direction: column gilt flex-basis für die Höhe statt die Breite - das ist der entscheidende Unterschied zu width.

HTML und CSS · Senior

1. Wie beeinflussen Cascade Layers @layer die Priorität von Styles?
   ▸Antwort zeigen

   Richtige Antwort: Die Reihenfolge der Layer schlägt die Spezifität: der spätere Layer gewinnt

   Die Kaskade vergleicht zuerst die Layer und erst dann die Spezifität innerhalb eines Layers. Deshalb schlägt .btn im Layer components ein #app .btn im früheren Layer base. Styles ohne Layer sind stärker als jeder Layer. Für !important ist die Reihenfolge umgekehrt: Wichtige Deklarationen in einem früheren Layer gewinnen. Tailwind v4 baut seine Styles auf den Layern theme, base, components und utilities auf.

2. Wie stehen normale (nicht !important) Styles mit und ohne Layer zueinander?
   ▸Antwort zeigen

   Richtige Antwort: Styles ohne Layer sind stärker als jeder Layer

   Styles ohne Layer landen implizit in einem „letzten“ Layer und schlagen alle benannten Layer. So kann man fremdes CSS in @layer vendor packen und es leicht mit eigenen Styles überschreiben. Bei !important kehrt sich die Logik um: Wichtige Styles in Layern schlagen wichtige Styles ohne Layer.

3. Was macht @scope (.card) to (.card__content) { img { ... } }?
   ▸Antwort zeigen

   Richtige Antwort: Stylt img innerhalb von .card, aber nicht innerhalb von .card__content

   @scope legt eine Wurzel des Geltungsbereichs und eine optionale „untere Grenze“ fest (Donut Scope): Styles gelten innerhalb von .card, reichen aber nicht in .card__content und seine Nachfahren. Außerdem gewinnt bei gleicher Spezifität die Regel mit der näheren Wurzel (Scoping Proximity). Ein Shadow DOM erzeugt @scope nicht.

4. Welches Problem löst subgrid?
   ▸Antwort zeigen

   Richtige Antwort: Es gibt einem verschachtelten Grid die Spuren des Elternelements, sodass Teile über Karten fluchten

   Mit grid-template-rows: subgrid erbt ein Kind-Grid die Linien des Elternelements. Das klassische Beispiel ist eine Reihe Karten, deren Titel, Texte und Buttons fluchten sollen, auch wenn ein Titel zweizeilig umbricht. Ohne subgrid richtet sich jede Karte unabhängig aus.

Kombinierte Tests mit diesem Thema

Fragen aus mehreren Themen auf einmal, wie im Vorstellungsgespräch für eine konkrete Stelle.