Часто, коли ми здаємо проект клієнту, ми втрачаємо контроль над HTML-кодом. Іноді клієнт використовує CMS (Системи Управління Контентом), які дають йому повний контроль над тими чи іншими частинами HTML-коду. Іноді клієнт просто використовує наші темплейти для виведення коду в документ.
Є кілька розв'язків проблеми. Одне - виведення попереджувального зображення за допомогою CSS, коли використовуються небажані теги. Детальні пояснення цього способу є тут і тут. Друге рішення - "вирізання" небажаних тегів та атрибутів на стороні сервера. Цей спосіб є найбільш ефективним, інша справа, що не завжди є контроль за сервером де розташований сайт.
Небажані HTML-теги та атрибути:
Рішення
В ідеалі ми могли б просто відкоригувати деякі HTML-теги, вставивши значення inherit для еквівалентного CSS-властивості. Браузери, що працюють за стандартами, просто проігнорують задані в коді небажані атрибути і будуть використовувати замість них значення в каскаді.
Наприклад, цей CSS:
буде превалювати над цим кодом:
Відповідно, колір тексту всередині тега font буде кольором, успадкованим по каскаду, а не синім, як задано в коді. Те що треба. Але як ви напевно знаєте - Internet Explorer має проблеми з успадкованими значеннями. І у сьомій версії теж. Тож за роботу:
Expressions і currentStyle на допомогу:
Чи працює? Чудово, поїхали далі:
Все чудово, крім того, що Opera 9 не успадковує значення для font-family. На щастя font нас теж влаштує:
Із цим розібралися. Перейдемо до якості font-size. Тут потрібна делікатність, оскільки значення розміру шрифту успадковується стосовнообчислюваному (computed) значенню. Попередня expression'и тут не спрацюють, тому що якщо для body виставлено значення властивості font-size, що дорівнює 2em, то обчислення значення розміру шрифту почнеться від цієї точки. Браузер перевірить значення font-size для батьківського елемента тега font, яке дорівнює 2em і представить значення, що дорівнює 4em (2em від 2em). А це не те, що нам потрібно. Рішення просте. Потрібно використовувати початкове значення font-size, що дорівнює 100% для всіх браузерів. Давайте додамо кілька властивостей небажаному тегу базифонту, щоб і його втихомирити. Ось повний список правил для "приборкання" тегів font і basefont:
Рухаємось далі. Давайте скористаємося базовою технікою, щоб скасувати теги center, s, strike та u:
Здійснилося! Ми "відключили" більшість небажаних тегів, використовуючи лише CSS та expression'и.
А як же атрибути? HTML4 включає в себе кілька небажаних атрибутів, які можуть неабияк зіпсувати нерви. Давайте їх теж "виключаємо". Почнемо з align:
Все було б добре, але IE6 не підтримує селектори атрибутів. Тому нам треба модифікувати expression, щоб він перевіряв наявність атрибуту align у тега. Ось що вийшло:
Далі на черзі атрибути тэга img. Крім атрибуту align, ми хочемо відключити атрибути border, vspace та hspace. Так як значення margin і border не успадковуються, то тут можна застосувати просте правило:
Ось тут ми стикаємося з нерозв'язною проблемою для IE6. vspace і hspace не рівнозначні властивості margin у ньому, тому IE6 продовжуватиме відображати їх. Єдине рішення, яке спало мені на думку це написати маленький скриптик, який буде просто видаляти ці атрибути при завантаженні документа:
Я б вважав за краще не використовуватиjavascript, але в цьому випадку я просто не бачу іншої альтернативи. Тож нехай буде. Тепер доб'ємо атрибут type у тэзі ol:
А тепер атрибут bgcolor для body:
Таблиці. Фінальний крок. У таблицях HTML4/4.01 є ряд небажаних атрибутів, які активно використовувалися для верстки сторінок. Але ж ми не хочемо, щоб клієнт використовував таблиці для верстки? Тому давайте відключимо атрибути width, height, bgcolor, valign та border:
Використовуючи CSS-правила та мінімальний JavaScript, нам вдалося "відключити" більшість небажаних тегів і атрибутів, елегантно зберігаючи природне успадкування. Нам не потрібно "вивчати" клієнта, він у будь-якому випадку повинен буде використовувати правильну розмітку. З урахуванням однієї дуже важливої ремарки - дуже важливо надати клієнту достатню кількість описаних CSS-класів, щоб він не був обмежений у роботі з розміткою.