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

Question

При настройке эффекта опрокидывания в HTML, есть ли какие-либо преимущества (или ловушки) для его выполнения в CSS и JavaScript? Есть ли проблемы с эксплуатационной совместимостью или кодом, с которыми я должен быть знаком с любым из этих подходов?

Answer 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 ограничение обычно не проблема, так как вы склонны к тому, чтобы rollovers можно было щелкнуть. Последнее, однако, немного более проблематично. Существует метод, называемый CSS Sprites, который может предотвратить эту проблему. Вы можете найти пример используемой техники, чтобы сделать no-preload rollovers.

Это довольно просто, основной принцип заключается в том, что вы создаете изображение, большее, чем элемент, задаете изображение в качестве фонового изображения и позиционируете его с помощью 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 */ 
} 

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

Answer 2

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

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

не существует мнемонические для запоминания последовательности деклараций в CSS?

Answer 7

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