Pourquoi CSS3 doit-il être préfixé ?

Étant donné que CSS3 n'est pas encore devenu un véritable standard, de nombreux navigateurs ont différents niveaux de prise en charge, et chaque fabricant de navigateur prend en charge le même style de différentes manières, un préfixe doit donc être ajouté pour assurer la compatibilité entre les navigateurs. Le préfixe CSS3 est utilisé pour garantir que les nouvelles propriétés peuvent être reconnues et prendre effet sous un moteur de rendu de navigateur spécifique.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Les étudiants qui ont utilisé les attributs CSS3 savent que les attributs CSS3 doivent être préfixés par chaque navigateur. Même maintenant, de nombreux attributs doivent encore être préfixés. Pourquoi est-ce ?

Les fabricants de navigateurs ont déjà implémenté CSS3, mais ce n'est pas encore devenu un véritable standard.

Étant donné que de nombreuses propriétés de CSS3 n'ont pas encore été déterminées, la spécification standard n'a pas encore été publiée, de nombreux navigateurs ont différents niveaux de support et chaque fabricant de navigateur prend en charge différentes méthodes d'écriture pour le même style, des préfixes doivent donc être ajoutés pour atteindre Chaque navigateur est compatible. Si les spécifications sont unifiées à l'avenir, il ne sera pas nécessaire d'écrire un préfixe.

Le préfixe css3 est utilisé pour garantir que cet attribut peut être reconnu et efficace sous un moteur de rendu de navigateur spécifique.

préfixe	navigateur	noyau
-ms-	navigateur IE	noyau Trident
-moz-	Fire renard	Gecko Core
- o-	Opera	Noyau Presto
-webkit-	Chrome et Safari	Noyau Webkit

Il existe de nombreux préfixes privés qui peuvent être omis, mais afin d'être compatible avec les anciennes versions des navigateurs, Vous pouvez toujours utiliser des préfixes privés et des méthodes standard et effectuer une transition progressive.

Regardons un exemple simple. Pour écrire un rayon de bordure arrondi au début, vous devez l'écrire comme ceci :

.box {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
}

Ceux-ci sont pour la compatibilité avec l'ancienne version d'écriture. Le navigateur ne prend pas en charge la nouvelle. attributs, ce qui entraîne une expérience utilisateur réduite ; comparer Les nouvelles versions des navigateurs prennent directement en charge l'écriture : border-radius.

L'utilisation du préfixe peut bien correspondre à la version inférieure du navigateur et afficher le style normalement.

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!