CSS verschiedene Browser

CSS-Leistung und -Lösungen in verschiedenen Browsern

CSS ist ein unverzichtbarer Bestandteil des Webdesigns. Es kann Webseiten visuell verbessern und ein interaktives Erlebnis bieten. Aufgrund der unterschiedlichen Kernel verschiedener Browser ist jedoch auch die Leistung von CSS in verschiedenen Browsern unterschiedlich, was Webdesigner vor große Herausforderungen stellt. In diesem Artikel werden die Leistung und Lösungen von CSS in verschiedenen Browsern erläutert.

I. Leistung von CSS in verschiedenen Browsern

1. Unterschiede bei Boxmodellen

In CSS ist das Boxmodell eines der grundlegendsten Konzepte. Das Box-Modell kann in das W3C-Box-Modell und das IE-Box-Modell unterteilt werden. Die Ähnlichkeit zwischen den beiden Boxmodellen besteht darin, dass sie aus vier Teilen bestehen: Inhalt, Polsterung, Rand und Rand. Der Unterschied liegt in der Art und Weise, wie das Boxmodell berechnet wird.

Das W3C-Boxmodell ist das Standardboxmodell. Es berechnet Breite und Höhe als Breite und Höhe des Inhaltsbereichs, und zusätzlich zur Breite und Höhe werden Polsterung und Ränder hinzugefügt. Das IE-Boxmodell berechnet Breite und Höhe als Summe aus Inhaltsbereich, Innenabstand und Rändern.

Auf diese Weise kann derselbe CSS-Code beim Parsen verschiedener Browser zu unterschiedlichen Ergebnissen führen. Beispiel:

.box {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 1px solid #000;
}

Im W3C-Boxmodell beträgt die Breite dieses Elements 200 Pixel, die Höhe 200 Pixel, der Abstand, dh die Summe aus linkem und rechtem Abstand sowie oberem und unterem Abstand, beträgt 40 Pixel Der Rand ist 1 Pixel groß, daher beträgt die Breite des gesamten Elements 242 Pixel und die Höhe 242 Pixel. Im IE-Box-Modell hat dieses Element eine Breite von 200 Pixel, eine Höhe von 200 Pixel, einen Abstand von 40 Pixel und einen Rand von 1 Pixel, sodass das gesamte Element eine Breite von 282 Pixel und eine Höhe von 282 Pixel hat.

2. Stilkompatibilität

Nicht alle CSS-Eigenschaften und -Stile werden von allen Browsern unterstützt. Einige neu hinzugefügte CSS3-Eigenschaften funktionieren beispielsweise nicht auf älteren Versionen von IE-Browsern. Dies kann dazu führen, dass Webseiten in einigen Browsern ohne browserübergreifende Tests nicht richtig dargestellt werden.

Zum Beispiel:

.box {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

In Browsern, die das Attribut „border-radius“ unterstützen, wird dieses Element als Kreis angezeigt, während in Browsern, die dieses Attribut nicht unterstützen, das Element weiterhin ein Quadrat ist.

3. Textwiedergabe

Verschiedene Browser können Text unterschiedlich darstellen. Einige Browser machen Schriftarten fett, andere komprimieren Schriftarten und andere strecken Schriftarten.

Zum Beispiel:

p {
  font-weight: bold;
}

Schriftarten können in verschiedenen Browsern unterschiedlich gerendert werden. In einigen Browsern wird dieses Element möglicherweise fett angezeigt und in einigen Browsern kann sich die Schriftstärke geringfügig ändern, was zu einem inkonsistenten Effekt führt.

II. Lösungen für CSS in verschiedenen Browsern

1. Browser-Stil zurücksetzen bedeutet, dass alle Standard-CSS-Stile wie Schriftarten, Zeilenhöhen, Ränder usw. auf den gleichen Wert zurückgesetzt werden zeigen in allen Browsern den gleichen Effekt an.

Das Folgende ist beispielsweise ein Code zum Zurücksetzen des Browserstils in normalize.css:

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article,
aside,
header,
nav,
section {
  display: block;
}

h1 {
  font-size: 2em;
  margin: .67em 0;
}

figcaption,
figure,
main {
  display: block;
}

figure {
  margin: 1em 40px;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

Nachdem Sie den Standardstil des Browsers zurückgesetzt und dann einen benutzerdefinierten Stil festgelegt haben, können Sie in verschiedenen Browsern den gleichen Effekt erzielen.

2. Verwenden Sie den CSS-Precompiler

Der CSS-Precompiler kann das Schreiben von CSS vereinfachen und gleichzeitig einige erweiterte Funktionen wie die automatische Vervollständigung des Browsers, Variablen und Funktionen bereitstellen und so den CSS-Code erstellen wartbarer und lesbarer.

Zu den gängigen CSS-Precompilern gehören LESS, SASS und Stylus. Wenn Sie beispielsweise CSS-Code mit SASS schreiben, können Sie mit der @import-Direktive mehrere CSS-Dateien in einer Datei zusammenführen, sodass beim Laden dieser Datei im Browser nur eine HTTP-Anfrage gesendet werden muss, was die Seitenladegeschwindigkeit verbessert.

3. Browser-Präfixe entsprechend verwenden

Um die neuesten CSS-Effekte zu erzielen, müssen wir einige der neuesten CSS-Eigenschaften verwenden. Diese Eigenschaften werden jedoch möglicherweise nicht von allen Browsern unterstützt, daher müssen Browser-Präfixe ordnungsgemäß verwendet werden. Unter Browser-Präfix versteht man das Hinzufügen einiger Browser-eigener Präfixe vor den CSS-Eigenschaften, sodass der Browser seine eigenen einzigartigen Effekte auf bestimmte CSS-Eigenschaften erzielen kann.

Zum Beispiel:

.box {
  -webkit-box-shadow: 0px 0px 4px 4px #000;
  -moz-box-shadow: 0px 0px 4px 4px #000;
  box-shadow: 0px 0px 4px 4px #000;
}

In diesem Beispiel sind -webkit-box-shadow, -moz-box-shadow und box-shadow alle die gleichen Eigenschaften, nur mit unterschiedlichen Browser-Präfixen, sodass unterschiedliche Browser ihren eigenen Browser haben Art, dieses Attribut zu analysieren und anzuzeigen.

Zusammenfassung

Die inkonsistente Leistung von CSS in verschiedenen Browsern stellt Webdesigner vor große Herausforderungen. Durch die Verwendung des Browser-Stil-Resets, des CSS-Precompilers und der entsprechenden Verwendung von Browser-Präfixen können wir dieses Problem jedoch besser lösen, um den gleichen Effekt bei der Anzeige von Webseiten in verschiedenen Browsern zu erzielen.

Das obige ist der detaillierte Inhalt vonCSS verschiedene Browser. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!