visibility: visible ( hidden ) | Как сделать HTML элемент невидимым | CSS
Чем отличаются visibility: hidden; от display: none; и opacity: 0;
Рассмотрим в чём различие нижеперечисленных свойств, какое из них лучше подходит для того, чтобы сделать невидимый блок.
Демонстрация
Занимаемое пространство
Видимость потомков
Доступность
Поддержка transition и animation
div @keyframes animaciya < 80%, 100% >
С opacity: 0; элемент полностью прозрачен. Дочерние теги, как и сам родитель, доступны, они, например, могут получать фокус.
При display: none; веб-страница формируется так, словно элемента вместе с его содержимым нет.
Как сделать текст невидимым на HTML странице
И Google, и Яндекс наказывают за текст, который пользователи никогда не увидят. У них есть свои браузеры, а значит технология, которая позволяет выявить это. То есть нужно подумать каким образом и в каком случае скрытый текст будет виден посетителю веб-проекта, например, в результате нажатия на кнопку (см. как сделать такую кнопку) или в виде всплывающего сообщения.
Я так и не поняла приемлема ли ситуация, когда человек видит логотип, а поисковый робот надпись с названием сайта:
Следует учесть, что скрытый текст не всегда добавляется с целью обмана. Например, если на вашем сайте имеется контент, к которому сложно получить доступ поисковым системам (JavaScript, изображения, Flash-файлы и т. п.), вы можете добавить текстовое описание для этих элементов, чтобы сделать сайт более удобным для индексирования. [support.google.com]
Помимо способов, описанных выше, текст можно сделать прозрачным. Его можно выделить:
Или очень маленьким:
visibility: collapse; для таблицы и нет. Есть ли разница?
Веб-разработчикам приходится скрывать элементы веб-страниц по самым разным причинам. Например, есть кнопка, которая должна быть видимой при просмотре сайта на мобильном устройстве, и скрытой — при использовании настольного браузера. Или, например, имеется некий навигационный элемент, который должен быть скрыт в мобильном браузере и отображён в настольном. Элементы, невидимые на странице, могут пребывать в различных состояниях:
HTML5-атрибут hidden
Рассмотрим следующий пример:
В CSS я воспользовался атрибутом hidden для вывода элемента только в том случае, если область просмотра страницы имеет необходимый размер.
Вот CSS-код, который здесь использован:
→ Вот пример этой страницы на CodePen
▍Атрибут hidden и доступность контента
Если рассмотреть атрибут hidden с точки зрения доступности контента, то окажется, что этот атрибут полностью скрывает элемент. В результате с этим элементом не смогут работать средства для чтения с экрана. Не используйте этот атрибут в тех случаях, когда некие элементы страниц нужно делать невидимыми для человека, но не для программ для чтения с экрана.
CSS-свойство display
Представим, что мы хотим скрыть изображение из предыдущего примера и решили воспользоваться следующим CSS-кодом:
При таком подходе изображение будет полностью исключено из документа (из так называемого document flow — «потока документа»), оно будет недоступно программам для чтения с экрана. Возможно, вы не очень хорошо представляете себе понятие «поток документа». Для того чтобы с этим понятием разобраться — взгляните на следующий рисунок.
Синюю книгу убрали из стопки
Вот анимированный вариант примера с книгами, показывающий то, что происходит в том случае, если одну из них убирают из стопки.
Если убрать книгу из стопки — положение других книг в ней изменится
▍Производится ли загрузка ресурсов, скрытых средствами CSS?
Если коротко ответить на этот вопрос — то да, загрузка таких ресурсов производится. Например, если элемент скрыт средствами CSS, и мы показываем этот элемент в некий момент работы со страницей, к этому моменту изображение уже будет загружено. Наличие на странице изображения, даже скрытого средствами CSS, приведёт к выполнению HTTP-запроса на его загрузку.
Исследование страницы, содержащей скрытое изображение
Скрытый текст на сайте – что это? Как и зачем делать текст невидимым
В попытке продвинуть свой сайт веб-мастера и сео-специалисты зачастую прибегают к методам «черной» и «серой» оптимизации. Одним из таких способов является добавление скрытого текста на сайт.
О том, что это такое, и стоит ли использовать этот метод при продвижение веб-ресурса, мы расскажем в данной статье.
Что такое скрытый текст?
Скрытый текст на сайте – такой способ продвижения веб-ресурса, при котором на нем размещается текст, не видимый пользователями сайта, но при этом индексируемый роботами поисковых систем.
Какими способами можно скрыть текст на сайте?
Текст, размещенный на веб-ресурсе, можно скрыть с помощью одного из следующих методов (или использовать несколько из них одновременно):
Зачем текст делают невидимым?
Вышеописанные методы скрытия текста применяются для того, чтобы насытить текстовое содержимое ключевыми словами, чтобы повысить их плотность на конкретной странице сайта, повысив тем самым релевантность страницы в поисковой выдаче.
Последствия использования скрытого текста
Допустимое использование скрытия текста
В некоторых случаях использование скрытого текста является оправданным:
Для улучшения параметров юзабилити
Скрытый текст способен повысить юзабилити, являясь при этом частью его интерфейса – например, в виде скрытого блока выпадающего меню, всплывающих подсказок или анонсов. В данном случае применение этого метода считается «белым» потому, что оно рассчитано не на обман поисковых роботов, а применяется для того, чтобы сделать сайт удобным в использовании для посетителей. В таком случае поисковые системы не «наказывают» веб-ресурс.
Для управления релевантностью
Стоит ли размещать скрытый текст на сайте?
Обнаружив использование этого метода на сайте в тех случаях, когда текст был скрыт в попытках обмануть роботы поисковых систем, последние строго «наказывают» такие веб-ресурсы, вплоть до их исключения из индекса. Поэтому общаться к такому способу имеет смысл только в разрешенных форматах, описанных выше. В иных случаях стоит обратить внимание на другие, «легальные» методы продвижения сайта.
Среди обилия полезных функций Microsoft Word затерялась одна, которая явно понравится конспираторам — это скрытие текста, а заодно и любых других объектов, которые могут содержаться в документе. Несмотря на то что данная возможность программы расположена чуть ли не на самом видном месте, знают о ней далеко не многие пользователи. Скрытие текста вряд ли можно назвать тем, что нужно всем и каждому, но сегодня мы расскажем именно о нем.
Скрываем текст в Ворде
Прежде чем приступить к решению задачи, озвученной в заголовке статьи, отметим, что возможность скрытия текста, таблиц, графиков и графических объектов присутствует в текстовом редакторе от Microsoft отнюдь не конспирации ради — в этом плане от нее не так уж много толку. Основная задача данной функции — расширение возможностей оформления текстового документа. Особенно актуально ее применение, когда в файл Word, с которым вы работаете, необходимо вставить что-то, что явно испортит его внешний вид, стиль, в котором выполнена его основная часть. Как раз в таком случае и может понадобиться скрыть текст.
Скрытие текста
Итак, у вас есть текстовый документ Microsoft Word, фрагмент которого необходимо скрыть. Для этого выполните следующие действия:
Выделенный фрагмент текста будет скрыт. Как мы уже сказали выше, аналогичным образом можно скрывать и любые другие объекты, содержащиеся на страницах документа.
Отображение скрытых элементов
Для того чтобы отобразить ранее скрытые элементы в документе, достаточно нажать всего одну кнопку на панели быстрого доступа — «Отобразить все знаки». Она расположенная в группе инструментов «Абзац» во вкладке «Главная» и показана на изображении ниже.
Быстрый поиск скрытого содержимого в больших документах
Если вам довелось столкнуться с довольно большим по объему и количеству страниц документом, содержащим скрытый текст, будет полезно знать о том, как быстро его найти. Делать это вручную, включив режим отображения всех знаков, о котором мы рассказали выше, будет затруднительно, да и по времени этот процесс может затянуться надолго. Оптимальное решение в такой ситуации — обратиться ко встроенному в Ворд «Инспектору документов». Это средство поиска различных проблем форматирования, рецензирования и не только, и скрытый текст тоже относится к их числу.
К большому сожалению, на данном этапе текстовый редактор от Microsoft не способен самостоятельно отобразить скрытые элементы. Единственное, что предлагает программа, удалить их все. И если вы действительно хотите удалить скрытые элементы, содержащиеся в документе, нажимайте на эту кнопку. Но если нет, создайте резервную копию файла — в ней скрытый текст будет отображен.
Для этого в меню «Файл» программы выберите пункт «Сохранить как», нажмите по кнопке «Обзор», укажите в открывшемся окне «Проводника» конечную папку, задайте новое имя документу и кликните «Сохранить».
Важно: Если вы удалите скрытый текст с помощью «Инспектора документов», восстановить его будет невозможно.
После закрытия «Инспектора документов» (без применения команды «Удалить все» напротив пункта «Скрытый текст») ранее «спрятанное» содержимое электронного документа будет отображено.
Печать документа со скрытым текстом
По умолчанию скрытые элементы документа не выводятся на печать. Если же вам необходимо отобразить на бумажной копии в том числе и все то, что было «спрятано», необходимо внести некоторые изменения в настройки текстового редактора.
После выполнения изложенных выше манипуляций скрытый текст будет отображаться не только в печатной версии файла, но и в его электронном оригинале, который может быть отправлен, например, на виртуальный принтер. Это действие преобразует его в формат PDF.
Заключение
На этом все. Теперь вы знаете, как скрыть текст (вместе с дополнительными объектами или без таковых) в Microsoft Word, а также о том, как отобразить скрытый текст, если вам «посчастливилось» работать с таким документом.
От автора: в CSS есть много различных способов сокрытия элементов. Можно установить opacity: 0, visibility: hidden, display: none или задать сверх большие значения при абсолютном позиционировании. Вы никогда не задумывались, зачем нужно столько много способов для одного и того же действия? Все методы почти не отличаются друг от друга, а существующие различия лишь указывают на то, какой из них и в каких обстоятельствах должен применяться. В этом уроке мы вам расскажем про мелкие отличия данных методов, на которые стоит обращать внимание.
Свойство opacity
С помощью свойства opacity задается прозрачность элемента. Данное свойство не изменяет границы элемента, т.е. если задать 0, то элемент будет скрыт только визуально. Элемент все так же будет занимать свое положение и пространство, влияя на расположение других элементов макета страницы. Кроме того, невидимый элемент будет отвечать на взаимодействие с ним.
Если вы хотите скрыть с помощью opacity элементы от скрин ридеров, то у вас это не получится. Элемент и весь его контент останутся видимыми для скрин ридеров, как и все остальные элементы на странице. То есть элемент ведет себя ровно так, как если бы он был видимым.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Также стоит отметить, что свойство поддается анимации, и с его помощью можно создавать поразительные эффекты. Элемент со свойством opacity меньшим 1задает новый контекст стека.
При наведении курсора на скрытый второй блок элемент плавно меняет свое состояние с полной прозрачности до полной непрозрачности. Блоку также задано свойство cursor: pointer, показывающее, что с ним можно взаимодействовать.
Свойство visibility
Следующее в нашем списке свойство visibility. Если установить значение hidden, то элемент будет скрыт. Как в случае со свойством opacity, скрытый с помощью данного свойства элемент не виден, но не стерт из макета страницы. Отличие от первого свойства в том, что данное свойство запрещает взаимодействовать со скрытым элементом. Также элемент будет скрыт от скрин ридеров.
Данное свойство также поддается анимации, можно менять первоначальное и конечное значения. Т.е. можно плавно анимировать свойство при помощи transition.
В демо ниже показана разница между visibility и opacity:
Обратите внимание на то, что дочерние элементы тега со свойством visibility: hidden могут быть видны, если им задать свойство visibility: visible. Проведите курсором внутри блока, но не доходя до цифры. Как видите, курсор не меняет свое значение на pointer. Также если кликнуть в этой области, то ничего не произойдет.
Свойство display
Свойство display прячет элементы по-настоящему. Если установить элементу свойство display: none, то он не просто будет скрыт, не будет создана даже его блоковая модель. Данное свойство полностью скрывает элемент, будто его и не было. Также в таком случае с элементом нельзя никак взаимодействовать. Скрин ридерам будет не доступен контент скрытого элемента. Т.е. элемент как будто и не существовал.
Также будут скрыты все дочерние элементы. Свойство не поддается анимации, т.е. на него нельзя навесить плавные переходы.
Элемент остается доступным через DOM. Вы все так же можете манипулировать им, как и любым другим элементом.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Откройте вкладку CSS в демо ниже:
В коде видно, что у второго блока есть параграф, которому задано свойство display: block, но он все равно остается невидимым. В этом и есть разница между visibility: hidden и display: none. В первом случае если дочерним элементам задать свойство visibility: visible, то они станут видимыми. Во втором случае такой подход не работает. Все дочерние элементы остаются скрытыми независимо от их собственных значений свойства display.
Наведите пару раз курсор на первый блок. Событие hover выполняется? Если кликнуть на него, второй блок станет видимым. Счетчик во втором блоке должен показывать цифру, отличную от нуля. Блок скрыт от пользователя, но все еще доступен для взаимодействия через JS.
Свойство position
Представьте, что вам нужно создать такой элемент, чтобы с ним можно было взаимодействовать, но в то же время чтобы он не влиял на макет страницы. Ни одно из рассмотренных до сих пор свойств полностью не справлялось с этой задачей. В таком случае можно выдвинуть элемент за пределы видимой области. Элемент не будет влиять на макет, но останется доступным для взаимодействия. CSS код:
