CSS

Regelsätze, Deklarationen, Eigenschaften, Werte, Kommentare und Fehlerbehandlung bilden die Grammatik von CSS. Kleine Übungen zeigen, welche ungültigen Angaben der Browser verwirft und welche er trotzdem anwenden kann.

Typ-, Klassen-, ID- und Attributselektoren wählen Elemente gezielt aus. Kombinatoren bilden Beziehungen im DOM ab, ohne das HTML unnötig mit Klassen zu überladen.

Spezifität, Herkunft, Reihenfolge, Wichtigkeit und Vererbung entscheiden gemeinsam über den endgültigen Stil. Du verfolgst Konflikte bis zum berechneten Wert und löst sie ohne wahllosen Einsatz von `!important`.

Von CSS1 über tabellenbasierte Layouts und den Browserkrieg bis zu standardisierten Modulen, Responsive Design und modernen Layout-Engines. Die Entwicklung erklärt Präfixe, Altlasten, Progressive Enhancement und heutige Browserunterschiede.

Element-Inspektor, Styles-Bereich, berechnete Werte, Box-Modell-Anzeige und Geräteemulation gehören zum täglichen Werkzeug. Du findest überschreibende Regeln, fehlende Dateien und Layoutursachen direkt in den Entwicklertools.

Längen, Prozentwerte, Winkel, Zeiten und Auflösungen haben unterschiedliche Bezugsgrößen. Du entscheidest zwischen `px`, `rem`, `em`, Viewport-Einheiten und relativen Berechnungen.

Hexadezimalwerte, RGB, HSL, Transparenz und aktuelle Farbräume beschreiben Farben mit unterschiedlichen Stärken. Kontrast, Wahrnehmung und Systemfarben führen zu zugänglichen und robusten Farbschemata.

Schriftfamilien, Gewicht, Zeilenhöhe, Zeichenabstand, Ausrichtung und Textumbruch bestimmen Lesbarkeit und Rhythmus. Du setzt eine belastbare Text-Hierarchie für eine Inhaltsseite um.

Breite, Höhe, Innenabstand, Rahmen und Außenabstand bilden die geometrische Grundlage jedes Elements. `box-sizing`, Margin Collapsing, Überlauf sowie Mindest- und Höchstgrößen erklären typische Größenfehler.

Block-, Inline- und Inline-Block-Boxen verhalten sich im normalen Dokumentfluss unterschiedlich. Du erkennst Formatierungskontexte und gestaltest Seiten, die ohne spezielle Layoutsysteme sinnvoll lesbar bleiben.

Relative, absolute, feste und klebende Positionierung lösen Elemente teilweise oder vollständig aus ihrem üblichen Bezug. Stapelkontexte und `z-index` erklären, warum Ebenen nicht immer wie erwartet angeordnet werden.

Hintergrundfarben, Bilder, Verläufe, Rahmen, Rundungen und Schatten erzeugen visuelle Flächen und Tiefenwirkung. Mehrere Hintergrundebenen werden zu wiederverwendbaren Karten- und Hero-Komponenten kombiniert.

Listenmarker, generierte Inhalte sowie `::before` und `::after` ergänzen Darstellungen, ohne bedeutungsloses HTML einzubauen. Dabei bleiben Inhalt, Dekoration und Zugänglichkeit sauber getrennt.

Bilder, SVG, Video und eingebettete Inhalte reagieren anders auf verfügbare Flächen. `object-fit`, Seitenverhältnis, intrinsische Größen und responsive Bildregeln verhindern Verzerrungen und Layoutsprünge.

Tabellen benötigen klare Spalten, gut lesbare Zeilen und sinnvolle Darstellung auf kleinen Bildschirmen. Du gestaltest Datentabellen, ohne ihre semantische Struktur oder Bedienbarkeit zu beschädigen.

Eingabefelder, Beschriftungen, Auswahlfelder, Schaltflächen und Validierungszustände besitzen browserabhängige Standardstile. Du erstellst ein zugängliches Formular mit sichtbarem Fokus, Fehlerzuständen und ausreichend großen Bedienflächen.

`hover`, `focus`, `focus-visible`, `active`, `checked`, `disabled` und weitere Zustände machen Interaktionen erkennbar. Strukturbezogene Pseudoklassen wählen Elemente nach Position oder Zustand statt nach zusätzlichen Hilfsklassen.

Flexbox ordnet Elemente entlang einer Haupt- und Querachse an und verteilt freien Platz. Du baust Navigationen, Kartenreihen, Werkzeugleisten und vertikale Seitenrahmen mit kontrolliertem Schrumpfen und Umbruch.

CSS Grid definiert Zeilen, Spalten, Bereiche und wiederholbare Raster für zweidimensionale Layouts. Praktische Aufgaben führen von einem einfachen Galerie-Raster zu einem vollständigen Seitenlayout.

`subgrid` lässt verschachtelte Komponenten die Spuren eines übergeordneten Grids übernehmen. Damit bleiben Überschriften, Inhalte und Aktionen über mehrere Karten oder Formulargruppen hinweg ausgerichtet.

Media Queries, flexible Raster, relative Maße und inhaltsabhängige Umbrüche passen Seiten an Geräte und Nutzungssituationen an. Du entwickelst mobile-first und wählst Breakpoints nach dem Inhalt statt nach bestimmten Gerätemodellen.

Container Queries reagieren auf den verfügbaren Platz einer Komponente statt auf die Größe des gesamten Viewports. Du baust eine Karte, die sich in Seitenleiste, Raster und Hauptbereich selbstständig passend anordnet.

Logische Eigenschaften wie `margin-inline` und `block-size` funktionieren über Schreibrichtungen hinweg. Rechts-nach-links-Texte, vertikale Schrift und lokalisierte Inhalte werden ohne doppelte Layoutregeln unterstützt.

CSS Custom Properties speichern vererbbare Designwerte und können zur Laufzeit auf Kontext, Zustand oder Medienabfragen reagieren. Du entwickelst Tokens für Farben, Abstände und Typografie samt Fallbacks.

`calc()`, `min()`, `max()`, `clamp()` und trigonometrische Funktionen erzeugen fließende, begrenzte Werte. Damit entstehen skalierende Schriftgrößen, Abstände und geometrische Anordnungen ohne starre Breakpoint-Ketten.

Moderne Selektoren wie `:is()`, `:where()`, `:not()` und `:has()` drücken komplexe Zustände mit kontrollierter Spezifität aus. Du gestaltest Eltern- und Gruppenkomponenten anhand ihres Inhalts, ohne JavaScript nur für Klassenumschaltungen einzusetzen.

Kaskadenebenen ordnen Reset, Bibliotheken, Komponenten und lokale Anpassungen bewusst. `@layer` ersetzt viele Spezifitätskämpfe durch eine nachvollziehbare Prioritätsstruktur.

Native Verschachtelung gruppiert zusammengehörige Selektoren direkt im CSS und verringert Wiederholungen. Du setzt sie so ein, dass Selektoren lesbar bleiben und keine unbeabsichtigte Spezifität entsteht.

`@scope` begrenzt Regeln auf einen DOM-Bereich und definiert bei Bedarf eine untere Grenze. Das ermöglicht lokalere Komponentenstile, ohne jede Regel an globale Namenskonventionen zu binden.

Shadow DOM kapselt Struktur und Styles von Web Components. `:host`, Parts, Slots und Custom Properties schaffen gezielte Schnittstellen zwischen einer Komponente und ihrer Umgebung.

Übergänge interpolieren Eigenschaftswerte zwischen Zuständen; Transformationen verschieben, drehen und skalieren ohne erneutes Seitenlayout. Du gestaltest Rückmeldungen, die schnell, sparsam und auch bei reduzierter Bewegung nutzbar sind.

Keyframes, Dauer, Verzögerung, Timing-Funktionen, Wiederholung und Füllmodus steuern komplexere Bewegungsabläufe. Eine kleine Zustandsanimation wird geplant, umgesetzt und auf ruckelfreie Eigenschaften begrenzt.

Scroll Timelines koppeln Animationen an Scrollfortschritt oder die Sichtbarkeit eines Elements. Du baust Fortschrittsanzeigen und dezente Reveal-Effekte mit Fallbacks und Rücksicht auf `prefers-reduced-motion`.

Die View Transitions API animiert Zustands- und Seitenwechsel anhand benannter visueller Elemente. Du gestaltest Übergänge für eine Single-Page- und eine Multi-Page-Navigation, ohne Orientierung oder Bedienbarkeit zu beeinträchtigen.

Variable Fonts bündeln mehrere Achsen wie Gewicht, Breite oder optische Größe in einer Schriftdatei. Du setzt variable Achsen responsiv ein und kontrollierst Ladeverhalten, Fallbacks und Lesbarkeit.

`color-mix()`, relative Farbsyntax, Lab, LCH, OKLab und OKLCH ermöglichen besser vorhersehbare Farbabstufungen. Du erzeugst Zustandsfarben und Themes, prüfst aber weiterhin Kontrast und Browserunterstützung.

Fokusreihenfolge, Kontrast, Zoom, Bewegungspräferenzen, erzwungene Farben und Touch-Ziele beeinflussen die tatsächliche Nutzbarkeit. Du prüfst eine Oberfläche mit Tastatur, Screenreader-nahen Browserwerkzeugen und verschiedenen Benutzereinstellungen.

Druck-Stylesheets, Seitenumbrüche, Seitenmedien und das Ausblenden interaktiver Elemente machen Webinhalte auf Papier und als PDF brauchbar. Du erstellst eine druckbare Rechnung oder einen Bericht mit stabiler Seitenstruktur.

BEM und andere Namenskonventionen strukturieren klassische Stylesheets nach Komponenten und Zuständen. Du zerlegst eine wachsende Oberfläche in Regeln mit klarer Verantwortung und geringer Kopplung.

Sass ergänzt Variablen, Mixins, Module und kontrollierte Codeerzeugung für Projekte, die Präprozessierung benötigen. Der Schwerpunkt liegt auf sinnvollem Einsatz und dem Vermeiden von tiefen Verschachtelungen oder unnötig erzeugtem CSS.

PostCSS, Autoprefixer, Minifizierung, Source Maps und Browser-Zieldefinitionen bilden eine typische Verarbeitungskette. Du konfigurierst einen reproduzierbaren Build und trennst standardisiertes CSS von notwendigen Transformationen.

Utility-First CSS setzt kleine, kombinierbare Klassen und einen begrenzten Designwortschatz ein. Du vergleichst diese Arbeitsweise mit semantischen Komponentenklassen und beurteilst Wiederverwendung, Lesbarkeit und erzeugte Dateigröße.

CSS Modules und CSS-in-JS koppeln Styles unterschiedlich eng an JavaScript-Komponenten. Du bewertest lokale Klassennamen, Laufzeitkosten, serverseitiges Rendering, Theming und die Rolle nativer CSS-Funktionen.

Ein Designsystem verbindet Tokens, Komponenten, Zustände, Dokumentation und Regeln für Änderungen. Du entwickelst eine kleine Komponentenbibliothek, die Varianten, Themes und zugängliche Standardwerte konsistent abbildet.

Fallbacks, Feature Queries und Progressive Enhancement halten Oberflächen auch bei fehlender Unterstützung nutzbar. Kompatibilitätsdaten und echte Gerätetests helfen, Browserziele bewusst statt nach Vermutung festzulegen.

Selektorkosten sind selten das einzige Problem: Dateigröße, blockierende Styles, Layout-Neuberechnungen und ungenutztes CSS beeinflussen die Laufzeit stärker. Du misst Rendering, reduzierst kritische Pfade und vermeidest Layout Thrashing sowie sichtbare Layoutsprünge.

Responsive Tests, DOM-Zustände, visuelle Regression und browserübergreifende Prüfungen decken andere Fehlerklassen ab als reine Unit-Tests. Du richtest reproduzierbare Screenshots ein und unterscheidest echte Regressionen von absichtlichen Änderungen.

Fremde Styles, dynamische Inhalte und unkontrollierte Designwerte können Oberflächen beschädigen oder Informationen sichtbar machen. Du begrenzt globale Regeln, prüfst Abhängigkeiten und behandelst nutzerkontrollierte CSS-Werte als Sicherheitsgrenze.

Von Wireframe und semantischem HTML über Tokens, Layout, Komponenten und responsive Zustände bis zu Barrierefreiheit, Tests und Auslieferung. Das Abschlussprojekt bildet den vollständigen CSS-Arbeitsablauf für eine produktionsnahe Website ab.

Frontend-Rollen, UI Engineering, Designsystem-Arbeit und Beiträge zu Webstandards verlangen unterschiedliche Schwerpunkte. Ein Portfolio mit nachvollziehbaren Komponenten, Tests und Fallstudien belegt Können; Spezifikationen, Browserdaten, Fachblogs und Community-Projekte halten das Wissen aktuell.