Quelles sont les façons de gérer la compatibilité CSS ?

Les méthodes de traitement de compatibilité CSS incluent : 1. Initialiser le style ; 2. Ajouter des attributs privés du navigateur, tels que [-moz] représente les attributs privés du navigateur Firefox 3. Utiliser des plug-ins automatisés, tels que la gestion automatique de Plug-in de navigation pour préfixer Autoprefixer.

Méthode de traitement :

1. Initialisation du style

(vidéo d'apprentissage recommandée : tutoriel vidéo CSS)

Le style CSS par défaut de chaque navigateur est différent, donc le moyen le plus simple et le plus efficace est de l'initialiser

* { 
  margin: 0; 
  padding: 0; 
}

Si vous ne savez pas quoi initialiser, nous vous recommandons une initialisation Bibliothèque de style CSS normalize.css, sélectionnez et affichez plusieurs paramètres de style, comme suit :

html { 
  line-height: 1.15; /* Correct the line height in all browsers */
  -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */
} 
  
body { 
  margin: 0; 
} 
  
a { 
  background-color: transparent; /* Remove the gray background on active links in IE 10. */
} 
  
img { 
  border-style: none; /* Remove the border on images inside links in IE 10. */
}

2. Ajoutez des attributs privés du navigateur

-moz- représente les attributs privés du navigateur Firefox

-ms- représente les propriétés privées du navigateur IE

-webkit- représente les propriétés privées de Chrome et Safari

-o- représente les propriétés privées d'opéra

Faites attention à l'ordre des propriétés privées , mettez l'écriture standard à la fin et l'écriture de compatibilité au début

-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/
transform:rotate(-3deg);

3. Utilisez des plug-ins d'automatisation

Autoprefixer est un plug-in qui gère automatiquement les préfixes du navigateur. Ajouter un préfixe automatique à la ressource. construction Après avoir utilisé des outils (tels que Grunt), vous pouvez complètement oublier les préfixes CSS et simplement écrire du CSS normalement selon les dernières spécifications du W3C

//我们编写的代码 
div { 
 transform: rotate(30deg); 
} 
  
// 自动补全的代码，具体补全哪些由要兼容的浏览器版本决定，可以自行设置 
div { 
 -ms-transform: rotate(30deg); 
 -webkit-transform: rotate(30deg); 
 -o-transform: rotate(30deg); 
 -moz-transform: rotate(30deg); 
 transform: rotate(30deg); 
}

La configuration de postcss-loader et postcss-preset-env dans webpack peut également être done Gérer les problèmes de compatibilité

module: {
  rules: [{
    test: /\.css$/,
    use: [
      // 这个 loader 取代 style-loader。作用：提取 js 中的 css 成单独文件 
      MiniCssExtractPlugin.loader,
      // 将 css 文件整合到 js 文件中 
      'css-loader',
      //修改 loader 配置
      {
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          plugins: () => [
            // postcss 的插件 
            require('postcss-preset-env')()
          ]
        }
      }
    ]
  }]
}

// package.json
"browserslist": { 
  //开发环境配置
  "development": [ 
    "last 1 chrome version", 
    "last 1 firefox version", 
    "last 1 safari version" 
  ],
  //生产环境配置
  "production": [ 
    ">0.2%", 
    "not dead", 
    "not op_mini all" 
  ] 
}

Recommandations associées : Tutoriel 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!