css 사용법 - pseudo-element에 대해 단일 또는 이중 콜론 표기법을 사용해야합니까?




before after (6)

IE7과 IE8은 유사 요소 (예 : ::after 또는 ::first-letter )에 대한 이중 콜론 표기법을 지원하지 않기 때문에 최신 브라우저는 하위 호환성을 위해 단일 콜론 표기법 (예 :after )을 지원하므로 단일 콜론 표기법 만 사용하고 IE8의 시장 점유율이 무시할 수준으로 떨어지면 코드베이스에서 찾거나 바꾸십시오. 또는 두 가지를 모두 포함해야합니까?

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

IE8 사용자 (가난한 친애하는 독자)를 신경 쓰면 두 배 혼자 사용하는 것이 어리석은 것처럼 보입니다.


Answers

CSS3 선택기 REC :

이 :: 표기법은 의사 클래스와 유사 요소를 구별하기 위해 현재 문서에서 소개합니다.
기존 스타일 시트와의 호환성을 위해 사용자 에이전트는 CSS 레벨 1 및 2 (첫 번째 줄, : 첫 번째 줄, : 앞 줄 및 뒤 :)에 도입 된 의사 요소에 대해 이전의 한 콜론 표기법을 받아 들여야합니다 .
호환성은 이 사양에서 소개 된 새로운 의사 요소에 대해서는 허용되지 않습니다 .

UA가 이전 버전과 호환되어야하므로 CSS2.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은 시장의 79 %차지 했습니다.

그 감소율로 IE의 이전 버전을 지원하는 것을 멈추고 의사 (pseudo) 요소를 위해 ::를 사용하는 것은 최악의 생각이 아닙니다.


그러나 새 javascript와 CSS에 polyfill 을 사용하는 것이 점점 더 인기를 얻고 있으므로 새로운 double-colon ( :: :) 구문을 사용하고 오래된 브라우저에 대한 polyfill을 유지하는 것이 필요할 때까지 유지해야 할 수 있습니다 .


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

이 "사용하지 않을 것이지만 사용하지 않을 것입니다."라는 생각은 바로 브라우저 기반 기술이 발전하고 발전하는 데 왜 그렇게 느린 지에 대한 이유입니다.

예, 기존 표준과의 호환성을 유지하려고합니다. 그것을 직면하자, 그것은 우리가 다루어 온 손이다. 그러나 이것은 당신이 개발에서 게으르다는 핑계를 가지고 있음을 의미하지는 않습니다.

목표는 가능한 한 많은 레거시 표준을 지원하면서 현재 표준을 준수하는 것입니다.

유사 요소가 CSS2와 CSS3에서 사용하는 경우, 우리는 하나 또는 다른 것을 사용해서는 안됩니다. 우리는 둘 다 사용해야합니다.

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

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

두 표기법을 포함하면 확실히 안전하지만 오랫동안 단일 표기법을 사용하지 않는 브라우저는 볼 수 없으므로 하나의 표식 만 사용할 수 있습니다 (유효한 CSS2 임).

Personnaly 나는 단 하나 콜론 표기법, 주로 습관에 의해서만 사용합니다.


당신이 이렇게 할 수 있다는 것을 알았습니다.

.submit .btn input
{
   padding:11px 28px 12px 14px;
   background:#004990;
   border:none;
    color:#fff;
}

 .submit .btn
 {
     border:none;
     color:#fff;
     font-family: 'Open Sans', sans-serif;
     font-size:1em;
     min-width:96px;
     display:inline-block;
     position:relative;
 }

.submit .btn:after
{
    content:">";
    width:6px;
    height:17px;
    position:absolute;
    right:36px;
    color:#fff;
    top:7px;
}
<div class="submit">
  <div class="btn">
     <input value="Send" type="submit" />
  </div>
</div>

패딩과 : after를 취하는 div 부모가 있어야합니다. 첫 번째 부모는 상대 경로 여야하고 두 번째 div는 절대 경로 여야하므로 이후 위치를 설정할 수 있습니다.







css internet-explorer-8 css-selectors internet-explorer-7 pseudo-element