Рішення css3 для internet explorer

Але розробники стикаються з тим, що клієнти наполягають на використанні крос-браузерних рішень з використанням розширених можливостей CSS3. вимагаючи їх реалізації навіть в IE6. У даній статті зібрані разом кілька опцій, які розробник може прийняти до уваги при роботі в описаних умовах, коли підтримка CSS3 потрібно у всіх версіях Internet Explorer (IE6, IE7 та IE8 - всі вони як і раніше використовуються істотним кількістю відвідувачів сайтів).

прозорість

Ймовірно, що всі розробники спантеличені тим, що Internet Explorer все ще не підтримується дуже популярне (хоча і проблематичне) властивість. Воно використовується всюди вже так давно, що всі встигли забути, що в дійсності - це властивість CSS3. Хоча IE не підтримує властивість opacity. він пропонує схожі ефекти прозорості за допомогою його власного властивості filter.

Насправді вам потрібна тільки другий рядок, яка працює у всіх трьох версіях Internet Explorer. Але якщо з якихось причин вам потрібно використовувати прозорість тільки в IE8, ви можете задіяти третій рядок, яку браузери старших версій не розпізнають.

Значення прозорості, яке встановлюється в кінці кожного рядка властивостей для IE, працює також як і значення властивості opacity. Отримуючи число від 0 до 100 (Властивість opacity використовує двопозиційне число в діапазоні від 0 до 1. Наприклад, "44" для IE буде еквівалентно "0.44" для інших браузерів). Установки прозорості успадковуються елементами нащадками, що може збивати з пантелику при роботі.

демонстрація

Даний елемент має сініій колір фону (# 0000FF), але з прозорістю 40%, що робить його блакитним при виведенні

Той же елемент без установок прозорості.

недоліки

Властивість filter використовується тільки в продуктах Microsoft, тобто ваш CSS не пройде перевірку

Як і в разі використання властивості opacity. значення властивості filter IE успадковується всіма елементами нащадками

закруглені кути

Remiz Rahnas розробив файл HTC, який називається Закруглені кути CSS (його можна завантажити з Google Code). Рішення може використовуватися в таблицях стилів, призначених тільки для IE.

Це чудовий код не вимагає ніякої підтримки з вашого боку, якщо вам потрібно тільки домогтися заокруглення кутів. Потрібно тільки приєднати файл до свого CSS коду, і скрипт автоматично проаналізує код CSS, щоб знайти значення радіусів у властивостях border-radius.

Код може виглядати приблизно так:

В ідеальному випадку потрібно використовувати властивість behavior тільки в таблицях стилів для IE, застосовуючи такий же селектор в CSS, таким чином скрипт буде отримувати значення радіусів.

демонстрація

Так як техніка вимагає використання зовнішнього HTC файлу, то демонстрацію можна подивитися тут (сторінку за посиланням треба відкривати в IE).

недоліки

• Файл HTC має 142 рядки коду (мінімізація або архівування можуть допомогти, але не знімуть проблему повністю)
• Властивість behavior робить ваш CSS недійсним
• Ваш сервер повинен мати можливість завантажувати файл HTC для використання даної техніки
• Схоже, що IE8 має ту ж проблему при використанні файлу HTC з елементами з округленими кутами. які мають негативні значення властивості z-index

тіні прямокутників

Властивість box-shadow є ще однією корисною особливістю CSS3, яка додає елементам натуральну тінь. IE не підтримує властивості box-shadow. але властивість filter пропонує гідну альтернативу.

Потрібно відзначити, що властивість box-shadow було видалено з модуля кордонів і фонів CSS3. таким чином, в CSS3 є деяка невизначеність з його майбутнім в даний час.

На додаток до властивостей для браузерів WebKit і Mozilla ви можете встановити фільтр, який працює у всіх версіях Internet Explorer.

демонстрація

Даний елемент має тінь, яка виводиться і в Internet Explorer.

недоліки

• Установки фільтра для тіней в IE не відповідають в точності властивості box-shadow. Для досягнення однакового виду потрібно буде проводити точні цим параметром, якщо що може бути досить серйозною проблемою.
• Властивості фільтра не проходять перевірку, як і властивості для WebKit і Mozilla. Таким чином даний недолік притаманний усім браузерам.

тінь тексту

Додавання тіні до текстових написів практикується в дизайні поліграфії і веб сторінок вже протягом багатьох років. У веб дизайні зазвичай завдання вирішується за допомогою зображень та іноді за допомогою дублювання тексту зі зміщенням. CSS3 пропонує розробникам простий спосіб додавання тіней до тексту за допомогою простого і гнучкого властивості text-shadow.

На жаль, додавання тіні до тексту в Internet Explorer не є таким вже й простим процесом - навіть з використанням фільтра. Для вирішення проблеми існує плагін jQuery. розроблений данським веб дизайнером Kilian Valkhof.

Спочатку в CSS потрібно встановити властивість text-shadow.

Значення задають колір тіні, положення по горизонтальній осі, становище по вертикальній осі і ступінь розмиття.

Після підключення бібліотеки jQuery і плагіна до вашого документа можна викликати плагін:

Плагін дозволяє також використовувати параметри для зміни властивостей CSS.

демонстрація

Так як дана техніка вимагає використання бібліотеки jQuery і зовнішнього плагіна, ви можете подивитися демонстрацію тут.

недоліки

Існує кілька серйозних недоліків, які перешкоджають широкому використанню даного методу. Ймовірно буде краще створити зображення для заміни тексту в IE.

• Для того, щоб тіні виглядали дуже схоже у всіх браузерах, потрібно буде встановити спеціальні налаштування лише для IE під час розробки сторінки
• Вимагає підключення бібліотеки jQuery, тобто додатково 61-рядки коду
• Версія тіні в IE ніколи не виглядає так само, як і в інших браузерах
• При використанні параметрів для плагіна, які змінюють установки значень властивості в CSS, плагін працює некоректно, виводячи кострубаті тіні
• На відміну від версії CSS3 доданок не підтримує множинні тіні
• З якихось причин для того, щоб все працювало в IE8 потрібно задати для елемента значення z-index

Створення градієнтів для фону є відмінною технікою CSS3, яка допомагає зберегти час розробки. Хоча Internet Explorer не підтримує градієнти CSS3, дуже легко реалізувати їх за допомогою певного синтаксису.

Для визначення градієнта, який буде виглядати однаково в усіх браузерах, включаючи всі версії Internet Explorer, потрібно використовувати наступний код CSS (два останніх рядки призначені для IE):

Для фільтра IE GradientType може мати значення "1 '(горизонтально) або" 0 "(вертикально).

демонстрація

Даний елемент має лінійний градієнт, який діє в Internet Explorer.

недоліки

• Ваш CSS файл не пройде перевірку. Дане твердження буде вірно і для значень для браузерів WebKit і Mozilla
• Інший код потрібен для IE8, що збільшує час розробки
• Градієнти WebKit і Mozilla дозволяють оголошувати "стоп", що неможливо для градієнта IEи
• Фільтр IE не може визначати "радіальний" градієнт, який підтримується в WebKit і Mozilla
• Для того, щоб градієнт був видимим в IE, елемент повинен мати шаблон (тобто для нього повинні бути встановлені властивості, що визначають його графічні параметри, наприклад, висота і ширина)

Прозорі кольору фону (RGBA)

CSS3 має ще один метод використання прозорості, який зачіпає альфа канал для заданого кольору фону. Internet Explorer не підтримує дане властивість, але його можна відтворити.

Для сумісних з CSS3 браузерів синтаксис для установки альфа каналу кольору фону виглядає наступним чином:

Правило CSS встановлює для кольору фону значення RGB і додатково змінює значення альфа на 0.4. Для імітації в Internet Explorer можна використовувати фільтр для створення градієнта з однаковими початковим і кінцевим квітами, які відповідають значенням прозорості. Така властивість може бути включено в таблицю стилів тільки для IE, яка буде анулювати попередні установки.

Градієнт виглядає однаково в IE ід інших браузерах, дублюючи ефект прозорості RGBA. \

демонстрація

Перший приклад працює в браузерах, які підтримують RGBA, а другий працює тільки в Internet Explorer:

Даний параграф має фоновий колір з прозорістю 40%, заданий за допомогою RGBA

Параграф використовує фільтр IE для імітації прозорості RGBA (працює тільки в IE).

недоліки

• Властивість filter не проходить перевірку
• Потрібна додаткова рядок CSS для IE
• Елемент повинен мати шаблон

складові фони

Дана техніка CSS може знайти багато практичних застосувань, коли набуде широкого поширення. На даний момент IE і Opera не підтримують складові фони. Цікавий факт - IE версії 5.5 мав можливість використовувати складові фони для одного і того ж елемента за допомогою фільтра.

У Firefox, Safari, і Chrome для використання складових фонів служить наступне правило CSS:

Для використання двох фонів на одному елементі в IE служить наступне правило:

демонстрація

Нижче наведений елемент має складовою фон, який виводиться в Chrome, Safari і Firefox (в IE нічого не видно):

Нижче наведений елемент має складовою фон, який виводиться в IE (в інших браузерах виводиться тільки один фон):

недоліки

• CSS код не проходить перевірку
• Друге зображення, що використовується в властивості filter. завжди виводиться зліва вгорі і не повторюється. Таким чином метод дуже обмежений у використанні
• Для того, щоб помістити елемент в центр (так як в інших браузерах). потрібно створити зображення з додатковим білим простором навколо для імітації центрування

Обертання елементів (трансформації CSS)

CSS3 має набір трансформації і анімацій, які деяким можуть здатися недоречними для CSS. Проте, існує спосіб імітації обертання елемента в Internet Explorer? хоча і в обмеженому вигляді.

Обертання елемента на 180 градусів (переворот по вертикалі):

Для такої дії в IE використовується фільтр:

Параметр обертання може мати наступні значення 1, 2, 3, або 4 Що відповідає відповідному повороту на 90, 180, 270, або 360 градусів.

демонстрація

Нижче наведений елемент виводить текст догори ногами за допомогою властивості filter. Для більш наочної демонстрації елемент має темно сіру кордон шириною в 3 пікселі знизу. При повороті елемента межа виводиться зверху.

Даний елемент перевернуть на 180 градусів.

недоліки

• Таблиця CSS не пройде перевірку.
• У той час як Mozilla і WebKit дозволяють обертати з кроком в 1 градус, фільтр IE дозволяє використовувати тільки 4 стадії обертання, що обмежує його гнучкість.

висновок

Хоча IE не підтримує CSS3, це не означає, що в ньому не можна реалізувати подібні властивості.

У багатьох випадках кращим рішенням при роботі з IE буде організація виведення з обмеженим набором властивостей. Вище наведені методи допоможуть в тому випадку, якщо клієнт наполягає на більш точному крос-браузерному відтворенні свого ресурсу.

За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!

Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!

Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.

Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!