{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "sektion-stil-abfrage", "name": "Sektion schaltet ihren Ton per Style Query", "name_en": "Section tone switching with container style queries", "kurz": "Drei Kapitel eines Gutshofs bei Neumarkt in identischem Markup: Jede Sektion setzt nur --ton: kalk, sandstein oder nacht, und Karten, Knöpfe, Tabellen und Fokusring stellen sich per @container style() selbst um.", "kategorie": "Hero & Section-Layouts", "kategorie_slug": "hero-layouts", "kategorie_nr": 4, "bau_chat": "C2", "prioritaet": "F", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "website_belege": 0, "stimmung": [ "präzise", "filmisch", "experimentell" ], "stimmung_roh": [ "experimentell", "präzise", "feierlich" ], "technik": [ "css", "container-queries", "@property" ], "technik_gruppen": [ "css" ], "leistungskosten": "niedrig", "steckbrief": { "beschreibung": "Eine Sektion setzt nur eine Custom Property: --ton: kalk, sandstein oder nacht. Alles darin fragt diesen Ton per @container style(--ton: nacht) ab und stellt sich selbst um: Text, Linien, Knöpfe, Karten, Bildrahmen, Fokusring. Es gibt keine Klassen wie .section--dark .card__title mehr. Dieselbe Karte sieht in jeder Sektion richtig aus, und eine helle Karte in einer dunklen Sektion schaltet ihre eigenen Kinder zurück. Seit Mai 2026 laufen Style Queries für Custom Properties in allen Engines.", "warum_es_wirkt": "Für Templates und den One-Shot-Generator ist es der kürzeste Weg zu Varianten: eine HTML, der Ton steht als eine Zeile an der Sektion. Bausteine müssen nicht wissen, wo sie liegen. Das verhindert die typischen Fehler dunkler Sektionen: dunkle Schrift auf Nachtblau, unsichtbare Fokusringe, Knöpfe ohne Kante.", "wann_einsetzen": "Bei Seiten mit Sektionen in mehreren Tönen (Tag und Nacht, Material und Akzent), bei Baukästen, in denen dieselben Bausteine auf verschiedenen Gründen liegen, und in tokens.css als Grundlage für Sektionsvarianten.", "wann_nicht": "Nicht, wenn die Seite nur einen Ton hat. Nicht für Abfragen normaler Eigenschaften wie color: Das kann laut modern-css.com noch kein Browser. Nicht ohne Rückfall, solange ältere Firefox- und Safari-Versionen (vor 151 bzw. 18) eine Rolle spielen: Der Grundton muss ohne Abfrage lesbar sein.", "varianten": [ "Kapitel: drei Sektionen Tag, Abend, Nacht mit identischem Markup", "Insel: helle Karte in dunkler Sektion, die nächste Abfrage gewinnt", "Rückfall: Umschalter zwischen Style Query und Attribut-Rückfall [data-ton], mit Browser-Erkennung" ], "umsetzung": "1. @property --ton { syntax: ''; inherits: true; initial-value: kalk; } 2. Jede Sektion ist ein Container: .ton { container-name: ton; } (für Style Queries reicht jedes Element, container-type ist nur für Größenabfragen nötig) und setzt --ton per style-Attribut oder Klasse. 3. Bausteine fragen den nächsten Container ab: @container style(--ton: nacht) { .karte { --karte-grund: …; --karte-text: …; } }. Nur Custom Properties umschalten, die Bausteine lesen dann var(--karte-text). 4. Eine Insel (helle Karte in dunkler Sektion) setzt selbst --ton: kalk und ist selbst Container; ihre Kinder fragen sie zuerst ab. 5. Rückfall: Grundwerte ohne Abfrage für den hellen Ton; zusätzlich :where([data-ton=nacht]) mit denselben Variablen für Browser ohne Style Queries. Erkennung per Testelement in JS (getComputedStyle eines Kindes) und Klasse am . 6. Farbwechsel per transition auf den Variablen nur, wenn sie per @property registriert sind; sonst springen sie.", "mobil": "Wie am Desktop. Sektionen stehen untereinander, jede mit eigenem Ton. Der Umschalter in der Demo liegt als Knopfreihe mit Umbruch über der Sektion.", "reduzierte_bewegung": "Tonwechsel in 200 ms Überblendung statt 725 ms, ohne Weg.", "barrierefreiheit": "Jeder Ton hat geprüfte Textfarben (mindestens 4,5 : 1) und einen eigenen Fokusring. Im Kontrastmodus (forced-colors) übernimmt das System die Farben, Knöpfe behalten eine Kante. Der Ton ändert nie die Reihenfolge oder den Inhalt." }, "messwerte": { "easing": "cubic-bezier(0.625, 0.05, 0, 1)", "dauer_ms": "725 Tonwechsel der Sektion, 400 Deckkraft, 250 Hover", "stagger_ms": "", "distanz": "", "sonstiges": "token-studio-signatur aus dem Rezept eventlocation-hochzeit; Farben als registrierte -Properties, damit sie gleiten", "herkunft": "eigene Festlegung", "quelle": "Rezept eventlocation-hochzeit" }, "kurve": { "bezier": [ 0.625, 0.05, 0.0, 1.0 ], "css": "cubic-bezier(0.625, 0.05, 0, 1)", "name": "eigene Kurve", "dauer_ms": 725 }, "gesehen_bei": [ { "seite": "web.dev: New to the web platform in May 2026", "url": "https://web.dev/blog/web-platform-05-2026", "auszeichnung": "", "beobachtung": "Abgerufen 04.11.2026: Firefox 151 bringt style()-Abfragen in @container. Damit sind Container Style Queries für Custom Properties Baseline Newly available: Chrome 111, Edge 111, Firefox 151, Safari 18.", "art": "artikel" }, { "seite": "Mozilla dev-platform: Intent to implement and ship CSS container style queries", "url": "https://groups.google.com/a/mozilla.org/g/dev-platform/c/WpRW4SetBL8", "auszeichnung": "", "beobachtung": "Abgerufen 04.11.2026: Beitrag vom 13.04.2026, Style Queries ab Firefox 151 standardmäßig an auf allen Plattformen. Spezifikation CSS Conditional 5, @container.", "art": "artikel" }, { "seite": "modern-css.com: @container style()", "url": "https://modern-css.com/container-style-queries/", "auszeichnung": "", "beobachtung": "Abgerufen 04.11.2026: Nur Custom Properties sind abfragbar, normale Eigenschaften wie font-weight oder color in keinem Browser. Empfehlung: Property per @property mit syntax \"\" und initial-value registrieren, nicht „default“ als Wert nehmen.", "art": "artikel" }, { "seite": "web.dev: Interop 2026", "url": "https://web.dev/blog/interop-2026", "auszeichnung": "", "beobachtung": "Laut Recherche Runde 4 (geöffnet am 04.11.2026): Container Style Queries sind Schwerpunkt von Interop 2026. Im Fundus nutzte keine Demo style(--.", "art": "artikel" } ], "tutorials": [ { "titel": "MDN: Container size and style queries", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_size_and_style_queries" }, { "titel": "MDN: @property", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@property" }, { "titel": "modern-css.com: @container style()", "url": "https://modern-css.com/container-style-queries/" } ], "kombinierbar_mit": [ "theme-farbwechsel-scroll", "theme-umschalter-view-transition", "karten-faecher-container", "fokus-stil-system", "fluide-typo-clamp-cqi" ], "urls": { "detail": "https://cecodesign.de/lab/fundus/hero-layouts/sektion-stil-abfrage/", "meta": "https://cecodesign.de/lab/fundus/hero-layouts/sektion-stil-abfrage/meta.json", "demo": "https://cecodesign.de/lab/fundus/hero-layouts/sektion-stil-abfrage/demo" }, "herkunft": { "quelldateien": [ "Recherche Runde 4, 04.11.2026" ], "pruefnotizen": [ "Recherche Runde 4: Container Style Queries sind Interop-2026-Schwerpunkt und in keinem demo.html genutzt.", "Browserstand am 04.11.2026 über web.dev (Mai 2026), Mozilla-Intent und MDN-Kompatibilitätsdaten (GitHub-PR) geprüft. caniuse und MDN direkt waren aus der Sitzung nicht abrufbar.", "Bereichsabfragen wie style(--x > 3) sind nicht Teil dieser Baseline und werden nicht verwendet." ] }, "bau": { "status": "fertig", "kurz": "Drei Kapitel eines Gutshofs bei Neumarkt in identischem Markup: Jede Sektion setzt nur --ton: kalk, sandstein oder nacht, und Karten, Knöpfe, Tabellen und Fokusring stellen sich per @container style() selbst um.", "demo": true, "abhaengigkeiten": [], "werte": { "property": "@property --ton { syntax: ''; inherits: true; initial-value: kalk }", "container": ".ton { container-name: ton } + style=\"--ton: nacht\"", "abfrage": "@container ton style(--ton: nacht) { .ton-innen { --flaeche: #15171F; --tinte: #F2ECE2; --tinte-2: #B8B0A3; --linie: #343846; --messing: #C9A66B; --karte: #1E212B; --signal: #C43B2B; --fokus: #F2ECE2 } }", "toene": "kalk #F5F0E6/#1D1A17, sandstein #E9DCC8/#1D1A17 (Signal #B23526, Messing #7A5C33), nacht #15171F/#F2ECE2", "farben_registriert": "@property für alle Ton-Variablen, damit sie gleiten", "rueckfall": ":where([data-ton=\"nacht\"]) > .ton-innen { gleiche Variablen }, Skript setzt data-ton zusätzlich; Stylesheet vor der Abfrage", "erkennung": "Testelement mit --ton: nacht, getComputedStyle(kind).getPropertyValue('--flaeche') === rgb(21, 23, 31)", "browser_stand": "Chrome 111, Edge 111, Safari 18, Firefox 151 (Baseline Newly available seit Mai 2026), nur Custom Properties", "easing": "cubic-bezier(0.625, 0.05, 0, 1)", "dauer_ms": 725, "deckkraft_ms": 400, "hover_ms": 250 }, "ausloeser": "klick", "touch": "Wie am Desktop; Tonwahl je Sektion als Knopfreihe mit 13 px Innenabstand ohne Hover, Sektionen untereinander.", "reduziert": "Tonwechsel als lineare Überblendung in 200 ms statt 725 ms, keine Wege.", "korrekturen": {}, "geprueft": "04.11.2026", "notiz": "Rezept eventlocation-hochzeit, Marke Gut Wiesenau, Stadt Neumarkt in der Oberpfalz. Neu am 04.11.2026 (Runde 4). Erste Demo mit style(--. Bilder fenster-licht.jpg, zitronen-tisch.jpg, atmosphaere-partikel-kamin.jpg aus medien. Browserstand über web.dev (Mai 2026) und Mozilla-Intent geprüft; caniuse und MDN direkt nicht abrufbar. Selbsturteil 4.", "varianten": [ { "id": "kapitel", "name": "Kapitel", "wann": "Seiten mit Tag-, Abend- und Nachtkapiteln oder Material- und Akzentsektionen (Eventlocation, Hotel, Weingut, Kultur).", "werte": { "sektionen": 3, "toene": "kalk, sandstein, nacht" } }, { "id": "insel", "name": "Insel", "wann": "Helle Anfrage- oder Preiskarte in einer dunklen Sektion, ohne Sonderklasse.", "werte": { "verschachtelung": "nacht › kalk › nacht", "regel": "nächster Container mit container-name ton gewinnt" } }, { "id": "rueckfall", "name": "Rückfall", "wann": "Projekte, die Firefox vor 151 oder Safari vor 18 noch bedienen müssen.", "werte": { "modus": "beide (empfohlen) / nur Style Query / nur Rückfall [data-ton]", "ohne_beide": "Grundton Kalk aus initial-value" } } ] } }