CSSOM – getComputedStyle, CSSStyleDeclaration, CSS Rule API #120

New issue

Open

opened 2026-06-20 08:19:57 +00:00 by Artur · 0 comments

Artur commented

2026-06-20 08:19:57 +00:00

Owner

Gap

Aktuell gibt getComputedStyle() ein leeres Objekt zurueck und CSSStyleSheet.insertRule() ist noop. Fuer korrektes Rendering (ohne Pixel) brauchen wir eine funktionale CSSOM.

Was wir brauchen

1. getComputedStyle(element, pseudoElement)

Muss ein CSSStyleDeclaration-Objekt retournieren
Werte muessen aus Stylesheet-Regeln + inline-style berechnet werden
Fuer Crawling: alle computed values muessen existieren und sinnvolle defaults haben
Optimierung: keine echte Layout-Berechnung, nur Property-Deklarationen aufloesen

2. CSSStyleDeclaration (vollstaendig)

Aktuell haben wir einen Proxy. Brauchen:

Alle ~250 CSS Properties als getter (return '' oder computed value)
setProperty(name, value, priority)
getPropertyValue(name)
removeProperty(name)
item(index)
cssText (get/set)
length
parentRule

3. CSSStyleSheet

insertRule(rule, index) - muss CSS parsen und Rule-Objekt erstellen
deleteRule(index)
cssRules - CSSRuleList mit CSSStyleRule, CSSMediaRule, CSSFontFaceRule, etc.
ownerRule (bei @import)
href / title / type / disabled / media

4. CSSRule types

CSSStyleRule: selectorText, style
CSSMediaRule: media, cssRules
CSSFontFaceRule: style
CSSImportRule: href, media, styleSheet
CSSKeyframesRule: name, cssRules
CSSKeyframeRule: keyText, style
CSSSupportsRule: conditionText, cssRules

5. matchMedia(mediaQueryString)

Aktuell: return true/false je nach query. Brauchen:

MediaQueryList mit matches, media, addListener/removeListener
Proper event dispatch on change (muss nicht feuern, aber API muss da sein)

6. Style Sheet API auf Document

document.styleSheets (StyleSheetList)
adoptedStyleSheets (für Constructable Stylesheets)

Labels

feature, html-spec

Architektur

StyleEngine (exists) wird erweitert um CSS-Regel-Parsing + Kaskade
Kein echtes Layout / Box-Modell / Painting
Fokus: Werte-Aufloesung fuer Feature-Detection und Framework-Kompatibilitaet

Tests

getComputedStyle gibt values aus inline + stylesheet
CSSStyleSheet.insertRule + cssRules lesen
matchMedia API surface
Alle Properties existieren

## Gap Aktuell gibt getComputedStyle() ein leeres Objekt zurueck und CSSStyleSheet.insertRule() ist noop. Fuer korrektes Rendering (ohne Pixel) brauchen wir eine funktionale CSSOM. ## Was wir brauchen ### 1. getComputedStyle(element, pseudoElement) - Muss ein CSSStyleDeclaration-Objekt retournieren - Werte muessen aus Stylesheet-Regeln + inline-style berechnet werden - Fuer Crawling: alle computed values muessen existieren und sinnvolle defaults haben - Optimierung: keine echte Layout-Berechnung, nur Property-Deklarationen aufloesen ### 2. CSSStyleDeclaration (vollstaendig) Aktuell haben wir einen Proxy. Brauchen: - Alle ~250 CSS Properties als getter (return '' oder computed value) - setProperty(name, value, priority) - getPropertyValue(name) - removeProperty(name) - item(index) - cssText (get/set) - length - parentRule ### 3. CSSStyleSheet - insertRule(rule, index) - muss CSS parsen und Rule-Objekt erstellen - deleteRule(index) - cssRules - CSSRuleList mit CSSStyleRule, CSSMediaRule, CSSFontFaceRule, etc. - ownerRule (bei @import) - href / title / type / disabled / media ### 4. CSSRule types - CSSStyleRule: selectorText, style - CSSMediaRule: media, cssRules - CSSFontFaceRule: style - CSSImportRule: href, media, styleSheet - CSSKeyframesRule: name, cssRules - CSSKeyframeRule: keyText, style - CSSSupportsRule: conditionText, cssRules ### 5. matchMedia(mediaQueryString) Aktuell: return true/false je nach query. Brauchen: - MediaQueryList mit matches, media, addListener/removeListener - Proper event dispatch on change (muss nicht feuern, aber API muss da sein) ### 6. Style Sheet API auf Document - document.styleSheets (StyleSheetList) - adoptedStyleSheets (für Constructable Stylesheets) ## Labels feature, html-spec ## Architektur - StyleEngine (exists) wird erweitert um CSS-Regel-Parsing + Kaskade - Kein echtes Layout / Box-Modell / Painting - Fokus: Werte-Aufloesung fuer Feature-Detection und Framework-Kompatibilitaet ## Tests - getComputedStyle gibt values aus inline + stylesheet - CSSStyleSheet.insertRule + cssRules lesen - matchMedia API surface - Alle Properties existieren

Artur added the

feature

html-spec

labels

2026-06-20 08:19:57 +00:00