12 марта 2010.  Align средствами css и атрибутами html

Извиняюсь, за долгое отсутствие статеек, то праздники, то работа...

В общем сегодня я быстренько распишу подробнее свой комментарий на статью о вертикальном выравнивании. А именно как заменить атрибуты align и valign у html, средствами css. 

Введение

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

Для блочных элементов атрибут align - аналогичен стилю text-align, для строчных - атрибуту float. Атрибут valign (который можно писать как align, при отсутствии оного), заменяет свойство vertical-align, только с немного другими  значениями, смотрите ниже таблицу соответствий.

Горизонтальное выравнивание

Раньше, например для того чтобы центрировать какой-то элемент, использовани элемент <center>, потом такой простой и понятный элемент запретили, в пользу <div align="center">, потом запретили и атрибут align, в пользу css свойств text-align, float и margin.

Важно помнить:
text-align - в правильных браузерах не влияет на дочерние блоковые элементы!
Т.е <div align="right"> и <div style="text-align:right"> не одно и тоже. Свойство text-align не окажет влияния на дочернюю таблицу или div, тогда как align="right" - расположит все дочерние элементы справа, даже блочные.

Таблица перевода атрибутов в CSS:

Вертикальное выравнивание

Читайте также соответствующую статью про вертикальное выравнивание.

Когда vertical-align задан ячейке таблицы - это задаёт расположение базовой линии текста относительно ячейки.

<td  valign="top"> и <td style="vertical-align:top"> - одно и то же.

 Аналогично с inline элементами. Поиск в гугле показал что: 

<img valign="absmiddle"> означает  <img style="vertical-align:middle">

Правильно кстати писать не valign, а align, однако любимый эксплорер в каких-то версиях понимает для align только центровку по горизонтали. Возможно это сделано для того чтобы была возможность задавать отдельно align (css text-align) и отдельно valign (css vertical-align)

Интересно знать такую таблицу соответствий , например применительно к <img> (указываю атрибут align, но подразумеваю valign):

P.S. Не забывайте, что элемент <p> - является блочным, т.е. для форматирования текста в нём достаточно применять style text-align.

15 января 2010.  Как скрыть код только для IE

Думаю многие знают как с помощью условных комментариев добавить какой-то код видимый только для Internet Explorer. А что если понадобиться наоборот, не показывать что-то для ие? Решение в тех же условных комментариях. Достаточно просто закрыть открывающий комментарий конструкцией "<!-->" и открыть закрывающий конструкцией "<!--".

Например в одном из дизайнов мне потребовалось скрыть от ие6 плавающий блок с png-украшательством, проще было вообще убрать его чем подключать .htc или css-фильтр. Это делается так:

<!--[if gt IE 6]><!--> 
<div id="some_cool_div"></div>
<!-- <![endif]-->

В данном случае блок увидят все нормальные браузеры и IE 7 с IE 8.

P.S. Вот такая небольшая заметка. Дорогие читатели, вам будет интересно если я буду периодически давать вам какие-нибудь php-задачки из прошлогоднего тест-задания нашей компании?

UPD: Возможно я непонятно выразилась в статье - меня поправляют в комментариях. Уточняю, для того чтобы скрыть блок вообще от всех версий ИЕ нужно написать:

<!--[if !IE]><!--> 
<div id="some_cool_div"></div>
<!-- <![endif]-->

Статья в общем-то не столько о conditional comments, сколько о открывающей и закрывающей конструкции которая делает видимой содержимое комментария для других браузеров.

15 сентября 2009.  Использование атрибутов title и alt

Не повторяйте текст ссылки в атрибуте title

Стандартные шаблоны прилагающиеся к различным CMS часто повторяют текст ссылки в навигационных ссылках в каждом атрибуте title.

Я не знаю зачем. Может быть разработчики верят что это повысит доступность (accessibility) то то что нравится поисковикам. В любом случае, повторение текста ссылки в атрибуте title не делает конечному пользователю ничего хорошего.

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

Не используйте атрибут title для важной информации

Атрибут title используется для предоставления дополнительной информации об HTML элементе, например ссылке. Если информация не только повторение текста ссылки то атрибут может быть полезен.

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

• Когда вы использует клавиатуру для навигации, большинство браузеров не показывает текст title (я не знаю о тех кто показывает)
• Большинство экранных читалок настроены не отображать title пока пользователь специально не попросит
• Есть задержка отображения title для людей которые пользуются мышкой и графическим браузером, поэтому они могут незаметить её пока не будут знать что он там есть

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

Написание хорошего альтернативного текста (атрибут alt)

Я проделал довольно большую работу по обеспечению качества, особенно в отношении доступности (accessibility) и использования веб-стандартов на сайтах. Часто я делаю заметки о том как используется альтернативный текст для изображений и графических элементов.

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

Два главных правила которые я использую для описания альтернативного текста для изображений следующие:

• Если вам нужно описать документ кому-то по телефону упомяните ли вы картинку или её содержание? Если да, картинка вероятно нуждается в альтернативном тексте. Если нет, ей лучше иметь пустой атрибут alt.
• Будет ли альтернативный текст какой-нибудь картинки иметь значение если вы выключите показ картинок в браузере? Если нет, поправьте альтернативный текст так чтобы он имел значение и не предоставлял лишнюю информацию.

Это основные правила, и есть исключения, но я заметил что основном они прекрасно работают.

На практике это значит что изображения должны в основном иметь пустой альтернативный текст, alt="". Знайте также, что если картинка находится внутри ссылки которая не содержит также описывающего текста, картинке нужен альтернативный текст описывающий ссылку.

Намного более детальные советы по написанию альтернативного текста в статье на WebAIM - Подходящее использование альтернативного текста.

Материалом для заметки послужил перевод нескольких статей с 456bereastreet.com

9 июля 2009.  Что происходит в режиме совместимости

Извиняйте, что не добралась до статьи раньше, был день рождения и т. п., да и статья большая, третий день с перерывами писала. Сегодня я хочу вам рассказать о том что происходит в Quirks mode (режиме совместимости) и режиме соответствия стандартам (Standarts Mode).

Quirks Mode (режим совместимости) — это тоже режим работы веб-браузеров таких как Internet Explorer (IE), Firefox, Opera и Safari (chrome). Буквально, режим совместимости (также называется «режимом причуд») означает что относительно современные браузеры сознательно симулируют множество багов старых браузеров, особенно IE 4 и IE 5.

Режим совместимости включается при отсутствии doctype. Это значит что браузер ожидает в начале HTML документа увидеть содержит ли он объявление doctype такое какое требуется спецификацией HTML.

Назначение режима совместимости в том чтобы показать старые страницы так как задумал их автор. Старые страницы могли быть написаны с использованием особенностей старых браузеров. По дополнительной информации о Quirks Mode в основном, смотрите сайт QuirksMode.org.

Здесь я напишу список того что происходит в режиме совместимости. Всё-таки, этот режим, по-сути, сознательное нарушение правил CSS и HTML спецификаций.

Если у вас уже есть существующая страница которая вполне работает, но не имеет объявления doctype (требуемого спецификацией HTML) в начале документа, вы не можете просто взять и написать там объявление. Причина в том что декларация переключает браузер в так называемый «режим соответствия стандартам» (Standards Mode, или говорят просто стандартный режим), противоположный режиму совместимости. Это может означать что угодно. Страница может совершенно развалиться после объявления doctype, часто вёрстка меняется довольно непредсказуемо. Впрочем, не так непредсказуемо если вы знаете что может присходить в этом режиме.

Перед добавлением doctype, вам надо проверить HTML и CSS код на синтаксическую корректность используя валидаторы. Этого может быть недостаточно, так как страница может быть свёрстана полагаясь на вещи которые работают только в Quirks Mode. Поэтому, вам надо проверить страницу как минимум в IE 7 и Firefox 2 в Standards Mode, т. е. после добавления объявления doctype. Если страница отображается некорректно, нижеизложенный список может быть полезен для разрешения проблеммы.

При создании новой страницы, вам не нужно учитывать Quirks Mode и вообще желательно о нём не думать. Просто пишите согласно документации HTML и CSS; это включает использование объявление doctype, которое переключает современные браузеры в стандартный режим. Кроме того, указывайте объявление doctype в самом начале, т. к. некоторые браузеры (IE6) переходят в режим совместимости, если есть хоть что-то (даже комментарий) перед ним. (Это немного неудобно если вы используете XHTML, но в большинстве случаев, вам не нужно использовать XHTML для веб-страниц где-либо). Но если вы решите использовать некоторые особенности которые работают только в режиме совместимости, такие как height="100%" аттрибут у элемента table, вам следует ознакомиться со списком чтобы учесть что ещё у вас произойдёт.

комментариев нет

1 июля 2009.  Блочная модель, и её вариации.

Не многие знают в чём различие между отображением браузером страницы в режиме соответствия стандартам (CSS1Compat) и режиме совместимости (Quirks mode). В преддверии грядущей статьи об этом расскажу немного о боксовой модели. Слова «боксовая» и «блочная» — синонимы, просто эта модель применяется к элементам типа block, ну и вообще слово box можно перевести как блок.

11 комментариев

30 июня 2009.  Вариации валидного xhtml

Месяц назад я написала статью «Не используйте доктайп XHTML», где рассказала читателям о том что xhtml'я не существует =) (дед мороза тоже нет кстати). Эта статья для тех продвинутых пользователей которые не стали читать предыдущую статью. В ней я расскажу о вариациях (вариантах) валидного XHTML 1.0 и 1.1.

комментариев нет

16 июня 2009.  Повтор сбора веб-статистики.

Итак, я вчера повторила сбор статистики 1599 сайтов (т.е. главных страниц) который проводила месяц назад. На этот раз мне поправили скрипты и я скачала страницы вместе с заголовками, что даст ещё немного интересных циферок...

комментариев нет

20 апреля 2009.  Вёрстка дивами - «футер который всегда внизу».

Традиционно используется табличная вёрстка, на ней весьма просто реализовать всё что нужно - всегда делается таблица размерами 100%x100% и в ней отдельно отводятся ячейки под шапку (header), середину (content) и низ (footer) сайта. Потом чтобы сделать расстановку меню мы используем ещё одну таблицу, для расположения контента ещё одну, и ещё, и ещё... Со временем это надоедает. Количество таблиц делает код трудночитаемым и медленно грузимым (чем больше элементов в DOM документа тем медленней он рендерится браузером), не говоря уже про вес страницы. Предлагаемое ниже способ я описываю с учётом Doctype 4.01 Strict, ну или хотя бы Transitional. Без доктайпа придётся воевать с "quirks mode" разных браузеров.

Уверена многие пытались верстать страницу на дивах, а ещё уверена у многих были проблемы с позиционированием footer'а:

Например зная примерную высоту футера (у меня она 32 пикселя), если мы укажем блоку #footer стиль {position:absolute; bottom:0;height: 32px;}, то footer окажется снизу, но в случае большого количества содержимого будет находиться где-то среди него и скроллироваться вместе с ним.

Для того чтобы этого не случилось неплохо бы создать блок например #all для вообще всего что находится на странице, с позиционированием relative, включая собственно <div id="footer"></div>. Теперь позиционирование футера считается относительно родительского блока, а не экрана, и теперь футер прижат к низу блока #all. Поскольку низ у #all там, насколько хватило контента, #footer перекрывает его часть. Чтобы этого не произошло добавим перед ним блок <div id="empty">&nbsp;</div> с высотой 32px. 

Однако, если у нас на странице контента мало, то футер убегает вверх, чтобы этого не было нужно добиться растягивания #all на всю высоту экрана минимум. Сам блок #all сделаем height:100% и добавим стиль html, body { height: 100%; margin: 0; padding: 0; } и ура, у нас всё казалось бы замечательно. #all - растягивается всю облась экрана. А вот с контентом оказывается облом - при кучке контента #all занимает только отображаемую часть, #footer как следствие тоже. Во всех браузерах кроме IE6. В итоге у нас получилось то что в начале. Ситуацию поправит html>body #all { height: auto; min-height: 100%; } - который не затронет IE6, но растянет блок как надо во всех остальных браузерах.

Результат вы можете видеть на страницах этого блога. Если удалить всё ненужное то у меня получилось вот такое решение.

P.S. Тоже самое можно сделать другим способом.

20 марта 2009.  Про DOCTYPE и стандарты html.

Итак... в этой заметке я хотела бы поделиться с общественностью своим мнением насчёт стандартов, и зачем они нужны.

Многие начинающие веб-дизайнеры не знают, а прогрессирующие не помнят что было когда-то такое время когда чётких правил написания разметки гипертекста не было, а тех которые были браузерам и пользователям не хватало и они выдумывали свои теги и атрибуты какие хотели. Чтобы как-то разгрести всю эту кашу все теги описывались в так называемые спецификации, в которых группа w3c пытаясь урегулировать хаос предписывала браузерам что и как они должны отображать. Чтобы эти каши не путались в браузерах и заодно в головах вебмастеров было предложено (в спецификации HTML2.0) а потом стало обязательным (в спецификации HTML3.2) указание типа спецификации которой нужно придерживаться при отображении страницы. Указать это можно с помощью тега <!DOCTYPE> в начале документа.

Естественно были популярные браузеры которые на спецификации плевали, ну или по крайней мере не очень придерживались. И были разработчики которые верстали под популярные браузеры и на спецификации ещё больше плевали. Чтобы их сайты не разваливались, если вдруг кто-то на эту страницу свёрстанную не по стандарту зайдёт, в браузеры ввели опцию отображать страницу "по старинке", если этот самый DOCTYPE не был указан. И было это во время Internet Explorer 5 под макось. С тех самых вариант отображения "по старинке" (quirks mode - англ. "причудливый режим") у всех браузеров менялся, и в общем до сих пор у всех разный. Поэтому чтобы верстать в quiks mode нужно учитывать особенности всех популярных браузеров.

Технолог лебедева в статье "тип документа объявлять или не объявлять" (2005 г.) утверждают " <!DOCTYPE> вам не требуется", глупенький, к счастью сейчас не 2005й год и эти слова в серьёз принемать не стоит. Сейчас все браузеры научились корректно отображать HTML в стандартном режиме, как написано в спецификации и как отображают другие браузеры. Старый браузер IE6 ежемесячно теряет больше чем по 5% всей аудитории и к концу года надеюсь сойдёт на нет. Тем более что недавно вышел IE8 который не то что HTML, а научился поддерживать CSS2.1 сразу и весь.

В "режиме соответствия стандартам" браузеры отображают код практически одинаково, без дополнительных ухищрений и хаков - это необходимая и достаточная причина для того чтобы уже начать его использовать. Для тех кто ранее верстал без него некоторые вещи необходимо будет выучить заново (ну 1-2 дня), например новую блочную модель и т.п.

Для начинающих советуется использовать "переходный" доктайп HTML 4.01 Transitional. Он учитывает все стандарты, но не отменяет устаревшие теги типа <font> и <center> и т.п. Выглядит  он так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
обязательно использовать именно такую строчку, не указание ссылки на .dtd считается ошибкой(!) и отображается "по старинке"!

Для тех кто со всеми стандартами знаком рекомендуется вариант Strict (строгий), верстать им - признак хорошего тона.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
В данном варианте допускается не использование ссылки на .dtd, но всё таки хороший тон оставить ссылку =).

Новый стандарт HTML5 пока что в состоянии черновика, и официально не должен поддерживаться, хотя поддерживается даже в IE6. Выглядит он так:

<!DOCTYPE html>
Вот так вот просто, без всяких указаний DTD (document type declaration).

Далее о главном - буду плевать в верстальщиков (динозавров) которые его не поддерживают:

1) GOOGLE - гугл состоит в рабочей группе whatwg которая занимается составлением стандарта HTML5. Уже сегодня можно найти доктайп этого стандарта на страницах результата поиска <!DOCTYPE html>. А вот на главной странице поставить забыли. Сэкономили 15 байт видимо. Можно оправдать что там и вёрстки-то нет, однако хочется чтобы гугл являл нам свет в непросвещённые умы, да.

2) яндекс - на всех страницах указан  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">, а то и вовсе не указан (например в панели вебмастера). Позор стыд и срам. Уже много лет так и висит. Когда я только начинала верстать я брала доктайп именно оттуда, и думала "ну... ничего не изменилось, фигня какая-то". Вот. И люди многие оттуда берут доктайп, я думаю.

Надо взять да и скачать главные страницы для всех доменов рунета (UPD: Скачала, см. статистику), хе-хе =) кто хочет посодействовать пишите в feedback предложения.

Ну и напоследок старенькое:

Крис Уилсон (Chris Wilson), архитектор платформы Internet Explorer, поделился с посетителями мероприятия информацией о том, что Microsoft планирует призвать создателей Web-сайтов к приведению сайтов к стандартам при разработке сайтов под IE 8.0. «Пять лет назад ни один из 200 самых популярных Web-сайтов не прибегал к использованию стандартов» — сказал Уилсон. «Сегодня стандартизированы лишь половина из этих 200 сайтов». Уилсон признал, что пока не до конца понятно, какую форму примет эта оптимизация. Но обращение к авторам сайтов с просьбой оптимизировать сайт «даст возможность делать восхитительные вещи». Дав Microsoft разрешение на то, чтобы IE 8.0 стал более стандартизированным, авторы возьмут на себя ответственность за некорректное отображение своих сайтов.

Ссылки по теме:

http://www.w3.org/QA/Tips/Doctype
https://developer.mozilla.org/en/Mozilla%27s_DOCTYPE_sniffing
https://developer.mozilla.org/en/Mozilla%27s_Quirks_Mode
https://developer.mozilla.org/en/Mozilla_Quirks_Mode_Behavior
http://www.htmlbook.ru/html/!doctype.html
http://www.webmakerslounge.com/html/pravilnyiy-doctype/
http://neveragainblog.com.ua/archives/70
http://softwaremaniacs.org/blog/2005/12/19/xhtml-you-say/
http://webmascon.com/topics/coding/25a.asp
http://hsivonen.iki.fi/doctype/.
http://habrahabr.ru/blogs/webdev/31484/ перевод SilentIT

Как распространён DOCTYPE:

Я провела исследование распространения доктайп на некоторых сайтах в рунете, подробнее читайте статью «Капля статистики: Doctype».