Как сделать текст невидимым css

При display: none; веб-страница формируется так, словно элемента вместе с его содержимым нет.

Как сделать текст невидимым на HTML странице

И Google, и Яндекс наказывают за текст, который пользователи никогда не увидят. У них есть свои браузеры, а значит технология, которая позволяет выявить это. То есть нужно подумать каким образом и в каком случае скрытый текст будет виден посетителю веб-проекта, например, в результате нажатия на кнопку (см. как сделать такую кнопку) или в виде всплывающего сообщения.

Я так и не поняла приемлема ли ситуация, когда человек видит логотип, а поисковый робот надпись с названием сайта:

Следует учесть, что скрытый текст не всегда добавляется с целью обмана. Например, если на вашем сайте имеется контент, к которому сложно получить доступ поисковым системам (JavaScript, изображения, Flash-файлы и т. п.), вы можете добавить текстовое описание для этих элементов, чтобы сделать сайт более удобным для индексирования. [support.google.com]

Помимо способов, описанных выше, текст можно сделать прозрачным. Его можно выделить:

Или очень маленьким:

visibility: collapse; для таблицы и нет. Есть ли разница?

Если объединить ячейки столбца и строки

Аналогично для col

visibility: hidden; visibility: collapse; display: none;

16 комментариев:

Я навожу на элемент и у меня прячется div. Если поставить «>», то будет так: навожу на div и он прячется.

Однозначно, id на странице должен быть только один. В примерах я имела ввиду, что это один и тот же элемент.

Источник

Как прятать

Когда display: none, а когда visibility: hidden?

Зависит от того, что вы пытаетесь сделать. Есть и другие варианты как спрятать блок и даже специальный атрибут.

Если вам приходится что-то прятать, то лучше всего это вообще убрать: сайт легче, код чище… ошибок меньше! Но если вам нужно, чтобы оно там пряталось до поры, а потом кому-то пригодилось — это другое дело. Здесь важно не ошибиться с выбором способа.

Самый простой и популярный — display: none, он работает как топор: элемент как будто вырубают из HTML. Его не видно на странице и соседние блоки про него ничего не знают. Просто нет и всё. Его даже скринридеры игоририруют и не читают содержимое — будьте аккуратнее с этим.

Что интересно, несмотря на полное вырубание элемента, браузеры всё равно загружают картинку из img с display: none. Если же картинка указана фоном, то Chrome и Edge её тоже загружают, а Firefox и Safari — нет. Ну, разные у них взгляды на оптимизацию загрузки, что поделать.

Другой способ — visibility: hidden, он работает как кольцо всевластья: элемент вроде здесь и соседние блоки его чувствуют, но его не видно. И чем это отличается от opacity: 0? Opacity просто делает элемент прозрачным (или полупрозрачным), а visibility: hidden ещё не даёт с ним взаимодействовать: навести, кликнуть, сфокусировать.

У visibility: hidden есть другая приятная особенность: свойство наследуется, а значит ребёнок невидимого родителя может сменить видимость на visible. Такой трюк не пройдёт ни с display: none, ни с opacity: 0. С ним удобно делать всплывающие меню и подказки.

Иногда нужно, чтобы элемент не мешал дизайну, но при этом не прятался от скринридеров, оставаясь частью содержимого. Ну не нарисовал дизайнер здесь заголовка, а по логике документа он здесь нужен. Вот бы нам что-то вроде display: hidden или visibility: none! Это я только что придумал, в природе их не существует.

Недавно в черновике CSS Display третьего уровня появилось свойство box-suppress со значениями show, discard и hide. Оно отвязывает видимость блока от display — ведь с обратной стороны от none есть не только block, но и inline, flex, grid. Значение discard привычно вырубает элемент, а hide делает то самое волшебное комбо. Читайте подробнее у Рейчел Эндрю.

К сожалению, до box-suppress нам ещё долго ждать. Его не только ещё нет в браузерах, но уже в том черновике — недавно его перенесли в следующий уровень, чтобы закончить текущий вовремя. Так что придётся делать магию самим — следите за руками.

Есть такой паттерн «visually hidden» или «визуально спрятанный», чтобы прятать элементы из дизайна, но оставлять доступным их содержимое. Про другие нюансы со скринридерами читайте у Тима Райта. Как это работает: вы делаете универсальный служебный класс и добавляете его к элементам, которые нужно доступно спрятать. Обычно его так и называют: visually-hidden, через дефис.

Если посмотреть что внутри, то это обычный position: absolute плюс clip, который обрезает элемент до нуля. То есть он не влияет на соседей и становится невидимым. Все остальные свойства добавляют универсальности и кроссбраузерности, чтобы класс можно было не глядя шлёпнуть на любой элемент. Подробнее читайте в справке к ally.js Родни Рейма.

А вы знали, что любому элементу можно добавить атрибут hidden и он пропадёт? Теперь знаете! В современных браузерах на этот атрибут повешен тот самый display: none, который вырубает элемент. Он бинарный как required или checked, так что его удобно выставлять через JavaScript. Только не забудьте добавить в стили [hidden] < display: none >для IE 10, Safari 5 и других старых браузеров.

Это почти всё, что вам нужно знать про прятки в CSS. Попробуйте эти способы, они все хороши в разных ситуациях. Главное, не рубите с плеча и думайте о доступном содержимом.

Видеоверсия

Источник

Методы скрытия элементов веб-страниц

Веб-разработчикам приходится скрывать элементы веб-страниц по самым разным причинам. Например, есть кнопка, которая должна быть видимой при просмотре сайта на мобильном устройстве, и скрытой — при использовании настольного браузера. Или, например, имеется некий навигационный элемент, который должен быть скрыт в мобильном браузере и отображён в настольном. Элементы, невидимые на странице, могут пребывать в различных состояниях:

HTML5-атрибут hidden

Рассмотрим следующий пример:

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

Вот CSS-код, который здесь использован:

→ Вот пример этой страницы на CodePen

▍Атрибут hidden и доступность контента

Если рассмотреть атрибут hidden с точки зрения доступности контента, то окажется, что этот атрибут полностью скрывает элемент. В результате с этим элементом не смогут работать средства для чтения с экрана. Не используйте этот атрибут в тех случаях, когда некие элементы страниц нужно делать невидимыми для человека, но не для программ для чтения с экрана.

CSS-свойство display

Представим, что мы хотим скрыть изображение из предыдущего примера и решили воспользоваться следующим CSS-кодом:

При таком подходе изображение будет полностью исключено из документа (из так называемого document flow — «потока документа»), оно будет недоступно программам для чтения с экрана. Возможно, вы не очень хорошо представляете себе понятие «поток документа». Для того чтобы с этим понятием разобраться — взгляните на следующий рисунок.

Синюю книгу убрали из стопки

Вот анимированный вариант примера с книгами, показывающий то, что происходит в том случае, если одну из них убирают из стопки.

Если убрать книгу из стопки — положение других книг в ней изменится

▍Производится ли загрузка ресурсов, скрытых средствами CSS?

Если коротко ответить на этот вопрос — то да, загрузка таких ресурсов производится. Например, если элемент скрыт средствами CSS, и мы показываем этот элемент в некий момент работы со страницей, к этому моменту изображение уже будет загружено. Наличие на странице изображения, даже скрытого средствами CSS, приведёт к выполнению HTTP-запроса на его загрузку.

Исследование страницы, содержащей скрытое изображение

Источник

Скрытие элементов в Веб

Дата публикации: 2020-01-31

От автора: в процессе веб-разработки нам нужно скрывать элементы по многим причинам. Например, кнопка, которая должна быть видна в мобильном представлении и скрыта в настольном. Или элемент навигации, который скрыт на мобильном устройстве и отображается на настольном.

При скрытии элемента существует три разных состояния:

Элемент полностью скрыт и удален из потока документа.

Элемент скрыт только визуально и по-прежнему доступен для вспомогательных технологий (АТ), таких как программы чтения с экрана.

Элемент видим, но скрыт только для программ чтения с экрана.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

В этой статье мы узнаем о скрытии элементов в HTML и CSS и рассмотрим аспекты доступности, анимацию и варианты использования для скрытия. Давайте начнем!

Атрибут HTML5 hidden

Это логический атрибут HTML, который скрывает прикрепленный к нему элемент. Когда браузер загружает веб-страницу, он не будет отображать элементы с атрибутом hidden, если это не было переопределено вручную из CSS. Это похоже на эффект применения к элементу display: none. Рассмотрим следующий пример.

У нас есть заголовок, рисунок и описание. Рисунок должен отображаться только в том случае, если ширина области просмотра больше, чем 400px. Я добавил к элементу img атрибут hidden. В CSS я использовал атрибут hidden, чтобы отобразить элемент только в желаемом размере области просмотра.

Ну, вы можете быть удивлены, почему бы не использовать display: none? Хороший вопрос. Когда селектор изображения вызывается через его атрибут hidden, мы можем быть уверены, что даже если CSS по какой-то причине не загрузится, элемент будет скрыт.

Влияние hidden на доступность

С точки зрения доступности hidden полностью скрывает элемент с веб-страницы, поэтому он не будет доступен для программ чтения с экрана. Не используйте его, чтобы скрыть элементы только визуально.

Свойство CSS Display

Каждый элемент имеет значение display по умолчанию, например, inline-block, block, table и т.д. Чтобы скрыть элемент со свойством display, мы должны использовать display: none. Когда элемент скрыт через display: none, все его потомки будут удалены вместе с ним.

Учтите, что у нас тот же пример, что и выше, и мы хотим скрыть изображение.

Это полностью скрывает изображение из потока документа и от программ чтения с экрана. Может быть, вам интересно, что такое поток документа? Смотрите рисунок ниже:

Обратите внимание, что когда синяя книга скрыта, она полностью удалена из стопки. Пространство, которое было отведено ей, ушло. Та же концепция применяется при скрытии элементов в HTML. Зарезервированное пространство для элемента исчезло, и это меняет поток документа или, в нашем примере, стопку книг.

Вот анимация, показывающая, что происходит при удалении книги:

Загружаются ли ресурсы, если они были скрыты через CSS?

Короткий ответ — да. Например, если img скрыт с помощью CSS, и мы отображаем его на определенной контрольной точке, он уже будет загружен. Изображение вызовет HTTP-запрос, даже если оно скрыто с помощью CSS.

В этой демонстрации я добавил только изображение и скрыл его с помощью CSS. Затем я открыл DevTools и проверил вкладку сети, где показано, что изображение загружено.

Мы вернемся к этому позже, чтобы объяснить, как уменьшить количество HTTP-запросов, когда они не нужны на определенной контрольной точке или размере области просмотра.

Элемент style

Стоит отметить, что существуют элементы с display: none по умолчанию. Элемент style может быть добавлен внутри HTML страницы, и мы можем изменить значение его свойства display на block, чтобы он был виден.

Источник

Методы скрытия элементов в CSS

Дата публикации: 2018-09-10

От автора: мы не придаем большого значения скрытию HTML-элементов через CSS; мы делаем это инстинктивно, пока не узнаем об аспекте доступности и о принципиальном отличие различных методов.

Это отличие состоит в том, чтобы полностью скрыть элемент и его содержимое или скрыть элемент, но отобразить его содержимое для чтения с экрана. Мы знаем, что скрытие элемента CSS связано не только с визуальным аспектом, но и с доступностью. Мы можем создавать вещи, которые должны быть невидимы для глаз, но видимы для экранных дикторов.

Конечно, есть и другие области, где важны различия между методами скрытия, например, в случае анимации. Анимировать свойство display невозможно, поэтому мы должны использовать opacity, но при этом скрытый контент останется интерактивным — если у нас есть интерактивный элемент, мы можем взаимодействовать с ним или нет, поэтому нам нужно найти решение, которое обычно связано со свойством visibility.

Вот некоторые примеры из повседневной жизни front-end разработчика, и я думаю они будут интересны вам. Я вспоминаю, сколько раз я скрывал элементы только через CSS, и, будучи честными, я редко использую это сознательно. За годы работы я выработал для себя правила, в каких ситуациях какой метод использовать. Я уверен, что это касается каждого CSS-разработчика.

Как правило, существует три свойства, цель которых — каким-то образом — скрыть элемент: display, visibility и opacity. Вы можете скрыть элемент и по-другому, но для этого вам нужно больше одного свойства. Мы поговорим о других методах в последнем разделе! Давайте начнем исследование!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Скрытие элементов с помощью свойства display

При установке для свойства display значения none мы получим действительно скрытое состояние. Ваш контент будет по-прежнему присутствовать в HTML-файле, но его блок не генерируется, для элементов не будет отведено место. Вы также не можете взаимодействовать с компонентами. Вы можете выбрать элемент через JavaScript, но не можете получить его ширину или высоту.

Если вы используете display: none; все дочерние элементы также будут невидимы, и вы не сможете их вернуть, объявив для них block — или любое другое «видимое» значение. Вы не можете анимировать эти части каким-либо образом (с помощью CSS). Содержимое будет невидимым для экранных дикторов.

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

Скрытие элементов с помощью visibility

Объявление visibility: hidden; — это что-то среднее между display и opacity. При использовании свойства visibility, элемент имеет блок, поэтому он занимает свое место в макете, но мы не можем взаимодействовать с компонентом. Элементы, скрытые с помощью этого свойства, будут невидимы для экранных дикторов, но могут быть анимированы.

Для меня этот метод полезен, когда я разрабатываю выпадающие меню. В случае выпадающего меню мы используем абсолютное позиционирование, поэтому блок не является проблемой, потому что мы изымаем элемент из потока документов. Объединив visibility с opacity, мы можем анимировать элемент, а также отключить взаимодействие, когда выпадающее окно невидимо.

Если вы переключаете видимость, вы можете отобразить раскрывающийся список, когда переходите указателем мыши к тому месту, где оно находится; это потому, что при использовании opacity элемент является интерактивным, но при установке visibility: hidden; он исчезает.

Скрытие элементов с помощью opacity

Используя свойство opacity, мы можем скрыть элементы только визуально; это означает, что у них есть свой блок и они остаются интерактивными. Для этого свойства можно задать значение от 0 до 1, определяя его, мы устанавливаем прозрачность элемента и его дочерних элементов.

Поскольку это просто визуальное скрытие, контент будет доступен для экранных дикторов, и мы также можем его анимировать.

Само по себе это может быть полезно, когда мы разрабатываем какую-либо карточку, где контент отображается при наведении — и это не проблема, потому что мы отображаем его при событии hover — как показано в следующем примере:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Скрытие элементов, но отображение их для экранных дикторов

Как я уже говорил, все становится интереснее, когда вы хотите что-то скрыть, но отобразить для экранных дикторов. Для доступности дизайна это более чем необходимо. Как вы теперь знаете, мы не можем сделать это с помощью предыдущих решений одной строкой кода — нам нужно другое решение, которое является хаком.

Скрытие элементов с помощью position

Источник

• ← Как сделать текст не плагиатом
• Как сделать текст невидимым для пользователей →