Как стать автором
Обновить

Комментарии 128

неплохо… на самом деле полезно.Спасибо.
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Не пролезло снова. Может, скриншот?
<занудство>и зачем только кнопку предпросмотр придумали</занудство>
НЛО прилетело и опубликовало эту надпись здесь
спасибо. почему бы не добавить к этому фрагменты кода типовых элементов, типа навигация, форма и тп
Лично у меня из проекта в проект мигрируют «хлебные крошки» и счетчик страниц, однако говорить о том, что это общее для всех нельзя проектов нельзя: именно такие «хлебные крошки» и «пагинатор» рисует наш дизайнер, а другие дизайнеры это делают по-другому. Я подумаю на этот счет еще раз :)
согласен
Да, спасибо. Исправил (обычно li не имеет отступов, но иногда встречается тааакое!)
Да, штука прикольная, но она генерирует лейауты сайта, а тут — чистый шаблон
не в целях попрекания, а в целях оптимизации пишу.

0px — просто как 0 (зачем лишние буквы?)
margin: 10px 0px 10px 0px — margin:10px 0;
margin: 0px auto 0px auto — margin:0 auto;

вроде мелочь, а приятно.

И сюда еще не хватает сброса стилей
Сокращать можно, не спорю. И px можно не писать, согласен. Это не я виноват, это мои руки сами их пишут :) Привычка
НЛО прилетело и опубликовало эту надпись здесь
Какие конкретно сбросы нужны? :)
Вы немного путаете, мне кажется. Я не понаслышке знаю, что такое CSS-reset и с чем его едят, однако в приведенной вами статье больше рассказывается самая базовая теория.

Ресеты в моем коде (если посмотреть в css/common.css) есть. Ресеты вида * {margin: 0px padding: 0px;}, которые очень часто встречаются в статье, не годятся. Это самый опасный, на мой взгляд, ресет, особенно, когда его тащат с собой всякие jQuery плагины ;).

Вообще любой желающий может взять и допилить мой шаблон (благо MIT лицензия это позволяет :) ). Я буду только за! :)
в конце той статьи есть ссылки на самые популярные сбросы
PS я никоим образом не хотел сказать, что вы не знаете о сбросах. Я хотел, чтобы вы на свой выбор один из тех сбросов в свою разработку включили
Ок :)
В strict значение без указания единиц измерения работать не будет.

Раньше существовало негласное правило: если в CSS прописано значение, но не указана какая именно единица измерения используется (px, %, em или ex), то это пиксели (кроме случаев, когда речь идет о размере шрифта). Теперь же, по стандартам: не указана единица измерения — значение не учитывается при верстке.
Это относится только к ненулевым значениям. Ноль абсолютная величина независящая от единиц измерения, поэтому можно единицу измерения не писать.
А, пардон.
Ноль — да.
Круто. Очень круто. Для плохо подготовленного верстальщика (т.е. для меня) — просто великолепно :)
Спасибо, очень полезный линк!
Не всё там здорово. Label'ы в формах не кликабельны. А в accordion и section menu на кликабельных элементах курсор не меняется на руку. В первом даже при наведении не меняется бэкграунд, так что, пока не прочитал слово accordion, не догадывался, что можно развернуть.
НЛО прилетело и опубликовало эту надпись здесь
ОХХХ! Спасибо огромное! Давно искал такую стройную систему, чтобы покопаться-разобраться что и как.
Эм. Похоже не внимателен, но так и не смог понять, где стянуть «наикрутейший CSS-фреймворк от Яндекса». Запрос в Яндексе «CSS Framework Яндекс» — не дал результата (только презентации и т.п.).
Впервые я о нем услышал на Яндекс.Субботнике год назад. Зачатки (или огрызки?:) ) этого фреймворка выложены в нескольких местах. Полного фреймворка нет и, скорее всего, не появится: внутрикорпоративная разработка как бы :).
Стягивать его негде :) В презентации (из двух частей — теория и практика) изложена суть. Причем давольно таки понятно :) Свой CSS «парсер» они не выкладивали, на сколько мне извесно.
Там не парсер, скорее, а сборщик css. Всем желающим я все же советую посмотреть статью Россомахина, или статью Виталия Харисова о независимых блоках. Фреймворк постараюсь нагуглить. Был где-то точно
если я правильно наЯндексил, то: css-framework.ru
Неправильно. Правильно см. ниже.
Это фреймворк не Яндекса, а лично Виталия Харисова и еще нескольких разработчиков. Виталий на одной из конференций говорил, что этот фреймворк Яндекс никак не поддерживает.

«Наикрутейший» — это потому что он МЕГАуниверсален, соответственно с огромным избытком кода.
clubs.ya.ru/yacf/

Пока только теория (причём уже устаревшая чутка), кода пока нет. Руки не доходят.
да, фреймворк реально крутой. Везде используем. Только немного непривычно вручную с ним верстать, а так все супер.
+ a.someclass:hover конечно же для IE
А можешь код показать? Интересно, как именно и что используете? Ибо фреймворка-то ещё нет по факту.
Виталий, вы бы сказали, наконец, стоит нам ждать релиз чудо-фреймворка или нет. А то ведь с Яндекс.Субботника год прошел, а мы все слюной заливаемся! :)
Стоит. Я не хочу релизить имеющийся код, ибо без инструментария им пользоваться неудобно. Следите за новостями в клубе, в течение января напишу.
мое личное мнение, что идеи, лежащие в основе этого инструментария, намного ценнее любых их конечных реализаций. Но без реализаций они не понятны :)
да. Хотя я бы не назвал это совсем Monkey Joe, но сделано максимально (я надеюсь) согласно с правилами
code.google.com/p/web-optimizator/source/browse/trunk/libs/css/main.css

Чистых «независимых блоков» там почти нет. Некоторые элементы просто повторно используются с измененными (в зависимости от окружения) стилями. Не более.

Ну да, естественно, это почти финальная версия, поэтому пожато почти все :)
ммм, да, там абракадабра сплошная :)
Здесь пример попроще, и блоков там тоже почти нет
www.web-optimizer.us/i/css/main4.css
О, сам Виталий Харисов здесь. Спасибо вам за фреймворк, очень круто. Мы используем его тут — www.astrology.com — ну то есть упрощенную его версию и заточенную под рельсы, есть только blocks (b-), mixins (m-) и layouts (l-). Работает прекрасно, иностранные коллеги довольно быстро поняли идею и вся команда легко перешла на него. Не нарадуемся. :)
да, еще вспомнил: на западе почти тот же самый концепт имеет название Object Oriented CSS
Та единственная презентация, которую я видел оставила впечатление УГ. Мы ушли гораздо дальше.
я не спорю. Просто OOCSS на слуху, а о мега-фреймворке от Яндекса никто и не знает :) Надо выходить на публику
На слуху? Что-то кроме одной презентации больше ничего не было.
если меня о нем спрашивают, а о Monkey Joe нет — значит, на слуху :)
Это не фреймворк, это теория его построения. Сам фреймворк пока не опубликован (ибо пока не создан в том виде, как я хочу).
ИМХО — бред :) Особенно сразу в цсс пихать хаки, которые могут и не понадобиться (зоом).

Так можно и для ПХП выложить структуру с папочками и пустыми файлами содержащими открытые и закрытые пхп теги :)
Неплохая затея.

Мы у себя в Indentium уже давно разработали болванку, с которой начинается любая верстка. Учитывая то, что над одним проектом обычно трудится не менее 2-3 человек, в придачу к болванке была расписана подробнейшая документация разработки.

Позволю себе выложить болванку.

P.S. Автор, Вас работа постоянная не интересует? ;-)
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
В основном он нужен для скриптов, обрабатывающих png24 в ие6. Также с ним можно делать столько всего интересного :)
Я, кстати, почему-то использую вместо gif -> png8
НЛО прилетело и опубликовало эту надпись здесь
Картинка нужна для извращений.

Студия Артемия Лебедева советует использовать для борьбы с «прыжками» блоков при эмуляции position:fixed.

Еще иногда приходится делать прозрачные ссылки (например, на неравномерно распределенных и покрашенных меню с фоном-подложкой). Однако если нет картинок, ссылки не будут видны. Тут и приходит на помощь однопиксельная картинка-подложка, «растянутая» в ссылке: вместо нее будет отображаться рамка и alt
НЛО прилетело и опубликовало эту надпись здесь
Проблема в том, что в случае лага в сети или отключенных изображений, картинок на сайте не будет. Прозрачную ссылкку a.link найти будет сложно.

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

Конечно же, от такого приема можно бы и отказаться: проблемы с интернетом случаются все реже. Однако увы, они все равно бывают: двадцать первый век дошел не до всех
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
А у однопиксельного GIF-а размер на 100 байт меньше PNG8 ;)
НЛО прилетело и опубликовало эту надпись здесь
забавно, н у nginx'a есть даже плагин который генерирует это картинку и хранит ее в памяти :)
НЛО прилетело и опубликовало эту надпись здесь
таких viewport'ов пока нет- 10000x10000 :)
png 16x16
У ie7 точно тормоза будут с png такого размера, т.к. у него большие проблемы с производительностью начинаются, когда png повторяется очень много раз (не зависит от типа png).

По этой причине использую для повторяющихся пнг размеры от 100 на 100 пикселей.
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Ну если еще сжать pngoptimizer-ом, то всего-лишь на 50 байт =)
НЛО прилетело и опубликовало эту надпись здесь
conditional comments неплохо разбираются автоматически. Например, в Web Optimizer.
А вот насчет стилей для FF / Opera / Safari — тут да, аналог условных комментариев бы не помешал.
Cкрипт на питоне для склейки и оптимизации CSS pastie.org/768846
Может кому пригодится.
* xhtml transitional пора менять на html5 — и в ногу со временем будете и (главное) в настоящем standarts mode.
* если шрифты в em то и margin для текстовых элементов должен быть в em

однако смотрю тема интересна хабрасообществу, надо будет наши наработки выложить :)
«если шрифты в em то и margin для текстовых элементов должен быть в em» — чаще всего это никак не вяжется с тем, что нарисовал дизайнер. Тогда уж все размеры в em'ах задавали бы.
а в чём проблема вместо столько-тоPX написать столько-тоEM?
можно ж хоть 0.833em писать — всё работает.

минус не мой)
Конечно, работает. Просто для таких изяществ весь layout должен быть резиновым, расчитанным на em'ах. Вы просто забываете про убогие браузеры, в которых уже никогда не появится нормальный zoom для изображений, а при увеличении шрифта там также увеличатся и отступы, а родительский блок останется таким же.
родительский блок останется тем же только если его размер зафиксирован в px, а это уже частный случай, в общем же (в обычном тексте) — высота родительского блока равна высоте текста. Ив этом частном случае, даже если не задавать отступы в em, при увеличении шрифта всё равно текст выйдет за его пределы. Не, ну можно задавать высоту в em, и прочее, но смысл? те, кто увеличивают только шрифт текста знают на что идут.

Когда у нас отступы в em — при увеличении размера шрифта увеличатся не только шрифты но и пропорционально увеличатся отступы, будет красиво.
Смотря о каких отступах мы говорим. Если о верхнем/нижнем — согласен. С левыми/правыми так делать не стоит. Все, что я хотел донести :-)
конечно о верхнем/нижнем :)
НЛО прилетело и опубликовало эту надпись здесь
а смысл пиксель-в-пиксель для текста?
заказчик делает скриншот и сличает в фотошопе с оригиналом? :)
НЛО прилетело и опубликовало эту надпись здесь
реально клиент смотрит? о.О
или всё-таки манагер дурью мается?

в моём опыте общения с клиентами такого не встречалось.

смысл em… хороший вопрос.
ну в любом IE есть обычный текстовый zoom и хорошо когда он работает :)

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

интерсно, с чего вы решили, что фреймворк, который разрабатывается внутри Яндекса тащит за собой что-то. Если вы посмотрите презентации и записи, то убедитес, что основная идеология вообще не связана с общими стилями, покрывающими неиспользуемые элементы. Иными словами используется только то, что нужно и ни байта лишнего. Как сказал Виталя, следите за клубом.
Ох… Наехали-таки. Формулировка про кучу лишнего кода, видимо, была неверно воспринята как атака на YACF. Давайте по пунктам.
1. Я своими ушами слушал рассказ Виталия на тему фреймворка и помню, что каждый стиль хранится в отдельном файле и файлы собираются в общий :)
2. В моем посте нет ни слова про то, что этот фреймворк плох.
3. В заголовке поста написано слово «шаблон», в тексте указано, что то, что я сделал ни в коем случае не подпадает под гордое звание «фреймворка» (и никогда не подпадет, уж поверьте ;) ).

«Не ругайся, нащяльника», короче говоря ;)
Хороший вопрос. В strict сильно напрягает запрет iframe Фрейм нет-нет, да и появляется в разных jQuery плагинах, которые я, увы, не могу контролировать и в разных «информерах» и «модулях», которые до зарезу требуются клиентам на их сайтах (про это вообще песня отдельная). Впрочем, подумаю на этот счет
ох уж эти клиенты )))
Нет такого http-заголовка description и keywords тоже нет. А так, даже в начальной заготовке много неоптимизированного кода. про единицы измерения у нулей и про грамотное использование шортхендов уже сказали, я скажу про нелогичные селекторы типа html, html#js, html#nojs {..} (именно так сгруппированные). Зачем тут указаны элементы с айдишниками? Они ведь и так будут наследовать стили от html. Да и указание имени элемента перед его id не имеет практически никакого смысла (кроме повышения специфичности на 1). Не уверен, что вы в каждом своем проекте используйте всегда все эти стили полностью => эффективность применения таких заготовок стремится к нулю. Лучше создать набор отдельных блоков, которые наиболее часто используются + глобальный ресет и глобальные блоки, а дальше уже делать блоки относящиеся к проекту, короче как описано в теории «наикрутейшего фреймворка от Яндекса».
я кстати считаю что указывать имя элемента перед id/class — хороший стиль, так понятно с чем имеешь дело когда читаешь код
Глобальный ресет зло. Читайте туже самую теорию того же самого. =)
Про скорость селекторов читал. Но не уверен, что всегда целесообразно оптимизировать селекторы это уже скорее относится к экстремальным методам оптимизации и необходимо только на слишком больших (по количеству дом-элементов) и динамичных (где много JS интерактивности) страницах. Слишком уж многим нужно жертвовать, чтобы везде использовать быстрые селекторы.
Слишком многим? Чем это?
Ну, как минимум, совсем отказаться от селекторов по имени элемента. Отказаться от глобального ресета. Практически на все навесить классы.
А, вы про это. Ну ок, ходите по граблям дальше.
Про какие именно грабли идет речь?
Когда вы, используя ваши текущие подходы, сверстаете что-то *действительно* большое, может быть уже поздно перевёрстывать, когда оно будет тормозить.
Ну если это будет что-то действительно большое, то я ведь это учту. Про полный отказ от оптимизации скорости селекторов я не говорил. Я говорю лишь о том, что далеко не все сайты сопоставимы по величине с Яндексом.
Большое не всегда видно. Оно может становиться большим постепенно.
Давайте по частям :)

Нет такого http-заголовка description и keywords тоже нет.

Исправил, вы правы

про единицы измерения у нулей

Да, вы правы. Ноль абсолютен, и я про это давно в курсе. Но px будет: привычка

я скажу про нелогичные селекторы типа html, html#js, html#nojs {..} (именно так сгруппированные).

И правы и не правы одновременно. Ежу понятно, что логики в таком написании никакой… Однако… Я уверен, вы обратили внимание на строку, выполняющую замену id у тега html. Я думаю, вы в курсе про то, что webkit-браузеры не всегда корректно сбрасывают стили у тега html, если у html идентификатор был заменен. По этой причине мне приходится описывать этот тег трижды.

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

У меня есть несколько вопросов (если ответы на какие-то из них уже звучали в комментариях, то просто скажите и я сам их найду):

1. Почему DOCTYPE — Transitional, а не Strict? W3C настоятельно рекомендует отказаться от Transitional.
2. Зачем тегу body указали position: relative;? Это для дальнейшего позиционирования элементов (таких как например футер) внутри этого тега?
3. Зачем у элементов body, form, h1-h6, p указано padding: 0px? Разве у этих элементов в каком-либо браузере по умолчанию padding отличный от 0?
4. Зачем вначале css-файлов указана кодировка — @charset «utf-8»;? Разве по умолчанию кодировка css-файлов не такая же как кодировка html-файла?

Буду благодарен если ответите на эти вопросы.
Про DOCTYPE уже прочитал.
по четвертому пункту я могу ответить, что кодировка может быть разной. От настроек сервера еще зависит
И, если интересно, то можете взглянуть на мой вариант шаблонного index.html файла — http://willmake.it/test/template/. Я там на всякуй случай в нём комментарии оставил.
НЛО прилетело и опубликовало эту надпись здесь
Вообще-то лучше писать заголовок после определения кодировки

Спасибо за совет, прийму во внимание.

Ответ на вторую часть комментария…
От строчки
<!--[if !IE]><--><link href="style/dataurl-bgs.css" rel="stylesheet" type="text/css" /><!--><![endif]-->
никуда не дется если мы не хотим, чтобы IE6 и 7 загружали файл с dataURL'ами изображений (который часто может быть довольно увесистым), которые они всё равно не смогут понять.

Т.е. этой строчкой мы загружаем файл с dataURL'ами изображений во всех браузерах кроме Internet Explorer'ов (т.к. 6-ой и 7-ой dataURL'ы не понимают), а потом отдельно подключаем этот же файл для IE8 (т.к. он понимает dataURL'ы).
НЛО прилетело и опубликовало эту надпись здесь
Будьте внимательней! Для этого и написано [if gt IE 7], то есть если версия IE > 7.
А как же мы подключим этот файл для всех остальных браузеров (ФФ, Хром, Опера и т.д.) не подключив его в IE6 и 7?
НЛО прилетело и опубликовало эту надпись здесь
Эммм… ничего не понял. Мой крохотный мозг не в состоянии это переварить. Не могли бы вы привести полный пример кода, в котором мы подключаем файл для всех браузеров кроме IE6 и 7?
НЛО прилетело и опубликовало эту надпись здесь
Да, вы правы, большое спасибо за разъяснение!
1. Вопрос, насколько я понимаю, снят :)
2. Да, для позиционирования без использования лишних слоев-врапперов
3. Да, есть
4. Привык, что указание кодировки — не такое и критичное требование, а скорее просто правило хорошего тона.
НЛО прилетело и опубликовало эту надпись здесь
ого, мощно!
4. удивительно, но ИЕ6 понимает такое

ЗЫ автор если ты еще следишь за топиком, включи данные ссылки в пост
5-й пункты — а вот и не скажите. Недавно поставил последнюю Ubuntu (9.10), и был удивлен отсутствием в ней шрифта Arial. Вот тут-то Helvetica и пригодится.

Для справки: по умолчанию в Ubuntu 9.10 в Firefox в качестве шрифта без засечек используется DejaVu Sans, а в Opera'е Nimbus Sans L.
НЛО прилетело и опубликовало эту надпись здесь
Про MS Core Fonts я ничего сказать не могу, да и вообще с линуксом я на вы, только начинаю его изучать.

Вот как у меня отображается шрифт в FF, которому задано font-family: Arial, sans-serif;:
http://img37.imageshack.us/img37/7730/screenshotjzq.png
Так как Arail не установлен, то срабатывает sans-serif. И если я ничего не напутал (а я достаточно внимательно сравнивал шрифт), то данный текст отображается шрифтом DejaVu Sans.

А теперь добавим в свойства font-family шрифт Helvetica, чтобы строка имела вид font-family: Arial, Helvetica, sans-serif;. Вот что получилось:
http://img97.imageshack.us/img97/8716/screenshot1hr.png
Шрифт изменился. Я думаю, из этого можно сделать вывод, что Helvetica есть в стандартной упаковке Ubuntu 9.10 (никакого софта содержащего шрифты, на сколько я знаю, я не устанавливал, т.е. система практически чистая).
если я не ошибаюсь, и тахомы в убунте тоже нет
Вы не ошибаетесь. И Верданы тоже изначально нет. Но как сказали выше более 90% линуксоидов ставят MS Core Fonts.
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.