Кейсы: разработка спецификаций и гайдлайнов (web ui kit)

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

Тут наглядно видно что дизайнер не знает из чего состоит строка текста, отступ нужно делать с учётом интерлиньяжа.

CSS-стили для печати, о которых я забыл

На самом деле это не совсем так

Математика CSS-шлюзов

devicePixelRatio не коим образом не влияет на размеры шрифта, а для определения расстояния до глаз достаточно завязки на ширину устройства, а не вьюпорта (мой комментарий выше). Ну ещё можно метод ввода добавить (touch/mouse).
Ну а не следование рекомендаций относительно размера CSS пикселя остаётся на совести производителей (передадим привет Apple с их iPad mini).

Математика CSS-шлюзов

Меня всегда интересовал вопрос насколько это критично в реальной жизни. В Chrome для изменения размера шрифта нужно в расширенные настройки идти, а подавляющее большинство сайтов игнорируют эти самые настройки.
Если уж и следовать такой практике, то стоит озаботится о корректном отображении страницы и тестировать дизайн для разных размеров шрифта, а иначе толку нет усложнять себе жизнь.

По факту скоро мы получим достаточную поддержку CSS custom properties (CSS переменные) и сможем делать так:

:root {
  --sbg: 4px; /*square baseline grid*/
}
html {
  font-size: calc(var(--sbg) * 4);
}

Затем можно устанавливать размер базового грида JS-ом ну и хранить настройки в localstorage.

Математика CSS-шлюзов

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

Математика CSS-шлюзов

К слову Interaction Media Features из Media Queries Level 4 уже на пороге, и на метод ввода (coarse/fine) вполне можно будет завязываться.

Математика CSS-шлюзов

Тут соглашусь, к размеру заголовка в экстремально узком режиме окна это вполне применимо, но не к размеру базового шрифта.

Математика CSS-шлюзов

Тут хорошим примером могут быть приложения Windows 10 (Skype Preview, News, Mail). Да, в некоторых случаях от уменьшения размера заголовков никуда не деться, но как минимум к размеру базового шрифта это не относится.

Математика CSS-шлюзов

Если нажмете «Show all» вы уведите что Safari iOS поддерживает его ещё с версии 7.1 (6.1 c вендорным префиксом).

Математика CSS-шлюзов

Ещё раз. Я ничего не имею против рамок, но зачем привязыватся к ширине вьюпорта, а не к ширине экрана?

Математика CSS-шлюзов

http://caniuse.com/#feat=calc

Математика CSS-шлюзов

Я и не спорю с тем что что пользователь может хотеть сделать ширину окна браузера меньше 100% ширины монитора (например 60% занимает браузер, а 40% скайп), но зачем заставлять такого пользователя напрягать зрение читая мелкий шрифт?

Математика CSS-шлюзов

А почему при масштабировании шрифта идёт завязка на размер области просмотра (min-width), а не размер устройства (min-device-width)? Ведь размер шрифта должен зависеть от расстояния глаз пользователя до экрана, а не от того как сильно он сжал окно своего браузера.

Пол Грэм продавливает правительство: 95% превосходных мировых программистов остаются не у дел, впустите их

А вы считаете на человека или на семью? Если на семью то к 12k можно добавить зарплату второго человека.

Обзор ультрабука ASUS ZenBook 3

… через переходник.

Обзор ультрабука ASUS ZenBook 3

Странно вы перефразировали. Почему нельзя написать «Стекло глянцевое, очень сильно бликует»?

Трёхпозиционный checkbox (aka tristate) без скриптов и смс

Таки версия 2015 в RC

Трёхпозиционный checkbox (aka tristate) без скриптов и смс

У переменных спека «Editor’s Draft, 19 August 2016».
А как их полифилят? Они же в браузере на лету могут значения менять.
Как на postCSS такое поведение реализовать https://googlechrome.github.io/samples/css-custom-properties/?

Проецируя Google Material Design на десктопную систему… (часть вторая)

Я говорю о том что в гайде прописано:

Cards are a convenient means of displaying content composed of different elements. They’re also well-suited for showcasing elements whose size or supported actions vary, like photos with captions of variable length.

Проецируя Google Material Design на десктопную систему… (часть вторая)

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