#фишка дня

Пользовательские свойства CSS, иногда с лёгкой руки своей же функции называемые переменными, уже весьма плотно обосновались в стилях.

Особенностей работы с ними огромное множество, но меня повеселил один интересный подход.

Итак, если установить свойству пустое значение при помощи комментария (/**/), парсер пропустит его и использует следующее определение. Получается условный оператор на коленке.

Например:

body {
  background-color:
    var(--mq-small, sandybrown)
    var(--mq-large, mediumslateblue);
}

Здесь mq означает «Media Query». Уже догадались, что будет дальше? 🤔

Правильно! Можно сбросить значение свойства до пустого по медиа-запросу! Тогда браузер просто пропустит его и применит следующее:

@media (min-width: 640px) {
  :root {
    --mq-small: /**/ ;
  }
}
@media (max-width: 639.5px) {
  :root {
    --mq-large: /**/ ;
  }
}

В общем, чтобы далеко не ходить, держите CodePen: https://codepen.io/alinaki/pen/xxgjYpb

Так можно поступать не только с медиа-запросами, но и с псевдоклассами (:hover и т. д.). Теперь вам достаточно лишь изменить значение свойства, а не перезаписывать всё правило целиком.

#библиотека дня

Рано или поздно каждый сталкивается с построением графиков и диаграмм. И так устоялось, что без JavaScript-библиотек тут никуда.

Из бесплатных и/или открытых: Recharts, Chart.js, D3 для чего похардкорней, Google Charts… Из коммерческих у всех на слуху, естественно, Highcharts.

Ещё есть интересные способы рендера диаграм в HTML и SVG, но они оба достаточно сложны и подходят, скорее, для проектов с SSR (server-side rendering), ведь сначала нужно правильно сгенерировать разметку.

Но я хочу поговорить о подходе без скриптов вообще. Одним только CSS. Семантично. С дикой скоростью отрисовки для десятков диаграмм.

Откуда возьмутся десятки диаграмм? Ну, последний год нам это прекрасно продемонстрировал.

Что такое диаграмма? Это лишь способ представления данных. Чаще всего — табличных данных. На ум приходит очевидное: нужно лишь правильно наложить стили на таблицу и бум – готово.

Но не всё так просто. До недавнего времени у нас не было рабочих инструментов для этого. CSS Grid, flex и clip-path достигли нужного уровня поддержки давно, но не было главного: простого способа передать данные в CSS. Догадываетесь, о чём речь?

Ага. Custom properties, пользовательские свойства. Переменные, если хотите. Их киллер-фичей является возможность установить значение свойства через атрибут style. Он подхватится стилями и позволит изменить вид элемента до неузнаваемости. Область применения безгранична.

Итак, меньше слов больше ссылок. Вашему вниманию предлагается Charts.css: https://chartscss.org/

Принцип работы прост: берётся таблица, указываются пара классов, основной и тип желаемой диаграммы, и в некоторых случаях – в стили через установку значений свойств ячеек передаются реперные точки. Всё, ваша таблица стала, например столбчатой диаграммой.

Да, это всё ещё чуть сложнее, чем просто передать немного JSON-а, но не забывайте, что таблица – максимально семантична и в некоторых условиях может быть отображена в мини-виджетах Google и Островах Яндекса, что прекрасно для SEO.

Ну и при печати или генерации PDF можно будет легко выбрать нужный формат.

Библиотека всё ещё в разработке и самые вкусные решения впереди, присоединяйтесь!

#css #table #chart #diagram

#заметка дня

CSS-градиенты, конечно, были в своё время прорывом, вот только есть одна проблема.

Математически линейное изменение цвета и/или прозрачности глазом воспринимается слишком резким и… ранним.

Точно так же как и с transition, можно было бы применить функции плавности (easing). Правда, это потребует некоторых усилий, в стандарт CSS они пока не вошли.

В оригинальной статье есть генератор, но можно воспользоваться и PostCSS-плагином. По большому счёту мы лишь добавляем множество остановок цвета, чтобы сгладить переход.

Можно, конечно, и проще. Добавить промежуточный цвет при помощи пары остановок, т. н. подсказки перехода. Этот цвет может стать едва ли не основным: https://codepen.io/argyleink/pen/GRZoQLB

Какой бы способ вы ни применили, доверяйте своим глазам.

#css #color #gradient #easing

#ссылка дня

Как много сайтов серьёзных инвестиционных компаний вы видели? Обычно считается, если видели один — видели все.

Это не тот случай.

The Yamauchi No. 10 Family Office. Компания, которая управляет инвестициями семьи Хироси Ямаути, президента Nintendo. Что такое Nintendo объяснять, наверное, не надо.

Ещё раз, это — не портфолио веб-дизайнера. Это крупная инвестиционная контора.

Япония удивляет, конечно. Большинство японских сайтов в принципе будто в нулевых остались.

#webgl #pixel #graphics

#фишка дня

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

Лично мне непонятно, зачем так делать. Оставляйте хоть небольшую подсказку пользователям, на мобильных телефонах и macOS и так скроллбар скрыт (почти) всегда.

Но раз пошла такая пляска, давайте решать проблему. Без JavaScript.

1. Обёртка и избыточная ширина

Старое как мир решение. Добавляем контейнеру избыточную ширину, чтобы его скроллбар вышел за пределы обёртки. В данном случае я предпочитаю создавать избыточную ширину абсолютным позиционированием: https://codepen.io/alinaki/pen/bGgmqVx

25px — ширина скроллбара — взята наобум. Она колеблется от 17 до 23 пикселей в различных средах.

Вы уже чуете, что ерунда какая-то, правда? Но это решение ещё несколько лет назад было единственным, ведь приходилось поддерживать старые браузеры.

2. Правила для работы с полосой прокрутки

Здесь всё максимально просто: у каждого из четырёх (трёх?) современных и сравнительно современных движков имеются соответствующие правила для скрытия полосы прокрутки: https://codepen.io/alinaki/pen/YzNJGOa

Но если вы решились на такое, пожалуйста, дайте пользователю какую-нибудь подсказку, что можно скроллить. Ведь иногда ваш контент может быть поделён ровно по абзацу или строке/колонке.

В таком случае можно, например, наложить тени: https://codepen.io/alinaki/pen/oNBaWvq

#css #scroll #ux

#баг дня

Правило clip-path, обрезка, стало нынче довольно популярным.

Но пользоваться им нужно всё так же осторожно. Пример от Анны Тюдор:

clip-path: inset(80% 0 0 round 8%)

От чего конкретно отсчитываются 8% скругления?

Chrome и Safari (Blink и WebKit) отсчитывают их относительно изначального размера элемента.

Firefox (Gecko) – от уже обрезанного прямоугольника.

И, судя по всему, это баг в Firefox. Согласно спецификации, round в inset задаётся согласно синтаксису для border-radius, который в свою очередь устанавливает отсчёт от бокса элемента. Впрочем, прочитать можно как угодно.

И подобных мест в спецификации до сих пор неприлично много.

Пример:
https://codepen.io/alinaki/pen/qBRQRye

#css #firefox #clippath #bug

#codepen дня

Мамочки мои, работающий секундомер без единой строчки JavaScript: https://codepen.io/jh3y/pen/jOVmJBL

Когда начинаешь разбирать код – всё довольно просто, анимация через steps для десятых долей, секунд и минут. Но вместе — потрясающе.

Рекомендую попастись на странице автора, это его кнопки в стиле CyberPank2077 недавно разлетелись по всем каналам.

👉 @htmlshit

#css #counter #animation #steps

#фишка дня

Вам уже должен быть хорошо знаком input type=“number”. Кто-то наверняка даже пытался стилизовать раздражающие стрелочки.

Но мало кто знает, что это (и ещё одно, угадайте, какое) поле ввода предоставляет свои псевдоклассы: :in-range и :out-of-range. Уже понятно, что они делают: если вы установили атрибуты min и max, вышеуказанные псевдоклассы позволят воспользоваться этим знанием в CSS.

input:out-of-range ~ span {
  color: red;
}

И естественно, подъехал (вот буквально) шикарный CodePen на эту тему:
http://codepen.io/jh3y/pen/MWWowEb

👉 @htmlshit

#css #input #number #range

Ветром принесло новость, что у этого проекта (https://www.htmhell.dev/) появился уродливый брат-близнец: https://csshell.dev/

Отдельного поста не очень пока достоин, так что спешите дополнять. To Hell with bad CSS!

Как всегда, постарайтесь не найти там себя.

#баг дня

Достаточно странная ситуация, но сочетание свежего правила aspect-ratio и display: grid ломает позиционирование элементов через align-content или place-content. Вот два разных примера:

align-content:
https://codepen.io/alinaki/pen/dyNaRgr
place-content:
https://codepen.io/thebabydino/pen/rNjogOa

Safari и Firefox ведут себя корректно. Если убрать padding, то и Chrome начинает позиционировать правильно, но пока что модель сломана.

Ссылка на трекер: https://bugs.chromium.org/p/chromium/issues/detail?id=1166875

Будьте осторожны.

#grid #aligncontent #placecontent

#заметка дня

Во времена расцвета jQuery реализация аккордеона — набора раскрывающихся блоков — укладывалась в метод slideToggle. Одна-две строчки – и готово.

Сейчас же jQuery не в почёте, а CSS Transitions не дают нам возможности анимировать высоту от 0 до auto. Браузеру не известна высота блока до того, как блок будет отображён. Так какой же выход из ситуации?

Чтобы это понять, надо сначала осознать, как когда-то с этим справлялась jQuery.

А она всего лишь производила кучу вычислений прямо перед вашими глазами: показывала блок, рассчитывала высоту контента, сохраняла, ставила в ноль и изменяла значение высоты блока используя заданную функцию плавности.

Комбинируя это знание с тем фактом, что CSS не может анимировать высоту до auto, в голову сразу приходит несколько решений.

1. Установка transition на max-height, вместо height. От 0 до абсурдно большого значения. Плюсы — можно вообще JS не писать. Минусы — если сильно ошибся с предполагаемой высотой, функция плавности сойдёт с ума.

2. Считать scrollHeight и анимировать до него. Собственно, фактически то же самое, что делал jQuery. Плюсы: полный контроль над происходящим Минусы: без JS работать не будет (в самом популярном случае вы просто оставляете аккордеон раскрытым).

3. Ну мы же в 2021 году, есть пользовательские свойства! Устанавливаем значение свойства равным высоте scrollHeight, как во втором случае, и дело в шляпе: https://codepen.io/alinaki/pen/OJWqXGV Плюсы: минимальный объём кода, минусы — поддержка пользовательских свойств в вашем таргете может отсутствовать. Зато если поддержки нет или JS выключен — анимации просто не будет.

А чтобы всё это было доступно с клавиатуры — не забываем применить технику «визуального скрытия (visually hidden)» на чекбоксы и установить лейблу стили для фокуса.

#css #customproperties #accordion

Попробовал немного причесать код из заметки выше и возник вопрос.

Стоит ли в подобном коде обозначать просто концепт, или если делать – то уже практически готовую к продакшену вещь?

Приглашаю к обсуждению.

#инструмент дня

Уметь пользоваться отладчиком должен каждый разработчик.

Особенно когда инструменты становятся всё дружелюбнее, да ещё и встроены в браузер.

Итак, как отследить, какой код вызвал изменение атрибута (или поддерева, или вообще удаления) элемента?

Находим элемент в инспекторе, правой кнопкой – «Break on» ➡️ «attribute modifications» и... и в общем, всё, смотрите видео.

Теперь исполнение остановится по условию и вы сможете посмотреть код, изменивший ваш атрибут, прямо во вкладке «Sources». Там же можно добавить больше точек останова или просто продолжить.

#js #debug #devtools

#библиотека дня

Хочется подобрать палитру для дизайна или логотипа? А может, создать тему на основе загруженной пользователем фотографии?

Для этого нужно выделить из изображения доминантные цвета.

А с этим поможет проект Color Thief: https://lokeshdhakar.com/projects/color-thief/

Работает в браузерах и в Node.js, лицензия допускает коммерческое применение.

Использование очень простое, документация снабжена исчерпывающими примерами.

#js #color #palette

#codepen дня

Восхищаться красивыми примерами можно бесконечно, но полезные – гораздо… практичнее.

Вот недавно прошла очередная презентация Apple Keynote. Что сделает хороший разработчик? Правильно, воссоздаст анимацию её логотипа: https://codepen.io/Mamboleoo/pen/ZELqMOg

Что же сделает отличный разработчик?

А он не просто воссоздаст, но и покажет, как конкретно. Разложит на шаги и снабдит код подробными комментариями: https://codepen.io/Mamboleoo/pen/qBRQXPN

Кому не хватало понимания, как конкретно пишутся анимации с использованием GSAP – самое время пойти и попробовать.

👉 @htmlshit
#svg #canvas #gsap

#библиотека дня

Раскладка Masonry (буквально — каменная кладка), когда элементы уложены максимально плотно, до сих пор не потеряла своей популярности. Её отличие от классических CSS-колонок – в порядке следования элементов. Если колонки это

1 4 7
2 5 8
3 6

то в Masonry- или Pinterest-раскладке порядок стремится к классической сетке:

1 2 3
4 5 6
7 8

Но в сетке все ячейки одного размера, а в кладке – нет (смотрите иллюстрацию). Была даже попытка внедрить это в CSS Grids, в одной из версий Firefox.

Долгое время де-факто стандартом библиотеки для Masonry была, собственно, Masonry.js. Но она достаточно тяжёлая и её методы немного устарели. Сейчас же есть много альтернатив.

Одна из новых и сравнительно легковесных — это FlexMasonry. Весит всего 6 килобайт, подключается очень просто и с задачей справляется отлично. Ну и использует флексы, как нетрудно догадаться из названия 😉

👉 @htmlshit
#css #js #flex #masonry

#codepen дня

Знакомая и популярная гифка, не правда ли?

Пришло время развеять миф! Мне кажется, вы достаточно готовы к двум практически одинаковым примерам на разных техниках.

Раз, на свежих Container Queries, если ваш браузер их поддерживает: https://codepen.io/jh3y/pen/LYxKjKX

Вот только есть нюанс! Как только их завезли в Chrome Canary, появился и полифилл. Именно этот полифилл и используется в примере, так что работает практически везде.

Два, на CSS Custom Properties: https://codepen.io/jh3y/pen/KKajeyy

В общем, на современном CSS сложнее неправильно сложить жалюзи, чем правильно. С чем я всех нас и поздравляю.

👉 @htmlshit
#css #containerqueries #customproperties #polyfill

#фишка дня

TIL что в CodePen можно просто бросать файлы и он их подхватит. Подумалось, а нет ли возможности извлекать разметку, стили и скрипты из локальных файлов и забрасывать их в CodePen максимально автоматизированно?

Так вот, есть! Утилита буквально называется codepen-prefill и создана именно для этой цели: https://github.com/yuanchuan/codepen-prefill

npx codepen-prefill index.html

Извлечёт все встроенные стили и скрипты из файла и закинет их в окно редактора. Останется лишь сохранить.

👉 @htmlshit
#codepen #npm #npx #utility

#статья дня

Ахмад Шадид разбирает, как прогрессировала кроссбраузерная веб-разработка за 10 лет: https://ishadeed.com/article/cross-browser-development/

Статья очень хороша как развлекательное чтение, ведь Шадид не был разработчиком в те годы, это лишь некая ретроспектива.

Впрочем, если вы вошли в разработку лишь в последние пару лет и не до конца понимаете, что же означает кроссбраузерность на самом деле – вот самое то.

Плюс, дана краткая справка по нынешнему состоянию дел.

👉 @htmlshit
#css #supports

#заметка дня

Давайте сегодня поговорим том, что иногда то, что выглядит как грид, на самом деле так же легко реализуется флексами. Ну мало ли.

Возьмём, например, чередующиеся колонки. Это очень часто встречающийся вопрос. В первой строке 3, во второй 2, в третьей опять 3 и так далее.

Первая мысль – перед нами грид. Но CSS Grid сам по себе не решает вопрос повторяющихся шаблонных структур, в любом случае приходится применять nth-child. Так какая тогда разница?

Давайте просто сделаем:
https://codepen.io/alinaki/pen/zYNVqvL

И то же самое на гридах:
https://codepen.io/alinaki/pen/NWdZNGd

Число строк совершенно одинаковое. Возможно, на гридах и элегантнее, решать вам.

Бонус, flexbox + gap:
https://codepen.io/alinaki/pen/mdWdLrw

А вот яркий пример того, чего на флексе точно не сделать без дополнительных обёрток:
https://codepen.io/alinaki/pen/QWdXNYm

#css #flexbox #grid #flex