Можно ли создавать встроенные псевдо-стили?

Question

Можно ли создавать встроенные псевдо-стили?

Например, я могу сделать что-то вроде следующего?

<a href="#" style="background-color:green;{hover:background-color:red;}">Coding Horror</a>

Причина этого в том, что я разрабатываю библиотеку .NET , которая создает элементы пользовательского интерфейса. Я хочу создать элементы HTML, для которых можно установить их состояние при наведении, без использования внешней таблицы стилей.

Answer 1

К сожалению, нет, вы не можете реализовать эффекты наведения при помощи встроенного CSS.

(плохой) обходной путь для этой проблемы состоит в том, чтобы ваши элементы управления отображали блоки стилей при их отображении. Например, ваш элемент управления может отображаться как:

<style type="text/css">
    .custom-class { background-color:green; }
    .custom-class:hover { background-color:Red; }
</style>
<a href="#" class="custom-class">Coding Horror</a>

Если бы вы могли заставить своих пользователей оставлять «элемент управления стилем» в верхней части их страниц, вы могли бы отображать там все свои пользовательские классы вместо отображения их рядом с каждым элементом управления, что было бы очень и очень плохо (браузеры будет перезапускать рендеринг каждый раз, когда они сталкиваются с блоком стилей, поскольку большое количество блоков стилей, разбросанных по вашей странице, вызовет медленный рендеринг).

К сожалению, нет элегантного решения этой проблемы.

Answer 2

Это своего рода ситуация с уловом-22.

С одной стороны, вы можете добавить блок стиля непосредственно перед тем, как ваш элемент вставляется на страницу, но Крис Пеббл указывает на проблемы с этим. (Если вы решите это, убедитесь, что вы выбрали уникальные идентификаторы для своих элементов, чтобы ваши селекторы не выбирали и не стилизовали что-либо еще).

С другой стороны, вы можете сделать что-то вроде этого:

<a href="#" onmouseover="this.style.color=red;" onmouseout="this.style.color='blue';">...</a>

Но это неприятно само по себе, поскольку оно связывает воедино разметку, представление, поведение и целый ряд других вещей.

Вы также можете добавить таблицу стилей на страницу, написав тег ссылки или изменив document.stylesheets, но это приведет к загрузке.

Я обычно видел первый метод (добавление блока стилей), сделанный по-крупному. «Модульные» портальные сайты делают подобные вещи, так что, может быть, это стандарт де-факто (по крайней мере, он более читабелен и, возможно, его легче поддерживать, чем втиснуть туда JavaScript?) Метод JavaScript, по-видимому, оказывает наименьшее влияние на DOM и всю страницу в целом, поскольку вы сохраняете презентацию для себя.

Это одна из тех основных разработок, где каждый выбранный вами ответ в некоторой степени неверен, поэтому взвесите варианты и выберите то, что проще всего построить и поддерживать.

Answer 3

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

<a style="color:blue" styleHover="color:blue" id="a1">Click!</a>

Ваш код может искать эти атрибуты и генерировать файл css на лету

#a1:hover {
  color:blue
}

Я не знаю, позволяет ли .NET выполнять такой тип анализа атрибутов, но я делаю нечто подобное в рамках, которые я создал для php.

Answer 4

Или вы можете использовать jQuery hover и установить цвет фона.