5 советов верстальщику
21 May, 2008Принимаю всеобщее увлечение рекомендациями по вёрстке. Мои 5 советов верстальщику. Не тайные манускрипты, а всего лишь простые советы :)
Я в этом блоге только тем и занимаюсь, что пытаюсь дать полезные советы, потому слегка повторюсь.
1. Правильная замена на картинки
Заменяйте текст на картинки хорошими CSS-техниками, например, для кликабельного логотипа сайта, нужен такой html:
- <h1><a href="#">Вау! Я логотип!<span></span></a></h1>
CSS:
- h1 a{
- width:250px;height:50px;
- overflow:hidden;
- display:block;
- position:relative;
- }
- h1 a span{
- position:absolute;
- width:250px;height:50px;
- top:0;
- left:0;
- background:transparent url(../img/kartinka.png) no-repeat 0 0;
- }
2. Использовать табуляцию в CSS
Суть в табулировании селекторов в зависимости от иерархии. Чем более “глубокий” элемент — тем большим кол-вом табов он будет отделен.
Это на любителя, но попробовать совершенно точно стоит. Живой пример этого видно чуть выше, а вот так это выглядит издалека и вживую:
Мне нравится.
Как видно, иногда я пишу правила в одну строку, особенно когда подряд идут несколько правил с указанием лишь background
3. Выделенный текст
Очень простой и маленький приём. Иногда полезен.
Вот такой код:
- <h2><span>Ищу ту, особенную!</span></h2>
В дизайне дано такое:
Выделенный красным “маркером” текст
Если попробовать решать задачу “в лоб”, пишем такое:
- h2 span{background:red;padding:4px;}
получаем это:
Вторая строка “прилипает” к краю.
Мелочь, а неприятно
Вариантов решения несколько, наиболее простой таков:
- h2{border-left:4px solid red;}
- h2 span{background:red;padding:4px 4px 4px 0;}
Результат:
Правильно выделенный текст
Я ранее решал этот вопрос повторением фонового рисунка и паддингом для H2. Подсказал genn.
4. Относитесь к вёрстке с чувством юмора
Например, можно давать смешные названия классам и айди.
Не стоит этим злоупотреблять, и использовать на сайтах где важна оптимизация, но на сайте какой-то веб-студии, или чисто представительском сайте это вполне оправдано:
- <div class=”i-was-born-in-1494″>
Или
- <div class=”usually-i-dont-use-such-a-long-names-for-classes-but-today-is-a-special-day”>
Могут сильно повеселить программистов и любителей заглянуть в ваш код. Смешной селектор может быть и коротким, главное, остроумным.
Желательно конечно, чтобы такой класс или айди встречался в коде лишь один раз. Впрочем, возможны варианты. :) Еще можно шутить прямо в CSS.
5. Доводите вёрстку до конца
Никогда не сдавайтесь на пол-пути в сложном проекте. Какими бы титаническими ни были усилия они практически всегда окупаются, если не деньгами то опытом и выносливостью. А так же духом победителя.
__END__
Адресую Виталию Харисову, Александру Шабуневичу, Вадиму Макишвили, Владимиру Агафонкину.
Заметка во многом спорная. “смешные имена классам и айди”, как и “Использовать табуляцию в CSS” справедливо если деплоймент и девелопмент версии CSS-ок и HTML-ек отличаются. Если нет, то страница сильно потяжелеет. И собственно зачем? Чтоб программистов повеселить? А обычные юзверы будут тыкатся на неоптимизированный сайт?
На счет колдвства с в самом начале у меня тоже хватает опасений. Семантика при таком подхлоде не страдает? Я просто не уверен, что такое колдунство будет правильно ботом воспринято.
А вообще, понимаю, что заметка не мне, а Виталию Харисову и др., так что больше настроение не порчу.
Да портьте на здоровье! :) Я за здоровую критику всегда!
Пустой спан это вред семантике? Чему кроме рафинированно-идеологического восприятия кода он может навредить? Известен ли вам лучший способ заменять текст картинками? С удовольствием заменю в посте и буду сам использовать.
Ботам на данный момент все равно, да и почему им вообще должно быть дело до пустого спана.
>А обычные юзверы будут тыкатся на неоптимизированный сайт?
При всем уважении, я не могу относиться серьезно к утяжелению сайта на 50 байт. Разумеется если мы будем верстать сайт яндекса, или майкрософта, можно и поэкономить. Но 99% будут иметь посещаемость и баннеры, на фоне которых это как-то даже несерьезно :)
Если уж так важна оптимизация, можно удалять табы при деплойменте, или в своем текстовом редакторе перед отсылкой. Но нельзя забывать об ускорении разработки что они дают. Это порой гораздо важнее чем аж 1-2 килобайта лишнего CSS. (которые еще потом нужно поделить на 5 засчет gzip) Я тоже очень люблю все оптимизировать, но надо во всем знать меру, ИМХО.
Иначе спойлер на машины ставить станет нерационально :) толку от него? Только машина тяжелее.
Спасибо за критику! Заметка не кому-то конкретно, а всем. Буду рад поспорить по поводу неё.
Ну и, нельзя же так серьезно ко всему относиться ;)
Я вот, например, табуляцию вверстке вообще терпеть не могу. Не знаю…
Но вот 5-й совет. Я себе его постоянно в голове напоминаю когда хочется поднять руку и “………” :)
А зачем такие жестокие манипуляции для замены текста картинкой?
Только для тех, кто выключает отображение картинок в браузере, забыв выключить цсс?
Именно для тех кто вырубает картинки. Я сторонник качества. Качество всегда оплачивается.
И нормальные заказчики с вас рано или поздно такое спросят.
А табуляция как я и говорил на любителя. Пока не попробовал вызывала только отвращение :)
Всеобщее безумие =)
Спасибо за советы. Пригодятся. )
А не лучше ли в первом пункте для ссылки указать position: releative, а для вложенного span’a top:0 и left:0; тогда не нужно будет задумываться о координатах вообще. Такую технику применил в моей работе http://www.fabrichny.ru для оформления кнопок навигации, работает в IE5+ (для проектов не масштаба поисковых систем и социальных сервисов такой совместимости вполне достаточно я думаю) и в любых других нормальных браузерах.
Написал свои.
@Octane: не совсем понял, у меня же тоже самое написано?
Залинковал на Вас, Виталий!
ыыы и правда :-[ ступил чот, пойду высплюсь )))
Смешные названия, радуют не только программистов но и поисковики :)
Табуляция ИМХО лишь затягивает процесс работы
Спс, так как я только учусь, очень познавательная статья для меня, еще рас спасибо.
Эти советы даны человеком с большим чувством юмора:))) и это хорошо, позитив он всегда в плюсе!
Только понял: такая техника замены текста картинкой имеет негативный эффект — лого не поместить на неоднородный фон.
И еще, с учетом того, что размеры лого как правило небольшие, а заголовок первого уровня все-таки довольно крупный по размеру, врядли что-то осмысленное будет написано в окошечке, появившемся на месте лого, если пользователь выключит картинки.
Верстку логотипа я скорее в качестве примера, а размер текста для него можно указать и маленький – тогда он отобразиться как обычная ссылка вверху :) И все поместится.
Насчет фона – да, есть такой дело, случается редко, и лучше в таких случаях применять Thierry Image Placement из этого поста
[…] советов по вёрстке добралась и до меня (спасибо Юре Артюху) – с удовольствием ими поделюсь. Данные советы […]
1. Правильная замена на картинки
в примере с логотипом или в случаях когда имеем дополнительный тег в блоке, есть еще одна техника, которая редко упоминается – задание opacity.
3. Выделенный текст
я бы сделал h2 – position:relative и span – position:absolute. так легче позицировать текст и нет необходимости задавать бордер для h2.
4. Относитесь к вёрстке с чувством юмора
только не материтесь в коде :)
1. Вы имеете ввиду задание opacity для текста? Но ведь тогда его не будет видно при отключенных картинках? Разве нет?
2. Но ведь тогда текст будет выглядывать справа от заголовка? Ведь паддинги не учитывают справа, как видно по картинки.
Мои 5 советов по html/css верстке сайтов.
1. Если ты уделяешь верстке 1 час в день – не жди успеха. Если за версткой ты не замечаешь как летит время, можешь работать целый день и это приносит удовольствие – значит ты верстальщик-фанатик, и со временем ты сможешь верстать как твои кумиры.
2. Не останавливайся на достигнутом! Читай больше статей про html/css верстку. Броди по блогам верстальщиков, там можно найти много новой и полезной для себя информации. Все знать ты не можешь.
3. Собирай и структурируй свою библиотеку решений по верстке и создавай свои фреймворки. Это поможет сэкономить много времени при верстке.
4. Таблицы используй только для вывода табличных данных. Не слушай тех, кто говорит, что таблицами верстать быстрее и надежнее. Это говорят ленивые верстальщики, которые выучили 5 лет назад табличную верстку (тогда она была актуальной), а сейчас не хотят переучиваться. Грамотная блочная верстка справится с макетами любой сложности!
5. Не напрягай мозг, заучивая новые теги, приемы и технологии верстки. Не обязательно все помнить и держать в голове, важнее знать, где это найти в случае необходимости! Если ты будешь много верстать – все это само сабой отложится в памяти.
“Помни про носовой платок и не выходи без галош”? :)
2webmolot: продолжу ваши советы в контексте программирования
6. Не используйте goto. Не слушайте тех, кто говорит о большем удобстве программирования с этим оператором – ваш код будет запутанным и сложным для сопровождения
7. Комментируйте ваш код.
…думаю, смысл понятен :)
Написал свои 5 советов
http://www.amazedev.com/5-sovetov-verstalshhiku/
Как в тостах на День Рожденье счастье, здоровье и успехов разбирают первые поздравляющие :)
Использую такой вариант для подмены текста картинкой (проблем с поисковыми ботами ни разу не было за последние 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 }
:-)
Отличный вариант! Я его не использую только из-за того, что при отключенных картинках мы ничего не увидим. Но вариант один из самых надежных.
Кстати, верное замечание. Можно конечно к данному 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>
Как ни банально. Не судите строго :-)
не совсем понял о каких проблемах с z-index:-1 вы говорите. Вот у меня ж как раз первый метод такой, который работает при отключенных картинках во всех броузерах, включая ИЕ5-8, и использует z-index.
Может быть есть пример этой техники? Было бы интересно.
Это понятно, что первый пример будет работать везде при исходной конструкции 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.
Извиняюсь, вышла опечатка в “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.
А вот авторский 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”. Проверьте, думаю визуализация будет везде одинаковая. :-)
Спасибо за советы, Пригодятся. )
@Troppus: Зная что такое Опера и ИЕ5 я так не люблю рисковать :) Нужно тестировать…
Update: В сафари не пашет упрощение… =( Так что прийдется писать длиннее…
Спасибо за советы
2akella: увы, по той же статистике пользователей Opera и IE5.x в сумме одинаково столько же сколько пользователей Safari (~2.5%). Поэтому риск тут минимальный.
Вот кстати, браузерная статистика для общей информации (если интересно):
http://www.w3schools.com/browsers/browsers_stats.asp
Но могу сказать и обратное, в моей практике встречаются очень крупные проекты, ресурсы которых исчисляются миллионами и десятками миллионами уникальных посещений в день – тогда даже десятую долю процента браузерной статистики нужно учитывать. :-)
Важно понимать под какую аудиторию предназначается конкретный ресурс. Отнюдь не лень, а холодный расчет, но это работает и экономит нам разработчикам время и силы, дамы и господа!
P.S. А Вы под каким Safari тестировали (версия и платформа) и что именно не корректно отображалось?
Безусловно, я знаком со статистикой :) Спасибо. Но ваше к ней отнношение радикально меняется когда ваш основной броузер принадлежит к тем же 2.5%.
Насчет статистики согласен, но в данном случае трудозатраты по поддержке этой пары процентов, довольно просты..
Я смотрел под Safari 3.1.1, Mac OS X 10.5.2.
Абсолютно спозиционированный спан с фоном, отобразился сбоку от текста.
Вообще есть ведь даже такой клевый прием эксплуатирующий это, абсолютные элементы отображаются под последними статическими, при неуказанных координатах.
Верно, значит нужно изменить местоположение span-тега в пределах a-тега :-)
<h1><a href="#"><span></span>Вау! Я логотип!</a></h1>
По поводу “Оперной” аудитории Вы правы – если ресурс считается с этой аудиторией, тогда безусловно это принимается во внимание, я лишь привёл общую статистику по всему интернету. :-)
Неплохие советы, но самый важный, я считаю, про то что нужно использовать табуляцию. Вообще в идеале она нужна везде, ведь так проще найти, если чтото не так да и вообще проще понять код.
Я бы добавил про не забываем закрывать атрибуты.
по поводу замены картинкой (ссылка в span) – http://neal.venditto.org/nir.php, почти как у автора. работает везде на ура!
метод прохродит все тесты (http://wd.mrclay.org/tests/ir/), собсно как и знатный A.Levin’s IR…
Спасибо! Замечательный метод =) Жаль что не очень популярный был раньше, буду теперь его применять =)
Спасибо за советы, особенно порадовал последний – доведите верстку до конца. )
CSS-техники увы сложноваты, но конечно же без них никуда.
Без CSS сейчас никуда, табличная верстка давно устарела. Дивы рулят ;)
Отличные советы, сасибо огромные я только начинаю заниматься этим, так что мне будет полезно это знать!
Очень понравился первый пример, как-то о таком приеме даже не задумывался.
А на счет табличной верстки я бы не стал говорить что она устарела. Иногда с ней сделать все намного проще и быстрее, чем с div’ами.
не могу понять первый совет! В чем фишка?
Например если отключить картинку, а у картинки написать альт, то также надпись будет появляться при отключении картинок! Предпалогаю это все для того что бы при отключении именно ксс появлялась надпись замест логотипа! Если это все для этого то знаю еще один способ! Это ставить свойство text-indent:-9999px для ссылки которая в логотипе!
Хотя конечно это будет не сильно удобно! так как при отключении именно картинки не хрена не видино будет
Скажем точне это будет совсем неудобно, но другого выхода более приемлимого наверное нет.
Спасибо большое…Я в ксс очень плохо разбираюсь…мой кот куда лучше наверно))Так вот статья помогла я понял хотьь базовые приёмы…возьму эту статью на заметку!
Понравился совет доводить вёрстку до конца
Олег,и не так геморно с кроссбраузерностью.
Однако думается в скором времени браузеры доведут до ума,и таблицы уйдут туда,где им место
Попробовал применить ваш метод с заменой текста на картинки в меню, т.е. по умолчанию одна картинка, а при наведении другая. В IE6 при на ведении курсора появляется нужная картинка и так там и остается висеть даже когда курсор убрать. Короче пока старницу не перегрузишь, она не уберется. Подскажите как это обойти?
Попробуйте добавить такую строку
a:hover{background:url(whatever.png) no-repeat 0 0}
попробовал метод http://neal.venditto.org/nir.php , у меня текст ссылки больше логотипа и в IE7 вылазит за пределы лого… и соответственно его видно… как быть?
Не нужно использовать другой метод просто добавьте мою строку к старому.
Попробуйте еще overflow:hidden
2akella: Спасибо за совет, помогло. Решение, как всегда, оказалось проще некуда :)
[…] можно наблюдать у варианта номер 2 под названием правильная замена на картинки. <h1><a href="#">Вау! Я […]
Привет, а почему в первом не сделать так:
<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, добавив border у родительского элемента. Но проблема не […]
[…] всех к решению задачи когда-то подошёл akella, добавив border у родительского элемента. Но проблема не […]
Статья – тотальный и беспрецедентный бред! Вот из-за таких “верстальщиков”, которых очень тянет к обучению других таких же, рынок наполняется быдлокодерами! Поучи сначала алгоритмы работы поисковиков, браузеров и рекомендации W3C по назначению определенных тегов, потом добавь к этому здравый смысл и удали эту статью!
[…] эстафету от Акеллы. Полный список тех кому нечего делать […]
[…] В комментариях к этой реализации посоветовали добавить опцию overflow:hidden чтобы «при увеличении шрифта снизу ничо не полезло». Нечто подобное можно наблюдать у варианта номер 2 под названием правильная замена на картинки. […]
А курсорчик в виде ручечки, для иешечки на спанчике в логотипчике? :)
[…] * Юрий Артюх […]
Оставить комментарий