5 советов верстальщику

21 May, 2008

XHTML/CSS, Общие

Принимаю всеобщее увлечение рекомендациями по вёрстке. Мои 5 советов верстальщику. Не тайные манускрипты, а всего лишь простые советы :)
Я в этом блоге только тем и занимаюсь, что пытаюсь дать полезные советы, потому слегка повторюсь.

1. Правильная замена на картинки

Заменяйте текст на картинки хорошими CSS-техниками, например, для кликабельного логотипа сайта, нужен такой html:

  1. <h1><a href="#">Вау! Я логотип!<span></span></a></h1>

CSS:

  1. h1 a{
  2. width:250px;height:50px;
  3. overflow:hidden;
  4. display:block;
  5. position:relative;
  6. }
  7. h1 a span{
  8. position:absolute;
  9. width:250px;height:50px;
  10. top:0;
  11. left:0;
  12. background:transparent url(../img/kartinka.png) no-repeat 0 0;
  13. }

2. Использовать табуляцию в CSS

Суть в табулировании селекторов в зависимости от иерархии. Чем более “глубокий” элемент — тем большим кол-вом табов он будет отделен.
Это на любителя, но попробовать совершенно точно стоит. Живой пример этого видно чуть выше, а вот так это выглядит издалека и вживую:

табулияция в CSSМне нравится.
Как видно, иногда я пишу правила в одну строку, особенно когда подряд идут несколько правил с указанием лишь background

3. Выделенный текст

Очень простой и маленький приём. Иногда полезен.
Вот такой код:

  1. <h2><span>Ищу ту, особенную!</span></h2>

В дизайне дано такое:

выделенный текстВыделенный красным “маркером” текст

Если попробовать решать задачу “в лоб”, пишем такое:

  1. h2 span{background:red;padding:4px;}

получаем это:

выделенный текстВторая строка “прилипает” к краю.
Мелочь, а неприятно

Вариантов решения несколько, наиболее простой таков:

  1. h2{border-left:4px solid red;}
  2. h2 span{background:red;padding:4px 4px 4px 0;}

Результат:

выделенный текстПравильно выделенный текст

Я ранее решал этот вопрос повторением фонового рисунка и паддингом для H2. Подсказал genn.

4. Относитесь к вёрстке с чувством юмора

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

  1. <div class=”i-was-born-in-1494″>

Или

  1. <div class=”usually-i-dont-use-such-a-long-names-for-classes-but-today-is-a-special-day”>

Могут сильно повеселить программистов и любителей заглянуть в ваш код. Смешной селектор может быть и коротким, главное, остроумным.

Желательно конечно, чтобы такой класс или айди встречался в коде лишь один раз. Впрочем, возможны варианты. :) Еще можно шутить прямо в CSS.

5. Доводите вёрстку до конца

Никогда не сдавайтесь на пол-пути в сложном проекте. Какими бы титаническими ни были усилия они практически всегда окупаются, если не деньгами то опытом и выносливостью. А так же духом победителя.

__END__

Адресую Виталию Харисову, Александру Шабуневичу, Вадиму Макишвили, Владимиру Агафонкину.

Все советы

XHTML/CSS, Общие

67 комментариев к “5 советов верстальщику”

Иван Маркеев | 1. 22 May, 2008

Заметка во многом спорная. “смешные имена классам и айди”, как и “Использовать табуляцию в CSS” справедливо если деплоймент и девелопмент версии CSS-ок и HTML-ек отличаются. Если нет, то страница сильно потяжелеет. И собственно зачем? Чтоб программистов повеселить? А обычные юзверы будут тыкатся на неоптимизированный сайт?

На счет колдвства с в самом начале у меня тоже хватает опасений. Семантика при таком подхлоде не страдает? Я просто не уверен, что такое колдунство будет правильно ботом воспринято.

А вообще, понимаю, что заметка не мне, а Виталию Харисову и др., так что больше настроение не порчу.

akella | 2. 22 May, 2008

Да портьте на здоровье! :) Я за здоровую критику всегда!
Пустой спан это вред семантике? Чему кроме рафинированно-идеологического восприятия кода он может навредить? Известен ли вам лучший способ заменять текст картинками? С удовольствием заменю в посте и буду сам использовать.
Ботам на данный момент все равно, да и почему им вообще должно быть дело до пустого спана.

>А обычные юзверы будут тыкатся на неоптимизированный сайт?
При всем уважении, я не могу относиться серьезно к утяжелению сайта на 50 байт. Разумеется если мы будем верстать сайт яндекса, или майкрософта, можно и поэкономить. Но 99% будут иметь посещаемость и баннеры, на фоне которых это как-то даже несерьезно :)

Если уж так важна оптимизация, можно удалять табы при деплойменте, или в своем текстовом редакторе перед отсылкой. Но нельзя забывать об ускорении разработки что они дают. Это порой гораздо важнее чем аж 1-2 килобайта лишнего CSS. (которые еще потом нужно поделить на 5 засчет gzip) Я тоже очень люблю все оптимизировать, но надо во всем знать меру, ИМХО.
Иначе спойлер на машины ставить станет нерационально :) толку от него? Только машина тяжелее.

Спасибо за критику! Заметка не кому-то конкретно, а всем. Буду рад поспорить по поводу неё.
Ну и, нельзя же так серьезно ко всему относиться ;)

macgera | 3. 22 May, 2008

Я вот, например, табуляцию вверстке вообще терпеть не могу. Не знаю…

Но вот 5-й совет. Я себе его постоянно в голове напоминаю когда хочется поднять руку и “………” :)

Андрей.П | 4. 22 May, 2008

А зачем такие жестокие манипуляции для замены текста картинкой?
Только для тех, кто выключает отображение картинок в браузере, забыв выключить цсс?

акелла | 5. 22 May, 2008

Именно для тех кто вырубает картинки. Я сторонник качества. Качество всегда оплачивается.
И нормальные заказчики с вас рано или поздно такое спросят.

А табуляция как я и говорил на любителя. Пока не попробовал вызывала только отвращение :)

Zigzag | 6. 22 May, 2008

Всеобщее безумие =)

"Свобода слова" | 7. 22 May, 2008

Спасибо за советы. Пригодятся. )

Octane | 8. 22 May, 2008

А не лучше ли в первом пункте для ссылки указать position: releative, а для вложенного span’a top:0 и left:0; тогда не нужно будет задумываться о координатах вообще. Такую технику применил в моей работе http://www.fabrichny.ru для оформления кнопок навигации, работает в IE5+ (для проектов не масштаба поисковых систем и социальных сервисов такой совместимости вполне достаточно я думаю) и в любых других нормальных браузерах.

Vitaly Harisov | 9. 22 May, 2008

Написал свои.

akella | 10. 22 May, 2008

@Octane: не совсем понял, у меня же тоже самое написано?

Залинковал на Вас, Виталий!

Octane | 11. 22 May, 2008

ыыы и правда :-[ ступил чот, пойду высплюсь )))

Mons | 12. 23 May, 2008

Смешные названия, радуют не только программистов но и поисковики :)

Грешник | 13. 23 May, 2008

Табуляция ИМХО лишь затягивает процесс работы

Олег | 14. 26 May, 2008

Спс, так как я только учусь, очень познавательная статья для меня, еще рас спасибо.

янеробот | 15. 26 May, 2008

Эти советы даны человеком с большим чувством юмора:))) и это хорошо, позитив он всегда в плюсе!

Андрей.П | 16. 26 May, 2008

Только понял: такая техника замены текста картинкой имеет негативный эффект — лого не поместить на неоднородный фон.

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

akella | 17. 27 May, 2008

Верстку логотипа я скорее в качестве примера, а размер текста для него можно указать и маленький – тогда он отобразиться как обычная ссылка вверху :) И все поместится.
Насчет фона – да, есть такой дело, случается редко, и лучше в таких случаях применять Thierry Image Placement из этого поста

/Н.П.Блок/ » » 5 советов IT-специалисту на примере вёрстки | 18. 27 May, 2008

[…] советов по вёрстке добралась и до меня (спасибо Юре Артюху) – с удовольствием ими поделюсь. Данные советы […]

Konstantin | 19. 27 May, 2008

1. Правильная замена на картинки

в примере с логотипом или в случаях когда имеем дополнительный тег в блоке, есть еще одна техника, которая редко упоминается – задание opacity.

3. Выделенный текст

я бы сделал h2 – position:relative и span – position:absolute. так легче позицировать текст и нет необходимости задавать бордер для h2.

4. Относитесь к вёрстке с чувством юмора

только не материтесь в коде :)

akella | 20. 27 May, 2008

1. Вы имеете ввиду задание opacity для текста? Но ведь тогда его не будет видно при отключенных картинках? Разве нет?

2. Но ведь тогда текст будет выглядывать справа от заголовка? Ведь паддинги не учитывают справа, как видно по картинки.

webmolot | 21. 27 May, 2008

Мои 5 советов по html/css верстке сайтов.

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

2. Не останавливайся на достигнутом! Читай больше статей про html/css верстку. Броди по блогам верстальщиков, там можно найти много новой и полезной для себя информации. Все знать ты не можешь.

3. Собирай и структурируй свою библиотеку решений по верстке и создавай свои фреймворки. Это поможет сэкономить много времени при верстке.

4. Таблицы используй только для вывода табличных данных. Не слушай тех, кто говорит, что таблицами верстать быстрее и надежнее. Это говорят ленивые верстальщики, которые выучили 5 лет назад табличную верстку (тогда она была актуальной), а сейчас не хотят переучиваться. Грамотная блочная верстка справится с макетами любой сложности!

5. Не напрягай мозг, заучивая новые теги, приемы и технологии верстки. Не обязательно все помнить и держать в голове, важнее знать, где это найти в случае необходимости! Если ты будешь много верстать – все это само сабой отложится в памяти.

cyrillyun | 22. 27 May, 2008

“Помни про носовой платок и не выходи без галош”? :)

cyrillyun | 23. 27 May, 2008

2webmolot: продолжу ваши советы в контексте программирования

6. Не используйте goto. Не слушайте тех, кто говорит о большем удобстве программирования с этим оператором – ваш код будет запутанным и сложным для сопровождения

7. Комментируйте ваш код.

…думаю, смысл понятен :)

Павел | 24. 27 May, 2008

Написал свои 5 советов
http://www.amazedev.com/5-sovetov-verstalshhiku/
Как в тостах на День Рожденье счастье, здоровье и успехов разбирают первые поздравляющие :)

Troppus | 25. 28 May, 2008

Использую такой вариант для подмены текста картинкой (проблем с поисковыми ботами ни разу не было за последние 5 лет меня в блочной верстке):

<h1title="Вау! Я логотип!"><a href="#"><span>Вау! Я логотип!</span></a></h1>

h1, h1 a { display: block; margin: 0; padding: 0; width: 100px; height: 100px }
h1 { background: transparent url(/images/kartinka.png) no-repeat }
h1 a span { display: none }

:-)

akella | 26. 28 May, 2008

Отличный вариант! Я его не использую только из-за того, что при отключенных картинках мы ничего не увидим. Но вариант один из самых надежных.

Troppus | 27. 28 May, 2008

Кстати, верное замечание. Можно конечно к данному XHTML коду применить другой подход, где в этой же конструкции span будет участвовать как тег с absolute позиционированием на фоне остальных h1- и a- тегов с static позиционированием, но увы именно c FF под Win возникает проблема с отображением span-a при z-index: -1 и hidden: overflow (в том же FF1.x, 3.0/Safari под Mac проблем нет). Т.е. без дополнительного вмешательства в код не получится, значит этот вариант отпадает :-)
К слову об отключенных картинках, процент таких посетителей ниже или равен проценту использования пользователями Safari for Mac в мировом масштабе.
Тут необходимо четко разделять, для какой аудитории предназначается ресурс и какие трудности могут возникнуть в применении очередного стиля при неизменном XHTML коде. Иногда бывает очень целесообразным (с точки зрения совместимости умирающего IE6) применения вот такого XHTML кода:

<h1 title="Вау! Я логотип!"><a href="#"><img src="images/kartinka.png" alt="Вау! Я логотип!" width="100" height="100" border=0 /></a></h1>

Как ни банально. Не судите строго :-)

akella | 28. 28 May, 2008

не совсем понял о каких проблемах с z-index:-1 вы говорите. Вот у меня ж как раз первый метод такой, который работает при отключенных картинках во всех броузерах, включая ИЕ5-8, и использует z-index.
Может быть есть пример этой техники? Было бы интересно.

Troppus | 29. 28 May, 2008

Это понятно, что первый пример будет работать везде при исходной конструкции XHML кода, но хотелось бы обойтись без пустых тегов.

Эту технику (см.ниже) можно использовать в отдельных случаях, но повторюсь, что в FF под Windows она не заработала (может быть у Вас получится).

h1, h1 a, hi a span { display: block; margin: 0; padding: 0; width: 100px; height: 100px }
h1 a span { width: 100px; height: 100px; position: absolute; z-index: -1; font-size: medium; overflow: hidden }
h1 { background: url(/images/kartinka.png) no-repeat }

повторное задание размеров необходимо, чтобы код корректно отрабатывался под FF/Safari for Mac.

Troppus | 30. 28 May, 2008

Извиняюсь, вышла опечатка в “h1 a span” :-)

Вот немного измененный код:

h1, h1 a, h1 a span { display: block; margin: 0; padding: 0; width: 100px; height: 100px }
h1 a span { position: absolute; z-index: -1; font-size: medium; overflow: hidden }
h1 { background: url(/images/kartinka.png) no-repeat }

Но все равно он не корректно работает в FF под Win.

Troppus | 31. 28 May, 2008

А вот авторский CSS можно немного оптимизировать и привести к такому виду:

h1 a, h1 a span { width:250px;height:50px; overflow:hidden; display:block }
h1 a span { position:absolute; background:transparent url(../img/kartinka.png) no-repeat 0 0 }

из “h1 a” была убрана релативность в позиционировании, т.к. в данном случае она не нужна как и не нужны “top: 0” и “left: 0” в “h1 a span”. Проверьте, думаю визуализация будет везде одинаковая. :-)

dv | 32. 28 May, 2008

Спасибо за советы, Пригодятся. )

akella | 33. 28 May, 2008

@Troppus: Зная что такое Опера и ИЕ5 я так не люблю рисковать :) Нужно тестировать…

Update: В сафари не пашет упрощение… =( Так что прийдется писать длиннее…

Andrey | 34. 29 May, 2008

Спасибо за советы

Troppus | 35. 29 May, 2008

2akella: увы, по той же статистике пользователей Opera и IE5.x в сумме одинаково столько же сколько пользователей Safari (~2.5%). Поэтому риск тут минимальный.

Вот кстати, браузерная статистика для общей информации (если интересно):
http://www.w3schools.com/browsers/browsers_stats.asp

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

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

P.S. А Вы под каким Safari тестировали (версия и платформа) и что именно не корректно отображалось?

akella | 36. 29 May, 2008

Безусловно, я знаком со статистикой :) Спасибо. Но ваше к ней отнношение радикально меняется когда ваш основной броузер принадлежит к тем же 2.5%.

Насчет статистики согласен, но в данном случае трудозатраты по поддержке этой пары процентов, довольно просты..

Я смотрел под Safari 3.1.1, Mac OS X 10.5.2.
Абсолютно спозиционированный спан с фоном, отобразился сбоку от текста.
Вообще есть ведь даже такой клевый прием эксплуатирующий это, абсолютные элементы отображаются под последними статическими, при неуказанных координатах.

Troppus | 37. 29 May, 2008

Верно, значит нужно изменить местоположение span-тега в пределах a-тега :-)

<h1><a href="#"><span></span>Вау! Я логотип!</a></h1>

По поводу “Оперной” аудитории Вы правы – если ресурс считается с этой аудиторией, тогда безусловно это принимается во внимание, я лишь привёл общую статистику по всему интернету. :-)

Юлия | 38. 2 June, 2008

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

ПаЛыЧ | 39. 3 June, 2008

Я бы добавил про не забываем закрывать атрибуты.

YoYurec | 40. 3 June, 2008

по поводу замены картинкой (ссылка в span) – http://neal.venditto.org/nir.php, почти как у автора. работает везде на ура!
метод прохродит все тесты (http://wd.mrclay.org/tests/ir/), собсно как и знатный A.Levin’s IR…

akella | 41. 4 June, 2008

Спасибо! Замечательный метод =) Жаль что не очень популярный был раньше, буду теперь его применять =)

Серега | 42. 12 June, 2008

Спасибо за советы, особенно порадовал последний – доведите верстку до конца. )

Алекс | 43. 12 June, 2008

CSS-техники увы сложноваты, но конечно же без них никуда.

bong-bong | 44. 21 June, 2008

Без CSS сейчас никуда, табличная верстка давно устарела. Дивы рулят ;)

Алекс | 45. 24 June, 2008

Отличные советы, сасибо огромные я только начинаю заниматься этим, так что мне будет полезно это знать!

Олег | 46. 24 June, 2008

Очень понравился первый пример, как-то о таком приеме даже не задумывался.
А на счет табличной верстки я бы не стал говорить что она устарела. Иногда с ней сделать все намного проще и быстрее, чем с div’ами.

Gan | 47. 9 July, 2008

не могу понять первый совет! В чем фишка?
Например если отключить картинку, а у картинки написать альт, то также надпись будет появляться при отключении картинок! Предпалогаю это все для того что бы при отключении именно ксс появлялась надпись замест логотипа! Если это все для этого то знаю еще один способ! Это ставить свойство text-indent:-9999px для ссылки которая в логотипе!

Gan | 48. 9 July, 2008

Хотя конечно это будет не сильно удобно! так как при отключении именно картинки не хрена не видино будет

Никс | 49. 9 July, 2008

Скажем точне это будет совсем неудобно, но другого выхода более приемлимого наверное нет.

NikNAME | 50. 27 August, 2008

Спасибо большое…Я в ксс очень плохо разбираюсь…мой кот куда лучше наверно))Так вот статья помогла я понял хотьь базовые приёмы…возьму эту статью на заметку!

Борис | 51. 29 August, 2008

Понравился совет доводить вёрстку до конца

Мегабайтыч | 52. 19 November, 2008

Олег,и не так геморно с кроссбраузерностью.
Однако думается в скором времени браузеры доведут до ума,и таблицы уйдут туда,где им место

Сергей | 53. 30 January, 2009

Попробовал применить ваш метод с заменой текста на картинки в меню, т.е. по умолчанию одна картинка, а при наведении другая. В IE6 при на ведении курсора появляется нужная картинка и так там и остается висеть даже когда курсор убрать. Короче пока старницу не перегрузишь, она не уберется. Подскажите как это обойти?

akella | 54. 30 January, 2009

Попробуйте добавить такую строку
a:hover{background:url(whatever.png) no-repeat 0 0}

Viktor | 55. 30 January, 2009

попробовал метод http://neal.venditto.org/nir.php , у меня текст ссылки больше логотипа и в IE7 вылазит за пределы лого… и соответственно его видно… как быть?

akella | 56. 31 January, 2009

Не нужно использовать другой метод просто добавьте мою строку к старому.

Попробуйте еще overflow:hidden

Сергей | 57. 1 February, 2009

2akella: Спасибо за совет, помогло. Решение, как всегда, оказалось проще некуда :)

Уроки верстки – CSS подмена текста картинкой :: Дизайн Мания | 58. 10 June, 2009

[…] можно наблюдать у варианта номер 2 под названием правильная замена на картинки. <h1><a href="#">Вау! Я […]

Глеб | 59. 7 September, 2009

Привет, а почему в первом не сделать так:

<h1 id=”logo”><a href=”#”>!<span>Вау! Я логотип</span></a></h1>

#logo a {
dispay:block;
width:250px;
height:250px
background:url(img.gif);
}

#logo a span {
display:none;
}

akella | 60. 7 September, 2009

Это чтобы при отключенных картинках было видно текст

Равномерный фон под текстом | 61. 19 January, 2010

[…] всех к решению задачи когда-то подошёл akella, добавив border у родительского элемента. Но проблема не […]

Равномерный фон под текстом « PHP Portal | 62. 24 January, 2010

[…] всех к решению задачи когда-то подошёл akella, добавив border у родительского элемента. Но проблема не […]

Дмитрий | 63. 19 August, 2010

Статья – тотальный и беспрецедентный бред! Вот из-за таких “верстальщиков”, которых очень тянет к обучению других таких же, рынок наполняется быдлокодерами! Поучи сначала алгоритмы работы поисковиков, браузеров и рекомендации W3C по назначению определенных тегов, потом добавь к этому здравый смысл и удали эту статью!

5 вредных советов верстальщику | 64. 29 August, 2010

[…] эстафету от Акеллы. Полный список тех кому нечего делать […]

Веб-дизайн » Архив блога » Уроки верстки – CSS подмена текста картинкой | 65. 16 November, 2011

[…] В комментариях к этой реализации посоветовали добавить опцию overflow:hidden чтобы «при увеличении шрифта снизу ничо не полезло». Нечто подобное можно наблюдать у варианта номер 2 под названием правильная замена на картинки. […]

Евгений | 66. 30 December, 2011

А курсорчик в виде ручечки, для иешечки на спанчике в логотипчике? :)

Советы верстальщикам | Web Sphere Blog | 67. 1 June, 2012

[…] * Юрий Артюх […]

Оставить комментарий