사용자 정의 CSS 속성은 하나의 선행 대시 또는 두 대시를 사용합니까?

Question

#elem { 
    -myCustom: 99; 
} 

또는 내가 온라인 위의 예에서 사용을 모두 보았다

#elem { 
    --myCustom: 99; 
} 

. 둘의 차이점은 무엇입니까? 자바 스크립트에서 사용자 정의 속성에 액세스하려고하면 null을 반환

..

#elem { 
-myCustom: 99; 
} 

<div id="elem">some text</div> 

elem = document.getElementById("elem"); 
style= window.getComputedStyle(elem); 
value = style.getPropertyValue('-myCustom'); 
alert(value); 

Answer 1

사용자 정의 속성은 렌더러/소프트웨어 다음 규칙에 따라, 하나의 대시를 사용합니다.

예를 들어

:

-webkit-상자 그림자

-moz-상자 그림자 ...

그러나이 두 개의 대시를 구현하는 새로운 기능이있는 것 같다,이 힘 당신을 위해 재미있을 :

http://www.broken-links.com/2014/08/28/css-variables-updating-custom-properties-javascript/

Answer 2

• 단일 선도 대시가 공급 업체 접두어 용으로 사용됩니다.
• custom properties을 정의하는 데 이중 선도 대시가 사용됩니다.

  2 Defining Custom Properties: the '--*' family of properties

지정 속성은 이름이 같은 두 개의 대시 --foo (U + 002D HYPHEN 마이너스)로 시작하는 속성이다. <custom-property-name> 프로덕션은 다음과 같습니다. 두 개의 대시로 시작하는 임의의 유효한 식별자 으로 정의됩니다. W3C에서

예 :

:root { 
    --main-color: #06c; 
    --accent-color: #006; 
} 
/* The rest of the CSS file */ 
#foo h1 { 
    color: var(--main-color); 
} 

CSS 변수가 파이어 폭스 (31)와 새로운 구현된다는 사실을 주목할 가치가있다.