Наиболее полное руководство по Internet Explorer 9 для разработчиков (и не только), часть 6

    CSS3 2D Transforms, HTML5 Semantic Elements, JavaScript, демонстрации и тесты

    image

    В ходе конференции PDC10 была представлена очередная тестовая версия браузера Internet Explorer 9. IE9 Preview 6 – это версия  предназначенная для тестирования разработчиками и, как предыдущие превью-версии, она не содержит пользовательского интерфейса. Зато ее можно установить на компьютер не удаляя IE9 Beta.

    Этот пост раскроет детали шестой тестовой версии Internet Explorer 9 и расскажет о нововведениях в браузер, которые будут важны для разработчиков.

    Это шестая статья из серии статей про нововведения в IE9 для разработчиков. Ознакомится с предыдущими частями можно здесь:

    Введение


    В ходе конференции PDC10 появился слух о том, что IE9 P6 – это последняя превью-сборка перед выпуском кандидата на релиз и последующим финальный релизом Internet Explorer 9.

    Этот выпуск, кроме очередной оптимизации производительности, содержит несколько полезных нововведений: поддержку CSS3 2D Transforms и HTML5 Semantic Elements.

    Скорость выполнения JavaScript


    Разработчики в очередной раз подтянули производительность браузера при работе с JavaScript. Согласно тестам Webkit SunSpider Internet Explorer 9 находится на четвертом месте, опережая предварительную версию Firefox 4.0, но уступая браузерам Chrome и Opera:

    image image

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

    CSS3 2D Transfoms


    Достаточно неожиданным нововведением в IE9 Preview 6 стала поддержка 2D-трансформаций в CSS. Данный стандарт пока не принят, поэтому поддержка команд осуществляется через специальные префиксы –ms-:
    • -ms-transform – применяет функцию трансформации к элементу;
    • -ms-transform-origin – указывает точку, от которой считается трансформация элемента, по умолчанию используется центр (значения 50% для горизонтальной позиции и 50% для вертикальной позиции).
    В Internet Explorer 9 Preview 6 поддерживаются следующие функции трансформации, которые используются вместе с –ms-transform:
    • matrix(a,b,c,d,e,f) – указывает трансформацию по матрице шести значений;
    • translate(tx,ty) – указывает трансформацию по вектору;
    • translateX(tx) – указывает трансформацию по горизонтали;
    • translateY(ty) – указывает трансформацию по вертикали;
    • scale(sx,sy) – указывает масштабирование элемента по вектору. Если не указано второе значение (масштабирования по вертикали), оно будет равным первому;
    • scaleX(sx) – указывает масштабирование элемента по горизонтали;
    • scaleY(sy) – указывает масштабирование элемента по вертикали;
    • rotate(angle) – указывает поворот элемента на указанный угол, где центральной точкой будет значение -ms-transform-origin или центр элемента, если значение -ms-transform-origin не установлено;
    • skewX(ax) – указывает наклонную трансформацию по горизонтали на указанный угол;
    • skewY(ay) – указывает наклонную трансформацию по вертикали на указанный угол;
    • skew(ax,ay) – указывает наклонную трансформацию по обоим координатам на указанные углы.
    Свойство -ms-transform-origin принимает два параметра, которые могут быть положительными или отрицательными. Эти параметры указывают отправную точку относительно которой будут применяться трансформации для элемента. Значения параметров могут составлять как любое из допустимых значений промежутка так и специальные значения: left, center или right. Эти специальные значения соответствуют значениям 0%, 50% и 100%.

    Примеры

    оригинальный элемент:

    <div id="test" style="background-color: red; width: 50px; height: 50px"></div>

    image

    -ms-transform: matrix(10, 1, 1, 1, 1, 1);

    image

    -ms-transform: translate(1px, 15px) rotate(45deg);

    image

    -ms-transform: skew(15deg, 15deg);

    image

    -ms-transform: translate(200px, 100px) scale(.75, .75) rotate(40deg);    
    -ms-transform-origin: 60% 100%;

    image

    HTML5 Semantic Elements


    Стандарт HTML5 представляет новые элементы обладающие особой семантикой. Internet Explorer 9 Preview 6 реализует их полную поддержку. Все эти элементы, согласно спецификации, наследуются от объекта HTMLElement. Кроме того, в IE9P6 эти новые элементы стандартно стилизованы, согласно спецификации.

    Ниже список семантических элементов HTML5:
    • section
    • nav
    • article
    • aside
    • hgroup
    • header
    • footer
    • figure
    • figcaption
    • mark
    Каждый из этих элементов призван описывать определенную часть страницы: раздел, тело статьи, блок навигации, вложенное изображение, подвал или заголовок и другие.

    Разработчики добавили специальную демонстрационную страницу, чтобы пояснить назначение и применение этих элементов на практике. На этой странице все элементы набраны с помощью семантических тегов:

    image

    Новое в инструментах разработчика


    Internet Explorer 9 имеет мощные инструменты для веб-разработчиков, которые помогают создавать веб-страницы, стили и скрипты, отлаживать их изучать полученные результаты.

    В новой версии появилось только одно, но очень полезное нововведение в инструментах – возможность форматирования сжатого JavaScript-кода. Отформатировать сжатый код бывает полезно, когда вам необходимо разобраться или отладить код на готовой своей или чужой странице.

    Как это выглядит. Имея код подобный тому, что выведен на скриншоте:

    image

    вы можете в пару кликов отформатировать его для лучшей читаемости и отладки:

    image

    image

    Крайне полезное и удобное нововведение.

    Демонстрации и тесты


    Internet Explorer 9 привлекает к себе большое внимание. За первые 6 недель после выхода IE9 Beta, браузер был загружен более 10 миллионов раз. Мне кажется, что важную роль тут сыграли отличные и наглядные демонстрации, которые создают разработчики, чтобы показать важность того или иного нововведения. Кроме того, разработчики создают тесты, которые позволяют оценить степень распространение реализованных в IE9 функций среди других браузеров.

    С выходом IE9 Preview 6 вышло несколько новых демонстраций и новые наборы тестов.

    SVG Helicopter

    Интересная игра, позволяющая оценить скорость обработки браузером динамического контента и графики. Попробуйте управлять вертолетом и поставить рекорд дальности. У меня получилось набрать 522 мили.

    image

    В IE9 эта игра идет с FPS = 60.

    Track Splash

    Небольшой тест, который позволит определить производительность браузера при использовании canvas, звукового сопровождения и анимации на веб-странице.

    image

    Semantic Notepad

    Про эту демонстрацию было написано чуть выше. Она позволяет ознакомиться с возможностями, которые дают новые семантические элементы HTML5.

    A New Day

    Графический тест, который позволит вам сравнить реализацию элемента CSS3 box-shadow в вашем браузере.

    image

    Ниже приведен результат, который я получил в браузере Opera 11 alpha 1029.

    image

    Проверьте как ваш браузер соответствует стандарту и реализует CSS3 box-shadow.

    Flickr Postcards


    Данная демонстрация показывает работу со свойствами 2D-трансформации CSS.

    image

    Customer Model


    Эта демонстрация показывает работу браузера со сложным SVG-объектом. Все элементы таблицы собраны с помощью SVG-элементов.

    image

    Icon Editor


    Редактор иконок созданный полностью на технологиях HTML5. Выглядит и работает – отлично.

    image

    Addon Performance Advisor


    Последний тест направлен на демонстрацию механизма блокировки дополнений для браузера, если они тормозят загрузку.

    WebVizBench


    Самый интересный тест производительности написан сторонними разработчиками для демонстрации новых возможностей HTML5. Он представляет собой сайт для настоящей радиостанции. Разработчики взяли за основу возможности HTML5 в Internet Explorer 9 и создали красивый графический бенчмарк.

    image

    Этот бенчмарк позволит вам узнать скорость обработки графики браузером и возможности браузера по использованию аппаратного ускорения графики через GPU. Как показало тестирование пользователями Хабра, лучше всех с тестом справляется Internet Explorer 9.

    Тестирование


    Разработчики добавили тесты на поддержку HTML5 Semantic Elements:

    image

    CSS3 2D Transforms:

    image

    DOM Level 3 Events:

    image

    EcmaScript 5 Objects Objects:

    image

    Заключение


    Новая версия IE9 Preview 6 привнесла поддержку двух дополнительных стандартов и добавила производительности при обработки скриптов. Кроме того были выпущены новые наглядные тесты и демонстрации.

    Говорят, что следующим выпуском IE9 будет уже кандидат на релиз, за которым последует финальная версия браузера. Будем надеяться, что финальную версию мы увидим уже весной на конференции MIX11.

    Полезные ссылки:

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 13

      +4
      Обзор конечно не плохой, но у разработчиков IE хочется прямо вот так спросить что они курили когда писали отладчик в IE8, вы не замечали что он отображает совсем не те стили, которые реально отрейдренны на страницы в данный момент? Вообще подход мелкософта сильно напоминает подход нашей «отчечественной» 1С :)

      «если бы microsoft объявил о закрытии проекта IE, то этот день можно было-бы сделать официальным праздником всех веб-дизайнеров» (с) не мое…
        +3
        Хочу ПРАЗДНИК!!!
          +3
          Да я конечно понимаю, что троллю, но реально «накипело», сказывается недавняя работа по отладке крупного проекта под IE8… я получил просто «экстаз» начиная от «очереди alert'ов» и заканчивая обсалютным неадекватом отладчика…
            0
            это что, для Фейсбука стили вообще не отображаются
              0
              Здесь дело даже не в одном IE8, а в том, что если отладил в восьмом совершенно не факт, что это будет так же корректно отображаться в седьмом и девятом.
            0
            Новая версия IE9 Preview 6 привнесла поддержку двух дополнительных стандартов и добавила производительности при обработки скриптов.

            Претендентов на стандарты, а не стандарты. Ни CSS3, ни HTML5 еще не стандарты…
            www.w3.org/TR/css3-2d-transforms/
            W3C Working Draft 01 December 2009

            www.w3.org/TR/html5/
            W3C Working Draft 19 October 2010

            не вводите в заблуждение новичков.
              +3
              это стандарты W3C в определенных состояниях, в данном случае — в статусе черновиков. стандарт пройдет несколько стадий пока обретет статус рекомендации. однако он на всех этапах остается стандартом.
                0
                Подмена понятий произошла еще в 1998 году archive.webstandards.org/mission.html. Ни одна указанная технология на тот момент не была стандартом, однако это не мешала сначала проекту, затем всем остальным (например разработчикам браузеров dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/) оперировать собственным понятием «стандарты».

                Так что в заблуждении находятся многие и достаточно давно. Хотя вопрос в трактовке термина.
                  0
                  Каша касательно отрасли web-разработок не подразумевает, что новая возможность в одной из программ становится стандартом. То что было в 1998 году, тогда стандартом не называлось. Стандартом де факто те разработки стали со временем. Так же и сейчас с HTML5 И CSS3. Их только начинают внедрять, не дожидаясь официального статуса. Еще слишком рано даже для «де факто»…
                0
                А text-shadow не планируется?
                  +1
                  Бог с ним с text-shadow. WebSockets ГДЕ? м?
                    +2
                    В хроме, фаерфоксе и опере, как обычно :)
                    0
                    а Вам зачем? :)

                  Only users with full accounts can post comments. Log in, please.