Пример

Свежевыжатая мантра верна по отношению ко всем аспектам интернет-деятельности (и не только). Например, три дня назад мне достался на редизайн сайт-визитка, состоящий из 3 типовых страниц и имеющий вот такую структуру css:

Структура была взята из вот этой статьи — http://vremenno.net/html-css/progressive-enhancement-with-css/ и хороша для крупных сложносочиненных порталах, над поддержкой которого работает очень много разных людей, чей труд должен быть как-то систематизирован. Поэтому в следующий раз перед тем как применить тот или иной популярный трюк, подумайте: а не будете ли вы похожи на того водителя который, пропускает среди бела дня, мчащихся по второстепенной дороге идиотов, только потому что более опытный водитель посчитал время суток как очевидный факт. Заодно можно подумать чем все это кончится.

Я пользуюсь с равным успехом вот такими способами:

Первый:

Второй:

Мне больше нравится первый способ. Кода меньше. Но второй способ позволяет использовать картинки любой ширины.

Первой ласточкой борьбы с IE была всеобщая эйфория от семантики и стандартизации.

Откройте эту страницу – http://pokrovskii.com/misc/index.html в IE6 и любом другом браузере (оригинал страницы взят с http://anton.shevchuk.name/). Поводите мышкой по кнопкам в IE и в нормальных браузерах. Чувствуйте разницу?

Как работает:

В нормальных браузерах, у нас как водится все ажуре. Анимация и красота. В IE перестает работать анимация и выводится предупреждающий об ущербности браузера попап. После его закрытия он исчезает на 30 дней.

Я использовал уже готовый скрипт выводящего предупреждение в IE – http://upgradebrowser.org/webmasters и заблокировал исполнение скрипта анимации с помощью <![if !IE 6]>IE Conditional Comment: NOT Internet Explorer<![endif]>. Проще некуда.

Любители скупой технической информации на этом могут перестать читать. Потому что дальше я буду многословно объяснять.

Объясняю:

С IE борятся уже давно. Разумеется по меркам Интернета. Год, например, — это много.

Первой ласточкой борьбы с IE была всеобщая эйфория от семантики и стандартизации. Велись многословные форумные войны и бессмысленные холивары, хотя, я, вообще, не встречал осмысленных холиваров. Никаких… Тогда самые ярые приверженцы стандартов решили отказаться от поддержки IE. То есть совсем. Как лопатой в лоб.

Я не знаю следовали эти паладины современного интернета собственным заветам, но вот клиентам, владельцам сайтов, да и чего греха таить, многочисленным (тогда) пользователям IE, подобная инициатива пришлась не по духу. Так что ласточка не прижилась. На то время, это, мягко говоря, была плохая идея. Бредовая, ежели не смягчать.

Второй птичкой был вывод предупредительных попапов. Вроде того, что я использовал в примере, только менее демократичные. Висели, сверху такие плюмбы и глаз мозолили. Некоторые вообще под IE6 не пускали.
Не прижилось как стало видно позже. Я потом скажу почему.

Третий метод и не метод даже. Просто совсем недавно (где-то с середины 2008) многие гуру верстки настолько «огурели», что в IE посматривают одним глазком, то есть автоматом делают кроссбраузерный код. И разумеется, где-то потом, десятым числом, из-за кривых рук контент-менеджеров или на забытой всеми страничке about, вылезает баг. По себе скажу, я пользователь FF и IE запускаю очень не охотно: он медленный, страшный, нет сглаживания у шрифтов, сурсы не подсвечены, отладчиков код наплакал, а те что есть глючные, как косяк наркомана. Я даже экзешник не знаю где его, через сторонние загрузчики запускаю для отладки верстки. Но все это лишь признак того, что браузер доживает свои дни, но мы же можем ускорить процесс? Можем? Надо.

Почему попапы с уведомлением оказались неэффективны? Представьте, вы заходите на страничку, вам показывают попап, вы его закрываете и… ничего. Абсолютно ничего не поменялось. Страничка так же грузится, верстка не разваливается, анимация работает. Ну и какого лешего я должен обновлять свой браузер?

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

Вот пример, когда люди перешли с IE — http://pokrovskii.com/istoriya-o-tom-kak-proisxodit-otmiranie-ie6/. Никаких дополнительных усилий не было приложено, но механизмы мышления те же. В IE стало неудобно — ну его на фиг. Мой метод — своеобразный отказ от поддержки шестерки. Все по прежнему работает так как надо, но бонусов вам не видать.

Длинные классы зло — их труднее вбивать в строке поиска, а читать мы их не читаем

Крутой верстальщик понимает, что промосайтам чхать на кол-во тегов, для них больше важна оптимизация картинок, а на сайтах типа “чтоб было” можно выжать максимально оптимизированный код… А еще он не упирается рогом в семантику, когда не надо, и понимает, что валидность, это гарант того, что через 5 лет ваш начинающий YouTube не развалиться в супер новом браузере от Яндекса.

Очень многие, например убиваются по оптимизации кода, экономия каждый байт. Это в общем то оправдано, когда речь идет о сайте с двумя-тремя типовыми страницами, но при разработке крупных порталов, где каждая страница может иметь незначительное стилевое отличие от другой, такой подход к делу — вреден.

Отследить, как повлияет корректировка существующего правила на такой портал — проблематично. А если это еще и не ваш портал? Если вас просто попросили внести пару десятков изменений? Тот еще мозготряс.

В таком случае верстать лучше объектами или блоками (кому как нравится). Для тех кто не знаком с термином ООП, объясню понятным языком. Например, у нас есть дверь. Дверь обладает свойствами: она белая, прямоугольная и открыта. Теперь если нам надо закрыть дверь, то мы просто меняем свойство «открытая» на «закрытая». Или добавить новое свойство — «застекленная»… Довольно примитивное описание, но в целом ясно, я полагаю.

Ниже я займусь практикой. Вот такие есть у нас макеты списков в сайдбаре:

Типичный подход такой:

Более семантичный подход такой:

И наконец объектный подход

Если речь идет о двух-трех страницах то тут и говорить не о чем: первые два варианта однозначно лучше. В случае же многостраничного сайта мы скорее всего столкнемся с тем что позже центральный список надо сделать красным, верхнему заменить буллиты, и нижний, вообще удалить. В случае верстки объектами, мы просто добавим или изменим свойства без опасения задеть остальное оформление, да и удалять лишние стили при такой верстке гораздо проще… Видели бы вы как разрастается css на порталах созданных при стандартном подходе, ведь удали из css файла лишнюю строчку и страшно представить где это аукнется. В ОО верстке таких проблем нет.

Это догма.

1. Перед началом работы смоделируйте каркас работ в голове. Настоящая работа верстальщика происходит ДО того как открывается редактор. Все остальное лишь инструмент.
2. Не злоупотребляйте <div>. Чем меньше вы сможете использовать тегов тем лучше. Впрочем всегда есть исключения (Статья на эту тему).
3. Не зацикливайтесь на одних и тех же методах. Возможно именно сейчас появился более совершенный способ реализации png, закругленных уголков или чего еще. Не нашли в рунете — придумайте сами.
4. Каждый дизайнер обладает своим собственным стилем. Верстальщик тоже, просто это не так заметно. Поэтому не старайтесь копировать стиль верстки подчистую. Я например не разделяю блоки кода комментариями, потому что использую структурированный стиль написания и интуитивные id. Мне так удобно, не не факт, что это будет удобно вам. Используйте, то что вам подходит, а не то что СЧИТАЕТСЯ удобным.
5. Не забывайте про то что браузеров много. Отмазка, “у меня нет этого браузера” — смешна.

Эстафету передам Евгению, Дмитрию и Владимиру

Такая запись будет работать в IE6 некорректно. Все, что ниже кириллического комментария не будет интерпретироваться IE6. Происходит это из-за несоответствия кодировок. Повальное большинство редакторов создают css файлы, в кодировке windows – 1251, а почти все разработчики добавляют в html:

и правильно делают между прочим. Так что если вам приспичило писать комментарии на русском (например заказчик попросил),то просто переведите ваш css в формат UTF-8.