Елегантний занепад

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

Давайте розглянемо цей прийом на прикладі, де виводиться текст у блоку та кнопка. Обом елементам задані закруглені кути, а до блоку також додано тінь. Для універсальності потрібно додавати кілька властивостей одночасно. Наприклад, для створення закруглених кутів маємо:

        
            -moz-border-radius: 10px; /* Для Firefox */
            -webkit-border-radius: 10px; /* Для Safari і Chrome */
            border-radius: 10px; /* Для Opera і IE9 */
        
    

Хоча це може призвести до недійсного коду CSS, важливіше, що ця техніка працює в браузерах Firefox 1.0, Safari 3.1, Chrome 2.0, Opera 10.50, IE9 і їхніх старших версіях. На прикладі 1 показано використання властивостей CSS3 для створення тіні та закруглених кутів.

Приклад 1. Блок з тінню

Результат прикладу показано на малюнку 1.

Той самий приклад в браузері IE8 та нижче показаний на малюнку 2.

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

Цей підхід дозволяє активно використовувати декоративні властивості CSS3 незалежно від браузера, мотивує використовувати різні ефекти CSS3, полегшує життя розробнику та прискорює роботу.

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