@Ankhena у меня куда-то пропал ваш комментарий. но по сути да, нужна обложка, потом её масштабировать. и затем подгонять маску обложки. про это буду на митапе питерджиес рассказывать на следующей неделе как раз
Весь вопрос в том, как сделать удобную кастомизацию с помощью нескольких понятных переменных. Ведь не будешь каждый раз готовить отдельную картинку для маски, когда надо такой типой паттерн реализовать.
Вы же первый начали фантазировать? Я показал пример с простым прогрессбаром, который отлично делается на современном цсс. Вы приплели какой-то сложный интерактивный компонент-диаграмму, который надо делать на d3.js
По поводу исходного примера. Повторю, что я не знаю, какая задача и ограничения стояли у автора. Возможно там весь код оправдан, а ваше решение для него не будет достаточным
Ага, то есть по вашему лучше не решать задачу на новых фичах CSS (которые специально для этой задачи и созданы), потому что ну мало ли что с производительностью.
А лучше использовать для этого старый CSS + JS-библиотеку? Ведь это точно будет лучше по производительности?
Вам, кстати, никто и не предлагал плодить лишние переменные и другие лишние нативные фичи. Их естественно нужно использовать под задачи, где это необходимо. И если интерфейс настолько сложный, что понадобится сотня таких переменных, то никуда не деться. Потому что альтернатива — это в разы больше кода на статичном цсс из препроцессора, приправленного тонной JS-кода. А это "засрёт голову" браузера ещё сильнее
Так а толку от препроцессоров, если единственное, что они делают — это генерят кучу статичного цсс?
Как только появляется возможность избавиться от кучи кода с помощью какой-нибудь новой возможности (например, выражения с нативными переменными и сиблинг-функциями), то не лучше ли избавляться?
Ну и появляются задачи, которые с препроцессором эффективно не решить. Тот же пример с прогрессбаром: https://habr.com/ru/articles/983810/ Берём условную цсс-логику, переменные, и всё это не просто перекрашивается, так оно ещё и нормально анимируется. Как вы такого же добьётесь с помощью препроцессоров?
Тут всё зависит от задачи автора решения. Возможно, ему всё это было нужно. Для каких-то ваших задач что-то будет лишним.
Но я говорю в целом про всё препроцессорное. Оно генерит статичные фичи, которые не работают в рантайме. Препроцессорные переменные проигрывают нативным вчистую. Нативная CSS логика реально работает в рантайме, в отличие от препроцессорной и так далее
Кстати, с if вообще история интересная. Его в 25 году успели зарелизить сначала в кастрированном виде, как аналог стилевых контейнерных запросов. А потом успели проапргрейдить, добавив range syntax for style queries. И вот это была бомба. Но примеров использования пока мало
Препроцессорное решение не работает в рантайме, поэтому оно сразу проигрывает нативному решению. Так что уже пора потихоньку забывать про препроцессоры.
Спасибо за пример! На первый взгляд выглядит реализуемо на CSS и даже несильно сложно. Покумекаю, и если получится, сделаю ещё статью. Не уверен насчёт лёгкой настройки капса, но может и это получится
Согласен, что как только появляются сложные формы шкалы/заполнителя, то приходится использовать SVG. Особенно если это неправильные формы, не воспроизводимые простой геометрией. Только такие вещи вряд ли можно назвать универсальными. Под любой такой сложный прогрессбар надо рисовать отдельную SVG.
Просто раньше и прогрессбары на простых формах тоже приходилось делать на SVG, а сейчас CSS забрал эту головную боль. А ещё дал разработчику важный аргумент в разговоре с дизайнером: "Хочешь так же сложно как нарисовал? Ок, готовь мне сам векторную заготовку. А если чуть упростим, то я сам всё сделаю."
А вообще, интересно посмотреть глазами на примеры, о которых вы говорите
В принципе, эту же логику на чистом CSS можно сделать и без if, и без range syntax. На обычных стилевых контейнерных запросах. У них поддержка намного лучше.
И единственная проблема — это FF, который всё не может зарелизить стилевые контейнерные запросы даже в самой простой версии. Но при этом более сложные размерные контейнерные запросы в FF есть. Так что верим, что и стилевые сделают.
@Ankhena у меня куда-то пропал ваш комментарий. но по сути да, нужна обложка, потом её масштабировать. и затем подгонять маску обложки. про это буду на митапе питерджиес рассказывать на следующей неделе как раз
-
А библиотека и построена на
mask-imageВесь вопрос в том, как сделать удобную кастомизацию с помощью нескольких понятных переменных. Ведь не будешь каждый раз готовить отдельную картинку для маски, когда надо такой типой паттерн реализовать.
Если вас дизайнер заставляет делать такое, то искренне сочувствую =)
Вообще, есть задумка, как и такое реализовать, надо будет поиграться. Если получится — покажу
Вы же первый начали фантазировать? Я показал пример с простым прогрессбаром, который отлично делается на современном цсс. Вы приплели какой-то сложный интерактивный компонент-диаграмму, который надо делать на d3.js
По поводу исходного примера. Повторю, что я не знаю, какая задача и ограничения стояли у автора. Возможно там весь код оправдан, а ваше решение для него не будет достаточным
Ага, то есть по вашему лучше не решать задачу на новых фичах CSS (которые специально для этой задачи и созданы), потому что ну мало ли что с производительностью.
А лучше использовать для этого старый CSS + JS-библиотеку? Ведь это точно будет лучше по производительности?
Вам, кстати, никто и не предлагал плодить лишние переменные и другие лишние нативные фичи. Их естественно нужно использовать под задачи, где это необходимо. И если интерфейс настолько сложный, что понадобится сотня таких переменных, то никуда не деться. Потому что альтернатива — это в разы больше кода на статичном цсс из препроцессора, приправленного тонной JS-кода. А это "засрёт голову" браузера ещё сильнее
Так а толку от препроцессоров, если единственное, что они делают — это генерят кучу статичного цсс?
Как только появляется возможность избавиться от кучи кода с помощью какой-нибудь новой возможности (например, выражения с нативными переменными и сиблинг-функциями), то не лучше ли избавляться?
Ну и появляются задачи, которые с препроцессором эффективно не решить. Тот же пример с прогрессбаром: https://habr.com/ru/articles/983810/ Берём условную цсс-логику, переменные, и всё это не просто перекрашивается, так оно ещё и нормально анимируется. Как вы такого же добьётесь с помощью препроцессоров?
Тут всё зависит от задачи автора решения. Возможно, ему всё это было нужно. Для каких-то ваших задач что-то будет лишним.
Но я говорю в целом про всё препроцессорное. Оно генерит статичные фичи, которые не работают в рантайме. Препроцессорные переменные проигрывают нативным вчистую. Нативная CSS логика реально работает в рантайме, в отличие от препроцессорной и так далее
Кстати, с if вообще история интересная. Его в 25 году успели зарелизить сначала в кастрированном виде, как аналог стилевых контейнерных запросов. А потом успели проапргрейдить, добавив range syntax for style queries. И вот это была бомба. Но примеров использования пока мало
Препроцессорное решение не работает в рантайме, поэтому оно сразу проигрывает нативному решению. Так что уже пора потихоньку забывать про препроцессоры.
Кстати, процент можно выводить без
if(), и буквально в пару строк кода. При анимации он тоже будет нормально изменяться.Да, подготовлю статью, пока просто концепт-черновик
Вот что-то такое получилось. Но решение, конечно, усложнилось
Спасибо за пример! На первый взгляд выглядит реализуемо на CSS и даже несильно сложно. Покумекаю, и если получится, сделаю ещё статью. Не уверен насчёт лёгкой настройки капса, но может и это получится
Ага, вот такое я и назвал страданием с SVG =)
Спасибо! А у ИИ вместо прогрессбаров другой интерфейсный паттерн — печатающийся текст =) Так что да, прогрессбары там редки
Согласен, что как только появляются сложные формы шкалы/заполнителя, то приходится использовать SVG. Особенно если это неправильные формы, не воспроизводимые простой геометрией. Только такие вещи вряд ли можно назвать универсальными. Под любой такой сложный прогрессбар надо рисовать отдельную SVG.
Просто раньше и прогрессбары на простых формах тоже приходилось делать на SVG, а сейчас CSS забрал эту головную боль. А ещё дал разработчику важный аргумент в разговоре с дизайнером: "Хочешь так же сложно как нарисовал? Ок, готовь мне сам векторную заготовку. А если чуть упростим, то я сам всё сделаю."
А вообще, интересно посмотреть глазами на примеры, о которых вы говорите
Спасибо. По идее, да. Правда, реализация усложнится. Похоже, еще одну статью напишу =)
Так-то да, но фокусировался на визуале
В принципе, эту же логику на чистом CSS можно сделать и без if, и без range syntax. На обычных стилевых контейнерных запросах. У них поддержка намного лучше.
И единственная проблема — это FF, который всё не может зарелизить стилевые контейнерные запросы даже в самой простой версии. Но при этом более сложные размерные контейнерные запросы в FF есть. Так что верим, что и стилевые сделают.