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

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;
}

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 у хедера

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

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

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

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

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

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

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

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

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

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

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