HTML und CSS für Fortgeschrittene

Welche Fähigkeiten solltest du mitbringen, um erfolgreich Websites für Kunden zu erstellen? Bei der Entwicklung von Webprojekten unterscheidet man grundsätzlich zwischen Backend und Frontend. Backend-Entwicklerinnen und -Entwickler beschäftigen sich unter anderem mit Datenbanken, Serverkonfigurationen, Schnittstellen und der Geschäftslogik einer Anwendung und haben häufig einen Informatik-Hintergrund. Im Frontend hingegen geht es um alles, was Nutzerinnen und Nutzer später im Browser sehen und bedienen. Hier stehen HTML, CSS und zum Teil auch JavaScript im Mittelpunkt. In diesem Artikel geht es weniger um Skills in Konzeption oder um Gestaltung, um das Screendesign, sondern um die erfolgreiche Umsetzung von modernen Webauftritten.

Grundlagen

Zunächst zu den Basics. Ein solides Verständnis von HTML und CSS sowie Grundwissen in JavaScript sind die wichtigsten Voraussetzungen. Bei CSS solltest du insbesondere folgende Grundlagen sicher beherrschen:

• Das Box-Modell
• Flexbox
• CSS Grid
• Responsive Design

Wer diese Grundlagen sicher beherrscht, kann moderne und responsive Webseiten entwickeln.
Darüber hinaus ist das Verständnis von Selektoren und Spezifität in CSS sinnvoll. Auch Barrierefreiheit (Accessibility) sollte zumindest in den Grundlagen bekannt sein. Du musst mit CSS Custom Properties (Variablen) vertraut sein. Und ein souveräner Einsatz von KI im Arbeitsalltag ist natürlich hilfreich. Browser-Entwicklertools (DevTools) zum Debugging und CSS-Analyse sind ebenfalls unverzichtbar. Und man sollte Probleme bei Performance oder SEO zumindest erkennen können.
Von Mediengestaltern für Digitalmedien sollte man diese Fähigkeiten am Ende des ersten Ausbildungsjahrs erwarten können.
Aber hier solltest du nicht stehen bleiben. Über diese Grundlagen hinaus gibt es interessante neue Entwicklungen in diesem Bereich …

… Neue Entwicklungen in CSS

CSS hat sich in den vergangenen Jahren enorm weiterentwickelt. Während CSS früher hauptsächlich für das Aussehen einer Website zuständig war, übernimmt es heute auch Aufgaben, die früher ausschließlich mit JavaScript gelöst wurden. Dazu gehören beispielsweise bedingte Logik, komplexe Layouts, dynamische Positionierungen oder Animationen und interaktive Effekte.

Zu den wichtigsten Neuerungen gehören zum Beispiel:

• @scope – begrenzt CSS-Regeln gezielt auf bestimmte Bereiche einer Seite.
• @layer – hilft dabei, Stylesheets besser zu strukturieren und Konflikte durch Spezifität zu vermeiden.
• Container Queries – Komponenten reagieren auf die Größe ihres Containers statt nur auf die Größe des Browserfensters.
• Neue Funktionen wie if() – ermöglichen flexiblere und dynamischere Stylesheets.
• Native CSS Carousels – erste browserseitige Lösungen für Slider ohne zusätzliches JavaScript.
• Das neue, besser gestaltbare <select>-Element: Formulare lassen sich künftig einfacher an das Design anpassen.
• Moderne Farbräume wie oklch und oklab – sorgen für bessere Farbverläufe.
• Scroll-driven Animations – Animationen können direkt an die Scrollposition gekoppelt werden, ohne JavaScript einzusetzen.

Außerdem sind einen Blick wert:

• :has()-Selektor: Der „Eltern-Selektor“. Erlaubt Styling basierend auf dem Zustand, der Anwesenheit oder der Anzahl von Kind-Elementen.
• Anchor Positioning: Positioniert Elemente (z. B. Tooltips oder Dropdowns) dynamisch und intelligent relativ zu anderen DOM-Elementen.
• View Transitions API: Ermöglicht native, flüssige Übergänge bei State-Changes (Same-Document) oder beim Seitenwechsel (Cross-Document).
• Relative Color Syntax & color-mix(): Farben lassen sich dynamisch manipulieren, mischen oder aus bestehenden Variablen ableiten (z. B. oklch(from var(–c) l c h / 50%)).
• light-dark()-Funktion: Vereinfacht Dark/Light-Mode massiv, indem sie automatisch den Wert basierend auf color-scheme zurückgibt.
• Typografie-Steuerung: text-wrap: balance (für gleichmäßige, mehrzeilige Überschriften) und text-wrap: pretty (vermeidet isolierte Wörter am Absatzende).
• @property: Macht Custom Properties durch Typisierung erst richtig animierbar (z. B. für fließende Farbverläufe).
• @starting-style: Definiert den Startzustand für Entry-Animationen (z. B. Fade-in beim Einblenden eines Elements).
• CSS Masonry Layout: (Aktuell noch experimentell/flagged) Natives „Mauerwerk“-Layout via grid-template-rows: masonry.
• Popover- & Highlight-API-Integration: Native Styling-Möglichkeiten für die HTML-Popover-API (:popover-open, ::backdrop) und benutzerdefinierte Textmarkierungen.

Aber Achtung: Ob einer der genannten neuen CSS-Eigenschaften bereits eine ausreichende Browserunterstützung hat und für den produktiven Einsatz in realen Projekten geeignet ist, erfährst du unter https://caniuse.com/.
Diese Entwicklungen zeigen jedenfalls deutlich, wohin die Reise geht: CSS entwickelt sich zunehmend zu einer leistungsfähigen Sprache für Layout, Gestaltung und Interaktion. Lass uns dazu ein paar Beispiele anschauen.

Beispiele

Container Queries — responsiv auf Komponentenebene

Container Queries sind von allen neuen Features am weitesten in der Praxis angekommen und verdienen deshalb den ersten Platz.

Das Prinzip: Bisher reagierten Media Queries immer auf die Größe des Viewports — also des gesamten Browserfensters. Das Problem dabei ist, dass eine Komponente (z. B. eine Karte oder ein Teaser) gar nichts darüber weiß, wie viel Platz sie in ihrem jeweiligen Kontext hat. Container Queries lösen das: Eine Komponente kann sich auf Basis der Breite ihres Elterncontainers anpassen, nicht auf Basis des Viewports. Im folgenden Beispiel ist .card-container die Klasse für das Elternelement und .card für das Kindelement.

       .card-container {
            container-type: inline-size;
        }

        @container (min-width: 500px) {
            .card {
                display: grid;
                grid-template-columns: 1fr 1fr;
            }
        }

Dasselbe .card-Element funktioniert damit in einer schmalen Sidebar genauso wie in einem breiten Inhaltsbereich — ohne zusätzliche CSS-Klassen oder JavaScript.
Die Zeile „container-type: inline-size;“ macht das Element .card-container zu einem Container für Container Queries. „inline-size“ bedeutet, dass der Container auf Änderungen seiner Breite (in horizontaler Schreibrichtung) reagiert. Ohne diese Zeile funktionieren die Container Queries nicht. Der Browser-Support ist inzwischen gut; Container Queries sind produktionstauglich.
Mehr dazu unter https://developer.mozilla.org/de/docs/Web/CSS/Guides/Containment/Container_queries.

CSS if() — Bedingungslogik im Stylesheet

Das ist ein konzeptioneller Wendepunkt der aktuellen CSS-Entwicklung: Mit der if()-Funktion lassen sich erstmals Inline-Bedingungen direkt im Stylesheet formulieren — ohne Umweg über SASS oder JavaScript.

  .button {
            width: if(style(--size: large): 200px; else: 100px);
        }

In Kombination mit Custom Properties entstehen damit Design-Systeme, die direkt auf Kontextbedingungen oder Systemeinstellungen reagieren — etwa auf den Dark Mode des Betriebssystems — vollständig in CSS, ohne eine einzige Zeile JavaScript.

Browser-Support: Im Moment (Juni 2026) noch nicht produktionstauglich. if() ist in Chrome hinter einem experimentellen Flag verfügbar und wird gerade standardisiert. Wer das Prinzip heute verstehen will, kann es in Chrome Canary ausprobieren — für echte Projekte ist es noch zu früh.

@function — eigene CSS-Funktionen definieren

Noch einen Schritt weiter geht @function: Damit lassen sich eigene, wiederverwendbare CSS-Funktionen definieren, die dann wie native CSS-Funktionen aufgerufen werden.

@function --spacing(--factor) {
            result: calc(var(--factor) * 8px);
        }

        .card {
            padding: --spacing(2);
            /* ergibt 16px */
            margin: --spacing(3);
            /* ergibt 24px */
        }

Das klingt nach einer Kleinigkeit, ist aber konzeptionell ein großer Schritt: Bisher konnte man über Custom Properties Werte wiederverwenden, aber keine Berechnungslogik kapseln. @function schließt diese Lücke. Besonders mächtig wird es in Kombination mit if(): Theming-Logik, die früher JavaScript oder einen Build-Prozess brauchte, lässt sich damit vollständig in CSS abbilden.
Browser-Support: Aktuell nur als Prototyp in Chrome Canary mit aktiviertem „Experimental Web Platform Features“-Flag. Für den Produktionseinsatz mindestens ein bis zwei Jahre entfernt — aber als Ausblick schon interessant, weil es zeigt, wohin CSS sich entwickelt.

Native Carousels ohne JavaScript

Wer schon mal einen Karussell-Slider gebaut hat, weiß wie mühsam das mit JavaScript ist. CSS löst das Problem jetzt nativ mit zwei neuen Pseudo-Elementen:

.slider {
            overflow-x: scroll;
            scroll-snap-type: x mandatory;
        }

        .slider::scroll-button(next) {
            content: "→";
        }

        .slider::scroll-marker-group {
            display: flex;
            gap: 8px;
        }

::scroll-button() erzeugt browser-native Scroll-Buttons, ::scroll-marker() die Navigationspunkte darunter. Das Ergebnis ist ein zugänglicher, performanter Karussell — ohne JavaScript, ohne externe Bibliothek.

Browser-Support: Chrome unterstützt den Großteil dieser Features, Firefox und Safari sind noch nicht vollständig dabei. Für Produktionsprojekte ist das also noch mit Vorsicht einzusetzen — als Progressive Enhancement aber bereits interessant.

select-Element mit Gestaltungsmöglichkeiten

Das native <select>-Element ließ sich bislang kaum stylen. Wer einen angepassten Dropdown wollte, musste ihn komplett in JavaScript nachbauen — mit allem, was daran hängt: Accessibility, Keyboard-Navigation, Event-Handler.
Das ändert sich jetzt:

select {
            appearance: base-select;
        }

        select::picker(select) {
            border: 2px solid var(--farbe-akzent);
            border-radius: 8px;
        }

Mit appearance: base-select öffnet sich das Element für CSS-Styling, ohne die native Accessibility zu verlieren. Was früher 150 Zeilen JavaScript erforderte, geht jetzt mit wenigen CSS-Eigenschaften.

Browser-Support: Chrome hat das Feature implementiert, browserübergreifende Unterstützung ist noch im Aufbau. Bis Ende 2026 sollte die Lage besser aussehen.

Neue Farbräume: oklch und oklab

Mit oklch und oklab stehen zwei neue Farbformate zur Verfügung, die gegenüber dem klassischen rgb() oder hsl() einen entscheidenden Vorteil haben — sie sind „wahrnehmungslinear“. Das bedeutet: Farbverläufe sehen gleichmäßiger aus, und Helligkeitsabstufungen wirken konsistenter, weil das Modell näher an der menschlichen Farbwahrnehmung liegt.

/* klassisch */color: hsl(200, 80%, 50%);  
/* modern */color: oklch(65% 0.15 220);

oklch ist besonders nützlich für Design-Systeme, in denen Farbpaletten systematisch aufgebaut werden — etwa für Hover-Zustände, Abstufungen oder barrierefreie Kontrastkombinationen.

Browser-Support: Ist OK. oklch und oklab funktionieren in allen modernen Browsern und sind produktionstauglich.

@scope — gezieltes CSS ohne Spezifitätsprobleme

@scope löst ein klassisches CSS-Problem: Styles, die nur innerhalb einer bestimmten Komponente gelten sollen, ohne die Spezifität künstlich hochzutreiben oder auf Klassen-Namenskonventionen wie BEM angewiesen zu sein.

@scope (.card) {
            h2 {
                font-size: 1.25rem;
            }

            p {
                color: var(--farbe-text-sekundaer);
            }
        }

Die h2- und p-Regeln greifen hier nur innerhalb von .card — ohne dass man .card h2 schreiben und damit die Spezifität erhöhen müsste. Für komponentenbasierte Projekte ist das ein echter Gewinn.
Browser-Support: Chrome und Safari unterstützen @scope, Firefox ist im Moment (Juni 2026) noch dabei. Für viele Projekte ist es bereits einsetzbar, aber mit Fallback-Strategie.
Mehr dazu unter https://developer.mozilla.org/de/docs/Web/CSS/Reference/At-rules/@scope.

@layer — Schluss mit Spezifitätskonflikten

@layer ist von allen Features in diesem Artikel das ausgereifteste und gleichzeitig das am meisten unterschätzte. Es ist seit 2022 in allen modernen Browsern verfügbar und löst ein Problem, das jeden trifft, der mit fremdem CSS arbeitet: unkontrollierbare Spezifität.

Das Problem ist bekannt: Man bindet ein Framework oder Plugin ein, und plötzlich schlägt dessen CSS die eigenen Styles. Man schreibt !important, das Framework antwortet mit !important, und irgendwann hat man ein Stylesheet voller Hacks. @layer löst das strukturell, indem es eine explizite Prioritätsreihenfolge für CSS-Quellen definiert — unabhängig von Spezifität.

 /* Reihenfolge festlegen: spätere Layer gewinnen */
        @layer reset, framework, komponenten, overrides;

        @layer framework {

            /* Styles eines eingebundenen Frameworks */
            .button {
                background: blue;
            }
        }

        @layer komponenten {

            /* Eigene Styles gewinnen immer — egal wie spezifisch das Framework ist */
            .button {
                background: var(--farbe-akzent);
            }
        }

Besonders relevant für die Arbeit mit WordPress und Page Buildern: Theme-Styles, Plugin-CSS und eigene Anpassungen lassen sich sauber in Layer trennen.
Was früher mit !important erzwungen wurde, funktioniert damit ohne Hacks. Styles außerhalb eines @layer gewinnen übrigens immer gegen layered Styles — das ist nützlich, um gezielt einzelne Überschreibungen ohne Layer-Logik zu platzieren.

Browser-Support: Ausgezeichnet. @layer wird von Chrome 99+, Firefox 97+, Safari 15.4+ und Edge 99+ unterstützt — globale Abdeckung über 96 Prozent. Sofort produktionstauglich.

Scroll-driven Animations — Animationen ohne JavaScript

Scroll-Animationen gehören zu den Effekten, die Websites lebendig machen: Elemente, die beim Scrollen einblenden, Fortschrittsbalken, Parallax-Effekte. Bisher war dafür JavaScript Pflicht — IntersectionObserver, GSAP oder ähnliche Bibliotheken. CSS kann das jetzt nativ.

Das Prinzip: Eine normale @keyframes-Animation wird nicht zeitgesteuert abgespielt, sondern an den Scroll-Fortschritt gekoppelt.

@keyframes einblenden {
            from {
                opacity: 0;
                translate: 0 40px;
            }

            to {
                opacity: 1;
                translate: 0 0;
            }
        }

        .teaser {
            animation: einblenden linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 100%;
        }

animation-timeline: view() koppelt die Animation an die Sichtbarkeit des Elements im Viewport — sobald .teaser ins Bild scrollt, läuft die Animation ab. Kein JavaScript, kein Event-Listener, kein externes Script.

Es gibt zwei Varianten: scroll() koppelt die Animation an die Scroll-Position eines Containers — nützlich für Leseanzeigen oder Parallax. view() reagiert auf die Sichtbarkeit eines Elements — nützlich für Einblend-Effekte.

Ein wichtiger Hinweis für barrierefreies Design: Scroll-Animationen sollten immer in eine @media (prefers-reduced-motion: no-preference)-Abfrage gewickelt werden, damit Nutzer, die Animationen systemweit deaktiviert haben, nicht beeinträchtigt werden.

 .teaser {
            @media (prefers-reduced-motion: no-preference) {
                animation: einblenden linear both;
                animation-timeline: view();
                animation-range: entry 0% entry 100%;
            }
        }

Browser-Support: Chrome und Edge unterstützen Scroll-driven Animations vollständig. Safari hat das Feature mit Version 26 (2025) implementiert. Firefox hat es hinter einem Flag — vollständige Unterstützung steht kurz bevor. Für progressive Enhancement bereits einsetzbar; für kritische UI-Elemente noch mit Fallback arbeiten.
Siehe auch: „Snippets Code“ https://www.youtube.com/watch?v=0TnO1GzKWPc 

Auch HTML entwickelt sich weiter

In HTML überschlagen sich die Ereignisse nicht so, wie bei CSS. Aber auch hier tut sich was.
Zum Beispiel die Popover-API, Web-Components oder …
HTML Invoker Commands (oft einfach Invoker Commands genannt) zum Beispiel sind ein relativ neues HTML-Feature, mit dem HTML-Elemente andere Elemente ohne JavaScript steuern können. Sie gehören zu den aktuellen Bemühungen, mehr Interaktivität direkt in HTML und CSS zu ermöglichen.

<button command="show-modal" commandfor="dialog">
    Dialog öffnen
</button>
<dialog id="dialog">
    Hallo Welt!
</dialog>

Die Idee ist ähnlich wie bei den bereits etablierten <dialog>-Elementen: Statt JavaScript zu schreiben, beschreibst du direkt im HTML, welche Aktion ausgelöst werden soll.
Invoker Commands sind ein sehr neues Feature und werden zur Zeit (Juni 2026) noch nicht von allen Browsern vollständig unterstützt. Sie sind aber ein gutes Beispiel dafür, wohin sich HTML entwickelt.
Siehe auch https://www.youtube.com/watch?v=vO6BQqflRsM von Coding2GO.

Es lohnt sich

Soviel zum Thema CSS und fortgeschrittene Produktionstechniken im Webbereich.
Dieser Artikel richtet sich in erster Linie an diejenigen, die zwischen der Gestaltungs- und der Programmierungs-Abteilung in der Agentur sitzen. Auf Themen, wie Skills in Gestaltung oder Frontendentwicklung mit React bin ich hier deswegen nicht eingegangen. Die Grenze zu diesen Bereichen sollte man dabei kennen; nicht um sie nie zu überschreiten, sondern um zu wissen, wo das eigene Berufsbild endet und ein anderes beginnt.

Also – auch wenn du mit Homepagebaukästen oder ContentManagementSystemen arbeiten solltest, hilft ein Grundverständnis von HTML und CSS immer. Wer heute im Frontend arbeitet, sollte die neuen Möglichkeiten kennen und die Entwicklung gerade von CSS aufmerksam verfolgen. Es lohnt sich hier also, auf jeden Fall am Ball zu bleiben.