CSS альтернатива HTML элементам и атрибутам

Заменяем устаревшие и не только HTML элементы, а также устаревшие атрибуты свойствами CSS. Сводная таблица и примеры использования.

HTML атрибуты заменяем стилями CSS
HTML атрибутCSSустарел
alignfloat, text-alignда
alinka:activeда
backgroundbackgroundда
bgcolorbackground-colorда
clearclearда
compactdisplay: compactда
face, sizefont-family: Arial;да
linka:linkда
noshadeCSS: по умолчанию без тенида
startcontent: counterда
textcolorда
typelist-style-typeда
valueli:beforeда
vlinka:visitedда
widthwidthда


В нижеприведенных примерах в целях соблюдения рекомендаций Консорциума W3C устаревшие и неиспользуемые в XHTML элементы и атрибуты заменены соответствующими свойствами CSS2. Для наглядности в большинстве примеров представлены inline-стили с помощью атрибута style="". Если Вы видите неправильное воспроизведение примеров, скорее всего Ваш браузер не поддерживает эти свойства.

align="left | center | right"

CSS свойство float: left | right | none | inherit

Применяется ко всем элементам, и наследуется. Например элемент <img />, становится блочным (block) элементом, когда ему установлено свойство style="float: left | right" и остается inline, когда style="float: none".

CSS свойство text-align: left | center | right | justify

Применяется к блочным элементам и наследуется.

Элементы, к которым применяется свойство text-align: <caption>, <iframe>, <img />, <input />, <object>, <table>, <hr />, <legend>, <div>, <h1>...<h6>, <p>, <col />, <colgroup>, <tbody>, <td>, <th>, <tfoot>, <thead>, <tr>.

alink="#FF0000"

Устаревшее использование атрибута: <body alink="#FF0000"></body>.

Заменяется на: a:active {color:#F00;}.

<b></b>

Традиционное использование элемента: <b>полужирный шрифт</b>.

Заменяется на: font-weight: bold;.

Например:
<span style="font-weight: bold;">полужирный шрифт</span>.

background="img.gif"

Устаревшее использование атрибута: <body background="img.gif"></body>.

Заменяется на: background: url(img.gif);.

Например:
<body style="background: url(img.gif);"></body>.

bgcolor="#FFFFFF"

Устаревшее использование атрибута: <body bgcolor="#FFFFFF"></body>.

Заменяется на: background: #FFF;.

Например:
<body style="background: #FFF;"></body>.

<big></big>

Традиционное использование элемента: <big>увеличенный шрифт</big>.

Заменяется на: font-size: larger;.

Например:
<span style="font-size: larger;">увеличенный шрифт</span>.

<blink></blink>

Элемент никогда не входил в Рекомендации W3C, но тем не менее вариант его использования: <blink>мигающий текст</blink>. Браузер IE не знаком с этим элементом.

Заменяется на: text-decoration: blink;.

Например:
<span style="text-decoration: blink;">мигающий текст</span>.

<center></center>

Устаревшее использование элемента:
<center>

текст выравнивается по центру

</center>.

Заменяется на: text-align: center;.

Например:
<p style="text-align: center;">

текст выравнивается по центру

</p>.

clear="left | right | all | none"

Устаревшее использование атрибута: <br clear="right">.

Заменяется на: clear: left | right | both | none;.

Например:
<br style="clear: right;" />.

type="compact"

Устаревшее использование атрибута: <ul type="compact"></ul>.

Заменяется на: display: compact;.

Например:
<ul style="display: compact;"></ul>.

<dir></dir>

Элемент <dir> был создан для отображения списка состоящего из нескольких колонок. Браузеры отображали его аналогично <ul>

<em></em>

Традиционное использование элемента: <em>наклонный шрифт</em>.

Заменяется на: font-style: italic;.

Например:
<span style="font-style: italic;">наклонный шрифт</span>.

<font size="n"></font>

Устаревшее использование атрибута: <font size="1">размер шрифта 1</font>.

Заменяется на: font-size: xx-small;.

Например:
<span style="font-size: xx-small;">размер шрифта xx-small</font>.

Устаревшее использование атрибута: <font size="2">размер шрифта 2</font>.

Заменяется на: font-size: x-small;.

Например:
<span style="font-size: x-small;">размер шрифта x-small</font>.

Устаревшее использование атрибута: <font size="3">размер шрифта 3</font>.

Заменяется на: font-size: small;.

Например:
<span style="font-size: small;">размер шрифта small</font>.

Устаревшее использование атрибута: <font size="4">размер шрифта 4</font>.

Заменяется на: font-size: medium;.

Например:
<span style="font-size: medium;">размер шрифта medium</font>.

Устаревшее использование атрибута: <font size="5">размер шрифта 5</font>.

Заменяется на: font-size: large;.

Например:
<span style="font-size: large;">размер шрифта large</font>.

Устаревшее использование атрибута: <font size="6">размер шрифта 6</font>.

Заменяется на: font-size: x-large;.

Например:
<span style="font-size: x-large;">размер шрифта x-large</font>.

Устаревшее использование атрибута: <font size="7">размер шрифта 7</font>.

Заменяется на: font-size: xx-large;.

Например:
<span style="font-size: xx-large;">размер шрифта xx-large</font>.

<hr>


Традиционное использование элемента: <hr />.

Заменяется на: border-top: solid;.

Например:

<p style="border-top: solid 2px #808080;">линия-разделитель</span>.

<i></i>

Традиционное использование элемента: <i>наклонный шрифт</i>.

Заменяется на: font-style: italic;.

Например:
<span style="font-style: italic;">наклонный шрифт</span>.

link="#0000FF"

Устаревшее использование атрибута: <body link="#0000FF"></body>.

Заменяется на: a:link {color:#00F;}.

<ul></ul><ol></ol>

Упорядоченные списки, маркер снаружи

<ol style="list-style: decimal outside;"></ol>

  1. первый элемент списка
  2. второй элемент списка
  3. третий элемент списка

<ol style="list-style: lower-alpha outside;"></ol>

  1. первый элемент списка
  2. второй элемент списка
  3. третий элемент списка

<ol style="list-style: lower-roman outside;"></ol>

  1. первый элемент списка
  2. второй элемент списка
  3. третий элемент списка

<ol style="list-style: upper-alpha outside;"></ol>

  1. первый элемент списка
  2. второй элемент списка
  3. третий элемент списка

<ol style="list-style: upper-roman outside;"></ol>

  1. первый элемент списка
  2. второй элемент списка
  3. третий элемент списка

Неупорядоченные списки, маркер снаружи

<ul style="list-style: disc outside;"></ul>

  • первый элемент списка
  • второй элемент списка
  • третий элемент списка

<ul style="list-style: circle outside;"></ul>

  • первый элемент списка
  • второй элемент списка
  • третий элемент списка

<ul style="list-style: square outside;"></ul>

  • первый элемент списка
  • второй элемент списка
  • третий элемент списка

<ul style="list-style: none outside;"></ul>

  • первый элемент списка
  • второй элемент списка
  • третий элемент списка

Упорядоченные списки, маркер внутри

<ol style="list-style: decimal inside;"></ol>

  1. первый элемент списка
  2. второй элемент списка
  3. третий элемент списка

<ol style="list-style: lower-alpha inside;"></ol>

  1. первый элемент списка
  2. второй элемент списка
  3. третий элемент списка

<ol style="list-style: lower-roman inside;"></ol>

  1. первый элемент списка
  2. второй элемент списка
  3. третий элемент списка

<ol style="list-style: upper-alpha inside;"></ol>

  1. первый элемент списка
  2. второй элемент списка
  3. третий элемент списка

<ol style="list-style: upper-roman inside;"></ol>

  1. первый элемент списка
  2. второй элемент списка
  3. третий элемент списка

Неупорядоченные списки, маркер внутри

<ul style="list-style: disc inside;"></ul>

  • первый элемент списка
  • второй элемент списка
  • третий элемент списка

<ul style="list-style: circle inside;"></ul>

  • первый элемент списка
  • второй элемент списка
  • третий элемент списка

<ul style="list-style: square inside;"></ul>

  • первый элемент списка
  • второй элемент списка
  • третий элемент списка

<ul style="list-style: none inside;"></ul>

  • первый элемент списка
  • второй элемент списка
  • третий элемент списка

<menu></menu>

Элемент <menu> был создан для отображения списка состоящего из одной колонки. Браузеры отображали его аналогично <ul>

<s></s>

Устаревшее использование элемента: <s>перечеркнутый текст</s>.

Заменяется на: text-decoration: line-through;.

Например:
<span style="text-decoration: line-through;">перечеркнутый текст</span>.

<small></small>

Традиционное использование элемента: <small>уменьшенный шрифт</small>.

Заменяется на: font-size: smaller;.

Например:
<span style="font-size: smaller;">уменьшенный шрифт</span>.

<strike></strike>

Устаревшее использование элемента: <strike>перечеркнутый текст</strike>.

Заменяется на: text-decoration: line-through;.

Например:
<span style="text-decoration: line-through;">перечеркнутый текст</span>.

<strong></strong>

Традиционное использование элемента: <strong>выделенный текст</strong>.

Заменяется на: font-weight: bold;.

Например:
<span style="font-weight: bold;">выделенный текст</span>.

<sub></sub>

Традиционное использование элемента:
В этой строке <sub>подстрочный текст</sub>.

Заменяется на: vertical-align: sub;font-size: smaller;.

Например:
В этой строке <span style="vertical-align: sub;font-size: smaller;">подстрочный текст</span>.

<sup></sup>

Традиционное использование элемента:
В этой строке <sup>надстрочный текст</sup>.

Заменяется на: vertical-align: super;font-size: smaller;.

Например:
В этой строке <span style="vertical-align: super;font-size: smaller;">надстрочный текст</span>.

text="#000000"

Устаревшее использование атрибута: <body text="#000000"></body>.

Заменяется на: color: #000;.

Например:
<body style="color: #000;"></body>.

<tt></tt>

Традиционное использование элемента: <tt>моноширинный шрифт</tt>.

Заменяется на: font-family: monospace;.

Например:
<span style="font-family: monospace;">моноширинный шрифт</span>.

<u></u>

Устаревшее использование элемента: <u>подчеркнутый текст</u>.

Заменяется на: text-decoration: underline;.

Например:
<span style="text-decoration: underline;">подчеркнутый текст</span>.

vlink="#0000FF"

Устаревшее использование атрибута: <body vlink="#0000FF"></body>.

Заменяется на: a:visited {color:#00F;}.

width="75%"

Устаревшее использование атрибута: <table width="75%"></table>.

Заменяется на: width: 75%;.

Например:
<table style="width: 75%;"></table>.



Много комментариев (13) к “CSS альтернатива HTML элементам и атрибутам”

  1. Eugene Efremov :

    1. Аттрибуты упомянуты два раза, а элементы не упомянуты вообще (ошибка в php?)

    2. По существу.
    Все-таки может не стоит теги логической разметки, такие как em и strong, на css-то заменять? Кстати, предложенная замена отражает только их вид по умолчанию, он, строго говоря, может быть каким угодно (как раз это через css и определяется)…


  2. nopox :

    В секции, описывающей тег , опечатка: при указании верного способа открывающий тег <span>, а закрывающий – </font>

    Далее, хочу поддержать предыдущего оратора ;-)
    Отображение блоков типа strong, em, small, big, sub, sup и пр. полностью настраивается через CSS… Да и вообще они служат для логического выделения конектста. Опять же, зачем использовать устрашающие конструкции типа <p style=”border-top: solid 2px #808080;”>линия-разделитель</span>. (вот, кстати, и еще одна ошибка в структуре) вместо для этой цели предназначенного <hr />?

    И позвольте по поводу аттрибутов width и height сказать: они, хоть и относятся к оформлению в HTML, все же кое-где (например у разрешены спецификациями. Даже XHTML 1.0 Strict позволяет использовать их. Думаю, дело тут в том, что картинок в документе может быть очень много, и задавать для каждого свой class — дело неверное. Ну а использование style=”width: Xpx; height:Ypx” не очень отличается и от аттрибутов )

    Кстати, для элемента textarea разрешены в чистом виде разрешены аттрибуты cols и rows (наверное по той же причине).

    убейте, пожалуйста, предыдущий пост и эту ремарку


  3. Дмитрий :

    Чушь всё это!

    Задача: на странице вида http://example.com/search-results?skip=10 вывести список (ordered list), не прибегая к устаревшей конструкции .

    Ну, как? Получается? Или такая задача (в рамках идеологии W3C) изначально некорректна?


  4. Waul :

    Данная статья – подтверждение моей теории, что скоро останется всего один тэг (не считая, конечно, html, body, head и т. п.). Уже сейчас тэг “a” можно спокойно использовать вместо “span”. А если ему задать свойство “display”, то и вместо “div”.

    Ну, это так, несерьезно. А вот серьезно меня интересует, почему от “b” и “i” перешли сначала к “strong” и “em”. А теперь, вообще, желательно использовать CSS… ?


  5. VolCh :

    Будет не один тэг, а много, причем придумывать их будем сами, а в стилях описывать внеший вид (XML+XLS) :)

    А серьезно, b и i обозначают именно жирное и наклонное написание, а это не есть хорошо, например при зачитке страницы голосом :), а strong и em – логическое выделение, а уж как мы его будем изображать на экране или бумаге, или выделять голосом – описываем в стилях.


  6. Portnov :

    Да, действительно, некоторые элементы здесь перечислены зазря.
    “em”, “strong”, “sub”, “sup” – это теги логической разметки, и семантически их использовать правильнее, чем “span class=”.
    “hr” – это отдельный элемент, разделитель. Скажем, у меня на странице должны быть две картинки, разделенные горизонтальной чертой. Последовательность “img”, “hr”, “img” читается как “картинка; разделитель; картинка”, в то время как “img”, “p style=”, “img” – как “картинка; абзац, почему-то пустой; картинка”.
    Списки “ol” и “ul” вообще непонятно, к чему тут упомянуты.
    2 Дмитрий: а поконкретнее задачу сформулируйте… А то не вполне понятно, что вы хотите.


  7. Comicz :

    Например:
    размер шрифта xx-small .
    Бугага :)
    Хотя я давно красную звёздочку пишу как
    *


  8. Comicz :

    мдя а так?
    [span style="color:red"]*[/span]


  9. Zenitchik :

    Замечание практика:
    Полная замена тегов и – не по делу удлинняет код.


  10. Zenitchik :

    Замечание практика:
    Полная замена тегов “b” и “i” – не по делу удлинняет код.


  11. Огоньков :

    а для legend разве text-align срабатывает?


  12. Octane :

    и – это никак не устаревшие теги логического форматирования и служитат они для выделения значимости текста для поисковых машин или для изменения интонации в речевых браузерах. И совсем не обязательно, что и во всех браузерах будут отображаться наклонным и жирным шрифтом соответственно, т.к. это теги логического форматирования текста… И совсем не рекомендуется замнять их оформление через CSS, таким образом поисковая машина не сможет выделить из всего этого текста важные слова, кот. по идее должны были быть выделены тегами логического фоматирования. Лучше вообще на верности сделать так:

    em {
    font-style: italic;
    }
    strong {
    font-weight: bold;
    }


  13. Octane :

    хм а ведь тег code не работает в комментах, там где написано “и” в моем комментарии выше должны былb быть тени em и strong :( исправьте плиз…



22 queries 0.190 seconds.