Каков предпочтительный способ опроса CSS?

Ответ 1

CSS отлично подходит для опрокидывания. Они реализованы в основном с использованием псевдоселектора :hover. Здесь действительно простая реализация:

a{
    background-image: url(non-hovered-state.png);
}
a:hover{
    background-image: url(hovered-state.png);
}

Есть несколько вещей, о которых вам нужно знать:

• IE6 поддерживает только теги :hover на <a>
• Изображения, указанные в CSS, но не используемые на странице, не будут загружаться немедленно (это означает, что состояние опрокидывания может занять первое место в первый раз)

Ограничение <a> -tags-only обычно не является проблемой, так как вы склонны к тому, чтобы опрокидывающиеся клики были доступны. Последнее, однако, немного более проблематично. Существует метод, называемый CSS Sprites, который может предотвратить эту проблему, вы можете найти пример используемой техники, чтобы сделать откаты без предварительной загрузки.

Это довольно просто, основной принцип заключается в том, что вы создаете изображение, большее, чем элемент, задаете изображение в качестве фонового изображения и позиционируете его с помощью background-position, так что только тот бит, который вы хотите, виден. Это означает, что для отображения зависающего состояния вам просто нужно изменить положение фона - никаких дополнительных файлов не нужно загружать вообще. Вот пример быстрого и грязного (в этом примере предполагается, что у вас есть элемент 20px high и фоновое изображение, содержащее как зависание, так и не зависающее состояние - одно поверх другого (так что изображение имеет высоту 40 пикселей):

a{
    background-image: url(rollover-sprites.png);
    background-position: 0 0; /* Added for clarity */
    height: 20px;
}
a:hover{
    background-position: 0 -20px; /* move the image up 20px to show the hovered state below */
}

Обратите внимание, что использование этой техники "спрайтов" означает, что вы не сможете использовать альфа-прозрачные PNG с IE6 (поскольку единственный способ, которым IE6 должен отображать альфа-прозрачные PNG, правильно использует специальный фильтр изображения, который не поддерживает background-position)

Ответ 2

Он по-прежнему будет работать в CSS, если в браузере отключен Javascript.

Ответ 3

Поскольку это один из аспектов презентации, я бы сказал, что это больше стандартов, основанных на использовании CSS. Раньше это делалось в Javascript, просто потому, что мы не могли сделать это с помощью CSS (старые браузеры сосут, и я не думаю: hover был даже добавлен до CSS 2).

Ответ 4

Внедрение опрокидывания с использованием CSS использует псевдо-класс hover для определения стиля целевого элемента при его зависании. Это отлично работает во многих браузерах, но не в IE6, где он хорошо работает с тегом привязки (то есть a: hover). Я использовал CSS hover для создания панели с вкладками, но мне пришлось использовать поведение IE, чтобы заставить его работать в IE6.

Ответ 5

Да, лучший способ сделать это - css sprites. Досадная проблема возникает в IE6, когда браузер делает запрос каждый раз, когда элемент зависает. Чтобы исправить это, посмотрите здесь.

Ответ 6

Я бы остался на стороне CSS дома, но я сделал очень маленький Javascript.

CSS, похоже, проще стандартизировать в браузерах, чем Javascript, хотя это может измениться с появлением нового инструмента рендеринга Chrome V8 и Firefox.

Ответ 7

Не существует мнемоника для запоминания последовательности объявлений в CSS?