Елена Глухова "Верстка кастомными тегами для api...

Я.Субботник, Киев, 28 мая 2011 года

Разработчик интерфейсовГлухова Елена

API Яндекс.Карт и версткакастомными тегами

Friday, May 27, 2011

API Яндекс.Карт и верстка кастомными тегами

2


YMaps JavaScript API

3


4


Цель

Оптимизация и усовершенствование

верстки API.Карт

5


Задачи

6

Защитить нашу верстку от верстки пользователей


Задачи

7


Защитить верстку пользователя от верстки API.Карт


Задачи

8


Защитить верстку пользователя от верстки API.Карт

Позволить верстке пользователей жить внутри нашей верстки


9

<div class=“YMaps-balloon”><i class=“YMaps-balloon-top”></i>...

Как было


10

<div class=“YMaps-balloon”><i class=“YMaps-balloon-top”></i>...

Как было


11

Что может случиться

div { margin: 20px 0 20px 20px; }


12

Что может случиться

div { margin: 20px 0 20px 20px; }


Придумали использовать кастомные теги

13



14

<mytags> ... </mytags>



15


Что получаем?



16


Что получаем? Уникальность


17

Где нужна уникальность?


18



19



20



Работает? Да!

21

Firefox, Opera, Safari, Chrome


22

За исключением ... IE < 9 :-(


23

Как победить IE?


24

document.createElement(“custom-tag”); ...

<custom-tag>Я.Уникальный</custom-tag>

Создание кастомных тегов в DOM-е при помощи JavaScript-а

Как победить IE?


25

Ещё ...

Импорт кастомных тегов

<html xmlns:prefix[=urn] ...


Почему пространство имен?

26



1. Официальный способ поддержки кастомных тегов в IE, начиная с версии 5.5

27




2. Сводит к минимуму совпадения

28




2. Сводит к минимуму совпадения

3. Не использует document.create.Element()

29


На практике ...

30


<html xmlns:ymaps xmlns:“http://www.w3.org/1999/xhtml”> ...


31


<html xmlns:ymaps xmlns:“http://www.w3.org/1999/xhtml”> ...


32

<ymaps:balloon><ymaps:balloon-top>

...


@media all {

ymaps\:balloon {...

}

ymaps\:balloon-top {...

}}

33


34


Супер — работает!

35

Firefox, Opera, Safari, Chrome


36



IE не инициализирует свое пространство имен до полной загрузки документа

37



Резюме

38

Частично задачи выполнены


Резюме

39


Там где можно — кастомную верстку


Резюме

40


Там где можно — кастомную верстку

IE — дивную верстку


Cветлое будущее

41

<ymaps> ... </ymaps>


Cветлое будущее

42

<ymaps> ... </ymaps>

<ymaps class=“YMaps-balloon”>...

</ymaps>


Вопросы?

43


Глухова ЕленаРазработчик интерфейсов

[email protected]


mailto:[email protected]

mailto:[email protected]

Елена Глухова "Верстка кастомными тегами для api...

Technology

ymaps javascript api3friday

dom javascript