Visibility visible: CSS visibility Property

visibility — Wiktionary

Contents

• 1 English
  • 1.1 Etymology
  • 1.2 Pronunciation
  • 1.3 Noun
    • 1.3.1 Synonyms
    • 1.3.2 Antonyms
    • 1.3.3 Derived terms
    • 1.3.4 Related terms
    • 1.3.5 Translations

English[edit]

Etymology[edit]

From Middle French visibilité, from Late Latin visibilitas; equivalent to visible +‎ -ity.

Pronunciation[edit]

• (UK, US) IPA^(key): /ˌvɪz.əˈbɪl.ɪ.ti/, /ˌvɪz.əˈbɪl.ə.ti/, /ˌvɪz.ɪˈbɪl.ɪ.ti/

• Audio (UK)

  (file)

Noun[edit]

visibility (countable and uncountable, plural visibilities)

1. (uncountable) The condition of being visible.
2. (countable) The degree to which things may be seen.

   The visibility from that angle was good.

3. (programming) The scope within which a variable or function is able to be accessed directly.
4. (obsolete, rare) Something worthy of being seen; a sight.
   • 1791, James Boswell, Life of Johnson, Oxford 2008, p. 658:

     ‘Sir, I have seen all the visibilities of Paris, and around it; but to have formed an acquaintance with the people there, would have required more time than I could stay.’

Synonyms[edit]

• apparency
• seeability
• seeableness
• visibleness

Antonyms[edit]

• hiddenness
• invisibility
• latency

Derived terms[edit]

• high-visibility

Related terms[edit]

• visible
• visibly

Translations[edit]

degree to which things may be seen

Arabic: رُؤْيَة‎ f (ruʾya) Asturian: visibilidá f Belarusian: ві́дзімасць  f (vídzimascʹ), ба́чнасць f (báčnascʹ), ба́чымасць f (báčymascʹ), відо́масць f (vidómascʹ) Bulgarian: ви́димост (bg) f (vídimost) Catalan: visibilitat (ca) f Chinese: Mandarin: 能見度 (zh), 能见度 (zh) (néngjiàndù), 可見度 (zh), 可见度 (zh) (kějiàndù) Czech: viditelnost f Danish: synlighed c Dutch: zichtbaarheid (nl) c Estonian: nähtavus Finnish: näkyvyys (fi) French: visibilité (fr) f Galician: visibilidade (gl) f Georgian: ხილვადობა (xilvadoba), ხილულობა (xiluloba) German: Sicht (de) f, Sichtbarkeit (de) f, Sichtverhältnisse f, Sichtweite (de) f Hungarian: láthatóság (hu) Interlingua: visibilitate

Irish: infheictheacht f, léargas m, feiceáil f Italian: visibilità (it) f Japanese: 可視 (ja) (かし, kashi), 顕在 (ja) (けんざい, kenzai) Korean: 시정(視程) (ko) (sijeong) Latin: visibilitas f Latvian: redzamība f Macedonian: видливост f (vidlivost) Polish: widoczność (pl) f Portuguese: visibilidade (pt)  f Romanian: vizibilitate (ro) f Russian: ви́димость (ru) f (vídimostʹ) Serbo-Croatian: Cyrillic: вѝдљиво̄ст f Roman: vìdljivōst (sh) f Slovak: viditeľnosť f Slovene: vidljivost f Spanish: visibilidad (es) f Swedish: synlighet c Ukrainian: ви́димість f (výdymistʹ) Welsh: gwelededd m

Улучшаем отрисовку страницы с помощью content-visibility

Знаете ли вы о существовании новой мощной функции CSS, улучшающей рендеринг страницы? Если нет, то поприветствуйте — content-visibility.

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

В качестве быстрого примера — на одной из страниц сайта нижним секциям задали свойство. Рисунок отображает performance (вкладка инструментов разработки Chrome) при обычной отрисовке страницы (слева) и отрисовке с блоками, где указано content-visibility (справа):

Как работает content-visibility

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

content-visibility использует другой подход. Элементы в блоке со стилем content-visibllity: auto отрисовываются в моменте их необходимости. Они визуализируются белой плашкой непосредственно перед тем, как элемент становится видимым на странице. До этого момента рассчитываются только размеры элемента, а стиль элемента, включая все дочерние элементы, игнорируется.

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

Как использовать content-visibility

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

.element {
  content-visibility: auto;
}

Значения свойства

CSS-свойство content-visibility имеет 3 значения: visible, hidden и auto.

Visible (content-visibility: visible)

visible является значением по умолчанию и не влияет на отключение content-visibility. Контент отображается обычным образом, как только страница загружается.

Hidden (content-visibility: hidden)

Значение hidden может быть немного сложнее для понимания. Оно сочетает в себе лучшие из возможностей CCS display: none и visibility: hidden. Элемент не нужно отрисовывать при загрузке (что экономит время) и не нужно повторно отрисовывать при изменении видимости, за исключением первого раза, когда он становится видимым.

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

Auto (content-visibility: auto)

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

Также следует отметить, что все функции браузера останутся по-прежнему доступны.

Заключение

content-visibility дает прирост скорости почти любого веб-сайта. Это очень легко реализовать с помощью одной строчки кода CSS.

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

Chrome

85

Firefox

 

Edge

85

Safari

 

Opera

71

Смотреть на caniuse. com

Видимость CSS Свойство

❮ Пред. Следующий ❯

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

Имеет следующие значения: видимый, скрытый и свертывается.

Когда для элемента установлено значение «скрытый», содержимое этого тега становится полностью прозрачным, но отображается его место. Но элементы-потомки скрытого элемента могут быть видимыми, если к ним применяется visible:visible.

Если для свойства видимости установлено значение «свернуть», его можно использовать во Flexbox.

Некоторые браузеры не используют значение «свернуть».

 видимость: видимая | скрытый | коллапс | начальная | наследовать; 

Пример свойства видимости со «скрытым» значением:

 

  <голова>
    
    <стиль>
      п {
        видимость: скрытая;
      }
    
  
  <тело>
     
Пример свойства видимости.
  
    
Вот, например, текст.
    
Текст, который не будет отображаться в браузере.
    <дел>
      Вы видите пробел над этим предложением, но на самом деле там какой-то текст, который имеет свойство видимости со скрытым значением.
    

 

  <голова>
    
    <стиль>
      .тест1 {
        видимость: видимая;
      }
      .test2 {
        видимость: скрытая;
      }
    
  
  <тело>
     
Пример свойства видимости
 
    
Lorem Ipsum – это просто фиктивный текст.
  
Lorem Ipsum – это просто фиктивный текст.
    
Пробел выше — это скрытый текст.
  
 

 

  <голова>
    
    <стиль>
      . крах {
        видимость: коллапс;
      }
      Таблица {
        граница: 2px сплошная #666;
      }
      тд {
        граница: 1px сплошная #ccc;
      }
    
  
  <тело>
     
Пример свойства видимости
 
    
Здесь применяется значение "свернуть".
    <таблица>
      
        <тд>10
        100
        1000
      
      
        20
        200
        2000
      
      
        30
        300
        3000
      
      
        <тд>40
         400
        4000