Google Chrome 사용자 에이전트 스타일 시트에서 다음 CSS 선택기를 찾았습니다.

[type="checkbox" i]

무슨 i뜻입니까?

주석에서 언급했듯이 대소 문자를 구분하지 않는 속성 일치를위한 것입니다. 이것은 CSS 선택기 레벨 4의 새로운 기능입니다.

현재 Chrome 49+, Firefox 47+, Safari 9+ 및 Opera 37 + *에서 사용할 수 있습니다. 이전에는 Chrome 39부터 시작되는 Chrome 사용자 에이전트 스타일에서만 사용할 수 있었지만 실험적 기능 플래그를 설정하여 웹 콘텐츠에 사용할 수있었습니다.

* 이전 버전의 Opera도 지원할 수 있습니다.

작업 예 / 브라우저 테스트 :

[data-test] {
    width: 100px;
    height: 100px;
    margin: 4px;
}

[data-test="A"] {
    background: red;
}

[data-test="a" i] {
    background: green;
}

Green if supported, red if not:

<div data-test="A"></div>

브라우저가이 기능을 지원하는 경우 위의 사각형은 녹색, 지원하지 않는 경우 빨간색입니다.

이것은 선택자 4에 도입 된 속성 선택자에 대한 대소 문자를 구분하지 않는 플래그입니다. . 분명히 그들은이 기능을 빠르면 2014 년 8 월에 Chrome에 구현했습니다.

요컨대 :이 플래그는 브라우저가 type속성에 대한 각각의 값을 대소 문자를 구분하지 않고 일치하도록 지시합니다 . HTML의 속성 값에 대한 기본 선택기 일치 동작은 대소 문자를 구분합니다 . 이는 많은 속성이 대소 문자를 구분하지 않는 값을 갖도록 정의되어 있고 선택기가 대소 문자에 관계없이 모든 올바른 요소를 선택하도록하려는 경우 바람직하지 않습니다. 열거 된 속성 이고 열거 된 속성은 대소 문자를 구분하지 않는 값을 가지고type 있기 때문에 이러한 속성의 한 예입니다 .

관련 커밋은 다음과 같습니다.

• 179370 — 구현
• 179401 — 질문의 스크린 샷에 표시된대로 UA 스타일 시트 변경

현재 '실험적 웹 플랫폼 기능 사용'플래그 내에 숨겨져 있으며 chrome : // flags / # enable-experimental-web-platform-features에서 액세스 할 수 있습니다. 이것은 기능이 거의 눈에 띄지 않게 된 이유를 설명 할 수 있습니다. 해당 플래그 뒤에 숨겨진 기능은 내부적으로 만 사용할 수 있으며 활성화되지 않는 한 공개용 코드 (예 : 작성자 스타일 시트)에서는 사용할 수 없습니다. 실험적이므로 프로덕션 용으로 사용할 준비가되지 않았기 때문입니다.

사용할 수있는 테스트 사례는 다음과 같습니다. 플래그가 활성화 및 비활성화되었을 때 결과를 비교합니다.

span[data-foo="bar"] {
    color: red;
}

span[data-foo="bar" i] {
    color: green;
}

<span data-foo="bar">If all of this text is green,</span>
<span data-foo="Bar">your browser supports case-insensitive attribute selectors.</span>

대신 사용자 지정 데이터 속성을 사용합니다. type거의 모든 속성과 함께 사용할 수 있음을 표시하는 사용합니다.

이 글을 쓰는 현재 다른 구현에 대해서는 알지 못하지만 다른 브라우저가 곧 따라 잡을 수 있기를 바랍니다. 이것은 상대적으로 간단하지만 표준에 매우 유용한 추가 기능이며 앞으로 사용할 수 있기를 기대합니다.