70 старых советов для водителей, которые научат вас лучше программировать на CSS

CSS
70 старых советов для водителей, которые научат вас лучше программировать на CSS
первоисточник70 Expert Ideas For Better CSS Coding - HackHands

Posted on July 13th 2015

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

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

перечислено ниже70+ профессиональных советов по CSSМожет повысить эффективность программирования CSS. Соответствующие ссылки и статьи можно найти в конце статьи.

Для дизайнеров, которые делятся советами, советами, методами, знаниями и опытом с нашими читателями, мы отправляем имВыразить благодарность. Будь то программист, дизайнер, разработчик, информационный архитектор и т. д., я очень ценю это.

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

Update (29/05/2007): Бразильско-португальский перевод статьи2Также опубликовано Благодаря Maurício Samy Silva.

1.1 Рабочий процесс: начало работы

  • Если у вас есть план, начните с чистой страницы."Страница включает в себя верхний колонтитул, заголовок, пример страницы, нижний колонтитул. Затем начните добавлять теги html. Затем добавьте CSS. Это улучшит внешний вид страницы." [CSSing173]
  • Используйте основную таблицу стилей«Я наблюдал одну и ту же ошибку, которую совершают как начинающие, так и разработчики среднего уровня, и они оба борются с тем, чтобы не удалить стили CSS браузера по умолчанию. обвините браузер в этом противоречии. Конечно, это недоразумение. Поэтому, прежде чем писать веб-сайт, сначала сбросьте таблицу стилей." [Master Stylesheet: The Most Useful CSS Technique 4], [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«Вы можете часто использовать значение свойства по умолчанию вместо того, чтобы устанавливать значение специально для этого свойства. Некоторые разработчики предпочитают устанавливатьGlobal white space reset5, установите для полей и отступов значение 0 для всех элементов в верхней части таблицы стилей. "[Roger Johansson 6653494530236]
  • Написание вспомогательной библиотеки классов CSSТакие библиотеки используются для облегчения отладки, но их следует избегать в выпущенных сборках (отделяя уровень разметки от уровня представления). Вы можете использовать различные имена классов следующим образом (т.е....) для отладки маркерного слоя. (updated) [Richard K. Miller7]
.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

  • Написание собственных стилей CSS с использованием основной таблицы стилей.«Написание собственного 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; } 
  • Используйте разметку для написания собственных таблиц стилей«Разбейте таблицу стилей на определенные разделы: т. е. глобальные стили — (основная часть, абзацы, списки и т. д.), заголовки, структура страницы, заголовки, стили шрифтов, панели навигации, формы, комментарии и прочее.[5 советов по написанию таблиц стилей CSS12]
`/* ------------------------*/ /* ---------->>> GLOBAL <<<-----------*/ /* ------------------------*/` 
  • Напишите свой собственный стиль, чтобы сделать оглавлениеВ верхней части файла CSS напишите оглавление. Например, вы можете наметить различные области файлов CSS, которые стилизованы (заголовок, основная часть, нижний колонтитул и т. д.). Затем установите большую и очевидную точку разрыва пластины, чтобы разграничить эти области. Затем используйте большой очевидный разрыв раздела, чтобы разделить области. [5 Steps to CSS Heaven 892413]
  • Алфавитные свойства для написания собственных таблиц стилей«Я забыл, откуда я взял это вдохновение, но после месяца алфавитного расположения свойств CSS, хотите верьте, хотите нет, этот метод позволяет легко найти некоторые специальные свойства». [Christian Montoya3814]
body {
   background: #fdfdfd;
   color: #333;
   font-size: 1em;
   line-height: 1.4;
   margin: 0;
   padding: 0;
} 
  • Разделите отдельные блоки кода, "Это может быть здравым смыслом для некоторых людей, но иногда я вижу, что некоторые CSS не были разбиты на несколько частей. Это облегчает обработку в течение нескольких недель, месяцев или даже лет после кода. Вы можете легко найти классы и Элементы должны быть изменены, такие как:/* Structure */, /* Typography */Ждать" [CSS Tips and Tricks 15]
  • Крючки, проволока и грузила.«Когда CSS и его подразделы готовы и вы начинаете думать о том, где зацепить селекторы, вам нужно полагаться на использование структурных зацепок в вашей разметке. Это создает преимущества для будущего написания и обслуживания сайта, а также повышает надежность документа. ." [Райан Парр]
  • Разбейте таблицы стилей на отдельные блоки кода«Я разбил свою таблицу стилей на три отдельных блока кода. Первая часть — это прямое объявление элемента. Измените тело, некоторые стили ссылок, некоторые стили заголовков, а также сбросьте поля и отступы формы и т. д. […] После Объявление элемента следует за объявлением класса: сюда идут такие вещи, как сообщения об ошибках или выноски.[..] Наконец, я начинаю объявлять основной контейнер и отступы для стилей элементов в этом контейнере.После беглого взгляда я вижу, как разделены мои страницы и найти что-то будет легко. Я объявляю это, даже если в контейнере ничего нет». [Jonathan Snook68341816]

1.3 Рабочий процесс: обработка идентификаторов, классов, селекторов и свойств.

  • Сведите контейнеры к минимуму.«Сохраните документ от структурного раздувания. Разработчики-новички, как правило, используют много элементов DIV, таких как ячейки таблицы, для макета. На самом деле для макета можно использовать множество других структурных элементов. Не используйте слишком много DIV. Рассмотрите все варианты, прежде чем использовать слишком много оберток (DIV) для достижения эффекта, и вы обнаружите, что такой же желаемый эффект может быть достигнут с небольшим количеством изящного CSS» [Райан Парр]
  • свести атрибуты к минимуму"Думайте больше и не зацикливайтесь на CSS. В этом правиле есть много подправил: если добавление свойства CSS не требуется, не добавляйте его; если вы не уверены, почему вам следует добавлять свойство CSS, не добавляйте; если вы чувствуете, что один и тот же атрибут добавляется много раз, найдите их и добавьте только один раз».CSSing17 3]
  • держите селекторы минимальными"Избегайте ненужных селекторов. Использование меньшего количества селекторов означает, что меньшее количество селекторов будет переопределяться при реализации специальных стилей, что лучше для устранения неполадок." [Jonathan Snook68341816]
  • Сведите хаки CSS к минимуму«Не используйте хак, если у вас нет известной опубликованной ошибки. Это важный момент, потому что я также часто вижу, как хаки используются для решения вещей, которые вообще не являются проблемой. Если вы обнаружите, что вам нужно найти хак чтобы решить проблему в дизайне, то сначала вам нужно провести некоторое исследование (здесь может пригодиться Google), а затем попытаться определить проблему, которая у вас есть (действительно ли для ее решения нужен хак).[10 Quick Tips for an easier CSS life 19]
  • Использование констант CSS в Agile-разработке«Концепция констант — полезна тем, что имеет фиксированные значения, которые может использовать ваш код. Один из способов справиться с отсутствием констант в CSS — определить «константы», добавив некоторые соответствующие определения в комментарии в верхней части CSS. Этот метод является распространенным. Одним из приложений является «Создать глоссарий цветов». Этот метод позволяет вам получить краткий справочник по цветам, используемым на вашем веб-сайте, избежать ошибок при использовании цветов и использовать этот краткий справочник, как только вам нужно изменить таблицу цветов для поиска и замены." [Rachel Andrew 20]
/*
   # Dark grey (text): #333333
   # Dark Blue (headings, links) #000066
   # Mid Blue (header) #333399
   # Light blue (top navigation) #CCCCFF
   # Mid grey: #666666 #
*/ 
  • Используйте общую систему именования.При поиске ошибок или обновлении файлов экономится много времени, если у вас есть система именования для идентификатора и класса. Особенно большие файлы CSS, если они не названы должным образом, могут быстро привести к большой путанице. я рекомендую использоватьparent_childмодель. [10 CSS Tips 674321]
  • Назовите класс и идентификатор соответствующим образом в соответствии с их семантикой.«Мы склонны избегать индикации именования. В противном случае, если мы называем некоторые правильные столбцы, вполне возможно, чтобы изменить CSS и« правую колонку », наконец, отображается на левой стороне страницы. Это может вызвать путаницу в будущем, так что Лучше всего избежать этого именованного представления значка таблицы.Garrett Dimon22]
  • Классифицируйте общие селекторы объявлений CSS."Селекторы категорий. Когда некоторые типы элементов, классы или идентификаторы имеют общие свойства, вы можете разделить селекторы на категории, чтобы не устанавливать одни и те же свойства некоторое время. Это потенциально сэкономит много места." [Roger Johansson6653 494530236]
  • Изолируйте уникальное свойство, которое вы можете повторно использовать много раз.«Если вы обнаружите, что часто используете уникальный атрибут, выделите его, чтобы не повторять его снова и снова, а также позволить вам изменить отображение всех частей сайта, которые используют этот атрибут». [5 Steps to CSS Heaven8924 13]
  • Старайтесь, чтобы имена идентификаторов и классов в дереве документов были плоскими.использовать как можно большеселектор контекста25. Не беспокойтесь о том, чтобы сделать селектор подробным, сделав это. Длинные селекторы облегчают чтение документов css и сокращают разработку до классификаций илиdivitis 26возможно. [Chric Casciano764127]
  • Научитесь пользоваться преимуществами каскадных функций CSS.«Допустим, у вас на сайте есть две одинаковые блочные модели — вы можете написать стиль CSS для каждой блочной модели отдельно, или вы можете написать стиль CSS для обеих блочных моделей, а затем написать ниже два разных стиля свойств двух блочных моделей. различать две модели коробок." [5 Steps to CSS heaven28]
  • Используйте полезные теги:<small>, <em>а также<strong>«Много раз в дизайне будет раздел, требующий различных типографских весов, например, установка его на одной строке или с близким интервалом между словами. Эти настройки разбросаны по различным блокам и классам, и я не думаю, что они соответствуют всем требованиям. Семантически и будут мешать хорошим рекомендациям XHTML, которым вы следовали». Вместо этих параметров рекомендуется использовать семантические теги. [5 советов по CSS от Майка Рандла 29]

1.4 Рабочий процесс: использование сокращенной записи

  • Сокращенный шестнадцатеричный цветовой маркер.«В CSS цвет состоит из трех пар шестнадцатеричных чисел, и когда вы используете этот цветовой тег, вы можете использовать этот эффективный метод опускания второго числа каждой группы:#000 相当于 #000000, #369 相当于 #336699. [Roger Johansson66 53494530236]
  • Ссылки псевдокласса определяются в соответствии с порядком LoVe/HAte.: Ссылка, Посещение, Наведение, Активность. "Сначала убедитесь, что вы понимаете различные стили ссылок, затем лучше расположить стили в порядке "ссылка-посещение-наведение-активность" или "LVHA". Если вы сосредоточитесь на стиль фокуса, вы можете найти его в Присоединении после этого, но прочитайте это объяснение, прежде чем принять решение." [Eric Meyer 31]
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: purple; }
a:active { color: red; } 
  • Определите поля, отступы или границы элемента в соответствии с методом сортировки ПРОБЛЕМА: Сверху, Справа, Снизу, Слева. "Вот сокращенный способ определить поля, отступы или границы элемента, по часовой стрелке сверху: Сверху, Справа, Снизу, Слева." [Roger Johansson 4432]
  • вы можете использоватьсокращенное свойство33. "дляmargin, padding and borderИспользование сокращенных свойств может сэкономить много места. "
margin: top right bottom left;
margin: 1em 0 2em 0.5em;
(margin-top: 1em; margin-right: 0; margin-bottom: 2em; margin-left: 0.5em;) 
border: width style color;
border: 1px solid #000; 
background: color image repeat attachment position;
background: #f00 url(background.gif) no-repeat fixed 0 0; 
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 Рабочий процесс: настройка шрифтов

  • Установите размер шрифта на 62,5% в теге body, чтобы использовать EM, например px.. font-sizeЗначение по умолчанию — 16 пикселей; после применения этого правила значение Em примерно эквивалентно 10 пикселям (16 x 62,5% = 10). «Я предпочитаю установить размер шрифта в теге body равным: 62,5%. с учетом пикселей. Например, при использовании em для указания размера 1,3 em почти эквивалентно 1,3 пикселя.Jonathan Snook 68341816] (Примечание переводчика: пользователь перевода [держит вас за руку и говорит, что я люблю вас] сообщает, что минимальный размер шрифта по умолчанию в Chrome составляет 12 пикселей, поэтому этот метод неприменим в Chrome.)
  • Кодирование с помощью универсального набора символов. "[..] Ответ заключается в использовании единого универсального набора символов для охвата большинства исключений. К счастью, такой набор символов существует: UTF-8 на основе Unicode. Unicode является отраслевым стандартом, т.е. предназначен для одинакового представления и обработки компьютерами. UTF-8 должен быть включен в заголовки вашей веб-страницы следующим образом». [20 pro tips 77713635]
`<meta http-equiv="content-type" content="text/ html;charset=utf-8" />` 
  • Вы можете использовать CSS для переключения заглавных букв.Если вам нужно что-то преобразовать его в прописные буквы, например, заголовок, но не переписать копию, вы можете использовать CSS для выполнения этой скучной работы. Весь текст следующий код будет нацелен на H1 преобразован в верхний регистр, независимо от формата. [20 pro tips7771 3635]
`h1 { text-transform: uppercase; }` 
  • Вы можете автоматически отображать текст с маленькими заглавными буквами. font-variantСвойство используется для отображения текста с прописными буквами, когда все строчные буквы преобразуются в прописные, но текст под всеми прописными буквами меньше по размеру, чем остальной текст.
`h1 { font-variant: small-caps; }` 
  • Определите общий тип шрифта, чтобы переопределить общий параметр.«Когда мы объявляем определенный шрифт для использования в дизайне, мы хотим, чтобы этот шрифт также был установлен в системе пользователя. Проще говоря, если в их системе не установлен шрифт, то шрифт не будет виден. . Нам нужно сделать. Дело в том, чтобы сослаться на шрифты, которые пользователи могли установить на свои машины, например, свойство font-family ниже. Очень важно, чтобы мы заполнили общий тип шрифта."[Getting into good coding habits 37]
`p { font-family: Arial, Verdana, Helvetica, sans-serif; }` 
  • Будуline-heightУстановите 1.4em – 1.6em. "line-height:1.4«Для легко читаемых строк разумная высота строки позволяет избежать слишком длинных строк, содержащих более 10 символов, а цветовой контраст не слишком бросается в глаза. Например, для слишком яркого ЭЛТ-дисплея чистый черный цвет на чистом белый На фоне часто бывает слишком много контраста, поэтому я стараюсь использовать не совсем белый (#fafafaхороший выбор) и темно-серый (#333333Неплохо). "[Christian Montoya 3814]
  • настраиватьhtml- Элементы 100,01%. Эти нечетные 100,01% для размера шрифта компенсируют несколько ошибок браузера. Во-первых, установка размера шрифта в процентах по умолчанию (вместо em) устраняет проблемы с масштабированием шрифта в IE/Win, даже если позже в других элементах будет установлено значение em. Кроме того, в некоторых версиях браузера Opera установлен размер шрифта по умолчанию, который на 100 % меньше, чем в других браузерах. Safari, с другой стороны, имеет проблему с размером шрифта 101%. Текущее лучшее решение — установить для этого свойства значение 100,01%. "[CSS: Getting into good habits 39]

1.6 Рабочий процесс: отладка

  • Добавьте границу, чтобы определить контейнер«Используйте множество тестовых стилей при создании документов или настройке макета, например дополнительных границ или цветов фона.div { border:1px red dashed; }как безделушка. здесь естьЗакладки с рамками40, и может сделать для вас другие вещи. "Вы также можете использовать* { border: 1px solid #ff0000; }. [Chric Casciano764127].Добавляет границу к элементам, чтобы идентифицировать их, что помогает идентифицировать перекрытия или дополнительные пробелы, которые обычно незаметны. [CSS Crib Sheet 6942]
`* { border: 1px solid #f00; }` 
  • Перед отладкой сначала проверьте закрывающий элемент.«Если вы когда-нибудь были разочарованы изменением нескольких вещей и разрушением вашего красивого детского макета, это, вероятно, потому, что в нем нет закрытых элементов. [10 CSS Tips674321]

2.1 Технические навыки: идентификаторы, классы

  • У каждой страницы есть идентификатор, и у каждой страницы есть много классов.«Проверьте идентификатор, который вы используете: только один элемент в документе может использовать атрибут id с определенным значением, и нет ограничений на количество элементов, которые имеют одно и то же имя класса. [..] имена классов и идентификатор имена могут состоять только из букв [A -Za-z0-9] и дефиса (-) и не могут начинаться с дефиса или цифры (см. Синтаксис CSS2 и основные типы данных)." [Roger Johansson 4432]
  • Имена элементов с учетом регистра в селекторах.«Помните о строгом учете регистра. Когда CSS используется с XHTML, имена элементов в селекторах чувствительны к регистру. Чтобы избежать этой проблемы, я всегда рекомендую использовать имена элементов в нижнем регистре в селекторах CSS. Значения атрибутов class и id чувствительны к регистру в как HTML, так и XHTML, поэтому избегайте использования имен классов и идентификаторов в смешанном регистре."[Roger Johansson 6653494530236]
  • класс и идентификатор в CSS должны быть действительными"которыйС письмом46вместо цифр или символов подчеркивания. id должен быть уникальным. их имена должны бытьуниверсальный47, способный описать функциональность, а не притворство. " [CSS Best Practices48]
  • Вы можете назначить несколько имен классов для данного элемента.«Вы можете присвоить элементу несколько имен классов. Это упрощает написание разных правил для определения разных атрибутов и применения их только там, где это необходимо». [Roger Johansson6653 494530236]

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

Роджер Йоханссон написал серию статей оСелекторы CSS 2.150изОченьПолезные статьи. эта статьяТяжелая рекомендация– Некоторые из этих полезных аспектов перечислены ниже. Обратите внимание, что селекторы «>» и «+» не поддерживаются в IE6 и более ранних версиях. (updated).

  • Вы можете использовать подселекторы«Дочерний селектор указывает на непосредственных дочерних элементов элемента. Дочерний селектор состоит из двух или более селекторов, разделенных знаком «больше» «>». Родительский класс находится слева от знака «>», Между селекторами и селекторами допускаются пробелы. Это правило влияет на все сильные элементы в элементах div. [Roger Johansson 5251]
`div > strong { color:#f00; }` 
  • Вы можете использовать соседние селекторы.Смежный селектор состоит из двух простых селекторов, разделенных знаком плюс "+". Допускаются пробелы внутри соседних селекторов. Этот селектор соответствует элементу, который является соседним по отношению к предыдущему элементу. Оба элемента должны иметь один и тот же родительский элемент, и первый элемент должен находиться рядом со вторым элементом. [Roger Johansson52 51]
`p + p { color:#f00; }` 
  • Вы можете использовать селекторы атрибутов.Селекторы атрибутов сопоставляют элементы на основе наличия или значения этого атрибута. Вот как соотносятся четыре селектора атрибутов:
[att] 匹配包含att属性的元素,无论它是什么值。
[att=val] 匹配包含属性att值为“val”的元素。
[att~=val] 匹配含属性att,且att的值中包含“val”的元素。这种情况下“val”中不能包含空格。
[att|=val] 匹配含属性att且值为连字号分割的开头为“val”的元素。这种匹配主要用于匹配由lang属性(xml:lang in XHTML)指定的语言码,即 en”, en-us”, en-gb”等。
  • Селекторы в следующих правилах соответствуютtitleатрибутpэлемент, независимо от его значения:
`p[title] { color:#f00; }` 
  • Этот селектор соответствует всем элементам div, чей атрибут class равен error:
`div[class=error] { color:#f00; }` 
  • В одном селекторе можно использовать несколько селекторов атрибутов. Этот метод можно использовать для сопоставления различных атрибутов одного и того же элемента. Следующие правила будут применяться ко всем элементам blockquote со значением класса "quate" и содержащими атрибут cite:
`blockquote[class=quote][cite] { color:#f00; }` 
  • Вы также можете использовать селекторы потомков.«Селекторы потомков могут помочь вам исключить множество атрибутов класса из вашей разметки, что сделает ваши селекторы CSS более эффективными». [Roger Johansson66534945 30236]

2.3. Технические советы: ссылки на стили

  • Если вы используете анкоры, будьте осторожны при разработке ссылок."Если вы используете классические привязки в своем коде (<a name="anchor">), то вы заметите, что он теряет:hoverа также:activeЭффект псевдокласса. Чтобы этого не произошло, нужно установить для якоряidВместо того, чтобы использоватьслегка неясный54синтаксис::link:hover, :link:activeпроектировать. "[Dave Shea55]
  • Определите отношения для ссылок.«Атрибут 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); } 
  • «Эти селекторы атрибутов используют список значений, разделенных пробелами. Любой элемент отношения, который содержит эти значения, будет сопоставлен. Ссылки, связанные с запрещенными ссылками, будут сопровождаться темно-красным черепом (?), а ссылки, связанные с метками, будут будет соответствовать. Он будет сопровождаться значком Технократов." [Handy CSS905756]
  • Вы можете автоматически помечать внешние ссылки. Многие люди пользуются нестандартными ассоциациямиrel="external"указать ссылку на внешний сайт. Однако добавление его к каждой ссылке занимает много времени и не является необходимым. Это правило стиля приведет к тому, что внешние ссылки на сайте будут размещены на северо-восточной стрелке. [Handy CSS905756]
`a[href^="http://"]:not([href*="smashingmagazine.com"])::after { content: "2197"; }` 
  • вы можете использоватьoutline: none;Чтобы удалить пунктирную линию из ссылки, используйтеoutline: none;удалить дефис ссылки58:
`a:focus { outline: none; }` 

2.4. Технические навыки: CSS-методы

  • Вы можете указать идентификатор тега body.«В большинстве случаев установка идентификатора в теге body помогает манипулировать поверхностными элементами CSS и размечать основные элементы страницы. Вы можете не только упорядочивать разделы, но и создавать несколько стилей CSS» [Райан Парр,Invasion of Body Switchers59]
  • Вы можете создавать столбцы одинаковой высоты с помощью CSS. высокие технологии60: способ сделать все столбцы одинаковой высоты. Но нет необходимости в фоновом изображении псевдостолбца.Псевдостолбец 61: объединить фоновое изображение.
  • Вы можете сделать CSS вертикально выровненным.«Скажем, навигационное меню с высотой, указанной как 2em. Обходной путь: установите высоту строки такой же, как высота блока в CSS. В этом случае высота блока равна 2em, поэтому мы можем установить высоту строки в правило CSS: 2em, тогда текст в поле будет плавать посередине." [Evolt.org62]
  • Вы можете использовать псевдоэлементы и классы для динамического создания контента. Псевдоклассы и псевдоэлементы63● псевдоклассы и псевдоэлементы могут использоваться для форматирования элементов, информация о которых недоступна в дереве документа. Например, ни один элемент не указывает на первую строку абзаца или первую букву текста элемента. Вы можете использовать :first-child, :hover, :active, :focus, :first-line, :first-letter, :before, :after и другие.
  • вы можете использовать<hr>для элегантного разделения постов. "Переработаны горизонтальные правила (

) в сочетании с изображениями даст странице много дополнительных баллов. [CSS: Best Practices64]

  • Вы можете использовать конгруэнтный навигационный (X)HTML-код на каждой странице.«Большинство сайтов выделяют панель навигации для определения местоположения пользователя. Но это неприятно, потому что вам нужно настроить HTML-код за панелью навигации на каждой странице. Можете ли вы найти способ получить лучшее из обоих миров?» [Ten More CSS Tricks you may not know65]
<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в этикетке. Этот идентификатор должен представлять местоположение пользователя на сайте и должен изменяться, когда пользователь посещает разные части сайта.
`#home .home, #about .about, #contact .contact {  commands for highlighted navigation go here }` 
  • использоватьmargin: 0 auto;Реализует горизонтально центрированный макет. «Чтобы центрировать элемент по горизонтали с помощью CSS, вам нужно указать ширину элемента и горизонтальное поле» [Роджер Йоханссон].
 `<div id="wrap"> <!-- Your layout goes here --> </div>` 
`#wrap { width:760px; /* Change this to the width of your layout */  margin:0 auto; }` 
  • Вы можете добавлять стили CSS в RSS-каналы.«С таблицами стилей XSL можно делать многое (превращать ссылки в интерактивные ссылки и т. д.), но CSS может сделать ваш код менее пугающим для непрофессионалов. [Пит Фрайтаг]
`<?xml version="1.0" ?> <?xml-stylesheet type="text/css" href="http://you.com/rss.css" ?>  ...` 
  • Вы можете скрыть CSS для старых браузеров.«Распространенный способ скрыть файлы CSS от старых браузеров — использовать@importтрюк. [Roger Johansson665349 4530236]
`@import "main.css";` 
  • Не забудьте объявить поля и отступы в элементах блочного уровня. [10 CSS Tips674321]
  • Установите ширину или поля и отступы.«Мое эмпирическое правило: если вы устанавливаете ширину, не устанавливайте поля или отступы. Точно так же, если вы устанавливаете поля или отступы, не устанавливайте ширину. Работа с блочной моделью — это такая боль, особенно когда вы Тот, который имеет дело с процентами. Итак, я устанавливаю ширину внешнего контейнера, а затем устанавливаю поля и отступы для элементов внутри него. Таким образом, все работает нормально ».[Jonathan Snook 68341816]
  • Избегайте применения отступов/границы и фиксированной ширины к элементам.«Блочная модель IE5 неверна и вызывает массу проблем. Есть много решений, но лучше обойти это, установив отступ для родительского элемента, а не установив фиксированную ширину для дочернего элемента. [CSS Crib Sheet6942]
  • Предоставляет стили печати.«Вы можете добавить стиль печати на свою страницу, как обычный стиль:
`<link rel="stylesheet" type="text/css" href="print.css" media="print">` 

или

`<style type=”text/css” media=”print”> @import url(print.css); </style>` 
  • Это гарантирует, что этот CSS будет применяться только к странице в печати и не повлияет на отображение страницы на экране. После применения нового стиля печати вы можете обеспечить сплошной черный текст на белом фоне и удалить лишние функции, что значительно улучшит читаемость.More about CSS-based print-Layouts70. [ 20 pro tips77713635]

2.5 Технические советы: настройка IE

  • Вы можете заставить IE применять прозрачные изображения PNG.«Теоретически файлы PNG поддерживают различные уровни прозрачности, однако ошибка IE6 не позволила этому свойству работать в разных браузерах». [CSS Tips, Outer-Court.com72]
#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');
} 
#container {
   min-width: 600px;
   max-width: 1200px;
   width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
} 
  • Вы можете установить условные комментарии для IE.«Самый безопасный способ обработки условий IE/Win — использовать условные комментарии. Использование собственных условных комментариев Microsoft кажется более многообещающим, чем хак CSS. Вы можете использовать этот подход, чтобы установить отдельную таблицу стилей для IE/Win, этот стиль Таблица содержит все необходимые правила, чтобы заставить его работать правильно." [Roger Johansson 74]
`<!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->` 

Рабочий процесс: черпайте вдохновение

  • Увлекательные эксперименты с CSS"Иди, играй. Играй с фоновыми изображениями. Играй с плавающими элементами." [Play with positive and negative margins75• Играйте с наследованием и каскадными правилами. Просто играть. [Chric Casciano 764127]
  • учиться у другихУчитесь на отличных сайтах других людей. HTML-код любого веб-сайта можно легко получить, просмотрев исходный код веб-страницы. Посмотрите, как это делают другие, и примените их методы к себе. [20 pro tips77713635]

Источник и связанное с ним

This article is by Vitaly Friedman from smashingmagazine.com.