CSS 호환성 가이드

보통 호환성이 확실하지 않은 경우에는 사용할 수 있는지 확인해야 합니다. 글쎄, 페이지가 어느 정도 호환되어야 하는지도 이해해야 합니다.

1 필요한지 여부. 호환

처음부터 이 문제를 잘 생각해야 합니다. 일부 효과는 호환되지 않으면 호환되지 않습니다.

예를 들어 CSS Shapes는 이 경우:

그림은 w3cplus에서 가져온 것입니다. 이 경우 CSS Shapes 속성을 지원하지 않는 브라우저에 대한 지원을 강제하지 않는 것이 좋습니다.

2 그냥 백오프가 가능한가요?

첫 번째 지점과 비교하여 CSS 그래디언트 백 처리와 같은 추가적인 백오프 처리가 추가됩니다(이미 있어야 합니다).

    background-color: #f9efee;
    background-image: linear-gradient(to left, #f5e5e3 0%, #ffffff 52%, #f5e5e3 100%);

추가적인 구분이 필요한 3가지 상황

CSS로 처리하면 다양한 HACK이 나옵니다.

CSS 해킹 스킬 모음

똑똑 브라우저 CSS 속성 값 사용 이전 버전과 호환되는 해킹 기술과 호환되지 않음

JS를 사용하여 처리하는 경우 가장 좋은 방법은 modernizr.js 또는 다음 코드를 사용하는 것입니다.

if ( !'shape-margin' in document.documentElement.style) {}
//如果不支持shape-margin属性则如何如何

4 강제의 효과는 같습니다

이 시점에서는 이런 종류의 코드만 나올 수 있습니다

text-shadow: 2px 2px 15px #333;
filter: glow(color=#333333, strength=2);
/*老IE不支持文字阴影，对其使用IE滤镜*/

CSS 호환성 전략과 관련된 더 많은 기사를 보려면 주목하세요. PHP 중국어 웹사이트로!