Блог Сергея Байдачного

Мой блог о технологиях

Archive for 13 февраля, 2011

Internet Explorer 9: двумерные преобразования

2 комментария

Последнее нововведение в Internet Explorer 9 (и пойду спать), это двумерные преобразования. Речь идет о простых 2D преобразованиях, описанных тут (http://www.w3.org/TR/css3-2d-transforms/). Фактически в CSS появляется возможность использовать два дополнительных атрибута, это transform и transform-origin. Правда в Internet Explorer 9 эти атрибуты носят другие названия, это –ms-transform и –ms-transform-origin. Причина такого извращения мне непонятна. Видимо драфт документа планируют серьезно изменить, при этом очень хотелось побить тех, кто кричал, что в IE 9 нет трансформации (кстати, другие браузеры реализуют подобные атрибуты со своими названиями).

Итак,

–ms-transform-origin задает точку, относительно которой будет происходить трансформация объекта. Как ни странно, но по умолчанию это центр объекта. При этом, можно указывать как абсолютное значение (в пикселях), так и относительное – в процентах.

-ms-transform задает саму трансформацию. Тут могут быть использованы следующие функции, которые записываются через пробел в одну строку:

  • matrix
  • translate (или translateX, translateY)
  • rotate
  • scale (или scaleX, scaleY)
  • skew (или skewX, skewY)

Все эти функции достаточно известные и принимают в качестве параметров одно или два значения.

Ниже пример небольшой трансформации для элемента div.

   1:  <!DOCTYPE html>
   2:   
   3:  <html lang="en">
   4:      <head>
   5:          <meta charset="utf-8" />
   6:          <title></title>
   7:          <style>
   8:    div {
   9:        height: 100px; width: 100px;
  10:        background:yellow;
  11:        -ms-transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
  12:    }          
  13:          </style>
  14:      </head>
  15:      <body>
  16:         <div>hello</div> 
  17:      </body>
  18:  </html>

 

На экране можно будет увидеть следующую картину:

image

Естественно, что более значимых эффектов можно добиться, комбинирую трансформацию и javascript.

Written by Sergiy Baydachnyy

13.02.2011 at 23:34

Опубликовано в Internet Explorer 9

Tagged with

Internet Explorer 9: Geolocation

with one comment

И еще одно нововведение стало доступно в Internet Explorer 9, это определение местоположения пользователя. Уж не знаю, почему разработчики хотели эту возможность (я регулярно получал вопрос о данной фиче во время наших событий), но теперь Internet Explorer 9, используя ваше IP (и, возможно, информацию из сети WiFi), сможет определить Ваше местоположение, используя специальную службу от Microsoft.

С точки зрения пользователя, все выглядит достаточно безопасно. Как только веб-приложение пытается определить местоположение, пользователь получает нотификацию об этом:

image

Пользователь может как разрешить доступ к информации (единожды или всегда), так и запретить.

С точки зрения разработчика, все сводится к вызову метода navigator.geolocation.watchPosition(), который может принимать два параметра:

  • ссылку на метод, который вызывается в случае ошибки. Тут могут быть обработаны ситуации, когда пользователь запретил доступ к информации о местоположении или позиция не может быть найдена по каким-то причинам;
  • ссылка на метод, который вызывается после определения позиции. Этому методу передается параметры, который и будет содержать искомую позицию пользователя в виде геокоординаты.

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

Судя по моему месторасположению, я сейчас нахожусь в каком-то парке. На улице сейчас –12, поэтому осталось мне не долгоSmile Хотя, если серьезно, погрешность составила пару кварталов, что очень даже неплохо для такого неточного метода нахождения позиции, как IP.

image

Written by Sergiy Baydachnyy

13.02.2011 at 22:02

Опубликовано в Internet Explorer 9

Tagged with

Internet Explorer 9: семантические элементы

leave a comment »

Ранее я писал, что Internet Explorer 9 не поддерживает семантические элементы, описанные в HTML 5. Но, хорошо поработав над вопросами производительности и реализацией CSS 3, разработчики успели включить в релиз и семантические элементы.

Семантические элементы позволяют разбивать содержимое на отдельные блоки, подобно тому, как это делает элемент div. Но, в отличии от элемента div, они позволяют дать однозначную характеристику тому или иному блоку html кода. Например, элемент header определяет верхний заголовок для содержимого, а элемент footer – нижний.

Ниже приведен список семантических элементов, который поддерживается в Internet Explorer 9 RC:

  • section – позволяет разбивать содержимое на отдельные группы
  • nav – определяет блок с навигацией
  • article – определяет основное содержимое на странице
  • aside – позволяет выделить содержимое, которое имеет отношение к основному содержимому страницы, но не является его частью (бред какой-то написал, проще говоря – сноски)
  • hgroup – используется для группировки элементов типа h1,…
  • header – задает верхний заголовок
  • footer – задает нижний заголовок
  • figure – определяет изображение
  • figcaption – заголовок к изображению
  • mark – выделить небольшой блок содержимого (например, для важности)

Естественно, что ко всем этим элементам можно применять стили, а значит более гибко управлять представлением содержимого на странице. Наконец, предполагается, что использование семантических элементов, позволит поисковым машинам выполнять разбор страницы более “осмысленно”.

Written by Sergiy Baydachnyy

13.02.2011 at 21:37

Опубликовано в Internet Explorer 9

Tagged with