Sass und Browserkompatibilität

Eines der Kernprinzipien von Sass war schon immer, CSS so wenig wie möglich zu verstehen. Als CSS-Präprozessor müssen wir natürlich die Syntax von CSS verstehen, aber so weit wie möglich versuchen wir, uns nicht um die Semantik – die Bedeutung hinter den Stilen – zu kümmern. Das bedeutet, dass Sass keine Ahnung hat, welche Eigenschaften gültig sind, welche HTML-Elemente tatsächlich existieren oder sogar zu einem großen Teil, wie die Syntax der meisten @-Regeln ist.

Daraus ziehen wir viel Nutzen. Je weniger eingebautes Wissen Sass über CSS hat, desto unwahrscheinlicher ist es, dass es schlecht mit neuen CSS-Features funktioniert. Stellen Sie sich vor, Sie müssten jedes Mal eine Feature-Anfrage stellen, wenn Sie eine neue CSS-Eigenschaft verwenden möchten – das wäre ärgerlich! Stattdessen funktionieren ältere Sass-Versionen weiterhin problemlos, es sei denn, die tatsächliche Syntax ändert sich, was viel seltener vorkommt.

Aufgrund dieser Entkopplung mussten wir uns nie viel Gedanken über die Browserkompatibilität machen. Sass leitet einfach alles weiter, was an CSS übergeben wird. Es liegt am Benutzer zu bestimmen, was wo funktioniert, was ihm viel Flexibilität gibt und uns Designern eine schwierige Entscheidung weniger abnimmt.

Aber trotz dieser allgemeinen Regel gibt es immer ein paar Fälle, in denen CSS-Wissen notwendig ist. Einer der wichtigsten ist @extend, das viel über die Bedeutung von Selektoren wissen muss, um sie richtig zu vereinheitlichen und Duplikate zu entfernen. Eigenschaftswerte erfordern manchmal ebenfalls semantisches Wissen – wir müssen beispielsweise wissen, wie Farben zu interpretieren sind.

Einer dieser Fälle hat uns nun eingeholt. Vor langer Zeit haben wir uns entschieden, transparente Farben immer als das Schlüsselwort transparent auszugeben, da es von IE6 bis 8 unterstützt wurde und die alternative rgba()-Syntax nicht. Aber es stellt sich heraus, dass für neuere Versionen das Gegenteil der Fall ist: In IE10 werden :hover-Stile nicht für Elemente mit background-color: transparent ausgelöst, aber sie werden mit background-color: rgba(0, 0, 0, 0) ausgelöst. Danke, IE!

Wir standen also vor einem Dilemma. Das bestehende Verhalten beibehalten, das mit alten, veralteten Browsern kompatibel war, die niemand mehr benutzt, oder ein neues Verhalten wählen, das mit modernen Browsern besser funktioniert? Die Entscheidung war ziemlich klar: Wir haben uns entschieden, immer rgba(0, 0, 0, 0) auszugeben.

Darüber hinaus wollten wir eine allgemeine Regel finden, die uns bei der Bestimmung leitet, welche Browser wir als veraltet betrachten und welche wir weiterhin unterstützen würden (was auch immer das für das jeweilige Verhalten bedeutete). Wir haben entschieden, dass wir bereit sind, Änderungen vorzunehmen, wenn diese weniger als 2 % des globalen Marktanteils der Browser gemäß StatCounter GlobalStats negativ beeinflussen.

Diese Grenze ist nicht in Stein gemeißelt. Wir behalten uns das Recht vor, sie in Zukunft zu ändern und individuelle Entscheidungen zu treffen, die mehr Browser betreffen könnten. Aber dies ist die allgemeine Richtlinie, auf die wir achten, und wir wollten Sie alle darüber informieren.