Использование CSS-фильтров в IE8
Прозрачность. Градиенты. Падающие тени.
Задолго до того, как в CSS добавили функции переходов и трансформаций, Internet Explorer 4 обеспечивал визуальные эффекты с помощью CSS. Эти возможности были расширены в Internet Explorer 5.5. Например, cледующий код, использовался чтобы сделать объект полупрозрачным:
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
Частично вследствие исходного дизайна синтаксис свойств фильтра нарушал грамматические правила CSS 2.1: он включает символ «:» -- разделитель, который используется в CSS для обособления имени свойства от его значения, а поэтому запрещенный за пределами строк в кавычках. Синтаксис значений также опирается на функциональную нотацию, т.е. форму function ( expression ) , но приемлет и знак «=» в выражении.
Что в этом подходе не так?
Результаты этих нарушений могут быть заметны если при написании фильтра допущена синтаксическая ошибка, например отсутствие круглой скобки в конце. Правила восстановления при синтаксических ошибках CSS нуждаются в синтаксических анализаторах, чтобы игнорировать неизвестные и неверно сформированные объявления, определяя их конец и возобновляя синтаксический анализ оставшейся части таблицы стилей. Важное пояснение: определенным символьным парам необходимо соответствие в процессе восстановления, то есть если найдены один или более символ ‘(‘, объявление считается незавершенным до тех пор, пока не найден соответствующий набор закрывающих символов ‘)’.
При разборе нижеприведенного кода:
<!doctype html><?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><html><head><title>Filters in IE8</title><style>.bordered { border: 2px solid black; padding: 5px;} .filtered { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50; border: 1px dotted black; background-color:lime; width:75%;}p#test { font-weight:bold; color:red;}</style></head><body> <div class="bordered"> <div class="filtered"> <a href="https://blogs.msdn.com/ie/">Visit the IE Blog</a> </div> <p id="test">This text should be red</p> </div></body></html>
анализатор, созданный в соответствии со стандартами, выведет следующее:
Поскольку для Microsoft фильтр является нестандартным расширением, то чтобы игнорировать его, синтаксический анализатор должен искать конец неизвестного объявления. Если во время анализа встречаются только символы ‘(‘, но отсутствуют соответствующие им ‘)’, то остаток правила, в том числе задание пунктирной окантовки, фона, ширины и абзацев, тоже будет проигнорирован.
IE7 в этом смысле более гибкий, так как он распознает фильтры и не так строго придерживается правил синтаксического анализа CSS:
Но пунктирная окантовка, которая следует за объявлением фильтра, по-прежнему отсутствует.
Как режим стандартов IE8 должен обрабатывать объявления фильтра?
В новом синтаксическом анализаторе таблиц стилей, совместимом с CSS 2.1, есть опция для IE8, которая будет переписывать фильтр, например тот, который вы видели выше, в запись такого вида:
Код:
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
Приставка -ms- означает, что это объявление – частное объявление Microsoft. Благодаря разделению всех значений по строкам, проблемы грамматического разделения исчезают. Таким образом, другие браузеры могут благополучно проигнорировать это объявление, даже если значение самого фильтра синтаксически недопустимо. Фактически это все, что было нужно Beta 1 IE8 и Beta 2.
Как такой строгий синтаксис скажется на моем вебсайте?
Это значит, что ни одно из ваших существующих объявлений фильтра не будет использоваться режимом стандартов IE8. В лучшем случае эти объявления не будут иметь никакого эффекта; в худшем – они окажутся синтаксически недопустимы и одно или более объявлений в вашей таблице стилей будут незаметно отключены.
Это также означает, что для того, чтобы фильтр работал и в IE7, и в бета-версии IE8, вы должны написать два правила:
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
Кроме того, для синтаксического анализатора IE8 последовательность этих объявлений имеет значение с точки зрения совместимости: фильтр MS должен идти первым.
Следует ли мне просмотреть все свои таблицы стилей, использующие это свойство, и обновить их?"
Конечно же, но это довольно проблематично для некоторых из наших клиентов и партнеров. Пока они с большим пониманием и благосклонностью относились к нашим целям по обеспечению соответствия стандартам, влияние обратной совместимости оказалось достаточным для того, чтобы использовать режим Compatibility View по умолчанию в финальной версии IE8, пока они не приведут в соответствие свои сайты. Это значит, что миллионы пользователей смогут перейти на IE8, продолжая получать доступ к сайтам с высоким трафиком через движок IE7.
Практическое решение
Хотя решение может оказаться двояким – должен ли IE8 быть обратно-совместимым или совместимым с принятыми стандартами? – необходимо принимать в расчет и другие факторы:
· Свойство фильтра является собственностью Microsoft, поэтому вряд ли оно будет стандартизировано или поддерживаться другими разработчиками браузеров
· Это свойство фильтров широко используются
· И грамматические правила CSS и существующие реализации способны безопасно пропустить синтаксически верные коды фильтра.
· В режиме стандартов IE8 наш синтаксический анализатор CSS при сравнении должен соответствовать правилам восстановления ошибок CSS 2.1.
С учетом этих неудобств появилось решение: если объявление фильтра синтаксически допустимо, примените его: эта функция по-прежнему доступна только в IE, другие браузеры могут пропустить его из-за написания кода в CSS 2.1 и создатели веб-контента не должны переписывать свои таблицы стилей.
Если фильтр синтаксически недопустим, IE8 не пропустит его по принятым правилам. Это именно то, что делает IE8 с момент выпуска RC1.
Раз это единственная функция, ради которой я и многие другие используют фильтры, почему бы просто не реализовать прозрачность?
Да, на сегодняшний день прозрачность это наиболее распространенный случай использования фильтров. Однако:
· Будучи функцией CSS3, прозрачность находилась вне наших интересов по обеспечению соответствия CSS 2.1, поэтому шла как дополнительная задача.
· Наиболее распространенное предположение – то, что реализация прозрачности состоит в изменении значения альфа-фильтра от 0 до 1. Однако, как определено, у свойства прозрачности есть побочные эффекты при наложении элементов.
· Прозрачность – это далеко не единственная функция фильтра для использования в сети. Некоторые из этих функций не имеют аналогов CSS.
Разработанный так, чтобы пройти наибольшее количество тестовых примеров CSS, новый механизм визуализации страниц IE8 по-прежнему предполагает простую работу с HTML и CSS, которые как раз и могут быть совместимыми, не очень совместимыми или несовместимыми вообще. Ожидается, что он пройдет стандартные тесты и будет поддерживать функции из предыдущих выпусков. Необходимость создания одной межбраузерной таблицы стилей является привлекательной возможностью, особенно если ранее созданные таблицы также продолжают работать. Цели веб-стандартов вместе с ожиданиями дизайнеров и пользователей не должны быть взаимоисключающими, ведь совместимость с принятыми стандартами и обратная совместимость являются ключевыми характеристиками современного браузера.
Сильван Галиньо (Sylvain Galineau),
программный менеджер Internet Explorer
Comments
- Anonymous
May 29, 2009
PingBack from http://paidsurveyshub.info/story.php?title=internet-explorer-8-css