CSS 속성 선택기에서 "i"는 무엇을 의미합니까?

CSS 속성 선택기에서 "i"는 무엇을 의미합니까?

---

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>

브라우저가이 기능을 지원하면 위 사각형이 녹색이되고 그렇지 않으면 빨간색이됩니다.

---

That is the case-insensitive flag for attribute selectors, introduced in Selectors 4. Apparently they snuck an implementation of this feature into Chrome as early as August 2014.

In a nutshell: this flag tells the browser to match the respective values for the type attribute case-insensitively. The default selector matching behavior for attribute values in HTML is case-sensitive, which is often undesirable because many attributes are defined to have case-insensitive values, and you want to make sure your selector picks up all the right elements regardless of case. type is one example of such an attribute, because it is an enumerated attribute, and enumerated attributes are said to have case-insensitive values.

Here are the relevant commits:

• 179370 — implementation
• 179401 — changes to UA stylesheets as shown in the screenshot in the question

Note that it's currently hidden within the "Enable experimental Web Platform features" flag, which you can access at chrome://flags/#enable-experimental-web-platform-features. This might explain why the feature went largely unnoticed — features hidden behind that flag can only be used internally and not in public-facing code (such as author stylesheets) unless it is enabled, because they are experimental and therefore not ready for production use.

Here's a test case that you can use — compare the results when the flag is enabled and disabled:

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>

Note that I use a custom data attribute instead of type to show that it can be used with just about any attribute.

I am not aware of any other implementations as of this writing, but hopefully other browsers will catch up soon. This is a relatively simple but extremely useful addition to the standard and I look forward to being able to use it in future.

참고URL : https://stackoverflow.com/questions/27506735/what-does-i-mean-in-a-css-attribute-selector