2014-10-22 2 views
4
#elem { 
    -myCustom: 99; 
} 

ИЛИУ пользовательских свойств CSS используется одна ведущая черта или две?

#elem { 
    --myCustom: 99; 
} 

Я видел оба выше в примерах используются в Интернете. Какая разница между ними?

Попытка доступа пользовательских свойств в JavaScript возвращает нуль ..

#elem { 
-myCustom: 99; 
} 

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

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

Я уверен, что '-myCustom: 99;' недействителен и будет игнорироваться (большинством) веб-браузеров. (Я также уверен, что это не связано с каким-либо браузером). –

+0

@HashemQolami Технически браузер должен игнорировать его, потому что это настраиваемое свойство, но даже пользовательское свойство должно быть доступно через getComputedStyle(). –

+0

На самом деле это свойство * invalid * (пользовательское свойство имеет особое значение). Однако я не уверен, что [нестандартные свойства CSS] (http://stackoverflow.com/questions/249991/can-i-fetch-the-value-of-a-non-standard-css-property-via -javascript) могут быть доступны JavaScript. –

ответ

1

Пользовательские свойства используют одну черточку, по соглашению с последующим визуализатора/программного обеспечения.

Например:

-webkit-бокс-тень

-moz-бокс-тень ...

Но мне кажется, что есть новая возможность реализации двух черточек, это может интересно для вас:

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

+0

Эй, я просто читал эту же статью, но не могу заставить JavaScript возвращать любое значение, кроме null. WTF? –

+0

Я еще не прочитал статью полностью, возможно, вы можете опубликовать фрагмент? – Ercksen

+0

см. Редактирование на мой оригинальный вопрос. –

5
  • одна ведущая тире используется для префиксов поставщиков
  • двойная ведущая тире используется для определения custom properties.

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

настраиваемое свойство является любое имущество, чье имя начинается с двух дефисов (U + 002D HYPHEN-МИНУС), как --foo. Операция <custom-property-name> соответствует этому: она определяется как любой действительный идентификатор , который начинается с двух тире.

Пример из W3C:

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

Стоит отметить, что переменные CSS реализованы в Firefox 31 и более поздней версии.

+0

Примечание. Переменные CSS работают только в Firefox 31+ - они были извлечены из Chrome https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/ScKw9zYRkBc. Не работает в Safari и IE тоже :) –