Комментарии 14
Что это за серия вредных туториолов для начинающих на хабре? Вы собрались все свойства css рассказать, прикрепив ненужный видеофайл?
Иногда нужно, чтобы элемент не мешал дизайну, но при этом не прятался от скринридеров, оставаясь частью содержимого.
И влетел в бан в гугле и яндексе за это. Для доступности у html хватает аттрибутов, их и стоит использовать, а не заниматься дичью вроде top: -9999px (еще один способ, как и сделать текст такого же цвета как и фон, много их было).
И не написано, что переключение display приводит к пересчету лайаута, а visibility нет. Причем переключение каждого display будет приводить к пересчету, так что стоит избегать изменений этого свойства в цикле и все такое, но это да, не для новичков.
переключение каждого display будет приводить к пересчету, так что стоит избегать изменений этого свойства в цикле
Я всегда думал, что пересчёты ленивые и производятся только по необходимости, а не сразу после изменения, это не так что ли?
Покуда сразу следующей же строчкой после переключения стиля вы можете попытаться выяснить размер/что-то еще счисляемое, браузеру попросту нет вариантов делать иначе.
Простой пример: jsfiddle. Если бы оно рассчитывалось только один раз отложено — в логе бы вывелось 7 одинаковых надписей. Однако есть вероятность, что современные браузеры достаточно умны, вызывают пересчет только если кто-то обращается к этим значениям, иначе по окончании выполнения скрипта, однако не стоит на это рассчитывать.
Покуда сразу следующей же строчкой после переключения стиля вы можете попытаться выяснить размер/что-то еще счисляемое, браузеру попросту нет вариантов делать иначе.
Это и есть необходимость. А если убрать offsetHeight?
есть вероятность
не стоит на это рассчитывать
Ну то есть вы говорите о том, чего толком не знаете, понятно)
Окей, я проверил. Есть набор свойств, таких как offsetHeight, которые требуют пересчета layout. Вот например список таких свойств. Только они не стандартизированы и получены для конкретного браузера, конкретной версии, неизвестно что там у себя внутри думает IE/Edge, не известно как это может измениться в будущем.
Помимо этого, нужно убедиться, что никто не навесит dom-observable и чего-то подобного (onscroll не вызывается, проверил, впрочем не уверен что справедливо для всех условий).
Хотите завязываться на неопределенное поведение? Пожалуйста. На моей практике когда речь идет о включении-выключении элементов до 1000 за раз — никаких трудностей не возникает, а когда речь идет об 50 000+ элементов — трудности возникают и приходится делать дополнительные шаги. Впрочем, задачи тоже разные бывают.
P.S. Вот почитать подробнее о том, что вызывает пересчет layout при изменении каких свойст было бы по-интереснее, чем перески "css для чайников", конечно.
Однако есть вероятность, что современные браузеры достаточно умны, вызывают пересчет только если кто-то обращается к этим значениям, иначе по окончании выполнения скрипта, однако не стоит на это рассчитывать.
Не только вероятность. Например в рамках одного вызова функции (эвента, прочих) движок webkit посмотрит все что делает пользователь и отрисует уже все изменения разом (если только не спрашиваться значения элементов).
И влетел в бан в гугле и яндексе за это. Для доступности у html хватает аттрибутов, их и стоит использовать, а не заниматься дичью вроде top: -9999px (еще один способ, как и сделать текст такого же цвета как и фон, много их было).
Гугл точно за это не банит. Тем более, что доступность уже становится обязательным требованием. В США всё к этому идёт и для коммерческих сайтов, а раз так, то очень скоро и до нас докатится, а почувствуют это профессионалы-аутсорсеры в первую очередь. Думаю, и для них такие туториалы начального уровня будут полезны (быстрой систематизацией).
Гугл точно за это не банит.
Оф. дока. СЕО штука такая, сложная, сложно говорить что-то наверняка с пруфами (вообще это чуть ли не уникальный случай, что удалось найти пруфы в чем-то официальном, а не только сакральные знания на каком-нибудь блоке сеошников), однако я встречал людей, которых банили за это. Это связано с черным (black hat) СЕО времер до 2012 года, когда это использовали для искуственного повышения в выдаче. С тех пор если visible: hidden и display: none в целом безобидные, то трюки с clipRect расцениваются как попытка обмануть поисковики.
Повторюсь, для HTML существует целые разделы спецификации, нацеленные на решение доступности сайта. Один из них — wai-aria и использовать нужно их (по многим причинам).
Вы так пишете как будто бы Хабр место для элиты, вроде вас, и новичков тут нет.
Тогда вперед, давайте сюда еще по главам опубликуем весь учебник математики за 5 класс. И википедию всю переписать сюда. Грань, когда статья уместна на хабре, а когда нет — очень тонкая, но основы CSS — на мой взгляд уж точно ее переходят. Хабр для уникального опыта, уникальных знаний, чего-то, что сложно или даже порой невозможно найти в других источниках. А с visiblity и hidden новички в html/css могут познакомиться в миллионах других источников, предназначенных для этого. Впрочем, рейтинг статьи показывает, что я, похоже, не прав.
Хм, может тоже пойти что-то такое публиковать? Чур я забил учебник Атанасяна по геометрии за 7-9 класс! Никогда не думал, что я тоже буду сидеть и говорить "хабр уже не торт".
When evaluating your site to see if it includes hidden text or links, look for anything that's not easily viewable by visitors of your site. Are any text or links there solely for search engines rather than visitors?
However, not all hidden text is considered deceptive. For example, if your site includes technologies that search engines have difficulty accessing, like JavaScript, images, or Flash files, using descriptive text for these items can improve the accessibility of your site. Remember that many human visitors using screen readers, mobile browsers, browsers without plug-ins, and slow connections will not be able to view that content either and will benefit from the descriptive text as well. You can test your site’s accessibility by turning off JavaScript, Flash, and images in your browser, or by using a text-only browser such as Lynx. Some tips on making your site accessible include:
Гугл сам говорит, что текст, спрятанный от пользователей, и предназначенный для поисковиков — это плохо. Но текст, предназначенный для пользователей с читалками (то есть в целях доступности) — это ок.
Если лень вникать в английский текст, то вот прямой ответ на форуме поддержки вебмастеров productforums.google.com/forum/#!msg/webmasters/YJcZUhtMIE4/XkOEzVakBAAJ
Такие статьи про азы на Хабре нужны не только для новичков, но и для опытных, которые в азах не разобрались в своё время, или разобрались в азах, но они поменялись.
А что касается aria-атрибутов, то можно и без них обойтись в большинстве простых случаев, если использовать теги по назначению.
И чем это отличается от opacity: 0? Opacity просто делает элемент прозрачным (или полупрозрачным), а visibility: hidden ещё не даёт с ним взаимодействовать: навести, кликнуть, сфокусировать.
Так же что стоит заметить, что opacity создает новый контекст для расчета z-index. Плюс opactity можно анимировать
.visually-hidden {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
…
}в хроме создает пустое пространство. Что здесь можно поделать?
Как прятать