Комментарии 339
Для Firefox это Tails Export (если на странице присутсвуют микроформаты в правом нижнем углу браузера загорается иконка-символ микроформатов) и Operator.
Неплохо было бы иметь какую-то тулзу, которая анализировала код страницы и на основе замеченных ошибок (не ошибок соответствий с W3C, а именно ошибочных решений) выдавала советы по исправлениям.
Это весьма пригодилось бы начинающим верстальщикам, которые все эти методы в голове держать не могут, а по ходу работы совершенствовали своё мастерство. А то как закажешь вёрстку на фрилансе - там не то, что о помощи незрячим речи не идёт, там по 100 ошибок на страницу обычный валидатор w3c выдаёт..
1. Пользователи IE (особенно 5 и 6 версий) — это интернет-быдло которое будет жрать то, что подали.
2. target="_blank" — не хорошо.
3. :focus работает и без мыши. Так что проблем с keyboard-only не будет.
4. «чтобы „неглючило в IE”» порой приходится не только безобидный float поставить, а столько намудрить, что самому потом смотреть противно. Поэтому см.п.1.
5. Беда не в глобальных стилях. Это удобное и гибкое средство. Беда в неправильном их использовании.
6. На масштабирование влияет не тот код что получается в результате, а то как составлены шаблоны.
речь о том что outline: none убирает рамку вокруг выделенных ссылок, и их становится тяжело заметить - это явное ухудшение доступности.
ну как вы можете? как можно так называть людей на основании того, какой программой они пользуются? откуда хамство такое берётся?
Вы же не удивитесь, ели к вам гопота пристанет со словами "ну ты чё, слыш, мабилу гани"? Правильно, вы назовете их быдлом. Они ведь могут без этого обойтись, нормально общатся, нормально жить. Но ведут себя как быдло, вот и называются оным. Так же пользователи. Могут же, МОГУТ нормальными браузерами пользоватся. Но нет, им нравится сидеть на этом глючном и дырявом со всех сторон IE. Вот и получайте, чего хотели. Исправится ведь никто не мешает в любом случае.
Это очень упрощает разработку корпоративного сайта/ERP-системы.
А какой смысл указывать в КС стандартным браузером IE? Кому от этого лучше/легче/удобней? Пользователям? Разработчикам?
У нас, например, есть SharePoint, в котором через FF не полазить - будешь вводить логин, пароль на каждую страничку.
Причем я уверен, что это не единственная причина использования IE...
2. автоматические обновления с какого-нибудь _локального_ wsus?
3. использование уже оплаченного N лет назад приложения на ms jvm?
4. требования сторонних сертифицирующих организаций (для госконтор)?
Предположим, я простой электрик. Вы даже представить себе не можете, сколько мучений мне доставляют некачественные розетки, которые приходится устанавливать. А Вы ими пользуетесь, да еще и перегружаете. Как теперь мне Вас называть?
В то же время я пользуюсь ИЕ, мне вполне удобно, и я понятия не имею как устроены сайты. Но оказалось что я - быдло.
Я придумал выход: как оплачивается программист по Linux? а Windows?
Не нравится писать под ИЕ - дерите за это с заказчиков…
А на счет статьи — очень даже полезно, несмотря на то, что для большинства случаев много лишнего. Стиль у всех разный. Что удобно одному — не удобно другому. Почерпнул много полезного практического (прям хоть copy-paste) и идеологического. Сохранил страничку для заглядывания оффлайн)))
Предположим, я простой электрик. Вы даже представить себе не можете, сколько мучений мне доставляют некачественные розетки, которые приходится устанавливать, а алюминиевые провода — полная Ж. А Вы ими пользуетесь, да еще и перегружаете. Как теперь мне Вас называть?
В то же время я пользуюсь ИЕ, мне вполне удобно, и я понятия не имею как устроены сайты. Приходится быть быдлом.
Придумал выход: как оплачивается программист по Linux? а Windows?
Не нравится писать под ИЕ - дерите за это с заказчиков… если убедите… )
А на счет статьи — очень даже полезно, несмотря на то, что для большинства случаев много лишнего. Стиль у всех разный. Что удобно одному — не удобно другому. Почерпнул много полезного практического (прям хоть copy-paste) и идеологического. Сохранил страничку для заглядывания оффлайн)))
Автору спасибо.
Но называть таких людей быдлом... с таким же успехом можно былом называть всех, кто слушает что либо отличное от классической музыки. Непривередливость/всеядность в одной области — не показатель.
Тем более, многие браузеры для людей с ограниченными возможностями могут быть сделаны на движке IE. Потому, что там(IHTMLBrowser2) и куки, и DOM-парсер и все остальное уже готовое.
Только вот читал я и думал, что моим клиентам все это нафиг не нужно! И уж платить за эти "дополнительные правильности" они точно не будут!!! А сверстать просто ровно и аккуратно это одно, а Правильно (как автор описывает), да еще для всех устройств, для слепых, для глухих и т.д. - это простите в три-четыре раза больше работы...
Так что все это далеко не для каждого клиента и не для каждого сайта! Хотя стремиться к лучшему конечно же нужно по-любому...
автору спасибо, теперь бы найти того, кто содержащуюся в статье полезную информацию уместит на листочке в половину формата А4
Еще: я в основном верстаю эксклюзивные дизайны, разной сложности, там постоянно приходится идти на кучу ухищрений, иначе в ИЕ все равползается. И <div><img></div> я ставлю не от хорошей жизни, а потому что в ИЕ после <img>\n рендерится перенос строки, если б все сайты были белые и имели формат документа - прекрасно, но в реальной жизни это больше картинки и презентации, заказчик хочет красиво, а не разумно.
<dl t-person> - прекрасный пример, недавно убил такой =(, а все почему? потому что если у него есть контейнер <div> с заданным бекграундом, наблюдаем в FF3 по крайней мере забавную штуку:
border:1px - все ОК и бордер,
убираем бордер - элемент отображается со смещением на одну строку вниз, разрывая шаблон пополам. Логики тут нету никакой, так же как и у половины других "правильных" вариантов. Либо плюем на популярный ИЕ, либо миримся с хаками, выбирайте меньшее зло.
Все вышенаписанное - мое ИМХО, на которое я имею право.
<img>\n
рендерится перенос строкиdisplay: block для img и всё будет ок. но собственно — зачем вообще использовать img когда есть гораздо более удобный способ — background-image?
судя по описанию «убираем бордер — элемент отображается со смещением на одну строку вниз»
вы столкнулись с схлопыванием границ
По второму: эффект похож не на СХЛОПЫВАНИЕ, а на ВЫВАЛИВАНИЕ, Это поведение стандартное, но случай не тот! Дело в том, что вываливался НЕ внутренний элемент, а именно внешний. Если Вы расставите бордеры - перекрытия роли особой не сыграют, у меня же фон был задан для ВНЕШНЕГО элемента и именно он слетал делая разрыв. Я не знаю что это было, но обнуленные padding и margin для всех элементов так же не выправляли проблему.
img - одиночный элемент, смысл назначать ему position: relative - всё равно в него другие элементы не вставишь.
img или background - решать вам, я лишь написал почему img плохо.
img - одиночный элемент, смысл назначать ему position: relative - всё равно в него другие элементы не вставишь.
Э... Вы шутите или и правда не знаете что основная цель position:relative не в том, чтобы изменять координаты отсчёта для вложенных элементов. Иногда так бывает, что какой-то блок или картинку нужно сдвинуть относительно её позиции в основном потоке. Вот для этого и делаются
<img style="position:relative; top:10px; left:10px;" />
К тому же местами противоречит сама себе - сказать, что сверстаное валидно и кроссбраузерно, но при этом в объяснении почему плохо "глюков немеряно". Так глючит или все-таки не глючит? :)
И, имхо, намешано все в кучу. Например, есть сайты, которые вообще нет смысла открывать без картинок - чисто имиджевые.
Опять таки, не сказано, как "правильно" сверстать, то что по стандартам и семантике в ИЕ нельзя сверстать в принципе...
С размерами шрифтов - таже байда. На имеджевых сайтах размер шрифта должен правильно соотносится с картинкой. Для информационных сайтов - совсем наоборот. К тому же все нормальные браузеры давно чихать хотели в чем там у вас задан размер.
А то что ИЕ.3.0 так не умеет - так это его проблемы. Человек с плохим зрением - пользуется нормальным браузером с произвольным увеличением текста, а не таким, который посчитали достаточным разработчики ИЕ.
валидно и кроссбраузерно неравно качественно
16-кратная вложенность блоков не делает страницу невалидной, хотя это явная недоработка.
Валидность можно сравнить с проверкой орфографии в вёрде — можно написать глупость, но зато без ошибок :)
про «глюков немеряно» в float:left расскладках
При поддержке такой вёрстки сталкиваешся с её непредсказуемостью, особенно в IE, которому очень тяжело обрабатывать такое кол-во плавающих элементов. Хаками и другими грубыми действиями её удаётся привести в чувства, но она неправильна изначально. Зачастую такие сайты первоначально проверяли в IE6, а потом через
html>body #someelement {}
приводили внешний вид в FF к запланированному.Опять таки, не сказано, как «правильно» сверстать, то что по стандартам и семантике в ИЕ нельзя сверстать в принципе…
про это много хороших статей есть, достаточно в меру использовать hasLayout и одноразовые expression.
Например, сайт без картинок - звучит глупо в отношении фотосайта. Так же как возможное открытие его с мобильных устройств.
Откуда вообще взялось вот это понятие про мобильные устройства? Мобильные устройства уже давным-давно умеют открывать полноценно "большие" сайты.
А если уж делать версию для мобильных устройств, то тогда уж делать полностью другую "шкурку" специально разработанную под мобильные устройства, а не тот нечитабельный кошмар, который получается при описанных выше раскладах - пример - http://ljmob.ru/
Разные версии для разных устройств - это презентационный подход. Это лишние расходы. Надо сразу делать нормально.
Ну когда же вы уже поймете, что комбайны хуже ускоспециализированных вещей!
Сделать так чтобы выглядело хорошо и в мобиле текстом и в браузере - нереально, не делая разных версий. В при просмотре в браузере должно быть море необходимых вещей, которые в мобиле будут только засорять и без того мелкий экран - дублирующая навигация - пэйджер вверху и внизу списка, куча копирайтов, хлебные крошки и т.д. и т.п. Если делать усреднное - то скорее всего получится и там и там говно. В браузере будет неудобно потому, что много будет не хватать, а в мобиле будет куча лишнего.
Сделать так чтобы выглядело хорошо и в мобиле текстом и в браузере — нереально, не делая разных версий.
Если это не можете сделать вы. это не значит что это нельзя сделать. Можно. И очень даже легко.
и до сих пор не заметили как можно преподнести "большой" сайт на маленьком экране? :)
>Можно. И очень даже легко.
Примеры в студию!
там есть доп. ссылка "к навигации"
а вообще на мабиле будет хорошо отображатся любой семантически качественно сделанный сайт:
http://www.webmascon.com/forum/viewtopic…
я ни слова не сказал, что нельзя сделать так, чтобы хорошо отображалось.
я говорю о нормально представлении инфрмации.
вот то, что там отображается - эту простыню из кучи текста, ссылок на форум (который в таком виде, кстати, не читается, километровый копирайт, куча счетчиков и т.д. - никто просто читать не станет - оно не подготовлено для того, что бы его читали. (это если смотреть с просто отключенными стилями).
Но я пошел дальше - я открыл этот сайт с мобильника (Nokia 5300 XpressMusic) встроенным (x)HTML-браузером.
То что оно начало мне качать что-то очень долго это один вопрос - текст появился и я даже начал проматывать в надежде на удивление) Но промотав процентов 5 от всей простыни, телефон выдал окошко, что ему надо что-то срочно догрузить. Секунд через 30 мне начало выдавать какую-то бесформенную хрень с кнопкой "регистрация" - а все остальное уползло за край экрана.
И все продолжало и продолжало что-то грузится. В этом месте мне надоело и я отрубил связь, так и не узнаю будут ли мне грузится счетчики, ссылки на форум, облако тэгов, ваши партнеры и другие абсолютно необходимые мне, человеку зашедшему на сайт по тарифам доллар за мегабайт, вещи.
Скажете - используй ява-браузер? Так явабраузером я могу и весь сайт посмотреть - выбрав нужный мне кусочек и не тратя при этом кучу трафика.
В общем, если вы действительно полагаете, что это сайт оптимизированный под просмотр на мобильных устройствах - то дальше и говорить собственно не о чем... :(

с мобилки будет результат почти 1:1 как если просто выключить стили - это легко можно сделать в современных браузерах. в Опере даже есть специальный режим: Вид - Небольшой экран (Shift-F11) - он отобразит сайт как если бы он был открыт мобильным устройством.
Остаётся лишь структурированный контент - заголовки, абзацы, списки, иллюстрации (не презентационные) и т.д.
А как у вас отобразилось, что вы говорите о неподготовленной простыне?
Я проверял сайт именно обычным встроенным в обычную мабилу браузером. Ещё старым древним телфоном SE K750 - всё отлично, результат почти 1:1 как в Опере в режиме эмуляции. У вас на Нокии обязан быть такой же результат.
Это как в старой шутке -
"- Акулы в Черном море не водятся!
- Это ты им расскажи - они об этом видимо не слышали". :)
Что-то в роде того.
Я не знаю - может у вашего телефона и такое разрешение как показано на картинке и все так же красиво выглядит, но у моего - стандартное разрешение 240х320. При этом все выглядит далеко не так радужно.
А что там ниже куда недоскроллено? не кнопочки ли рейтингов?
И не ссылки ли на форум, который даже так не "складывается" в тексте?
И нужно ли мне каждый раз качать эти 30КБ (или сколько там) с текстом, который я уже сто раз прочел, и минуту скролить вниз чтобы добрать до меню? В чем вообще смысл открытия этого сайта на мобильном устройстве?
если на вашем телефоне так происходит, возможно он пытается загрузить сайт считая себя полноценным браузером? т.е. применяя те же css-стили что и desktop, а не те что написаны для мобильных.
я смотрел в ОпераМини - она грузила 13 кб траффика! в два раза меньше чем весит просто html страница, без иллюстраций (пусть они и маленькие, но всё же) и css!
на экране - только информация, всё аккуратно. структурированно и ничего лишнего.
Именно поэтому можно смело утверждать, что статья сырая. Т.к. качество верстки нужно оценивать не только и не столько по описанным выше параметрам. Гораздо важнее - соблюдение красивых отступов, дублирование флешей, простота в управлении, соответствие задумке дизайнера и много другого, о чем в статье ни слова.
Посылаю автору лучи уважения и одобрения прямиком в карму.
Меня бесит излишняя самоуверенность автора в том что он пишет (именно так а если иначе, то верстальщик лох и гавнюк), этакий судья, нашелся блин... Мы тоже не лыком шиты.
Вы правы в том, что автор действительно не смог не задеть вашего самолюбия, однако если взглянуть на материал прагматично, то даже обиженному там есть с чем согласиться =)
http://webpagesthatsuck.com/does-my-web-…
Автору - сто плюсов в карму.
несмотря на дробные значения получаются размеры почти 1:1
что до точного соответствия psd, то Вадим Макишвили на UA WEB советовал увольнятся из фирм где требуют точности в 2px вместо семантики :)
ну я о к примеры промеружках между абзацами и т.п. Замерял один раз интервал между ними, установил в css.
А по поводу увольнятся, он имел в виду то, что такая работа останавливает верстальщика в развитии, что нужно идти туда где это оценят, такие люди нужны.
а вот текст - это и ошибки округления (на каскадах em), и интерьяж, и дизайнер - он же не робот, чтоб расположить все тексты точно как они должны были бы рендерится...
но и это можно править, если нужно - даже стилями для конкретного браузера... правда неинтерестно это уже... но проблем с этим при семантической верстке - нет.
отсюда: http://designformasters.info/posts/70-ex…
IE 5.0 — 7.0, Opera 8-9, FF, Safari — понимают. Какие непонимают?! И как задавать интерльяж для тех что «непонимают»?
Да и нах указывать «font-size: 75%»?
чтобы неиспользовать дробное значение в body.
Вам потом удобно будет размер шрифта по каскаду считать?
высота 14px в em = (14 x 0.8125)/13 = 0.875 (0.8125 — это 13px а не 12 :p)
размер в html задвётся чтоб пивести 1em = базовому размеру шрифта
а как вы зададите размер шрифта для таблиц? (иначе заглючит в IE5)
вложенные элементы будут всё уменьшатся и уменьшатся, у вас-то не 1em.
Вижу очень много недостатков, невижу достоинств.
- Коли ставите критерии качества, то и ставьте цену этой работы. А то люди начнут думать что классную вёрстку с микроформатами можно приобрести за $20 с макета
- Жёстко вы:
body-size {font-size : 1em}. Корневые элементы исчисляют em относительно начальных значений, которое для font-size- medium, и в разных браузерах этот medium вполне может быть разный, поэтому как раз у body или html надо указывать абсолютную величину, а не относительную и, пожалуй, лучше всего в pt. - Здорово что вы дошли в семантике до микроформатов… Может стоит разделять не только стили от содержания, но и скрипты? и вместо
писать<a href="policy_contact.html" target="_blank" onclick="DoWin(this.href,360,440); return false;">Refund Policy and Contact Information</a>
и уже в скриптах, вынесенных отдельно, объявленные среди head<a href="policy_contact.html" target="_blank" id="heh">Refund Policy and Contact Information</a>
document.getElementById («heh»).onlick=«DoWin (this.href,360,440); return false;»
Отличная статья, но в некоторых местах нарушено общий стиль изложения и заставляет перечитывать место по несколько раз, например про:focus, когда везде пишете как надо и как не надо, там «продалжая тему недоступности», причём без пояснения как везде
спасибо за дополнения!
В Опере исправил всего одну настройку- Web page normal text: вместо 16 поставил больше (30 вроде). Вот что стало с вашим (?) сайтом, вот что стало с хабром. Всему вина
К примеру, у пользователя проблемы со зрением и он увеличил размер основного шрифта в браузере, а тут кому пришло в голову задать его в абсолютных единицах.
Конкретнее:
>> Плохо: div class="info"..., Хорошо: div class="hentry"
инфо всё таки человечней звучит, не правда ли?
и ещё этот момент (я мелочный, наверное):
>> span class="adr work"...span
неужели формализм в вёрстке действительно требует форматирования КАЖДОЙ строки адреса? мне кажется, что приведённые основания (помощь роботам и быстрая и лёгкая отдача информации браузерами) слишком общие.
я правильно понял, описания типа a.footer права на авторское признание не имеют?
таких пуристов побольше и любой холодильник acid-тест проходить будет:):):)
инфо всё таки человечней звучит, не правда ли?
а можно ж объединять :)
class="info hentry"
неужели формализм в вёрстке действительно требует форматирования КАЖДОЙ строки адреса?
требования формата hcard - ничего не поделаешь. А с другой стороны - как же ж ему разделить адресс на составляющие если мы не подскажем? Вообще же эти дополнитеьные стили бывают очень удобны - в футере редко пишутся полные контакты фирмы, поэтому можно в hcard вынести всё, а ненужное скрыть для отображения.
если сайт действительно ориентирован на слепых пользователей, то конечно aural, braille, embossed можно определять, но и без них сайт будет хорошо читаться даже в браузерах (а таких большинство), ничего не знающих про эти media типы.
тоже самое tty и tv.
кстати говоря: onclick как инлайн атрибут это ппц (с), а у вас он есть в разделе «как надо».
Так что в 90% достаточно просто нормальной блочной верстки под конкретный дизайн. Отсюдаже в 90% случаях потом проще будет переверстать частично или полностью при изменении дизайна, расширении и т.п.
Я согласен со статьёй - но не со всеми её пунктами: валидность ради валидности и семантика ради семантики - это порой похоже всё-таки на параною.
Выше написали много указаний, я напишу ещё один: хозяину сайта порой глубоко фиолетово и психологически далеко до разницы между «i» и «em», «b», «strong» и «dfn» - он пишет текст в визуальном редакторе, для него разница между WYSIWYG и MSWord/OFWrite должна быть минимальна, а исходя из пользования этими программами пользователь знает только несколько кнопок: К, Ж и пр. Если человек на той стороне писать ДОЛЖЕН писать галимый html... это уж, извините, неверно: люди, которые не знают языка разметки - и не должны о нём задумываться.
Я, конечно, понимаю, что таких пользователей нужно "загнать в рамки" немного, но всё же не "заставлять дворника шить сапоги".
Знаешь теги del, ins, dfn, tt и разницу между blockquote и cite? :) Разница зыбка при отсутсвии дзен-философии вёрстки:)
P.S. Есть у меня подруга в Москве, которой поручили заниматься сайтом. Девчёнка крайне сообразительная, но разметка - не её конёк. Постоянно звонила с вопросами, как лучше и правильнее оформить - и порой проверял её заполнения. Как-то раз просто объяснил смысл "заголовок1-заголовок2-текст-заголовок2-заголовок3-текст" на примере книги - всё сразу встало на свои места. Примитивно, но всё же. Больше и не нужно. Пока что. А потом время покажет.
Неуниверсальные глобальные стили базовых элементов
...ul li {margin: 0; padding: 0; list-style-type: none}
Это случаем не про reset css? (Крайне удобная штука, если чутка подогнать под свои нужды)
Еще непонятно (тут уже о затаратах времени, не всегда обоснованных):
с устаревшими браузерами (IE5.x);
Забыли про четвертый ;)
с физическими ограничениями (в первую очередь это слепые пользователи)
Часто можно встретить сайт, с учетом того что он будет корректно отображаться при выводе устройствами, использующими Шрифт Брайля?
Логичнее предложить что у пользователя уже есть user css специально настроеный под его личные нужды.
Заметка хорошая, есть полезные вещи, но все-же пусть останется за Маяковским определине "что такое хорошо и что такое плохо" ;)
в чём штука с ul-li
когда сайт сдан, правки текстов как правило происходят из визига в админке.
Вот контент-менеджер вставляет список - а он неотображается как список! Потому что верстальщик обнулил базовый стиль, и создал специальный класс для списков! Контент менеджеру теперь html учить и в код лезть чтобы список добавить?
поддержка IE5.x обычно занимает один час (переопределить width и height на основании traditional box model, т.е. width = width + padding + border)
Поддержка IE4 - это всё равно что поддержка 78-го бензина - пустая трата времени и сил.
про слепых
у нас в городе недавно на одной улице поставили говорящий светофор: "переход разрешён"/"переход запрещён"... а ведь у слепых уже есть палочка (user-css).
Да и подправить под свои нужды никто не мешает.
А по поводу очень больших проэктов с привалирующим JS и проч. для IE5 мало того что потребуется отдельный стилевой файл, но гораздо больше времени, чем час.
Отлично! Одна из лучших статей на Хабре за последнее время.
Дальше, да надо заботиться о людях со старыми браузерами (во вском случае, пока такие люди составляют какой то существенный процент), но, опять же имхо, отключенный javascript - это проблемы исключительно юзера, или его админа. И мне совсем не понятно при чем тут слепые (я вообще не понимаю как они могут пользоваться компьютером).
про JS согласен, а вот под "слепыми" понимаются, конечно же, не полностью слепые, а люди с сильным ухудшением зрения. Для них нужен черный фон и большие светящиеся шрифты, нужен высокий контраст.
<li></li>
и для списков имеют первостепенное значение.<li> и <dd>
Совершенно не имеет разницы, подчеркнуты или нет. Ссылку и без этого можно отлично обозначить.
На Хабре, кстати,тоже не все ссылки подчеркнуты.
Ссылку и без этого можно отлично обозначить.
жирную сделать? — а как же strong
наклонную? - а em?
Цветом? — какой нибудь span например
Также использовал раньше dl-dt, но отказался потому, что если они для этого не предназначены(а задуманы они для семантики типа FAQ: вопрос - ответ), то для себя решил, что не надо их там писать.
Уберите мат из текста(на детей может это и произведет впечатление, но у людей, уже знающих о чем текст, вызовет максимум кислую улыбку), и символы вроде копирайта все-таки писать нужно в html-эквивалентах & copy; .
PS я не минусовал :)
Так что я рекомендовал бы не читать или игнорировать именно этот блок статьи, который построен автором исключительно на эмоциональном отношении к ошибочному рендерингу некоторыми браузерами некоторых частных случаев float, но никак не на логике или понимании технологии float.
Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist.
http://www.w3.org/TR/2007/CR-CSS21-20070…
Что такое настоящее изъятие из основного потока вы можете прочитать (и наблюдать своими глазами в браузере) на примере position:absolite.
По сему рекомендую меньше придираться к букве и больше прислушиваться к духу рекомендаций W3C. Тогда возможно вы перестанете излишне эмоционировать по поводу поведения float и сможете сформулировать более точные рамки применимости этой технологии (как это вполне удачно получилось у вас с другими технологиями в этой статье).
Cама коробка блока, следующего за float'ом, подлезает под него и занимают всю ширину потока, а вот текст внутри этого блока смещается в сторону и обтекает float.
Вот спецификация на русском:
"Верхняя часть перемещаемого блока выравнивается по верхней части текущего линейного блока (или, в случае его отсутствия, по нижней части предшествующего структурного блока). Если в текущей строке недостаточно свободного места для перемещаемого объекта, то он последовательно, строка за строкой, перемещается вниз до тех пор, пока не найдется строка, в которой для него найдется достаточное количество места.
Т.к. перемещаемый объект не принадлежит потоку, то вертикальное передвижение непозиционированных блоков, созданных до и после него, будет осуществляться так, как если бы он отсутствовал. Линейные блоки, следующие непосредственно за перемещаемым объектом, укорачиваются, чтобы освободить для него место. Содержимое строки, находящейся перед перемещаемым объектом, выводится заново с другой стороны от него в самой первой доступной строке."
Можете пример написать - увидите.
Верхняя часть перемещаемого блока выравнивается по верхней части текущего линейного блока
То есть переводя с русского на русский ваш float-блок ориентируется на линейный блок, находящийся в основном потоке и сдвигается вместе с ним при пересчёте основного потока. Это говорит о присутствии в основном потоке. Просто привязка блока идёт не к предыдущему inline-элементу, а ко всей строке. А то что float-блок перекрывает следующий контейнер это специальное исключение из правила, которое введено для улучшения отображения. Это не делает элемент исключенным из основного потока, поскольку его положение жёстко привязано к основному потоку, хоть и по другим правилам.
Это не делает элемент исключенным из основного потока, поскольку его положение жёстко привязано к основному потоку, хоть и по другим правилам.
Если абсолютно позиционируемому элементу не указывать top то он тоже ориентируется на текущий линейный блок, получается тоже в основном потоке?
Другой пример: блок позиционируется относительно элемента находящегося в основном потоке, получается его положение тоже зависит от основного потока и по вашей логике этот элемен не является исключенным из основного потока, потому что его положение жестко привязано к основному потоку.
Это все к тому, что из зависимости положение элемента от основного потока не следует, что он присутствует в основном потоке.
float нужно использовать для раскладки колонками например, но не для того чтобы поставить три картинки вряд и т.п.
Задача это статьи была рассказать про ошибки, дать методы исправления где это легко. про "правильную верстку" - это уже отдельная статья.
Поэтому, все используют float как раз для того, чтобы "поставить элемент слева или справа"
чтобы поставить элемент слева или справа есть margin-right: auto и margin-left: auto
inline-block в мозилле
display: -moz-inline-box; display: inline-block;
float нужно использовать для раскладки колонками например, но не для того чтобы поставить три картинки вряд и т.п.
Ок, какими средствами вы ставите три картинки в ряд? Больше всего интересует ситуация когда картинки должны быть с подписью.
просто три картинки в ряд:
<p>
<img />
<img />
<img />
</p>
где img - inline-block
три картинки с подписью:
<ul>
<li>подпись №1</li>
<li>подпись №2</li>
<li>подпись №3</li>
</ul>
PS последний пример надеюсь не относится к картинкам контента, а только к презентационной графике, я полагаю?
я не призываю НЕиспольозовать float. Это великолепное свойство. Я призываю использовать его с умом, а не для того чтобы переламывать сткруктуру документа под себя.

Надеюсь натолкнул вас на мысль о пересмотре своего отношения к float. Ещё раз замечу, что дело не в "использование float для всего", а в том, что предложенные вами варианты похожи на неоправданную перестраховку человека, который так и не научился пользоваться этим свойством и потому решил его избегать.
Вы именно призываете не использовать float так, как он правомерно может быть использован.
т.е. по-вашему ставить каждому блоку float правомерно?
тогда всё ясно, дальнейшая дисскусия бесмысленна.
перестраховку человека, который так и не научился пользоваться этим свойством
я уже сбился со счёта какой раз повторяю вам о чём речь. вы увы непонимаете.
прочитайте ещё раз мои посты - я говорю о разумном использоваии и семантике.
насчёт рекомендации читать документацию
я её в отличии от вас читаю, и не пишу глупостей вроде того что float не винимает элемент из потока.
Я ни разу не спорил о РАЗУМНОМ использовании float. Но увы, вы ни разу не продемонстрировали его. Ваши примеры во некоторых случаях недопустимы ничуть не меньше, чем таковые бывают с float (и честно говоря вы не продемонстрировали чем 3 картинки float в ряд хуже). Вы не затронули, что inline-block привязан к тексту в контейнере и вы, "избегая глюков float" рискуете наплодить новые при решении элементарных задач.
Хамить пожалуйста не надо. Тут культурная дискуссия.
примеры когда float хорошо - колонки, врезки, картинки с обтеканием, галлереи (вместо картинок в таблице) и т.п.
если вам нужны доказательства моей профпригодности то вот: http://www.webmascon.com/forum/viewtopic…
там и хорошие примеры float есть) я его не боюсь, я знаю что это, и умею использовать.
если и вы и я согласны что float для всего - плохо, а там где надо - хорошо, тоо чём мы вообще спорим?
В вашем профессионализме я не сомневался даже тогда когда обвинял вас в непонимании некоторых аспектов документации.
Я не согласен обсуждать "float для всего". Как я уже заметил, не мыслю такими категориями и мне необходима конкретика. Может так статься, что мы говорим об одном и том же, а может и нет, но за вашим обобщением это не понятно.
речь о неразумном использовании.
примеры можно глянуть на сайте фри-ланс.ру, я брал оттуда почти все примеры.
А между тем в стандарте ничего не сказано ни про многоколоночную вёрстку через float, ни про недопустимость выставлять "картинки" в ряд при помощи этого float. Пока всё выглядит как не подкреплённые фактами домыслы.
тут нельзя написать волшебный код который всё исправит. для каждого макета - своя вёрстка. это только при презентационном подходе всё одиноково - раньше было:
<td></td>
, теперь - <div></div>
тут я аппелирую к здравому смыслу, нельзя дать список "идеальных" решений, но можно направить людей к самообразованию и повышению скила.
для иллюстративных картинок есть inline-block (иллюстрация - часть текста).
<div>
<img />
<img />
<img />
</div>
где img - float: left, div - overflow: hidden
для каждой вещи - свои решения. я не против float left. я против бездумного его применения.
Почему такие статьи постоянно претендуют на абсолютизм в мнениях?
Да ещё используется в некоторых местах не нормативная лексика!
Статья похожа на техническую - зачем добавлять элементы манипуляции читателями?
Почему бы мне доверять автору, написавшему ещё один, хотя и большой, но явно не имеющий оригинальных "открытий" пост?
За что статья получила такое большое количество "плюсов", наконец?
http://webo.in/articles/habrahabr/02-del…
Ну а жесткий категоричный тон в данном случае, надеюсь, не будет помехой для людей мыслящих, чтобы воспринять ценные крохи информации.
Во-вторых, если у меня будет выбор между ускорением загрузки 99% пользователей с нормальными браузерами и ускорением загрузки 1% с мобильными я выберу первое.
В-третьих, обычно размер страницы много больше, чем размер CSS-файла.
В-четвертых, при gzip-сжатии для мобильных браузеров мы получим проигрыш в 7-10Кб кода, что совершенно допустимо.
В-пятых, наконец, мобильное устройство также будет грузить все файлы стилей, ибо в любом из них может быть импорт каких-то файлов или свойств, влияющих на отображение :) Т.е. оно может так и не делать или сначала грузить специфический файл и показывать страницу с ним, но это уже останется на его совести.
Однако, было бы хорошо провести тесты для мобильных устройств в этом плане, что-то мне подсказывает, что ситуация здесь не изменится ну никак.
Раздельные css с разными media только помогают загрузке, а не увеличивают число запросов и трафика, как вы предположили.
webo.in/tmp/css-includes-testing.html
заходим и тестируем, сколько влезет.
Из того, что получается: Firefox (2), IE (7) грузит все, Opera грузит все, но показывает по мере загрузки (поэтому не удается отловить, загружен ли файл тупо по задержке JavaScript). Safari (единственный!) не загрузил handheld
Смотрел по логам сервера и YSlow.
Если кто подскажет, как можно проверять, загружен ли CSS-файл или нет (кроссбразуерно, подчеркну!) буду очень признателен
Исправьте, пожалуйста. Незакрытый тег глаза мозолит.
delka@ideus.biz
Исправьте пожалуйста.
И спасибо вам за хороший материал.
<a href="картинка" target="_blank">превью</a>
про GreyBox
особенно поржал над "если у меня сели батарейки в мыше".
а если у тебя руки из задницы растут что мне делать?
читать неприятно.
на самом деле, все просто - связь контента с его назначением (это тег, имя автора, мнение и т.д.)
<li><a href="expert_inner.html">Спроси сомелье</li>
Вы специально <a> не закрыли?
Описанные внизу примеры совершенны логичны и правильны. Не знаю таких кто по другому делает. Да и вообще заказчикам надо обращаться в фирмы пользующуюся доверием и смотреть визуально на результат.
Если есть цель то нужно сделать максимально удобно и эффективно, если нужно оптимизировать под СЕО значит надо оптимизировать и так далее. Конечно есть хороший тон. И в частности я его придерживаюсь.
Не очень понял следующий момент:
Предметом бухгалтерского учета чем стронг то не угодил?
Предметом бухгалтерского учета это курсив для новых терминов связь не очень уловил.
В общем очень правильное высказывание насчет того что нужно думать головой :), если требуется неординарные вещи то после обдумывание многие пункты нарушаются это же не значит что верстать не умеют просто того требовала ситуация.
Итак подведу итог чтобы определить заказчику хорошая верстка или нет нужно посмотреть не разъезжается ли она при увеличении шрифта (без перегибов естественно). Этого вполне хватает. Плюс конечно следование макету и ТЗ а все остальное это к теоретикам, надо деньги зарабатывать а не сидеть думать поставить див или h2
Это, кстати, было на реальном проекте.
Два — это трафик. В сложных проектах CSS-файлы для IE получаются довольно большие. Зачем отдавать пользователю на FF то, что ему нафиг не нужно?
Ну и ещё один вывод — заниматься вёрсткой на всех этапах должен если уж и не автор, то хотя бы человек, достойно в ней разбирающийся. И тестирование всех изменений в самом массовом браузере — про это даже глупо упоминать.
2. нужно реиспользовать код. в частности - выносить некоторые фиксы во внешние компоненты (png.htc, например). в целом, всегда можно достичь разумного компромиса.
3. зачем делать сложно, если можно делать просто? ;-)
Имхо, делать нужно не просто и не сложно, а оптимально. Я считаю оптимальным отдавать код, написанный только для этого браузера, только этому браузеру.
<p class="data">January 5, 2006</p>
не data, а date
все-таки это дата, а не данные.
а можнете подробнее рассказать как правильно расставлять теги h1-h6?
Вместо <div id="logo"><img... вы советуете <H1>
Например есть сайт информационного агенства, в header я ставлю тег h1. Тогда при выводе списка нововстей все заголовки новостей должны быть уже h2? А при просмотре конкретной новости тоже h2?
или без for ?
если for вот это действительно ошибка, это просто не удобно, лично я уже привык тыкать на название поля и попадать на него же.
Автору статьи респект, пару моментов здесь нашел и про себя, буду исправляться =)
З.Ы. Батюшка в очередной раз научил правильно молиться и надавал по рукам за святотатство...
;)
Если я браузер, я потяну по http только тот файл, который обозначен как media="screen"…
Насчёт первого способа всё ясно, а вот у второго есть сомнительная пометка, что «это и более элегантное решение с точки зрения уменьшения запросов к серверу» — что звучит несколько странно, поскольку запроса всё равно будет два и оба файла загрузятся.
объясните зачем в конце нужен "return false"?
<h1>Пинтагон<a href="index.html"></a><span></span></h1>
Отключаем стили, теряем ссылку на главную Печально Было бы разумнее
<h1><a href="index.html">Пинтагон<span></span></a></h1>
и позиционировать уже так. Хотя есть спорное мнение, что логотип семантически более верно представлять картинкой с альтом. А так всё здорово, хотя мне ближе стиль вёрстки, как на badoo.com.
если убрать его потом text-inden'том - теряется смысл - при отключенных катинках не будет видно текста.
Можно добавить в
<a></a>
что-то вроде "на главную", но имхо не очень красиво.<h1><a class="logo" href="index.html">Пинтагон<span></span></a></h1>
.logo { display:block; position:relative; width:300px; height:150px; }
.logo span { position:absolute; left:0; top:0; width:300px; height:150px; background:url(../i/logo.png) 0 0 no-repeat; }
Разумеется и здесь текст может «выползти», при неразумном использовании, но уже куда юзабельнее.
если в нём есть текст - он отобразится поверх графики
если текст скрыть - его не будет видно без картинок
span тогда перекрывает ссылку. в IE перестаёт работать и в принципе это логично - над ссылкой же находится другой слой, некликабельный.
<a href="#">такая-то компания <big>ХРУМ-ХРУМ</big><span><!-- here goes logo! --></span></a>
Единственное, что нужно не забыть сделать - поставить cursor: в hand и pointer для span, просто для того, чтобы эта рука появлялась. Но ссылка работает - только что проверил.
А что клиент всегда прав расскажите врачам =)
Не соглашусь с тем, что проверять надо с отключенным JS - если сайт изначально пишется как динамический и все такое, то АБСОЛЮТНО никчему проверять его с отключеным js - он не должен и не будет работать. Если у пользователя отключен js и он заходит на такой сайт - его право.
Другое дело если сайт подается как кроссконтентный - тогда да, вспомогательная навигация на js может отпадать.
Что касается верстки DIV-ам или же TABLE - я считаю что использовать надо СОГЛАСНО задаче, а не потому что TABLE плохо, а DIV - хорошо. Зачастую DIV-ный дизайн является картиночным, т.е. если потребуется потом сделать гдето резиновость или же добавить какойто блок - разъедется очень много элесентов в отличае от TABLE-дизайна. Какой выбирать - авбирать Вам ) Если сайт - это визитка - тогда можно div, если же сложный портал с большим количеством неупорядоченного контента - я бы не советовал - ну да это мое ИМХО.
Да-да, надо учиться, учиться и еще раз учиться. ппц он не только у плохих верстальщиков — он прежде всего в голове тех, кто учит других.
кто будет указывать единицу измерения для высоты строки?
> Отсутствие структуры или вообще отсутствие как таковых h1,h2,h3…
нумерованные заголовки - это вообще несусветная глупость.
емнип, в xhtml2 повился просто тэг H без всяких цифирок.
во многих случаях эти заголовки забиты в сырой хтмл, парсить его каждый раз или дробить документ по главам в релационной бд - слишком накладно.
> Вместо: [a href="expert_inner.html"][img alt="" src="img/splash/expert-menu-01.gif"/][/a]
> Надо: [a href="expert_inner.html"]Спроси сомелье[/li]
> Но как?! Читаем про LIR и Pixy.
а может ты лучше почитаешь про аттрибут alt?
> Плохо: [div class="copy"]2007 — 2008 © Строительная компания «Меридиан»[/div]
> Хорошо: портянка на десять строк
думаешь твой vcard на _каждой_ странице кто-то оценит?
а микроформаты - это вообще идиотизм. у каждого микроформата свой микроформат, каждый нужно по своему парсить, можно запросто породить конфликт (в том числе и между разными микроформатами), не зная микроформата новый верстальщик не сможет определить используется ли данный класс только для наложения стилей или ещё и для указания "семантическим роботам", хтмл неимоверно раздувается.
кто будет указывать единицу измерения для высоты строки?
RTFM, высоту строки можно указывать без единиц, только в этом случае она будет рассчитываться иначе — line-height: abnormal
нумерованные заголовки - это вообще несусветная глупость … парсить … каждый раз или дробить документ по главам в релационной бд
Мы по-прежнему говорим про вёрстку? Парсинг и БД — это проблемы других людей. Наша задача — качественно и аккуратно сверстать, чтобы страница не была куском беспомощного текста, который обёрнут в гениальный дизайн, а была полноценным документом. Если это не аргумент, то подумайте про SEO.
а микроформаты - это вообще идиотизм
Для использования микроформатов есть свои цели. Если они вам не интересны — не используйте их. Дел-то…
спустись с небес на землю. свёрстанный макет всегда содержит правильную структуру заголовков. проблема в том, что её сложно технически поддерживать на _живом_ сайте. да и не нужно это никому, кроме евангелистов.
тех же целей можно достичь и без идиотских микроформатов. и уж точно не стоит их пихать где только можно, как предлагает автор.
указание единиц измерения по любому хороший тон
Вы не просто не уловили, вы не поняли. Может для
opacity: .5
тоже стоит указывать единицы измерения?правильную структуру заголовков … сложно технически поддерживать
Если редактор не идиот, то он сможет понять, как H3 хотя бы визуально отличается от H1 и не натворит глупостей.
тех же целей можно достичь и без идиотских микроформатов
Ну, давайте — расскажите мне как разметить адрес так, чтобы он не был просто массивом символов, а был разбит на значимые элементы. Зачем? Плагины и поисковики.
для разметки текста существует замечательный формат - XML. для указания семантики - RDF. а для совмещения различный словарей - XMLNS.
не вижу смысла изобретать велосипед, снова и снова набивая шишки с конфликтами, валидацией, парсингом и тому подобными вещами.
1. Пользователи с отключенным JS составляют около 0.2-0.3%. Кроме того, с помощью <noscript> можно вежливо попросить включить JS, иначе юзабилити сайта может пострадать. Как-то так.
2. Пользователи с браузером Microsoft Internet Explorer 5 составляют 0.51%. Сколько из них боты/пауки — остается только догадыватся.
3. Пользователям "с отключенной графикой" выводится совет-предупреждение, что сайт без графики может оказатся некрасивым. Пользователь сам выбирает как ему смотреть на сайт. В конце концов, если пользователь решил смотреть на сайт без графики, и/или без JS — это его
4. Как надо на самом деле:
* {margin:0;padding:0;}
body {
background-color: #FFFFFF;
font: normal 14px/1.4 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif;
}
5. Вкратце. Если вы выйдете среди зимы на 30-градусный мороз без одежды — природа не обязана сделать так, чтобы вам было тепло или хотя бы сносно в таких условиях. Вы просто замерзнете. Это ваш выбор, ваше дело, ваши проблемы. В данном примере природа — верстальщик. Одежда — css/js/images.
Не требуйте противоприродных вещей там, где они не уместны.
3. Сайт без графики имеет одно маленькое преимущество: на мобильных браузерах он может просматриваться в оригинальном виде. Практически без затрат верстальщика на это.
5. Об этих вещах задумываются при серьезной разработке (не каждый сайт; обычно крупные порталы (а не то, что сейчас принято ими называть)) В этой ситуации многое из топика экономит время на создании и особенно поддержке.
Но требовать этого для всех серьезных работ действительно неуместно.
http://www.w3schools.com/tags/ref_byfunc…
— Вложенные элементы — это далеко не всегда плохо — например, если по дизайну требуется несколько фрагментов фона, то на каждый из фрагментов в условиях невозможности использования множественных фоновых изображений необходим свой блок. Такими блоками могут быть и структурные элементы, однако в универсальной вёрстке это далеко не всегда возможно.
Ваш же пример, скорее, иллюстрирует болезнь типа classities, при которой каждому элементу назначаются избыточные классы, когда, в частности, можно было бы использовать контекстные селекторы — это проблема совсем другого характера.
— На мой взгляд, микроформаты в настоящий момент — не более чем добрая воля энтузиастов, имеющая мало общего с качественной вёрсткой как таковой. Есть время/желание/необходимость — используйте микроформаты; не используете — качественная вёрстка от этого не перестаёт быть таковой. Микроформатам, кстати, тоже в значительной степени свойственны признаки classities, в то время как реально полезны сейчас лишь считанные единицы из них — например, robots-nocontent от Yahoo!.
А вы не задумывались кто такой вообще этот Delka, можно ли эму доверять , откуда такое самочуствие ? А с CSS-ом то у автора проблемы, не все ему там понятно. Зайдите на эго сайт, посмотрите CSS, и уверитесь сами - тот кто понимает. А новичкам надо ходить на w3c.org и сайты разработчиков браузеров - а не читать самозванцев
На тон статьи мне как то все равно ... главное что хотел человек донести.
Ситуацию с float автор пояснил. Но все равно она осталось спорной.
Кто то верстает сетку через float - кто-то иначе.
Но мои пять копеек состоят в другом, у автора есть "свое личное" мнение (что весьма хорошо) по поводу того как надо ту или иную вещь верстать - но не надо подавать свое мнение как аксиому. Если Вам удобно воспринимать код в таком стиле то пожалуйста - не заставляйте других принимать ваши правила игры.
Может быть для других специалистов ваш код покажется чем то несусветным и не пригодным к редактированию?
Кто забивает на валидаторы, Лебедев забивает на доктайп - каждый делает как ему хочется. Не надо все стандартизировать - не надо говорить, что font-size: 12px это плохо (бывает не масштабируемая графика, а видеть как гигантский текст ее разваливает тоже удовольствие маленькое.)
А в целом такие статьи должны появлятся - думать это хорошо :)
<p>Quality product for SEO webmasters.</p>
<a href="#" rel="bookmark">Try it and you'll see</a>
</div>
Внутри блокового элемента смешивать блоковые и инлайн элементы не самая хорошая идея...
пишите screen с большой буквы, вот так:
Столкнулся с проблемой, что IE для Windows Mobile считает себя взрослым и подгружает стили с media="screen", чего по идее делать не должен. Со Screen он эти стили пропускает.
Контент менеджеру теперь html учить и в код лезть чтобы список добавить?
Вот неплохо бы нашему мистеру «Контент менеджеру» знать базовый язык веба. Очень было бы хорошо.
Сверстали сайт, отдали заказчику, он решил, что текст «о компании», какой то не такой и он его хочет переписать, открывает он админку и правит как ему нравится, нарушая всю структуру заголовков.
По вашим словам — верстальщик в тот же момент переводится в разряд «плохих»?
Интересная логика
Кое-что - откровенный дроч.
А в целом - согласен.
Шрифты в px и Общий CSS для всех media
это старая песня и каждый верстак решает для себя сам
если работа для портфеля, крупная, с проходняком - тогда "да", если агенство в г. Чебоксары - тогда "обойдутся"
всё равно это не оценят 95% заказчиков и 95% посетителей
а известны случаи, когда просили "вернуть обратно на px" - так удобнее править css =)
Ошибки влияющие на SEO
<h1>Trinity group</h1>
с т.з. логики - да, всё круто, это и есть самый главный заголовок
но с точки зрения сеошника, которому надо раскрутить сайт по запросу "трубы в мелитополе" твой h1 - полный отстой, и он всё равно попросит тебя переделать, и ты переделаешь
ему нафик не надо крутить сайт по названию фирмы, по нему он и так вылезет из-за title
кроме того ты перестарался и забыл про юзера без картинок - он увидит пуcтое место (и отрицательным indent'ом и большинством остальных методов)
за использования sIFR надо отрывать яйца. сразу и без объяснения причин. "клиент захотел" - конечно гнилое, но всё таки оправдание в такой ситуевние
а логотип - очень-таки логическая деталь сайта, и на него постоянно пытаются нажать...
имхо, там лучше и проще оставить картинко и div id="logo" =)
и вообще, img надо юзать для тех элементов, которые несут смысловую нагрузку и требуют альта
Антисемантика
про ссылки без текста - согласен
<div class="hr"></div>
какой же тег ты порекомендуешь на замену hr? но с т.з. логики
я сколько думал - не придумал
<dl id="t-personal"><dt>Настоящее Имя:</dt><dd>Иван Копейкин</dd><dt>Дата рождения:</dt><dd>16 сентября 1977г.</dd></dl>
а тут - бац, и одно из полей переносится в две, а то и в три строчки =)
и твой float'ный список во много строк развалился
Предметом бухгалтерского учета в обобщенном виде выступает хозяйственная деятельность предприятия
с точки зрения системы учета ресурсов и результатов финансовой и хозяйственной деятельности предприятия…
нравится, но неуниверсально
* overflow: hidden для нормальных браузеров (в особых случаях - :after с clear:both);
* hasLayout для IE.
та все этим грешат, не вижу тут криминала
главное что понимание флоата есть - это уже хорошо =)
Неуниверсальные глобальные стили базовых элементов
+1, пройденный этап =)
Это классический пример, но он досих пор встречается повсюду - большинство примеров этой статьи я взял с портфолио топовых по сумме за проект фрилансеров. После просмотра портфолио топовых страшно думать что у нетоповых :)
Фрилансеров не трожь! У них вектор правильный.
Имхо фрилансеры-верстаки принимают непосредственное участие в популяризации адекватной верстки.
Потому-что многие учатся и смотрят участки кода именно на портфелях фриланса.
Понятное дело, что не у всех там есть на что посмотреть, но некоторые фрилансеры показывают очень достойный уровень верстки.
А то ж наши вебдевы дрочат на артлебедя, а там в коде белый снег, белый песец.
А качество работ у топовых может подкачивать из-за "конвейра" - в конце концов, мы же не только за идею пашем, но и за бабки.
p.s. IE5 вспоминаешь - прикольно
"Падинги внутрь, а не наружу" (с) =)
Но на практике ценность этого навыка - ноль.
Я сам в течении года верстал все проекты под IE5 - и ни разу заказчики даже не посмотрели мои проекты в нём.
Ни разу =)
но с точки зрения сеошника, которому надо раскрутить сайт по запросу "трубы в мелитополе" твой h1 - полный отстой, и он всё равно попросит тебя переделать, и ты переделаешь
это займёт 5 минут.
h1 я как пример привёл - там может быть и другой тег, речь о том чтобы сделать текст доступным роботам и выделить его смысловое значение.
какой же тег ты порекомендуешь на замену <div class="hr"></div>
? но с т.з. логики?
обычный
<hr />
:)он прекрасно стайлится в css.
и твой float'ный список во много строк развалился
clear: left и не развалиться :)
обычный <hr /> :)
он прекрасно стайлится в css.
До тех пор, пока не потребуется задать вертикальные поля для hr
в em’ах в IE (они [поля] ведь уже будут «израсходованы» на компенсацию паразитных отступов величиной в несколько пикселов, имеющихся у hr
в IE), а в качественной вёрстке это необходимо практически всегда.
допустим для всех браузеров - 1.66em (20px при 12px базовых)
для IE - 0.583em (20-13=7px)
<address class="vcard">
© <a class="fn n org url work" href="http://www.meridy.ru/">Строительная компания «Меридиан»</a>, 2007—2008
<span class="adr work">
<span class="street-address">ул. Ленина 247</span> ·
<span class="locality">Москва</span>,
<span class="postal-code">109012</span>
<span class="country-name">Россия</span>
</span>
<span class="tel">
<span class="type">Work</span> <span title="+74957889775" class="value"> +7 (495) 788-97-75</span>
</span> ·
<a class="email" href="mailto:info@meridy.ru">info@meridy.ru</a>
</address>
Глупо и не нужно. Однако в статье есть очень хорошие примеры. Хотя в целом, лучший валидатор - это браузер, все остальное - полный бред и никому не нужно. Сверстан у меня сайт с какими-то стандартами или нет? Да насрать, если в браузере он такой же, как и на макете - это главное. :-)
Вредная верстка