Thick As Brick – простейший html шаблон для верстки

    Я почему вредный был?
    Потому что у меня велосипеда не было!
    Мультфильм «Трое из Простоквашино»


    Когда десять раз делаешь одно и то же, на одиннадцатый раз ты волей-неволей начинаешь задумываться о том, как бы процесс оптимизировать. Так и с версткой: после десятка сверстанных страниц хочется слегка упростить свою задачу. Тут на помощь, конечно же, приходят разнообразные фреймворки (чего только стоит oocss или наикрутейший CSS-фреймворк от Яндекса или целая куча других не менее интересных фреймворков). Пригодятся и системы сборки (Ant стоит на службе у студии Артемия Лебедева, да и я потихоньку постигаю его Дао). Не стоит забывать и различные хаки и шаблоны лейаутов, коих в интернете бесчисленное множество.

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

    Чтобы решить эту высосанную из пальца нетривиальную задачу я написал простейший шаблон для верстки, который сильно облегчил мне работу над проектами. Шаблон примитивен и прост (потому так и зовется), на звание фреймворка ни в коем случае не претендует (минус в карму тому, кто обзовет его фреймворком! ;) ). Он несет в себе заранее объявленные CSS-классы для работы с меню, списками, формами, ресеты основных тегов (вроде сброса отступов у форм и правильных отступов у <p>) и еще кое-какие полезные для меня вкусности.

    Для самых нетерпеливых я дам ссылку на проект в Google Code, а самым любопытным, я расскажу, что Thick As Brick состоит из:
    • html-файла index.htm
      Этот файл содержит в себе ссылки на стили и яваскрипты, пустые метатеги и проверку наличия/отстутствия яваскрипта (более подробно о последнем пункте можно почитать в блоге у Виталия Харисова);
    • css-файла css/common.css
      Файл содержит минимальный набор ресетов (для body, a img, form, p и заголовков) и базовый набор классов (.no-margin, .no-float, .pseudo-link, ul.news, ul.menu, ul.tiles, table.reset, ul.reset и т. д.). Предполагается, что верстальщик не будет менять этот файл, а будет редактировать css/custom.css, речь о котором пойдет ниже
    • css-файла css/common-ie6.css
      Файл отвечает за совместимость самых общих классов с нашим любимым IE6
    • css-файла css/custom.css
      Файл несет в себе те стили, что можно менять в процессе работы над конкретным проектом (исходный custom.css пуст и содержит только комментарии ;) ).
    • css-файла css/custom-ie6.css
      Этот стилевой файл также обеспечивает совместимость css/custom.css с IE6.
    • js-файла js/script.js
      Пустой js-файл. Для дальнейшего «дописывания»
    • однопиксельного gif-а images/common/x.gif
      Файл пригождается в особо редких случаях

    Скачать шаблон можно отсюда в архиве или заэсвэнить свежую версию (архив и версия в SVN идентичны).

    Я очень надеюсь, что эта статья сподвигнет других пользователей если и не воспользоваться своими наработками, то хотя бы заставит их написать что-то свое и рассказать об этом в комментариях ;).

    Мой твиттер и блог

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 128

      +5
      неплохо… на самом деле полезно.Спасибо.
      • UFO just landed and posted this here
        • UFO just landed and posted this here
            +4
            Не пролезло снова. Может, скриншот?
              +4
              <занудство>и зачем только кнопку предпросмотр придумали</занудство>
            • UFO just landed and posted this here
            +1
            спасибо. почему бы не добавить к этому фрагменты кода типовых элементов, типа навигация, форма и тп
              +1
              Лично у меня из проекта в проект мигрируют «хлебные крошки» и счетчик страниц, однако говорить о том, что это общее для всех нельзя проектов нельзя: именно такие «хлебные крошки» и «пагинатор» рисует наш дизайнер, а другие дизайнеры это делают по-другому. Я подумаю на этот счет еще раз :)
                +1
                согласен
              +2
                0
                Да, спасибо. Исправил (обычно li не имеет отступов, но иногда встречается тааакое!)
                0
                Спасибо. Пригодится!
                  0
                  Пользуюсь csstemplater.com/
                  очень удобно
                    0
                    Да, штука прикольная, но она генерирует лейауты сайта, а тут — чистый шаблон
                    +9
                    не в целях попрекания, а в целях оптимизации пишу.

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

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

                    И сюда еще не хватает сброса стилей
                      +1
                      Сокращать можно, не спорю. И px можно не писать, согласен. Это не я виноват, это мои руки сами их пишут :) Привычка
                      • UFO just landed and posted this here
                        0
                        Какие конкретно сбросы нужны? :)
                          +1
                          целый топик о них
                          habrahabr.ru/blogs/css/45296/
                            –1
                            Вы немного путаете, мне кажется. Я не понаслышке знаю, что такое CSS-reset и с чем его едят, однако в приведенной вами статье больше рассказывается самая базовая теория.

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

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

                        Раньше существовало негласное правило: если в CSS прописано значение, но не указана какая именно единица измерения используется (px, %, em или ex), то это пиксели (кроме случаев, когда речь идет о размере шрифта). Теперь же, по стандартам: не указана единица измерения — значение не учитывается при верстке.
                          +1
                          Это относится только к ненулевым значениям. Ноль абсолютная величина независящая от единиц измерения, поэтому можно единицу измерения не писать.
                            0
                            А, пардон.
                            Ноль — да.
                        0
                        использую www.1kbgrid.com/
                          +10
                          www.designinfluences.com/fluid960gs/

                          Чей линк круче?
                            –2
                            Круто. Очень круто. Для плохо подготовленного верстальщика (т.е. для меня) — просто великолепно :)
                              0
                              Спасибо, очень полезный линк!
                                0
                                Не всё там здорово. Label'ы в формах не кликабельны. А в accordion и section menu на кликабельных элементах курсор не меняется на руку. В первом даже при наведении не меняется бэкграунд, так что, пока не прочитал слово accordion, не догадывался, что можно развернуть.
                                • UFO just landed and posted this here
                                  0
                                  ОХХХ! Спасибо огромное! Давно искал такую стройную систему, чтобы покопаться-разобраться что и как.
                                  0
                                  Эм. Похоже не внимателен, но так и не смог понять, где стянуть «наикрутейший CSS-фреймворк от Яндекса». Запрос в Яндексе «CSS Framework Яндекс» — не дал результата (только презентации и т.п.).
                                    +1
                                    Впервые я о нем услышал на Яндекс.Субботнике год назад. Зачатки (или огрызки?:) ) этого фреймворка выложены в нескольких местах. Полного фреймворка нет и, скорее всего, не появится: внутрикорпоративная разработка как бы :).
                                      0
                                      Стягивать его негде :) В презентации (из двух частей — теория и практика) изложена суть. Причем давольно таки понятно :) Свой CSS «парсер» они не выкладивали, на сколько мне извесно.
                                        +2
                                        Там не парсер, скорее, а сборщик css. Всем желающим я все же советую посмотреть статью Россомахина, или статью Виталия Харисова о независимых блоках. Фреймворк постараюсь нагуглить. Был где-то точно
                                          0
                                          если я правильно наЯндексил, то: css-framework.ru
                                            0
                                            Неправильно. Правильно см. ниже.
                                        +3
                                        Это фреймворк не Яндекса, а лично Виталия Харисова и еще нескольких разработчиков. Виталий на одной из конференций говорил, что этот фреймворк Яндекс никак не поддерживает.

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

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

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

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

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

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

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

                                                P.S. Автор, Вас работа постоянная не интересует? ;-)
                                                • UFO just landed and posted this here
                                                • UFO just landed and posted this here
                                                    0
                                                    В основном он нужен для скриптов, обрабатывающих png24 в ие6. Также с ним можно делать столько всего интересного :)
                                                    Я, кстати, почему-то использую вместо gif -> png8
                                                    • UFO just landed and posted this here
                                                        0
                                                        Картинка нужна для извращений.

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

                                                        Еще иногда приходится делать прозрачные ссылки (например, на неравномерно распределенных и покрашенных меню с фоном-подложкой). Однако если нет картинок, ссылки не будут видны. Тут и приходит на помощь однопиксельная картинка-подложка, «растянутая» в ссылке: вместо нее будет отображаться рамка и alt
                                                        • UFO just landed and posted this here
                                                            +1
                                                            Проблема в том, что в случае лага в сети или отключенных изображений, картинок на сайте не будет. Прозрачную ссылкку a.link найти будет сложно.

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

                                                            Конечно же, от такого приема можно бы и отказаться: проблемы с интернетом случаются все реже. Однако увы, они все равно бывают: двадцать первый век дошел не до всех
                                                            • UFO just landed and posted this here
                                                          • UFO just landed and posted this here
                                                          +2
                                                          А у однопиксельного GIF-а размер на 100 байт меньше PNG8 ;)
                                                          • UFO just landed and posted this here
                                                              0
                                                              забавно, н у nginx'a есть даже плагин который генерирует это картинку и хранит ее в памяти :)
                                                            • UFO just landed and posted this here
                                                                +1
                                                                таких viewport'ов пока нет- 10000x10000 :)
                                                                  0
                                                                  png 16x16
                                                                    +1
                                                                    У ie7 точно тормоза будут с png такого размера, т.к. у него большие проблемы с производительностью начинаются, когда png повторяется очень много раз (не зависит от типа png).

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

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

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

                                                                              Когда у нас отступы в em — при увеличении размера шрифта увеличатся не только шрифты но и пропорционально увеличатся отступы, будет красиво.
                                                                                0
                                                                                Смотря о каких отступах мы говорим. Если о верхнем/нижнем — согласен. С левыми/правыми так делать не стоит. Все, что я хотел донести :-)
                                                                                  +2
                                                                                  конечно о верхнем/нижнем :)
                                                                            • UFO just landed and posted this here
                                                                                0
                                                                                а смысл пиксель-в-пиксель для текста?
                                                                                заказчик делает скриншот и сличает в фотошопе с оригиналом? :)
                                                                                • UFO just landed and posted this here
                                                                                    +1
                                                                                    реально клиент смотрит? о.О
                                                                                    или всё-таки манагер дурью мается?

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

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

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

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

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

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

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

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

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

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

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

                                                                                    +3
                                                                                    думаю у каждого более-менее опытного верстальщика есть свой подобный шаблон, заточенный под себя ;)
                                                                                      +1
                                                                                      Нашел ваш шаблон весьма интересным и взял на вооружение некоторые ресеты, которые вы у себя используете в 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-файла?

                                                                                      Буду благодарен если ответите на эти вопросы.
                                                                                        0
                                                                                        Про DOCTYPE уже прочитал.
                                                                                          +1
                                                                                          по четвертому пункту я могу ответить, что кодировка может быть разной. От настроек сервера еще зависит
                                                                                            0
                                                                                            И, если интересно, то можете взглянуть на мой вариант шаблонного index.html файла — http://willmake.it/test/template/. Я там на всякуй случай в нём комментарии оставил.
                                                                                            • UFO just landed and posted this here
                                                                                                0
                                                                                                Вообще-то лучше писать заголовок после определения кодировки

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

                                                                                                Ответ на вторую часть комментария…
                                                                                                От строчки
                                                                                                <!--[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'ы).
                                                                                                • UFO just landed and posted this here
                                                                                                    0
                                                                                                    Будьте внимательней! Для этого и написано [if gt IE 7], то есть если версия IE > 7.
                                                                                                    А как же мы подключим этот файл для всех остальных браузеров (ФФ, Хром, Опера и т.д.) не подключив его в IE6 и 7?
                                                                                                    • UFO just landed and posted this here
                                                                                                        0
                                                                                                        Эммм… ничего не понял. Мой крохотный мозг не в состоянии это переварить. Не могли бы вы привести полный пример кода, в котором мы подключаем файл для всех браузеров кроме IE6 и 7?
                                                                                                        • UFO just landed and posted this here
                                                                                                            0
                                                                                                            Да, вы правы, большое спасибо за разъяснение!
                                                                                              0
                                                                                              1. Вопрос, насколько я понимаю, снят :)
                                                                                              2. Да, для позиционирования без использования лишних слоев-врапперов
                                                                                              3. Да, есть
                                                                                              4. Привык, что указание кодировки — не такое и критичное требование, а скорее просто правило хорошего тона.
                                                                                            • UFO just landed and posted this here
                                                                                                0
                                                                                                ого, мощно!
                                                                                                4. удивительно, но ИЕ6 понимает такое

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

                                                                                                  Для справки: по умолчанию в Ubuntu 9.10 в Firefox в качестве шрифта без засечек используется DejaVu Sans, а в Opera'е Nimbus Sans L.
                                                                                                  • UFO just landed and posted this here
                                                                                                      0
                                                                                                      Про 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 (никакого софта содержащего шрифты, на сколько я знаю, я не устанавливал, т.е. система практически чистая).
                                                                                                      0
                                                                                                      если я не ошибаюсь, и тахомы в убунте тоже нет
                                                                                                        0
                                                                                                        Вы не ошибаетесь. И Верданы тоже изначально нет. Но как сказали выше более 90% линуксоидов ставят MS Core Fonts.
                                                                                                    0
                                                                                                    спасибо, полезное!

                                                                                                    Only users with full accounts can post comments. Log in, please.