Beobachtetes Signal · 8. Juni 2026 · Technical Release · Quelle: DEV Community · Relevanz: 4/5 · Sentiment: Neutral
CSS if() Inline-Bedingungen starten in Chrome 137
Die neue CSS if()-Funktion bringt Inline-Conditional-Logik direkt in Property-Deklarationen und ermöglicht Entwicklern die Verzweigung von Style-Werten ohne separate @media-, @supports-Abfragen oder duplizierte Regeln. Die Syntax verarbeitet von oben nach unten ausgewertete condition:value-Paare und unterstützt drei Bedingungstypen: style() für berechnete Custom-Property-Abfragen, media() für Inline-Media-Queries sowie supports() für Feature-Detection. Das Feature ist ab Chrome 137 sowie in weiteren Chromium-Browsern (Edge, Opera) verfügbar, während die Firefox-Implementierung läuft und Safari auf der Roadmap für 2026–2027 steht. Der Artikel empfiehlt progressive Enhancement mit sicheren Standardwerten und @supports-Absicherung und demonstriert praktische Anwendungsfälle für Touch-Targets, Theme-Switching sowie moderne Color-Fallbacks im Web-Ökosystem.
Die Einführung eines neuen CSS-Standards in einem Major-Browser wie Chrome 137 verändert die technischen Grundlagen für Rendering und progressive Enhancement, was unmittelbaren Einfluss auf die Umsetzung von Web-Erlebnissen wie Ad-Creatives und Responsive Layouts im gesamten Ökosystem hat.
Marktsignale zu KeNIC in Echtzeit verfolgen
Polaris7 erfasst behördliche Registrierungen, Primärquellen, Führungswechsel und Deal-Aktivitäten rund um die Uhr. Erstellen Sie Ihren kostenlosen Explorer-Workspace, um automatisierte Executive Briefings zu erhalten.
Wichtigste Kernpunkte & Evidenz
- Die CSS if()-Funktion ermöglicht Inline-Conditional-Logik direkt in Property-Deklarationen.
- if()-Syntax: property: if(condition: value; else: fallback); wird von oben nach unten ausgewertert.
- Unterstützte Bedingungstypen umfassen style(), media() und supports().
- Browser-Support Mitte 2026: Chrome 137+, Edge, Opera (Chromium); Firefox in Arbeit; Safari für 2026–2027 geplant.
Verknüpfte Unternehmen
1 verknüpfte UnternehmenOntologie & Marktkonzepte
Verwandte Marktsignale & Trends
Aktuelle verifizierte Unternehmensentwicklungen und Deal-Aktivitäten in diesem Marktsegment.
Chrome Unveils 22 Game-Changing CSS Features for 2025
CSS Wrapped 2025 is a Chrome Developer blog post (published Dec 8, 2025) announcing 22 new CSS features that shipped in Chrome in 2025. The post highlights new customizable components, next-generation interaction capabilities, and ergonomics improvements intended to streamline developer workflows and enable more dynamic interfaces. The blog points readers to a dedicated CSS Wrapped 2025 website that showcases the 22 features. Licensing notes state the page content is under Creative Commons Attribution 4.0 and code samples under the Apache 2.0 License.
Critical CSS: Inlining eliminiert Render-Blocking
Dieser technische Leitfaden erklärt, warum externes CSS das Rendering im Browser blockiert – da Browser sowohl DOM als auch CSSOM aufbauen müssen, bevor der Render-Tree entsteht –, und zeigt, wie das Inlining von „Critical CSS“ (den Styles für den Above-the-Fold-Bereich) im HTML-Head den Netzwerk-Roundtrip einspart, der den First Paint verzögert. Der Artikel beschreibt Automatisierungsansätze zur Extraktion (Headless Rendering), Tools (Critters-Plugin, Next.js-Integration, das Critical-Node-Paket) sowie ein empfohlenes Muster mit rel="preload" und onload, um das vollständige Stylesheet mit einem noscript-Fallback asynchron zu laden. Dabei werden Trade-offs wie größere HTML-Antworten, duplizierte Regeln und Komplikationen bei clientseitig gerenderten Seiten beleuchtet. Zudem wird erläutert, warum Inlining den Lighthouse First Contentful Paint je nach Latenz typischerweise um ca. 100 bis 500 ms verbessert.
CSS Gap Decorations Now in Chrome and Edge 149
Chrome and Edge (Chromium) have added CSS "gap decorations"—visual separators drawn in layout gaps—available by default starting with version 149. Built in collaboration between the Google Chrome and Microsoft Edge teams, the feature extends the existing column-rule concept to grid and flexbox via new properties (row-rule, column-rule and related shorthands) and controls for breaks, insets, visibility and animation. Gap decorations support repeat() syntax for varying styles across gaps and are purely visual progressive enhancements (gaps render normally in browsers without support). The blog post (May 15, 2026) includes examples, demos, links to the spec, and notes changes since the developer trial in Chrome 139. A polyfill is in development and bugs can be filed in the Chromium issue tracker.
Marktsignale & Strategische Shifts in Echtzeit verfolgen
Erstellen Sie benutzerdefinierte Watchlists, um automatisierte, evidenzbasierte Executive Briefings zu erhalten, sobald wesentliche Signale oder Marktverschiebungen auftreten.