CSS 폴백을 신속하게 테스트합니다

편리한 CSS 테스트 트릭!

브라우저 호환성이 항상 보장되는 것은 아닙니다. CSS 그리드 지원이없는 브라우저에 대한 폴백이 필요하다고 가정 해 봅시다 (현재는 덜 일반적이지만 그림에 유용함).

@supports 블록을 사용할 수 있습니다.

 @supports (display : 그리드) {
  .Blocks {
    디스플레이 : 그리드;
    그리드-템플릿-컬럼 : 반복 (자동 필, minmax (Min (100px, 100%), 1fr);
    갭 : 1rem;
  }
}

폴백을 신속하게 테스트하려면 @supports (display: grid) @supports (display: gridx) 와 같은 유효하지 않은 것으로 임시로 수정하십시오. 이것은 테스트를위한 간단한 온/오프 스위치를 제공합니다.

위의 예에는 강력한 폴백이 없습니다. 더 나은 접근 방식에는 Flexbox (Flexbox를 지원하지만 그리드가 아닌 브라우저)가 포함될 수 있습니다. 또는 더 간단한 열 기반 폴백은 합리적인 프리젠 테이션을 보장 할 수 있습니다.

브라우저가 @supports 쿼리를 지원한다고 확신한다면 (약간 아이러니 한, 알고 있습니다!) 이것을 사용할 수 있습니다.

 @supports (display : 그리드) {
  / * 그리드 스타일 */
}

@supports not (display : 그리드) {
  / * 기본 폴백 간격 */
  .Block {마진 : 10px}
}

이전 브라우저가 단계적으로 폐지 되면서이 가정은 점점 더 유효 해집니다 (특히 IE 지원을 삭제 한 경우).

이것은 @when 구문의 바람직 함을 강조합니다.

 @when supports (display : 그리드) {
  / * 그리드 스타일 */
} @또 다른 {
  / * 폴백 스타일 */
}

이 깨끗한 구문은 가독성과 유지 관리를 크게 향상시킵니다.

위 내용은 CSS 폴백을 신속하게 테스트합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!