#заметка дня

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

Помните ошибки рабочей группы CSS? Вот inherit, initial, unset и revert можно смело в них записывать.

Потому что это какой-то ад. Смотрите сами:

inherit

Тут всё достаточно просто. Значение свойства будет отнаследовано от ближайшего родителя и так далее вверх по DOM, пока не найдёт. Если не найдёт — применит значение заданное по-умолчанию в браузере (user-agent styles).

Если и там не найдёт — то возьмёт значение, определённое для этого свойства в спецификации CSS, и это будет…

initial

Давайте откроем MDN для свойства display и пролистаем до раздела «Formal definition».

Мы увидим там нечто под названием «Initial value». И оно равно inline. Вот и наш ответ: initial это значение, определённое в спецификации CSS. Вот только оно не всегда очевидно.

Небольшой взрыв мозга: значение initial свойства display для тега div равно… тоже inline. Потому что поведение элементов в потоке и CSS-свойства — это разные сущности и связь их прописана на более высоких уровнях.

Например, в таблице стилей по-умолчанию, которая поставляется с любым браузером. И тут мы плавно подходим к значению…

revert

И уже эта прелестная штучка сбросит свойство до значений, установленных в таблице стилей браузера. Да, свойство display элемента div примет значение block.

Кстати, предыдущее название — default. Вы видите разницу между default и initial? А она, оказывается, есть.

unset

Тут мы на развилке. Свойство работает как inherit для наследуемых свойств (тех, которые применятся к потомкам, вроде color) и как initial для ненаследуемых (они, соответственно, не применятся к потомкам, вроде border).

Вроде как и не нужно оно выходит, не правда ли?

Но с его помощью можно сбросить все установленные значения, благодаря свойству all:

.element {
  all: unset;
}

Таким образом все свойства наследуемые свойства сбросятся до inherit, а ненаследуемые — до initial.

Вместо итога

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

#css #unset #initial #revert

#статья дня

Помните мы обсуждали свежие контейнерные запросы и полифилл для них?

Вот Ахмад Шадид решил подойти к задаче немного с другой стороны, а именно со стороны дизайнера: https://ishadeed.com/article/container-queries-for-designers/

Какие возможности открывают контейнерные запросы, когда уместно использовать их, а когда — запросы медиа? Эта фраза на русском языке звучит странно в любом виде, простите.

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

#css #containerqueries

#заметка дня

Я откладывал публикацию заметки по этой теме в долгий ящик, но время пришло.

Итак, давайте сразу панч: верстальщику в 2021 году нельзя ориентироваться на физическое разрешение матрицы экрана устройства. Точка.

Если вам заказчик говорит, что у него ноутбук с FullHD разрешением и ваша прекрасная вёрстка поехала к чертям, а у вас на 24” мониторе с тем же разрешением всё отлично — ответ прост. И имя ему масштаб.

Нетрудно догадаться, что объекты на разрешении 1920x1080 на 14” выглядят гораздо меньше, чем на пресловутых 24”. Это простая физика — размер пикселя меньше.

Но о чём почему-то никто не задумывается, так это о том, что люди не роботы и хотят видеть объекты покрупнее. И операционные системы это пытаются предугадать.

В итоге, на таком ноутбуке Windows выставит вам размер шрифта в 125%. Вот только о чём настройки Windows почему-то молчат, так это о том, что все элементы интерфейса станут крупнее, а не только шрифт. И это прям максимально странно.

В итоге интерфейс на 14” экране станет отображаться в эквивалентном разрешении 1536x864 (делите на 1.25). А это совсем не FullHD, не правда ли? А вот настройки монитора упорно скажут вам: «FullHD, чо докопался?». Во многих программах интерфейс ещё и размытый станет…

Второй пример: MacBook с ретина-экраном.

Рекламные материалы Apple упорно твердят нам: разрешение экрана MacBook Pro 13” — 2560x1600. Вот только о чём молчит Apple так это о том, что изображение будет иметь виртуальное разрешение 1280x800 для моделей до 2015 года и 1440x900 — после. Это коэффициенты масштабирования 2 и 1.77 соответственно.

Правда, в macOS, в отличие от Windows и Linux, это масштабирование сделано правильно и шрифты с векторными изображениями будут видны максимально чётко, почти как на бумаге. Их рендеринг происходит по физическим пикселям матрицы.

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

Третий пример. Посмотрите на свой мобильный телефон. Если производитель заявляет разрешение экрана 1080x1920 (вертикально), то в реальности в большинстве случаев это 360x640. С той же логикой, что и в macOS и ровно по тем же самым причинам.

Естественно, иногда люди восстанавливают настоящее разрешение экрана, ибо им нравится чёткость и устраивает размер элементов. Но в таком случае всё равно многие из них включат масштаб в браузере.

Чтобы не попадать в дурацкие ситуации, я могу разве что предложить сразу проверять масштабирование не только в браузере, но и в системе. Ну или использовать #инструмент вроде https://screensizemap.com/ чтобы заранее смотреть разрешение экранов разных устройств.

Кстати, если откроете этот сайт и посмотрите на пример для ThinkPad — получите как раз 1536x864. Потому что Windows на подобных ноутбуках ставит 125% по-умолчанию, из коробки. И да, у меня есть такой ноутбук и именно на нём я впервые и осознал подобную боль.

А чтобы узнать своё разрешение экрана, рекомендую вот этот сервис: http://whatismyscreenresolution.net/

Надеюсь, данные вас не удивят.

Вместо итога

Физические пиксели и пиксели в CSS это не одно и то же. И я не прошу вас кидаться использовать относительные единицы: без понимания, что же такое виртуальное разрешение экрана они вам не помогут.

В общем, удачи 😉

#screen #css #tool

#заметка дня

Итак, в обсуждении предыдущего вопроса мнения немного разошлись: что же является верным значением для 50% прозрачности, 80 или 7F?

Дошло даже до вопроса, а можно ли вообще напрямую переводить проценты в шестнадцатеричную систему счисления?

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

Давайте просто переведём оба числа в десятичную систему счисления. 80 это 128, а 7F это 127. Догадались уже, в чём проблема?

Верно. Это не середина интервала 0-255. Его середина — 127.5.

Если это может показаться неявным, попробуйте закрытый интервал покороче. Например, [0..3]. Назовёте сходу его середину?

Его середина это 1.5: 0, 1, 2, 3. То же самое с [0..255].

Так вот, согласно спецификации sRGB, при приведении относительных числовых значений к закрытому интервалу, результат математически округляется. Именно по этой причине 127.5 приводится к 128. Если кому интересна конкретная реализация и объяснение, можно посмотреть тут: https://stackoverflow.com/a/66862750

А теперь внимание на пример: https://codepen.io/alinaki/pen/MWpEvPO.

В идеале результат смешения с белым фоном должен быть одинаков для rgba() и opacity, но он таковым не является (а вот F7 и opacity дают одинаковый результат). Кстати, он ещё и от цветового профиля дисплея зависит.

В общем, в случае с opacity алгоритм отбрасывает дробную часть при расчёте результата смешения.

Ответ на второй вопрос: как переводить десятичную дробь?

Умножаем дробную часть на основание системы счисления, и из 0.5 получаем 0.8. Вот только компьютеры оперируют не дробными, а целыми числами. И интервал у нас как был 00-FF, так и остаётся.

Думаю, в сухом остатке 80 проще запомнить. Ну или пользоваться таблицами общепризнанных значений: https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4

#css #color #rgba #hex

#заметка дня

В чатах постоянно всплывает вопрос: «таблица ли это», — ну и картинка макета какая-нибудь.

Так вот, как правило, это всегда таблица. Есть построчное/поколоночное (такое слово есть вообще?) повторение данных — вот даже без сомнений.

Если решили сомневаться — точно делайте таблицу, поставить display flex или grid для адаптации вы всегда успеете.

Вот, посмотрите: https://codepen.io/tomhodgins/pen/akrRqX (тут используется препроцессор eqcss, так что рекомендую смотреть скомпилированный вид, это лишь демонстрация идеи).

Ну и на закуску: если вы выдаёте какие-то данные, будьте готовы к тому, что люди их захотят скопировать в условный Эксель. Таблицы это поддерживают по-умолчанию: скопировали да вставили.

А ещё таблицы могут вылезти в предпросмотре поиска Гугла или Яндекса, что хорошо скажется на SEO.

#css #table #grid #codepen #таблица

#заплакала дня

Не успел я на работе выйти в декрет (в Финляндии отцам можно брать до 56 дней отпуска по уходу за ребёнком, из них 18 одному), как из моей команды решила уйти стажёрка. Я ж тут вроде как личинка тимлида, нашу большую команду делят на три части в каждой по 3-4 человека. По продуктам.

Процесс этот, как впрочем и все процессы в финских компаниях, довольно эффективный, но очень не быстрый. Окончательное формирование команд планировалось завершить к осени.

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

Довольно грустно, у неё это весьма хорошо получалось. Но хочет уйти в UX/UI-дизайн. А продукт наш слишком кондовый чтобы позволить ей успешно развиваться в этом направлении.

Чем хороша Финляндия, сменить область деятельности и пойти обучаться. можно практически в любом возрасте и в любое время. Без поддержки не останешься и никто косо не посмотрит, программ для обучения огромное количество.

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

#life #finland #work

#статья дня

Ну и раз я уже начал писать про нашу компанию, вот сегодняшняя статья дня — первая в корпоративном блоге на dev.to.

Мой коллега James Elderfield написал о простой и легкоподдерживаемой обработке ошибок в TypeScript: https://dev.to/supermetrics/simple-and-maintainable-error-handling-in-typescript-56lm

Круто работать с людьми, которые в чём-то лучше тебя. Только так и можно развиваться :)

#typescript #error #errorhandling

#codepen дня

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

Время повышать планку. Каждый верстальщик теперь тоже должен написать калькулятор.

И даже не шучу, глядите: https://codepen.io/lillian-kodi/pen/YzZLebR

Он на десктопе точно работает, а вот на мобилах что-то через раз.

Тут разбираться и разбираться. Но точно можно сказать, что число хаков ужасающе мало. Почти всё легитимно.

Сходу можно сказать, что каждая кнопка создаёт свой слой. Нажали на радиокнопку — стал активен следующий слой. И так далее.

Ждём статью от автора, разберёмся: https://twitter.com/LillianKodi/status/1401325452581613568

#css #calculator #awesome

#фишка дня

Вне зависимости от модных поветрий, отсутствие тёмной темы на ресурсах начинает иногда раздражать.

Давайте сделаем свою. Для любого сайта.

Секунд за пять.

1. Инвертируем всё к чертям.
2. Поворачиваем колесо hue (тон) на 180 градусов чтобы получить более приятные глазу цвета.
3. Отменяем эти фильтры на картинках.
4. …
5. PROFIT!!11

Ну и быстрый пример, основанный на уже известном вам газетном макете: https://codepen.io/alinaki/pen/jOBvzdW

Предупреждение от автора способа: «Важно отметить, что такой хак форсирует вынос блока в отдельный слой рендеринга. Так что если внутри используется абсолютное позиционирование с огромными координатами, то такой слой может не влезть лимиты по памяти, и, как следствие, не дорендериться до конца».

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

Я у себя включил этот сниппет в браузерное расширение, позволяющее применить любой CSS к любому сайту. И иногда включаю, по настроению.

#css #darktheme #filter

#заметка дня

— Э, что это за обводка на полях и ссылках? Убирай.

Знакомо же? Отключение подсветки, box-shadow, focus-visible... Но хочется же как-то проще решить вопрос.

И тут нас встречает свойство outline-offset. Ага, можно управлять отступом контура от элемента. И это уже будет выглядеть интереснее.

А главное, это свойство — анимируемое, глядите: https://codepen.io/alinaki/pen/GRWXeae

Элегантно и максимально просто. Автор идеи — Adam Argyle.

#css #focus #outline

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

Ну наконец-то! В Chrome 92 полноценно заработал редактор CSS Grid с удобной панелью. Не очень понятно, что у них заняло так много времени :) Редактор флексов был давно.

Полный список изменений: https://developer.chrome.com/blog/new-in-devtools-92/

Ещё из интересного: добавили индикацию Quirks Mode (почему сейчас-то?) и возможность записи действий для Puppeteer.

#chrome #devtools

#codepen дня

Уже любимая всеми нами Ана Тюдор совсем не так давно написала шикарную статью о том, как стилизовать ползунковый контроллер, в простонародье input[type=“range”]: https://css-tricks.com/multi-thumb-sliders-particular-two-thumb-case/

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

Но мы тут собрались готовые решения смотреть. И вот они, целая коллекция ползунков: https://codepen.io/collection/DgYaMj?sort_order=desc&sort_by=item_updated_at

На любой вкус и цвет! Двойные и одиночные. Подобрать можно под практически любой дизайн.

Пользуйтесь 😉

Важное дополнение к посту выше: эта коллекция собиралась и пополнялась автором не один месяц. Не стесняйтесь использовать сортировку и вообще копаться в ней 🤗

Тем временем, пост я поправил, чтобы ссылка сразу эту сортировку включала. Приношу свои извинения.

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

Очередной генератор сеток CSS Grid: https://css-grid-layout-generator.pw/

Не говорите мне, что это масло-масленое. Многие до сих пор мыслят категориями Bootstrap и т. п., каждый раз приходится уточнять 👀

Так вот, этот довольно сложный.

Мне кажется, проще выучить спецификацию гридов, чем разобраться в нём 😅

Но упоминания стоит.

#css #grid #generator

#статья дня

…а точнее, цикл статей Ника Мостового (на английском) о производительности фронтенда, составляющие вполне себе методичку (это я так handbook перевёл, вроде ок).

1. Как браузер отрисовывает страницу.
2. Как можно улучшить FMP (First Meaningful Paint) и TTI (Time to Interactive).
3. Событийный цикл, разметка, отрисовка, композиция, стек вызова.

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

#css #javascript #layout #handbook #fmp #fcp #tti #eventloop

#codepen дня

Заказчики и дизайнеры пищат от кнопок, ссылок и прочих виджетов, направление эффекта по наведению мыши на которых зависит от, собственно, направления движения курсора.

Чаще всего это решается скриптом, но вот теперь есть вариант на чистом CSS: https://codepen.io/jh3y/pen/XWMobqx

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

Но вот от имплементации аж разит чем-то со времён Internet Explorer 6 🤪

Те, кто делал скруглённые уголки, поймут. Вот только технологии сильно вперёд ушли и теперь перед нами пользовательские свойства.

История точно движется по спирали.

#css #component #directional

#ссылка дня

Eleventy — это простой, но мощный генератор статических сайтов.

Суть его в том, что вы имеете доступ к мощной и разветвленной системе шаблонов, шорткодов и обработчиков запросов к разным API, но только в момент сборки. После чего получаете чистый HTML. Без CMS и прочего бакенда, пока сами не захотите. Мне вот нравится черновики статей в Markdown готовить.

Кайф в том, что Eleventy никак не ограничивает вас в инструментах сборки и постобработки. Webpack, Snowpack, Gulp — что угодно. Хоть виджеты на React вставляйте.

В общем, вот бесплатный курс по нему: https://piccalil.li/course/learn-eleventy-from-scratch/

Сейчас сам тоже его буду проходить. Ибо сайт канала максимально прост. Слишком прост 🤷‍♂️

#11ty #eleventy #course

#статья дня

Тот случай, когда статья шестилетней давности не потеряла ни капли актуальности. Превращаем GIF в SVG и анимируем с помощью CSS: https://cssanimation.rocks/buffer/

1. Как векторизовать изображение (трейсинг).
2. Как разбить анимацию на составляющие (метод таймлайна).
3. И как, собственно, реализовать на ключевых кадрах.

Классика вечна :)

#css #svg #gif #animation

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

Знакомая ситуация? 👆

Сегодня я представляю на ваш суд расширение для VS Code под названием Blockman: https://marketplace.visualstudio.com/items?itemName=leodevbro.blockman

Что оно делает?

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

Да, VS Code подсвечивает парные скобки, но иногда этого бывает недостаточно. Просто посмотрите скринкасты со страницы расширения.

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

#vscode #extension