CSS différents navigateurs

Performances CSS et solutions dans différents navigateurs

CSS est un élément indispensable de la conception Web. Il peut apporter une amélioration visuelle et une expérience interactive aux pages Web. Cependant, en raison des différents noyaux des différents navigateurs, les performances du CSS dans les différents navigateurs sont également différentes, ce qui pose de grands défis aux concepteurs Web. Cet article discutera des performances et des solutions de CSS dans différents navigateurs.

I. Performances du CSS dans différents navigateurs

1. Différences dans les modèles de boîte

En CSS, le modèle de boîte est l'un des concepts les plus fondamentaux. Le modèle de boîte peut être divisé en modèle de boîte W3C et en modèle de boîte IE. La similitude entre les deux modèles de boîte est qu'ils sont composés de quatre parties : contenu, remplissage, bordure et marge. La différence réside dans la manière dont ils calculent le modèle de boîte.

Le modèle de boîte W3C est le modèle de boîte standard. Il calcule la largeur et la hauteur en tant que largeur et hauteur de la zone de contenu, et le remplissage et les bordures sont ajoutés en plus de la largeur et de la hauteur. Le modèle de boîte IE calcule la largeur et la hauteur comme la somme de la zone de contenu, du remplissage et des bordures.

De cette façon, le même code CSS peut produire des résultats différents selon l'analyse de différents navigateurs. Par exemple :

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

Dans le modèle de boîte W3C, la largeur de cet élément est de 200 px, la hauteur est de 200 px, le remplissage, c'est-à-dire la somme du remplissage gauche et droit et du remplissage supérieur et inférieur est de 40 px, et le la bordure est de 1 px, donc la largeur de l'élément entier est de 242 px avec une hauteur de 242 px. Dans le modèle de boîte IE, cet élément a une largeur de 200 px, une hauteur de 200 px, un remplissage de 40 px et une bordure de 1 px, donc l'élément entier a une largeur de 282 px et une hauteur de 282 px.

2. Compatibilité des styles

Toutes les propriétés et styles CSS ne sont pas pris en charge sur tous les navigateurs. Par exemple, certaines propriétés CSS3 nouvellement ajoutées ne fonctionnent pas sur les anciennes versions des navigateurs IE. Cela peut entraîner un mauvais affichage des pages Web sur certains navigateurs sans tests multi-navigateurs.

Par exemple :

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

Sur les navigateurs prenant en charge l'attribut border-radius, cet élément sera affiché sous la forme d'un cercle, tandis que sur les navigateurs qui ne prennent pas en charge cet attribut, l'élément sera toujours un carré.

3. Rendu du texte

Différents navigateurs peuvent rendre le texte différemment. Certains navigateurs mettront les polices en gras, d'autres les compresseront et d'autres encore les étireront.

Par exemple :

p {
  font-weight: bold;
}

Les polices peuvent également être rendues différemment selon les navigateurs. Dans certains navigateurs, cet élément peut apparaître en gras et dans certains navigateurs, l'épaisseur de la police peut changer légèrement, provoquant un effet incohérent.

II. Solutions au CSS dans différents navigateurs

1. Utiliser la réinitialisation du style du navigateur

La réinitialisation du style du navigateur signifie utiliser CSS pour modifier tous les styles CSS par défaut, tels que les polices, les hauteurs de ligne, les marges, etc. afficher le même effet dans tous les navigateurs.

Par exemple, ce qui suit est un code de réinitialisation du style de navigateur dans 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;
}

Après avoir réinitialisé le style par défaut du navigateur, puis défini un style personnalisé, vous pouvez obtenir le même effet dans différents navigateurs.

2. Utilisez le précompilateur CSS

Le précompilateur CSS peut simplifier le processus d'écriture de CSS et, en même temps, il peut fournir certaines fonctions avancées telles que la saisie semi-automatique du navigateur, les variables et les fonctions, créant ainsi le code CSS. plus maintenable et plus lisible.

Les précompilateurs CSS courants incluent LESS, SASS et Stylus. Par exemple, lors de l'écriture de code CSS à l'aide de SASS, vous pouvez utiliser la directive @import pour fusionner plusieurs fichiers CSS en un seul fichier, de sorte qu'une seule requête HTTP doive être envoyée lors du chargement de ce fichier dans le navigateur, améliorant ainsi la vitesse de chargement des pages.

3. Utilisez les préfixes du navigateur de manière appropriée

Afin d'obtenir les derniers effets CSS, nous devons utiliser certaines des dernières propriétés CSS, mais ces propriétés peuvent ne pas être prises en charge par tous les navigateurs, les préfixes du navigateur doivent donc être utilisés de manière appropriée. Le préfixe du navigateur fait référence à l'ajout des préfixes propres à certains navigateurs avant les propriétés CSS, afin que le navigateur puisse obtenir ses propres effets uniques sur certaines propriétés CSS.

Par exemple :

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

Dans cet exemple, -webkit-box-shadow, -moz-box-shadow et box-shadow sont toutes les mêmes propriétés, juste avec des préfixes de navigateur différents, de sorte que différents navigateurs Le navigateur a le sien manière d’analyser et d’afficher cet attribut.

Résumé

Les performances incohérentes du CSS dans les différents navigateurs posent de grands défis aux concepteurs Web. Cependant, en utilisant la réinitialisation du style du navigateur, le précompilateur CSS et l'utilisation appropriée des préfixes du navigateur, nous pouvons mieux résoudre ce problème, afin d'obtenir le même effet que les pages Web affichées dans différents navigateurs.

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!