Будни разработчика

2021-04-22 12:00:35 #codepen дня

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

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

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

@htmlshit

#css #counter #animation #steps Открыть/Комментировать

2021-04-21 20:53:53 #баг дня

Правило 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 Открыть/Комментировать

2021-04-21 08:00:16 #фишка дня

В 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 Открыть/Комментировать

2021-04-20 12:00:05 #ссылка дня

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

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

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

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

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

#webgl #pixel #graphics Открыть/Комментировать

2021-04-18 11:00:22 #заметка дня

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

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

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

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

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

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

#css #color #gradient #easing Открыть/Комментировать

2021-04-16 13:19:12 #библиотека дня

Рано или поздно каждый сталкивается с построением графиков и диаграмм. И так устоялось, что без 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 Открыть/Комментировать

2021-04-14 18:53:51 #фишка дня

Пользовательские свойства 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 и т. д.). Теперь вам достаточно лишь изменить значение свойства, а не перезаписывать всё правило целиком. Открыть/Комментировать