Alexander Kuklev (akuklev) wrote,
Alexander Kuklev
akuklev

Category:

Единицы CSS3

Многие знают, что в 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, а вот первое беда). Как всегда, чуток да не додумали. Вот почему. Про тропические алгебры и их применения в динамической вёрстке, что ли, не слышали...
Subscribe

  • (no subject)

    Встретил фотографию толпы футбольных фанатов, и она меня скорее напугала, у меня уж точно нет желания быть там среди них. Но внезапно я понял, что…

  • Прогресс

    Десять дней назад, вторая ступень SpaceX'овского корабля Starship своим ходом слетала своим ходом на десять километров вверх, и усмепшно приземлилась…

  • О водосбережении

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

  • Post a new comment

    Error

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 4 comments