В движке Webkit реализована поддержка новых единиц измерения — vh, vw и vmin

    Эти единицы позволяют задавать размеры объектов относительнно окна браузера. Размер считается в процентах от высоты (vh), ширины (vw) или минимального из этих двух значений (vmin). В отличие от указания размеров в процентах, vh, vw и vmin всегда привязяаны к размерам окна, а не контейнера текущего блока. До сих пор их поддерживал только Internet Explorer 9+ (впрочем, IE вместо указанной в стандарте единицы vmin использует обозначение «vm»).

    Так, этот пример:
    <!doctype html>
    <head>
    <style>
    * { margin:0; padding:0; border:0; }
    
    #red  {
    	background:red;
    	height:100vh;
    	width:100vw;
    }
    </style>
    </head>
    <body>
    	<div id="red">
    	</div>
    </body>
    </html>
    

    сейчас работает только в IE9+. Включение единиц измерения vh и vw в Webkit означает, что вскоре они будут доступны в Safari и Chrome. А там, глядишь, Мозилла с Оперой подтянутся, и жизнь верстальщика станет ещё немного легче.

    P.S.: Ещё немного подробностей на тему vh и vw.
    Поделиться публикацией

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

      +7
      реальный шаг на пути к resolution independence, интересно когда в стандарт примут.
        +2
        в какой стандарт? Это драфт стандарта. Не важно когда примут – либо это реализуют в большинстве браузеров и это начнут использовать, либо нет.
          –1
          Вот если бы допилили абсолютные единицы — сантиметры, миллиметры, пункты. Это была бы настоящая resolution independence… А то у меня на нетбуке див с width:10cm на самом деле где-то 7 сантиметров получается, а на десктопе — около 9.
            0
            Не раньше, чем чем стандартизируют размер пиксела. Или, по крайней мере, сделают возможность его получить.
            • НЛО прилетело и опубликовало эту надпись здесь
              +2
              А если изображение на 65" ЖК ТВ, висящем в 5 метрах от наблюдателя, чем вам помогут сантиметры?
                0
                Вот этим. Если бы абсолютные единицы нормально работали везде, то с сантиметрами было бы обращаться ничуть не хуже, чем с пикселями. А во многих случаях и гораздо лучше.
            +1
            font-size:20vmin

            Типа так?
              0
              Типа да.
              0
              Очень иногда надо указать: «возьми ширину окна и вычти 200px». Жаль, такого пока нету
                +11
                Да, я вот иногда мечтаю — разогнать бы все эти W3C и WHATWG и объявить стандартом LESS или SASS :))))
                  +2
                  position: absolute; left: 200px; right: 0; /* В ИЕ6 не работает вычисление ширины. В ИЕ7 тоже какие-то баги могут быть с этим */
                    –3
                    200px? А какое вам дело до того, сколько там px на экране всего?

                    Забудте про пикселы. Нет их. Есть либо flow нормальным размером текста (плюс/минус smaller/larger), либо проценты от размера экрана.
                      +1
                      Тогда, по-хорошему, только векторную графику нужно использовать. Растровую в исключительных случаях — фотографии, скриншоты и т. п.
                        +1
                        Да, именно так. И с img width=20vmin.
                        +6
                        Забудте про пикселы. Нет их

                        Да какая уже разница? Всё-равно сейчас почти все браузеры считают пиксели высотой относительной, а не догмой. А т.к. почти любая вёрстка привязывается к растровым пиксельным изображениям, то и смысла использовать не пиксели нету. Не вижу сейчас ни одного аргумента против пикселей.
                        • НЛО прилетело и опубликовало эту надпись здесь
                            0
                            Ну, я так понимаю, что это именно то, что я имел ввиду.
                        +4
                        Есть. www.w3.org/TR/css3-values/#calc
                        Но пока только в FF и IE9: caniuse.com/#search=calc
                        • НЛО прилетело и опубликовало эту надпись здесь
                          –3
                          (впрочем, IE вместо указанной в стандарте единицы vmin использует обозначение «vm»


                          Кто бы сомневался.
                          Получим, как обычно, запись из кучи префиксов и костылей.
                            +10
                            может быть перед тем как острить изучили бы вопрос? предыдущие редакции стандарта предлагали именно «vm»
                            www.w3.org/TR/2011/WD-css3-values-20110906/

                            естественно что IE9 следовал им
                              +1
                              Если не сделают нормальный апдейтер ИЕ, то таки будем писать кучу префиксов
                              –2
                              Проблема в том что у ие система обновления как у динозавра. Пока они ее не поменяют — не видать им увеличения аудитории. А не так как сейчас платят деньги за контент в ие9 онли. Не стыдно ли. Это просто позор веба!
                                +3
                                Вы про автоапдейт браузера? В ие10 она будет, в бете точно есть
                                  –1
                                  То что он там есть ни о чем не говорит. Автоапдейт и сейчас возможен средствами виндовых обновлений. Вообще не пойму к чему они городили этот отдельный апдейт для браузера, если можно было использовать системные механизмы. Очередное шараханье из стороны в сторону в исполнении мс.
                                –4
                                Это не я там побежал шерстить черновики спецификаций, чтобы процитировать строку из топика?
                                Или может быть мне стоило тоже устроиться в майкрософт, дабы отслеживать подобные вещи и красоваться в комментах?
                                  +4
                                  Я тоже как и Вы попался на это. Но еденица измерения была в стандартах 5 лет, с 2005 года и только в 2011 ее решили переименовать в vmin.
                              +2
                              Крайне полезная штука в свете резкого развития мобильного веба и адаптивных дизайнов. Учитывая, что на смартфонах в основоном браузеры на вебките, это не может не радовать.
                                –8
                                Какого хрена ие снова выебнулся интересно :( Неужели нельзя брать вещи из стандарта? Почему vm?
                                    0
                                    Круто, каюсь, не знал. Забавные стандарты которые меняют, я понимаю что они еще не утверждены и не вышли, но какой смысл менять шило на мыло (vm на vmin). Как буд-то им больше не о чем подумать как переименовывать еденицы измерения.
                                      0
                                      Самое интересное что vm висело в стандартах 10 лет, и только в прошлом году его изменили на vmin >.< ну что за люди это все делают?
                                        +1
                                        Это еще не самое страшное. С css-градиентами получилось еще смешнее, когда в недавнем прошлом синтаксис вновь чуть-чуть изменили: developer.mozilla.org/en/CSS/-moz-linear-gradient#Browser_compatibility и получилось по нескольку различных реализаций в разных версиях одного браузера + различия между разными браузерами…
                                        • НЛО прилетело и опубликовало эту надпись здесь
                                  • НЛО прилетело и опубликовало эту надпись здесь

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

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