#заметка дня

Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.

Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.

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

Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.

По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.

Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».

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

В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉

#css #table #keyboard #focus #a11y

#заметка дня

Настало время просить прощения и извиняться™.

В посте про правильные анимации по клику на кнопку с использованием трюка :not(:active) я приложил видео с сердечком, а реализовал лишь эффект пульсации. Как-то неудобно получилось.

Исправляю ситуацию, ловите именно то, что было задумано изначально: https://codepen.io/alinaki/pen/RwKQpzV

По пути для кодирования SVG  я воспользовался инструментом от Йоксель: https://yoksel.github.io/url-encoder/. По большому счёту, это лишь encodeURIComponent().

Кодированные таким образом SVG можно использовать в background,  border-image или mask. Без демонстрации тут тоже никуда: https://codepen.io/yoksel/full/WNrLpYW

Это явно не последняя заметка про стилизацию кнопок, дам подсказку к следующей: boop.

#инструмент #css #button #svg #click #animation

#ссылка дня

Сегодня ссылка дня говорит сама за себя: https://svgontheweb.com/ru/

«SVG в вебе. Практическое руководство»

В дружественных чатах постоянно проскакивают вопросы о подключении SVG в HTML, об их оптимизации, стилизации и манипуляции над ними.

И каждый раз ответы – одинаковые. И не всегда верные и однозначные.

Собственно, это руководство не будет долго погружать в теорию (минимальную всё же даст), но вот рабочие примеры — предоставит. Есть официальный перевод на русский язык, а желающие могут дополнить на GitHub.

#svg #sprite #css

Рассказываем о Highload, новом медиа для разработчиков и его telegram-канале.

Highload — это издание, которое публикует полезные технические решения для тех, кто пишет код и работает с ним.

Если говорить простым языком, то это медиа для  middle- и senior-разработчиков, которые уже давно “вошли в IT” и хотят профессионально расти. В фокусе — только полезный технический контент, например тут вы можете почитать о:

​​- 7 лучших фреймворков для машинного обучения;
- Neeva: платная альтернатива Google;
- Перспективы DevOps в современной IT-индустрии;
- ​​7 ресурсов и книг для UX-дизайнеров;
- Как тестировать софт на abuse;
- 8 ​ советов для JavaScript-разработчиков.

Подписывайтесь на канал https://t.me/highloadtoday

#реклама

#фишка дня

Пользовательские свойства 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

🔥 Улучши свои навыки программирования за 10 дней.

Практика — это основа квалификации и профессионализма. ☝️

Практикуй программирование на решении специализированных задач. В Telegram для этого есть огненный канал — ZADACHA. 

▪️Новые задачи каждый день — не трать время на поиск.
▪️Разные уровни сложности — есть над чем подумать.
▪️Нескучные задачи, подбираемые профессионалами.

Переходи на новый уровень — подпишись на канал ZADACHA и щелкай задачи, как семечки. 👌

#реклама

#баг дня

Правило 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!

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

Начни работать на себя и зарабатывать на дизайне уже сейчас!

С 29 апреля по 1 мая в 16:00 по московскому времени пройдёт бесплатный трёхдневный онлайн-интенсив, где ты узнаешь, как начать карьеру дизайнера с нуля.

После занятий ты сможешь получить первые заказы на фрилансе!
👉 Подробности по ссылке: https://clc.am/9b7Hgg

📌 Спикер интенсива: дизайнер с 15-летним опытом и автор курса «Photoshop c нуля до PRO» в онлайн-университете Skillbox Павел Ярец.
📌 Проекты, которые ты научишься делать: буклет, флаер, баннер для соцсетей.
📌 Подарки за участие: подборка полезных материалов для дизайнера и электронная книга «Век живи — век учись» издательства МИФ.

На занятиях ты создашь проект, который наверняка оценят потенциальные работодатели. Тебя ждёт общение с другими участниками и ведущим интенсива в закрытом чате в Telegram!

Пройди регистрацию, чтобы не пропустить прямые эфиры!

#реклама

#баг дня

Достаточно странная ситуация, но сочетание свежего правила 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

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

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

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

Frontender's notes - канал по фронту на котором публикуется инфа о HTML, CSS, JS, TypeScript, React, Node.js для создания полноценных кроссплатформенных приложений.

Добро пожаловать!
➡️ @frontendnoteschannel

#реклама

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

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

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

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

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

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

#js #debug #devtools