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

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

Posts Tagged ‘Internet Explorer 9

«Почему не работает гребаный border-radius» или Накипело.

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

 

Коллеги, хочу сразу отметить, что все примеры в своих статьях я пишу лично. Согласен, что выглядят они туповато, но вставлять кусок кода в статью, не проверив его… Картинки я также НЕ рисую в Paint.

К чему это я. Ах да, некоторое время назад писал пост о возможности работы с border-radius. Как ни странно, Internet Explorer 9 единственный браузер, который правильно работает с данными атрибутами. Если же говорить об IE 10, то мы обогнали всех. Достаточно посмотреть на результаты тестов: http://samples.msdn.microsoft.com/ietestcenter/. Как видно, основные конкуренты остались позади. Но я более чем уверен, что они догонят IE 10 в самое ближайшее время, а, следовательно, эра HTML 5 началась. И это очень здорово! Хотя и удивляет то, что конкуренты особо и не чухались, до появления поддержки HTML 5 в IE. Ведь декларация поддержки HTML 5 идет не первый год, а кроме video элемента толком ничего и не было.

Я опять отвлекся от темы. Так вот, прошло уже около года с момента публикации моего поста, а я до сих пор получаю гневные сообщения о том, что не работает border-radius в IE 9. Это конечно не так. Просто нужно быть внимательнее к тому коду, который Вы пишите. Если у меня что-то не получается, то я первым делом ругаю себя, а потом кого-то еще. Обычно нахожу ошибку именно у себя.

Что касается border-radius, то основная ошибка, которая тут возникает, это запуск страницы в режиме совместимости:

1). Проверьте, что страница декларирует использование HTML 5 с помощью элемента <DOCTYPE html>. В противном случае контент будет рассматриваться как HTML 4.x, а, следовательно, border-radius работать не будет;

2). Проверьте meta элементы на Вашей странице. Не переводят ли они браузер в режим совместимости? Возможно, Вы сами включили режим совместимости при тестировании других возможностей, нажав соответствующую кнопку возле строки-адреса страницы.

Иными словами, Internet Explorer позволяет отображать не только сайты, использующие все самые последние рекомендации, но и поддерживает ряд режимов совместимости, в которые можно принудительно переводить Ваши сайты, не модифицируя код.

Изучите предметную область, а потом делайте выводы.

А я начну писать статьи по HTML 5. Самое время.

Written by Sergiy Baydachnyy

06.09.2011 at 17:50

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

Tagged with

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

Pinned sites и Jump Lists

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

Данная функциональность позволяет еще сильнее интегрировать Internet Explorer 9 с пользовательским интерфейсом Windows 7. Идея состоит в том, что пользователь легко может закрепить ссылку на сайт на панели задач или в Program Menu. Для этого достаточно потянуть за закладку, в которой сейчас открыт интересующий пользователя сайт и переместить ее на желаемый интерфейсный элемент в Windows 7. Также можно выполнять перетягивание, перемещая иконку сайта из адресной строки:

image

Чтобы данная функциональность работала, сайт не обязан предоставлять какую-то дополнительную информацию. Но, если Вы все же решили показать пользователю немного больше, чем ссылку на Ваш сайт, то можете выполнить небольшие изменения в коде. Рассмотрим эти изменения на примере сайта dengi.ua, который наряду с kp.ua, football.ua и др., реализует описываемую функциональность в полной мере.

Итак, если перетянуть иконку сайта dengi.ua на Task Bar или в Program Menu, то можно будет увидеть следующую картину:

image

image

Как видите, со ссылкой на сайт было добавлено специальное меню, содержащее ссылки на другие подпроекты dengi.ua.

Давайте рассмотрим код сайта.

Первое, на что нужно обратить внимание, это несколько meta элементов, описывающих основную ссылку:

<meta name="application-name" content="Dengi.ua" />
<meta name="msapplication-tooltip" content="Сайт о личных финансах" />
<meta name="msapplication-starturl" content="
http://dengi.ua/" />

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

А вот следующие несколько элементов, описывают дополнительные пункты меню в разделе Задачи:

<meta name="msapplication-task" content="name=Полезные цифры;action-uri=http://dengi.ua/usefullDigits.html;   icon-uri=http://dengi.ua/favicon.ico" />
<meta name="msapplication-task" content="name=Зарплатный калькулятор;action-uri=
http://dengi.ua/sal_calc.html;  icon-uri= http://dengi.ua/favicon.ico" />

Вот и все. Такое небольшое расширение позволяет всем Вашим проектам уместиться на Панели задач пользователя.

Если Вы заинтересовались этой возможностью, то хочу добавить, что сайты можно размещать на панели задач и программным путем:

if (window.external.msIsSiteMode) {
  if (window.external.msIsSiteMode()) {
    // we are already in site mode
  }
  else {
    // add site to the Programs menu
    window.external.msAddSiteMode()
  }
}

Наконец, Вы можете выполнять наложение нескольких иконок программным путем:

window.external.msSiteModeSetIconOverlay(
http://host/overlay1.ico’,’Overlay 1′);
window.external.msSiteModeClearIconOverlay();

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

Written by Sergiy Baydachnyy

15.09.2010 at 18:33

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

Tagged with

Режим совместимости и Internet Explorer 9

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

Только что наступили на грабли, которые больно ударили по лбу, немного ошарашив. Если помните, то с выходом Internet Explorer 8 мы предлагали размещать следующий мета-тег в коде:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Эта штука позволяла открывать Ваш портал в режиме седьмого, не заботясь о тестировании на совместимость с Internet Explorer 8. Проблема в том, что часто этот элемент был размещен в конфигурационных файлах и на глаза не бросался.

Так вот, реализуя код на порталах, который должен был хорошо работать с новыми возможностями Internet Explorer 9 мы столкнулись с проблемой – не работает…. И только через час разберательств… “Семен Семеныч….”, а мета-тег убрать то забыли. В результате IE 9 переходит в режим IE 7, ну а там никакого видео и т. д…. Иными словами, если не работает, а должно, то посмотрите, может нужно просто переписать мета-тег.

Written by Sergiy Baydachnyy

15.09.2010 at 16:18

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

Tagged with

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

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

При реализации HTML 5 возможностей Internet Explorer 9 было проведено специальное исследование того, что разработчики используют прямо сейчас и в каком объеме. Для этой цели сделали анализ более 700 Top сайтов, и разработчики Internet Explorer 9 приступили к работе.

Естественно, что реализовать «все и сразу» возможности нет. Дело не в скорости работы над браузером, а в отсутствии стандартов HTML 5. Реализовывать же элемент одним образом, а в следующей версии выпускать иную реализацию в Internet Explorer нельзя. Ведь этот браузер позиционируется как стабильный и безопасный инструмент. Никто не будет выпускать семь версий Internet Explorer в течении года и предлагать пользователям перейти на последнюю, так как предыдущие шесть реализуют что-то не так. Поэтому, если что-то появляется в Internet Explorer, то это смело можно использовать везде (а если у кого-то функциональность работает коряво, то они быстро подтянутся).

Но отвлечемся от демагогии и перейдем к вопросу работы с такими семантическими элементами как section, header, article, footer и т. д., то есть к элементам разметки, позволяющим сделать последнюю более читабельной и открыть новые возможности для поисковых систем (ведь теперь четко видно, где заголовок статьи, где завершение страницы и т. д.). Лично я, когда начал читать спецификацию HTML 5, тут же усомнился в необходимости данных элементов. Ведь для статической страницы они работают замечательно. Но ведь сегодняшний код будет подвергаться анализу с большим трудом, даже с этими элементами. В любом случае, Internet Explorer 9 их НЕ реализует.

Но не все так плохо, или я не стал бы писать этот пост. Использовать описанные выше элементы и работать с ними в Internet Explorer 9  можно. Дело в том, что Internet Explorer 9 перестал игнорировать элементы разметки, не представленные в стандарте.

А вот и пример:

<!DOCTYPE html>
<html>

<head>
<title>Internet Explorer 9</title>
<style type="text/css">
myel
    {
        background:red;
        border:3pt blue solid;   
    }
}
</style>
</head>

<body>
<myel>Hello</myel>
</body>
</html>

Если предыдущие версии Internet Explorer не учитывали этот элемент, как элемент разметки и не применяли стили к нему, то в девятой версии мы можем увидеть следующие результаты:

image

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

Written by Sergiy Baydachnyy

15.09.2010 at 08:42

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

Tagged with