Малоизвестные но полезные CSS-свойства
Ранее, в цикле статей про CSS, я рассказывал про редкие псевдоклассы, о которых знают не так много разработчиков. Сегодня Мы поговорим на тему редких, но очень полезных CSS-свойств, которые помогут решить вроде бы тривиальные задачи достаточно изящными способами. Данная статья будет полезна как опытным разработчикам, так и начинающим, которые хотят сразу же брать в руки мощные инструменты.
isolation
Для того, чтобы ты понял необходимость использования данного свойства, для начала, я коротко расскажу про такую штуку в CSS, как контекст наложения (stacking context). Не путать с "this" в Javascript, это разные вещи!
Итак, в CSS существует определённый набор свойств, который создаёт для элемента собственную вычислительную обёртку - контекст. Простым языком - для всех дочерних элементов данное свойство будет иметь не глобальное значение, а вложенное.
Допустим, у нас есть элемент с "z-index: 1". Добавим ему ребенка с большим индексом:
.block1 {
width: 200px;
height: 200px;
background: red;
position: relative;
z-index: 1;
}
.child1 {
width: 100px;
height: 100px;
background: blue;
position: relative;
z-index: 9999;
}В данном случае, истинный "z-index" у дочернего элемента будет равен 1.9999
То есть вычисление будет производиться относительно родителя с данным свойством. Иначе говоря - block1 создал свой собственный stacking context.
Кроме "z-index" собственный контекст создают свойства "position", "opacity", "animation", "transform" и др.
А что если, нам позарез надо создать у элемента контекст наложения, но для свойства, которое его по дефолту не создаёт ? Тут нам на помощь и приходит свойство "isolation".
Используя данное свойство, можно указать элементу принудительно создать stacking context. Это может очень помочь в том случае, когда ты уже настолько запутался в огромных значениях "z-index" у своих элементов, что хочется их организовать более рационально. Порядок действий будет следующим:
1) Найти родительский элемент, для которого структура будет слишком запутанная
2) Создать wrapper для него, с недвусмысленным названием "stacking-context-1"
3) Применить isolation: isolate.
4) Получить готовый контейнер с отдельным контекстом
will-change
Как часто у тебя бывал такой кейс:
Дизайнер просит сделать тебя офигенную, красивую тяжелую и долгую анимацию для какого нибудь блока, которая должна срабатывать только при выполнении какого-нибудь условия (к примеру, появления элемента в области видимости). Ты берешься, делаешь эту анимацию, выставляешь штук 20 промежуточных точек, вычисляемые положения и прочие изыски твоих алгоритмических познаний... вроде бы всё круто, но как только начинаешь тестить, то ловишь странную задержку, между срабатыванием условия и запуском анимации.
В поисках спрятанного delay, ты проводишь остаток рабочего дня и половину вечера, и... ничего не находишь.
На самом деле, браузер пытается вычислить все свойства твоей анимации "на лету". То есть, любая промежуточная точка в анимации вычисляется только в тот момент, когда она действительно необходима. В том случае, если вычислений много или они достаточно массивные - ты можешь ловить freeze или даже полное зависание страницы.
Для оптимизации данного кейса и придумали свойство "will-change".
Это свойство как бы говорит браузеру, чтобы он вычислил все нужные значения заранее, а при срабатывании условия - просто воспроизвел их.
Однако, использовать данное свойство нужно с осторожностью, так как если на странице будет переизбыток "will-change" - тогда ты можешь ждать очень-очень долго самого первого рендера. В большинстве случаев, рациональным подходом будет являться обычная оптимизация кодовой базы анимаций.
accent-color
Обычный стандартный чекбокс. Как известно, элементы взаимодействия с пользователем (input, select, option, textarea) очень привередливые к стилям.
Предположим, тебе нужно изменить цвет галочки с синей на золотистую. Неопытный разработчик сразу начнёт это делать через псевдоэлементы, "display: none" и прочие радости верстальщика. Но ты же читаешь этот канал. Ты умнее. Ты просто воспользуешься свойством accent-color и решишь проблему за секунду:
input[type="checkbox"] {
accent-color: #fcc050;
}
Если ты думаешь, что про это свойство знают все - ты заблуждаешься. Вот как на простой вопрос отвечают на StackOverflow:
... а ниже строк 56 великолепного кода на CSS.
Читать эту статью или писать кучу CSS ? Решай сам.
shape
Закончим эту статью очень интересной группой свойств.
Ты думаешь, я руками проставлял margin для каждого из этих параграфов?
Нет!
Для создания геометрических фигур в CSS достаточно использовать CSS Shapes.
Данное свойство накладывает небольшие ограничения на целевой элемент - он обязательно должен быть с фиксированными размерами, а так же - быть обтекаемым (float). Не слишком высокая цена, не правда ли ?
С помощью shapes можно создавать различные геометрические фигуры без объемной кодовой базы и изображений. Однако, для того чтобы закрасить созданную нами фигуру - нам необходимо использовать shape в комбинации с clip-path. Пример - закрашенный градиентом треугольник:
.circle {
float: left;
height: 200px;
width: 200px;
shape-outside: polygon(0 0, 0 300px, 200px 300px);
clip-path: polygon(0 0, 0 300px, 200px 300px);
background: linear-gradient(to top right, #86F7CC, #67D7F5);
}
На этом от меня - всё. Ставь лайк на эту статью, это очень мотивирует меня!
Буду стараться писать качественный материал как можно чаще
Подписывайся на канал и следи за самой актуальной и интересной информацией в мире Frontend