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

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

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

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

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

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

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

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

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

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

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

Это довольно просто, основной принцип заключается в том, что вы создаете изображение больше, чем элемент, устанавливаете изображение в качестве фонового изображения и позиционируете его с помощью background-position, чтобы был виден только тот бит, который вы хотите. Это означает, что для отображения состояния зависания вам просто нужно изменить положение фона - никаких дополнительных файлов загружать не нужно. Вот краткий пример (в этом примере предполагается, что у вас есть элемент высотой 20 пикселей и фоновое изображение, содержащее оба состояния при наведении и отсутствии наведения - одно поверх другого (так что изображение имеет высоту 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)

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

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