Кросбраузерності css3, або як боротися з internet explorer, poltor

Головна Статті кросбраузерності CSS3, або як боротися з Internet Explorer

Будь-який веб-дизайнер або верстальник знає як CSS3 може полегшити життя, прискорити і оптимізувати процес верстки. Такі властивості як «border-radius», «box-shadow» дають можливість уникнути використання зайвих картинок і десятків рядків коду, що, в свою чергу, прискорює процес верстки сайту і збільшує швидкість його завантаження. Використовуючи CSS3 в своїх роботах я зіткнувся з проблемою кросбраузерності, а саме відображений сайтів в старих браузерох і, звичайно ж, в Internet Explorer. Сьогодні я розповім вам якими засобами я користуюся для досягнення кросбраузерності CSS3, включаючи Internet Explorer.

Давайте ближче познайомимося з рядом методів які можна застосовувати для досягнення крссбраузерного використання CSS3.

Скачайте скрипти і скопіюйте їх в одну папку зі стилями CSS. Ось список скриптів які нам знадобляться:

CSS3 PIE наш помічник у роботі з IE. PIE «вчить» Internet Explorer розуміти CSS3.В папці CSS3PIE download знаходяться всі необхідні нам файли. Ми будемо використовувати файл PIE.htc. і будемо звертатися до нього через CSS, тому необхідно помістити його в ту ж папку що і файли стилів.

У цьому прикладі, я буду використовувати Google-хостинг з бібліотекою Mootools, щоб зробити це, я просто вставлю необхідний код в head:

Ми, так само, можемо використовувати jQuery щоб отримати альтернативу CSS3 text-shadow. Все що нам необхідно - це завантажити jQuery text-shadow plugin, і підключити його разом з jQuery:

Дуже добре, тепер можна приступати до рішень проблем кроссбраузесті CSS3.

Закруглені кути (BORDER-RADIUS)

Обрізка кутів - це, напевно, найкраще що дало нам CSS3. На щастя його можна використовувати і не боятися неправильного відображення в Internet Explorer. У цьому нам допоможе CSS3PIE.

behavior: url (PIE.htc);

Як ви можете переконатися, нам просто необхідно "викликати" PIE скрипт, після властивості border-radius.

ТІНЬ блокових ЕЛЕМЕНТІВ (BOX-SHADOW) RGBA КОЛЬОРУ

Точно так само як і з border-radius, для підтримки Internet Explorer заокруглених кутів, просто необхідно підключити PIE скрипт. Пам'ятайте також, що ми можемо використовувати RGBA значення.

box-shadow: 5px 5px 5px rgba (0. 0. 0. 75);

behavior: url (PIE.htc);

Ви так само можете використовувати RGBA кольору коли прописуєте властивості «background-color».

І знову ж таки ми використовуємо -pie- префікс:

background. url (img / flash.png) 20px 20px no-repeat. url (img / airplane.png) 90px 50px no-repeat. # 00BFF3; / * Modern Browsers * /

-pie- background. url (img / flash.png) 20px 20px no-repeat. url (img / airplane.png) 90px 50px no-repeat. # 00BFF3; / * IE6 + * /

behavior: url (PIE.htc);

ЗОБРАЖЕННЯ РАМКИ (BORDER-IMAGE)

Остання властивість CSS3 яке підтримує PIE - це border-image:

border-image: url (border.png) 27 27 27 27 round round;

behavior: url (PIE.htc);

Схожі статті

• Вчимо internet explorer розуміти css3