Элементов или inherit повторяет значение. Отключаем нежелательные HTML-элементы с помощью CSS
Часто, когда мы сдаем проект клиенту, мы теряем контроль над HTML-кодом. Иногда клиент использует CMS (Системы Управления Контентом), которые дают ему полный контроль над теми или иными частями HTML-кода. Иногда клиент просто использует наши темплейты для вывода своего кода в документ.
В большинстве случаев довольно тяжело проинформировать клиента о том, как использовать темплейты или CMS, которые вы ему предоставляете, а иногда просто неприемлемо толкать пламенные речи о семантической верстке и веб-стандартах. Клиент может/будет использовать «старую, добрую разметку», ту, которую он знает, просто потому что она работает и выглядит так как он привык. Скорее всего в ней будут присутствовать нежелательные (deprecated) тэги и атрибуты, такие как bgcolor, align
и «вечный» font
. Эта статья о том, как блокировать нежелательные HTML-тэги с помощью CSS, тем самым аккуратно направляя клиента в правильном направлении.
Есть несколько решений проблемы. Одно из них - вывод предупреждающего изображения с помощью CSS, когда изпользуются нежелательные тэги. Подробные обьяснения этого способа есть и . Второе решение - «вырезание» нежелательных тегов и атрибутов на стороне сервера. Этот способ является наиболее эффективным, другое дело что не всегда есть контроль за сервером где расположен сайт.
Идея состоит в том, чтобы сохранить естественный каскад и наследие стилей во всех браузерах, элегантно «отключая» HTML, нежелательный к использованию клиентом.
И тогда клиент перестанет использовать его, потому что нежелательные тэги просто перестанут «работать». Элегантный и ненапрягающий клиента способ, который направит его по верному пути.
Нежелательные HTML-тэги и атрибуты:
Решение
В идеале мы могли бы просто откорректировать некоторые HTML-тэги, вставив значение inherit для эквивалентного CSS-свойства. Браузеры, работающие по стандартам, просто проигнорируют заданные в коде нежелательные атрибуты и будут использовать вместо них наследуемые значения в каскаде.
На пример этот CSS:
font { color:inherit; }
будет превалировать над этим кодом:
Синий
Соответственно цвет текста внутри тэга font будет цветом, наследуемым по каскаду, а не синим, как задано в коде. То что надо. Но как вы наверняка знаете - у Internet Explorer есть проблемы с наследуемыми значениями. И в седьмой версии тоже. Так что за работу:
Expressions и currentStyle в помощь:
font { color:inherit; /* Нормальные браузеры */ color:expression(this.parentNode.currentStyle["color"]); /* IE */ }
Работает? Отлично, поехали дальше:
font { font-family:inherit; /* Нормальные браузеры */ font-family:expression(this.parentNode.currentStyle["fontFamily"]); /* IE */ }
Все чудесно, кроме того что Opera 9 не наследует значение для font-family . К счастью font нас тоже устроит:
font { font:inherit; /* Нормальные браузеры */ font-family:expression(this.parentNode.currentStyle["fontFamily"]); /* IE */ }
С этим разобрались. Перейдем к свойству font-size . Здесь нужна деликатность, так как значение размера шрифта наследуется по отношению к вычисляемому (computed) значению. Предыдушие expression "ы здесь не сработают, так как если для body выставлено значение свойства font-size , равное 2em, то вычисление значения размера шрифта начнется от этой точки. Браузер проверит значение font-size для родительского элемента тэга font , которое равняется 2em и представит вычисляемое значение, равное 4em (2em от 2em). А это не то что нам нужно. Решение простое. Нужно использовать начальное значение font-size , равное 100% для всех браузеров. Давайте добавим несколько свойств нежелательному тэгу basefont , чтобы и его утихомирить. Вот полный список правил для «укрощения» тэгов font и basefont :
font,basefont { color:inherit; /* Нормальные браузеры */ color:expression(this.parentNode.currentStyle["color"]); /* IE */ font:inherit; /* Нормальные браузеры. Font вместо font-size для Оперы */ font-family:expression(this.parentNode.currentStyle["fontFamily"]); /* IE */ font-size:100%; /* Все браузеры. Размеры наследуются */ }
Двигаемся дальше. Давайте воспользуемся базовой техникой, чтобы отменить тэги center, s, strike и u :
center { text-align:inherit; /* Нормальные браузеры */ text-align:expression(this.parentNode.currentStyle["textAlign"]); /* IE */ } s,strike,u { text-decoration:inherit; /* Нормальные браузеры */ text-decoration:expression(this.parentNode.currentStyle["textDecoration"]); /* IE */ }
Свершилось! Мы «отключили» большинство нежелательных тэгов, используя только CSS и expression"ы.
А как же атрибуты? HTML4 включает в себя некоторое количество нежелательных атрибутов, которые могут изрядно попортить нервы. Давайте их тоже «повыключаем». Начнем с align :
* { text-align:inherit; } /* Нормальные браузеры */
Все бы хорошо, но IE6 не поддерживает селекторы атрибутов. Посему, нам надо модифицировать expression , для того чтобы он проверял наличие атрибута align у тэга. Вот что получилось:
* { text-align:inherit; } /* Нормальные браузеры */ * { text-align:expression(this.align ? this.parentNode.currentStyle["textAlign"] : ""); } /* IE */
Далее на очереди атрибуты тэга img . Помимо атрибута align , мы хотим отключить атрибуты border, vspace и hspace . Так как значения margin и border не наследуются, то здесь применимо простое правило:
img { margin:0; border:none; } /* Все браузеры */
Вот здесь мы как раз сталкиваемся с неразрешимой проблемой для IE6. vspace и hspace не равнозначны свойству margin в нем, поэтому IE6 будет продолжать отображать их. Единственное решение, которое пришло мне в голову это написать маленький скриптик, который будет просто удалять эти атрибуты при загрузке документа:
window.onload = function() { for (i=0;i document.getElementsByTagName("img")[i].removeAttribute("vspace"); document.getElementsByTagName("img")[i].removeAttribute("hspace"); } }
Я бы предпочел не использовать javascript , но в данном случае я просто не вижу другой альтернативы. Так что пусть будет. Теперь добьем атрибут type в тэге ol :
ol { list-style-type:decimal; } /* Все браузеры */
А теперь атрибут bgcolor для body :
body { background-color:transparent; } /* Все браузеры */
Таблицы. Финальный шаг. В таблицах, в HTML4/4.01, есть ряд нежелательных атрибутов, которые активно использовались для верстки страниц. Но мы же не хотим, чтобы клиент использовал таблицы для верстки? Поэтому давайте отключим атрибуты width, height, bgcolor, valign и border :
table,tr,th,td { width:auto; /* Все браузеры */ height:auto; /* Все браузеры */ background-color:transparent; /* Все браузеры */ vertical-align:inherit; /* Все браузеры (включая IE) */ border:none; /* Все браузеры */ }
Подведем итоги:
Используя CSS-правила и минимальный javascript, нам удалось «отключить» большинство нежелательных тэгов и атрибутов, элегантно сохраняя естественное наследование. Нам не нужно «учить» клиента, он в любом случае должен будет использовать правильную разметку. С учетом одной, очень важной ремарки - очень важно предоставить клиенту достаточное количество описаных CSS-классов, чтобы он не был ограничен в работе с разметкой.
Все стили вместе:
font,basefont { color:inherit; /* Нормальные браузеры */ color:expression(this.parentNode.currentStyle["color"]); /* IE */ font:inherit; /* Нормальные браузеры. Font вместо font-size для Оперы */ font-family:expression(this.parentNode.currentStyle["fontFamily"]); /* IE */ font-size:100%; /* Все браузеры */ } center { text-align:inherit; /* Нормальные браузеры */ text-align:expression(this.parentNode.currentStyle["textAlign"]); /* IE */ } s,strike,u { text-decoration:inherit; /* Нормальные браузеры */ text-decoration:expression(this.parentNode.currentStyle["textDecoration"]); /* IE */ } * { text-align:inherit; } /* Нормальные браузеры */ * { text-align:expression(this.align ? this.parentNode.currentStyle["textAlign"] : ""); } /* IE */ img { margin:0; border:none; } /* Все браузеры */ ol { list-style-type:decimal; } /* Все браузеры */ body { background-color:transparent; /* Все браузеры */ } table,tr,th,td { width:auto; /* Все браузеры */ height:auto; /* Все браузеры */ background-color:transparent; /* Все браузеры */ vertical-align:inherit; /* Все браузеры (включая IE) */ border:none; /* Все браузеры */ }
Вольный перевод и подготовка статьи по материалам
6 ответов
Как и другие ответы, он наследует свойство CSS от родительского элемента.
То, что другие ответы не смогли сказать, - это то, зачем вам это нужно. Потому что, в конце концов, свойства CSS наследуются в любом случае, верно?
Ну, нет. Большинство из них по умолчанию (но цвет ссылки не наследуется от родительского элемента, например). Но рассмотрим этот случай:
P { color: blue; } div.important { color: red; }
This is a text
Теперь текст будет синим, а не красным. Если мы хотим, чтобы
Обладал стилем своих родителей, а не стилем по умолчанию, мы должны переопределить его CSS. Конечно, мы могли бы повторить значение свойства (red), но это нарушает DRY (не повторяйте себя). Вместо этого мы наследуем его:
Div.important p { color: inherit; }
Объявление font:inherit используется во многих стилях стилей CSS Reset, которые часто копируются в различные библиотеки и фреймворки. Оригинальный Reset CSS Эрик Мейер имеет font:inherit . Никакой конкретной мотивации не дается. Говорят, что общее обоснование заключается в "уменьшении несогласованности браузера в таких вещах, как высоты строк по умолчанию, поля и размеры шрифтов заголовков и т.д.". Но Мейер ссылается на предыдущий пост , где он объясняет эту идею, говоря, между прочим: "Я хочу все это, потому что я не хочу Возьмем стильные эффекты как должное. Это служит двум целям: во-первых, это заставляет меня думать о том, что немного сложнее в семантике моего документа. При использовании reset я не выбираю strong , потому что дизайн требует смелости. Вместо этого я выбираю правильный элемент - будь то его strong или em или b или h3 или что-то еще, - а затем стирайте его по мере необходимости."
Несколько HTML-элементов имеют рендеринг по умолчанию в браузерах в отношении свойств шрифта: заголовки, поля формы, ячейки заголовков таблицы, некоторые элементы фраз и т.д. Использование CSS Reset или, в частности, font: inherit означает, что в браузерах, поддерживающих inherit , все такие элементы отображаются в текстовом шрифте копирования, если в таблице стилей не указано иначе.
Итак, речь идет о конкретной методологии (или, как говорят некоторые люди, идеологии или религии) авторства и дизайна. Он приобрел популярность и часто применяется регулярно.
Не все браузеры наследуют свойства шрифта для всех элементов. Netscape 4.x, как известно, плохо о наследовании. Рассмотрим следующий стиль:
Body { background: black; color: white }
В Netscape 4.x цвет не был применен к элементам таблицы, поэтому вы получите черный текст по умолчанию внутри таблицы на черном фоне.
Свойства шрифта имеют один и тот же вид сделки для некоторых элементов, особенно элементов формы (и элементов таблицы для старых браузеров). Нередко можно увидеть такое определение:
Table, form { font: inherit }
inherit используется для получения свойств из родительского элемента. Другими словами, наследуйте свойства родительского элемента.
По умолчанию свойство inherit , это означает, что у вас есть div и p .
Hello World!
Теперь вы даете стиль:
Div {font-famlily: Tahoma;} p {font-family: inherit;}
Этот font-family равен inherit ed для p из его родительского элемента div .
Использование {font:inherit;} в CSS имеет смысл, потому что различные пользовательские агенты (браузеры a.k.a.) имеют таблицу стилей пользовательского агента (read: default stylesheet) с чем-то вроде
Body { font: -magic-font-from-user-preferences; } textarea, input { font: monospace; }
{font:inherit;} используется для обхода специального случая, когда font или font-family по умолчанию не наследуется из-за таблицы стилей пользовательского агента, но автор содержимого желает, чтобы семейство шрифтов было унаследовано.
Фактическое поведение пользовательского агента со значением inherit отличается, к сожалению, от различных ошибок. Однако результат может быть ближе к намерению автора, чем значение по умолчанию.
Параметры шрифта
Начнем с атрибутов стиля, задающих параметры шрифта, которым набран текст. Ведь текст на Web-страницах - всему голова.
Атрибут стиля font-family задает имя шрифта, которым будет выведен текст:
font-family: <список имен шрифтов, разделенных запятыми> |inherit
Имена шрифтов задаются в виде их названий, например, Arial или Times New Roman. Если имя шрифта содержит пробелы, его нужно взять в кавычки:
P { font-family: Arial }
H1 (font-family: "Times New Roman" }
Если данный атрибут стиля присутствует во встроенном стиле, кавычки заменяют апострофами:
Если указанный нами шрифт присутствует на компьютере посетителя, Web- обозреватель его использует. Если же такого шрифта нет, то текст выводится шрифтом, заданным в настройках по умолчанию. И наша Web-страница, возможно, будет выглядеть не так, как мы задумывали. (Впрочем, шрифты Arial и Times New Roman присутствуют на любом компьютере, работающем под управлением Win- dows.) Можно указать несколько наименований шрифтов через запятую:
P { font-family: Verdana, Arial }
Тогда Web-обозреватель сначала будет искать первый из указанных шрифтов, в случае неудачного поиска - второй, потом третий и т. д. Вместо имени конкретного шрифта можно задать имя одного из семейств шрифтов , представляющих целые наборы аналогичных шрифтов. Таких семейств пять: serif (шрифты с засечками), sans-serif (шрифты без засечек), cursive (шрифты, имитирующие рукописный текст), fantasy (декоративные шрифты) и monospace (моноширинные шрифты):
H2 { font-family: Verdana, Arial, sans-serif }
Особое значение inherit указывает, что текст данного элемента Web-страницы должен быть набран тем же шрифтом, что и текст родительского элемента. Говорят, что в данном случае элемент Web-страницы "наследует" шрифт от родительского элемента. Это, кстати, значение атрибута стиля font-family по умолчанию. Атрибут стиля font-size определяет размер шрифта:
font-size: <размер >|xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|inherit
Размер шрифта можно задать в абсолютных и относительных величинах. Для этого используется одна из единиц измерения , поддерживаемая CSS (табл. 8.1).
Таблица 8.1. Единицы измерения размера, поддерживаемые стандартом CSS
Обозначение выбранной единицы измерения указывают после самого значения:
P { font-size: 10pt } STRONG { font-size: 1cm } EM { font-size: 150 % }
Отметим, что все приведенные в табл. 8.1 единицы измерения подходят для задания значений других атрибутов стилей CSS.
Кроме числовых, атрибут font-size может принимать и символьные значения. Так, значения от xx-small до xx-large задают семь предопределенных размеров шрифта, от самого маленького до самого большого. А значения larger и smaller представляют следующий размер шрифта, соответственно, по возрастанию и убыванию. Например, если для родительского элемента определен шрифт размера medium, то значение larger установит для текущего элемента размер шрифта large.
Значение inherit указывает, что данный элемент Web-страницы должен иметь тот же размер шрифта, что и родительский элемент. Это значение атрибута стиля font- size по умолчанию.
Атрибут стиля color задает цвет текста:
color: <цвет> |inherit
В главе 7 мы упоминали, что цвет можно задать так называемым RGB-кодом (Red, Green, Blue - красный, зеленый, синий). Он записывается в формате
#<доля красного цвета><доля зеленого цвета><доля синего цвета> ,
где доли всех цветов указаны в виде шестнадцатеричных чисел от 00 до FF. Зададим для текста красный цвет:
H1 { color: #FF0000 } А теперь серый цвет: ADDRESS { color: #CCCCCC }
Кроме того, CSS позволяет задавать цвета по именам. Так, значение black соответствует черному цвету, white - белому, red - красному, green - зеленому, а blue - синему.
H1 { color: red }
Полный список имен и соответствующих им цветов можно посмотреть на Web-странице http://msdn.microsoft.com/en-us/library/aa358802%28v=VS.85%29.aspx .
Значение inherit указывает, что данный элемент Web-страницы должен иметь тот же цвет шрифта, что и родительский элемент. Это значение атрибута стиля font- size по умолчанию.
ВНИМАНИЕ!
Значение inherit поддерживают практически все атрибуты стиля CSS. Оно говорит Web-обозревателю, что элемент Web-страницы, к которому привязан стиль, "наследует" значение соответствующего параметра у родительского элемента. У всех атрибутов это значение по умолчанию. В дальнейшем мы не будем описывать данное значение у каждого атрибута стиля; если же какой-то атрибут стиля не поддерживает его, мы специально об этом упомянем.
С помощью атрибута стиля color мы можем, например, задать цвет горизонтальной линии HTML.
Атрибут стиля opacity позволяет указать степень полупрозрачности элемента Web-страницы:
opacity: <числовое значение>|inherit
Значение полупрозрачности представляет собой число от 0 до 1. При этом 0 обозначает полную прозрачность элемента (т. е. элемент фактически не виден), а 1 - полную непрозрачность (это обычное поведение).
Вот пример задания половинной прозрачности (значение 0,5) для текста фиксированного форматирования:
PRE { opacity: 0.5 }
Отметим, как мы указали дробное число - вместо символа запятой здесь используется точка.
НА ЗАМЕТКУ
Полупрозрачность обычно целесообразна только для создания специальных эффектов. В обычном тексте применять ее не рекомендуется, т. к. это может обескуражить посетителя.
Атрибут стиля font-weight устанавливает "жирность" шрифта:
font-weight: normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900|inherit
Здесь доступны семь абсолютных значений от 100 до 900, представляющих различную "жирность" шрифта, от минимальной до максимальной; при этом обычный шрифт будет иметь "жирность" 400 (или normal), а полужирный - 700 (или bold). Значение по умолчанию - 400 (normal). Значения bolder и lighter являются относительными и представляют следующие степени "жирности" соответственно в бóльшую и меньшую сторону.
CODE { font-weight: bold }
Атрибут font-style задает начертание шрифта:
font-style: normal|italic|oblique|inherit
Доступны три значения, представляющие обычный шрифт (normal), курсив (italic) и особое декоративное начертание, похожее на курсив (oblique).
Атрибут стиля text-decoration задает "украшение" (подчеркивание или зачеркивание), которое будет применено к тексту:
text-decoration: none|underline|overline|line-through|blink|inherit
Здесь доступны пять значений (не считая inherit):
None убирает все "украшения", заданные для шрифта родительского элемента;
Underline подчеркивает текст;
Overline "надчеркивает" текст, т. е. проводит линию над строками;
Line-through зачеркивает текст;
Blink делает шрифт мерцающим (на данный момент не поддерживается Safari).
ВНИМАНИЕ!
Не следует без особой необходимости задавать для текста подчеркивание. Дело в том, что Web-обозреватели по умолчанию выводят гиперссылки подчеркнутыми, и подчеркнутый текст, не являющийся гиперссылкой, может обескуражить посетителя.
Атрибут стиля font-variant позволяет указать, как будут выглядеть строчные буквы шрифта:
font-variant: normal|small-caps|inherit
Значение small-caps задает такое поведение шрифта, когда его строчные буквы выглядят точно так же, как прописные, просто имеют меньший размер. Значение normal задает для шрифта обычные прописные буквы.
Атрибут стиля text-transform позволяет изменить регистр символов текста:
text-transform: capitalize|uppercase|lowercase|none|inherit
Мы можем преобразовать текст к верхнему (значение uppercase этого атрибута) или нижнему (lowercase) регистру, преобразовать к верхнему регистру первую букву каждого слова (capitalize) или оставить в изначальном виде (none).
Атрибут стиля line-height задает высоту строки текста:
line-height: normal|<расстояние> |inherit
Здесь можно задать абсолютную и относительную величину расстояния, указав соответствующую единицу измерения CSS (см. табл. 8.1). При ее отсутствии заданное нами значение сначала умножается на высоту текущего шрифта и затем используется. Таким образом, чтобы увеличить высоту строки вдвое по сравнению с обычной, мы можем написать:
P { line-height: 2 }
Значение normal этого атрибута возвращает управление высотой строки Web-обозревателю.
Атрибут стиля letter-spacing позволяет задать дополнительное расстояние между символами текста:
letter-spacing: normal|<расстояние>
Отметим, что это именно дополнительное расстояние; оно будет добавлено к изначальному, установленному самим Web-обозревателем.
Здесь также можно задать абсолютное и относительное расстояние, указав соответствующую единицу измерения CSS (см. табл. 8.1). Расстояние может быть положительным и отрицательным; в последнем случае символы шрифта будут располагаться друг к другу ближе обычного. Значение normal устанавливает дополнительное расстояние по умолчанию, равное нулю.
Атрибут стиля letter-spacing не поддерживает значение inherit.
Вот пример задания дополнительного расстояния между символами равного пяти пикселам:
H1 { letter-spacing: 5px }
Текст, набранный такими символами, будет выглядеть разреженным.
А здесь мы задали отрицательное дополнительное расстояние между символами равным двум пикселам:
H6 { letter-spacing: -2px }
Эти два пиксела будут вычтены из изначального расстояния, в результате символы сблизятся, а текст станет выглядеть сжатым. Возможно, символы даже налезут друг на друга.
Аналогичный атрибут стиля word-spacing задает дополнительное расстояние между отдельными словами текста:
word-spacing: normal|<расстояние>
H1 { word-spacing: 5mm }
Ну, 5 мм, пожалуй, многовато… Хотя это всего лишь пример.
И напоследок рассмотрим атрибут стиля font, позволяющий задать одновременно сразу несколько параметров шрифта:
font: [<начертание> ] [<вид строчных букв> ] [<"жирность"> ] [<размер> ] <имя шрифта>
Как видим, обязательным является только имя шрифта - остальные параметры могут отсутствовать.
Задаем для текста абзацев шрифт Times New Roman размером 10 пунктов:
P { font: 10pt "Times New Roman" }
А для заголовков шестого уровня - шрифт Arial размером 12 пунктов и курсивного начертания:
H6 { font: italic 12pt Verdana }
Хотя некоторые характеристики в CSS наследуются автоматически, могут быть ситуации когда необходимо увеличить вес наследуемого свойства. Указание значения inherit для любого свойства CSS , применённого к элементу передаст вычисленное значение свойства элемента-родителя данному элементу. Указав в авторском стиле, что свойство наследует своё значение от предка, вы можете увеличить его вес.
Поддержка inherit в Internet Explorer
Internet Explorer 7 и более ранние версии не поддерживают значение inherit для всех свойств кроме direction и visibility .
Как правило, в отсутствии каких-либо применимых определений, color - свойство передаваемое по наследству. Однако, в случае, если элемент указатель, то свойство color обычно установлено в синий, в стиле браузера пользователя. Если вы хотите подчеркнуть важность наследования значения, вы можете использовать значение inherit в авторской или пользовательской таблице стилей, переписывающей определения стиля браузера. В ниже следующем примере, мы устанавливаем свойство color элемента p #000 или black и укажем что любой потомок указатель должен наследовать значение color родительского элемента:
P { color: #000; } p a:link { color: inherit; }
Когда мы используем сокращённую запись, как background , мы не можем смешивать inherit с другими значениями. Например, нижеследующие объявления background не правильное:
P { background: #fff inherit left top; }
В этом случае мы могли надеяться, что этот элемент наследует родительское свойства background-image . К сожалению, нам бы не повезло, т.к. inherit должно быть конкретное значение в определении. В указанном выше примере наследование трактуется не однозначно, оно может быть свойством background-image или background-attachment и браузер пользователя не может определить к какому именно свойству его привязать. Что бы использовать inherit нам необходимо использовать полное написание вместо сокращённого. В этом случае мы должны указать свойство background-image .
