Единицы CSS3
Apr. 17th, 2014 08:17 amМногие знают, что в CSS3 появилось несколько новых очень важных единиц измерения длины, позволяющих делать резиновые лейауты значительно более комфортно. Раньше-то их можно было либо скриптовать, либо делать только с использованием единицы "процент ширины/высоты родителя", что требовало совершенно огромного объема филигранной работы (обычно все забивали). Это единицы vh (viewport height), vw (viewport width), rem (user-defined/device default font size).
Для полного счастья нужно ещё только одно: возможнсть задавать длины кусочно-линейно комбинируя скалярные величины в разных единицах измерения (т.е. операторами +, * (умножение на скаляр), ∨ (min), ∧ (max)) и формировать собственные единицы измерения, например единицу "ширина максимального влезающего во вьюпорт прямоугольника 16:9" [1vx] = 1vm ∨ (16/9)vh. Так вот, авторы CSS3 частично додумались и до этого: они сделали синтаксис width: calc(100% + 1ex/2 - 50px) для линейных комбинаций, и единицы vmin = 1vm ∨ 1vh и vmax = 1vm ∧ 1vh. А вот про встраивание туда операторов min/max в синтаксис calc и возможность определения собственных единиц не подумали (последнее не беда, это можно эмулировать в less css, а вот первое беда). Как всегда, чуток да не додумали. Вот почему. Про тропические алгебры и их применения в динамической вёрстке, что ли, не слышали...
Для полного счастья нужно ещё только одно: возможнсть задавать длины кусочно-линейно комбинируя скалярные величины в разных единицах измерения (т.е. операторами +, * (умножение на скаляр), ∨ (min), ∧ (max)) и формировать собственные единицы измерения, например единицу "ширина максимального влезающего во вьюпорт прямоугольника 16:9" [1vx] = 1vm ∨ (16/9)vh. Так вот, авторы CSS3 частично додумались и до этого: они сделали синтаксис width: calc(100% + 1ex/2 - 50px) для линейных комбинаций, и единицы vmin = 1vm ∨ 1vh и vmax = 1vm ∧ 1vh. А вот про встраивание туда операторов min/max в синтаксис calc и возможность определения собственных единиц не подумали (последнее не беда, это можно эмулировать в less css, а вот первое беда). Как всегда, чуток да не додумали. Вот почему. Про тропические алгебры и их применения в динамической вёрстке, что ли, не слышали...