Улучшаем border-radius.htc

Думаю многим верстальщикам известно решение, которое заставляет IE рисовать скругленные уголки: «curved-corner» (или border-radius.htc).

В этой статье я расскажу, как избавиться от ошибок «Invalid argument» при его использовании, а также как в разы ускорить его работу.

В одном проекте, где применялся этот способ, в IE вылетало 7 окон с ошибкой следующего содержания:



Возникала она именно в border-radius.htc и вот что ее вызывало:

var css = el.document.createStyleSheet();

Выяснилось, что с помощью метода createStyleSheet можно добавить до 31 таблицы стилей. После этого значения будет выведена ошибка Неправильный аргумент (Invalid Argument).

Открыв DebugBar, я увидел следующее:



<Встроенная таблица стилей> — это и есть таблица стилей, созданная скриптом. Причем их было около 38 штук и они все содержали одинаковый код.

v\:roundrect {
BEHAVIOR: url(#default#VML)
}
v\:fill {
BEHAVIOR: url(#default#VML)
}

Отсюда вполне очевидное решение: просто вставляем этот код в css-файл, который подключаем через Conditional comments только для IE. А в border-radius.htc удаляем (или комментируем) эти 3 строчки:

var css = el.document.createStyleSheet();
css.addRule("v\\:roundrect", "behavior: url(#default#VML)");
css.addRule("v\\:fill", "behavior: url(#default#VML)");

В результате пропали ошибки Invalid Argument и уменьшилось время загрузки сайта в IE, т.к. больше не нужно генерировать 38 таблиц стилей.

Profit!