Bekannte Grenzen

Bewusste Kompromisse, keine Bugs - jeder Punkt hier wurde per echtem Test in echten Browsern gefunden und ist absichtlich so gelöst, nicht übersehen.

Abgeleitete Farbtokens reagieren nicht auf lokale Überschreibung

Eine per color-mix() abgeleitete Custom Property (z.B. --ncss-color-brand-100) wird nur einmal berechnet - dort, wo sie deklariert ist (:root) - und dann als fertiger Wert vererbt. Ein tiefer im Baum lokal überschriebener Seed-Wert lässt eine bereits vererbte Ableitung nicht neu rechnen. Betrifft nur ein lokal (nicht auf :root) angewendetes Theme: Komponenten, die den Seed direkt nutzen (.ncss-btn--primary), reagieren korrekt; Komponenten, die die abgeleitete Skala nutzen (.ncss-badge über -100/-on-soft), bleiben bei der alten Farbe. Ein echtes theme.css auf :root hat dieses Problem nicht - siehe Theme anpassen.

:modal hört sofort auf zu matchen

Sobald ein Dialog geschlossen wird - lange bevor die Fade-Transition optisch fertig ist. Positionierung, die nur über das UA-Stylesheet an :modal hängt, bricht dadurch mitten in der eigenen Schließen-Animation weg. .ncss-modal deklariert position:fixed; inset:0; margin:auto; deshalb selbst und unbedingt.

Flex-/Grid-Kinder werden automatisch "blockifiziert"

Ein deklariertes display: inline/inline-block auf einem direkten Kind eines Flex-/Grid-Containers (.ncss-stack/-cluster/-grid/-flex) rechnet der Browser zu display: block um - kein Bug, offiziell in der Spec verankert, kein Opt-out vorgesehen. Betrifft .ncss-text-boxed (braucht display:inline): immer in einen normalen <div>-Wrapper stellen, nie direkt als Flex-/Grid-Kind - auch nicht indirekt über eine .ncss-card-body, die selbst .ncss-stack/-cluster/-grid trägt oder --horizontal ist. display: contents löst es nicht (entfernt die eigene Box komplett).

.ncss-card-media rundet sich selbst nie

border-radius: 0, damit .ncss-placeholder (eigene border-radius) beim Kombinieren nicht alle vier Ecken der Media rundet - die Karte selbst (overflow: clip) übernimmt das Runden nur dort, wo die Media wirklich an eine echte Kartenecke stößt.

.ncss-container--narrow ist nur ein Modifier

Setzt ausschließlich max-width - immer zusammen mit der Basisklasse verwenden (class="ncss-container ncss-container--narrow"). Allein verwendet fehlt die Zentrierung, der Block klebt linksbündig, und ein darin verschachteltes .ncss-full-bleed-Kind bricht sichtbar schief aus.

<!-- Richtig -->
<div class="ncss-container ncss-container--narrow">...</div>
<!-- Falsch: --narrow allein fehlt die Zentrierung -->
<div class="ncss-container--narrow">...</div>

Nie */ mitten in einem CSS-Kommentar

Z.B. eine Wildcard-Klassenerwähnung wie .ncss-radius-x/.ncss-shadow-x in Prosa - die Zeichenfolge beendet den Kommentar sofort dort, alles danach bis zum nächsten Kommentarende wird als echter (kaputter) CSS-Code geparst, oft ohne Konsolenfehler. Nach jeder Kommentar-Änderung mit Wildcard-Klassennamen prüfen, dass keine neue Instanz entstanden ist.

helpers kann components nicht überschreiben

Eine Utility aus helpers/ kann eine gleichnamige Eigenschaft aus components/ nicht überschreiben, egal in welcher Reihenfolge die Klassen im class-Attribut stehen - Cascade Layers werten nach Layer-Reihenfolge aus, nicht nach Quelltext-Reihenfolge, und components steht nach helpers (siehe Architektur). class="ncss-card ncss-surface--brand" behält z.B. den Hintergrund von .ncss-card - für eine farbige Karte stattdessen die eigene Farbvariante der Komponente verwenden (.ncss-card--brand).

Weitere bewusste Kompromisse

• initial-letter (Drop Cap) ist nicht Baseline (Firefox hat es nie ausgeliefert). Safari braucht -webkit-initial-letter, ncss deklariert beide. Ohne Unterstützung bleibt der erste Buchstabe schlicht normal groß.
• background-attachment: fixed wird bewusst nicht für Parallax verwendet - auf iOS Safari seit jeher deaktiviert. Stattdessen animation-timeline: view() (.ncss-hero--parallax), @supports-gegated.
• Relative url()-Werte innerhalb einer Custom Property lösen sich gegen die Basis-URL des Stylesheets auf, das die Property konsumiert - nicht gegen die Seite, die sie gesetzt hat. background-image wird deshalb nie durch eine Custom Property gereicht, sondern immer direkt inline am Element gesetzt.
• .ncss-table-stacked bricht absichtlich die programmatische Tabellensemantik für Screenreader - nur einsetzen, wenn Inhalt wirklich wie eine Liste von Datensatz-Karten gelesen werden soll, sonst .ncss-table-scroll.
• display: grid-lanes (echtes zeilentreues Masonry) ist nur in sehr aktuellen Browsern verfügbar - .ncss-masonry nutzt automatisch das spaltenbasierte CSS-Columns-Fallback, wenn grid-lanes fehlt.
• Mega-Menü-Positionierung dockt ohne CSS Anchor Positioning nicht automatisch an den Viewport-Rand an - max-width verhindert nur das Überlaufen, an sehr schmalen Fenstern kann der Trigger nicht mehr zentriert unter dem Menü liegen.