Как скрыть изображение css
Перейти к содержимому

Как скрыть изображение css

  • автор:

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

введите сюда описание изображения

Каким образом возможно через css, убрать подобное у изображения при путом src

Отслеживать
задан 4 дек 2022 в 15:11
Дмитрий Варзанов Дмитрий Варзанов
327 2 2 серебряных знака 14 14 бронзовых знаков
Вам ведь на самом деле не это нужно? Просто удалить img с пустым src пойдёт?
4 дек 2022 в 15:53
[src=»»] , вот вам селектор, а каким способом скрывать решайте вы 🙂
4 дек 2022 в 16:25
Не удалить, убрать это, подфиксить что на скриншоте. Совсем скрывать img это не выход
4 дек 2022 в 19:38

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Если вам нужно «убрать подобное у изображения при пустом src», то всё просто:

Однако вместе с этим исчезнет и атрибут alt=»описание» . Так что, если вам нужно не только скрыть (рыбку съесть), но и вернуть на место описание, то без JS не обойтись. Потребуется сделать как-то так:

// получить все "a > img" с пустым атрибутом [src] let elements = document.querySelectorAll('a > img[src=""]'); // перебрать их и назначить родителю атрибут 'data-alt' for (let el of elements)
/* скрыть пустышки целиком*/ a > img[src=""] < display: none; >/* воссоздать описание */ a::before

Отслеживать
ответ дан 4 дек 2022 в 16:25
623 5 5 серебряных знаков 10 10 бронзовых знаков

А если я вообще не указу src , тогда что будете делать :)? А ещё добавьте изображение где всё указано, так непонятно работает у вас что-то или нет.

4 дек 2022 в 16:48

А вы тут при чём? Может мне за него и весь остальной код написать? Я ответил на вопрос? Ответил. Люди учится на ошибках, а не на готовых решениях. Столкнётся, поймёт, что нужны и прочие нюансы в виде hasAttribute. Не исключено, что ему JS вообще не впёрся, поскольку чел явно не очень владеет предметом.

4 дек 2022 в 16:54

А вы разве это уже не сделали. Да, ответили, но не учли всех кейсов. Справедливо, но вы именно такое решение и написали. Не нужны, достаточно средств CSS, советую вам подробнее ознакомится с псведо-классами. Надеюсь мой комментарий был полезным для вас.

4 дек 2022 в 17:01

Советую вам кстати удалить часть с решением на JS, всё-таки это не совсем подходит под вопрос. Вопрос можно отредактировать кнопкой править.

Ещё четыре способа скрыть и показать элементы при помощи HTML и CSS

Приквел к этой статье – «Четыре способа заставить элементы исчезнуть (и появиться) при помощи CSS» – был сосредоточен на классических техниках для скрытия элементов на странице; на этот раз используются методы, которые работают в современных браузерах, с некоторыми ограничениями для IE. Используется разметка, которая похожа на разметку из предыдущего примера:

 
Nastya, photographed by Sean Archer

Located deep in Siberia, the village of Oymyakon holds the title of the coldest permanently inhabited place on Earth, tied with Verkhoyansk.

From December to February, the weather in the tiny village (population 500) plummets to -50°F (-45C), with a record low of -90°F (-68C) registered in 1933. At those temperatures, a naked human left outside would freeze to death in under a minute…

body < color: #fff; background: url(px.png) #333; line-height: 1.4; font-size: 1.1rem; > figure#oymyakon < float: right; width: 50%; font-size: 0; > figure#oymyakon img < width: 100%; height: auto; box-shadow: 0 0 12px rgba(0,0,0,.3); > figure#oymyakon figcaption < text-align: center; font-size: 1rem; font-style: italic; margin-top: 1rem; >

В этой статье я применяю разные техники для скрытия элемента : можно протестировать эти методы в интерактивном примере в начале оригинальной статьи или перейдя по этой ссылке на CodePen.

Масштабирование элемента в 0

figure#oymyakon < transform: scale(0); >

Очевидно, если вы делаете что-то бесконечно маленьким, это «что-то» в итоге исчезнет. Стоит отменить, что изначальная область элемента сохранится, потому что действие трансформации по сути похоже на поведение элемента с position: relative ;

Возврат значения scale в значение 1 заставит элемент появиться снова; этот переход также может быть анимирован.

Минусы: Поддерживается во всех современных браузерах, но только начиная с IE9+. Нельзя применять к строчным элементам. Для старых версий браузеров требуются префиксы.

HTML5-атрибут hidden

Хотя визуально он действует так же, как display: none , этот элемент фиксирует состояние элемента

При установке элементу, hidden указывает, что элемент еще не имеет или уже не имеет непосредственного отношения к текущему состоянию страницы.

Атрибут hidden уже используется для таких HTML5-элементов, как details . В отличие от других описанных здесь методов, атрибут hidden скрывает элемент от любых способов представления, включая печать, мобильные и скринридеры. Поддерживается всеми современными браузерами, за исключениями одного.

Минусы: Всё ещё не поддерживается в IE, хотя это легко решается в CSS при помощи селектора по атрибуту:

[hidden] < display: none; >

Нулевой height и overflow:hidden

figure#oymyakon < height: 0; overflow: hidden; >

Традиционное решение. Фактически «схлопывает» элемент по вертикали и делает его невидимым; работает при условии, что у элемента нет видимой границы. Стоит отметить, что некоторое пространство на странице для скрытого элемента, вероятно, будет «забронировано»: несмотря на то, что у элемента нет высоты, у него всё ещё есть ширина и, возможно, поле, которые могут продолжать влиять на макет страницы.

Минусы: Не применяется к строчным элементам. Значение height не может быть анимировано, хотя max — height может.

Фильтр размытия

figure#oymyakon < filter: blur(100px); >

Новейший подход, который вообще не будет работать в IE (по крайней мере на данный момент). И всё же blur – интересный вариант, который стоит рассмотреть на будущее.. Достаточное размытие делает элемент полностью невидимым, а при уменьшении значения blur до 0 элемент снова оказывается «в фокусе»

Соображения:

  • размытие небольшого текста работает лучше чем изображения
  • Размытые изображения могут добавить оставшейся части страницы оттенок цвета, в зависимости от их относительного размера и значения blur .
  • Чем выше значение blur , тем больше требуется вычислительных циклов для его достижения; достаточно высокие значения могут существенно загрузить графический процессор, что делает эту технику нецелесообразной для мобильных устройств на данный момент.
  • Поддерживается только в последней версии Firefox (35 версия – прим. перев.) (хотя есть возможность использовать SVG в качестве запасного варианта)
  • Всё ещё требует браузерных префиксов для Chrome и Safari.
  • Как уже было указано, не будет работать ни в каких версиях IE.

С этими и другими методами, рассмотренными в прошлой статье, у вас есть полный набор инструментов для создания элементов, которые появляются и исчезают на странице. Важно понимать, что не существует единственной «правильной» или «лучшей» техники: бывает лишь наиболее подходящий инструмент для конкретной задачи. Это относится и к JavaScript, у которого есть собственные методы для добавления и удаления элементов в DOM.

P.S. Это тоже может быть интересно:
  • Не боритесь с каскадом, управляйте им!
  • CSS-выражения от контейнера для дизайнеров
  • CSS COLORS

Если вам понравилась статья, поделитесь ей!

Как скрыть содержимое от скринридеров

Как скрыть содержимое страницы от скринридеров и других вспомогательных технологий.

Время чтения: 6 мин

Открыть/закрыть навигацию по статье

  1. Кратко
  2. ARIA-атрибут aria-hidden
  3. Классы .visually-hidden, .sr-only, .off-screen
  4. Свойства display: none и visibility: hidden
  5. Атрибут hidden
  6. Дополнительные ссылки
  7. На практике
    1. Татьяна Фокина советует
    1. Какая разница между hidden, aria-hidden=»true», role=»presentation» и role=»none»?
    2. Опишите методы, с помощью которых можно скрыть контент: от всех пользователей, только от пользователей скринридеров, только от зрячих пользователей.

    Контрибьюторы:

    Кратко

    Скопировать ссылку «Кратко» Скопировано

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

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

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

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

    ARIA-атрибут aria — hidden

    Скопировать ссылку «ARIA-атрибут aria-hidden» Скопировано

    Можно использовать атрибут aria — hidden со значением true , чтобы скрыть содержимое от программ чтения с экрана, но оставить его видимым на странице.

       Этот текст виден на странице, но скрыт от скринридера.  p aria-hidden="true"> Этот текст виден на странице, но скрыт от скринридера. p>      

    Будьте осторожны с role = «presentation» и aria — hidden = «true» . Избегайте использования этих атрибутов на видимых элементах, которые находятся в порядке фокуса. Роль presentation удаляет семантику элемента. Интерактивный элемент останется в порядке фокуса даже со сброшенной семантикой. В этом случае пользователи скринридеров смогут на нём сфокусироваться, но не узнают роль элемента.

    Свойство aria — hidden скрывает элемент от скринридеров и других вспомогательных технологий, но не скрывает его визуально. Если используете этот ARIA-атрибут на неинтерактивном элементе с вложенным интерактивным, то вложенный элемент унаследует этот атрибут. Это тоже приведёт к проблемам с доступностью для вспомогательных устройств.

    Классы .visually — hidden , .sr — only , .off — screen

    Скопировать ссылку «Классы .visually-hidden, .sr-only, .off-screen» Скопировано

    Чтобы скрыть контент визуально, но оставить к нему доступ для вспомогательных технологий, можно использовать специальные CSS-стили для визуального скрытия содержимого, которое прочтёт программа чтения с экрана. Для таких стилей обычно используют классы .visually — hidden , .vh или .sr — only . Так как контент с такими стилями по-прежнему является частью содержимого страницы, скринридеры будут его читать.

    .sr — only означает «только для чтения с экрана», хотя имя класса на самом деле не имеет значения.

     .sr-only  clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px;> .sr-only  clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; >      
       Этот текст скрыт визуально, но доступен для скринридеров.  p class="sr-only"> Этот текст скрыт визуально, но доступен для скринридеров. p>      

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

    Давайте используем .sr — only в реальном примере с кнопкой, у которой вместо текста иконка.

        Искать на странице  aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" >  label for="search">Поиск:label> input id="search" type="text"> button class="button"> span class="sr-only">Искать на страницеspan> svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" > svg> button>      

    В демке aria — hidden : true добавлен для того, чтобы скринридер не озвучивал код SVG и не запутывал пользователя.

    Обратите внимание на то, что свойства width : 0px и height : 0px удаляют элементы из потока страницы, поэтому скринридеры их не прочитают.

    Чтобы предоставить скринридеру доступ к элементу, но оставить его скрытым визуально, можно так же использовать атрибут aria — label . Атрибут подойдёт для интерактивных элементов, таких как ссылки, кнопки, а ещё для элементов форм, например input . Однако aria — label не всегда хорошо поддерживается скринридерами для статических элементов. Не забывайте переводить содержимое атрибута, если поддерживаете на сайте несколько языков.

    Другой способ скрыть содержимое от просмотра — вывести его за пределы видимой области просмотра браузера.

     .off-screen  left: -100vw; position: absolute;> .off-screen  left: -100vw; position: absolute; >      

    Свойство position : absolute сообщает браузеру, что нужно удалить элемент из потока страницы и расположить по заданным координатам. Свойство left : — 100vw перемещает содержимое на одну ширину экрана влево.

    Свойства display : none и visibility : hidden

    Скопировать ссылку «Свойства display: none и visibility: hidden» Скопировано

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

    • visibility : hidden скрывает содержимое тега, но оставляет элемент в обычном потоке страницы таким образом, что он по-прежнему занимает место.
    • display : none полностью удаляет элемент из документа. Он не занимает места, хотя всё ещё находится в исходном HTML-коде.

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

        Этот текст виден всем пользователям.   Этот текст скрыт, но элемент занимает место в потоке.   Этот текст снова скрыт и не занимает место на странице.   article> p class="visibility-visible"> Этот текст виден всем пользователям. p> p class="visibility-hidden"> Этот текст скрыт, но элемент занимает место в потоке. p> p class="visibility-none"> Этот текст снова скрыт и не занимает место на странице. p> article>      
     .visibility-hidden  visibility: hidden;> .visibility-none  display: none;> .visibility-hidden  visibility: hidden; > .visibility-none  display: none; >      

    Атрибут hidden

    Скопировать ссылку «Атрибут hidden» Скопировано

    HTML-атрибут hidden работает как display : none . Если добавить атрибут к элементу, он визуально скроется со страницы и не будет занимать место, как-будто его совсем нет.

       Этот текст не виден на странице и не виден для скринридера.  p hidden> Этот текст не виден на странице и не виден для скринридера. p>      

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

    Дополнительные ссылки

    Скопировать ссылку «Дополнительные ссылки» Скопировано

    • Hiding content for screen readers, WebAIM.
    • Hide and show items inclusively, W3C.

    На практике

    Скопировать ссылку «На практике» Скопировано

    Татьяна Фокина советует

    Скопировать ссылку «Татьяна Фокина советует» Скопировано

    �� По идее, скрытый контент с помощью класса .visually — hidden не влияет на поисковую выдачу в Google и не нарушает правила, если делаете это для улучшения доступности. Однако наверняка знать не может никто кроме самого Google.

    На собеседовании

    Скопировать ссылку «На собеседовании» Скопировано

    Какая разница между hidden , aria — hidden = «true» , role = «presentation» и role = «none» ?

    Скопировать ссылку «Какая разница между hidden, aria-hidden=»true», role=»presentation» и role=»none»?» Скопировано

    Скопировать ссылку «Матвей Романов отвечает» Скопировано

    1. hidden — это HTML-атрибут, который предназначен для скрытия элемента на странице. Это означает, что элемент не будет отображаться в пользовательском интерфейсе и скроется от вспомогательных технологий, но он все ещё существует в DOM.
    2. aria — hidden = «true» — это атрибут ARIA (Accessible Rich Internet Applications), который используется для указания, что элемент должен быть скрыт от вспомогательных технологий, таких как скринридеры. Это означает, что элемент не будет доступен для слушателей событий или считывания содержимого вспомогательными технологиями, но он все ещё виден в пользовательском интерфейсе.
    3. role = «presentation» — это ARIA-атрибут, который указывает, что элемент является частью представления или дизайна и не имеет никакой роли в вспомогательных технологиях. Это означает, что роль элемента будет игнорироваться такими технологиями.
    4. role = «none» — это синоним role = «presentation» , который тоже указывает, что элемент не имеет роли для вспомогательных технологий. Это означает, что роль элемента не будет доступна для слушателей событий или механизмов навигации вспомогательными технологиями.

    Опишите методы, с помощью которых можно скрыть контент: от всех пользователей, только от пользователей скринридеров, только от зрячих пользователей.

    Скопировать ссылку «Опишите методы, с помощью которых можно скрыть контент: от всех пользователей, только от пользователей скринридеров, только от зрячих пользователей.» Скопировано

    Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.

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

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

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

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

    HTML5 атрибут hidden

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

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

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

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

    img[hidden] < display: none; >@media (min-width: 400px) < img[hidden] < display: block; >> 

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

    Значения доступности для hidden

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

    CSS свойство display

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

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

    img < display: none; >@media (min-width: 400px) < img < display: block; >> 

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

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

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

    Загружаются ли ресурсы, если они были скрыты с помощью CSS?

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

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

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

    Элемент style

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *