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

15.05.07 веб-стандарты, верстка, дизайн, css

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 классов. Полезна при отладке, но следует избегать в готовой версии (отделите разметку от представления). Поскольку можно использовать несколько классов для одного элемента (например, ...) пользуйтесь ими при тестировании и отладке разметки. [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]
Пользуйтесь полезными тэгами, типа ,  и .
Часто в вашем дизайне есть секция, в которой вес шрифта или вид должен меняться на одной строке. Попадая на случайные 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:

[att]
Соответствует элементам, имеющим атрибут "att", не обращая внимание на его значение.
[att=val]
Соответствует элементам, имеющим атрибут "att" со значением "val".
[att~=val]
Соответствует элементам, значения атрибутов "att" которых содержит список с пробелами и значение "val". В этом случае "val" не может содержать пробелы.
[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

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

Имя		Помнить
E-mail
http://
Коментарий

Higher.com.ua

немного о веб дизайне

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

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

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

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

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

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

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

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

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

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

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

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

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

Процесс: Get Inspired

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

Комментарии

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

Media-запросы

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

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

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