Page 98 - Сила CSS3 Освой новейший стандарт

98 • Глава 2. Облачка с текстом

Обходные пути для IE
Фильтр для IE под названием Matrix умеет эмулировать некоторые трансформации
CSS3. К сожалению, для поиска правильных значений параметров фильтра при-
ходится выполнять сложные расчеты в матричной форме. Полагаю, вы в данный
момент читаете книгу по веб-дизайну как раз потому, что математика вас слабо
интересует, так что я не буду загружать вас деталями расчетов (да и все равно не
сумею объяснить все толком). Позвольте мне лучше подсказать вам адрес генератора
CSS, созданного Золтаном Гаврилюком (Zoltan Hawryluk) и вашей покорной слугой,
который называется IE’s CSS3 Transforms Translator, — вы найдете его на странице
http://www.useragentman.com/IETransformsTranslator.
Для начала введите в поле Step 1 (Шаг 1) значение rotate(-5deg) и любые значения
ширины (поле Width) и высоты (поле Height) (мы не будем их использовать, но их
необходимо указывать для того, чтобы инструмент работал). Затем щелкните на
кнопке Translate to IE Matrix (Преобразовать в матрицу IE). Чуть ниже появится
второе поле под названием Step 2 (Шаг 2), содержащее два блока кода — один для
браузеров, поддерживающих CSS3, а второй для IE (рис. 2.26).
Скопируйте код из поля для IE и добавьте его к стилям, вставив внутрь тега head.
Удалите из кода CSS все комментарии.
#transformedObject {
-ms-filter: "progid:DXImageTransform.Microsoft.
¬ Matrix(M11=0.9961946980917454, M12=0.08715574274765871,
¬ M21=-0.08715574274765871, M22=0.9961946980917454,
¬ SizingMethod=’auto expand’)";
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917454,
M12=0.08715574274765871,
M21=-0.08715574274765871,
M22=0.9961946980917454,
SizingMethod=’auto expand’);
margin-left: -11px;
margin-top: -11px;
}

Данное правило включает свойство filter для IE 6 и 7, а также свойство -ms-filter
для версии IE 8. Обратите внимание, что в показанном выше фрагменте кода внутри
фильтра -ms-filter присутствуют разрывы строк. Они добавлены только для того,
чтобы код поместился на страницу книги, — эти символы не генерируются инстру-
ментом Transforms Translator. Убедитесь, что в вашем файле свойство -ms-filter
целиком помещается на одной строке, иначе оно работать не будет. Свойство filter
работает как с разрывами строк, так и без. Значения margin необходимы, так как
IE выбирает не те источники трансформации, что другие браузеры, и аватары из-за
этого немного перекрывают имена комментаторов. Указывая значения полей или
используя относительное позиционирование, вы перемещаете элементы на нужное
место, поэтому страница выглядит одинаково во всех браузерах.

www.trk.kg