HTML visibility особенности применения свойства и его значения hidden


Содержание материала:

visibility: visible ( h > 23.07.14 NMitra

Чем отличаются visibility: hidden; от display: none; и opacity: 0;

Рассмотрим в чём различие нижеперечисленных свойств, какое из них лучше подходит для того, чтобы сделать невидимый блок.

ВНИМАНИЕ! Не все примеры работают в браузере Google Chrome. Мне было лень прописывать свойству animation префиксы -webkit- .

div div b, div:hover

div div:hover

div div:hover div div:hover

div < clip: rect(0, 0, 0, 0); position: absolute; >div:hover

div div:hover

Демонстрация

Занимаемое пространство

Видимость потомков

Доступность

Поддержка transition и animation

+

+

-+
div @keyframes animaciya < 80%, 100% >

+

+
div @keyframes animaciya < 80%, 100% >

+


div @keyframes animaciya < 80%, 100% >

-+

+

-+
div @keyframes animaciya < 80%, 100% >


div @keyframes animaciya < 0% 80%, 100% >

div @keyframes animaciya < 80%, 100% >

С opacity: 0; элемент полностью прозрачен. Дочерние теги, как и сам родитель, доступны, они, например, могут получать фокус.

С transform: scale(0, 0); элемент полностью сужен, а значит и недоступен. Он продолжает занимать то же пространство, что и при transform: scale(1, 1); .

С height: 0; коробка блока равна сумме margin + padding + border [см. боксовая модель HTML]. Если они не заданы, у блока останется его блочность, иначе говоря, строчные элементы, следующие после него, будут писаться с новой строки. Содержимое тега доступно, но, поскольку блок не имеет высоты, на него наезжают нижестоящие элементы (см. тут второй пример). Скрыть содержимое можно с помощью свойства overflow .

Свойство clip работает только в паре с position: absolute; . При clip: rect(0, 0, 0, 0); элемент обрезан со всех сторон и аналогичен display: none; .

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

Из перечисленных transition и animation не работает с display , height: auto; и clip: auto; .

На CSS можно добиться поставленного результата несколькими способами. Так, например, отображения, аналогичного display: none; , коли добавить position: absolute; или position: fixed; .

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

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

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

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

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

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

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

visibility: collapse; для всех элементов, кроме тегов таблицы работает аналогично visibility: hidden; , что полезно для долгого transition . Этим способом был реализован этот вариант таб-вкладок.

visibility: collapse; для тегов tr , col , thead , tfoot , tbody перестраивает таблицу, при этом учитывая размеры удалённых элементов. Не поддерживается Гугл Хром. Для остальных могут быть проблемы, когда между ячейками одна и та же граница.

1_1

1_2

1_3

2_1

2_2

2_3

Длинная строка 3_1

Длинная предлинная строка 3_2

3_3

4_1

4_2

4_3

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

1_1

1_2

1_3

1_4

2_1

2_2

2_4

3_1

3_4

4_1

4_4

5_1

5_2

5_3

5_4

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

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

1_1

1_2

1_3

2_1

Высокая
превысокая
строка
2_2

2_3

3_1

3_2

3_3

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

Анонимный Любопытная информация. Спасибо. NMitra Пожалуйста. Возможно я что-то упустила — это всё, что смогла вспомнить. MagentaWAVE NMitra, вы уж меня если что простите, но я понять не могу смысл использовать для простого сокрытия объектов такие свойства как transition, animation и opacity. Зачем тогда display и visibility? И зачем для visibility:hidden — применять position:absolute если есть display:none?
И еще одно, мне почему-то кажется что если нужно точно указать «детеныша» элемента то вместо «+» лучше ставить «>», т.е. не #element:hover + div , а #element:hover > div (Посмотрите примеры в Хроме(последний), у меня чего-то ничего не происходит с DIVом при нажатии на кнопочки)
Кстати, не кажется ли вам, что id лучше применять к единичным элементам на странице, а если однотипных элементов много, то лучше пользоваться class?
Заранее спасибо. MagentaWAVE Простите, каюсь, про то что ничего не происходит погорячился — все нормально. Еще раз простите 🙂 NMitra Посмотрите меню http://shpargalkablog.ru/2012/06/vypadayushcheye-menyu-css.html (заключительный образец, где пункты выезжают). С display его не сделать. Грубо говоря, transition нужен для реализации эффектов, своего рода «украшательства».

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

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

Да мне и прощать нечего, это нормальные хорошие вопросы, кот орые могут возникнуть у каждого. MagentaWAVE Спасибо, за пояснения, но как и для чего используется transition я знаю, по-этому и интересовался сутью использования его для скрытия элемента.
«Я навожу на элемент и у меня прячется div. Если поставить «>», то будет так: навожу на div и он прячется.» — это если div не есть дочерним элементом, ну а если у вас в конструкции не один div, а два или три? То скрыт будет только лишь один — последний (если «+») и классы не спасают. Для примера конечно пойдет, но в реале придется «городить».

Менюнюшка у вас конечно знатная получилась, применение overflow интересное NMitra Приведите пример, покажу код. Например, tab-меню в данной статье — это только CSS. MagentaWAVE Это конечно крутое использование INPUTов 🙂 но суть от этого не меняется речь о DIV ах в примере
Допустим нужно скрыть элемент с классом «on»
элемент

visibility

Браузер Internet Explorer Netтscape Опера Safari Mozilla Firefox
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да

Част. — поддерживается частично.

Краткая информация

CSS (ЦСС) CSS (ЦСС)2
Значение по умолчанию visible
Наследуется Да
Применяется Ко всем элементам
Аналог ШТМЛ Нет

Описание

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

Синтаксис

visibility: visible | hidden | collapse

Аргументы

Если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden . В случае использования collapse для содержимого ячеек таблиц, то они реагируют, словно к ним было добавлено стилевое свойство display: none . Иными словами, заданные строки и колонки убираются, а таблица перестраивается по новой. Этот аргумент не поддерживается браузером Internet Эксплорер.

ШТМЛ 4.01 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

Объектная модель

[window.]document.getElementBy >elementID «).style.visibility

Примечание

Аргумент collapse браузер Mozilla поддерживает только с версии 1.8а. Internet Эксплорер это значение игнорирует полностью.

Свойство CSS visibility

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

Синтаксис CSS visibility

Примеры: скрытие объектов в html через visibility

На странице преобразуется в следующее

Примечание:
Псевдокласс :hover не работает вместе с visibility . Другими словами если мы хотим скрывать объекты при наведении, то это не будет работать. Для этого можно воспользоваться другим свойством: opacity, которое отвечает за прозрачность.

Для обращения к visibility из JavaScript нужно писать следующую конструкцию:

Свойство display и visibility

Сегодня мы познакомимся с двумя полезными свойствами без которых нельзя представить современный CSS.

Итак, откройте свой HTML файл и подключите CSS, ведь мы уже начинаем!

Расположить в одной строке display: block

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

Давайте вспомним как ведут себя обычные теги ссылок по умолчанию.

Ссылки стоят вместе, потому что по дефолту они — строчные элементы. Теперь давайте зададим им display: block в CSS файле стилей:

Как видим, мы изменили поведение элементов, сделав из строчных — блочные.

Используйте в браузере комбинацию клавиш CTRL + SHIFT + I чтобы открыть панель разработчика, а затем CTRL + SHIFT + C. Благодаря таким не сложным махинациям мы можем наглядно видеть сколько занимает тот или иной блок.

Просто наведите на нужный элемент!

Расположение в одну строку display: inline

display: inline делает все в точности наоборот — из блочного делает строчным. Причём элемент будет занимать достаточную ширину.

Давайте посмотрим на примере параграфов

, они блочные и занимают всю отведённую им ширину:

А теперь добавим немного CSS:

Как видим, элементы стали в одну строчку.

display: none

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

Свойство visibility

Данное свойство почти как display:none, только элемент будет спрятан, НО лишь его содержимое будет спрятано, а высота с шириной так и останутся.

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

Напишите такую структуру HTML в теге :

И добавьте в CSS:

Посмотрите результат, а после замените на этот код:

Что изменилось? — поделитесь своими наблюдениями в комментариях!

Помогайте другим!

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

Visibility или Display в CSS

Допустим, у вас есть элемент, который вы хотите временно спрятать. Что делать: поменять значение свойства visibility на hidden или лучше назначить свойству display значение none . В чем заключается разница? Как оставшаяся часть страницы будет реагировать на элемент, который, то видно, то нет?

На первый взгляд может показаться, что CSS свойства visibility и display выполняют одну и ту же функцию, однако это не так. Их поверхностная схожесть зачастую сбивает с толку новичков в веб-разработке. Я полагаю, быстрый анализ основных значений этих двух свойств плюс демо- примеры, которые наглядно демонстрируют работу каждого свойства на практике, помогут избежать конфузов и путаницы.

Свойства visibility и display в действии

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

Как работает CSS свойство visibility

Со свойством видимость связаны 4 значения, мы уделим особое внимание тем двум, которые используют чаще всего — значениям видимый ( visible ) и спрятанный ( hidden ).

Имена свойств говорят сами за себя: видимые элементы можно увидеть, а спрятанные нет. Важно отметить, что спрятанные элементы продолжают занимать свое место 1 .

Как работает CSS свойство display

Со свойством display связано довольно-таки порядочное количество значений, мы же опять сосредоточимся на наиболее распространенных. Больше всего нас интересуют значения block и none , плюс, мне бы хотелось вкратце отметить значение встроенный ( inline ).

На первый взгляд может показаться, что между display: none и visibility: hidden можно поставить знак равенства. Это не так. Главное отличие я указал выше 1 .

Элементы, у которых есть свойство display со значениями block или inline , занимают определенное пространство. Разница заключается в том, что блочные элементы имеют разрывы строк вокруг себя, а элементы встроенные ( inline ) не имеют. Некоторые элементы по умолчанию являются блочными ( div , p ), а некоторые встроенными ( a , span , img ).

В каком случае следует использовать visibility, а в каком display?

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

На практике я чаще использую свойство display , так как обычно мне требуется, чтобы на месте убираемого мною элемента не оставалось пустого пространства. При этом при разработке макета страницы важно помнить об эффекте схлопывания и вносить соответствующие коррективы.

visibility и display влияние на SEO

Часто используемая спамовая тактика – заполнить страницу ключевыми словами и сделать их невидимыми. При этом сделать это можно не использую описанные выше CSS свойства, а путем придания тексту цвета фона или же делая текст таким мелким, что он становится практически невидимым.

Поисковые системы «не одобряют» такие выкрутасы и поэтому некоторые разработчики с сомнением выбирают свойства visibility и display , чтобы спрятать элементы html.

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

Параметры отображения html элементов на веб странице. CSS свойства visibility и display

Здравствуйте, уважаемые читатели блога webcodius.ru. Сегодня рассмотрим группу стилевых атрибутов отвечающих за то как html элемент будет отображаться на web странице, будет ли он блочным или строчным, и будет ли отображаться вообще. В эту группу входят два css свойства display и visibility. Особенно важным свойством является display, его наиболее часто применяемые значения вы уже скорей всего встречали в CSS коде: display block, none или inline. Давайте рассмотрим все это подробнее не примерах.

Видимость html элементов — свойство visibility

Свойство стиля visibility предназначено для отображения или скрытия элемента на веб странице:

Атрибут может принимать три значения:

  • visible — элемент отображается на web-странице (значение по умолчанию);
  • hidden — элемент не отображается на странице, или точней сказать, становится полностью прозрачным, так как под него все еще выделено место;
  • collapse — применим только к строкам и столбцам таблицы. Соответствующие строки и столбцы убираются, а таблица перестраивается. Если это значение применяется не к строкам или колонкам таблицы, то результат будет таким же, как со значением hidden.

Ниже можно посмотреть как работает это свойство:

Наведи на меня курсором мыши!

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

В примере выше (область в прямоугольнике) изначально виден абзац с текстом «Наведи на меня курсором мыши!», а ниже под ним пустая область — это элемент p к которому применено правило CSS «visibility: hidden» и соответственно браузер делает его невидимым. Если навести курсор мыши на верхний абзац, то нижний абзац становится видимым, потому что в этом случае к нему применяется правило «visibility: visible».

Стили CSS для этого примера выглядят так:

Наведи на меня курсором мыши!

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

Первое правило CSS говорит браузеру, что хтмл элемент с атрибутом class равным el1 должен быть невидимым на странице. А второе CSS правило означает, что при наведении на элемент с атрибутом class равным el2 его соседний элемент с атрибутом class равным el1 должен стать видимым.

Свойство стиля CSS visibility применяется довольно редко, в основном только для создания подобных эффектов исчезающих и появляющихся элементов страницы.

А вот атрибут display намного популярнее в использовании. Он позволяет не только скрывать и отображать html элементы, но и вообще задавать способы их отображения. При помощи атрибута display блочные элементы можно сделать строчными и даже списком, или вообще скрыть их используя правило display:none. Например, чтобы создать выпадающие меню на чистом CSS без свойства display не обойтись.

Доступных значений у этого стиля довольно много:

Если кратко, то каждое значение оказывает на html элементы следующее действие:

  • block — элемент отображается как блочный;
  • inline — элемент выводится как строчный;
  • inline-block — формирует блочный элемент, который обтекается другими элементами хтмл страницы, по своему действию похож на встраиваемые элементы (вроде тега );
  • inline-table — делает из элемента таблицу, как при использовании тега
    , но при этом таблица является встроенным элементом и она обтекается другими элементами;
  • list-item — элемент становится блочным и к нему добавляется маркер списка;
    none — удаляет элемент из документа, причем занимаемое им место не резервируется и веб-страница формируется так, словно элемента не было;
  • run-in — элемент становится блочным или строчным в зависимости от контекста;
  • table — задает, что элемент является таблицей как при использовании тега
  • ;
  • table-caption — формирует из элемента заголовок таблицы, как при применении тега ;
  • table-cell — элемент представляет из себя ячейку таблицы, подобно тегу
  • .
  • table-row — делает из элемента строку таблицы как тег
  • ;
  • table-row-group — действует как тег
  • .

    Далее рассмотрим наиболее важные значения свойства display подробнее.

    Делаем блочный элемент строчным — значения block и inline

    Из статьей по языку HTML вам должно быть известно, что элементы на веб страницах формируются на основе тегов. То, как эти элементы, будут отображаться в браузере зависит от правил стилевой разметки CSS заданных вами, либо принятых по умолчанию.

    При описании html тегов я часто обращал ваше внимание на тип тега — строчный он или блочный. От этого во многом зависит поведение элемента на веб странице: будет ли он стремиться занять всю ширину страницы и установить разрыв строки над и под элементом (блочные элементы), либо не будет (строчные элементы). За такое поведение элементов, как раз отвечает правило CSS display.

    Узнать к какому типу по умолчанию относится тот или иной тег, можно на странице спецификации CSS «Default style sheet for HTML 4». В самом начале на этой странице перечислены все элементы, относящиеся к блочным, так как для них установлено правило display:block:

    Для остальных элементов, если не указано иного, применяется правило display:inline.

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

    Давайте рассмотрим такой пример:

    Заголовок h1

    В примере два элемента: один блочный (h1) и один строчный (span). Для наглядности каждый элемент залит своим фоном с помощью свойства background:

    На скриншоте видно, что элемент заголовка h1, у которого по умолчанию display равен block, занимает всю доступную ему по ширине область страницы, не смотря на то, что содержащийся в нем текст заканчивается гораздо раньше. А элемент span, у которого значение display по умолчанию принимается равной inline, по горизонтали занимает ровно столько места сколько нужно для заключенного в нем контента.

    В следующем примере сделаем из блочного элемента h1 строчный. Для этого в стилях добавим для него правило display:inline:

    Заголовок h1

    В результате видим, что элемент h1 перестал занимать все доступное ему по ширине пространство и исчез разрыв строки после него, в следствии чего к нему прижался следующий за ним строчный элемент span.

    Точно также, с помощью добавления правила display:block, можно строчный элемент span сделать блочным:

    Заголовок h1

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

    Таким образом, можно манипулировать любыми элементами хтмл страниц: например, превращать заголовки и абзацы в строчные элементы, а строчные элементы оформления текста в блочные.

    Динамика на html странице с помощью правила CSS — display none

    Прописанное для любого элемента правило display:none удаляет его из документа и никак его не отображает. При этом для него даже не резервируется занимаемое место на веб странице, как это было с правилом visibility:hidden, рассмотренном выше. Веб страница формируется так словно элемента и не было на странице.

    Значение «none» для правила display применяется в основном для реализации динамики на странице, используя селекторы псевдоклассов и псевдоэлементов. Например, используя псевдокласс hover, можно задавать правила, которые начинают работать только при наведении мыши на нужный html элемент.

    Таким образом можно реализовать создание выпадающего меню, сделав выпадение содержимого списка при наведении на него мышки. При в обычном состоянии для списка должно быть прописано правило «display:none», а при наведении на него мышкой устанавливать для него правило «display:block»:

    Кроме рассмотренных подробно block, inline и none, правило display может принимать еще множество различных значений. Но они используются редко.

    Например правило display:list-item позволяет сделать блочные теги элементами списка. Например у нас есть несколько подряд идущих абзацев:

    Которые по умолчанию будут выглядеть примерно так:

    Теперь если для этих абзацев прописать правило display:list-item, то браузер сформирует специальную область в которой отобразит маркеры. Правда, чтобы их увидеть, необходимо каким-то образом отодвинуть абзацы от левого края. Сделать это можно с помощью правила margin-left, указав нужный отступ:

    В итоге без использования тегов

      и
      мы создали маркированный html список. При желании можно настроить вид маркера при помощи CSS правила list-style.

    Кроме списка правило display позволяет преобразовывать хтмл теги в таблицу и ее составные части. Для этого каждому элементу таблицы в html коде ставиться в соответствие свое значение дисплей: table, inline-table, table-caption, table-column, table-column-group, table-header-group, table-row-group, table-footer-group, table-row, table-cell.

    И последнее значение display:inline-block, которое генерирует блочный элемент обтекаемый другими внешними и соседними элементами страницы. По своему действию это правило CSS похоже на встраиваемые элементы, подобные тегу .

    Таким образом с помощью правила display можно поменять уже имеющиеся на странице элементы на любые другие. При это не надо вносить изменения в сам html код, а достаточно просто изменить отображение тегов в браузере. Для этого достаточно внести пару строк в содержимое css файла и все.

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

    Как прятать

    Когда 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. Попробуйте эти способы, они все хороши в разных ситуациях. Главное, не рубите с плеча и думайте о доступном содержимом.

    Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Позиционирование : visibility

    Материал из WebWikiABCD

    Содержание

    Атрибут visibility | Свойство visibility

    Определяет будет ли объект показываться или будет скрыт.

    Синтаксис

    или

    ;
  • table-column — элемент является колонкой таблицы, как при теге ;
  • table-column-group — определяет, что элемент является группой одной или нескольких колонок таблицы, как при использовании тега ;
  • table-footer-group — действует подобно тегу .
  • table-header-group — по своему действию значение похоже на тег
  • HTML
    Скрипты [ sVisibility= ] object.style.visibility

    Используемые значения

    sVisibility Строка, которая может определять и принимать от одно из следующих значений:

    inherit Значение по умолчанию. Значение свойства наследуется от родительского объекта. visible Объект видимый. hidden Объект невидимый. collapse Применяется в таблицах для скрытия отдельных строк (row) и столбцов (column). Для остальных элементов его действие аналогично hidden.

    Это свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). Значением по умолчанию является inherit. Атрибут Каскадных таблиц стилей (CSS) не наследуется.

    Замечания

    В отличии от display:none, при использовании данного свойства объект невидим для пользователя, но физически он присутствует на странице, как если бы он был видимый.

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

    Примеры

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

    В первом примере используются два класса, описанных в разделе style, чтобы показывать/скрывать рисунок при наведении пользователем курсора мыши на текст.

    Во втором примере используется вызов функции, чтобы скрыть рисунок.

    Стандарты

    Поддерживаемые браузеры

    Internet Explorer 5.5, 6.0, 7.0, 8.0

    HTML visibility: особенности применения свойства и его значения hidden

    Для того, чтобы сделать элемент невидимым используют свойства visibility (в таком виде: visibility:hidden;) и display (в таком виде: display:none;).

    Обратите внимание, что эти две возможности дают разные результаты.

    visibility:hidden; — (видимость:спрятан;) элемент будет спрятан, но он по-прежнему будет занимать тоже самое место, как и раньше.

    display:none; — (отображать:нет;) также элемент будет спрятан, но он теперь НЕ будет занимать тоже самое место. Страница будет отображаться, как-будто данного элемента нет вообще.

    Рассмотрим обе возможности на примерах.

    Пример 1. visibility:hidden;

    Пример 2. display:none;

    Поиграйтесь кнопками справа, это позволит вам лучше почувствовать, как работают свойства visibility:hidden; и display:none;. Кстати, в реальной практике, эти свойства используются также, как и на этой страничке — в сочетании с программами на JavaScript, когда нужно быстро спрятать или показать какой-то элемент.

    Теперь перейдем к теории.

    Свойство visibility: может иметь два значения:

    • visibility:visible; — видимость включена, это значение по умолчанию.
    • visibility:hidden; — видимость ВЫключена, элемент спрятан, см пример 1 выше, как работает это свойство.

    Что же касается свойства display:, то здесь возможных значений намного больше. Рассмотрим их в таблице ниже.

    Возможные значения свойства display:

    Значение Пояснение
    display:inline; По умолчанию. Показывает элемент как инлайновый (как ).
    Default. Displays an element as an inline element (like )
    display:block; Показывает элемент как блочный (как

    ).
    Displays an element as a block element (like

    )

    display:inline-block; Показывает элемент как блочный контейнер инлайнового уровня. Внутренность блока сформатирована как прямоугольная область блочного уровня. Сам элемент сформатирован как прямоугольная область инлайнового уровня.
    Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box.
    display:inline-table; Показывает элемент как таблицу инлайнового уровня.
    The element is displayed as an inline-level table.
    display:list-item; Позволяет элементу вести себя как элемент
  • .
    Let the element behave like a
  • element.
  • display:run-in; Показывает элемент или как блочный, или как инлайновый, в зависимости от контекста.
    Displays an element as either block or inline, depending on context.
    display:table; Позволяет элементу вести себя, как элемент

    .
    Let the element behave like a

    element..
    Let the element behave like a

    element..
    Let the element behave like a

    element..
    Let the element behave like a

    element.
    display:table-caption; Позволяет элементу вести себя, как элемент .
    Let the element behave like a ) element.
    display:table-column-group; Позволяет элементу вести себя, как элемент .
    Let the element behave like a element.
    display:table-header-group; Позволяет элементу вести себя, как элемент

    display:table-footer-group; Позволяет элементу вести себя, как элемент .
    Let the element behave like a element.
    display:table-row-group; Позволяет элементу вести себя, как элемент

    display:table-cell; Позволяет элементу вести себя, как элемент

    .
    Let the element behave like a

    element.
    display:table-column; Позволяет элементу вести себя, как элемент .
    Let the element behave like a element.
    display:table-row; Позволяет элементу вести себя, как элемент

    display:none; Элемент вообще не будет показан (не работает на слое).
    The element will not be displayed at all (has no effect on layout).
    display:inherit; Значение свойства display: будет унаследовано от родительского элемента.
    The value of the display property will be inherited from the parent element.

    В примере использовали следующие правила для стилей:

    В примере использовали следующий код HTML (ключевые моменты):

    Созданные новые классы в файле стилей CSS и код HTML будем также использовать в нашем очередном учебном тестовом примере.
    css_039_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте.
    css_039_001.zip ← скачайте пример, чтобы установить на свой сайт.

    лабы по информатике, егэ

    лабораторные работы и задачи по программированию и информатике, егэ по информатике

    CSS урок 9. Видимость элемента, оформление ссылок css и списков, курсор

    Видимость элемента в CSS

    display

    Возможные значения:

    • block (отображается как блочный)
    • none (временно удаляет элемент из документа)
    • inline (отображается как встроенный (строчный))
    • inline-block (внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный, обтекается другими элементами (подобно img))
    • list-item (отображается как блочный и добавляется маркер списка)
    • inline-table (элемент в качестве таблицы, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами)
    • table (элемент в качестве блочной таблицы)

    Пример:

    Результат:

    visibility

    Возможные значения:

    • hidden (становится невидимым, но участвует в нормальном потоке элементов)
    • visible (отображается как видимый)
    • collapse (для содержимого ячеек таблиц, отображаются как будто применен стиль display: none (заданные строки и колонки убираются))

    Пример:

    Результат:

    overflow

    Возможные значения:

    • visible (отображается все содержание элемента, даже за пределами установленной высоты и ширины)
    • hidden (отображается только область внутри элемента, остальное будет обрезано)
    • scroll (всегда добавляются полосы прокрутки)
    • auto (полосы прокрутки добавляются только при необходимости)

    Пример:

    Результат:

    Тот же самый пример с другим свойством:

    Результат:

    Изменение курсора в CSS

    cursor

    Возможные значения:

    • url(‘путь к файлу’) (свой собственный курсор из файла изображения)
    • crosshair
    • help
    • move
    • pointer
    • progress
    • text
    • wait
    • n-resize
    • ne-resize
    • e-resize
    • se-resize
    • s-resize
    • sw-resize
    • w-resize
    • nw-resize

    Пример:

    Результат:

    Оформление ссылок в CSS

    Для оформления ссылок в css, прежде всего, следует использовать псевдоклассы, рассмотренные ранее.

    Для стилизации ссылок также используются следующие свойства CSS:

    text-decoration

    со значением none : смотри пример здесь.

    background-color

    например, при наведении курсора менять цвет фона ссылки; смотри пример здесь.

    Желаемый результат:

    Оформление списков в CSS

    Для оформления списков используются следующие свойства:

    list-style-type

    Возможные значения:

    • none (отмена маркера или нумерации)
    • disc
    • circle
    • square
    • decimal
    • decimal-leading-zero
    • armenian
    • georgian
    • lower-alpha
    • upper-alpha
    • lower-greek
    • lower-latin
    • upper-latin
    • lower-roman
    • upper-roman

    Пример:

    Результат:

    • none
    • none
    • disc
    • disc
    • circle
    • circle
    • square
    • square
    1. decimal
    2. decimal
    1. decimal-leading-zero
    2. decimal-leading-zero
    1. armenian
    2. armenian
    1. georgian
    2. georgian
    1. lower-alpha
    2. lower-alpha
    1. upper-alpha
    2. upper-alpha
    1. lower-greek
    2. lower-greek
    1. lower-latin
    2. lower-latin
    1. upper-latin
    2. upper-latin
    1. lower-roman
    2. lower-roman
    1. upper-roman
    2. upper-roman

    list-style-image

    Возможные значения:

    • url(‘путь к файлу’) (установка своего изображения)

    Пример:

    Результат:

    1. пункт 1
    2. пункт 1

    list-style-position (положение маркера или номера)

    Возможные значения:

    • inside (Маркер является частью текстового блока и отображается в элементе списка)
    • outside (Текст выравнивается по левому краю, а маркеры размещаются за пределами текстового блока)

    Пример:

    Результат:

    • пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1
    • пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2

    outside:

    • пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1
    • пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2

    Примерный результат:

    Топ-пост этого месяца:  Основные цели создания сайта – какие они
    Добавить комментарий