Кросбраузерний border-radius + IE
4, Тра, 2012
Кросбраузерний border-radius завжди був темою “нижче пояса” :)
CSS3 подарував нам чудову функцію – заокруглення кутів. Но не зважаючи на всі “за” і “проти”, на всі заперечення і схвалення на форумах, я вважаю таку функцію корисною, думаю ви також:) Але є незначні проблеми з підтримкою даної функції в браузерах. Всім відомий “браузер для скачування браузерів” залишається величезною чорною плямою на білому фоні, що ж боротись з ним просто необхідно! Та й з іншими браузерами теж є невеличкі проблеми. Тому давайте розберемося як підтримати кросбраузерність.
Такі браузери як FF, Safari, Chrome, Opera роблять заокруглення кутів за допомогою спеціальних префіксів. Давайте розглянемо приклад для цих браузерів:
|
1 2 3 4 5 |
/* Всі браузери окрім IE */ -moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Chrome */ -khtml-border-radius: 10px; /* KHTML */ border-radius: 10px; /* CSS3 */ |
Як бачимо нічого складного.
Що ж стосується Internet Explorer (IE). Є декілька методів боротьби з ним, наприклад behaviour для box-shadow (метод не поганий, але не зовсім те…) чи за допомогою використання VML і behaviour — curved-corner.
Скачуємо файл: border-radius.htc і кладемо його до CSS файла в якому будемо його використовувати. Далі прописуємо його в CSS:
|
1 |
behavior: url(border-radius.htc); / * вказуємо шлях до файла */ |
І давайте подивимося як виглядає наш CSS код з повною кросбраузерністю:
|
1 2 3 4 5 6 7 |
/* Всі браузери окрім IE */ -moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Chrome */ -khtml-border-radius: 10px; /* KHTML */ border-radius: 10px; /* CSS3 */ /* Для IE */ behavior: url(border-radius.htc); /* вказуємо шлях до файла */ |
1