Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 128
неплохо… на самом деле полезно.Спасибо.
спасибо. почему бы не добавить к этому фрагменты кода типовых элементов, типа навигация, форма и тп
code.google.com/p/thick-as-brick/source/browse/trunk/html/css/common.css
129 строка «ul.reset li» не?
129 строка «ul.reset li» не?
Спасибо. Пригодится!
Пользуюсь csstemplater.com/
очень удобно
очень удобно
не в целях попрекания, а в целях оптимизации пишу.
0px — просто как 0 (зачем лишние буквы?)
margin: 10px 0px 10px 0px — margin:10px 0;
margin: 0px auto 0px auto — margin:0 auto;
вроде мелочь, а приятно.
И сюда еще не хватает сброса стилей
0px — просто как 0 (зачем лишние буквы?)
margin: 10px 0px 10px 0px — margin:10px 0;
margin: 0px auto 0px auto — margin:0 auto;
вроде мелочь, а приятно.
И сюда еще не хватает сброса стилей
Сокращать можно, не спорю. И px можно не писать, согласен. Это не я виноват, это мои руки сами их пишут :) Привычка
Какие конкретно сбросы нужны? :)
целый топик о них
habrahabr.ru/blogs/css/45296/
habrahabr.ru/blogs/css/45296/
Вы немного путаете, мне кажется. Я не понаслышке знаю, что такое CSS-reset и с чем его едят, однако в приведенной вами статье больше рассказывается самая базовая теория.
Ресеты в моем коде (если посмотреть в css/common.css) есть. Ресеты вида * {margin: 0px padding: 0px;}, которые очень часто встречаются в статье, не годятся. Это самый опасный, на мой взгляд, ресет, особенно, когда его тащат с собой всякие jQuery плагины ;).
Вообще любой желающий может взять и допилить мой шаблон (благо MIT лицензия это позволяет :) ). Я буду только за! :)
Ресеты в моем коде (если посмотреть в css/common.css) есть. Ресеты вида * {margin: 0px padding: 0px;}, которые очень часто встречаются в статье, не годятся. Это самый опасный, на мой взгляд, ресет, особенно, когда его тащат с собой всякие jQuery плагины ;).
Вообще любой желающий может взять и допилить мой шаблон (благо MIT лицензия это позволяет :) ). Я буду только за! :)
В strict значение без указания единиц измерения работать не будет.
Раньше существовало негласное правило: если в CSS прописано значение, но не указана какая именно единица измерения используется (px, %, em или ex), то это пиксели (кроме случаев, когда речь идет о размере шрифта). Теперь же, по стандартам: не указана единица измерения — значение не учитывается при верстке.
Раньше существовало негласное правило: если в CSS прописано значение, но не указана какая именно единица измерения используется (px, %, em или ex), то это пиксели (кроме случаев, когда речь идет о размере шрифта). Теперь же, по стандартам: не указана единица измерения — значение не учитывается при верстке.
использую www.1kbgrid.com/
Круто. Очень круто. Для плохо подготовленного верстальщика (т.е. для меня) — просто великолепно :)
Спасибо, очень полезный линк!
Не всё там здорово. Label'ы в формах не кликабельны. А в accordion и section menu на кликабельных элементах курсор не меняется на руку. В первом даже при наведении не меняется бэкграунд, так что, пока не прочитал слово accordion, не догадывался, что можно развернуть.
ОХХХ! Спасибо огромное! Давно искал такую стройную систему, чтобы покопаться-разобраться что и как.
Эм. Похоже не внимателен, но так и не смог понять, где стянуть «наикрутейший CSS-фреймворк от Яндекса». Запрос в Яндексе «CSS Framework Яндекс» — не дал результата (только презентации и т.п.).
Впервые я о нем услышал на Яндекс.Субботнике год назад. Зачатки (или огрызки?:) ) этого фреймворка выложены в нескольких местах. Полного фреймворка нет и, скорее всего, не появится: внутрикорпоративная разработка как бы :).
Стягивать его негде :) В презентации (из двух частей — теория и практика) изложена суть. Причем давольно таки понятно :) Свой CSS «парсер» они не выкладивали, на сколько мне извесно.
Там не парсер, скорее, а сборщик css. Всем желающим я все же советую посмотреть статью Россомахина, или статью Виталия Харисова о независимых блоках. Фреймворк постараюсь нагуглить. Был где-то точно
Это фреймворк не Яндекса, а лично Виталия Харисова и еще нескольких разработчиков. Виталий на одной из конференций говорил, что этот фреймворк Яндекс никак не поддерживает.
«Наикрутейший» — это потому что он МЕГАуниверсален, соответственно с огромным избытком кода.
«Наикрутейший» — это потому что он МЕГАуниверсален, соответственно с огромным избытком кода.
да, фреймворк реально крутой. Везде используем. Только немного непривычно вручную с ним верстать, а так все супер.
+ a.someclass:hover конечно же для IE
+ a.someclass:hover конечно же для IE
А можешь код показать? Интересно, как именно и что используете? Ибо фреймворка-то ещё нет по факту.
Виталий, вы бы сказали, наконец, стоит нам ждать релиз чудо-фреймворка или нет. А то ведь с Яндекс.Субботника год прошел, а мы все слюной заливаемся! :)
да. Хотя я бы не назвал это совсем Monkey Joe, но сделано максимально (я надеюсь) согласно с правилами
code.google.com/p/web-optimizator/source/browse/trunk/libs/css/main.css
Чистых «независимых блоков» там почти нет. Некоторые элементы просто повторно используются с измененными (в зависимости от окружения) стилями. Не более.
Ну да, естественно, это почти финальная версия, поэтому пожато почти все :)
code.google.com/p/web-optimizator/source/browse/trunk/libs/css/main.css
Чистых «независимых блоков» там почти нет. Некоторые элементы просто повторно используются с измененными (в зависимости от окружения) стилями. Не более.
Ну да, естественно, это почти финальная версия, поэтому пожато почти все :)
ммм, да, там абракадабра сплошная :)
Здесь пример попроще, и блоков там тоже почти нет
www.web-optimizer.us/i/css/main4.css
Здесь пример попроще, и блоков там тоже почти нет
www.web-optimizer.us/i/css/main4.css
О, сам Виталий Харисов здесь. Спасибо вам за фреймворк, очень круто. Мы используем его тут — www.astrology.com — ну то есть упрощенную его версию и заточенную под рельсы, есть только blocks (b-), mixins (m-) и layouts (l-). Работает прекрасно, иностранные коллеги довольно быстро поняли идею и вся команда легко перешла на него. Не нарадуемся. :)
да, еще вспомнил: на западе почти тот же самый концепт имеет название Object Oriented CSS
Это не фреймворк, это теория его построения. Сам фреймворк пока не опубликован (ибо пока не создан в том виде, как я хочу).
ИМХО — бред :) Особенно сразу в цсс пихать хаки, которые могут и не понадобиться (зоом).
Так можно и для ПХП выложить структуру с папочками и пустыми файлами содержащими открытые и закрытые пхп теги :)
Так можно и для ПХП выложить структуру с папочками и пустыми файлами содержащими открытые и закрытые пхп теги :)
Неплохая затея.
Мы у себя в Indentium уже давно разработали болванку, с которой начинается любая верстка. Учитывая то, что над одним проектом обычно трудится не менее 2-3 человек, в придачу к болванке была расписана подробнейшая документация разработки.
Позволю себе выложить болванку.
P.S. Автор, Вас работа постоянная не интересует? ;-)
Мы у себя в Indentium уже давно разработали болванку, с которой начинается любая верстка. Учитывая то, что над одним проектом обычно трудится не менее 2-3 человек, в придачу к болванке была расписана подробнейшая документация разработки.
Позволю себе выложить болванку.
P.S. Автор, Вас работа постоянная не интересует? ;-)
В основном он нужен для скриптов, обрабатывающих png24 в ие6. Также с ним можно делать столько всего интересного :)
Я, кстати, почему-то использую вместо gif -> png8
Я, кстати, почему-то использую вместо gif -> png8
Картинка нужна для извращений.
Студия Артемия Лебедева советует использовать для борьбы с «прыжками» блоков при эмуляции position:fixed.
Еще иногда приходится делать прозрачные ссылки (например, на неравномерно распределенных и покрашенных меню с фоном-подложкой). Однако если нет картинок, ссылки не будут видны. Тут и приходит на помощь однопиксельная картинка-подложка, «растянутая» в ссылке: вместо нее будет отображаться рамка и alt
Студия Артемия Лебедева советует использовать для борьбы с «прыжками» блоков при эмуляции position:fixed.
Еще иногда приходится делать прозрачные ссылки (например, на неравномерно распределенных и покрашенных меню с фоном-подложкой). Однако если нет картинок, ссылки не будут видны. Тут и приходит на помощь однопиксельная картинка-подложка, «растянутая» в ссылке: вместо нее будет отображаться рамка и alt
Проблема в том, что в случае лага в сети или отключенных изображений, картинок на сайте не будет. Прозрачную ссылкку a.link найти будет сложно.
Если же написать
и для картинки указать размеры в стилях, то в случае с включенными картинками разницы не будет, а с отключенными вместо картинки в пункте меню будет отображаться альт и рамка.
Конечно же, от такого приема можно бы и отказаться: проблемы с интернетом случаются все реже. Однако увы, они все равно бывают: двадцать первый век дошел не до всех
Если же написать
и для картинки указать размеры в стилях, то в случае с включенными картинками разницы не будет, а с отключенными вместо картинки в пункте меню будет отображаться альт и рамка.Конечно же, от такого приема можно бы и отказаться: проблемы с интернетом случаются все реже. Однако увы, они все равно бывают: двадцать первый век дошел не до всех
А у однопиксельного GIF-а размер на 100 байт меньше PNG8 ;)
таких viewport'ов пока нет- 10000x10000 :)
png 16x16
У ie7 точно тормоза будут с png такого размера, т.к. у него большие проблемы с производительностью начинаются, когда png повторяется очень много раз (не зависит от типа png).
По этой причине использую для повторяющихся пнг размеры от 100 на 100 пикселей.
По этой причине использую для повторяющихся пнг размеры от 100 на 100 пикселей.
Ну если еще сжать pngoptimizer-ом, то всего-лишь на 50 байт =)
Cкрипт на питоне для склейки и оптимизации CSS pastie.org/768846
Может кому пригодится.
Может кому пригодится.
* xhtml transitional пора менять на html5 — и в ногу со временем будете и (главное) в настоящем standarts mode.
* если шрифты в em то и margin для текстовых элементов должен быть в em
однако смотрю тема интересна хабрасообществу, надо будет наши наработки выложить :)
* если шрифты в em то и margin для текстовых элементов должен быть в em
однако смотрю тема интересна хабрасообществу, надо будет наши наработки выложить :)
«если шрифты в em то и margin для текстовых элементов должен быть в em» — чаще всего это никак не вяжется с тем, что нарисовал дизайнер. Тогда уж все размеры в em'ах задавали бы.
а в чём проблема вместо столько-тоPX написать столько-тоEM?
можно ж хоть 0.833em писать — всё работает.
минус не мой)
можно ж хоть 0.833em писать — всё работает.
минус не мой)
Конечно, работает. Просто для таких изяществ весь layout должен быть резиновым, расчитанным на em'ах. Вы просто забываете про убогие браузеры, в которых уже никогда не появится нормальный zoom для изображений, а при увеличении шрифта там также увеличатся и отступы, а родительский блок останется таким же.
родительский блок останется тем же только если его размер зафиксирован в px, а это уже частный случай, в общем же (в обычном тексте) — высота родительского блока равна высоте текста. Ив этом частном случае, даже если не задавать отступы в em, при увеличении шрифта всё равно текст выйдет за его пределы. Не, ну можно задавать высоту в em, и прочее, но смысл? те, кто увеличивают только шрифт текста знают на что идут.
Когда у нас отступы в em — при увеличении размера шрифта увеличатся не только шрифты но и пропорционально увеличатся отступы, будет красиво.
Когда у нас отступы в em — при увеличении размера шрифта увеличатся не только шрифты но и пропорционально увеличатся отступы, будет красиво.
Нет смысла тащить с собой кучу лишнего CSS-кода. Кроме того, многим верстальщикам гораздо проще написать качественный код с нуля, чем перегружать кучу заранее объявленных бесполезных классов.
интерсно, с чего вы решили, что фреймворк, который разрабатывается внутри Яндекса тащит за собой что-то. Если вы посмотрите презентации и записи, то убедитес, что основная идеология вообще не связана с общими стилями, покрывающими неиспользуемые элементы. Иными словами используется только то, что нужно и ни байта лишнего. Как сказал Виталя, следите за клубом.
интерсно, с чего вы решили, что фреймворк, который разрабатывается внутри Яндекса тащит за собой что-то. Если вы посмотрите презентации и записи, то убедитес, что основная идеология вообще не связана с общими стилями, покрывающими неиспользуемые элементы. Иными словами используется только то, что нужно и ни байта лишнего. Как сказал Виталя, следите за клубом.
Ох… Наехали-таки. Формулировка про кучу лишнего кода, видимо, была неверно воспринята как атака на YACF. Давайте по пунктам.
1. Я своими ушами слушал рассказ Виталия на тему фреймворка и помню, что каждый стиль хранится в отдельном файле и файлы собираются в общий :)
2. В моем посте нет ни слова про то, что этот фреймворк плох.
3. В заголовке поста написано слово «шаблон», в тексте указано, что то, что я сделал ни в коем случае не подпадает под гордое звание «фреймворка» (и никогда не подпадет, уж поверьте ;) ).
«Не ругайся, нащяльника», короче говоря ;)
1. Я своими ушами слушал рассказ Виталия на тему фреймворка и помню, что каждый стиль хранится в отдельном файле и файлы собираются в общий :)
2. В моем посте нет ни слова про то, что этот фреймворк плох.
3. В заголовке поста написано слово «шаблон», в тексте указано, что то, что я сделал ни в коем случае не подпадает под гордое звание «фреймворка» (и никогда не подпадет, уж поверьте ;) ).
«Не ругайся, нащяльника», короче говоря ;)
автор, а почему не strict?
Хороший вопрос. В strict сильно напрягает запрет iframe Фрейм нет-нет, да и появляется в разных jQuery плагинах, которые я, увы, не могу контролировать и в разных «информерах» и «модулях», которые до зарезу требуются клиентам на их сайтах (про это вообще песня отдельная). Впрочем, подумаю на этот счет
Нет такого http-заголовка description и keywords тоже нет. А так, даже в начальной заготовке много неоптимизированного кода. про единицы измерения у нулей и про грамотное использование шортхендов уже сказали, я скажу про нелогичные селекторы типа html, html#js, html#nojs {..} (именно так сгруппированные). Зачем тут указаны элементы с айдишниками? Они ведь и так будут наследовать стили от html. Да и указание имени элемента перед его id не имеет практически никакого смысла (кроме повышения специфичности на 1). Не уверен, что вы в каждом своем проекте используйте всегда все эти стили полностью => эффективность применения таких заготовок стремится к нулю. Лучше создать набор отдельных блоков, которые наиболее часто используются + глобальный ресет и глобальные блоки, а дальше уже делать блоки относящиеся к проекту, короче как описано в теории «наикрутейшего фреймворка от Яндекса».
я кстати считаю что указывать имя элемента перед id/class — хороший стиль, так понятно с чем имеешь дело когда читаешь код
Глобальный ресет зло. Читайте туже самую теорию того же самого. =)
Про скорость селекторов читал. Но не уверен, что всегда целесообразно оптимизировать селекторы это уже скорее относится к экстремальным методам оптимизации и необходимо только на слишком больших (по количеству дом-элементов) и динамичных (где много JS интерактивности) страницах. Слишком уж многим нужно жертвовать, чтобы везде использовать быстрые селекторы.
Слишком многим? Чем это?
Ну, как минимум, совсем отказаться от селекторов по имени элемента. Отказаться от глобального ресета. Практически на все навесить классы.
Давайте по частям :)
Исправил, вы правы
Да, вы правы. Ноль абсолютен, и я про это давно в курсе. Но px будет: привычка
И правы и не правы одновременно. Ежу понятно, что логики в таком написании никакой… Однако… Я уверен, вы обратили внимание на строку, выполняющую замену id у тега html. Я думаю, вы в курсе про то, что webkit-браузеры не всегда корректно сбрасывают стили у тега html, если у html идентификатор был заменен. По этой причине мне приходится описывать этот тег трижды.
Нет такого 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-файла?
Буду благодарен если ответите на эти вопросы.
У меня есть несколько вопросов (если ответы на какие-то из них уже звучали в комментариях, то просто скажите и я сам их найду):
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'ы).
1. Вопрос, насколько я понимаю, снят :)
2. Да, для позиционирования без использования лишних слоев-врапперов
3. Да, есть
4. Привык, что указание кодировки — не такое и критичное требование, а скорее просто правило хорошего тона.
2. Да, для позиционирования без использования лишних слоев-врапперов
3. Да, есть
4. Привык, что указание кодировки — не такое и критичное требование, а скорее просто правило хорошего тона.
ого, мощно!
4. удивительно, но ИЕ6 понимает такое
ЗЫ автор если ты еще следишь за топиком, включи данные ссылки в пост
4. удивительно, но ИЕ6 понимает такое
ЗЫ автор если ты еще следишь за топиком, включи данные ссылки в пост
5-й пункты — а вот и не скажите. Недавно поставил последнюю Ubuntu (9.10), и был удивлен отсутствием в ней шрифта Arial. Вот тут-то Helvetica и пригодится.
Для справки: по умолчанию в Ubuntu 9.10 в Firefox в качестве шрифта без засечек используется DejaVu Sans, а в Opera'е Nimbus Sans L.
Для справки: по умолчанию в 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 (никакого софта содержащего шрифты, на сколько я знаю, я не устанавливал, т.е. система практически чистая).
Вот как у меня отображается шрифт в 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.
спасибо, полезное!
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Thick As Brick – простейший html шаблон для верстки