Можно ли объявить событие js и / или функцию, используя только css3?

Question

Я знаю, что существуют способы добавления контента на веб-страницу, как указано здесь: http://nooshu.com/adding-content-using-css3

Но .. Интересно, есть ли возможность объявить событие js в css на заданных выбранных узлах, например:

.myclass {
   declare-js-event: "onclick";
   declare-js-function: "alert('I've been clicked!')"
}

Если (как я очень полагаю) это невозможно, то запланированы ли эти функции по крайней мере в какой-нибудь будущей версии css v4 или это исключено по замыслу, и css никогда не сможет делать такие вещи?

Answer 1

Вы можете объявить JavaScript-выражения и функции в CSS с помощью функции IE expression(). Другой способ - использовать функцию url().

Например:

// Expression()
selector { width: expression((document.body.clientWidth > 1024)? "1200px" : "960px"); }

// URL()
selector { background: url("javascript: alert('XSS')"); }

Выражения в IE {6,7} добавляют некоторую дополнительную логику, которая иногда используется, чтобы скрыть перекрестную совместимость для IE; однако, использование expression() вообще не рекомендуется.

Как ответил cx42net, CSS обрабатывает представление, тогда как JavaScript обрабатывает поведение страницы. Использование JavaScript в CSS не является распространенным явлением и обычно проявляется как атака XSS, как показано в примере url() выше.

Возможно использовать JavaScript в более старых версиях браузеров, но я думаю, что они постепенно удаляют его поддержку, поскольку IE8 + больше не поддерживает expression(). Тем не менее, я вообще не рекомендую использовать JavaScript в CSS, особенно если вы ожидаете, что ваш веб-сайт будет Forward Compatible .

Answer 2

Нет, это невозможно, и я не думаю, что это планируется добавить в будущем.

Причина проста, css расшифровывается как «Каскадная таблица стилей», поэтому она нацелена на изменение визуальной визуализации HTML-страницы.

Не добавляя к нему функциональные возможности, эта работа зарезервирована для Javascript.

Но с чего бы тебе это делать? Вы можете просто включить script.js в свой HTML-файл и вызывать то, что вы хотите, когда DOM будет готов. Примерно так в jQuery:

$(function () {
    // do what you want here
    // add onclick event on what you want
    // etc
}