В Chrome Canary заработали новые единицы измерения CSS — vh, vw и vmin

    В девелоперской версии Google Chrome (на момент написания статьи — Chrome 20) появилась поддержка новых единиц измерения CSS — vh, vw и vmin, которые пару месяцев назад были реализованы в движке Webkit. До этого они работали только в Internet Explorer 9-й и 10-й версий. Эти единицы задают размеры объектов относительно высоты или ширины окна. В отличие от процентов, они всегда привязаны именно к окну браузера, а не к контейнеру текущего блока. 1vh равен 1% высоты окна, 1vw — 1% ширины, 1vmin — меньшему из этих двух значений.

    Примеры:
    h1 {
      font-size: 4.2vw;
    }
    header {
      height: 15vh;
    }
    #someDiv {
      padding: 2vmin;
    }
    


    Особенности использования

    При изменении размеров окна браузера размеры блочных элементов, указанные в vh, vw или vmin, меняются в реальном времени, а размеры шрифта — только после перерисовки. В случае изменения масштаба (Ctrl+ или Ctrl-) размер шрифта меняется, а размеры блоков — нет. Internet Explorer ведёт себя точно так же.

    В IE вместо «vmin» используется название «vm» (поддержка этих единиц появилась в IE довольно давно, и в те времена в спецификации W3C было именно «vm», а не «vmin»).

    В отличие от IE, Chrome Canary пока не понимает новые единицы в свойстве border.

    Ссылки в тему: Статья на СSS Tricks, статья на Хабре.

    Поделиться публикацией

    Комментарии 26

      0
      какая же все таки свистопляска…
        0
        А ведь казалось — только заставили МС отказаться от своих свистоперделок в шестом осле, стандартны собрались повсюду. Браузеров — море. Практически все они одинаково отображают сайты (Кроме Оперы, она как всегда — сама себе дива). Вот оно — золотое время программирования в вэбе…

        Но на горизонте собираются грозные W3Cтучи. Кажется со всеми этими примочками и свистоперделками…
          +1
          Порой мне кажется, что люди, которые говорят, что в опере что-то не так отображается, настолько профаны своего дела, что дальше уж не куда. А если вы далёки от этой темы, тогда зачем цитировать мысли другого профана? Извините.
            0
            А может это просто не их дело, хотя и не далеки? Мне вот приходится иногда верстать и чисто субъективно заметил, что чаще всего проблемы возникают с Оперой. То есть я пишу код, в Фоксе и Хроме он обычно выглядит ожидаемо, а в Опере (последняя версия из официальных репов), которую я запускаю для очистки совести — нет.
              +1
              Ключевые слова «иногда верстать». За 4 года работы в коллективе, видал какие прогеры «творят структуры» не совместимые с жизнью, потом просят что-то подправить, открываешь фаербаг и диву даёшься — «как, какого ёжика оно вообще хоть как-то отображается». С опытом вырабатывается набор структур, которые максимально оптимальны и кроссбраузерны безо всяких хаков. Ради совести проверять остаётся в IE7, там бывают приключения с двойными маржинами. Так что тут дело в поведении браузера к неправильным структурам, и сложно сказать, какой из них прав, и в случае с фоксом\хромов — кто на кого дро... у кого копирует поведение.

              Ради фана. У фаерфокса, порой line-height центрирует текст со смещением на 1 пиксель вниз.
      • НЛО прилетело и опубликовало эту надпись здесь
          +4
          По-моему, единицы измерения CSS — достаточно фундаментальная вещь для всей веб-разработки, так что даже небольшие изменения важны. Чем выше интерес к новым фичам, тем быстрее их нормально реализуют во всех браузерах. Я, например, пока писал статью, заодно и багрепорт оформил по поводу border. Кто-то прочитает, поэкспериментирует, ещё что-нибудь заметит. А если об этом не говорить, то и разработчики не будут шевелиться.
          • НЛО прилетело и опубликовало эту надпись здесь
              0
              Изменения действительно не революционные, но теперь хоть пощупать можно в Canary, а не только в ИЕ. А по поводу праздников — чистой воды случайность :)
                +1
                Может просто время появляется? :)
            +2
            В мобильной разработке пригодится, ранее это делали через JS.
            При этом на мобильных телефонах везде вебкит кроме оперы, а мобильная опера симулирует вебкит.
              0
              Если Opera cего не знает, то и эмелировать нечего будет. Да и единицы измерениея без вендорных префиксов идут…
                0
                Они определили путь на эмулирования поведения. Так что знать будут, куда денутся. И, скорее всего, и десктоп тоже.
                Тогда останется только FF, которые наверняка тоже включат эту возможность, т.к. они не стесняются делать нестандартные вещи.
              0
              На Android уже есть и Firefox, собственно со своим Gecko.
            +8
            Ура! Скоро не нужно будет писать костыли для Хрома, и он будет работать так же радужно, как и IE.

            Для тех, кто уже потянулся к минусу — это шутка ;-)

            Но на самом деле, это отлично. Когда пишешь интерфейсы, завязанные на размер окна: слайдовые панели мониторинга, мобильные веб-сайты, — очень важно быть уверенным, что элемент, рассчитанный костылем на JS будет выглядеть одинаково везде, и не придется плодить несколько view-ов под каждое устройство.
              0
              абсолютно не понимаю ценности этих нововведений для мобильной разработки :( на мобильниках часто меняется размер окна браузера? если нет, то чем это лучше процентов, можно какой-нибудь юзкейс?
                0
                Окей:
                У Вас в руках три телефона с 480х640, 240х320 и какой-нибудь Моторола с 1200х1600 разрешением.

                Я хочу вывести три графика на экран так, чтобы каждый занимал ровно 1 экран. Или, например, график на экран, а ниже рассчеты и математические выкладки.

                В этом случае я графику дам 100vh, например, и не буду ставить костылей, которые будут пытаться высчитать высоту экрана, множить на zoom и делать прочие гадости.
                  0
                  сильно понятнее не стало :( в этом контексте чем 100vh принципиально отличаются от height: 100% процентов? мне правда интересно, я не придираюсь :)
                    0
                    а хм сообразил :) спасибо :)))
              0
              При изменении размеров окна браузера размеры блочных элементов, указанные в vh, vw или vmin, меняются в реальном времени, а размеры шрифта — только после перерисовки

              Что это значит на практике?
                0
                Очевидно, что когда вы будете таскать окно за угол, шрифты изменят размер только после отпускания кнопки.
                  0
                  Нет, они изменят размер только после F5 или пинка джаваскриптом. Возможно я неясно выразился. Попробуйте сами поэкспериментировать — сразу всё увидите.
                    0
                    Хм. Тогда это какое-то странное поведение, надеюсь что его исправят.
                      0
                      Да, мне тоже так кажется. И в IE, почему-то та же фигня. Баг уже висит в трекере

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

              Самое читаемое