4 Lösungen für CSS-Browserkompatibilitätsprobleme

Frontend ist ein harter Job, nicht nur weil sich die Technologie schnell aktualisiert, sondern auch, weil es so viele Dinge gibt, die Sie wissen müssen. Noch problematischer ist, dass Sie mit verschiedenen Anpassungs- und Kompatibilitätsproblemen konfrontiert sind.

Warum gibt es Probleme mit der Browserkompatibilität?

Liegt es nicht daran, dass es zu viele Browserhersteller gibt?

Chrome, Firefox, Safari, Edge, IE6, IE7, IE8, IE9 ... 360 Safe Browser, QQ Browser, The World, TT, Sogou, Opera, Maxthon ...

Der Schlüssel liegt darin, dass verschiedene Hersteller oder sogar verschiedene Versionen desselben Herstellers inkonsistente Analyseeffekte auf denselben CSS-Abschnitt haben, was zu inkonsistenten Seitenanzeigeeffekten führt und auch Kompatibilitätsprobleme mit sich bringt.

Wie sehr wünsche ich mir, dass Chrome die Welt beherrschen könnte~~

Aktuelle Marktanteile der einzelnen Browser

Es gibt so viele Browser und wir können unmöglich mit jedem davon kompatibel sein. Für Produkte mit durchschnittlicher Benutzerbasis ist es schon sehr gut, wenn wir uns an Mainstream-Browser anpassen können.

Laut den Daten des Baidu Traffic Research Institute von August 2018 bis Februar 2019 beträgt der Anteil von Chrome 46,28 %, und der Anteil von IE ist immer noch groß. Es ist noch ein weiter Weg.

Lösungen und Lösungen für CSS-Browserkompatibilitätsprobleme

Heute möchte ich nicht zu sehr ins Detail gehen, etwa darauf, mit welchen CSS-Stilen wir kompatibel sein müssen. Stattdessen möchte ich die große Lösung diskutieren, die hauptsächlich vier Aspekte umfasst: Initialisierung des Browser-CSS-Stils, private Browsereigenschaften, CSS-Hack-Syntax und Automatisierungs-Plugins.

1. Initialisierung des Browser-CSS-Stils

Da die Standard-CSS-Stile jedes Browsers unterschiedlich sind, besteht die einfachste und effektivste Methode darin, sie zu initialisieren. Ich glaube, viele Freunde haben solchen Code geschrieben. Bevor alle CSS gestartet werden, setzen Sie Marin und Padding auf 0, um unterschiedliche Anzeigeeffekte in verschiedenen Browsern zu vermeiden.

*{ 
 Rand: 0; 
 Polsterung: 0; 
}

Wenn Sie keine Erfahrung mit der Initialisierung des Browser-CSS-Stils haben, wissen Sie möglicherweise nicht, was Sie initialisieren sollen. Hier empfehle ich eine Bibliothek, Normalize.css, die auf GitHub fast 34.000 Sterne hat. Ich zeige Ihnen einige Stileinstellungen, wie folgt

html { 
 line-height: 1.15; /* Korrigiere die Zeilenhöhe in allen Browsern */ 
 -webkit-text-size-adjust: 100 %; /* Verhindert Anpassungen der Schriftgröße nach Ausrichtungsänderungen in iOS. */ 
} 
 
Körper { 
 Rand: 0; 
} 
 
A { 
 Hintergrundfarbe: transparent; /* Entfernt den grauen Hintergrund aktiver Links in IE 10. */ 
} 
 
img { 
 border-style: none; /* Entfernt den Rahmen um Bilder innerhalb von Links in IE 10. */ 
}

Ich glaube, dass viele häufige Kompatibilitätsprobleme durch die Initialisierung im CSS-Stil gelöst werden können. Als nächstes werfen wir einen Blick auf die privaten Eigenschaften des Browsers.

2. Private Browsereigenschaften

Wir fügen vor einer CSS-Eigenschaft häufig einige Präfixe hinzu, z. B. -webkit-, -moz-, -ms-. Dies sind private Eigenschaften des Browsers.

Warum erscheinen private Attribute? Dies liegt daran, dass das W3C, die Organisation, die HTML- und CSS-Standards entwickelt, sehr langsam arbeitet.

Normalerweise schlägt ein Mitglied der W3C-Organisation ein neues Attribut wie Border-Radius vor und alle halten es für eine gute Idee. Allerdings muss das W3C einen sehr komplizierten Prozess durchlaufen, einschließlich Überprüfung, um den Standard zu formulieren. Browser-Anbieter haben für die Vermarktung einen engen Zeitrahmen, d. h. wenn eine Funktion ausgereift genug ist, fügen sie im Browser Unterstützung dafür hinzu.

Um jedoch Änderungen zu vermeiden, wenn W3C den Standard in Zukunft veröffentlicht, wird ein privates Präfix hinzugefügt, z. B. -webkit-border-radius, um neue Eigenschaften im Voraus zu unterstützen. Nachdem das W3C den Standard veröffentlicht und die Standardschreibweise für den Rahmenradius festgelegt hat, wird die neue Version des Browsers diese Schreibmethode für den Rahmenradius unterstützen. Gängige Präfixe sind:

• -moz stellt die privaten Eigenschaften des Firefox-Browsers dar
• -ms stellt die privaten Attribute des IE-Browsers dar
• -webkit repräsentiert private Attribute von Chrome und Safari
• -o steht für private Opera-Attribute

Achten Sie auf die Reihenfolge der privaten Attribute, setzen Sie die Standardmethode ans Ende und die kompatible Methode an den Anfang

-webkit-transform:rotate(-3deg); /*Für Chrome/Safari*/ 
 -moz-transform:rotate(-3deg); /*Für Firefox*/ 
 -ms-transform:rotate(-3deg); /*für IE*/ 
 -o-transform:rotate(-3deg); /*Für Opera*/ 
 transformieren: drehen (-3 Grad);

Das Schreiben so vieler Kompatibilitätscodes für jede CSS-Eigenschaft ist zweifellos die größte Lebensverschwendung. Später werden wir darüber sprechen, wie dies durch automatische Plug-Ins bewältigt werden kann.

3. CSS-Hack

Manchmal müssen wir spezifische CSS-Stile für verschiedene Browser oder verschiedene Versionen schreiben. Dieser Vorgang des Schreibens entsprechenden CSS-Codes für verschiedene Browser/verschiedene Versionen wird CSS-Hack genannt!

Es gibt drei Möglichkeiten, CSS-Hacks zu schreiben: bedingte Hacks, Hacks auf Attributebene und Hacks auf Selektorebene.

Bedingter Hack

Der bedingte Hack nimmt hauptsächlich einige spezielle Einstellungen für den IE-Browser vor

Grammatik:

<!--[wenn <Schlüsselwörter>? IE <Version>?]> 
 Codeblock, kann HTML, CSS, JS sein 
<![endif]-->

Wert

Schlagwörter

Die folgende Bedingung umfasst 6 Auswahlmethoden: ob, größer als, größer als oder gleich, kleiner als, kleiner als oder gleich, nicht angegebene Version

Ob: Gibt an, ob es sich um den IE oder eine bestimmte Version des IE handelt. Schlagwort: leer

Größer als: Wählen Sie IE-Versionen aus, die größer als die angegebene Version sind. Schlüsselwort: gt (größer als)

Größer als oder gleich: Wählen Sie IE-Versionen aus, die größer oder gleich der angegebenen Version sind. Schlüsselwort: gte (größer als oder gleich)

Kleiner als: Wählen Sie IE-Versionen aus, die kleiner als die angegebene Version sind. Schlüsselwort: lt (kleiner als)

Kleiner oder gleich: Wählen Sie IE-Versionen aus, die kleiner oder gleich der angegebenen Version sind. Stichwort: lte (kleiner als oder gleich)

Nicht angegebene Versionen: Wählen Sie alle IE-Versionen außer der angegebenen Version aus. Schlüsselwörter: !

Version

IE-Browserversion, z. B. 6, 7, 8

Die Funktion für bedingte Kommentare wurde in IE10 und höher entfernt. Seien Sie daher bei der Verwendung vorsichtig.

Beispiel

<!--[wenn IE]> 
 <p>Sie werden mich in anderen Sprachen als IE nicht sehen</p> 
<![endif]--> 
 
<!--[wenn IE]> 
<Stil> 
 .test{Farbe:rot;} 
</Stil> 
<![endif]--> 
 
<!--[wenn IE 9]> 
 <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
 <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> 
<![endif]-->

Hack auf Attributebene

Beim Attribut-Hack werden vor den Attributnamen des CSS-Stils einige Hack-Präfixe hinzugefügt, die nur bestimmte Browser erkennen können.

Grammatik:

Selektor{<hack>?Eigenschaft:Wert<hack>?;}

Wert:

: Wählen Sie IE6 und darunter. Ein Bindestrich (-) kann ebenfalls verwendet werden. Um jedoch Verwechslungen bei einigen Eigenschaften mit Bindestrich zu vermeiden, ist die Verwendung eines Unterstrichs () sinnvoller.

: Wählen Sie IE7 und darunter. Es können sowohl (+) als auch (#) verwendet werden, aber () ist in der Branche beliebter

9. Wählen Sie IE6+

:Wählen Sie Browser unter IE8+ und Opera15

Beispiel

Wenn Sie in verschiedenen IE-Browsern unterschiedliche Farben einstellen möchten, achten Sie auf die Reihenfolge: Setzen Sie die Kompatibilität der niedrigeren Version ans Ende

.prüfen {
 Farbe: #0909; /* Für IE8+ */
 *Farbe: #f00; /* Für IE7 und früher */
 _color: #ff0; /* Für IE6 und früher */
}

Wähle den Runenlevel-Hack aus

Hacks auf Selektorebene werden verwendet, um CSS-Selektoren zu hacken, indem Präfixe hinzugefügt werden, die nur bestimmte Browser erkennen können. Damit werden Browser angesprochen, die eine inkonsistente Seitenleistung aufweisen oder eine besondere Behandlung erfordern.

Grammatik:

<hack> Selektor{ sRules }

Wert: Zu den üblichen Hacks auf Selektorebene gehören

Das Präfix *html* ist nur für IE6 gültig
*+html *+ Präfix ist nur für IE7 wirksam
@media screen\9{...} ist nur für IE6/7 wirksam
@media \0screen {body { background: red; }} ist nur für IE8 gültig
@media \0screen\,screen\9{body { background: blue; }} ist nur gültig für IE6/7/8
@media screen\0 {body { background: green; }} ist nur gültig für IE8/9/10
@media screen and (min-width:0\0) {body { background: gray; }} ist nur gültig für IE9/10
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} ist nur für IE10 gültig

Beispiel:

* html .test { color: #090; } /* Für IE6 und früher */ 
* + html .test { color: #ff0; } /* Für IE7 */

Wenn ich das sehe, muss ich stolz auf das Front-End-Personal sein. Das ist zu schwierig ~~

Der große Aufwand zur Lösung dieser Kompatibilitätsprobleme bringt uns jedoch keine großen technologischen Verbesserungen. Es ist nichts weiter als das Füllen von Lücken bei verschiedenen Browserherstellern. Mit der Zeit wird der Wert dieser Technologien immer geringer. Der Schlüssel liegt darin, CSS-Kompatibilitätsprobleme mit möglichst geringem Aufwand zu lösen und mehr Zeit für ein besseres Leben zu haben. Glücklicherweise gibt es einige automatisierte Plug-Ins, die uns dabei helfen können, die aufwändige Kompatibilitätsverarbeitung loszuwerden.

4. Automatisierungs-Plugin

Autoprefixer ist ein Plug-in, das Browserpräfixe automatisch verwaltet. Es kann CSS-Dateien analysieren und Browserpräfixe zu CSS-Inhalten hinzufügen. Dabei werden Daten von Can I Use (Caniuse-Website) verwendet, um zu bestimmen, welche Präfixe benötigt werden.

Nachdem Sie Autoprefixer zu Ihrem Asset-Building-Tool (z. B. Grunt) hinzugefügt haben, können Sie CSS-Präfixe vollständig vergessen und CSS einfach normal gemäß den neuesten W3C-Spezifikationen schreiben. Wenn das Projekt ältere Browser unterstützen muss, können Sie die Parametereinstellungen des Browsers ändern.

//Der Code, den wir geschrieben haben div { 
 transformieren: drehen (30 Grad); 
} 
 
// Code für die automatische Vervollständigung. Die konkrete Vervollständigung hängt von der Browserversion ab, um kompatibel zu sein. Sie können sie selbst festlegen. div { 
 -ms-transform:drehen(30Grad); 
 -webkit-transform: drehen (30 Grad); 
 -o-transform: drehen (30 Grad); 
 -moz-transform:drehen(30Grad); 
 transformieren: drehen (30 Grad); 
}

Derzeit verfügen webpack, gulp und grunt über entsprechende Plug-ins. Wenn Sie diese noch nicht verwendet haben, wenden Sie sie so schnell wie möglich auf unser Projekt an. Lassen Sie sich von der CSS-Kompatibilität nicht die Zeit verschwenden!

Damit ist dieser Artikel über 4 Lösungen für CSS-Browserkompatibilitätsprobleme abgeschlossen. Weitere relevante Inhalte zur CSS-Browserkompatibilität finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!