renovations

This commit is contained in:
Ilya Kantor 2015-03-10 14:43:25 +03:00
parent 6444024a9d
commit fad6615c42
22 changed files with 94 additions and 161 deletions

View file

@ -13,7 +13,7 @@
</div>
<script>
// FF: 200, Ch/Sa: 184, Op: 200, IE9: 184, IE7,8:200
// FF: 200, Ch/Sa: 184, Op: 200, IE9: 184, IE8:200
</script>
У элемента стоит <code>style="width:300px"</code>

View file

@ -96,7 +96,7 @@
<dd>По классу, IE9+, корректно работает с элементами, у которых несколько классов.</dd>
</dl>
Если не нужно поддерживать IE7-, то можно использовать только `querySelector/querySelectorAll`. Методы `getElement*` работают быстрее (за счёт более оптимальной внутренней реализации), но в 99% случаев это различие очень небольшое и роли не играет.
Вообще, обычно можно использовать только `querySelector/querySelectorAll`. Методы `getElement*` работают быстрее (за счёт более оптимальной внутренней реализации), но в 99% случаев это различие очень небольшое и роли не играет.
Дополнительно есть методы:
<dl>

View file

@ -355,17 +355,17 @@ IE тоже поддерживает XPath, но эта поддержка не
<td>`querySelector`</td>
<td>CSS-селектор</td>
<td></td>
<td>кроме IE7-</td>
<td>везде</td>
</tr>
<tr>
<td>`querySelectorAll`</td>
<td>CSS-селектор</td>
<td></td>
<td>кроме IE7-</td>
<td>везде</td>
</tr>
</table>
Если браузеры IE7- не нужны, то в 95% ситуаций достаточно и одного `querySelector(All)`.
Практика показывает, что в 95% ситуаций достаточно `querySelector/querySelectorAll`. Хотя более специализированные методы `getElement*` работают чуть быстрее, но разница в миллисекунду-другую редко играет роль.
Кроме того:
<ul>

View file

@ -159,8 +159,6 @@ alert( document.body.lowerTag ); // body
В IE8 современные методы для работы со свойствами, такие как [Object.defineProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty), [Object.getOwnPropertyDescriptor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor) и другие не поддерживаются для произвольных объектов, но отлично работают для DOM-элементов.
Чем полифиллы и пользуются, "добавляя" в IE8 многие из современных методов DOM.
В IE6,7 геттеры/сеттеры совсем не работают. Когда-то для них использовалась особая "IE-магия" при помощи `.htc`-файлов, которые [более не поддерживаются](http://msdn.microsoft.com/en-us/library/ie/hh801216.aspx). Если нужно поддерживать и эти версии, то рекомендуется воспользоваться фреймворками. К счастью, для большинства проектов эти браузеры уже стали историей.
[/warn]

View file

@ -473,12 +473,13 @@ div.classList.add('order-state-canceled');
```
## "Особенности" IE8-
## "Особенности" IE8
Если вам нужна поддержка этих версий IE -- есть пара нюансов.
Если вам нужна поддержка этих версий IE -- ознакомьтесь с их проблемами. Ничего критичного, но они, всё же, есть.
<ol>
<li>Во-первых, версии IE8- синхронизируют <u>все</u> свойства и атрибуты, а не только стандартные:
<li>Во-первых, версии IE8- синхронизируют все свойства и атрибуты, а не только стандартные:
```js
//+ run
@ -489,31 +490,11 @@ alert( document.body.my ); // 123 в IE8-
При этом даже тип данных не меняется. Атрибут не становится строкой, как ему положено.
</li>
<li>Во-вторых, в IE7- (или в IE8 в режиме совместимости с IE7) свойства и атрибуты -- одно и то же.
Поэтому возникают забавные казусы.
Например, названия свойств регистрозависимы, а названия атрибутов -- нет. Что будет если два свойства имеют одинаковое имя в разном регистре? Как поведет себя соответствующий атрибут?
```js
//+ run
document.body.abba = 1; // задаем свойство
document.body.ABBA = 5; // задаем свойство, теперь уже прописными буквами
// запрашиваем атрибут в *!*смешаном*/!* регистре
alert( document.body.getAttribute('AbBa') ); // что должен вернуть браузер?
```
Браузер выходит из ситуации, возвращая первое назначенное свойство(`abba`). Также, в IE8- существует второй параметр для `getAttribute`, который делает его чувствительным к регистру. Подробнее тут:<a href="http://msdn.microsoft.com/en-us/library/ms536429(v=vs.85).aspx">MSDN getAttribute</a>.
</li>
<li>Ещё одна некорректность IE8-: для изменения класса нужно использовать именно свойство `className/classList`, вызов `setAttribute('class', ...)` не сработает.</li>
<li>Ещё одна некорректность IE8-: для изменения класса нужно использовать именно свойство `className`, вызов `setAttribute('class', ...)` не сработает.</li>
</ol>
Вывод из этого довольно прост -- чтобы не иметь проблем в IE8, нужно использовать всегда только свойства, кроме тех ситуаций, когда нужны именно атрибуты. Впрочем, это в любом случае хорошая практика.
А для IE7- тонких различий между свойствами и атрибутами, о которых мы говорили выше, нет. Впрочем, надеюсь, вам эти версии IE поддерживать не придётся.
## Итого
<ul>

View file

@ -247,7 +247,7 @@ age.onblur = function() {
У них две особенности:
<ul>
<li>Не поддерживаются Firefox, хотя поддерживаются даже IE6+.</li>
<li>Не поддерживаются Firefox, хотя поддерживаются даже старейшими IE.</li>
<li>Во всех браузерах, кроме IE, должны быть назначены не через `on`-свойство, а при помощи `elem.addEventListener`.</li>
</ul>