Visibility

Display-утилиты

Видимость без изъятия из потока

Только для скринридера

.gr-sr-only убирает элемент с экрана, но оставляет его в дереве доступности: текст озвучивается, хотя визуально его нет. Так подписывают иконки-кнопки и поясняют ссылки «Подробнее».

<button>
  <svg aria-hidden="true">…</svg>
  <span class="gr-sr-only">Закрыть диалог</span>
</button>

Генерируемый CSS:

.gr-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

Ссылка «к содержимому»

.gr-sr-only-focusable скрыт ровно до тех пор, пока его не выбрали с клавиатуры: мышью его не видно, по Tab он появляется. Это первая ссылка страницы, позволяющая пропустить навигацию.

<a class="gr-sr-only-focusable" href="#main">Перейти к содержимому</a>

Обратная операция — .gr-not-sr-only: возвращает в поток элемент, скрытый таким образом на узких экранах.

Overflow-утилиты

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

<!-- широкая таблица прокручивается внутри себя, а не тянет страницу вбок -->
<div class="gr-overflow-x-auto">
  <table>…</table>
</div>

Прокрутка внутри скруглённого блока

Полосу прокрутки движок рисует поверх собственного края элемента и по border-radius не обрезает: у скруглённого блока с overflow: auto она срезает углы, а если у блока есть рамка — съедает и её нижнюю сторону. Свойство overflow тут бессильно: оно обрезает содержимое, а не полосу самого элемента.

Приёма два, и выбор между ними — не вкусовой:

<!-- без рамки: хватает одного класса -->
<div class="gr-radius-4 gr-overflow-x-auto gr-scroll-clip">…</div>

<!-- с рамкой: рамка и радиус снаружи, прокрутка внутри -->
<div class="gr-radius-4 gr-overflow-hidden gr-border">
  <p class="gr-overflow-x-auto gr-whitespace-nowrap">…</p>
</div>

Адаптивное скрытие

Классы .gr-hidden-{sm,md,lg,xl} скрывают элемент начиная с указанного брейкпоинта. Полезно для mobile-only / desktop-only элементов.

<div class="gr-hidden-sm">Виден только на мобильных</div>
<div class="gr-hidden-md">Скрыт на планшетах и шире</div>
<div class="gr-hidden-lg">Скрыт на десктопах</div>

Адаптивные display-классы

Кроме скрытия, доступны классы для принудительного изменения display на определённом брейкпоинте.

<div class="gr-hidden gr-block-md">
  Скрыт на мобильных, виден от 768px
</div>

Примеры использования

Видимость — это всегда «что и для кого»: элемент прячется от узкого экрана, но не от широкого; от глаз, но не от скринридера; от экрана, но не от принтера. Рецепты ниже — четыре самых частых расклада.

Мобильное меню

<nav>
  <button class="gr-hidden-md">Меню (гамбургер)</button>
  <div class="gr-hidden gr-block-md">
    <ul role="list" class="gr-flex gr-gap">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

Второстепенное — только широкому экрану

Боковая колонка «Сейчас читают», декоративная иллюстрация, подробности в строке заказа — то, без чего мобильный экран обойдётся. Пара .gr-hidden .gr-block-lg (или .gr-flex-lg, если блок — флекс) прячет элемент через display: до 1024px он не занимает места вовсе, а не оставляет дыру, как оставила бы .gr-invisible. Основной контент при этом один для всех экранов — скрывается только дополнение.

<div class="gr-flex gr-gap">
  <article class="gr-flex-1 gr-min-w-0">Статья — видна всем</article>
  <aside class="gr-hidden gr-block-lg gr-w-1/4">Сейчас читают — только от 1024px</aside>
</div>

Кнопки-иконки с невидимой подписью

Панель действий из одних пиктограмм экономит место, но кнопка без текста нема для скринридера. Подпись кладётся внутрь кнопки с .gr-sr-only: глазами её нет, в дереве доступности — есть. Сами кнопки — .gr-btn .gr-btn-icon .gr-btn-ghost из ui, ряд собирает флекс с мелким зазором.

<div class="gr-flex gr-gap-sm">
  <button class="gr-btn gr-btn-icon gr-btn-ghost">✎<span class="gr-sr-only">Редактировать</span></button>
  <button class="gr-btn gr-btn-icon gr-btn-ghost">⧉<span class="gr-sr-only">Дублировать</span></button>
  <button class="gr-btn gr-btn-icon gr-btn-ghost gr-text-danger">✕<span class="gr-sr-only">Удалить</span></button>
</div>

Скрыть при печати

Страница заказа или статья на печати не нуждается в навигации, кнопках и баннерах. Печатных утилит вроде .gr-print-hidden в библиотеке нет намеренно — сценарий редкий и решается одним своим правилом поверх любого класса или контейнера. Тени при печати библиотека уже глушит сама — токены --gr-shadow-* обнуляются темой.

@media print {
  .no-print { display: none; }
}

<nav class="no-print">…</nav>
<button class="gr-btn gr-btn-primary no-print">Оплатить</button>