Lassen Sie uns einen kurzen Spaziergang durch die Erinnerung machen, um uns daran zu erinnern, wie Vendor Prefixing von CSS-Eigenschaften zustande kam. Ich hoffe, ich löse keine PTBS bei jemandem aus!
Es ist unklar, wer mit dem Prefixen begonnen hat oder wann genau es begann. Was klar ist, ist, dass bis 2006 Präfix-Funktionen in Internet Explorer und Firefox vorhanden waren. Der raison d’être von Präfixen war die Spezifizierung browserspezifischer Funktionen. Es wurde als eine Möglichkeit angesehen, nicht standardmäßige Funktionen zu implementieren und Vorschauen auf neue Standardfunktionen anzubieten.
Bis 2012 gab die W3C CSS Working Group Richtlinien zur Verwendung von Vendor-Präfixen heraus
In CSS verwenden wir Vendor-Präfixe für Eigenschaften, Werte, @-Regeln, die: – browserspezifische Erweiterungen sind (gemäß CSS 2.1) oder – experimentelle Implementierungen sind (gemäß CSS Snapshot 2010) (z. B. in Working Drafts)
Es wurde zu einer Branchennorm. Die Anzahl der Präfixe wuchs, und damit auch die Verwirrung. Dies führte zu teilweisen Implementierungen von CSS-Funktionen, führte zu Fehlern und schuf letztendlich eine Spaltung im Browser-Ökosystem, was Entwickler verärgerte. Entwickler reagierten, indem sie Werkzeuge entwickelten, um das Problem zu automatisieren.
Browserhersteller begannen langsam, sich vom Prefixen zu lösen und bevorzugten stattdessen Feature-Flags innerhalb der Browsereinstellungen. Es schien, dass die durch Vendor-Präfixe verursachten Probleme mit der Zeit verschwinden würden. Die Frage ist: Ist diese Zeit bereits gekommen?
Ich habe eine Analyse des caniuse-Datensatzes und des Mozilla Developer Network Compat-Datensatzes durchgeführt, um diese Frage zu beantworten.
Adoption Trends
Sie sehen in der obigen Grafik den Trend der Implementierung von präfixierten Funktionen in den wichtigsten Browsern. Ich habe Chrome für Android aufgrund unzureichender Daten ausgeschlossen.
Von 2007 bis 2011 gab es in allen Browsern einen stetigen Anstieg der Anzahl präfixierter Funktionen. Internet Explorer verzeichnete nur 2011 einen Anstieg. Dann, im Jahr 2012, begann Mozilla, präfixierte Funktionen – wie -moz-border-radius* und -moz-box-shadow – aus Firefox zu entfernen. Danach entfernten sie konsequent präfixierte Eigenschaften, sobald die Standardversion dieser Eigenschaft vollständig implementiert war.
Im Jahr 2013 begann Mozilla, Funktionen hinter Feature-Flags (Pref-Flags) verfügbar zu machen. Im selben Jahr wechselte Chrome seine Rendering-Engine von WebKit zu Blink (Teil des Chromium-Projekts). Dies war ein großer Wendepunkt bei der Entfernung einiger präfixierter Funktionen.
Erst im April 2016 kündigte WebKit an, keine experimentellen Funktionen mehr mit Präfixen zu veröffentlichen
Diese Strategie hat sich im Laufe der Zeit als nicht besonders gut erwiesen. Viele Websites wurden von präfixierten Eigenschaften abhängig. Sie nutzten oft jede präfixierte Variante einer Funktion, was CSS weniger wartbar und JavaScript-Programme schwieriger zu schreiben machte. Websites nutzten häufig nur die präfixierte Version einer Funktion, was es für Browser schwierig machte, die Unterstützung für die präfixierte Variante fallen zu lassen, wenn Unterstützung für die nicht präfixierte, standardmäßige Version hinzugefügt wurde. Letztendlich sahen sich Browser durch Kompatibilitätsprobleme unter Druck gesetzt, die Präfixe der anderen zu implementieren.
Da Safari und iOS-Browser schon immer die WebKit-Rendering-Engine verwendet haben, kam eine konsistente Reduzierung der Anzahl der Präfixe in diesen Browsern später.
Microsoft war nie "gung ho" beim Prefixen und hatte durchweg die wenigsten präfixierten Funktionen. Im Jahr 2019 wechselte Edge von seiner eigenen Rendering-Engine zu Blink. In einer lustigen Wendung erhöhte die Änderung tatsächlich die Anzahl der präfixierten Eigenschaften in Edge!
Funktionstrends
Die folgende Tabelle vergleicht die präfixierten Funktionen im Jahr 2013 (dem Höhepunkt des Prefixing) mit 2021.
Die Rohzahlen könnten überraschend sein. Die Anzahl der Funktionen, die eine Präfixierung erfordern, ist zwischen 2013 und 2021 um ca. 33 % gesunken. Diese Zahl erscheint mir ziemlich bescheiden.
Natürlich könnte es irreführend sein, sich nur auf Zahlen zu konzentrieren. Die Auswirkungen variieren. Es könnte sich um eine Familie von Eigenschaften handeln, die alle eine Präfixierung erfordern, wie z. B. animation; oder es könnte sich um eine Funktion handeln, die nur eine Eigenschaft oder einen Wert hat, der ein Präfix erfordert, wie z. B. user-select: none. Lassen Sie uns die tatsächlichen Funktionen untersuchen, um die Umstände besser zu verstehen, und beginnen Sie mit der Betrachtung dessen, was sich in der Zwischenzeit geändert hat.
Zwanzig Funktionen wurden nicht präfixiert (vollständig in den wichtigsten Browsern implementiert) und drei präfixierte Funktionen wurden eingeführt (backdrop-filter, CSS text-orientation und CSS initial-letter).
Meiner Meinung nach sind die bemerkenswertesten Funktionen, die jetzt nicht präfixiert sind und erhebliche Probleme darstellten:
- CSS Flexible Box Layout Module
- CSS3 Box Sizing
- CSS Animation
- CSS3 2D Transforms
- CSS3 3D Transforms
- CSS Filter Effects
Die übrigen 14 Funktionen sind weniger prominent
:any-link::placeholder::selection:focus-visible:is():read-only:read-writefont-feature-settingstext-align-lastwriting-mode- CSS
grabundgrabbingCursor - CSS Logical Properties (werden in Zukunft häufiger verwendet, da die Unterstützung jetzt besser ist)
- CSS3
zoom-inundzoom-outCursor - CSS3 Multiple Column Layout
Wenn Sie sich 2021 entscheiden, Internet Explorer 11 nicht zu unterstützen, dann sind zusätzlich sieben Funktionen nicht mehr präfixpflichtig. Das reduziert die Anzahl der Funktionen, die 2021 eine Präfixierung erfordern, auf 28, was einer Reduzierung von 46 % gegenüber 2013 entspricht.
Präfixierung im Jahr 2021
Betrachten wir die Eigenschaften, die eine Präfixierung erfordern. Das ist eine bunte Mischung!
| # | Name | Eigenschaften/Werte | Beschreibung | Präfix erforderlich | Nicht präfixierte Unterstützung | Präfixierte Unterstützung | Verbesserung durch Präfixe |
|---|---|---|---|---|---|---|---|
| 1 | appearance |
appearance |
Definiert, wie Elemente (insbesondere Formularsteuerelemente) standardmäßig aussehen. Wenn der Wert auf none gesetzt wird, wird das Standardaussehen des Elements mit anderen CSS-Eigenschaften neu definiert. |
|
69.80% | 97.03% | 27.23% |
| 2 | background-clip-text |
background-clip: text |
Nicht standardmäßige Methode zum Zuschneiden eines Hintergrundbilds auf den Vordergrundtext. |
|
3.89% | 96.65% | 92.76% |
| 3 | backdrop-filter |
backdrop-filter |
Methode zum Anwenden von Filtereffekten (wie blur, grayscale oder hue) auf Inhalte oder Elemente unterhalb des Zielelements. |
|
70.20% | 88.20% | 18.00% |
| 4 | background-image: crossfade() |
background-image: crossfade() |
Bildfunktion zum Erstellen eines "Crossfade" zwischen Bildern. Dies ermöglicht es einem Bild, basierend auf einem Prozentsatz in ein anderes zu überblenden. |
|
17.77% | 92.62% | 74.85% |
| 5 | background-image: image-set() |
background-image: image-set() |
Methode, die es dem Browser ermöglicht, das am besten geeignete CSS-Hintergrundbild aus einer Reihe von Bildern auszuwählen, hauptsächlich für Bildschirme mit hoher PPI. |
|
17.77% | 92.48% | 74.71% |
| 6 | box-decoration-break |
box-decoration-break |
Steuert, ob die Ränder, Rahmen, Abstände und andere Dekorationen des Kastens die gebrochenen Kanten der Kastenfragmente umschließen, wenn der Kasten durch einen Bruch, wie eine Seite, Spalte, Region oder Zeile, geteilt wird. |
|
6.39% | 97.17% | 90.78% |
| 7 | clip-path |
clip-path |
Methode zur Definition des sichtbaren Bereichs eines HTML-Elements mit SVG oder einer Formdefinition. |
|
72.00% | 96.33% | 24.33% |
| 8 | color-adjust |
color-adjust |
Eine nicht standardmäßige CSS-Erweiterung, die verwendet werden kann, um Hintergrundfarben und -bilder zum Drucken zu erzwingen. |
|
3.69% | 39.77% | 36.08% |
| 9 | element() |
background: element() |
Diese Funktion rendert ein Live-Bild, das aus einem beliebigen HTML-Element generiert wurde |
|
0.00% | 4.04% | 4.04% |
| 10 | font-kerning |
font-kerning |
Steuert die Verwendung des Abstands zwischen Buchstaben, die im Schriftartenspeicher gespeichert sind. Beachten Sie, dass dies nur OpenType-Schriftarten mit Kerning-Informationen betrifft, bei anderen Schriftarten hat es keine Auswirkung. |
|
81.73% | 96.03% | 14.30% |
| 11 | font-smooth |
font-smooth |
Steuert, wie Anti-Aliasing beim Rendern von Schriftarten angewendet wird. Obwohl diese Eigenschaft bereits in frühen Entwürfen der CSS3 Fonts-Spezifikation von 2002 vorhanden war, wurde sie inzwischen entfernt und befindet sich derzeit nicht auf dem Standard-Track. |
|
0.00% | 39.64% | 39.64% |
| 12 | hyphens |
hyphens |
Methode zur Steuerung, wann Wörter am Ende von Zeilen umgebrochen werden sollen. |
|
76.49% | 96.51% | 20.02% |
| 13 | initial-letter |
initial-letter |
Methode zur Erstellung eines vergrößerten Anfangsbuchstabens, einschließlich eines Drop- oder erhabenen Anfangsbuchstabens, auf robuste Weise. |
|
0.00% | 18.00% | 18.00% |
| 14 | line-clamp |
line-clamp |
Behält Text auf einer bestimmten Anzahl von Zeilen, wenn er in Kombination mit display: -webkit-box verwendet wird. Jeder Text, der den Platz überläuft, erzeugt Auslassungspunkte, wenn text-overflow: ellipsis enthalten ist. |
|
0.19% | 96.28% | 96.09% |
| 15 | position: sticky |
position: sticky |
Hält Elemente, die als "fixed" oder "relative" positioniert sind, je nachdem, wie sie im Viewport erscheinen. Infolgedessen ist das Element beim Scrollen "fest" an Ort und Stelle. |
|
93.50% | 95.36% | 1.86% |
| 16 | tab-size |
tab-size |
Methode zur Anpassung der Breite des Tabulatorzeichens. Nur wirksam in Verbindung mit white-space: pre oder white-space: pre-wrap. |
|
92.33% | 97.38% | 5.05% |
| 17 | text-decoration styling |
text-decorationtext-decoration-* Eigenschaften. |
Methode zur Definition von Art, Stil und Farbe von Linien in der text-decoration-Eigenschaft. Diese können als Kurzschrift (z. B. text-decoration: line-through dashed blue) oder als einzelne Eigenschaften (z. B. text-decoration-color: blue) definiert werden. |
|
80.25% | 94.86% | 14.61% |
| 18 | text-emphasis styling |
text-emphasistext-emphasis-* Eigenschaften |
Methode zur Verwendung kleiner Symbole neben jedem Glyphen, um eine Textpassage hervorzuheben, die üblicherweise in ostasiatischen Sprachen verwendet wird. Die Kurzschrift-Eigenschaft text-emphasis und ihre Bestandteile text-emphasis-style und text-emphasis-color können verwendet werden, um Markierungen am Text anzubringen. Die Eigenschaft text-emphasis-position, die separat vererbt wird, ermöglicht die Festlegung der Position von Hervorhebungsmarkierungen in Bezug auf den Text. |
|
21.96% | 95.99% | 74.03% |
| 19 | text-orientation |
text-orientation |
Gibt die Ausrichtung von Text innerhalb einer Zeile an. Aktuelle Werte wirken sich nur in vertikalen typografischen Modi aus (definiert mit der Eigenschaft writing-mode). |
Safari ( -webkit) |
90.88% | 94.84% | 3.96% |
| 20 | text-size-adjust |
text-size-adjust |
Steuert, ob und wie der Text-Inflationierungsalgorithmus auf den Textinhalt des Elements angewendet wird, auf das er angewendet wird. |
|
72.75% | 87.48% | 14.73% |
| 21 | user-select: none |
user-select |
Methode zur Verhinderung der Text- oder Elementauswahl. |
|
74.81% | 96.49% | 21.68% |
| 22 | CSS Canvas Drawings | background: -webkit-canvas(mycanvas) |
Methode zur Verwendung von HTML5 Canvas als Hintergrundbild. Derzeit nicht Teil einer Spezifikation. |
|
0.00% | 19.40% | 19.40% |
| 23 | CSS Masks | mask mask-* Eigenschaften |
Methode zur Anzeige eines Teils eines Elements, wobei ein ausgewähltes Bild als Maske verwendet wird. |
Teilweise Unterstützung in WebKit/Blink-Browsern bedeutet die Unterstützung der Eigenschaften |
4.18% | 96.93% | 92.75% |
| 24 | CSS Reflections | -webkit-box-reflect |
Methode zur Anzeige einer Reflexion eines Elements. |
|
0.00% | 91.20% | 91.20% |
| 25 | CSS Scrollbar Styling | scrollbar-colorscollbar-width |
Methoden zum Stylen von Scrollbarfarbe und -breite. |
|
4.28% | 96.87% | 92.59% |
| 26 | CSS Text Fill & Stroking | text-stroketext-stroke-* Eigenschaften |
Methode zur Deklaration der Breite und Farbe des Umrisses (Strich) für Text. |
|
0.00% | 96.65% | 96.65% |
| 27 | Intrinsic & Extrinsi Sizing | max-contentmin-contentfit-contentstretch (früher fill). |
Ermöglicht die Angabe von Höhe und Breite eines Elements in intrinsischen Werten anstelle von festen numerischen Werten. |
|
91.99% | 96.36% | 4.37% |
| 28 | Media Queries: Resolution Feature | @media (min-resolution: 300dpi) { … }, @media (max-resolution: 300dpi) { … } |
Ermöglicht die Einstellung einer Media Query basierend auf den vom Gerät verwendeten Pixel pro CSS-Einheit. Während die Standardversion min-resolution und max-resolution verwendet, unterstützen einige Browser die ältere, nicht standardmäßige Media Query device-pixel-ratio. |
Browser, die |
80.40% | 99.16% | 18.76% |
Nachdem ich diese Liste zusammengestellt hatte, war mein erster Eindruck, dass dies keine Dinge sind, auf die ich sehr oft stoßen würde. Einige Eigenschaften wurden nicht – und werden wahrscheinlich auch nicht – vollständig implementiert. Ich würde sagen, dass die element()-Funktion und CSS Canvas Drawings in diese Kategorie fallen. Safari hat kürzlich die Präfixierung für position: sticky fallen gelassen, sodass diese Liste sehr bald verschwinden wird.
Sie können die Liste eingrenzen und bestimmten Situationen ausweichen, wenn Sie möchten. Sie können sie abtun und sagen, es sei unwichtig, warum also die Mühe machen? Die Realität ist, dass die Liste immer noch lang genug ist, dass die manuelle Verwaltung von Präfixen in Ihrem Code nicht etwas ist, das Sie sich antun möchten. Eine relevante Frage, die Sie beantworten sollten, ist: Möchten Sie die Cross-Browser-Unterstützung auf ein hohes Niveau verbessern? Wenn die Antwort ja ist, sollten Sie dies als Teil Ihrer Entwicklungsbemühungen berücksichtigen.
Es ist auch wichtig zu bedenken, dass es nicht nur um diese Eigenschaften und aktuelle Browser geht. Es gibt immer noch Menschen, die ältere Geräte mit älteren Browsern verwenden, die die nicht präfixierten Versionen einiger Funktionen nicht unterstützen. Nehmen Sie zum Beispiel die Eigenschaft animation. Chrome war der letzte Browser, der sie 2015 entpräfixierte. Heute verwenden jedoch 1,3 % der Nutzer weltweit einen Browser, der die nicht präfixierte Version nicht unterstützt.
Ich bin kürzlich ein paar Mal auf Situationen gestoßen, die präfixierte Eigenschaften erforderten. Zum Beispiel habe ich einen Lesefortschrittsbalken für einen Blog erstellt und musste -webkit-appearance: none; und -moz-appearance: none; verwenden, um das Standarddesign für das progress-Element zurückzusetzen. Es benötigte auch eine Sticky-Positionierung, sodass ich position: sticky präfixieren musste, um die Sticky-Positionierung in Safari zu unterstützen.
Ein weiteres Beispiel? Ich wollte ein PNG-Bild als Maskenbild für ein weihnachtliches Design verwenden und stellte fest, dass -webkit-mask-image die einzige Eigenschaft ist, die richtig funktioniert. Masking ist im Allgemeinen etwas sprunghaft, da die meisten Browser die Spezifikation nur teilweise unterstützen.
Hier ist noch ein weiteres: Flavio Copes schrieb in „How to apply padding to multiple lines in CSS“ darüber, wie er die gleiche Abpolsterung auf jeder Zeile einer mehrzeiligen Überschrift haben wollte. Die Lösung war die Verwendung von box-decoration-break: clone. Die meisten Browser benötigen die -webkit-präfixierte Version dieser Eigenschaft, also müssen Sie diese verwenden.
Tools
Einige der Tools, die zur Lösung von Problemen mit Präfixen und Browserunterstützung entwickelt wurden, sind in Vergessenheit geraten. Ich würde empfehlen, zuerst zu prüfen, ob ein Tool auf dem neuesten Stand ist, bevor Sie es verwenden.
Sicherlich ist Autoprefixer (ein PostCSS-Plugin) gepflegt und verwendet Daten direkt von caniuse, um aktuell zu bleiben.
Emmet bietet ebenfalls hervorragende Präfixfunktionen. Insbesondere verfügt es über eine Einstellung css.autoInsertVendorPrefixes, um automatisch Präfixe für Sie einzufügen. Ich habe nicht überprüft, ob sie aktuell ist oder nicht, aber es ist erwähnenswert als Teil Ihrer Entwicklungsumgebung.
Da die meisten Code-Editoren Emmet unterstützen, erleichtert dies die Bearbeitung von präfixierten Eigenschaften erheblich. Emmet verfügt über einen Befehl CSS reflect value, der den Wert aller präfixierten Versionen derselben Eigenschaft in einer Regel aktualisiert. Weitere Informationen zu den Präfixfunktionen finden Sie in der Emmet-Dokumentation.
Fazit
Vendor-Prefixing ist leider nicht tot. Wir leben immer noch mit dem Erbe. Gleichzeitig können wir dankbar sein, dass präfixierte Funktionen stetig abnehmen. Browserhersteller haben gute Arbeit geleistet, um präfixierte Funktionen durch nicht präfixierte Funktionen zu ersetzen. Dies hat die Hauptlast von den Entwicklern genommen.
Es kann jedoch vorkommen, dass Sie immer wieder auf Szenarien stoßen, die Präfixe erfordern. Und wenn Sie so viele Browser wie möglich unterstützen möchten, sollten Sie eine Auto-Prefixing-Strategie verfolgen.
Wir hätten niemals Vendor-Präfixe für W3-Spezifikationen verwenden dürfen. Es hätte eher etwas wie
-d1-*sein sollen, wobei d1 für Draft 1 steht und der Browser den Draft 1-Standard erfüllt hat. Erst wenn der Browser abweicht, macht ein Vendor-Präfix Sinn.text-orientationundfont-kerningbenötigen kein Präfix mehr– https://github.com/Fyrd/caniuse/pull/5887
– https://github.com/Fyrd/caniuse/pull/5888
:)
Gut gemacht! Schön zu sehen, dass Safari sich dem annimmt
https://preset-env.cssdb.org/ ist ein großartiges Werkzeug für die wenigen Vendor-Präfixe, die noch benötigt werden.
Und auch Polyfills für super neue moderne CSS, die noch nicht vollständig unterstützt werden.
Danke für die Teilung, Sean. Es sieht aus wie eine praktische All-in-One-Lösung. Ich wusste nicht, dass es auch Präfixe abdeckt. Es sieht so aus, als würde es Autoprefixer im Hintergrund verwenden. Ich werde es für ein zukünftiges Projekt ausprobieren.