 |
Категория: Веб-мастерство |
| Название: CSS3 решения для Internet Explorer | |
| Дата добавления: 23-10-2012 | |
| Раз просмотрено: 624 | |
| Комментарии: 0 | |
Рейтинг:  (0 голосов) |
CSS3 решения для Internet Explorer
CSS3 сейчас, вероятно, является самым горячим трендом в веб-дизайне, который позволяет разработчикам реализовать ряд решений в своих проектах с помощью очень простого CSS кода, избегая при этом необходимости прибегать к несемантический разметке, дополнительным изображениям или сложному JavaScript. К сожалению, это не удивительно, что Internet Explorer, даже в самой последней версии, все еще не поддерживает большинства свойств и возможностей, представленных в CSS3.
Опытные разработчики понимают, что CSS3 свойства могут быть добавлены в новые проекты в виду прогрессивного улучшения. Это гарантирует, что содержание сайта будет доступно пользователям даже с браузерами, не поддерживающих новые свойства, но с несколько сниженным опытом взаимодействия.
Но разработчики могут столкнуться с ситуацией, когда заказчики требуют, чтобы нововведения работали кросс-браузерно, даже в Internet Explorer 6. Для такого случае, в этой статье собрано несколько решений, которые разработчики могут использовать в тех случаях, когда поддержка CSS3 свойств является обязательной для всех версий Internet Explorer.
Обратите внимание, что CSS3 свойства в примерах даны без вендорных префиксов для краткости и понятности, но не забывайте использовать все необходимые префиксы, при воплощении какого-либо способа в вашем рабочем проекте.
Прозрачность
Наверное, все веб-разработчики расстроены тем, что Internet Explorer до сих пор не поддерживает очень популярное свойство прозрачности. Это свойство существует уже так долго, что мы часто забываем, что оно входит в CSS3. Хотя Internet Explorer не предлагает поддержку для свойства прозрачности, у него есть аналогичные настройки прозрачности с помощью собственных фильтров.
Синтаксис
#id {
opacity: 0.4; /* Другие браузеры и IE9+ */
filter: alpha(opacity=40); /* IE6+ */
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* IE6+ */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* Только IE8 */
}
На самом деле, вам нужна только вторая линия, которая работает во всех версиях Internet Explorer. Но если по какой-то причине вам нужна прозрачность, которая применяется только в Internet Explorer 8, но не в его 6 или 7 версии, то вы можете использовать последнюю строку. Третья строка — это просто еще один способ сделать то же самое, но при помощи более запутанного синтаксиса.
Значение в конце каждой строки кода работает почти так же, как и в свойстве opacity, принимая число от 0 до 100 (свойство opacity принимает двузначное число от 0 до 1, таким образом «44» для фильтров Internet Explorer будет «0.44» для этого свойства). Кроме того, как многие уже убедились на опыте, при использовании прозрачности элементов, она будет унаследована всеми дочерними элементами.
Недостатки
- Свойство фильтра проприетарно, и ваш CSS код не будет валиден.
- Как и в случае свойства opacity, фильтр придает прозрачность всем дочерним элементам.
- При использовании Internet Explorer фильтров могут наблюдаться проблемы с производительностью
Закругленные углы
Свойство border-radius (более известное как CSS3 закругленные углы) является еще одним популярным CSS3 нововведением. Это свойство позволило разработчикам избежать проблем с раздутым JavaScript или с дополнительными элементами для достижения того же эффекта (об обходных способах создания скругленных углов вы можете почитать в статье «Скругленные углы в дизайне»). Но, опять же, Microsoft не хочет сотрудничать, так что Internet Explorer не имеет поддержки этого свойства.
К счастью, для решения этой проблемы было создано очень эффективное решение. Remiz Rahnas из HTML Remix создал HTC файл, который называется CSS Curved Corner, который можно загрузить с Google Code. Самое замечательное в этом решении является то, что оно не требует каких-либо дополнительных изменений, если вы регулируете радиус скругления углов. Вы просто подключаете этот файл в ваш CSS код, и скрипт будет автоматически анализировать его.
Синтаксис
#id {
border-radius: 10px;
behavior: url(border-radius.htc);
}
Все это работает довольно просто, как показано выше. В идеале, однако, лучше применять свойство behavior в отдельно таблице стилей специально для Internet Explorer.
Недостатки
- Этот HTC файл состоит из 142 линий (сжатие файла может помочь, но он все равно довольно большой)
- Свойство behavior сделает ваш CSS код невалидным
- Ваш сервер должен иметь возможность загружать HTC файлы для работы этого способа
- В Internet Explorer 8 есть некоторые баги с отрицательным
z-index.
Тень контейнера
Свойство box-shadow является еще одной полезной функцией CSS3, которая добавляет тень к контейнеру. Она даже может иметь закругленные края, если к элементу применено свойство border-radius. Internet Explorer не поддерживает это свойство, но у него есть фильтр, который предлагает похожее решение. Следует отметить, что свойство box-shadow было удалено из модуля CSS3 Backgrounds and Borders, так что его будущее в CSS3 кажется немного неясным.
Синтаксис
#id {
box-shadow: 2px 2px 3px #969696;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
}
Недостатки
- Настройки фильтра тени Internet Explorer не совпадают с настройками обычного свойства, поэтому, для того, чтобы получить одинаковое отображение во всех браузерах, вам придется повозиться со значениями, пока вы не получите правильный результат. Это может вызвать некоторые трудности в тех случаях, когда вы будете менять значения.
- Свойство фильтра не является валидным, но это также относится и к вендорным префиксам для стандартного свойства.
Тень текста
Добавление теней к тексту практикуется в печатном дизайне и веб-дизайне в течение многих лет. В веб-дизайне, это обычно делается с помощью изображений, а иногда с помощью дублирующегося текста в сочетании с позиционированием. CSS3 позволяет разработчикам легко добавлять тени к тексту, используя простое и гибкое свойство text-shadow.
К сожалению, простого способа добавить тень к тексту в Internet Explorer не существует — для этой цели просто нет специального фильтра. Чтобы решить эту проблему, был написан особый jQuery плагин, который реализует тень текста в Internet Explorer.
Синтаксис
Во-первых, в вашем CSS, вы должны установить свойство text-shadow и его параметры:
.text-shadow {
text-shadow: #AAA 1px 1px 1px;
}
Эти значения задают цвет тени, положение по горизонтальной оси, положение по вертикальной оси, и степень размытия. После подключения библиотеки jQuery и нужного плагина в ваш документ, вы можете вызвать его с помощью такого кода:
// Подключите jQuery к странице
// Подключите плагин к странице
$(document).ready(function(){
$(".text-shadow").textShadow();
});
Несмотря на то, что существует другой, кросс-браузерный jQuery плагин, который также реализует возможности теней для текста, рекомендуется использовать плагин, рассмотренный выше, так как он использует значения, взятые из вашего CSS, а для другого плагина вам понадобится вручную вводить эти значения.
Недостатки
У этого метода есть несколько существенных недостатков, которые делают его практическое применение сомнительным. Скорее всего, вам лучше будет создавать изображения для замены текста в Internet Explorer.
- Чтобы тень выглядела в Internet Explorer почти также, как в других браузерах, вам необходимо использовать различные настройки в таблице стилей, предназначенной для этого браузера, что увеличивает время разработки и настройки.
- Вам также следует добавить библиотеку jQuery к вашему файлу, а также 61-строчный плагин.
- Тень в браузере Internet Explorer никогда не будет выглядеть точно так же, как в других браузерах
- При использовании переопределяющих параметров, плагин показывает большие и некрасивые тени, которые не будут реагировать на новые значения.
- В отличие от CSS3 свойства, плагин не поддерживает несколько теней.
- По каким-то причинам, для того, чтобы заставить плагин работать в Internet Explorer 8, вы должны задать элементу свойство
z-index.
Градиенты
Другая практичная и экономящая время особенность в CSS3 — это возможность создавать собственные градиенты в качестве фона. Хотя Internet Explorer не поддерживает градиенты, заданные с помощью CSS3 свойства, их довольно легко реализовать их для браузера Internet Explorer, используя его собственный синтаксис.
Синтаксис
Чтобы создать градиент, который будет выглядеть одинаково во всех браузерах, включая все версии Internet Explorer, используйте CSS код, показанный ниже (последние две строки для Internet Explorer):
#gradient {
background-image: linear-gradient(top, #81a8cb, #4477a1);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 и IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */
}
Для фильтров Internet Explorer, GradientType может быть установлен, как «1» (горизонтальный) или «0» (вертикальный).
Недостатки
- Ваш CSS не будет валидным, хотя эта проблема также существует в стандартном CSS3 свойстве градиентов с префиксами для WebKit и Mozilla.
- Для Internet Explorer нужно другое свойство, что увеличивает время разработки.
- CSS3 градиенты имеют возможности «остановки цветов», чего не существует в синтаксисе градиента для Internet Explorer, что ограничивает его гибкость.
- Фильтр Internet Explorer не позволяет также создавать радиальные градиенты.
- Чтобы градиент элемента отображался в Internet Explorer, элемент должен иметь
layout.
Прозрачные цвета фона (RGBA)
CSS3 предлагает другой метод для реализации прозрачности — с помощью альфа-канала, который задается как цвет фона. Internet Explorer не предлагает поддержку для этого, но это можно обойти.
Синтаксис
Вот синтаксис для установки альфа-канала, как фона элемента в браузерах, поддерживающих CSS3:
#rgba {
background: rgba(98, 135, 167, 0.4);
}
С помощью указанного выше CSS кода, цвет фона будет установлен в заданные RGB значения, а также будет задана опциональная альфа-прозрачность значение в 0.4 единицы, что соответствует 40%. Для имитации этого эффекта в Internet Explorer, вы можете использовать проприетарное свойство фильтра для создания градиента с одинаковым начальным и конечным цветом, вместе со значением альфа-прозрачности. Это будет включено в таблицу стилей, предназначенную только для Internet Explorer.
#rgba {
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#886287a7', endColorstr='#886287a7');
}
Этот «градиент» будет выглядеть точно так же, как в Internet Explorer, так и в других браузерах, полностью дублируя эффект прозрачности RGBA.
Недостатки
- Проприетарное свойство фильтра делает ваш CSS код не валидным.
- Элемент должен иметь layout для корректного отображения в Internet Explorer.
Также, для достижения этого эффекта можно использовать метод с PNG изображением, но он работает только Internet Explorer версий 7 и 8, а для 6 версии требуется PNG-хак. Метод PNG является альтернативным вариантом, но является более проблемным и имеет больше недостатков.
Несколько фонов
Это другая CSS3 техника, которая, когда станет широко поддерживаемой, может оказаться очень практичным дополнением в CSS. В настоящее время, Internet Explorer и Опера являются единственными браузерами, которые не поддерживают эту функцию. Но вот что интересно, в Internet Explorer еще 5.5 версии ввели возможность реализовать несколько фонов элемента с помощью фильтра.
Синтаксис
Чтобы использовать несколько фонов в Firefox, Safari и Chrome, вам следует использовать этот CSS код:
#multi-bg {
background: url(images/bg-image-1.gif) center center no-repeat, url(images/bg-image-2.gif) top left repeat;
}
Чтобы применить два фона у одного и того же элемента в Internet Explorer, используйте следующие свойства в стилях для Internet Explorer:
#multi-bg {
background: transparent url(images/bg-image-1.gif) top left repeat;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-image-2.gif', sizingMethod='crop'); /* IE6-8 */
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-image-2.gif', sizingMethod='crop')"; /* Только IE8 */
}
Недостатки
- Ваш CSS код будет невалидным.
- Второе фоновое изображение, задаваемое с помощью фильтра, всегда будет в левом верхнем углу элемента, и не может повторяться, что делает этот метод чрезвычайно негибким и применимым только в ограниченном числе случаев. Для того, чтобы поместить второй фон по центру, вам придется создать изображение с нужным количеством пустого места вокруг него, чтобы имитировать центрирование.
- Фильтр AlphaImageLoader может вызывать некоторые проблемы с производительностью.
Вращение элемента (CSS Tranformations)
В CSS3 был введен ряд возможностей в виде преобразований и анимации элементов, которые некоторые разработчики считают неуместными в CSS. Тем не менее, есть способ, позволяющий имитировать вращение элемента в Internet Explorer, хотя и в ограниченных масштабах.
Синтаксис
Чтобы повернуть элемент на 180 градусов (то есть, чтобы перевернуть его вертикально), вам необходимо это CSS3 решение:
#rotate {
transform: rotate(180deg);
}
Чтобы создать точно такой же поворот в Internet Explorer, вам необходимо использовать этот фильтр:
#rotate {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
Значение для вращения может быть 1, 2, 3 или 4. Эти цифры составляют 90, 180, 270 или 360 градусов соответственно. Однако существует довольно сложный метод создания таких же гибких поворотов, как и в CSS3 свойстве. Этот метод реализован в проекте Пола Айриша «CSS3, Please».
Недостатки
- Ваш CSS код не будет валидным, хотя это также верно и для свойств, использующих вендорные префиксы.
- CSS3 свойство позволяет нам легко и просто поворачивать элемент с точностью до градуса, в то время, как фильтр для Internet Explorer является гораздо более тяжело настраиваемым.
Заключение
Помните о том, что эти решения не добавляют поддержку CSS3 в Internet Explorer, поэтому будьте аккуратны в терминологии. Однако, это не значит, что аналоги этих свойств не могут быть так, или иначе, реализованы.
Так же, не забывайте, что если вы используете дополнительный JavaScript, jQuery, или HTC файлы, убедитесь, что они подключаются с использованием условных комментариев для Internet Explorer. Это будет гарантировать, что другие браузеры не будут осуществлять ненужные HTTP-запросы. Однако, в итоге можно сказать, что эти решения обеспечивают несколько вариантов для создания аналогичных свойств CSS3 в Internet Explorer, когда клиент хочет более точной кросс-браузерной поддержки.
Это интересно: «Необычные горизонтальные линии».
Ваш комментарий будет первым.