CSS : disabled pseudo-class 또는 [disabled] 속성 선택기를 사용해야합니까, 아니면 의견의 문제입니까?

CSS : disabled pseudo-class 또는 [disabled] 속성 선택기를 사용해야합니까, 아니면 의견의 문제입니까?

---

비활성화 된 입력의 스타일을 지정하려고합니다. 다음을 사용할 수 있습니다.

.myInput[disabled] { }

또는

.myInput:disabled { }

속성 선택기는 최신 CSS3 방식이며 앞으로 나아가는 방식입니까? 나는 의사 클래스를 사용했지만 이전 방식이고 지원되지 않는지 또는 둘 다 동일하고 가장 좋아하는 것을 사용할 수 있는지 여부에 대한 정보를 찾을 수 없습니다.

이전 브라우저 (인트라넷 응용 프로그램)를 지원할 필요가 없습니다.

• 속성이 더 새롭고 더 좋습니다
• 의사 클래스는 여전히 갈 길이다
• 당신이 가장 좋아하는
• 하나를 사용하는 기술적 인 이유가 있습니다.

---

속성 선택기는 최신 CSS3 방식이며 앞으로 나아가는 방식입니까?

• 속성이 더 새롭고 더 좋습니다

아니; 실제로 속성 선택자는 CSS2disabled 이후로 존재 했으며 속성 자체는 HTML 4 이후로 존재했습니다 . 내가 아는 한, :disabled의사 클래스는 Selectors 3 에서 도입되어 의사 클래스를 더 최신으로 만듭니다.

• 하나를 사용하는 기술적 인 이유가 있습니다.

예, 어느 정도.

속성 선택기를 사용하면 스타일을 지정하는 문서가 disabled속성을 사용하여 비활성화 된 필드를 표시 한다는 지식에 의존하게 됩니다. 이론적으로 HTML이 아닌 것을 스타일링하는 경우 비활성화 된 필드는 disabled속성을 사용하여 표현되지 않을 수 있습니다 . 예를 들어 그럴 수도 있습니다 enabled="false". 향후 HTML 버전에서도 다양한 속성을 사용하여 활성화 / 비활성화 상태를 나타내는 새로운 요소를 도입 할 수 있습니다. 이러한 요소는 [disabled]속성 선택기 와 일치하지 않습니다 .

:disabled의사 클래스는 작업중인 문서에서 선택기를 분리한다. 사양은 단순히 비활성화 된 요소를 대상으로하며 요소의 활성화 여부는 문서 언어에 의해 정의됩니다 .

활성화 상태, 비활성화 상태 및 사용자 인터페이스 요소를 구성하는 것은 언어에 따라 다릅니다. 일반적인 문서에서 대부분의 요소는 둘 수 없습니다 :enabled아니다 :disabled.

즉, 가상 클래스를 사용할 때 UA는 스타일링하는 문서를 기반으로 일치시킬 요소를 자동으로 파악하므로 방법을 말할 필요가 없습니다.

DOM 측면 disabled에서 DOM 요소에 속성을 설정하면 HTML 요소의 disabled속성 도 수정되므로 DOM 조작을 사용하는 선택자간에 차이가 없습니다. 이것이 브라우저에 의존하는지 확실하지 않지만 모든 주요 브라우저의 최신 버전에서이를 보여주는 바이올린 이 있습니다.

// The following statement removes the disabled attribute from the first input
document.querySelector('input:first-child').disabled = false;

당신이 가장 가능성이 전혀 당신에게 어떤 차이를 만들 수 없다, 그래서 HTML을 스타일링 할거야,하지만 브라우저 호환성이 문제가되지 않을 경우 내가 선택할 것 :enabled과 :disabled이상 :not([disabled])과 [disabled]의사 클래스는 의미를 가지고 있기 때문에 단순히 속성 선택기가하는 아니. 나는 그런 순수 주의자 다.

---

Internet Explorer 10 및 11 :disabled은 일부 요소 에서 의사 클래스 를 인식하지 못하며 특성 선택기 구문에서만 제대로 작동합니다.

#test1:disabled { color: graytext; }
#test2[disabled] { color: graytext; }

<form>
<fieldset id="test1" disabled>:disabled</fieldset>
<fieldset id="test2" disabled>[disabled]</fieldset>
</form>

위에서 잘라낸 코드는 IE에서 다음과 같이 렌더링됩니다.

input요소 만 스타일링하는 한 어느 쪽이든 괜찮을 것입니다. 그래도 지원하려는 모든 브라우저에서 최종 결과를 테스트하는 것은 좋은 조언입니다.

참조 URL : https://stackoverflow.com/questions/20141450/should-i-use-css-disabled-pseudo-class-or-disabled-attribute-selector-or-is-i