This Might Be Useful
« Firefox GUI - Add Bookmark Dialog Tweak
Избавляемся от самопроизвольно появляющейся Error Console в Firefox »

Отключаем нежелательные HTML-элементы с помощью CSS

Часто, когда мы сдаем проект клиенту, мы теряем контроль над HTML-кодом. Иногда клиент использует CMS (Системы Управления Контентом), которые дают ему полный контроль над теми или иными частями HTML-кода. Иногда клиент просто использует наши темплейты для вывода своего кода в документ.

В большинстве случаев довольно тяжело проинформировать клиента о том, как использовать темплейты или CMS, которые вы ему предоставляете, а иногда просто неприемлемо толкать пламенные речи о семантической верстке и веб-стандартах. Клиент может/будет использовать "старую, добрую разметку", ту, которую он знает, просто потому что она работает и выглядит так как он привык. Скорее всего в ней будут присутствовать нежелательные (deprecated) тэги и атрибуты, такие как bgcolor, align и "вечный" font. Эта статья о том, как блокировать нежелательные HTML-тэги с помощью CSS, тем самым аккуратно направляя клиента в правильном направлении.

Есть несколько решений проблемы. Одно из них - вывод предупреждающего изображения с помощью CSS, когда изпользуются нежелательные тэги. Подробные обьяснения этого способа есть здесь и здесь. Второе решение - "вырезание" нежелательных тегов и атрибутов на стороне сервера. Этот способ является наиболее эффективным, другое дело что не всегда есть контроль за сервером где расположен сайт.

Идея состоит в том, чтобы сохранить естественный каскад и наследие стилей во всех браузерах, элегантно "отключая" HTML, нежелательный к использованию клиентом. И тогда клиент перестанет использовать его, потому что нежелательные тэги просто перестанут "работать". Элегантный и ненапрягающий клиента способ, который направит его по верному пути.

Нежелательные HTML-тэги и атрибуты:

<font>
<basefont>
<center>
<strike>
<s>
<u>
bgcolor
border
align
vspace
hspace
valign
width
height

Решение

В идеале мы могли бы просто откорректировать некоторые HTML-тэги, вставив значение inherit для эквивалентного CSS-свойства. Браузеры, работающие по стандартам, просто проигнорируют заданные в коде нежелательные атрибуты и будут использовать вместо них наследуемые значения в каскаде.

На пример этот CSS:

PLAIN TEXT
CSS:
  1. font { color:inherit; }

будет превалировать над этим кодом:

PLAIN TEXT
HTML:
  1. <font color="blue">Синий</font>

Соответственно цвет текста внутри тэга font будет цветом, наследуемым по каскаду, а не синим, как задано в коде. То что надо. Но как вы наверняка знаете - у Internet Explorer есть проблемы с наследуемыми значениями. И в седьмой версии тоже. Так что за работу.

Expressions и currentStyle в помощь.

PLAIN TEXT
CSS:
  1. font {
  2.   color:inherit; /* Нормальные браузеры */
  3.   color:expression(this.parentNode.currentStyle['color']); /* IE */
  4. }

Работает? Отлично, поехали дальше:

PLAIN TEXT
CSS:
  1. font {
  2.   font-family:inherit; /* Нормальные браузеры */
  3.   font-family:expression(this.parentNode.currentStyle['fontFamily']); /* IE */
  4. }

Все чудесно, кроме того что Opera 9 не наследует значение для font-family. К счастью font нас тоже устроит:

PLAIN TEXT
CSS:
  1. font {
  2.   font:inherit; /* Нормальные браузеры */
  3.   font-family:expression(this.parentNode.currentStyle['fontFamily']); /* IE */
  4. }

С этим разобрались. Перейдем к свойству font-size. Здесь нужна деликатность, так как значение размера шрифта наследуется по отношению к вычисляемому (computed) значению. Предыдушие expression'ы здесь не сработают, так как если для body выставлено значение свойства font-size, равное 2em, то вычисление значения размера шрифта начнется от этой точки. Браузер проверит значение font-size для родительского элемента тэга font, которое равняется 2em и представит вычисляемое значение, равное 4em (2em от 2em). А это не то что нам нужно. Решение простое. Нужно использовать начальное значение font-size, равное 100% для всех браузеров. Давайте добавим несколько свойств нежелательному тэгу basefont, чтобы и его утихомирить. Вот полный список правил для "укрощения" тэгов font и basefont:

PLAIN TEXT
CSS:
  1. font,basefont {
  2.   color:inherit; /* Нормальные браузеры */
  3.   color:expression(this.parentNode.currentStyle['color']); /* IE */
  4.   font:inherit; /* Нормальные браузеры. Font вместо font-size для Оперы */
  5.   font-family:expression(this.parentNode.currentStyle['fontFamily']); /* IE */
  6.   font-size:100%; /* Все браузеры. Размеры наследуются */
  7. }

Двигаемся дальше. Давайте воспользуемся базовой техникой, чтобы отменить тэги center, s, strike и u:

PLAIN TEXT
CSS:
  1. center {
  2.   text-align:inherit; /* Нормальные браузеры */
  3.   text-align:expression(this.parentNode.currentStyle['textAlign']); /* IE */
  4. }
  5.  
  6. s,strike,u {
  7.   text-decoration:inherit; /* Нормальные браузеры */
  8.   text-decoration:expression(this.parentNode.currentStyle['textDecoration']); /* IE */
  9. }

Свершилось! Мы "отключили" большинство нежелательных тэгов, используя только CSS и expression'ы.

А как же атрибуты? HTML4 включает в себя некоторое количество нежелательных атрибутов, которые могут изрядно попортить нервы. Давайте их тоже "повыключаем". Начнем с align:

PLAIN TEXT
CSS:
  1. *[align] { text-align:inherit; } /* Нормальные браузеры */

Все бы хорошо, но IE6 не поддерживает селекторы атрибутов. Посему, нам надо модифицировать expression, для того чтобы он проверял наличие атрибута align у тэга. Вот что получилось:

PLAIN TEXT
CSS:
  1. *[align] { text-align:inherit; } /* Нормальные браузеры */
  2. * { text-align:expression(this.align ? this.parentNode.currentStyle['textAlign'] : ''); } /* IE */

Далее на очереди атрибуты тэга img. Помимо атрибута align, мы хотим отключить атрибуты border, vspace и hspace. Так как значения margin и border не наследуются, то здесь применимо простое правило:

PLAIN TEXT
CSS:
  1. img { margin:0; border:none; } /* Все браузеры */

Вот здесь мы как раз сталкиваемся с неразрешимой проблемой для IE6. vspace и hspace не равнозначны свойству margin в нем, поэтому IE6 будет продолжать отображать их. Единственное решение, которое пришло мне в голову это написать маленький скриптик, который будет просто удалять эти атрибуты при загрузке документа:

PLAIN TEXT
JAVASCRIPT:
  1. window.onload = function() {
  2.   for (i=0; i < document.getElementsByTagName('img').length; i++) {
  3.     document.getElementsByTagName('img')[i].removeAttribute('vspace');
  4.     document.getElementsByTagName('img')[i].removeAttribute('hspace');
  5.   }
  6. }

Я бы предпочел не использовать JavaScript, но в данном случае я просто не вижу другой альтернативы. Так что пусть будет. Теперь добьем атрибут type в тэге ol:

PLAIN TEXT
CSS:
  1. ol { list-style-type:decimal; } /* Все браузеры */

А теперь атрибут bgcolor для body:

PLAIN TEXT
CSS:
  1. body { background-color:transparent; } /* Все браузеры */

Таблицы. Финальный шаг. В таблицах, в HTML4/4.01, есть ряд нежелательных атрибутов, которые активно использовались для верстки страниц. Но мы же не хотим, чтобы клиент использовал таблицы для верстки? Поэтому давайте отключим атрибуты width, height, bgcolor, valign и border:

PLAIN TEXT
CSS:
  1. table, tr, th, td {
  2.   width:auto; /* Все браузеры */
  3.   height:auto; /* Все браузеры */
  4.   background-color:transparent; /* Все браузеры */
  5.   vertical-align:inherit; /* Все браузеры (включая IE) */
  6.   border:none; /* Все браузеры */
  7. }

Подведем итоги.

Используя CSS-правила и минимальный JavaScript, нам удалось "отключить" большинство нежелательных тэгов и атрибутов, элегантно сохраняя естественное наследование. Нам не нужно "учить" клиента, он в любом случае должен будет использовать правильную разметку. С учетом одной, очень важной ремарки - очень важно предоставить клиенту достаточное количество описаных CSS-классов, чтобы он не был ограничен в работе с разметкой.

Все стили вместе:

PLAIN TEXT
CSS:
  1. font, basefont {
  2.   color:inherit; /* Нормальные браузеры */
  3.   color:expression(this.parentNode.currentStyle['color']); /* IE */
  4.   font:inherit; /* Нормальные браузеры. Font вместо font-size для Оперы */
  5.   font-family:expression(this.parentNode.currentStyle['fontFamily']); /* IE */
  6.   font-size:100%; /* Все браузеры */
  7. }
  8.  
  9. center {
  10.   text-align:inherit; /* Нормальные браузеры */
  11.   text-align:expression(this.parentNode.currentStyle['textAlign']); /* IE */
  12. }
  13.  
  14. s,strike,u {
  15.   text-decoration:inherit; /* Нормальные браузеры */
  16.   text-decoration:expression(this.parentNode.currentStyle['textDecoration']); /* IE */
  17. }
  18.  
  19. *[align] { text-align:inherit; }  /* Нормальные браузеры */
  20. * { text-align:expression(this.align ? this.parentNode.currentStyle['textAlign'] : ''); }  /* IE */
  21.  
  22. img { margin:0; border:none; }  /* Все браузеры */
  23.  
  24. ol { list-style-type:decimal; }  /* Все браузеры */
  25.  
  26. body { background-color:transparent; /* Все браузеры */ }
  27.  
  28. table, tr, th, td {
  29.   width:auto; /* Все браузеры */
  30.   height:auto; /* Все браузеры */
  31.   background-color:transparent; /* Все браузеры */
  32.   vertical-align:inherit; /* Все браузеры (включая IE) */
  33.   border:none; /* Все браузеры */
  34. }

Автор перевода: CurlyBrace
Основной источник: monc.se

- Дата публикации: Monday, November 12th, 2007, 08:23
- Автор: Filosoff
- Разделы: CSS, HTML, JavaScript
- Лента коментариев: RSS 2.0

- Схожие по тематике заметки:

· Улучшаем семантику ссылок
· Работа со ссылками (references) в PHP
· Skype. Отключаем режим Supernode.
· Специфический CSS для разных браузеров
· Как качать с Rutube

- Коментировать
- Trackback

Leave a Reply

code