От автора: удивительно, но недавно я обнаружила, что большинство людей даже не знают, что двойная позиция для градиентных переходов — это то, что действительно существует в спецификации, поэтому я решила написать об этом.
Согласно спецификации: Задание двух местоположений облегчает создание однотонных «полос» в градиенте, без необходимости повторять цвет дважды.
Я полностью согласна, это было первое, о чем я подумал, когда узнал об этой функции. Допустим, мы хотим получить следующий результат: градиент с кучей вертикальных полос равной ширины:
Хекс-значения: #5461c8, #c724b1, #e4002b, #ff6900, #f6be00, #97d700, #00ab84 и #00a3e0.
Давайте сначала посмотрим, как мы бы сделали это в CSS без использования двойных стоп-позиций! У нас есть восемь полос, что делает каждую из них одной восьмой ширины градиента. Одна восьмая от 100% это 12.5%,. Это означает, что linear-gradient() выглядит следующим образом:
|
1 2 3 4 5 6 7 8 9 |
linear-gradient(90deg, #5461c8 12.5% /* 1*12.5% */, #c724b1 0, #c724b1 25% /* 2*12.5% */, #e4002b 0, #e4002b 37.5% /* 3*12.5% */, #ff6900 0, #ff6900 50% /* 4*12.5% */, #f6be00 0, #f6be00 62.5% /* 5*12.5% */, #97d700 0, #97d700 75% /* 6*12.5% */, #00ab84 0, #00ab84 87.5% /* 7*12.5% */, #00a3e0 0) |
Обратите внимание, что нам не нужно повторять значения % точки перехода, потому что, когда точка перехода меньше предыдущей, у нас автоматически происходит резкий переход. Вот почему всегда безопасно использовать 0 (что всегда будет меньше, чем любое положительное значение) и записывать #c724b1 25%, #e4002b 0 вместо #c724b1 25%, #e4002b 25%, например. Это то, что может упростить нашу жизнь в будущем, если, скажем, мы решим, что хотим добавить еще две полосы и сделать кратность стоп-позиций 10%.
Не так уж плохо, особенно по сравнению с тем, что обычно выдают генераторы градиентов. Но если мы решим, что одна из этих полос в середине должна быть не равна другим, то замена ее на что-то другое означает обновление в двух точках.
Опять же, не так уж плохо, и ничего такого, где мы не могли использовать препроцессор:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$c: #5461c8 #c724b1 #e4002b #ff6900 #f6be00 #97d700 #00ab84 #00a3e0; @function get-stops($c-list) { $s-list: (); $n: length($c-list); $u: 100%/$n; @for $i from 1 to $n { $s-list: $s-list, nth($c-list, $i) $i*$u, nth($c-list, $i + 1) 0 } @return $s-list } .strip { background: linear-gradient(90deg, get-stops($c))) } |
Это генерирует точный CSS-градиент, который мы видели чуть раньше, и теперь нам больше не нужно ничего менять в двух местах.
Однако, даже если препроцессор может спасти нас от необходимости ввода одной и той же вещи дважды, это не исключает повторения сгенерированного кода.
И мы не всегда хотим использовать препроцессор. Не принимая во внимание тот факт, что некоторые люди упрямы или имеют иррациональный страх или ненависть к препроцессорам, иногда кажется немного глупым использовать цикл.
Например, когда у нас совсем немного вещей для обработки! Допустим, мы хотим получить гораздо более простой шаблон background, такой как диагональные линии, который, как я полагаю, представляет собой гораздо более распространенный вариант использования, чем чрезмерно радужный, который, вероятно, в любом случае не подходит для большинства веб-сайтов.
Для этого требуется repeating-linear-gradient(), а это означает небольшое повторение, даже если у нас нет такого же длинного списка шестнадцатеричных значений, как раньше:
|
1 2 3 4 5 |
repeating-linear-gradient(-45deg, #ccc /* can't skip this, repeating gradient won't work */, #ccc 2px, transparent 0, transparent 9px /* can't skip this either, tells where gradient repetition starts */) |
Здесь мы не можем отказаться от первой и последней точек перехода, потому что именно они указывают, как градиент повторяется в прямоугольнике, определенном параметром background-size.
Если вы хотите понять, почему для создания таких вещей лучше использовать repeating-linear-gradient() вместо простого linear-gradient() в сочетании с правильным background-size, ознакомьтесь с этой статьей, которую я написала некоторое время назад.
Это как раз тот случай, когда нам может помочь такая функция — она позволяет избежать повторения в конечном коде CSS. Для случая с радужными полосами наш CSS становится:
|
1 2 3 4 5 6 7 8 9 |
linear-gradient(90deg, #5461c8 12.5%, #c724b1 0 25%, #e4002b 0 37.5%, #ff6900 0 50%, #f6be00 0 62.5%, #97d700 0 75%, #00ab84 0 87.5%, #00a3e0 0) |
А для воссоздания диагональных полос нам нужно всего лишь:
|
1 2 3 |
repeating-linear-gradient(-45deg, #ccc 0 2px, transparent 0 9px) |
Как насчет поддержки? Рада, что вы спросили! Она на самом деле очень хороша! Это работает в браузерах Safari, Chromium (куда теперь входит и Edge!) и Firefox. До-Chromium Edge и, возможно, некоторые мобильные браузеры все еще могут вас сдерживать, но если вам не нужно беспокоиться о поддержке каждого браузера на рынке, это нормально — использовать запасной вариант. Начните работать с этой функцией!
Автор: Ana Tudor
Источник: //css-tricks.com
Редакция: Команда webformyself.
