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

      Ответить

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

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

    Ответить

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

      Ответить

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

    Ответить

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

    Ответить

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

    Ответить

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

      Ответить

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

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

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

    Ответить

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

    Ответить

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

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

    Ответить

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

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

    Ответить

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

      Ответить

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

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

        Ответить

  10. На мой взгляд, говоря о преимуществах <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).

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

    Ответить

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

    Ответить

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

    Ответить

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

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

      Ответить

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

    Ответить

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

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

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