Практический CSS: рецепт успеха

[@Kupyc]

Спасибо за очередной качественный перевод, плюс к карме.
Замечена опечатка: "Поскольку относительное позиционирование не влияет на потоМ (flow) документа".

[@mmoo]

Спасибо за перевод, очень интересно.
Вижу навскидку два минуса приведённого способа:
- вот это приблизительное 5em для цены
- результат грустно выглядит без css
Я бы сделала таблицей. Исходя из соображения, что прайс-лист — вполне себе таблица.
Но это я, видимо, занудствую.

[@sunnybear]

да нет, не занудствуете, если походить по ссылкам на готовом примере, там есть вариант с таблицей. Автор утверждает, что кода на 30% больше. Я не вижу в этом большого преимущества (да и семантическая ценность сомнительна), но в данной статье просто представлен красивый пример CSS-верстки.

[@diamant]

красота :)
с таблицей, пусть кода и на 30% больше, зато времени на разработку раза в три меньше :)

[@XXXVII]

а я делал подобное через список определений. ИМХО он для данной цели замечательно подходит

[@zkv]

Тоже подумал про DL. Гораздо семантичнее.

[@gryzzly]

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

[@4g3n7]

А я все ждал, когда переведут :)

[@gryzzly]

для любопытствующих  CurlyBrace описывал похожую проблему здесь

[@chaRRge]

Читал это в каком-то левом переводе, только сейчас разобрался.
СПАСИБА!!!

[@va1en0k]

класс! давно искал хорошее, пошаговое руководство о том, КАК же надо с помощью css верстать ;) (а то у самого выходить корявовато). спасибо за перевод, а статью в закладку...

[@dbp]

кстати, в html есть такие неплохие тэги dl dd и dt

[@sunnybear]

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

[@404]

Ведь одному заголовку вполне может соответствовать несколько описаний, не так ли?

[@sunnybear]

формально вы правы, но список определений не для того придумывали, чтобы таблицу заменить. Процитирую w3.org

Definition lists, created using the DL element, generally consist of a series of term/definition pairs (although definition lists may have other applications).

да, othеr applications могут подразумевать все, что угодно. Но использовать список для связей одного-ко-многим не принято в мировой практике, мало распространено. Хотя ввиду тяжелого отношения браузеров с таблицами, это может быть единственным адекватным решением.

[@dbp]

описание не может содержать количество калорий?

[@fanex]

Обратите внимание на станицу конечного результата. Там есть пример и с dl:
http://www.pmob.co.uk/search-this/list-w…

[@aky_pp_ru]

Интересно было почитать. Хочу отметить что пунктиры в IE6 можно было бы оставить только потому что в этом случае не нужно использовать хаков. Кстати это интересная мысль: Что значит кросбраузерная вёрстка

1 сайт выглядит одинаково во всех браузерах?

2 сайт выглядит адекватно во всех браузерах?

[@sunnybear]

ой, только недавно читал чью-то статью про "одинаковость" во всех браузерах, там автор придерживался мнения, что будем верстать по стандартам, а в IE покажет "урезанную" версию, типа 20% — уже хорошо. Сколько людей, столько и мнений. Мое личное видение: сайт должен выглядеть одинаково у 99,9%, у остальных — адекватно.

[@maggg]

Что касается собственно предмета статьи, даже в пятом (5,5) Эксплоуре выглядит хорошо. Естественно, срабатывает хак (никаких сюрпризов, так и написано: «Мы можем применить эти стили для IE6 и более ранних версий»). Более дремучей древности не держу, да и ни к чему это.

[@maggg]

Опечатка. Абзац за вторым рисунком «Я не приводу сейчас полный код разметки…».
За статью — спасибо. Очень кстати пришлась. Заплюсовал бы, если б мог.

[@n1mnul]

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

А автору, anyway, огромное спасибо :)

[@sunnybear]

я бы сказал не "чуть раньше", а "чуть дороже". Совсем чуть-чуть :))

[@n1mnul]

Ну это само собой :) Просто пока в Вилларибо ждут перевода, в Виллабаджо уже давно всё прочитали и применяют на практике ;)

[@AztEK]

Вспомнился старый прикол с башорга:
"В Вилларибо и Виллабаджо опять дедлайн. Пока ребята из Вилларибо верстают сайт дивами, ребята из Виллабаджо уже всё сверстали на таблицах и ебошат друг друга в квейк."

=)

[@steel]

Есть еще альтернативный путь развития - статей специально не читать, а тупо верстать, верстать, верстать. По необходимости уже находя решения и воркэраунды в гугле.
После 20-го сайта такие примеры будут решаться в уме с учетом большинства возможных подводных камней.
"Алгоритм" просто сам выстраивается в мозгу при виде задачи.

Может, это не самый лучший путь, изобретать велосипед. Времени он займет точно больше. Зато в мозгу укладывается прочнее и более органично что-ли.
Ни на чем так не учишся, как на своих ошибках =)

[@sunnybear]

боюсь, что тут понадобится на 20, а 200 сайтов :)

[@n1mnul]

Скорее это не альтернативный, а параллельный путь развития :) Опыт, как никак. Не все приёмы описаны в статьях ;)

[@diamant]

Ваш путь, конечно, лучше и качественнее - самому всё изобретать, медленно но верно становится мастером. Но он нежизнеспособен в бизнесе. Пока будешь постигать всё методом тыка, конкурент прочтёт три книжки, посетит два курса и начнёт продавать сайты :)

[@wii]

Это просто чудо какое-то! :) Я нашел то, что искал. Как-раз вовремя. Плюсую, спасибо.

[@davojan]

Спасибо! Очень полезная статья.

[@hardtop]

Огромное спасибо за проделанную работу!

[@proxiper]

Спасибо за перевод, статья хорошая, но вижу пару проблем.

CSS всё-таки создавался для быстрого и безболезненного изменения представления документа. Уменьшение размера страниц это его очень приятный побочный эффект. Я согласен с автором, что "стоит заботиться о чистоте кода и минимизировать разметку", но считаю ошибкой просто пытаться написать как можно меньше.

Например, использования <span> и <div> без указания классов зачастую приводит к необходимости изменения структуры кода самого документа при его расширении, что получилось у автора с тегом <p>. Документы, кстати, в количестве нескольких тысяч могут лежать в базе или кэше — попробуй обнови. Да и сами div и span с точки зрения семантики так и напрашиваются на то, чтобы уточнить, что же именно в них заключено.

По этой же причине мне не нравится, что автор использует список для эмуляции таблицы. Считаю, что предложенные данные это именно таблица из двух столбцов. Как "поковыряться" — интересно, но, как тут уже упомянули, если понадобится добавить вес, то без трудностей не обойтись. Да и реализация float в браузерах, на мой взгляд, работает не очень-то быстро — попробуйте поресайзить страницу с сотнями float-блоков.

Впрочем, превращать html в xml, перегружая семантикой, тоже не стоит. Рекомендую сначала просто полностью семантически сверстать сам html (для этого нужно понимать с какими данными ты работаешь и хорошо знать не depricated теги), а потом пытаться с помощью CSS привести его к необходимому виду. Если это не удается, тогда можно добавить дополнительные div'ы и span'ы, но желательно чтобы они также были семантически обоснованы.

Ну и замечу для новичков, что очень важно давать правильные имена классам. Они не должны описывать представление, а должны описывать суть. Т.е. нельзя использовать слова типа red, left, tabbed и т.д. Можно только семантические — menu, logo, totalCost и т.д. Когда пишут class="alignRight", это нисколько не лучше, чем align="right". Но тут также нужно заметить, что хороший CSS это прежде всего хорошая абстракция — нужно находить похожие элементы и выносить их в классы с адекватным названием. "alignRight" это уже просто слишком высокий уровень абстракции :) Баланс, как всегда ищется набиванием шишек)

В целом, если так подходить к верстке, то код получается очень чистым, наглядным и легко поддерживаемым, чего всем и желаю.

[@colorblind69]

Спасибо за перевод.

Очень интересная и познавательная статья.

[@redhummer]

Шнуровкой наружу!!!
Тьфу, табличные данные — в таблицы!

[@Kanvi]

Автору: было бы хорошо, если в теги добавите хотя бы CSS.

[@standy]

А списки должны верстаться списками, вопрос лишь как на это смотреть. Меню в ресторане больше похоже на список :)

Для кого-то и горизонтальное меню (как у самизнаетекого на сайте) — таблица,
а для дивных верстальщиков — список.

[@standy]

Хм, посмотрел, покрутил в голове идеи и решил написать своё. Получилось, конечно, похоже, но без лишних <p>.

Непонятно, зачем делать 20x1 гиф, когда можно 2x1, и зачем юзать border dotted если все-равно резать этот гиф для IE (да ещё и вставлять хаком)... но это уже дело вкуса. :)

Ниже приведу свой вариант, вернее различия — можно заменить 4 соотв строчки и убирать лишние тэги p из оригинала:
#wrap ul { width: 420px; padding: 20px 40px; position: relative; bottom: 2px; right: 2px; list-style: none;
background: #eff2df; border: 1px solid #4c7300; }
#wrap li { width: 320px; padding-right: 100px; margin-top: .5em; position: relative;
background: url(images/dotted-leader.gif) left bottom repeat-x; line-height: 1.19; }
#wrap li em { background: #eff2df; padding-right: 5px; }
#wrap li span { background: #eff2df; padding-left: 5px; position: absolute; right: 0;}

[@akral]

и зачем юзать border dotted если все-равно резать этот гиф для IE (да ещё и вставлять хаком)

Чтобы нормальные UA не качали дополнительный файл.

[@NaFigator]

Может, фигню скажу, но почему не dt и dd используются?

[@akral]

см. комментарии выше

[@FuN_ViT]

делал недавно такое... только пришлось сделать через таблицы, причем каждая строчка - таблица.

а всё из-за того, что у меня на странице фон- картинка (т.е. закрашивать фон у div`ов - низя!)...

[@Mox]

Ух, можно посмотреть? Я сейчас как раз над этой темой бошку ломаю.

[@FuN_ViT]

http://nashposelok.ru/
блок "Как БЫСТРО доехать?"