CSS 호환성을 처리하는 방법은 무엇입니까?

Css 호환성 처리 방법은 다음과 같습니다. 1. 스타일 초기화 2. 브라우저 비공개 속성 추가(예: [-moz]는 Firefox 브라우저 비공개 속성을 나타냄) 3. 자동으로 브라우저를 관리하는 플러그인과 같은 자동화된 플러그인 사용 접두사 Autoprefixer.

처리 방법:

1. 스타일 초기화

(학습 동영상 권장 사항: css 동영상 튜토리얼)

브라우저마다 기본 CSS 스타일이 다르기 때문에 가장 간단하고 효과적인 방법은 초기화하는 것입니다.

* { 
  margin: 0; 
  padding: 0; 
}

무엇을 초기화해야 할지 모르겠다면 초기화 CSS 스타일 라이브러리 Normalize.css를 권장합니다. 다음과 같이 여러 스타일 설정을 선택하고 표시하세요.

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. 브라우저 개인 속성 추가

-moz - Firefox 브라우저 개인 속성을 나타냅니다.

-ms- IE 브라우저 개인 속성을 나타냅니다.

-webkit- Chrome 및 Safari 개인 속성을 나타냅니다.

-o- Opera 개인 속성을 나타냅니다.

개인 속성의 순서에 주의하고 표준을 넣습니다. 글쓰기 방법 마지막으로 호환성 쓰기 방법을 앞에 두세요

-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. 자동화 플러그인을 사용하세요

Autoprefixer는 리소스 구축 도구(예: Grunt)에 Autoprefixer를 추가한 후 자동으로 관리해주는 플러그인입니다. , CSS 접두어는 완전히 잊어버릴 수 있습니다. 최신 W3C 사양에 따라 CSS를 정상적으로 작성하세요

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

webpack에서 postcss-loader 및 postcss-preset-env를 구성하면 호환성 문제도 처리할 수 있습니다

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" 
  ] 
}

관련 권장 사항: CSS 튜토리얼

위 내용은 CSS 호환성을 처리하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!