Эффективный CSS — советы и скрипты

Сегодня рассмотрим некоторые практические приемы для написания более красивого, правильного и быстрого CSS. В статье будет рассмотрено использование коротких свойств, глобальные сбросы, тулбоксы и некоторые полезные скрипты, которые скорее всего облегчат вам жизнь.Короткие свойстваКороткие свойства используют для определения нескольких свойств в одном объявлении. Использование коротких стилей может сильно уменьшить размер ваших CSS файлов.ЦветаЕсли значение цвета состоит из трех пар одинаковых символов, то это значение можно сократить до трех символов.

#FFEE66 // было
#FE6 // стало

РазмерыЗначение таких величин как padding или margin можно задавать по разному. Бывают люди, которые пишут вот так:

padding-left: 3px;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 3px;

Это долго и некрасиво. Можно задавать сразу несколько значений за один раз, и для этого существует несколько способов.

свойство: значение1; // (все стороны)
свойтсво: значение1 значение2; // (верх-низ) (право-лево)
свойство: значение1 значение2 значение3; // (верх) (право-лево) (низ)
свойство: значение1 значение2 значение3 значение4; // (верх) (право) (низ) (лево)

Кстати, можно использовать слово TRouBLe (Top, Right, Bottom, Left), чтобы проще запомнить порядок в последнем варианте.ОбводкаСкажем, задаете обводку для какого-то элемента вот так:

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

Все это добро можно сократить вот так:

border: 1px solid #000; // по W3C: ширина стиль цвет

ФонС фоном бывает вот такая ситуация:

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

Все это можно уместить в одну строчку:

background: #f00 url(background.gif) no-repeat fixed 0 0; // по W3C: цвет картинка повторение аттачмент координаты

Так же важно помнить, что если вы указываете два значение координат, то они должны следовать одна за другой. При этом, если вы используете em, px или проценты, то горизонтальное значение идет первым.ШрифтыКак и в случае с обводкой и фоном, в описании шрифтов можно указывать несколько значений в одном объявлении. К примеру, из такого большого куска CSS:

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

Можно сделать маленький кусок:

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

СпискиЗдесь из такого описания:

list-style-type: square;
list-style-position: inside;
list-style-image: url(image.gif);

Можно сделать вот такое:

list-style: square inside url(image.gif);

Глобальные сбросы и тулбоксыКак вы знаете, дефолтные значения некоторых свойств в CSS отличаются от браузера к браузеру, и это является постоянной головной болью HTML кодеров (не считая IE, который просто одна большая заноза в одном месте). Что бы это поправить, были придуманы так называемые «сбросы CSS» (css reset). Первый и самый известный из них был предложен признанным экспертом по CSS Эриком Мэйером. Ко всему прочему, мы уже писали про глобальные сбросы, так что вы можете посмотреть и другие примеры.Теперь рассмотрим тулбоксы. Грубо говоря, это набор стилей, которые вы чаще всего используете при верстке. Для примера рассмотрим вот такой небольшой тулбокс от CSS Tricks.

/* Toolbox CSS Chris Coyier http://css-tricks.com*/
/* LAYOUT TOOLS*/
.floatLeft { 
float: left; 
}
.floatRight { 
float: right; 
}
.clear { 
clear: both; 
}
.layoutCenter { 
margin: 0 auto; 
}
.textCenter {
text-align: center; 
}
.textRight { 
text-align: right; 
}
.textLeft { 
text-align: left; 
}
/* PRINT TOOLS*/
.page-break { 
page-break-before: always; 
}
/* TYPOGRAPHIC TOOLS*/
.error { 
border: 1px solid #fb4343; 
padding: 3px; 
color: #fb4343; }
.warning { 
border: 1px solid #d4ac0a; 
padding: 3px; 
color: #d4ac0a; 
}
.success { 
border: 1px solid #149b0d; 
padding: 3px; 
color: #149b0d; 
}
.callOut { 
font-size: 125%; 
font-weight: bold; 
}
.strikeOut { 
text-decoration: line-through; 
}
.underline { 
text-decoration: underline; 
}
.resetTypeStyle { 
font-weight: normal; 
font-style: normal; 
font-size: 100%; 
text-decoration: none; 
background-color: none; 
word-spacing: normal; 
letter-spacing: 0px; 
text-transform: none; 
text-indent: 0px; 
}
/* STYLING EXTRAS*/
a[href^="mailto"] { 
background: url(images/emailIcon.png) left center no-repeat; 
padding-left: 10px; 
}
a[href~=".pdf"] { 
background: url(images/pdfIcon.png) left center no-repeat; 
padding-left: 10px; 
}
a.button { 
color: black; 
border: 1px solid black; 
padding: 3px; 
} 
a.button:hover { 
background: black; 
color: white; 
}
.transpBlack { 
background: url(images/transpBlack.png); 
}
/* DISPLAY VALUES*/
.hide { 
display: none; 
}
.show { 
display: block; 
}
.invisible { 
visibility: hidden; 
}

Желательно, чтобы у вас был свой собственный тулбокс — так оно удобнее и лучше.Классы для браузеров и ОСОпять же, все мы знаем, что некоторые свойства CSS по разному отображаются в разных браузерах. Что бы исправить, используют различные CSS хаки.Но недавно на Хабре появилось отличное решение, которое позволяет определять стили под любой броузер или ОС.Необходимый скрипт:

<script type="text/javascript">
  var cssFix = function(){
  var u = navigator.userAgent.toLowerCase(),
  addClass = function(el,val){
	if(!el.className) {
	  el.className = val;
	} else {
	  var newCl = el.className;
	  newCl+=(" "+val);
	  el.className = newCl;
	}
  },
  is = function(t){return (u.indexOf(t)!=-1)};
  addClass(document.getElementsByTagName('html')[0],[
	(!(/opera|webtv/i.test(u))&&/msie (d)/.test(u))?('ie ie'+RegExp.$1)
	  :is('firefox/2')?'gecko ff2'
	  :is('firefox/3')?'gecko ff3'
	  :is('gecko/')?'gecko'
	  :is('opera/9')?'opera opera9':/opera (d)/.test(u)?'opera opera'+RegExp.$1
	  :is('konqueror')?'konqueror'
	  :is('applewebkit/')?'webkit safari'
	  :is('mozilla/')?'gecko':'',
	(is('x11')||is('linux'))?' linux'
	  :is('mac')?' mac'
	  :is('win')?' win':''
  ].join(" "));
}();
</script>

И теперь у нас есть классы для операционных систем:

.win — Windows;
.linux — Linux;
.mac — MacOS.

И классы для броузеров:

.ie — все версии ИЕ;
.ie8 — ИЕ 8.х;
.ie7 — ИЕ 7.x;
.ie6 — ИЕ 6.x;
.ie5 — ИЕ 5.x;
.gecko — все версии фаерфокса и остальные гекко-браузеры;
.ff2 — фаерфокс 2;
.ff3 — фаерфокс 3;
.opera — все версии оперы;
.opera8 — опера 8.x;
.opera9 — опера 9.x;
.konqueror — konqueror;
.safari — сафари.

Т. е. если вы хотите для сафари под виндой у всех блоков сделать текст красного цвета, то нужно написать вот так:

.win .safari div {
color: #D50303;
}

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