Was ist die Präfixverwendung von CSS3?-Front-End-Fragen und Antworten-php.cn

Was ist die Präfixverwendung von CSS3?

WBOY

Freigeben： 2022-01-24 14:26:10

Original

2187 Leute haben es durchsucht

In CSS3 wird das Präfix verwendet, um mit der Attributunterstützung verschiedener Browser kompatibel zu sein. Browserhersteller fügen vor dem Attribut ein privates Präfix hinzu, um neue Attribute zu unterstützen, da der Kern „-webkit“ hinzufügt -“ vor dem Attribut. Präfix, die Syntax lautet „-webkit-property:property value;“, Browser mit unterschiedlichen Kerneln fügen unterschiedliche Präfixe hinzu.

Was ist die Präfixverwendung von CSS3?

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

Was ist die Verwendung von Präfixen in CSS3? Um mit der Attributunterstützung verschiedener Browser in CSS kompatibel zu sein, fügen Browserhersteller vor dem Attribut ein privates Präfix hinzu, um neue Attribute mit dem Präfix „-webkit“ zu unterstützen -“ kann verwendet werden in Es kann normalerweise in Browsern mit Webkit als Kern verwendet werden, wie z. B. „Safari“- und „Chrome“-Browser.

1, -moz-repräsentiert die privaten Eigenschaften des Firefox-Browsers

2, -ms-repräsentiert die privaten Eigenschaften des IE-Browsers

3, -webkit-repräsentiert die privaten Eigenschaften von Safari und Chrome

4, - o-repräsentiert Opera

Diese dienen der Kompatibilität mit älteren Versionen von Schreibmethoden. Neuere Versionen von Browsern unterstützen direktes Schreiben: border-radius.

Internet Explorer 9+ unterstützt die Eigenschaften „Border-Radius“ und „Box-Shadow“.

Firefox, Chrome und Safari unterstützen alle neuen Randeigenschaften.

Für Randbild: Safari 5 und älter erfordern das Präfix -webkit-.

Opera unterstützt die Eigenschaften border-radius und box-shadow, für border-image ist jedoch das Präfix -o- erforderlich.

Ein Beispiel ist wie folgt:

<html>
<head>
<style> 
div
{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Nach dem Login kopieren

Warum brauchen wir ein privates Präfix? Denn das W3C, die Organisation, die HTML- und CSS-Standards formuliert, ist sehr langsam. Normalerweise schlägt ein Mitglied der W3C-Organisation ein neues Attribut vor, z. B. einen abgerundeten Randradius, und alle halten es für gut. W3c legt jedoch keinen Standard für dieses Attribut fest, sondern durchläuft einen sehr komplizierten Prozess und durchläuft einen viele Bewertungen.

Browser-Anbieter sind nicht bereit, so lange zu warten. Wenn sie der Meinung sind, dass ein Attribut ausgereift genug ist, werden sie den Browser unterstützen. Um jedoch Änderungen zu vermeiden, wenn W3C den Standard in Zukunft ankündigt, wird ein privates Präfix hinzugefügt, z. B. -webkit-border-radius, um neue Attribute im Voraus zu unterstützen. Wenn W3C den Standard in Zukunft ankündigt, wird die Standardschreibmethode verwendet border-radius ist eingerichtet und die neue Version des Browsers unterstützt die Border-Radius-Schreibmethode.

Zum Beispiel erkennt Chrome 10 den Border-Radius nicht und kann nur den Webkit-Border-Radius verwenden, Chrome 12 kann ihn jedoch erkennen. Wenn Sie also CSS schreiben, kann eine solche Schreibweise sicherstellen, dass sowohl Chrome10 als auch Chrome12 beim Surfen im Internet korrekt angezeigt werden.

Derzeit gibt es viele private Präfixe, die weggelassen werden können, aber um mit älteren Browserversionen kompatibel zu sein, können Sie weiterhin private Präfixe und Standardmethoden verwenden und schrittweise umsteigen

(Lernvideo-Sharing:

CSS-Video-Tutorial

)

Das obige ist der detaillierte Inhalt vonWas ist die Präfixverwendung von CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!