CSS вместо JS и прочее неочевидное применение стилей

Рассмотрим line-clamp, resize, scroll-behavior, target, pointer-events, z-index, backdrop-filter

Рубрики
1С-Битрикс WordPress

1С-Битрикс сделали клёвую подборку неочевидных возможностей CSS. Например, если раньше задачу можно было решить только с помощью JavaScript, то сейчас парой строчек в CSS. Ниже текстовое описание и интерактивные примеры. Также можете посмотреть само видео от 1С-Битрикс.

Оглавление:

  1. line-clamp — скрываем часть текста троеточием
  2. resize — ресайз элемента
  3. scroll-behavior — плавный переход по якорным ссылкам
  4. target — сделать отступ сверху при переходе по якорю
  5. pointer-events — запретить событиям мыши срабатывать
  6. Избавиться от z-index у хедера
  7. backdrop-filter — заблюрить фон и не трогать текст

line-clamp — скрываем часть текста троеточием

Когда нужно отображать только N строчек текста, а остальное скрыть за троеточием. Поддержка браузерами — хорошая.

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

есть ещё вариант с одной строчкой

.one-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Интерактивный пример — покликайте на кнопки под текстом:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

resize — ресайз элемента

.resize {
    overflow: auto;
    resize: both;
}

Выглядит это как-то так (попробуйте изменить размер блоков — тяните за уголок).

Бюджет на сладости
Бюджет на овощи
Бюджет на фрукты

Не помню, чтобы мне хоть раз понадобилась подобная фишка на практике. Если вы пользовались ей в работе — расскажите в комментариях.

scroll-behavior — плавный переход по якорным ссылкам

Когда-то ради Сафари приходилось использовать JavaScript — сейчас нужна буквально одна строчка в CSS.

html {
  scroll-behavior: smooth;
}

Тык, чтобы прокрутить до cодержания статьи.

target — сделать переход по якорю немного пониже

Раз уж мы упомянули переходы по якорным ссылкам. На страницах с фиксированной шапкой переход по такой ссылке вызывает казус: часть контента этим хедером успешно закрывается. В статье Миши Рудрастых есть 5 способов, как сделать дополнительный отступ сверху при переходе по якорной ссылке (мне, например, нравится вариант #4).

Возникает нюанс: ссылок может быть много — прописывать каждому id нужные CSS-свойства неудобно. В таком случае воспользуемся псевдоклассом CSS :target

:target {
   	border-top: 100px solid transparent;
	margin-top: -100px;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
}

Полагаю, в каких-то случаях подобное решение подложит свинью: кроме того, что мы хитрим с верхней границей и внешним отступом, возможно (возможно!), возникнут проблемы с табами, аккордеонами и какими-нибудь ещё интерактивными элементами — тогда правило нужно будет сделать более точечным. Если знаете, что ещё может пойти не так — напишите в комментариях.

pointer-events — запретить событиям мыши срабатывать на элементе

То есть запретить элементу реагировать на перетаскивание, наведение, нажатие (клик) и т.д.

.pointer-events {
  pointer-events: none;
}

Избавиться от z-index у хедера

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

Вы находитесь на нашем сайте уже 0.7 секунды — пора бы что-нибудь и заказать

контент попапа

Теперь маленький интерактивный квиз. Нам всё-таки нужно нормально показать наш попап. Но есть ряд ограничений:

  • мы не можем переместить попап в футер или куда-либо ещё — он должен остаться в той же контентной части страницы
  • мы не можем изменить z-index фиксированного хедера (ещё как можем! Просто не будем этого делать ради спортивного интереса этой задачки)

Что делаем? Выберите правильный вариант ниже и посмотрите на нашу мини-страничку выше. Нам поможет свойство:

  1. +100500 z-index попапу!!11!
  2. filter
  3. opacity
  4. transform

Объяснение чуть ниже — не заглядывайте ниже черты раньше времени!


Да, это неожиданно, но стоит добавить родительскому элементу фиксированного хедера свойства типа filter, opacity, transform (и некоторые другие) — z-index перестаёт действовать. Подробное объяснение про эту магию посмотрите в видео в районе 18:22.

backdrop-filter — заблюрить фон и не трогать текст

Предположим, нужно размыть фон. Нюанс в том, что фильтр размытия влияет и на контент. Для решения задачи можно использовать свойство backdrop-filter. Сравните фото ниже.

c новым годом!

.blur--too-much{
  filter: blur(6px);
}  

c новым годом!

.blur--ok {
  backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
 }

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