Как известно, Хабр использует «олдскульные» атрибуты тегов, допускающие форматирование текста и рисунков в статьях и комментариях авторами. Среди таких тегов оказался один, отсутствующий в стандартах W3C. Это — <img align=«center»>. Обнаружилось, что часть авторов «наивно» пользуется этим атрибутом, потому что другого редактор Хабра просто не предоставляет. Как ни странно, в части браузеров этот атрибут на Хабре поддерживается, хотя эксперименты с чистыми тестовыми страницами показывают, что чудес нет, в img он не работает.
Заинтересовал вопрос, в каких случаях атрибут поддерживается и что надо дописать в стилях, чтобы он начал поддерживаться везде. Если бы это заработало на сайте, мы поддержали бы наивное мнение, что это правильный атрибут, но, тем не менее, получили бы инструмент центрирования рисунков.
На самом деле, атрибут align=«center» в HTML предназначен для блочных элементов (div, p, ...) и относится не к ним самим, а к внутреннему содержанию элемента. Поэтому, если напишем
Но этого нельзя написать на Хабре, таковы правила парсера тегов.
Чтобы проверить, как это работает на Хабре, можно воспользоваться предпросмотром при написании комментария или в черновике статьи. Это не совсем точно будет совпадать с окончательным видом, но пользоваться для тестов можно.
Вот что увидим:
В большинстве браузеров, кроме Firefox, вторая картинка центрируется (если стили Хабра ещё не исправили), хотя тесты показывают, что этот атрибут браузерами не поддерживается (кроме редких исключений с доктайпами).
Почему же этот неправильный текст не работает везде, но работает на Хабре, причём не в Firefox?
UPD 25 янв. 2013 (через год): обнаружилось, что стили Хабра перестали поддерживать этот неправильный атрибут. Для его задействования на сайте пришлось дописать юзерстили так же, как раньше это было сделано для Firefox.
Посмотрев на стили рисунка, находим причину.
Да, на Хабре в файле all.css поддерживается этот финт превращения неправильного атрибута в «правильный». Именно эти свойства нужно иметь рисунку, чтобы начать центрироваться — быть блоком и центрироваться стилем margin: 0 auto;.
(А ведь те, кто знает, что такого атрибута нет, не могут сами догадаться, что он работает на Хабре — документации нет, тест в Fx не проходит. Я, например, чисто случайно узнал о его существовании, увидев в заметках aleksandrIt (почти в каждой аннотации), посмотрев через Chrome.)
Осталось разобраться, почему центрирование не работает в Firefox.
Дело за малым — тоже посмотреть стили (с помощью Firebug). Здесь обнаруживаем, что атрибут чудесным образом изменился на align=«middle» и даже ручное переименование не помогает его исправить. Браузер сам меняет неправильный атрибут на, «по его мнению», наиболее подходящий (вертикальное выравнивание в потоке строчных элементов). Поэтому правило стилей img[align=«center»] перестаёт работать.
Следовательно, для полной поддержки браузеров на Хабре не хватает правила:
Чтобы посмотреть тестовую страницу проверки работы атрибута img align=«center» в разных браузерах, посетите ссылку spmbt.kodingen.com/habrahabr/testImgAlignCenter.htm. В Firefox будет выглядеть примерно так, в других браузерах несколько иначе. Картинки и блоки подкрашены, чтобы лучше различались. Реальных картинок нет, чтобы наблюдать подписи в ALT.
Сначала увидим под надписью «Основной тест» голубоватый блок "Пустой рис." с искомым атрибутом и несрабатывание атрибута в изображении, что совершенно логично.
Одним кликом на ссылке «Включить исправляющие стили» можно увидеть применение полученных нами правил стилей, чтобы центрирование начало работать во всех браузерах.
Технические замечания. Ососбенный вид функции применения стилей addRules() вызвано желанием включить в исполнение скрипт в браузере IE8. (В IE9 не проверялось, но должно работать, как в остальных.) Без доктайпа в IE8 не будет работать правило margin: 0 auto, но заработают атрибуты align:right и left.
Такое правило специально для правки ошибки было прописано в стилях Habr ZenComment и независимо от них, в скрипте HabrAjax (Хабр-аджакс), после чего центрирование атрибутом align=«center» стало работать правильно во всех браузерах.
Для выводов вообще, надо сказать, что не следовало бы поддерживать мнение среди вебмастеров, что этот атрибут может работать в тегах IMG. Пусть время атрибутов прошло и все пользуются стилями, некоторым неопытным веб-строителям может запасть мнение, что такой атрибут существует.
UPD 25 янв. 2013 (через год): обнаружилось, что стили Хабра перестали поддерживать этот неправильный атрибут. Для его задействования на сайте пришлось дописать юзерстили так же, как раньше это было сделано для Firefox.
Заинтересовал вопрос, в каких случаях атрибут поддерживается и что надо дописать в стилях, чтобы он начал поддерживаться везде. Если бы это заработало на сайте, мы поддержали бы наивное мнение, что это правильный атрибут, но, тем не менее, получили бы инструмент центрирования рисунков.
На самом деле, атрибут align=«center» в HTML предназначен для блочных элементов (div, p, ...) и относится не к ним самим, а к внутреннему содержанию элемента. Поэтому, если напишем
<p align="center"><img src="123.gif"/></p>
Но этого нельзя написать на Хабре, таковы правила парсера тегов.
Чтобы проверить, как это работает на Хабре, можно воспользоваться предпросмотром при написании комментария или в черновике статьи. Это не совсем точно будет совпадать с окончательным видом, но пользоваться для тестов можно.
<div align="center"><img src="1450823006127547032299"/></div>
<img align="center" src="1450823006127547032299"/>
Вот что увидим:
В большинстве браузеров, кроме Firefox, вторая картинка центрируется (если стили Хабра ещё не исправили), хотя тесты показывают, что этот атрибут браузерами не поддерживается (кроме редких исключений с доктайпами).
Почему же этот неправильный текст не работает везде, но работает на Хабре, причём не в Firefox?
UPD 25 янв. 2013 (через год): обнаружилось, что стили Хабра перестали поддерживать этот неправильный атрибут. Для его задействования на сайте пришлось дописать юзерстили так же, как раньше это было сделано для Firefox.
Посмотрев на стили рисунка, находим причину.
img[align="center"] {
display: block;
margin: 0 auto !important;
}
Да, на Хабре в файле all.css поддерживается этот финт превращения неправильного атрибута в «правильный». Именно эти свойства нужно иметь рисунку, чтобы начать центрироваться — быть блоком и центрироваться стилем margin: 0 auto;.
(А ведь те, кто знает, что такого атрибута нет, не могут сами догадаться, что он работает на Хабре — документации нет, тест в Fx не проходит. Я, например, чисто случайно узнал о его существовании, увидев в заметках aleksandrIt (почти в каждой аннотации), посмотрев через Chrome.)
Осталось разобраться, почему центрирование не работает в Firefox.
Дело за малым — тоже посмотреть стили (с помощью Firebug). Здесь обнаруживаем, что атрибут чудесным образом изменился на align=«middle» и даже ручное переименование не помогает его исправить. Браузер сам меняет неправильный атрибут на, «по его мнению», наиболее подходящий (вертикальное выравнивание в потоке строчных элементов). Поэтому правило стилей img[align=«center»] перестаёт работать.
Следовательно, для полной поддержки браузеров на Хабре не хватает правила:
img[align="center"], img[align="middle"]{
display: block;
margin: 0 auto !important;
}
Тест чистой страницы с атрибутами
Чтобы посмотреть тестовую страницу проверки работы атрибута img align=«center» в разных браузерах, посетите ссылку spmbt.kodingen.com/habrahabr/testImgAlignCenter.htm. В Firefox будет выглядеть примерно так, в других браузерах несколько иначе. Картинки и блоки подкрашены, чтобы лучше различались. Реальных картинок нет, чтобы наблюдать подписи в ALT.
Сначала увидим под надписью «Основной тест» голубоватый блок "Пустой рис." с искомым атрибутом и несрабатывание атрибута в изображении, что совершенно логично.
Одним кликом на ссылке «Включить исправляющие стили» можно увидеть применение полученных нами правил стилей, чтобы центрирование начало работать во всех браузерах.
Технические замечания. Ососбенный вид функции применения стилей addRules() вызвано желанием включить в исполнение скрипт в браузере IE8. (В IE9 не проверялось, но должно работать, как в остальных.) Без доктайпа в IE8 не будет работать правило margin: 0 auto, но заработают атрибуты align:right и left.
Что делать?
Такое правило специально для правки ошибки было прописано в стилях Habr ZenComment и независимо от них, в скрипте HabrAjax (Хабр-аджакс), после чего центрирование атрибутом align=«center» стало работать правильно во всех браузерах.
Для выводов вообще, надо сказать, что не следовало бы поддерживать мнение среди вебмастеров, что этот атрибут может работать в тегах IMG. Пусть время атрибутов прошло и все пользуются стилями, некоторым неопытным веб-строителям может запасть мнение, что такой атрибут существует.
UPD 25 янв. 2013 (через год): обнаружилось, что стили Хабра перестали поддерживать этот неправильный атрибут. Для его задействования на сайте пришлось дописать юзерстили так же, как раньше это было сделано для Firefox.
