renovations
This commit is contained in:
parent
6444024a9d
commit
fad6615c42
22 changed files with 94 additions and 161 deletions
|
@ -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>
|
||||
|
|
|
@ -96,7 +96,7 @@
|
|||
<dd>По классу, IE9+, корректно работает с элементами, у которых несколько классов.</dd>
|
||||
</dl>
|
||||
|
||||
Если не нужно поддерживать IE7-, то можно использовать только `querySelector/querySelectorAll`. Методы `getElement*` работают быстрее (за счёт более оптимальной внутренней реализации), но в 99% случаев это различие очень небольшое и роли не играет.
|
||||
Вообще, обычно можно использовать только `querySelector/querySelectorAll`. Методы `getElement*` работают быстрее (за счёт более оптимальной внутренней реализации), но в 99% случаев это различие очень небольшое и роли не играет.
|
||||
|
||||
Дополнительно есть методы:
|
||||
<dl>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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]
|
||||
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -247,7 +247,7 @@ age.onblur = function() {
|
|||
|
||||
У них две особенности:
|
||||
<ul>
|
||||
<li>Не поддерживаются Firefox, хотя поддерживаются даже IE6+.</li>
|
||||
<li>Не поддерживаются Firefox, хотя поддерживаются даже старейшими IE.</li>
|
||||
<li>Во всех браузерах, кроме IE, должны быть назначены не через `on`-свойство, а при помощи `elem.addEventListener`.</li>
|
||||
</ul>
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue