Internet Explorer Platform Preview Guide для програмістів: Частина 2

Покращення в розборі HTML


Розбір HTML в Internet Explorer Platform Preview був вдосконалений і тепер краще відповідає чернетки специфікації HTML5.


Generic Елементи

Раніше Internet Explorer розумів "generic" елементи (невідомі HTML елементи без атрибуту xmlns) не так, як це описано в специфікації HTML5 – браузер їх просто ігнорував. Це означало, що розробники повинні були використовувати div елементи з деякими CSS класами для того, щоб отримати задовільний результат в Internet Explorer. У Internet Explorer Platform Preview це поведінка було змінено і тепер він парсити невідомі елементи.


На цьому прикладі можна побачити generic елемент mydiv:

<style type=”text/css”>
mydiv {
     color: blue;
     font-weight: bold;
}
</style>

<p> I am using a <mydiv> generic element </ mydiv> in this sentence. </ p>


Internet Explorer 8 ігнорує тег mydiv та асоційовані CSS правила. Ця пропозиція буде виглядати наступним чином:



Internet Explorer 9 розбирає тег mydiv і в результаті отримаємо наступний результат:



Перекриваються теги (Overlapping Tags)

Якщо ваш HTML містить перекриваються теги, то Internet Explorer 8 і ранні версії їх не розбере. Ця поведінка є абсолютно протилежним тому, який описаний в специфікації HTML5. У Internet Explorer Platform Preview ця проблема вирішена.


Нижче приклад скрипта, який перекриває теги i і b:

<script type=”text/javascript”>
function load()
{
     var elms = document.getElementsByTagName(“i”);
     for(var i = 0; i < elms.length; i++)
     {
          var elm = elms;
           if(elm.parentNode.tagName.toLowerCase() == “b”)
                elm.style.color = “red”;
     }
}
</script>

<body onload=”load();”>
You should be aware of how <b> this <i> affects </ b> script </ i>.
</body>


В Internet Explorer 8 і ранніх версіях ми отримаємо наступний результат:



У Internet Explorer Platform Preview отримуємо очікуваний результат:



Зміни в розборі блоків script і style

Internet Explorer 8 і ранні версії не відносили текст у script або style блоках до текстових елементів DOM дерева. У Internet Explorer Platform Preview це виправлено. Це дозволяє відображати вихідний код на сторінках за допомогою скриптів.


Підтримка SVG в HTML

Internet Explorer Platform Preview підтримує SVG вбудований безпосередньо в HTML.


Розбір XHTML

Internet Explorer Platform Preview розуміє документи з типом application/xhtml+xml як XHTML-документи.


HTML5 Selection APIs


У Internet Explorer Platform Preview додано підтримку HTML5 text selection APIs. Об'єкт Selection представляє список об'єктів Range, які доступні через DOM L2 Range в Internet Explorer Platform Preview.


Метод getSelection

Метод getSelection повертає об'єкт Selection для вікна, який представляє поточний виділений текст.


Властивість selectionStart

Властивість selectionStart повертає offset початку виділеного тексту також може встановлювати початок виділеного тексту.


Властивість selectionEnd

Властивість selectionEnd повертає offset кінця виділеного тексту і також може встановлювати кінець виділеного тексту.


Scalable Vector Graphics (SVG)


Підтримка Scalable Vector Graphics (SVG) стала однією з найбільш затребуваних можливостей в Internet Explorer. Підтримка SVG анонсована в Internet Explorer Platform Preview.


Базові фігури


Internet Explorer Platform Preview підтримує розбір і відображення всіх базових фігур, їх атрибутів та асоційовані DOM інтерфейси з Basic Shapes module специфікації SVG 1.1 (Second Edition). Список підтримуваних примітивів:



Нижче представлені приклади фігур. Після наведеного коду показаний результат в Internet Explorer Platform Preview.


Rectangles: <rect> element
<?xml version=”1.0″ standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
    “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg version=”1.1″ xmlns=”http://www.w3.org/2000/svg”>

<rect fill=”orange”
    stroke=”black”
    width=”150″
    height=”75″
    x=”50″
    y=”25″ />

</svg>


<rect fill=”orange”
    stroke=”black”
    width=”150″
    height=”100″
    x=”50″
    y=”25″
    rx=”10″
    ry=”50″/>


Circles: <circle> element
<circle fill=”orange”
    stroke=”black”
    stroke-width=”3″
    cx=”40″
    cy=”25″
    r=”20″/>


Ellipses: <ellipse> element
<ellipse stroke=”orange”
    cx=”100″
    cy=”60″
    rx=”75″
    ry=”50″/>


Lines: <line> element
 <!– vertical –> 
<line x1=”0.7cm”
    y1=”1cm”
    x2=”0.7cm”
    y2=”2.0cm”
    style=”stroke:
    blue;”/>

<!– diagonal –>
<line x1=”30″
    y1=”30″
    x2=”150″
    y2=”85″
    stroke=”red”
    stroke-width=”4″/>

<!– horizontal –>
<line x1=”50pt”
    y1=”25pt”
    x2=”150pt”
    y2=”25pt”
    stroke=”yellow”
    stroke-width=”3″/>



Polylines: <polyline> element

"Polyline" в SVG – це набір послідовно з'єднаних ліній.

<polyline points=”15, 5, 100 8,3 150″
    fill=”orange”
    stroke=”black”
    stroke-width=”4″/>


Polygons: <polygon> element
<polygon points=”15, 5, 100 8,6 150″
    fill=”orange”
    stroke=”black”
    stroke-width=”4″/>


Більш детальна інформація про базові SVG фігурах буде надана разом з the Internet Explorer SDK.


Координатні системи, трансформації та одиниці зміни


Internet Explorer Platform Preview підтримує координатні системи SVG, трансформації та одиниці вимірювання з Coordinate Systems, Transformations and Units module специфікації SVG 1.1 (Second Edition). Підтримувані можливості:



Internet Explorer Platform Preview також підтримує інтерфейси DOM, асоційовані з координатними системами SVG і трансформаціями.


Структура документів


Internet Explorer Platform Preview підтримує базову структуру документа SVG, метадані та можливість розширення як це описано в модулях Document Structure, Metadata, і Extensibility із специфікації SVG 1.1 (Second Edition). Підтримувані елементи:



Internet Explorer Platform Preview також підтримує наступні DOM інтерефейса.


Шляхи (paths)


Internet Explorer Platform Preview підтримує SVG paths, як це описано в модулі Paths module із специфікації SVG 1.1 (Second Edition). Internet Explorer Platform Preview підтримує елемент <path>, Атрибут d, Що дозволяє аналізувати довільні дані подорожі.


Також є підтримка зв'язаних DOM інтерфейсів.


Елемент <path> Дозволяє виконувати багато різних сценаріїв. Розглянемо кілька прикладів.


Closed shape with straight lines and filling
<?xml version=”1.0″ standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
    “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg version=”1.1″ xmlns=”http://www.w3.org/2000/svg”
    xmlns:xlink=”http://www.w3.org/1999/xlink”>

<path d=”M 20 20 L 60 20 L 40 60 z”
     fill=”green”
    stroke=”red”
    stroke-width=”3″ />

</svg>



Bezier path (quadratic)
<path d=”M20,30 Q40,50 60,30 T100,30″
     fill=”none”
    stroke=”red”
    stroke-width=”3″ />


Line with arc
<path d=”M30,60 l 50,0
    a25,45 0 0,1 50,0 l 50,0″

    fill=”green”
    stroke=”blue”
    stroke-width=”4″ />

Новий кошти для веб-розробників


Platform Versioning


Internet Explorer 8 підтримує режими сумісності. Режими документів дозволяють вибирати режим відображення (детальніше описано в статті "Defining Document Compatibility" на MSDN). В Internet Explorer Platform Preview доданий новий режим-Internet Explorer 9 Standards Mode ("IE9 Document Mode").


Internet Explorer Platform Preview запускається в режимі IE9 Document Mode.


Для того, щоб переконатися, що Internet Explorer Platform Preview відображає сторінку в останньому режимі, включаючи meta тег у секції head вашої веб-сторінки:

<meta http-equiv=”X-UA-Compatible” content=”IE=9″ >

Developer Tools


Щоб відкрити Developer Tools в Internet Explorer Platform Preview натисніть F12 або в меню Debug натисніть Developer Tools. Якщо ви використовуєте Developer Tools в Internet Explorer 8, то помітите зміни в продуктивності.


Інспектування HTTP


У Internet Explorer Platform Preview додано засіб network inspection tool (через вкладку Network). Тепер можна:


Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*