의사 요소에 대해 단일 또는 이중 콜론 표기법을 사용해야합니까?

108

IE7 및 IE8은 의사 요소 (예 : ::after또는 ::first-letter)에 대해 이중 콜론 표기법을 지원하지 않으며 최신 브라우저 :after는 이전 버전과의 호환성을 위해 단일 콜론 표기법 (예 :)을 지원하므로 단일 콜론 표기법 만 사용해야하며 IE8의 시장 점유율이 무시할 수있는 수준으로 떨어집니다. 돌아가서 내 코드 기반에서 찾거나 교체합니까? 또는 다음을 모두 포함해야합니다.

.foo:after,
.foo::after { /*styles*/ }

내가 IE8 사용자를 걱정한다면 double을 단독으로 사용하는 것은 어리석은 것처럼 보입니다.

— 징글 스툴 라
소스

71

마십시오 하지 쉼표와 함께 모두를 사용합니다. CSS 2.1 호환 (CSS3 지원 불가) 사용자 에이전트는 전체 규칙을 무시합니다.

사용자 에이전트가 선택자를 구문 분석 할 수없는 경우 (즉, 유효한 CSS 2.1이 아님), 선택자와 다음 선언 블록 (있는 경우)도 무시해야합니다.

CSS 2.1은 선택기의 쉼표 (,)에 특별한 의미를 부여합니다. 그러나 쉼표가 향후 CSS 업데이트에서 다른 의미를 얻을 수 있는지 여부는 알 수 없으므로 나머지 선택자가 CSS 2.1에서 합리적으로 보일지라도 선택자에 오류가 있으면 전체 문을 무시해야합니다.

http://www.w3.org/TR/CSS2/syndata.html#rule-sets

그러나 사용할 수 있습니다

.foo:after { /*styles*/ }
.foo::after { /*styles*/ }

반면에 이것은 필요한 것보다 더 장황합니다. 지금은 단일 콜론 표기법을 고수 할 수 있습니다.

— user123444555621
소스

7

쉼표와 무시에 대한 정보를 포함 해 주셔서 감사합니다. 그것은 아마도 나 (그리고 아마도 다른 사람들)가 한동안 머리를 긁어 모았을 것입니다. 사용중인 브라우저의 99 %가 이중 콜론 표기법을 지원할 때 가장 좋은 것은 그것을 사용하는 것입니다. 그 시점에서 이전 코드 교체).

— jinglesthula 2012

2

이것은 앞으로 나아가는 길이 아닙니다. 사람들이 오래되고 망가졌고 더 이상 사용되지 않는 브라우저로 패딩하는 것을 중단하면 브라우저 진행이 강제로 빨라질 것입니다.

— Gershom

2

@Gershom Maes : 안타깝게도 당신이 말할 수있는 것은 아닙니다. 개발자의 많은 부분이 똑같은 것을 희망한다고 생각하지만 결코 일어나지 않을 것입니다.

— BoltClock

@Gershom 메이스 우리는 꿈을 꿀 수

— 제임스 쿠싱

1

중복 스타일을 유지하는 것이 문제가 될 수 있다는 점에 유의하는 것이 중요하다고 생각합니다. 아래 cHao가 언급했듯이 중복 코드는 갈라지는 것을 좋아합니다. 대부분의 개발자들은 아마 :) 그것을 떨어져 맹세 그것에 의해 몇 번 물린되어야한다

— jinglesthula

62

에서 CSS3 선택기 REC :

이 :: 표기법은 의사 클래스와 의사 요소를 구별하기 위해 현재 문서에 도입되었습니다.
기존 스타일 시트와의 호환성을 위해 사용자 에이전트는 CSS 레벨 1 및 2에 도입 된 의사 요소 (즉, : first-line, : first-letter, : before 및 : after)에 대해 이전의 단일 콜론 표기법도 허용해야합니다 .
이 사양에 도입 된 새로운 의사 요소 에는 이러한 호환성이 허용되지 않습니다 .

UA는 이전 버전과 호환되어야하므로 CSS2.1에 이미 존재하는 의사 요소에 대해 단일 콜론 표기법 만 사용하는 것이 안전합니다.

— FelipeAls
소스

1

기록을 위해이 답변은 똑같이 올바른 것으로 표시 될 수 있습니다. 원래 질문의 원동력이 특히 이전과 이후의 의사 요소 였음에도 불구하고 몇 가지 귀중한 관점을 제공합니다. 추가해 주셔서 감사합니다.

— jinglesthula

어떻게 그 결론에 도달 했습니까? 나는 반대 결론에 이르렀다. 만약 단일 콜론이 새로운 가상 요소에 허용 되지 않는다면, 습관을 들이기 위해 이중 콜론을 사용하지 않겠는가?

— andrewtweber

double을 사용하는 원래 질문 (IE8)의 맥락에서 @andrewtweber는 CSS를 깨뜨립니다. 즉,이 글을 쓰는 시점에서 대부분의 사이트는 IE8 사용이 심각한 영향없이 두 배로 허용 될 정도로 낮은 수준에서 사용되는 것을 볼 수 있습니다. 브라우저 공급 업체는 단일 표기법을 영구적으로 지원할 수 있지만이 시점에서 코딩 습관을 바꾸는 데 아무런 문제가 없습니다.

— jinglesthula

@andrewtweber +1 for OP Yep, IE8은 2012 년에 고려되었고 YMMV는 여전히 2015 년에 거대한 B2B 프로젝트와 비슷하지만 다른 웹 프로젝트에는 없습니다. 두 표기법 모두 이러한 기존 의사에 대해 완벽하게 유효합니다. CSS 축소는 단일 콜론 표기법을 사용하여 1 바이트를 얻습니다. 항상 하나의 표기법을 사용하고 다른 표기법을 금지하고 싶다면, 그것은 당신의 팀과 함께 할 수있는 완전히 자유롭지 만 권장 사항은 아닙니다.

— FelipeAls

@jinglesthula와 Felipe, 당신 말이 맞아요, 날짜를 몰랐어요. 이 질문은 검색 결과에서 높은 온다 때문에 아마 대답은하지만 업데이트해야합니다

— andrewtweber

22

하나의 "안전한"콜론 사용을 고려하는 것과 관련하여 @mddw 및 @FelipeAls에 절대적으로 동의하지 않습니다.

이 "사용되지 않는데도 사용할 것"이라는 사고 방식이 브라우저 기반 기술의 발전과 발전 속도가 느린 이유입니다.

예, 이전 표준과의 호환성을 유지하고 싶습니다. 현실을 직시하자, 그것은 우리가받은 손이다. 그러나 이것은 더 이상 사용되지 않는 표준을 위해 현재 표준을 무시함으로써 개발에 게으르다는 핑계가 있음을 의미하지는 않습니다.

아웃 목표는 가능한 한 많은 레거시 표준을 지원하면서 현재 표준을 준수하는 것이어야합니다.

유사 요소 :가 CSS2와 ::CSS3 에서 사용 되는 경우 둘 중 하나를 사용해서는 안됩니다. 우리는 둘 다 사용해야합니다 .

원래 질문에 완전히 답하기 위해 다음은 버전 2에 대한 레거시 지원을 유지하면서 CSS의 최신 구현 (버전 3)을 지원하는 가장 적절한 방법입니다.

.foo:after {
  /* styles */
}
.foo::after {
  /* same styles as above. */
}

— 조슈아 번스
소스

3

브라우저 공급 업체가 브라우저가 '올바르게'렌더링되기를 바라는 실제적으로 업데이트되지 않는 코드의 양으로 인해 이전 표기법을 무기한 지원할 것이라고 가정하는 것이 매우 안전하다고 생각합니다. 다른 한편으로, 스타일의 개별 사본을 유지하면 DRY 적기가 발생한다고 생각합니다. IE7 시장 점유율이 떨어질 때까지 단일 콜론 표기법을 사용하는 것이 게으른 것보다 더 실용적이라고 생각합니다. 즉, 나는 웹이 누구보다 더 발전하기를 바랍니다!

— jinglesthula

9

당신이 "경우에 절대적으로 동의하지 내 대답과 함께"당신은 절대적으로 단어와 의견이 맞지있어 반드시 W3C의 권고안이다. " 아웃 목표는 가능한 한 많은 레거시 표준을 지원하면서 현재 표준을 준수하는 것이어야합니다. "는 REC의이 부분에서 다루고있는 것이며 UA가 작성자가 두 표기법을 모두 사용하도록 강요해서는 안된다고 명시 적으로 명시합니다. 이러한 UA가이를 수행하는 방법을 설명합니다. 만약 당신이 그것에 동의하지 않는다면 CSS WG 메일 링리스트에 연락하십시오 (또는이 워킹 그룹의 트위터 @glazou 공동 의장)

— FelipeAls

4

단일 콜론을 "안전한"것으로 사용하는 것에 대해서만 귀하의 전체 답변에 동의하지 않습니다. 새로운 의사 요소에 대한 호환성이 허용되지 않음은 향후 의사 요소가에서만 구현 될 것임을 의미합니다 ::. 귀하의 접근 방식에 따라 개인은 의사 요소 의 :및 사용을 혼합하여 일치시키기 시작합니다 ::. (당분간은 지원 될 수있는) 이전 표준을 명시 적으로 고수하는 것은 본질적으로 나쁜 관행이며 합리적으로 가능할 때마다 피해야합니다. 그 진술에 동의하지 않는다면 우리는 단순히 다른 견해를 가지고 있습니다.

— Joshua Burns

4

호환성이 목표라면 명시 적으로 호환되는 표준을 준수하는 것은 본질적 으로 나쁜 습관이 아닙니다 . 반면에 두 가지를 모두 사용하면 스타일이 중복됩니다. 잠시 동안 코딩 한 사람이라면 누구나 알고 있듯이 중복 된 코드는 분기하는 것을 좋아합니다.

— cHao

8

@JoshuaBurns 만약 나의 전임자가 상상의 미래 위협으로부터 보호하기 위해 많은 코드를 복제했다면, 나는 훨씬 더 "힘들게"느껴질 것입니다.

— Mark Amery

2

그러나 새로운 자바 스크립트와 CSS 모두에 폴리 필 을 사용하는 것이 점점 더 인기를 얻고 있으므로 필요한 경우 새로운 이중 콜론 ( ::) 구문을 계속 사용하고 이전 브라우저에 대해서는 폴리 필을 유지하는 것이 좋습니다.

— zpr
소스

이것은 본질적으로 메타 답변 일뿐입니다. 유용한 정보를 제공하지 않습니다. 답변이 구식이면 반대표를 던지거나 그에 대한 의견을 말하십시오.

— TylerH

2

그런 polyfill을 연결하여 더 이상 인터넷 검색없이 사용할 수있는 이유는 무엇입니까?

— MightyPork 2016 년

4

음, 첫 번째 부분은 메타 일 수 있지만 두 번째 부분은 좋은 대답이라고 생각합니다. 내가 일하는 곳에서는 전 처리기 및 / 또는 폴리 필을 사용하지 않으므로 수락 된 답변이 저에게 적합합니다. 그러나 이러한 도구를 사용하는 모든 상점이나 개발자에게는이 답변이 더 유용 할 것입니다.

— jinglesthula

1

브라우저 통계에 따르면 IE 8.0의 가치는 지난 1 년 동안 미국에서 1 % 미만으로 떨어졌습니다.

http://gs.statcounter.com/browser-version-partially-combined-market-share/desktop/united-states-of-america/#monthly-201512-201612

2015 년 12 월 IE 8.0은 시장 점유율 2.92 % 를 차지 했습니다. 2016 년 12 월 IE 8.0 의 시장 점유율 은 .77 % 였습니다.

이러한 감소 속도에서는 이전 버전의 IE 지원을 중단하고 의사 요소에 :: 사용을 시작하는 것이 최악의 생각은 아닙니다.

— DR01D
소스

축하해야 할 것입니다. :) 여전히 상황에 따라 다르다는 점도 지적 할 가치가 있습니다. 아마존의 경우 사용자의 0.5 %는 사이트가 손상되었다고 생각하는 백만 명 이상의 고객과 같습니다. 10 인 스타트 업을위한 블로그를하고 있다면 지분이 다를 수 있습니다.

— jinglesthula

Amazon과 같은 조직에 대해서는 확실히 사실입니다. 그러나 그 .77 %는 전체 인구에 균등하게 분포되어 있지 않습니다. 업그레이드 할 수없는 것은 불균형적인 노인이나 돈이 적은 사람들입니다. 순전히 비즈니스 관점에서 볼 때 이들은 이상적인 목표 시장이 아닐 것입니다. 따라서 대부분의 회사에서 .77 % 그룹은 그 소수가 제안하는 것보다 훨씬 덜 중요합니다. 그리고 그 숫자는 더 작아 질 것입니다.

— DR01D

좋은 점. 업그레이드가 힘든 싸움 인 또 다른 그룹은 정부와 비즈니스 그룹이 특정 브라우저 버전에서만 작동하는 앱에 크게 의존한다는 것입니다 (다행히도 그런 방식의 그룹도 시간이 지남에 따라 줄어들 것입니다). 당신의 월 누구도 :) 같은 클라이언트 코드가 없다

— jinglesthula

0

두 표기법을 모두 포함하는 것이 확실히 더 안전하지만 오랫동안 단일 표기법을 삭제하는 브라우저를 볼 수 없으므로 단일 표기법 만 괜찮을 것입니다 (유효한 CSS2입니다).

개인적으로 저는 대부분 습관에 의해 단일 콜론 표기법 만 사용합니다.

— mddw
소스

1

다른 답변에서 분명히 알 수 있듯이 이것보다 조금 더 복잡하고 분명하지 않은 함정이 있습니다 (예 : CSS 3 의사 요소에 대한 단일 콜론 표기법을 지원하는 것은 명시적인 사양 위반이므로 CSS 작성자에게는 현명한 것 같습니다. 선택자에 단일 콜론 표기법을 사용하려면).

— Mark Amery 2014-08-28