Как прятать
Когда display: none , а когда visibility: hidden ? — спрашивает нас RedFox. Зависит от того, что вы пытаетесь сделать. Есть и другие варианты как спрятать блок и даже специальный атрибут. Давайте разберёмся!
Если вам приходится что-то прятать, то лучше всего это вообще убрать: сайт легче, код чище. ошибок меньше! Но если вам нужно, чтобы оно там пряталось до поры, а потом кому-то пригодилось — это другое дело. Здесь важно не ошибиться с выбором способа.
display: none
Самый простой и популярный — display: none , он работает как топор: элемент как будто вырубают из HTML. Его не видно на странице и соседние блоки про него ничего не знают. Просто нет и всё. Его даже скринридеры игоририруют и не читают содержимое — будьте аккуратнее с этим.
/* Вырубает */ .cut-down
Что интересно, несмотря на полное вырубание элемента, браузеры всё равно загружают картинку из img с display: none . Если же картинка указана фоном, то Chrome и Edge её тоже загружают, а Firefox и Safari — нет. Ну, разные у них взгляды на оптимизацию загрузки, что поделать.
Другой способ — visibility: hidden
Он работает, как Кольцо Всевластья: элемент вроде здесь и соседние блоки его чувствуют, но его не видно. И чем это отличается от opacity: 0 ? Opacity просто делает элемент прозрачным (или полупрозрачным), а visibility: hidden ещё не даёт с ним взаимодействовать: навести, кликнуть, сфокусировать.
/* Прячет */ .one-ring < visibility: hidden; >/* Не сработает */ .one-ring:hover
У 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 делает то самое волшебное комбо. Читайте подробнее у Рейчел Эндрю.
/* То, что нужно */ .combo
К сожалению, до box-suppress нам ещё долго ждать. Его не только ещё нет в браузерах, но уже в том черновике — недавно его перенесли в следующий уровень, чтобы закончить текущий вовремя. Так что придётся делать магию самим — следите за руками.
Есть такой паттерн «visually hidden» или «визуально спрятанный», чтобы прятать элементы из дизайна, но оставлять доступным их содержимое. Про другие нюансы со скринридерами читайте у Тима Райта. Как это работает: вы делаете универсальный служебный класс и добавляете его к элементам, которые нужно доступно спрятать. Обычно его так и называют: visually-hidden , через дефис.
Важный за головок, которого нет
Если посмотреть что внутри, то это обычный position: absolute плюс clip , который обрезает элемент до нуля. То есть он не влияет на соседей и становится невидимым. Все остальные свойства добавляют универсальности и кроссбраузерности, чтобы класс можно было не глядя шлёпнуть на любой элемент. Подробнее читайте в справке к ally. js Родни Рейма.
.visually-hidden
А вы знали, что любому элементу можно добавить атрибут hidden и он пропадёт?
Теперь знаете! В современных браузерах на этот атрибут повешен тот самый display: none , который вырубает элемент. Он бинарный как required или checked , так что его удобно выставлять через JavaScript. Только не забудьте добавить в стили [hidden] < display: none >для IE 10, Safari 5 и других старых браузеров.
Вырублен // JS div.hidden = true; Это почти всё, что вам нужно знать про прятки в CSS. Попробуйте эти способы, они все хороши в разных ситуациях. Главное, не рубите с плеча и думайте о доступном содержимом.
Как спрятать элемент за пределами блока
Есть картинка, мне ее надо скрыть на половину, то есть я на половину ее загоняю за пределы блока в котором она находится. Как я могу ту часть которая вылазит скрыть ? Что бы было вроде обрезанной картинки
Отслеживать
Markus Soarez
задан 26 июл 2016 в 8:34
Markus Soarez Markus Soarez
99 2 2 золотых знака 2 2 серебряных знака 7 7 бронзовых знаков
Добавить overflow:hidden контейнеру, который содержит картинку и прочий контент. Тогда всё, что за пределами контейнера, будет скрыто
26 июл 2016 в 8:35
Спасибо, помогло) Это круто!
26 июл 2016 в 8:36
Оформил в виде ответа. Ответ можно принять галочкой слева от ответа. Был рад помочь!
26 июл 2016 в 8:38
Ок, приму, тут ограничитель в 10 минут)
26 июл 2016 в 8:39
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Необходимо добавить overflow: hidden контейнеру, который содержит картинку и прочий контент. Тогда всё, что за пределами контейнера, будет скрыто.
hidden Отображается только область внутри элемента, остальное будет скрыто.
Отслеживать
ответ дан 26 июл 2016 в 8:37
5,542 2 2 золотых знака 20 20 серебряных знаков 41 41 бронзовый знак
Создай div блок и помести в него изображение. В стиле для div укажи overflow: hidden;
.test < height: 524px; width: 250px; overflow: hidden; float: left; >h1
Половина изображения
Отслеживать
ответ дан 26 июл 2016 в 8:52
Brik Vadim Brik Vadim
802 5 5 серебряных знаков 16 16 бронзовых знаков
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как скрыть блок через определенное время
Задача: на сайте выведен элемент, к примеру сообщение, через некоторое время нужно его срыть. Сделать такой прием можно с помощью JS таймера setTimeout() .
В JQuery всё проще – есть метод delay() , который выполняет задержку анимации для методов slideUp() , fadeOut() или hide() .
Скрытие динамически добавленных элементов
В случае если сообщения выводятся динамически, то лучше применить функцию, которая будет выводить и срывать элементы независимо друг от друга.
Потребуется пустой контейнер :
В него будут помещается сообщения, и удаляться через 3 секунды.
function set_message(text) < var $item = $(''); $item.appendTo($('.message-box')).delay(3000).slideUp(200, function()< $item.remove(); >); >
$('.btn-1').click(function()< set_message('This is an awesome message!'); >); $('.btn-2').click(function()< set_message('I agree that your message is awesome!'); >);
Как скрыть блок в версии для ПК?
Здраствуйте поскажыте пожалуста как скрыть в версии для ПК блок «форму поиска» на сайте.
1 2 3 4 5 6 7 8 9 10
div class="col-md-3 sidebar_left"> div id="sticker"> if (!$useTopFullWidthInnerSearchForm): ?> div class="box-content search-inner"> Yii::app()->controller->renderPartial('//site/inner-search'); ?> div> endif; ?> div> div>
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Как скрыть блок для посетителя?
Добрый день! Подскажите как сделать так чтоб посетитель видел один блок входа и регистрации а.
Как скрыть блок div для мобильных устройств
Всем доброго времени суток! Как скрыть блок div для мобильных устройств и по возможности для.
Как скрыть дескриптор в мобильной версии
Добрый день всем. Не могу решить проблему в мобильной версии сайта http://shakirovclinic.ru/ .
Как скрыть кнопку меню в десктопной версии
Есть шапка. При уменьшении до 768px пункты меню заменяются на кнопку, которая открывает эти пункты.
5752 / 4133 / 1506
Регистрация: 06.01.2011
Сообщений: 11,279
На стороне клиента? Можно использовать медиавыражения: https://developer.mozilla.org/. CSS/@media
3106 / 2591 / 1219
Регистрация: 14.05.2014
Сообщений: 7,236
Записей в блоге: 1
Сообщение от Vania87 
div class="box-content search-inner">
div class="box-content search-inner d-lg-none d-xl-none ">
40 / 31 / 11
Регистрация: 25.07.2014
Сообщений: 721
Сообщение от Para bellum
На стороне клиента? Можно использовать медиавыражения: https://developer.mozilla.org/. CSS/@media
Как вариант
1 2 3
@media screen and (min-width:1024px) and (max-width:1600px) { .search-inner{display:none} }
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Как скрыть инфу о версии продукта в интерфейсе android приложении olx
здравствуйте, помогите кто может. нужно в приложении olx.ua (доска объявлений) версия 3.16.2 скрыть.
Как для web-версии и мобильной версии поставить разные картинки
Всем добрый вечер! Кто знает, подскажите: мне необходимо для вебверсии и мобильной версии поставить.
Как скрыть блок?
Ха, неплохо надул с простым вопросом чтобы все пошатнули в эту тему чтобы набить халявную репу:D.
Как скрыть/убрать блок
вот есть макет для мобилки 480*800: <!Doctype html> <html> <head> <!— Кодировка документа —>.
Как скрыть блок тегов Ajax?
Подксажите как скрыть блок тегов при помощи Ajax. Есть сайт mrmix.ru на нём есть блок тегов. Я.
Как скрыть текст невлезающий в блок
Здравствуйте. .par1 < width: 256px; height: 128px; padding: 7px; border: 1px solid red;.
Предыдущая запись