IE11 전용 CSS 및 SCSS용 VSCode 스니펫

현재 고용주가 Internet Explorer 11을 방치하기로 결정한 것에 매우 감사하지만 항상 그렇게 운이 좋았던 것은 아닙니다. 마이크로소프트가 올 6월 지원 종료를 준비하더라도 상당한 수의 사용자가 업그레이드를 거부하는 한 일부 개발자는 이를 지원해야 할 것입니다. 몇 년 전, 나는 여전히 지원이 필요한 프로젝트를 위해 SCSS에 대한 스니펫을 추가했으며 이제 좀 더 유연하게 만들기 위해 CSS에 맞게 조정했습니다.

이 스니펫을 사용하려면 CSS 스니펫에 다음을 추가하세요(Mac에서는 Code -> Preferences -> User Snippets).

{
  "IE11": {
    "prefix": "IE11",
    "body": [
      " /* rule only parsed by IE11 (╯°□°)╯︵ ┻━┻*/",
      "*::-ms-backdrop, $1 {",
      "$0",
      "}"
    ],
    "description": "IE11 override styles"
  }
}

이제 css 파일에 "ie"를 입력하기 시작하면 스니펫에서 "IE11"을 선택하라는 메시지가 표시되어 다음 코드가 생성됩니다.

/* rule only parsed by IE11 (╯°□°)╯︵ ┻━┻*/
*::-ms-backdrop,  {

}

작성할 때 스타일을 지정하려는 선택기를 추가할 준비가 된 *::-ms-backdrop, 뒤에 커서가 먼저 나타납니다(예: *::-ms-backdrop, .container ). 완료되면 탭을 눌러 중괄호를 입력하여 스타일 추가를 시작합니다.

(이전에 VS Code 스니펫을 작성하지 않은 경우 스니펫의 $1 및 $0는 작성을 위한 탭 정지를 나타냅니다. $1가 첫 번째이고 $0가 마지막입니다. See the VSCode docs for more )

재정의 자체를 테스트하려면 I’ve set up a codepen .

이것은 무엇을 의미 하는가?

우리가 IE6가 최악이라고 생각했을 때 Microsoft는 특수 메시지("브라우저를 업그레이드하세요, 미치광이")를 인쇄하거나 브라우저별 스타일시트를 다음과 같이 연결할 수 있는 조건부 주석을 지원했습니다.

<!--[if IE 6]>
<link rel="stylesheet" href="i6sux.css">
<![endif]-->

그러나 이들은 최신 버전의 브라우저에서 삭제되어 개발자가 대신 Internet Explorer에만 존재하는 의사 클래스를 찾아야 했습니다. 이것은 본질적으로 취약하며 모든 솔루션이 모든 버전에서 작동하는 것은 아닙니다. 내 예에서 *::-ms-backdrop는 특히 IE11에서 작동하는 것 같습니다. 이전 버전의 IE도 지원해야 하는 경우Stackoverflow는 당시 최신 버전의 Internet Explorer가 무엇이든 목표로 삼고자 필사적으로 노력했던 과거 개발자들의 유령에 시달립니다.

일반적으로 *::-ms-backdrop 를 사용하는 예를 볼 때 media all and (-ms-high-contrast:none) 와 같은 미디어 쿼리로 래핑된다는 점은 주목할 가치가 있습니다. 내 경험상 그럴 필요가 없었습니다. 내가 직접 테스트하지는 않았지만 고대비 설정을 사용하는 사용자가 수정 사항을 보지 못하게 할 수도 있다고 생각합니다.

SCSS는 어떻습니까?

저는 주로 SCSS 파일에서 스니펫을 사용했기 때문에 실제 스니펫은 다음과 같습니다.

{
  "IE11": {
    "prefix": "IE11",
    "body": ["   //rule only parsed by IE11 (╯°□°)╯︵ ┻━┻", "*::-ms-backdrop, & {", "$1", "}"],
    "description": "IE11 override styles"
  }
}

이것이 가능한 사용 사례인 경우:

.container {
    display: grid;

     //rule only parsed by IE11 (╯°□°)╯︵ ┻━┻
    *::-ms-backdrop, & {
        display: flex;
    }
}

SCSS에 익숙하지 않은 경우 & 는 상위 선택기인 .container 의 반복을 나타냅니다. 이것은 단순한 CSS보다 좀 더 모듈화되고 재사용하기 쉽게 만듭니다. 위의 예에서는 최신 브라우저에서는 display: grid를 사용하지만 Internet Explorer 11에서는 display: flex를 사용합니다. IE11에서는 그리드가 귀찮기 때문입니다.

마지막 생각들

이 게시물에서 아무것도 얻지 못했다면 최소한 탁자 던지기 이모티콘을 가져가세요.

(╯°□°)╯︵ ┻━┻

이 게시물은 내 사이트에서 교차 게시되었습니다.