Изготовление сайтов в Белгороде. 10 способов скрыть элементы в CSS

 
 

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

Анимация

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

Доступность

Каждый метод, описанный ниже, визуально скрывает элемент, но он может скрывать или не скрывать содержимое от вспомогательных технологий. Например, программа чтения с экрана все еще может объявлять крошечный прозрачный текст. Дополнительные свойства CSS или атрибуты ARIA, которые aria-hidden="true"могут потребоваться для описания соответствующего действия.

Имейте в виду, что анимация также может вызвать у некоторых людей дезориентацию, мигрень, судороги или другой физический дискомфорт. Рассмотрите возможность использования prefers-reduced-motionмедиа-запроса для отключения анимации, если это указано в пользовательских настройках.

Обработка событий

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

Спектакль

После того, как браузер загрузит и проанализирует объектную модель HTML DOM и CSS, страница визуализируется в три этапа:

Макет: сгенерируйте геометрию и положение каждого элемента

Paint: рисовать пиксели для каждого элемента

Композиция: расположение слоев элементов в соответствующем порядке.

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

1. opacityиfilter: opacity ()

Свойствам opacity: Nи filter: opacity (N) можно передать число от 0 до 1 или процентное значение от 0% до 100%, обозначающее полностью прозрачный и полностью непрозрачный соответственно.

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

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

метрика эффект

поддержка браузера хорошо, но IE поддерживает только opacityот 0 до 1

доступность содержимое не читается, если установлено 0 или 0%

макет повлиял? нет

требуется рендеринг сочинение

спектакль лучше всего, можно использовать аппаратное ускорение

кадры анимации возможны? да

события срабатывают при скрытии? да

2. colorАльфа-прозрачность

opacityвлияет на весь элемент, но также можно установить свойства color, background-colorи по border-colorотдельности. Применение нулевого альфа-канала с использованием rgba (0,0,0,0) или аналогичного делает элемент полностью прозрачным:

Каждое свойство можно анимировать отдельно для создания интересных эффектов. Обратите внимание, что прозрачность не может быть применена к элементам с фоновым изображением, если только они не созданы с использованием linear-gradientили аналогичным образом.

Альфа-канал можно настроить с помощью:

transparent: полностью прозрачный (промежуточная анимация невозможна)

rgba (r, g, b, a): красный, зеленый, синий и альфа

hsla (h, s, l, a): оттенок, насыщенность, яркость и альфа

#RRGGBBAAи#RGBA

метрика эффект

поддержка браузера хорошо, но IE поддерживает только transparentиrgba

доступность контент все еще читается

макет повлиял? нет

требуется рендеринг рисование

спектакль хорошо, но не так быстро, какopacity

кадры анимации возможны? да

события срабатывают при скрытии? да

3.transform

Свойство transformможно использовать для перевода (перемещения), масштабирования, поворота или наклона элемента. A scale (0) или translate (-999px, 0px) вне экрана скроет элемент:

transformпредлагает отличную производительность и аппаратное ускорение, поскольку элемент эффективно перемещается в отдельный слой и может быть анимирован в 2D или 3D. Исходное пространство макета остается как есть, но полностью скрытый элемент не вызывает никаких событий.

метрика эффект

поддержка браузера хорошо

доступность контент все еще читается

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

требуется рендеринг сочинение

спектакль лучше всего, можно использовать аппаратное ускорение

кадры анимации возможны? да

события срабатывают при скрытии? нет

4.clip-path

Свойство clip-pathсоздает область отсечения, которая определяет, какие части элемента видны. Использование такого значения clip-path: circle (0) ;полностью скроет элемент.

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

метрика эффект

поддержка браузера только современные браузеры

доступность контент все еще читается некоторыми приложениями

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

требуется рендеринг покрасить

спектакль разумный

кадры анимации возможны? да, в современных браузерах

события срабатывают при скрытии? нет

5.visibility

Свойство visibilityможет быть установлено на visibleили hiddenдля отображения и скрытия элемента:

Пространство, используемое элементом, остается на месте, если не используется collapseзначение.

метрика эффект

поддержка браузера превосходно

доступность контент не прочитан

макет повлиял? нет, если collapseне используется

требуется рендеринг состав, если collapseне используется

спектакль хорошо

кадры анимации возможны? нет

события срабатывают при скрытии? нет

6.display

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

Тем не менее, это, возможно, худшее свойство CSS для использования в большинстве случаев. Его нельзя анимировать, и он вызовет макет страницы, если только элемент не будет перемещен из потока документа с помощью или не будет принято position: absoluteновое свойство.contain

displayтакже перегружен такими параметрами, как block, inline, table, flexboxи gridдругими. Возврат к правильному значению после display: none; может быть проблематичным (хотя unsetможет помочь).

метрика эффект

поддержка браузера превосходно

доступность контент не прочитан

макет повлиял? да

требуется рендеринг макет

спектакль бедных

кадры анимации возможны? нет

события срабатывают при скрытии? нет

7. HTML- hiddenатрибут

hiddenАтрибут HTML можно добавить к любому элементу:

 

Hidden content

чтобы применить стиль браузера по умолчанию:

[hidden] {

display: none;

}

Это имеет те же преимущества и недостатки, что и display: none, хотя может быть полезно при использовании системы управления контентом, которая не допускает изменения стиля.

8. Абсолютposition

Свойство positionпозволяет перемещать элемент из его staticположения по умолчанию в макете страницы с помощью top, bottom, leftи right. Таким absoluteобразом, -positioned элемент может быть перемещен за пределы экрана с помощью left: -999pxили аналогичной команды:

метрика эффект

поддержка браузера отлично, если не использоватьposition: sticky

доступность контент все еще читается

макет повлиял? да, если позиционирование изменилось

требуется рендеринг смотря как

спектакль разумно, если осторожно

кадры анимации возможны? да, на top, bottom, left, иright

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

9. Наложение другого элемента

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

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

метрика эффект

поддержка браузера превосходно

доступность контент все еще читается

макет повлиял? нет, если абсолютно позиционировано

требуется рендеринг покрасить

спектакль разумно, если осторожно

кадры анимации возможны? да

события срабатывают при скрытии? да, когда псевдо- или дочерний элемент перекрывается

10. Уменьшите размеры

Элемент можно скрыть, уменьшив его размеры с помощью width, height, paddingи border-width/или font-size. Также может потребоваться применение overflow: hidden;, чтобы гарантировать, что содержимое не выльется наружу.

Возможны интересные анимационные эффекты, но производительность заметно лучше с transform.

метрика эффект

поддержка браузера превосходно

доступность контент все еще читается

макет повлиял? да

требуется рендеринг макет

спектакль бедных

кадры анимации возможны? да

события срабатывают при скрытии? нет

Скрытый выбор

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

Поднимите свои навыки работы с CSS на новый уровень с помощью CSS Master. Изучите архитектуру CSS, отладку, пользовательские свойства, расширенные методы компоновки и анимации, как использовать CSS с SVG и многое другое.

3D-печать5GABC-анализAndroidAppleAppStoreAsusCall-центрChatGPTCRMDellDNSDrupalExcelFacebookFMCGGoogleHuaweiInstagramiPhoneLinkedInLinuxMagentoMicrosoftNvidiaOpenCartPlayStationPOS материалPPC-специалистRuTubeSamsungSEO-услугиSMMSnapchatSonyStarlinkTikTokTwitterUbuntuUp-saleViasatVPNWhatsAppWindowsWordPressXiaomiYouTubeZoomАвдеевкаАктивные продажиАкцияАлександровск ЛНРАлмазнаяАлчевскАмвросиевкаАнализ конкурентовАнализ продажАнтимерчандайзингАнтрацитАртемовскАртемовск ЛНРАссортиментная политикаБелгородБелицкоеБелозерскоеБердянскБизнес-идеи (стартапы)БрендБрянкаБукингВахрушевоВендорВидеоВикипедияВирусная рекламаВирусный маркетингВладивостокВнутренние продажиВнутренний маркетингВолгоградВолновахаВоронежГорловкаГорнякГорскоеДебальцевоДебиторкаДебиторская задолженностьДезинтермедитацияДзержинскДивизионная система управленияДизайнДимитровДирект-маркетингДисконтДистрибьюторДистрибьюцияДобропольеДокучаевскДоменДружковкаЕкатеринбургЕнакиевоЖдановкаЗапорожьеЗимогорьеЗолотоеЗоринскЗугрэсИжевскИловайскИрминоКазаньКалининградКировскКировскоеКомсомольскоеКонстантиновкаКонтент-маркетингКонтент-планКопирайтингКраматорскКрасноармейскКрасногоровкаКраснодарКраснодонКраснопартизанскКрасный ЛиманКрасный ЛучКременнаяКураховоКурскЛисичанскЛуганскЛутугиноМакеевкаМариупольМаркетингМаркетинговая информацияМаркетинговые исследованияМаркетинговый каналМаркетинг услугМаркетологМарьинкаМедиаМелекиноМелитопольМенеджментМерчандайзерМерчандайзингМиусинскМолодогвардейскМоскваМоспиноНижний НовгородНиколаевНиколаевкаНишевой маркетингНовоазовскНовогродовкаНоводружескНовосибирскНумерическая дистрибьюцияОдессаОмскОтдел маркетингаПартизанский маркетингПервомайскПеревальскПетровскоеПлата за кликПоисковая оптимизацияПопаснаяПравило ПаретоПривольеПрогнозирование продажПродвижение сайтов в ДонецкеПроизводство видеоПромоПромоушнПрямой маркетингРабота для маркетологаРабота для студентаРазработка приложенийРаспродажаРегиональные продажиРекламаРеклама на асфальтеРемаркетингРетро-бонусРибейтРитейлРовенькиРодинскоеРостов-на-ДонуРубежноеСамараСанкт-ПетербургСаратовСватовоСвердловскСветлодарскСвятогорскСевастопольСеверодонецкСеверскСедовоСейлз промоушнСелидовоСимферопольСинергияСколковоСлавянскСнежноеСоздание сайтов в ДонецкеСоледарСоциальные сетиСочиСтаробельскСтаробешевоСтахановСтимулирование сбытаСуходольскСчастьеТелемаркетингТельмановоТираспольТорговый представительТорезТрейд маркетингТрейд промоушнТюменьУглегорскУгледарУкраинскХабаровскХарцызскХерсонХостингЦелевая аудиторияЦифровой маркетингЧасов ЯрЧелябинскШахтерскЮжно-СахалинскЮнокоммунаровскЯндексЯсиноватая