Пропустить навигацию

Highe® — Веб и стандарты


70 приемов улучшения CSS верстки

15.05.07 , , ,

CSS верстка далеко не всегда простая штука. В зависимости от вашего опыта и навыков CSS верстка может стать настоящим кошмаром, особенно, если вы не уверены, какие селекторы действительно применены к элементам данного документа. При создании семантически правильной разметки, простейший способ минимизировать запутанность кода — правильное и уместное использование как необходимых и хорошо знакомых, так и не очень атрибутов и свойств CSS.

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

В итоге мы получили более 70 полезных и искусных методов, призванных улучшить качество CSS верстки. К конце статьи приведены соответствующие ссылки на статьи, посвященные данным методам.

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

1.1. Процесс: Начальный этап

  • После того, как готов эскиз(дизайн) сайта, начните с пустой страницы, наполненной контентом
    Включите в нее header, навигацию, частично контент и footer. Потом добавляйте html разметку. Потом CSS. Подобный подход очень эффективен
    . [CSSing]
  • Сделайте reset всех свойств CSS
    Часто может возникать необходимость задания дефолтных значений свойств элементам. Кому-то нравится задавать в самом начале CSS файла нулевые отступы и границы всем элементам. Eric Meyer’s Global Reset, Christian Montoya’s initial CSS file, Mike Rundle’s initial CSS file, Ping Mag’s initial CSS file.
    [Roger Johansson]
  • Используйте основную таблицу стилей (master stylesheet)
    Наиболее распространенной ошибкой, которую мне часто приходилось наблюдать как у начинающих так и достаточно продвинутых разработчиков, это, то что и те и другие забывают удалять дефолтный стиль браузера. Это ведет к несовместимости и различию отображения дизайна в различных браузерах, вызывая негативные отзывы пользователей о разработчиках подобных сайтов. Естественно, это не совсем заслуженные упреки, но тем не менее, перед началом верстки любого сайта, не забывайте сбрасывать стиль и привести его к начальным значениям.
    [Master Stylesheet: The Most Useful CSS Technique], [Ryan Parr]
master.css
@import url("reset.css");
@import url("global.css");
@import url("flash.css");
@import url("structure.css");
<style type="text/css" media="Screen">
/*\*/@import url("css/master.css");/**/
</style>
  • Создайте библиотеку полезных CSS классов. Полезна при отладке, но следует избегать в готовой версии (отделите разметку от представления). Поскольку можно использовать несколько классов для одного элемента (например, <p class="floatLeft alignLeft width75">...</p>) пользуйтесь ими при тестировании и отладке разметки. [Richard K. Miller]

CSS:

.width100 { width: 100%; }
.width75 { width: 75%; }
.width50 { width: 50%; }
.floatLeft { float: left; }
.floatRight { float: right; }
.alignLeft { text-align: left; }
.alignRight { text-align: right; }

1.2. Организация CSS кода

  • Систематизируйте ваши стили, используя главные таблицы стилей (master style sheets).
    Систематизация CSS позволит вам легко обслуживать и поддерживать сайт в будущем. Начинайте с главной таблицы стилей. В этот стиль импортируйте reset.css, global.css, flash.css (по мере необходимости) и structure.cssи возможно стиль со шрифтами. Здесь приведен пример «основной» таблицы стилей и способ включения ее в документ.
h2 { }
#snapshot_box h2 {
padding: 0 0 6px 0;
font: bold 14px/14px "Verdana", sans-serif; }
#main_side h2 {
color: #444;
font: bold 14px/14px "Verdana", sans-serif; }
.sidetagselection h2 {
color: #fff;
font: bold 14px/14px "Verdana", sans-serif; }
  • Систематизируйте свой стиль, используя комментарии. Разделите таблицу стилей на секции, например, Global Styles (body, параграфы, списки и т.д.), Header, Page Structure, Headings, гарнитуры шрифтов, формы, комментарии, дополнения. [5 Tips for Organizing Your CSS]
/* -----------------------------------*/
/* ---------->>> GLOBAL <<<-----------*/
/* -----------------------------------*/
  • Систематизируйте свой стиль, создав ее содержание (TOC). Вверху CSS файла впишите содержание вашего стиля. Например, можно обозначить различные части CSS файла (header, main, footer и т.д.). Затем использовать не вызывающие сомнения разрывы для разделения секций в коде. [5 Steps to CSS Heaven]
  • Систематизируйте свой стиль, указывая свойства в алфавитном порядке.
    Не знаю, откуда мне в голову пришла эта мысль, но я упорядочил в алфавитном порядке все свойства в CSS файле, и верите или нет, сейчас намного проще найти определенное свойство.
    [Christian Montoya]
body {
background:#fdfdfd;
color:#333;
font-size:1em;
line-height:1.4;
margin:0;
padding:0;
}
  • Объедините код в блоки.
    Для некоторых это рекомендация не будет новой, но иногда я вижу в CSS файлы в кодом, не сгруппированным в «секции». Делается это для легкости обслуживания сайта в будущем, через недели, месяцы и даже годы после создания сайта. Вы будете тратить меньше времени на поиск классов и элементов, свойства которых необходимо изменить. Например, /* Structure */, /* Typography */ и т.д.
    [CSS Tips and Tricks]
  • Стремитесь к совершенству. Как только вы написали стиль, разбили его на секции, пора подумать, где расположить селекторы чтобы соблюдалась структура в вашей разметке. [Ryan Parr]
  • Разбейте созданную таблицу стилей на отдельные блоки.
    Обычно я разбиваю таблицу стилей на отдельные блоки. Первый, это прямое декларирование элементов. Определение свойств для элемента body, стиля ссылок, некоторых заголовков , сброс границ и отступов и т.д. […] После декларирования элементов, я декларирую классы, такие как сообщения об ошибках, сносках и пр. […] Я начинаю декларировать основные контейнеры и затем описываю стили для элементов внутри этих контейнеров. Очень быстро я могу найти, почему моя страница выглядит криво и поправить любую неточность. Я так же декларирую все контейнеры, даже если они не имею специфических свойств
    . [Jonathan Snook]

1.3. Процесс: Работаем с ID, классами, селекторами и свойствами.

  • Сведите к минимуму кол-во контейнеров
    Не допускайте разрастания структуры вашего документа. Начинающие разработчики используют слишком много элементов div, подобно вложенным таблицам. Рассмотрите все варианты и попробуйте обойтись от дополнительных элементов div, используя лишь средства CSS.
    [Ryan Parr]
  • Сведите кол-во свойств к минимуму..
    Используйте CSS разумно. Под данным правилом может быть целый ряд подправил: если в добавлении нового правила нет необходимости, не добавляйте это правило; если вы не уверены в правильности добавления правила, не добавляйте его; если вы чувствуете, что одно и тоже правило слишком часто используется, подумайте, как обозначить его только в одном месте.
    [CSSing]
  • Сведите кол-во селекторов к минимуму.
    Избегайте ненужных селекторов. Чем меньше селекторов вы используете, тем реже вам придется переопределять стиль - а это означает простоту в решении каких бы то нибыло проблем.
    [Jonathan Snook]
  • Сведите кол-во хаков к минимуму
    Не пользуйтесь хаками, если это только не известный и задокументированный баг. Это достаточно важный момент, поскольку зачастую разработчики применяют хаки, там где вполне можно обойтись и без них. Если вы предполагаете использовать хаком, попробуйте сначала воспользоваться поиском и решить проблему другим способом.
    [10 Quick Tips for an easier CSS life]
  • Используйте константы CSS для более быстрой разработки стиля.
    Константы -- это фиксированные значения, использующиеся и повторяющиеся в вашем коде. [..] Единственный способ восполнить недостаток констант в CSS это создать некоторые закомментированные определения в начале CSS файла, обозначив их как «constants». Наиболее часто константы используются для создания «словаря цвета». Т.е. у вас есть справочник использующихся на сайте цветов, для избежание повторений и ошибок. Если вам необходимо изменить цвета, то у вас всегда есть список для редактирования и замены по всему CSS файлу.
    [Rachel Andrew]
# /*
# Dark grey (text): #333333
# Dark Blue (headings, links) #000066
# Mid Blue (header) #333399
# Light blue (top navigation) #CCCCFF
# Mid grey: #666666
# */
  • Используйте общепринятую систему наименований. Имея систему наименований для ID и классов сэкономит вам кучу времени при поиске ошибок и обновлении документа. Особенно это касается больших CSS файлов. Я рекомендую использовать модель parent_child. [10 CSS Tips]
  • Давайте названия классам и ID правильно, в соответствии с семантикой.
    Мы хотим избежать названий, предполагающих аспекты представления (presentational aspects). В противном случае, если мы дадим название подобное right-col, вполне возможно, что CSS впоследствии изменится и наш «right-col» не будет правой колонкой, а переместится влево, например. Это приведет к некоторой путанице в будущем, поэтому, лучше избегать подобной системы именования вообще. [Garrett Dimon]
  • Группируйте селекторы, имеющие общие атрибуты.
    Группируйте селекторы. Когда несколько ID, классов и элементов используют одинаковые свойства, имеет смысл группировать их через запятую, чтобы не указывать по отдельности. Это хорошо экономит место, много места. [Roger Johansson]
  • Если вы будете использовать какое-то свойство много раз, отделите его.
    Если вы собираетесь использовать одно и то же свойство неоднократно, то отделите его в отдельный стиль. Этим вам не придется его прописывать несколько раз и за раз менять его свойство по всему сайту.
    [5 Steps to CSS Heaven]
  • Названия ID и классов давайте как можно выше в структурной иерархии документа. Стремитесь придумывать контекстуальные селекторы. Не бойтесь называть селекторы словосочетаниями. Длинные названия легче читаются и проще понимаются. [Chric Casciano]
  • Научитесь использовать каскадную природу CSS.
    Скажем, у вас есть два похожих блока на сайте, но с небольшими отличиями -- у вас есть возможность записать стиль в CSS для каждого блока отдельно, или для обоих сразу, а затем для каждого из них добавить свой собственный стиль.
    [5 Steps to CSS heaven]
  • Пользуйтесь полезными тэгами, типа <small>, <em> и <strong>.
    Часто в вашем дизайне есть секция, в которой вес шрифта или вид должен меняться на одной строке. Попадая на случайные div'ы и классы мне кажется они не будут семантическими и противоречат назначению вашего xhtml кода в любом другом месте.
    Потому пользуйтесь семантическими тэгами. [Mike Rundle’s 5 CSS Tips]

1.4. Процесс: Используйте сокращения

  • Сокращайте шестнадцатеричные (hexadecimal) названия цветов.
    #000 тоже самое, что и #000000, #369 тоже самое, что и #336699.
    [Roger Johansson]
  • Определите псевдо классы для ссылок в порядке LoVe/HAte (Link, Visited, Hover, Active).
    Для того, чтобы быть полностью уверенным в правильности отображения ваших ссылок, располагайте стили в порядке “link-visited-hover-active” или “LVHA”. Если вас беспокоит псевдо класс фокуса, его можно вписывать внизу.
    [Eric Meyer]
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: purple; }
a:active { color: red; }
  • Определите границы и отступы элементов в порядке TRouBLed (Top, Right, Bottom, Left).
    Границы, отступы и бордюры задаются по часовой стрелке, верх, право, низ, лево.
    [Roger Johansson]
  • Можно использовать сокращенные формы записи. Использование сокращений для свойств margin, padding и border сэкономит кучу места.

CSS:

margin: top right bottom left;
margin:1em 0 2em 0.5em;
(margin-top: 1em; margin-right: 0; margin-bottom: 2em; margin-left: 0.5em;)

CSS:

border:width style color;
border:1px solid #000;

CSS:

background: color image repeat attachment position;
background:#f00 url(background.gif) no-repeat fixed 0 0;

CSS:

font: font-style (italic/normal) font-variant (small-caps)
      font-weight font-size/line-height font-family;
font: italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

1.5. Процесс: Установка шрифтов

  • Для работы с единицами em как с px установите font-size для body в размере 62.5%. Размер шрифта font-size по умолчанию равен 16px; применяя это правило, вы получаете 1em приближенно равным 10px (16 x 62.5% = 10).
    Я намеренно установил размер шрифта в body равным 62.5%. Это позволяет думать в относительных единицах em как в px, например, 1.3em это 13px.
    [Jonathan Snook]
  • Используйте универсальную кодировку.
    [..] Смысл использования одной универсальной кодировки в том, чтобы охватить все возможные случаи. К счастью такая существует: UTF-8, основанная на Unicode, охватывающая символы всех языков. В страницу вставляется след. образом (код ниже)
    [20 pro tips]
<meta http-equiv="content-type" content="text/ html;charset=utf-8" />
  • При помощи CSS можно менять прописные буквы. Если что-то должно быть написано заглавными буквами, например заголовки, вместо переписывания текста, проще воспользоваться средствами CSS. Следующий код сделает во всех заголовках прописные буквы. [20 pro tips]
h1 {
text-transform: uppercase;
}
  • Автоматически можно установить для текста малые прописные буквы small-caps. Свойство font-variant используется для задания small-caps, это значит, что все строчные буквы будут изменены на прописные, но размеров меньше, по сравнению с остальным текстом.
h1 {
font-variant: small-caps;
}
  • Определите font-families.
    При декларировании определенного шрифта, мы предполагаем, что у пользователя установлен этот шрифт. Если же у него этого шрифта, он его не увидит, все очень просто. Потому все что нам придется сделать, это написать список шрифтов font-families, закончив его типовым шрифтом.
    [Getting into good coding habits]
p {
font-family: Arial, Verdana, Helvetica, sans-serif;
}
  • Используйте высоту строки line-height 1.4em - 1.6em.
    line-height:1.4 для строк, которые можно прочитать, приемлемой длины строки, не более 10 слов и цветов, обеспечивающих приемлемый контраст. Например, чистый белый и черный цвета обычно слишком сильные для ЭЛТ мониторов, потому я обычно использую не чисто белый #fafafa и темно серый #333333.
    [Christian Montoya]
  • Установите 100.01% для html элемента. Данное необычное значение размера шрифта 100.01% компенсирует некоторые баги браузеров. Во-первых, установка размера шрифта в процентах (в отличие от em) устраняет проблему в IE/Win c пропорционально увеличивающимися или уменьшающимися шрифтами, если они были ранее указаны в em в других элементах. Кроме того, некоторые версии Opera нарисует 100%-й шрифт слишком уменьшенным по сравнению с другими браузерами. С другой стороны, Safari проблематично работает со шрифтом в 101%. Самым лучшим решением в данной ситуации будет использование размера 100.01%. [CSS: Getting into good habits]

1.6. Процесс: Отладка

  • Добавляйте границы, чтобы различить контейнеры.
    Используйте дополнительные стили, такие как бордюры или фон при тестировании и выявлении ошибок, обозначая определенные контейнеры. Данный код div { border:1px red dashed; } работает великолепно. Кроме этого, существуют bookmarklets создающие границы и делающие другие полезные вещи.
    Можно также использовать * { border: 1px solid #ff0000; }. [Chric Casciano]. Добавление границ к определенным элементам поможет выявить нахлест и дополнительное пространство вокруг блока, которое без границ не заметно. [CSS Crib Sheet]
* { border: 1px solid #f00; }
  • При поиске ошибки проверьте закрыты ли теги. [10 CSS Tips]

2.1. Технические тонкости: ID, Классы

  • 1 ID на страницу, множество классов на страницу.
    Не забывайте, только один элемент может иметь определенный id атрибут, в то время как ряд элементов может использовать один и тот же класс. [..] Имена классов и id могут содержать символы [A-Za-z0-9], дефис (-), не могу начинаться с дефиса или цифры (см. спецификацию CSS2). [Roger Johansson]
  • Имена элементов в селекторах чувствительны к регистру.
    Помните о чувствительности к регистру. Когда CSS используется в XHTML, имена элементов в селекторах чувствительны к регистру. Во избежание ошибок, я рекомендую всегда использовать строчные буквы в селекторах.
    [Roger Johansson]
  • CSS классы и ID должны быть валидными.
    Т.е. должны начинаться с буквы, а не цифры или подчеркивания. ID должен быть уникальным. Их имена должны быть generic(характерные для определенного класса), описывать функциоанльность, а не представление.
    [CSS Best Practices]
  • Одному элементу можно назначить несколько классов.
    Можете назначить одному элементу несколько классов. Это позволит написать несколько правил для задания различных свойств и использовать их по мере необходимости.
    [Roger Johansson]

2.2. Технические тонкости: Использование возможностей селекторов

Роджер Йохансон (Roger Johansson) написал серию крайне полезных статей -- CSS 2.1 Selectors. Эти статьи рекомендуются к прочтению всем. Некоторые наиболее ценные моменты приведены ниже. Имейте ввиду, что селекторы ‘>’ и ‘+’ не поддерживаются IE6 и более ранними версиями Internet Explorer

  • Можно использовать дочерние селекторы.
    Дочерние селекторы нацелены непосредственно на следующий дочерний элемент. Дочерний селектор состоит из двух и более селекторов, разделенных символом ">". Родительский находится слева от символа ">", вокруг которого допустим пробел. Следующее правило применяется к элементам strong, являющимися дочерними по отношению к элементу div.
    [Roger Johansson]
div > strong { color:#f00; }
  • Можно использовать смежные adjacent sibling селекторы. Данные селекторы созданы из двух простых селекторов, разделенных символом "+", вокруг которого допустим пробел. Селектор соответствует элементу, являющемуся следующим потомком первого элемента. Элемент должен иметь одноименный родительский и первый элемент должен предшествовать второму элементу. [Roger Johansson]
p + p { color:#f00; }
  • Можно использовать Attribute selectors. Attribute selectors соответствуют элементам, c заданными значениями атрибутов. Существует 4 способа обращения к Attribute selectors:
  1. [att]
    Соответствует элементам, имеющим атрибут "att", не обращая внимание на его значение.
  2. [att=val]
    Соответствует элементам, имеющим атрибут "att" со значением "val".
  3. [att~=val]
    Соответствует элементам, значения атрибутов "att" которых содержит список с пробелами и значение "val". В этом случае "val" не может содержать пробелы.
  4. [att|=val]
    Соответствует элементам, значения атрибутов "att" которых является списком с дефисным разделителем, начинающимся с "val". В основном используется для lang атрибутов (xml:lang в XHTML), таких как "en", "en-us", "en-gb", и т.д..
  • Селектор в следующем правиле соответствует всем элементам p, имеющим атрибут title, не взирая на значение этого атрибута:
p[title] { color:#f00; }
  • Селектор соответствует всем элементам div, имеющим атрибут class со значением error:
div[class=error] { color:#f00; }
  • Несколько атрибутных селекторов могут использоваться в одном и том же селекторе. Это дает возможность элементу соответствовать нескольким атрибутам. Следующее правило будет применено ко всем элементам blockquote класс которых имеет значение "quote" и с любым значением атрибута cite:
blockquote[class=quote][cite] { color:#f00; }
  • Используйте селекторы потомков (descendant selectors).
    Потомственность обеспечит чистоту и эффективность кода.
    [Roger Johansson]

2.3. Технические тонкости: Стилизация ссылок

  • Аккуратно задавайте стили ссылкам при использовании якорей.
    Если вы используете якоря в классическом виде (<a name="anchor">) они «подбирают» псевдо-классы :hover и :active. Во избежание подобного, либо используйте для каждого якоря id либо стилизуйте при помощи slightly more arcane, используя синтаксис :link:hover, :link:active.
    [Dave Shea]
  • Задайте взаимосвязи (relationships) между ссылками.
    Атрибут rel предназначен для обозначения семантической связи между ресурсами.
a[rel~="nofollow"]::after {
content: "\2620";
color: #933;
font-size: x-small;
}
a[rel~="tag"]::after {
content: url(http://www.technorati.com/favicon.ico);
}
  • Это позволит использовать атрибуты селекторов в пространстве, hазделенным списком значений. Любой элемент, имеющий отношение к содержащемся в нем значениям будет использоваться и стилизован соответствующим образом.
    [Handy CSS]
  • Внешние ссылки можно стилизовать автоматически. Разработчики часто используют не стандартную связь кодом rel="external" для обозначения внешней ссылки. Однако, в этом нет необходимости. Это правило добавит стрелку (на северо-восток) после каждой внешней ссылки [Handy CSS]
a[href^="http://"]:not([href*="smashingmagazine.com"])::after {
content: "\2197";
}
  • Пунктирные ссылки можно удалить с помощью outline: none;. Для удаления пунктира в ссылках пользуйтесь outline: none;
a:focus {
outline: none;
}

2.4. Технические тонкости: Тонкости CSS

  • Для body можно указывать id.
    В большинстве случаев id указанный для body позволит управлять стилем страницы целиком. Вы можете создать множество представлений для одной страницы без изменения XHTML разметки от страницы к странице.
    [Ryan Parr, Invasion of Body Switchers]
  • С помощью CSS можно создать колонки одинаковой высоты.
    Equal Height Technique -- метод, позволяющий создать колонки одинаковой высоты без использования фонового рисунка. С фоновым рисунком -- Faux Columns
  • При помощи CSS возможно вертикальное выравнивание.
    Скажем, у вас есть навигационное меню, элементы которого имеют высоту 2em. Решение: укажите высоту строки hile-height равную заданной высоте в 2em. Текст выровняется вертикально в блоке данной высоты.
    [Evolt.org]
  • Можно использовать псевдо-элементы и псевдо-классы для создания динамического контента. Псевдо-элементы и псевдо-классы могут использоваться для форматирования элементов на основе информации недоступной в дереве документа. Например, у нас нет элемента, который ссылается на первую строку параграфа или первую букву текстового элемента. Для задания стиля можно воспользоваться :first-child, :hover, :active, :focus, :first-line, :first-letter, :before, :after и др.
  • Для более элегантного разделения статей можно использовать горизонтальную линию <hr>.
    Стилизация линии изображением добавит стильный элемент в дизайн вашей страницы.
    [CSS: Best Practices]
  • Для навигации можно использовать один тот же код (X)HTML.
    Достаточное кол-во сайтов «подсвечивает» активный пункт меню. Это может стать головной болью, редактируя код на всех страницах. [Ten More CSS Tricks you may not know]

XHTML:

<ul>
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About us</a></li>
<li><a href="#" class="contact">Contact us</a></li>
</ul>
  • Добавьте id в <body>. id должен показывать, где находится пользователь.

CSS:

#home .home, #about .about, #contact .contact
{
commands for highlighted navigation go here
}
  • Для горизонтального выравнивания макета по центру можно использовать margin: 0 auto;.
    Для выравнивания по центру необходимо задать ширину блока и выставить границы.
    [Roger Johansson]

XHTML:

<div id="wrap">
<!-- Your layout goes here -->
</div>

CSS:

#wrap {
width:760px; /* Change this to the width of your layout */
margin:0 auto;
  • Можно добавить стиль в RSS фид. [Pete Freitag]
<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" href="http://you.com/rss.css" ?>
  • Можно скрыть CSS от старых браузеров.
    Общепринятый способ скрывать CSS от старых браузеров, используя импорт @import.
    [Roger Johansson]
@import "main.css";
  • Всегда указывайте границы (margin) и отступы (padding) для блочных элементов. [10 CSS Tips]
  • Задавайте ширину ИЛИ гарницу и отступ.
    Если я задаю ширину, я не ставлю границы и отступы. И наоборот, если указываю границы и отступы, я не задаю ширину. Работа с блоками зачастую превращается в головную боль, особенно если величины задаются в процентах. Поэтому, я задаю сначала ширину, затем указываю границы и отступы.
    [Jonathan Snook]
  • Избегайте задания фиксированных размеров, а также отступов и границ.
    IE5 использует неправильную блочную модель, что создает гору проблем. Потому паддинги лучше добавлять к родительским элементам, чем к фиксированным дочерним элементам внутри.
    [CSS Crib Sheet]
  • Делайте стиль для печати.
    Стиль для печати добавляется очень просто:
<link rel="stylesheet" type="text/css" href="print.css" media="print">
или
<style type="text/css" media="print"> @import url(print.css); </style>
  • Эти строки четко укажут, что данный стиль необходимо применить к печати, а не к монитору. На печатной версии сайта текст старайтесь делать черным, а фон белым, кроме этого не забывайте удалить ненужные элементы для обеспечения максимально комфортного чтения. More about CSS-based print-Layouts. [20 pro tips]

2.5. Технические тонкости: IE Tweaks

  • Можно заставить IE правильно отображать прозрачность PNG.
    Теоретически, PNG файл поддерживает различные уровни прозрачности, однако IE6 не дает использовать PNG во всех браузерах.
    [CSS Tips, Outer-Court.com]
#regular_logo
{
background:url('test.png'); width:150px; height:55px;
}
/* \ */
* html #regular_logo
{
background:none;
float:left;
width:150px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='test.png', sizingMethod='scale');
}
/* */
#regular_logo
{
background:url('test.png'); width:150px; height:55px;
}
/* \ */
* html #regular_logo
{
background:none;
float:left;
width:150px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='test.png', sizingMethod='scale');
}
/* */
  • Можно задавать минимальную min-width и максимальную max-width ширину в IE. Для этого используется Microsoft’s dynamic expressions. [Ten More CSS Trick you may not know]
#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" :
document.body.clientWidth > 1200? "1200px" : "auto");
}
  • Можно использовать Conditional Comments для IE.
    Наиболее безопасный способ работы со стилями в IE/Win является использование т.н. conditional comments. Это более практический способ задания дополнительных стилей для IE, в отличие от хаков.
    [Roger Johansson]
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

Процесс: Get Inspired

  • Экспериментируйте с CSS.
    Играйтесь. Играйтесь с фоновыми изображениями. Играйтесь с float. [Играйтесь с отрицательными и положительными границами. Играйтесь с наследованием и каскадными правилами. Играйтесь.
    [Chric Casciano]
  • Учитесь у других. Учитесь на примере хорошо сделанных сайтов. Смотрите, как используются те или способы достижения определенных эффектов и используйте эти способы в своей работе. [20 pro tips]

Ссылки на соответствующие статьи

  • CSS Tips and Tricks by Roger Johansson
  • (The Only) Ten Things To Know About CSS by John Manoogian
  • CSS Crib Sheet by Dave Shea
  • My Top Ten CSS Tricks [CSS Tutorials] by Trenton Moss
  • CSS Tips by Philipp Lenssen
  • Top CSS Tips by Jonathan Snook
  • Ten CSS tricks - corrected and improved by Tantek Celik
  • Ten More CSS Trick you may now know by Trenton Moss
  • CSS techniques I use all the time by Christian Montoya
  • CSS Tip Flags by Douglas Bowman
  • My 5 CSS Tips by Mike Rundle
  • 5 Steps to CSS Heaven by Ping Mag
  • Handy CSS by Lachlan Hunt
  • Erratic Wisdom: 5 Tips for Organizing Your CSS by Thame Fadial
  • 15 CSS Properties You Probably Never Use (but perhaps should) by SeoMoz
  • 10 CSS Tips You Might Not Have Known About by Christopher Scott
  • A List Apart: Articles: 12 Lessons for Those Afraid of CSS and Standards by Ben Henick
  • Tips for a better design review process by D. Keith Robinson
  • 20 pro tips - .net magazine by Jason Arber
  • CSS Best Practices by Richard K Miller
  • 10 Quick Tips for an Easier CSS Life by Paul Ob
  • 10 CSS Tips from a Professional CSS Front-End Architect by 72 DPI in the shade team blog
  • Web Design References: Cascading Style Sheets by Laura Carlson
  • Getting Into Good Coding Habits by Adrian Senior

Оригинал статьи

Комментарии

 

 


CSS Styleguide — улучшение читабельности кода

Перевод статьи Improving Code Readability With CSS Styleguides с рекоммендациями по организации СSS файлов и написанию стильгайдов.

дальше →

Media-запросы

Media-запросы это расширение CSS3 для различных media-типов, позволяющее контролировать отображение документа в зависимости от устройства

дальше →

Стандартный режим, режим обратной совместимости и DOCTYPE

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

дальше →

Полезные CSS хаки

Несколько хаков, которые могут пригодиться

дальше →

Все статьи

бизнес, браузеры, веб-стандарты, верстка, дизайн, мобильные устройства, редакторы, фотогалерея, alistapart, css, css3, email, javascript, photoshop, progressive enhancement, svg, textmate, textpattern, usability, validation

Полезные ссылки

23.09.08

  • Using jQuery for Background Image Animations
  • jParallax
  • Test your color IQ
  • 80 Large Background Websites
  • 20 Free Page Analysis Tools