Посередине с элементом <center>

Недавно я написал пост в твиттере, чем озадачил некоторых людей. Они, возможно, подумали, что это был троллинг или сарказм!

Элемент <center> — это потрясающе. Почему я избегал его все эти годы?

Это легче

Допустим, я собираюсь отцентрировать некий текст. В процессе поиска решения мой мозг сталкивается с «вилкой»:

  1. Я использую элемент <center>.
  2. Я не использую элемент <center>, а выбираю решение из множества вариантов на базе CSS.

Допустим, мы выбрали вариант 2. Вот код:

<p>The witch had a cat and a very tall hat,</p>
<p>And long ginger hair which she wore in a plait.</p>
<p>By: Julia Donaldson and Axel Sheffler</p>

Я хочу выровнять по центру информацию об авторах. Вот какова цена второго варианта:

  1. Добавляем класс к последнему элементу <p>
  2. Придумываем подходящее название класса, возможно «credit»
  3. Создаём новый стиль в CSS-файле
  4. Добавляем элемент <link> в раздел <head> моего документа
  5. Не забываем добавить rel=«stylesheet», иначе это не будет работать
  6. Добавляем 3 строки в CSS.

Вот такие вот:

.credit {
  text-align: center;
}

Не очень много работы.

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

  1. Добавляем элемент <center> вокруг содержимого.
  2. Нет, второго шага нету. Вы на секунду попались, верно?

Но… но… семантика!

Хорошо. Семантика. Давайте оставим в стороне серьёзные разговоры, но вот какие утверждения я видел: элемент <center> не имеет никакого семантического значения.

Поэтому вместо него мы можем использовать элементы <span> или <div> (кстати, я уверен, что если вы собирались просто отцентрировать абзац, вы бы использовали элемент <p> и приведённый выше CSS.)

Но теперь вы используете элемент без какого-либо семантического значения, а затем добавляете CSS (и возможно классы), чтобы выровнять его по центру.

И почему же вместо этого не использовать элемент <center>, который «не имеет семантического значения», и не извлечь выгоду от поведения браузерных стилей по умолчанию, которые достаются вам просто так. Точно так же, как вы делаете в случае с разными уровнями заголовков. Или с элементами <sup> или <small>?

Да, но этот элемент считается устаревшим!

На самом деле, согласно W3C-валидатору, элемент является выведенным из употребления — звучит немного строже.

С другой стороны, ну и что с того? Красота HTML в том, что он работает, даже если вы его совсем перекорежите, браузер заставит его работать.

Старые страницы, написанные на элементах <font> и <big> всё ещё работают, и хорошо описаны в спецификаци для браузеров, которые поддерживают HTML4 и которые прекрасно знают, как должны быть застилизованы элементы эти элементы. HTML4 достиг статуса рекомендации в 1999 году, а HTML5 (на 31 июля 2014) всё ещё находился в статусе кандидата в рекомендации.

Моё мнение: браузеры будут поддерживать элементы HTML4 ещё очень долгое… долгое время. Я готов держать пари, что HTML4 и стили элемента <center> будут поддерживаться дольше, чем будет существоватть этот блог (и другие мои сайты).

Итак, этот элемент устарел. Но он работает. И этим, в принципе, можно подытожить практически весь веб: но ведь это работает.

Больше элемента <center>?

Да, лично я убедил себя в том, что буду использовать элемент <center> чуточку чаще (чем вообще никогда, как раньше). Возможно, вы задумаетесь о том, чтобы вернуть этот элемент и в ваш инструментарий.

Оригинал статьи и автор

P.S. Это тоже может быть интересно:

20 Комментарии

  1. Дамир

    Bad practice на css-live.ru

    1. Максим Усачев (Автор записи)

      Ну почему же? Мы же не принуждаем никого возвращать в свой интсрументарий этот элемент. Поднял эту тему, кстати, один из уважаемых HTML5-докторов Реми Шарп. Мы лишь поделились с нашими разработчиками его мыслями на этом счёт. Да, и вообще, тема довольно-таки холиварная и было бы интересно послушать и другие мнения. Так сказать, провести пятничный холивар:)

  2. Оксана

    Знатный троллинг со стороны Реми Шарпа. Не думаю, что это он серьёзно.

    В конечном итоге увидеть center {text-align: left;} думаю ни у кого желания нет.

    1. Максим Усачев (Автор записи)

      В том-то и прикол, что вроде бы серьёзно:)
      А вообще, по теме, я даже и не знаю, когда может понадобиться этот элемент… разве что на каком-нибудь древнем проекте, где код представляет собой жестокую кашу из старых тегов, на проекте, где эту кашу <маслом/center'ом> не испортишь:)
       

  3. VolCh

    Не нужно возвращать. Я вообще против "визуальных" тегов и дефолтных стилей :) А div не являются тегом без семантики: его семантика — объединие.

  4. Вася

    Довольно натянутый пример. Что мешает предопределить класс .center и прописывать его к любому тэгу? Телодвижений даже меньше, чем менять разметку под CENTER.

  5. AntonMMF

    Зачем писать link для подключения стилей? Давайте пихать стили внутри html через style, это ведь лишнее действие, а так мы даже сэкономим http-запросы к серверу. Профит ведь очевиден!

    1. Tolerant

      Вообще-то это нормальная практика для очень высоконагруженных страниц :) Это один из методов экстремальной оптимизации и профит в нем действительно очевиден.

  6. Tolerant

    А чем text-align: center лучше, чем все остальных пар свойств и значений в цсс? Почему только в этом случае мы должны отходить от общепринятой практики и использовать тег,  а не задавать класс для контейнера и не писать css для него? Ведь это от к чего мы так долго шли — вынесение оформления на уровень css и использование html только для задания структуры документа, руководствуясь семантикой элементов. Не говоря уже о том, что элемент уже запрещен спецификацией, html код уже будет невалидным для стандартного html5 докатайпа и непонятно, когда браузеры прекратят его поддержку — может это случится через 50 лет, а может и через 5.

    В чем профит? В том, что для одного единственного значения, одного единственного свойства css я буду использовать тег, зная что сейчас все браузеры его поддерживают и он будет работать? А что, если мне понадобится этому тексту добавить цвет? Я точно так же буду добавлять класс к тегу center и буду писать css. А что если мне потом для этого элемента нужно будет выравнивание по левому краю? Или добавляем center { text-align: left; }, но после подобного путь только один — торжественное сепукку. Второй вариант, меняем элемент center на другой — div, span или другой. Т.е. все равно пришли к тому, что center не нужен (вернее применим только в одном единственное случае)

    Вобщем, как мне кажется, Реми действительно затроллил этим постом. И эти пару абзацев я писал лишь для неофитов, которым могут мысли, озвученные в статье, показаться здравыми.

  7. Zjoin

    По мне хорошее предложение. И не понятно как люди определяют что лучше или хуже, когда сам интернет один большой костыль.

  8. Alinaki

    Если у тебя есть некий текст, который что-то означает — оберни его в контейнер и задай значащий класс на человеческом языке. Это всё.

    Надеюсь, автор оригинального послания просто психанул.

  9. Евгений

    Что за бред?! <center> ответственен уже за визуальное представление контента. Визуальной части не место в html, для этого и развивают css!

    Сначала черезжопный picture, теперь этот бред. В каменный век может еще слетаем?

    1. Дмитрий

      +1 !  Стоит отделять содержимое(HTML), внешний вид(CSS) и поведение(JavaScript) документа.

      1. SelenIT

        Наверное, стоит напомнить это авторам спецификаций, которые зачем-то ввели в HTML элемент details и нативную валидацию форм (поведение), а также внедряемую в разметку SVG-графику (чисто презентационные элементы, т.е. оформление). А в CSS — генерируемое содержимое и интерактивные псевдоклассы вроде :hover, :checked и :target (поведение:).

        Если серьезно, я тоже считаю, что функции center не место в HTML. Но беда в том, что полной замены ему в современном CSS (работающей и для текста, и для блоков) нет! А задача центрирования заранее неизвестного блочного содержимого нет-нет, да встречается…

  10. SelenIT

    На мой взгляд, говоря о преимуществах <center>, Реми упустил главное: см. пример. Насколько я в курсе, штатными и даже экспериментальными средствами современного CSS добиться такого результата вообще нельзя, можно лишь добиться грубо приближенного аналога а-ля center > * { margin-left: auto; margin-right: auto; }.

    Как же это работает в браузерах? Похоже, что чудом. В Fx для center стоит нестандартный префикснутый text-align: -moz-center, в Хром(иум)е — такой же -webkit-center, в IE какая-то тёмная уличная магия. Стандартизировать эти значения нельзя, т.к., во-первых, соотв. безпрефиксный center уже есть и работает иначе, а во-вторых, text-align не имеет права влиять на поведение блоков в контейнере. Поэтому сама поддержка <center> браузерами держится на костылях, причем очень хлипких. Почтенный возраст спецификации HTML4 ни от чего не страхует, многие ее части были вообще проигнорированы разработчиками браузеров. А сейчас браузеры и вовсе ломают совместимость со старыми глюками ради новых единообразных стандартов (напр. поведение parseInt("08") при переходе к ECMAScript 5).

    В общем, меня Реми не убедил, для меня минусов больше:). Хотя, для очень быстрого прототипа/примера для проверки чего-нибудь… наверное, исключительные случаи, когда оно оправдано, бывают. Как и везде…

  11. Не смог пройти мимо. Это буллшит. Самый адекватный способ в бутстрапе: .text-center.

  12. фругурт

    Если совсем быть откровенными класс на Р уже дурной тон. Да и семантически более верно использовать для автора другой, более подходящий тег

  13. Андрей

    Не буду спорить, но по-моему прелесть в том, что html5 поддерживает и будет поддерживать html4 и более старые версии. Еще один из его главных плюсов — упрощение верстки. Почему же тогда center должен считаться ДРЕВНИМ, СЛОЖНЫМ, НЕУДОБНЫМ и т.д.???? А если уж кому-то по вкусу все описать в css, то тогда можно весь сайт сделать на span(ах)

    1. SelenIT

      HTML5 (в принципе, HTML вообще) во многом основывается на правиле Постела. Поэтому браузерам, да, предписано всегда поддерживать то, что поддерживалось раньше, но разработчикам всячески рекомендуется пользоваться только «идейно правильными» приемами (правда, как водится, представления об «идейной правильности» расходятся уже между W3C и WHATWG). С версиями HTML это слабо связано — напр., удобных (в теории) атрибутов char и charoff для таблиц из HTML4 никто никогда не поддерживал, поэтому и HTML5 про них не вспоминает.

      Проблема center в том, что он не сообщает ни человеку, ни машине никакой добавочной информации, кроме чисто оформительской, т.е. по смыслу ничем не отличается от div с каким-то CSS. В теории, казалось бы, «если не видно разницы, зачем платить больше вводить новый тег»… но на практике разница есть (воспроизвести поведение center чистым CSS пока невозможно), и в этом вся пикантность ситуации:)

  14. Никита

    До сих пор пользуюсь center. Почти постоянно. Но думаю, что пора прекращать…

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.