IE8 Beta 1 не оправдывает своих ожиданий...

Не так давно я боролся с вертикальным выравниванием в Internet Explorer, и вот опять оказалось, что с выходом IE8 Beta это было всё напрасно. Как и многие, я не рискнул устанавливать IE8 на основную машину, поэтому поставил на виртуальную. Затем зашёл на парочку сайтов, которые отображаются нормально во всех остальных браузерах… Я был потрясён и разочарован…

Возникает чувство, что Micro$oft называет свои alpha-релизы бетами. Они делали акцент на том, что MS IE8 проходит тест ACID2, так гордились этим… А оказалось, что всё как обычно: убрали один старый баг, внесли десяток новых.

Что меня шокировало больше всего: vertical-align больше не работает. Не работает и valign="middle" для элементов <td>. <br style="clear: both"> не всегда работает. Ширина элемента вычисляется довольно криво (тем не менее, тест ACID2 проходится). IE8 поддерживает хаки для IE7. Например, этот код сработает и в IE7, и в IE8:

[-]
View Code CSS
*:first-child+html p {
    color: red;
}

Так вот Micro$oft исправил поддержку CSS. Кстати, интересно, почему тогда не срабатывает старый хак для IE6 (* html p)?

В соответствии со стандартами CSS:

The :first-child pseudo-class represents an element that is the first child of some other element.
Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2, ignoring non-element nodes (such as text nodes and comments).

Таким образом, *:first-child+html будет читаться как “элемент html, предшествующий (любому) элементу, который является первым потомком неуказанного элемента”. То есть это будет соответствовать такой вот структуре:

[-]
View Code HTML
    <div id="unknown_element">
        <div id="first_child">*:first-child</div>
        <div id="adjacent">
            *:first-child+#adjacent
            <div id="test">*:first-child+#adjacent #test</div>
        </div>
    </div>

Для удовлетворения любопытства:

[-]
View Code CSS
#unknown_element { background: yellow; height: 100px; padding: 5px; }
#first_child { background: blue; height: 50px; }
#adjacent { background: red; height: 50px; }
#test { height: 40px; margin: 5px 0; background: white; }

Выглядеть должно так:

Теперь добавляем стиль и смотрим:

[-]
View Code CSS
*:first-child+#adjacent #test { background: green; } /* аналог *:first-child+html #test */

Результат будет таким (что в нормальном браузере, что в IE7, что в IE8):

А теперь самое интересное: убираем предыдущий стиль и добавляем аналогичный хаку для IE6:

[-]
View Code CSS
* #adjacent #test { background: lime; } /* аналог * html #test */

И выгядит точно также (с поправкой на цвет):

Внимание, вопрос: если оба хака сработали, то почему *:first-child+html срабатывает, а * html — нет? И не здесь ли кроется ответ, что в IE7 *:first-child+/**/html не работает, а в IE8 работает? Возникает такое чувство, что M$ разбирает CSS регулярными выражениями (убирает лишние пробелы, комментарии и т.п.), а затем теми же регулярныими выражениями убирает хаки типа * html? Ведь по логике вещей должны срабатывать что один, что другой. И эксперимент показал, что на обычных элементах работает, а вот на html — нет. В IE8 усовершенствовали парсер, поэтому он убирает /**/ из селектора. А так как IE8 умеет эмулировать IE7, то и попадается он на те же самые приколы :-) Ну не будет Micro$oft писать новый парсер :-)

Но, исправляя старые ошибки, разработчики добавили новые. Например:

[-]
View Code CSS
/*\*//*/
body { background: red !important; }
/**/

Этот хак использовался для задания стилей для IE/Mac. Но вот IE8 тоже теперь его понимает (возможно, благодаря жадному регэкспу, чистящему /* */ в селекторах).

И вот мне интересно: ACID2 проходится благодаря тому, что его структура известна? Интересно, а что будет, если заменить одни элементы другими? Или переставить стили местами? Сработает?

Что же, ждем следующую бету… Только бету, которая не будет альфой.

Добавить в закладки

Связанные записи

14
Март
2008

Комментарии к статье «Почему Microsoft называет альфы бетами, или, кому нужны ACID-тесты» (3)  »

  1. [...] семантической нагрузки. А с появлением IE8 beta (которая альфа) расчеты усложнились, ибо IE8 довольно-таки криво [...]

  2. [...] и проверил: действительно. Причем только в IE6 и IE7, в IE8 (на удивление) всё в [...]

  3. [...] во-первых, IE8 поддерживает display: table, display: table-row и display: table-cell; во-вторых, будучи бетой, он не поддерживает vertical-align ни в каком виде. [...]

Подписаться на RSS-ленту комментариев к статье «Почему Microsoft называет альфы бетами, или, кому нужны ACID-тесты» Trackback URL: http://blog.sjinks.org.ua/css/27-why-microsoft-calls-alpha-beta-or-what-acid-tests-are-for/trackback/

Оставить комментарий к записи «Почему Microsoft называет альфы бетами, или, кому нужны ACID-тесты»

Вы можете использовать данные тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Оставляя комментарий, Вы выражаете своё согласие с Правилами комментирования.

Подписаться, не комментируя