Возможно ли создать новое свойство css?

Можно ли создать новое свойство в CSS? Например, скажем, вы разрабатываете элемент управления, который отображает фотографию, и вы хотите добавить свойство в css для управления тем, что стиль рамки вокруг фотографии. Что-то вроде:

#myphoto { frame-style: fancy }

Есть ли способ сделать это с помощью совместимого браузера, и как бы вы определили, наследуется ли стиль?

EDIT: это настраиваемый элемент управления - ваш JS-код будет работать со стилем - я не ожидаю, что браузер научится знать, что делать. Я хочу, чтобы пользователь мог стилизовать элемент управления с помощью CSS вместо JS.

Ответы

Ответ 1

Конечно, почему бы и нет. Проверьте это как пример: http://bililite.com/blog/2009/01/16/jquery-css-parser/

Вы также можете уйти с использованием классов CSS вместо свойств. Не уверен, что это работает для того, что вы делаете.

Ответ 2

Вы не можете. Браузеры интерпретируют CSS на основе того, как их механизмы компоновки закодированы для этого.

Если вы не использовали существующий движок с открытым исходным кодом, такой как WebKit или Gecko, добавили специальный код для обработки вашего собственного CSS и сделали браузер, который использовал ваш настроенный механизм компоновки. Но тогда только ваша реализация поймет ваш пользовательский CSS.

Повторите свое редактирование: это будет зависеть от того, сможете ли вы каким-то образом прочитать этот стиль. Обычно браузеры сразу же отбрасывают любые свойства, которые они не распознают, и CSS обычно не доступен JavaScript, потому что код CSS не является частью DOM.

Или вы можете посмотреть ответ Джорда.

Ответ 3

Если вы предпочитаете прямое решение JavaScript, которое не использует JS-библиотеки, вы можете использовать строку запроса фонового изображения для сохранения "пользовательских свойств" внутри вашего CSS.

HTML

<div id="foo">hello</div>

CSS

#foo {
   background: url('images/spacer.gif?bar=411');
}

JavaScript

getCustomCSSProperty('foo', 'bar');

Поддержка функций JavaScript

function getCustomCSSProperty(elId, propName)
{
    var obj = document.getElementById(elId);
    var bi = obj.currentStyle ? obj.currentStyle.backgroundImage : document.defaultView.getComputedStyle(obj, null).getPropertyValue('background-image');
    var biurl = RegExp('url\\(["\\\']?([^"\\\']+)["\\\']?\\)').exec(bi);
    return getParameterByName(propName, biurl[1]);
}

function getParameterByName(name, qs) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(qs);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

Demo: http://jsfiddle.net/t2DYk/1/

Объяснение: http://refactorer.blogspot.com/2011/08/faking-custom-css-properties.html

Я тестировал решение в IE 5.5-9, Chrome, Firefox, Opera и Safari.