Чем left: -999999px лучше, чем display:none ?

Question

[Lici]

При верстке всяких табов и прочего почему используют прятки за экран, а не дисплей нон?

Answer 1

[Виталий Киренков]

display: none - нельзя плавно показать одним css-ом, в отличие от left.

Answer 2

[Lynn «Кофеман»]

Первоначально этот трюк предназначался для экранных читалок. Текст скрытый через display: none они не видят, а сдвинутый за экран без проблем читают.

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

Answer 3

[Андрей Буров]

Если display:none, background-image и прочие картинки не будут загружены, пока элемент не станет видимым.

Comments

[RubaXa]

Это не так, вот пример https://www.dropbox.com/s/1ylf3v2rrqxo3to/Screensh...

[Андрей Буров]

@RubaXa, некоторые браузеры не грузят.

[RubaXa]

Все грузят нормально и всегда грузили, разве что были какие-нибудь бажные версии Оперы. background-image не будет грузиться, если только отключен css.

Answer 4

[Дмитрий Евграфович]

Почему вы решили, что он лучше и если он действительно лучше, почему большинство разработчиков используют display:none?

Был неправ, сегодня столкнулся с интересной особенностью браузера firefox (на других не проявляется): В спрятанном display:none блоке функция MatchMedia возвращает null, для блока с left:-999999 все нормально. В частности, реализовал проект, на котором видео с ютуба должно было запускаться после нажатия кнопки и появления ранее невидимого блока на экране. В файрфоксе в невидимом блоке инициализация объекта с видео не происходит и вместо него лишь черный экран (в других браузерах все ок). Переписывание стилей с display:none на left:-99999 решило проблему. Также подобное описывается тут stackoverflow.com/questions/12056313/matchmedia-re..., поэтому в редких случаях хак с left имеет право быть, но только в редких случаях.

Answer 5

[Александр Зачиналов]

left удобно использовать когда элемент должен иметь несколько позиций в зависимости от чего-либо (оригинальной идеи, размера окна и тд.)

Answer 6

[Дмитрий Фоминых]

При использовании display:none, в резиновой верстке, будет сложнее через js получить размер скрытых изображений.

Answer 7

[gene4000]

По разным причинам, так навскидку и не вспомнишь. Но могу подкинуть еще способ с visibility. Тоже иногда полезно (а иногда необходимо для некоторых браузеров).