{"id":1492,"date":"2026-06-30T16:20:54","date_gmt":"2026-06-30T14:20:54","guid":{"rendered":"https:\/\/web-einfach-machen.de\/Blog\/?p=1492"},"modified":"2026-07-23T18:50:36","modified_gmt":"2026-07-23T16:50:36","slug":"html-und-css-fuer-fortgeschrittene","status":"publish","type":"post","link":"https:\/\/web-einfach-machen.de\/Blog\/css\/html-und-css-fuer-fortgeschrittene\/","title":{"rendered":"HTML und CSS f\u00fcr Fortgeschrittene"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Welche F\u00e4higkeiten brauchst du, um in einer Web-Agentur zuverl\u00e4ssig Kundenprojekte umzusetzen?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bei der Umsetzung von Webprojekten unterscheidet man grunds\u00e4tzlich zwischen Backend und Frontend. Backend-Entwicklerinnen und -Entwickler besch\u00e4ftigen sich unter anderem mit Datenbanken, Serverkonfigurationen, Schnittstellen und der Gesch\u00e4ftslogik einer Anwendung und haben h\u00e4ufig einen Informatik-Hintergrund. Das ist in diesem Artikel nicht das Thema. <br>Im <strong>Frontend <\/strong>hingegen geht es um alles, was Nutzerinnen und Nutzer sp\u00e4ter im Browser sehen und bedienen. Hier stehen HTML, CSS und zum Teil auch JavaScript im Mittelpunkt.\u00a0In diesem Artikel geht es nicht um Konzeption oder Screendesign, sondern um das Handwerkszeug f\u00fcr die erfolgreiche <strong>Umsetzung<\/strong> moderner Webauftritte.<\/p>\n\n\n<style>.kb-table-of-content-nav.kb-table-of-content-id1492_54112a-b5 .kb-table-of-content-wrap{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);}.kb-table-of-content-nav.kb-table-of-content-id1492_54112a-b5 .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id1492_54112a-b5 .kb-table-of-contents-title{font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id1492_54112a-b5 .kb-table-of-content-wrap .kb-table-of-content-list{font-weight:regular;font-style:normal;margin-top:var(--global-kb-spacing-sm, 1.5rem);margin-right:0px;margin-bottom:0px;margin-left:0px;}<\/style>\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading1492_970766-9a, .wp-block-kadence-advancedheading.kt-adv-heading1492_970766-9a[data-kb-block=\"kb-adv-heading1492_970766-9a\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading1492_970766-9a mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading1492_970766-9a[data-kb-block=\"kb-adv-heading1492_970766-9a\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading1492_970766-9a img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading1492_970766-9a[data-kb-block=\"kb-adv-heading1492_970766-9a\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading1492_970766-9a wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading1492_970766-9a\">Grundlagen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Zun\u00e4chst zu den Basics. Ein <strong>solides Verst\u00e4ndnis von HTML und CSS<\/strong> sowie Grundwissen in JavaScript sind die wichtigsten Voraussetzungen. Bei CSS solltest du insbesondere folgende Grundlagen beherrschen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Das Box-Modell<\/li>\n\n\n\n<li>Flexbox<\/li>\n\n\n\n<li>CSS Grid<\/li>\n\n\n\n<li>Responsive Design<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Wer sich damit auskennt, kann zumindest <strong>responsive Webseiten<\/strong> entwickeln.<br>Dar\u00fcber hinaus ist das Verst\u00e4ndnis von <strong>Selektoren und Spezifit\u00e4t in CSS<\/strong> sinnvoll. Auch <strong>Barrierefreiheit<\/strong> (Accessibility) sollte zumindest in den Grundz\u00fcgen bekannt sein. Du musst mit CSS <strong>Custom Properties<\/strong> (Variablen) vertraut sein. Und ein souver\u00e4ner <strong>Umgang mit KI<\/strong> wird im Arbeitsalltag immer wichtiger. <strong>Browser-Entwicklertools<\/strong> (DevTools) zum Debugging und CSS-Analyse sind unverzichtbar. Und man muss Probleme bei <strong>Performance<\/strong> oder <strong>SEO<\/strong> zumindest erkennen k\u00f6nnen. <br>Von Mediengestaltern f\u00fcr Digitalmedien sollte man diese F\u00e4higkeiten am Ende des ersten Ausbildungsjahrs erwarten k\u00f6nnen. Aber hier bleibst du nat\u00fcrlich nicht stehen. \u00dcber diese Grundlagen hinaus gibt es gerade bei CSS spannende Entwicklungen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00dcber die Grundlagen hinaus<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">CSS hat sich in den vergangenen Jahren enorm weiterentwickelt. W\u00e4hrend CSS fr\u00fcher haupts\u00e4chlich f\u00fcr das Aussehen einer Website zust\u00e4ndig war, \u00fcbernimmt es heute auch Aufgaben, die bislang ausschlie\u00dflich mit JavaScript gel\u00f6st wurden. Dazu geh\u00f6ren beispielsweise bedingte Logik, komplexe Layouts, dynamische Positionierungen oder Animationen und interaktive Effekte.<br>Zu den wichtigsten Neuerungen geh\u00f6ren:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Container Queries<\/strong> \u2013 Komponenten reagieren auf die Gr\u00f6\u00dfe ihres Containers statt nur auf die Gr\u00f6\u00dfe des Browserfensters. Ein Inhalt kann sich auf Basis der Breite seines Elterncontainers anpassen, nicht auf Basis des Viewports. Schau dir dazu mein Beispiel unter <a href=\"https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/container-queries-blogartikel.html\">https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/container-queries-blogartikel.html<\/a> an. Schau auch in den Quellcode dieses Beispiels, um Container Queries komplett zu verstehen.<\/li>\n\n\n\n<li><strong>:has()-Selektor:<\/strong> Der &#8222;Eltern-Selektor&#8220; erlaubt Styling basierend darauf, was in einem Element steckt. Mehr dazu unter <a href=\"https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/has-selektor-blogartikel.html\">https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/has-selektor-blogartikel.html<\/a>. <\/li>\n\n\n\n<li><strong>light-dark()-Funktion:<\/strong> Vereinfacht Dark\/Light-Mode au\u00dferordentlich, indem sie automatisch den Wert basierend auf color-scheme zur\u00fcckgibt. Mehr dazu in meinen Artikel unter <a href=\"https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/light-dark-blogartikel.html\">https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/light-dark-blogartikel.html<\/a>.<\/li>\n\n\n\n<li><strong>Popover und dialog:<\/strong> Native Styling-M\u00f6glichkeiten f\u00fcr die HTML-Popover-API und modale Dialoge. Siehe <a href=\"https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/dialog-popover-blogartikel.html\">https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/dialog-popover-blogartikel.html<\/a>. <\/li>\n\n\n\n<li><strong>@layer<\/strong> \u2013 hilft dabei, Stylesheets besser zu strukturieren und Konflikte durch Spezifit\u00e4t zu vermeiden. Es l\u00f6st ein Problem, das jeden trifft, der mit fremdem CSS arbeitet: unkontrollierbare Spezifit\u00e4t. Das Problem ist bekannt: Man bindet ein Framework oder Plugin ein, und pl\u00f6tzlich schl\u00e4gt dessen CSS die eigenen Styles \u2013 Hilfeeee! <br>Man schreibt&nbsp;!important, das Framework antwortet mit&nbsp;!important, und irgendwann hat man ein Stylesheet voller Hacks.&nbsp;@layer&nbsp;l\u00f6st das strukturell, indem es eine explizite Priorit\u00e4tsreihenfolge f\u00fcr CSS-Quellen definiert \u2014 unabh\u00e4ngig von Spezifit\u00e4t. Wie das funktioniert, erf\u00e4hrst du unter <a href=\"https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/layer-blogartikel.html\">https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/layer-blogartikel.html<\/a>. <\/li>\n\n\n\n<li><strong>@scope<\/strong> \u2013 begrenzt CSS-Regeln gezielt auf bestimmte Bereiche einer Seite. Es l\u00f6st ein klassisches CSS-Problem: Styles, die nur innerhalb einer bestimmten Komponente gelten sollen, ohne die Spezifit\u00e4t k\u00fcnstlich hochzutreiben oder auf Klassen-Namenskonventionen wie BEM angewiesen zu sein. Wie du unter <a href=\"https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/scope-blogartikel.html\">https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/scope-blogartikel.html<\/a> nachlesen kannst.<\/li>\n\n\n\n<li>Neue CSS-Features gefahrlos einsetzen: Mit <strong>@supports<\/strong> pr\u00fcfst du direkt im CSS, ob ein Browser ein Feature kennt \u2013 und lieferst nur dann den entsprechenden Code aus. Siehe <a href=\"https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/supports-blogartikel.html\">https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/supports-blogartikel.html<\/a>. <\/li>\n\n\n\n<li>Typografie-Steuerung:&nbsp;<strong>text-wrap: balance<\/strong> (f\u00fcr gleichm\u00e4\u00dfige, mehrzeilige \u00dcberschriften) und <strong>text-wrap: pretty<\/strong> (vermeidet isolierte W\u00f6rter am Absatzende). Mehr dazu erf\u00e4hrst du auf <a href=\"https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/text-wrap-blogartikel.html\">https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/text-wrap-blogartikel.html<\/a>.<\/li>\n\n\n\n<li>Responsive Typo mit <strong>clamp()<\/strong> darf hier nicht fehlen: <a href=\"https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/clamp-blogartikel.html\">https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/clamp-blogartikel.html<\/a>. <\/li>\n\n\n\n<li>Berechne die H\u00f6he des Viewports richtig mit <strong>dvh, svh und lvh<\/strong> siehe <a href=\"https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/viewport-einheiten-blogartikel.html\">https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/viewport-einheiten-blogartikel.html<\/a>. <\/li>\n\n\n\n<li><strong>Moderne Farbr\u00e4ume wie oklch und oklab<\/strong> \u2013 sorgen f\u00fcr bessere Farbverl\u00e4ufe. Mit&nbsp;oklch&nbsp;und&nbsp;oklab&nbsp;stehen zwei neue Farbformate zur Verf\u00fcgung, die gegen\u00fcber dem klassischen&nbsp;rgb()&nbsp;oder&nbsp;hsl()&nbsp;einen entscheidenden Vorteil haben \u2014 sie sind \u201ewahrnehmungslinear\u201c. Das bedeutet: Farbverl\u00e4ufe sehen gleichm\u00e4\u00dfiger aus, und Helligkeitsabstufungen wirken konsistenter, weil das Modell n\u00e4her an der menschlichen Farbwahrnehmung liegt. Siehe auch <a href=\"https:\/\/developer.mozilla.org\/de\/docs\/Web\/CSS\/Reference\/Values\/color_value\/oklch\">https:\/\/developer.mozilla.org\/de\/docs\/Web\/CSS\/Reference\/Values\/color_value\/oklch<\/a>. <\/li>\n\n\n\n<li><strong>Relative Color Syntax und color-mix():<\/strong> Farben lassen sich dynamisch mischen oder aus bestehenden Variablen ableiten (z. B. oklch(from var(&#8211;c) l c h \/ 50%)). Siehe <a href=\"https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/relative-color-syntax-blogartikel.html\">https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/relative-color-syntax-blogartikel.html<\/a> und <a href=\"https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/color-mix-blogartikel.html\">https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/color-mix-blogartikel.html<\/a>. <\/li>\n\n\n\n<li><strong>View Transitions API:<\/strong> Erm\u00f6glicht native, fl\u00fcssige \u00dcberg\u00e4nge bei State-Changes (Same-Document) oder beim Seitenwechsel (Cross-Document). Schau dir dazu meinen Artikel unter <a href=\"https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/view-transitions-blogartikel.html\">https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/view-transitions-blogartikel.html<\/a> an. <\/li>\n\n\n\n<li><strong>@property:<\/strong> Macht Custom Properties durch Typisierung erst richtig animierbar (z. B. f\u00fcr flie\u00dfende Farbverl\u00e4ufe). Lies dazu gerne meinen Artikel unter <a href=\"https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/property-blogartikel.html\">https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/property-blogartikel.html<\/a>. <\/li>\n\n\n\n<li><strong>@starting-style:<\/strong> Definiert den Startzustand f\u00fcr Entry-Animationen (z. B. Fade-in beim Einblenden eines Elements) Mehr dazu unter <a href=\"https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/starting-style-blogartikel.html\">https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/starting-style-blogartikel.html<\/a>.<\/li>\n\n\n\n<li><strong>Anchor Positioning:<\/strong> Positioniert Elemente (z. B. Tooltips oder Dropdowns) dynamisch und intelligent relativ zu anderen DOM-Elementen. Siehe <a href=\"https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/anchor-positioning-blogartikel.html\">https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/anchor-positioning-blogartikel.html<\/a>. <\/li>\n\n\n\n<li>Auch einen Blick wert:<br>Verschachtelte Selektoren mit <strong>nesting<\/strong> siehe <a href=\"https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/nesting-blogartikel.html\">https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/nesting-blogartikel.html<\/a>. <br><strong>scrollbar-gutter<\/strong> beendet das Hin- und Herspringen des Seitenlayouts beim Wechsel zwischen kurzen und langen Seiten und dem dazugeh\u00f6rigen Ein- und Ausblenden einer Scrollleiste, siehe <a href=\"https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/scrollbar-blogartikel.html\">https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/scrollbar-blogartikel.html<\/a>.  <br><strong>Logische Eigenschaften<\/strong> wie margin-inline-start u.\u00e4. siehe <a href=\"https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/logische-eigenschaften-blogartikel.html\">https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/logische-eigenschaften-blogartikel.html<\/a>. <br>Einrasten mit <strong>Scroll Snap<\/strong> siehe <a href=\"https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/scroll-snap-blogartikel.html\">https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/scroll-snap-blogartikel.html<\/a>. <\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Aber Achtung: Nicht alle hier genannten CSS-Eigenschaften sind schon einsetzbar. Ob einer der genannten neuen CSS-Eigenschaften bereits eine <strong>ausreichende Browserunterst\u00fctzung<\/strong> hat und f\u00fcr den produktiven Einsatz in realen Projekten geeignet ist, erf\u00e4hrst du unter <a href=\"https:\/\/caniuse.com\/\">https:\/\/caniuse.com\/<\/a>. <\/p>\n\n\n\n<hr>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading1492_7aa444-23, .wp-block-kadence-advancedheading.kt-adv-heading1492_7aa444-23[data-kb-block=\"kb-adv-heading1492_7aa444-23\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading1492_7aa444-23 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading1492_7aa444-23[data-kb-block=\"kb-adv-heading1492_7aa444-23\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading1492_7aa444-23 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading1492_7aa444-23[data-kb-block=\"kb-adv-heading1492_7aa444-23\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading1492_7aa444-23 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading1492_7aa444-23\">In der Pipeline <\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Diese Neuerungen zeigen deutlich, wohin die Reise geht: CSS entwickelt sich zunehmend zu einer leistungsf\u00e4higen Sprache f\u00fcr Layout, Gestaltung und Interaktion. Lass uns dazu weitere Beispiele anschauen, die zum Teil noch nicht produktionstauglich sind, aber zumindest in der Pipeline stecken: <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CSS&nbsp;if()&nbsp;\u2014 Bedingungslogik im Stylesheet<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Das ist ein konzeptioneller Wendepunkt der aktuellen CSS-Entwicklung: Mit der&nbsp;if()-Funktion lassen sich erstmals Inline-Bedingungen direkt im Stylesheet formulieren \u2014 ohne Umweg \u00fcber SASS oder JavaScript.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  .button {\n            width: if(style(--size: large): 200px; else: 100px);\n        }<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">In Kombination mit Custom Properties entstehen damit Design-Systeme, die direkt auf Kontextbedingungen oder Systemeinstellungen reagieren \u2014 etwa auf den Dark Mode des Betriebssystems \u2014 vollst\u00e4ndig in CSS, ohne eine einzige Zeile JavaScript.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Browser-Support:<\/strong>&nbsp;Im Moment (Juni 2026) noch nicht produktionstauglich, siehe <a href=\"https:\/\/caniuse.com\/?search=if%28%29\">https:\/\/caniuse.com\/?search=if%28%29<\/a>.&nbsp;if()&nbsp;hat zur Zeit eine Browserunterst\u00fctzung von ca. 68%. Wer das Prinzip heute verstehen will, kann es in Chrome Canary ausprobieren \u2014 f\u00fcr echte Projekte ist es noch zu fr\u00fch.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">@function&nbsp;\u2014 eigene CSS-Funktionen definieren<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Noch einen Schritt weiter geht&nbsp;@function: Damit lassen sich eigene, wiederverwendbare CSS-Funktionen definieren, die dann wie native CSS-Funktionen aufgerufen werden.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@function --spacing(--factor) {\n            result: calc(var(--factor) * 8px);\n        }\n\n        .card {\n            padding: --spacing(2);\n            \/* ergibt 16px *\/\n            margin: --spacing(3);\n            \/* ergibt 24px *\/\n        }<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Das klingt nach einer Kleinigkeit, ist aber konzeptionell ein gro\u00dfer Schritt: Bisher konnte man \u00fcber Custom Properties Werte wiederverwenden, aber keine Berechnungslogik kapseln.&nbsp;@function&nbsp;schlie\u00dft diese L\u00fccke. Besonders m\u00e4chtig wird es in Kombination mit&nbsp;if(): Theming-Logik, die fr\u00fcher JavaScript oder einen Build-Prozess brauchte, l\u00e4sst sich damit vollst\u00e4ndig in CSS abbilden.<br><strong>Browser-Support:<\/strong>&nbsp;Aktuell nur als Prototyp in Chrome Canary mit aktiviertem \u201eExperimental Web Platform Features\u201c-Flag. F\u00fcr den Produktionseinsatz mindestens ein bis zwei Jahre entfernt \u2014 aber als Ausblick schon interessant, weil es zeigt, wohin CSS sich entwickelt.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Native Carousels ohne JavaScript<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Wer schon mal einen Karussell-Slider gebaut hat, wei\u00df wie m\u00fchsam das mit JavaScript ist. CSS l\u00f6st das Problem jetzt nativ mit zwei neuen Pseudo-Elementen:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.slider {\n            overflow-x: scroll;\n            scroll-snap-type: x mandatory;\n        }\n\n        .slider::scroll-button(next) {\n            content: \"\u2192\";\n        }\n\n        .slider::scroll-marker-group {\n            display: flex;\n            gap: 8px;\n        }<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">::scroll-button()&nbsp;erzeugt browser-native Scroll-Buttons,&nbsp;::scroll-marker()&nbsp;die Navigationspunkte darunter. Das Ergebnis ist ein zug\u00e4nglicher, performanter Karussell \u2014 ohne JavaScript, ohne externe Bibliothek.<br><strong>Browser-Support:<\/strong>&nbsp;Chrome unterst\u00fctzt den Gro\u00dfteil dieser Features, Firefox und Safari sind noch nicht vollst\u00e4ndig dabei. F\u00fcr Produktionsprojekte ist das also noch mit Vorsicht einzusetzen \u2014 als Progressive Enhancement aber bereits interessant.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading1492_fbeaef-36, .wp-block-kadence-advancedheading.kt-adv-heading1492_fbeaef-36[data-kb-block=\"kb-adv-heading1492_fbeaef-36\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading1492_fbeaef-36 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading1492_fbeaef-36[data-kb-block=\"kb-adv-heading1492_fbeaef-36\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading1492_fbeaef-36 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading1492_fbeaef-36[data-kb-block=\"kb-adv-heading1492_fbeaef-36\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h3 class=\"kt-adv-heading1492_fbeaef-36 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading1492_fbeaef-36\">HTML-Attributwerte auslesen mit attr()<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Bisher war attr() praktisch auf content beschr\u00e4nkt. Mit CSS Values Level 5 soll es aber \u00fcberall einsetzbar werden \u2013 also <strong>auch f\u00fcr Farben, Abst\u00e4nde oder andere Eigenschaften<\/strong>. Der Browser-Support daf\u00fcr ist allerdings noch l\u00fcckenhaft.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">select-Element mit Gestaltungsm\u00f6glichkeiten<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Das native&nbsp;&lt;select&gt;-Element lie\u00df sich bislang kaum stylen. Wer einen angepassten Dropdown wollte, musste ihn komplett in JavaScript nachbauen \u2014 mit allem, was daran h\u00e4ngt: Accessibility, Keyboard-Navigation, Event-Handler. <br>Das \u00e4ndert sich jetzt:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>select {\n            appearance: base-select;\n        }\n\n        select::picker(select) {\n            border: 2px solid var(--farbe-akzent);\n            border-radius: 8px;\n        }<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Mit&nbsp;appearance: base-select&nbsp;\u00f6ffnet sich das Element f\u00fcr CSS-Styling, ohne die native Accessibility zu verlieren. Was fr\u00fcher 150 Zeilen JavaScript erforderte, geht jetzt mit wenigen CSS-Eigenschaften.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Browser-Support:<\/strong>&nbsp;Chrome hat das Feature implementiert, browser\u00fcbergreifende Unterst\u00fctzung ist noch im Aufbau. Bis Ende 2026 sollte die Lage besser aussehen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Scroll-driven Animations \u2014 ohne JavaScript<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Scroll-Animationen geh\u00f6ren zu den Effekten, die Websites lebendig machen: Elemente, die beim Scrollen einblenden, Fortschrittsbalken, Parallax-Effekte. Bisher war daf\u00fcr JavaScript Pflicht \u2014&nbsp;IntersectionObserver, GSAP oder \u00e4hnliche Bibliotheken. CSS kann das jetzt nativ.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das Prinzip: Eine normale&nbsp;@keyframes-Animation wird nicht zeitgesteuert abgespielt, sondern an den Scroll-Fortschritt gekoppelt.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@keyframes einblenden {\n            from {\n                opacity: 0;\n                translate: 0 40px;\n            }\n\n            to {\n                opacity: 1;\n                translate: 0 0;\n            }\n        }\n\n        .teaser {\n            animation: einblenden linear both;\n            animation-timeline: view();\n            animation-range: entry 0% entry 100%;\n        }<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">animation-timeline: view()&nbsp;koppelt die Animation an die Sichtbarkeit des Elements im Viewport \u2014 sobald&nbsp;.teaser&nbsp;ins Bild scrollt, l\u00e4uft die Animation ab. Kein JavaScript, kein Event-Listener, kein externes Script.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Es gibt zwei Varianten:&nbsp;scroll()&nbsp;koppelt die Animation an die Scroll-Position eines Containers \u2014 n\u00fctzlich f\u00fcr Leseanzeigen oder Parallax.&nbsp;view()&nbsp;reagiert auf die Sichtbarkeit eines Elements \u2014 n\u00fctzlich f\u00fcr Einblend-Effekte.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein wichtiger Hinweis f\u00fcr barrierefreies Design: Scroll-Animationen sollten immer in eine&nbsp;@media (prefers-reduced-motion: no-preference)-Abfrage gewickelt werden, damit Nutzer, die Animationen systemweit deaktiviert haben, nicht beeintr\u00e4chtigt werden.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> .teaser {\n            @media (prefers-reduced-motion: no-preference) {\n                animation: einblenden linear both;\n                animation-timeline: view();\n                animation-range: entry 0% entry 100%;\n            }\n        }<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Browser-Support:<\/strong>&nbsp;Chrome und Edge unterst\u00fctzen Scroll-driven Animations vollst\u00e4ndig. Safari hat das Feature mit Version 26 (2025) implementiert. Firefox hat es zur Zeit (Juni 2026) hinter einem Flag \u2014 vollst\u00e4ndige Unterst\u00fctzung steht kurz bevor. F\u00fcr progressive Enhancement bereits einsetzbar; f\u00fcr kritische UI-Elemente noch mit Fallback arbeiten.<br>Siehe auch: <a href=\"https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/scroll-driven-animations-blogartikel.html\">https:\/\/web-einfach-machen.de\/Kursmaterialien\/Kurs_Frontend-komplett\/Code-Beispiele\/scroll-driven-animations-blogartikel.html<\/a> oder  \u201eSnippets Code\u201c&nbsp;<a href=\"https:\/\/www.youtube.com\/watch?v=0TnO1GzKWPc\"><u>https:\/\/www.youtube.com\/watch?v=0TnO1GzKWPc<\/u><\/a>&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Und sonst so? Ebenfalls in der Pipeline w\u00e4re: <strong>CSS Masonry Layout<\/strong>, Natives \u201eMauerwerk\u201c-Layout via grid-template-rows: masonry. Ist aber aktuell noch ziemlich experimentell\/flagged; siehe <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Guides\/Grid_layout\/Masonry_layout\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Guides\/Grid_layout\/Masonry_layout<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Auch HTML entwickelt sich weiter<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In HTML \u00fcberschlagen sich die Ereignisse nicht ganz so, wie bei CSS. Aber auch hier tut sich was. Zum Beispiel die <a href=\"https:\/\/web-einfach-machen.de\/Blog\/webproduktion\/modularer-aufbau-von-websites-mit-web-components\/\" data-type=\"post\" data-id=\"1261\">Web-Components<\/a> oder \u2026 <br><strong>HTML Invoker Commands<\/strong> (oft einfach <strong>Invoker Commands<\/strong> genannt) zum Beispiel sind ein relativ neues HTML-Feature, mit dem HTML-Elemente andere Elemente <strong>ohne JavaScript<\/strong> steuern k\u00f6nnen. Sie geh\u00f6ren zu den aktuellen Bem\u00fchungen, mehr Interaktivit\u00e4t direkt in HTML und CSS zu erm\u00f6glichen.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;button command=\"show-modal\" commandfor=\"dialog\"&gt;\n&nbsp;&nbsp;&nbsp; Dialog \u00f6ffnen\n&lt;\/button&gt;\n&lt;dialog id=\"dialog\"&gt;\n&nbsp;&nbsp;&nbsp; Hallo Welt!\n&lt;\/dialog&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Die Idee ist \u00e4hnlich wie bei den bereits etablierten &lt;dialog&gt;-Elementen: Statt JavaScript zu schreiben, beschreibst du direkt im HTML, welche Aktion ausgel\u00f6st werden soll. <br>Invoker Commands sind ein sehr neues Feature und werden zur Zeit (Juni 2026) noch nicht von allen Browsern vollst\u00e4ndig unterst\u00fctzt. Sie sind aber ein gutes Beispiel daf\u00fcr, wohin sich HTML entwickelt.<br>Siehe auch <a href=\"https:\/\/www.youtube.com\/watch?v=vO6BQqflRsM\"><u>https:\/\/www.youtube.com\/watch?v=vO6BQqflRsM<\/u><\/a> von Coding2GO.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading1492_fd5bc2-90, .wp-block-kadence-advancedheading.kt-adv-heading1492_fd5bc2-90[data-kb-block=\"kb-adv-heading1492_fd5bc2-90\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading1492_fd5bc2-90 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading1492_fd5bc2-90[data-kb-block=\"kb-adv-heading1492_fd5bc2-90\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading1492_fd5bc2-90 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading1492_fd5bc2-90[data-kb-block=\"kb-adv-heading1492_fd5bc2-90\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading1492_fd5bc2-90 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading1492_fd5bc2-90\">Es lohnt sich also<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Soviel zum Thema CSS und fortgeschrittene Produktionstechniken im Webbereich. Wenn du dich damit besch\u00e4ftigst, bist du in der Lage, auch fortgeschrittenen CSS-Code zu verstehen und an fremden Projekten mit zu arbeiten. <br>Dieser Artikel richtet sich in erster Linie an diejenigen, die zwischen der Gestaltungs- und der Programmierungs-Abteilung in der Agentur sitzen. Es ging hier um HTML und CSS. Auf Themen, wie Skills in Gestaltung oder Frontendentwicklung mit Javascript und React bin ich hier deswegen nicht eingegangen. Die Grenze zu diesen Bereichen sollte man dabei kennen; nicht um sie nie zu \u00fcberschreiten, sondern um zu wissen, wo das eigene Berufsbild endet und ein anderes beginnt. Auch wenn du mit Homepagebauk\u00e4sten oder ContentManagementSystemen arbeiten solltest, hilft dir ein Grundverst\u00e4ndnis von HTML und CSS definitiv weiter.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wer heute im Frontend arbeitet, sollte die neuen M\u00f6glichkeiten kennen und die Entwicklung gerade von CSS aufmerksam verfolgen. Es lohnt sich hier also, auf jeden Fall am Ball zu bleiben.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Welche F\u00e4higkeiten sind in der Agentur f\u00fcr eine erfolgreiche Umsetzung von modernen Webauftritten erforderlich? Wer heute im Frontend arbeitet, sollte die neuen M\u00f6glichkeiten kennen und die Entwicklung gerade von CSS aufmerksam verfolgen. <\/p>\n","protected":false},"author":1,"featured_media":1517,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","iawp_total_views":111,"footnotes":""},"categories":[4,10,5],"tags":[44],"class_list":["post-1492","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-konzeption","category-webproduktion","tag-modernes-css"],"_links":{"self":[{"href":"https:\/\/web-einfach-machen.de\/Blog\/wp-json\/wp\/v2\/posts\/1492","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/web-einfach-machen.de\/Blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/web-einfach-machen.de\/Blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/web-einfach-machen.de\/Blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/web-einfach-machen.de\/Blog\/wp-json\/wp\/v2\/comments?post=1492"}],"version-history":[{"count":182,"href":"https:\/\/web-einfach-machen.de\/Blog\/wp-json\/wp\/v2\/posts\/1492\/revisions"}],"predecessor-version":[{"id":1705,"href":"https:\/\/web-einfach-machen.de\/Blog\/wp-json\/wp\/v2\/posts\/1492\/revisions\/1705"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/web-einfach-machen.de\/Blog\/wp-json\/wp\/v2\/media\/1517"}],"wp:attachment":[{"href":"https:\/\/web-einfach-machen.de\/Blog\/wp-json\/wp\/v2\/media?parent=1492"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/web-einfach-machen.de\/Blog\/wp-json\/wp\/v2\/categories?post=1492"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/web-einfach-machen.de\/Blog\/wp-json\/wp\/v2\/tags?post=1492"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}