Как спрятать элемент в css

Как скрыть элемент, который не помещается в CSS Grid

Нужно указать сколько строчек вы хотите отобразить(grid-template-rows), я так поняв в вашем случаи только 1. Далее надо указать размер автоматически добавляемых строк равным нулю (grid-auto-rows). Ну и наконец обрезать содержимое по высоте (overflow-y).

Возможно надо добавить row-gap, но это уже зависит от дизайна.

.grid < width: 500px; border: 1px red solid; display: grid; grid-gap: 11px; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr; grid-auto-rows: 0; overflow-y: hidden; row-gap: 0; >.item

Отслеживать
ответ дан 17 фев 2022 в 19:20
UserTest013 UserTest013
3,856 1 1 золотой знак 10 10 серебряных знаков 17 17 бронзовых знаков

css
css-grid

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Как скрыть блок в css

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

 Этот блок текста будет скрыт

p  display: none; >

Скрытие элемента

Существует два варианта, чтобы скрыть элемент со страницы:

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

Для первого способа нужно свойству display установить значение none .

Скрытый элемент

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

Блок с белым текстом
 с прозрачным текстом

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

0 — полностью прозрачный

При этом прозрачными становяться все составные части элемента, и всё содержимое.

Прозрачный блок

У блока в примере есть рамка и фон и в нём есть текст, но всё это не видно.

Есть ещё один способ скрыть элемент — спрятать его за другим блоком с позиционированием.

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

Коприрование материалов сайта возможно только с согласия администрации

Как прятать

Когда display: none , а когда visibility: hidden ? — спрашивает нас RedFox. Зависит от того, что вы пытаетесь сделать. Есть и другие варианты как спрятать блок и даже специальный атрибут. Давайте разберёмся!

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Если вам приходится что-то прятать, то лучше всего это вообще убрать: сайт легче, код чище. ошибок меньше! Но если вам нужно, чтобы оно там пряталось до поры, а потом кому-то пригодилось — это другое дело. Здесь важно не ошибиться с выбором способа.

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