Синдикация
Как оптимизировать CSS
Одна из самых полезных особенностей CSS2 - способность использовать стенографию («скоропись»). В результате чего мы получаем красивый, не перегруженный код, который пишется легко и быстро.
Такая оптимизация CSS выигрышная, если приходится прописывать кучу стилей к одному сайту. Если вы верстаете в DreamWeaver, то наверняка уже использовали этот метод интуитивно, когда прописывали стили, например, к шрифтам или фону - спасибо разработчикам, они позаботились о всплывающих подсказках:)
Давайте еще раз пробежимся по списку, может быть, откроете для себя еще что-то интересное:
- Отбивка (Margin & Padding)
- Шрифты (Font)
- Фон (Background)
- Границы (Border)
- Списки (List)
- Контуры (Outline)
Вместо того, чтобы каждый раз прописывать отдельно margin-top, margin-right …. как здесь:
{
margin-top: 10px;
margin-right: 15px;
margin-bottom: 5px;
margin-left: 0px;
}
Мы можем сделать следующее:
{margin: 10px 15px 5px 0;}
Первый и второй код абсолютно идентичны друг другу и работоспособны. А чтобы было проще запомнить, что и в каком порядке писать - вспоминаем, как движется стрелка на часах. Сначала она вверху (<code>margin-top</code>), потом справа (<code>margin-right</code>), потом внизу (<code>margin-bottom</code>) и наконец - слева (<code>margin-left</code>)
Если же у нас отбивка (Margin & Padding) со всех сторон одинаковая, то пишем так:
{margin: 10px;}
Теперь рассмотрим случай, когда повторяются отбивки сверху-снизу и слева-справа:
{
padding-top: 10px
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
}
это мы можем смело писать как
{padding: 10px 5px;}
А вот теперь самое интересное - мало кто знает, что можно использовать не только 1, 2 или 4 переменных, но и 3! Первая будет отвечать за отбивку сверху, вторая - за правую и левые стороны, а третья - за низ. Например:
{margin: 0 10px 5px 10px;}
идентично
{margin: 0 10px 5px;}
По сравнению с margin и padding параметров здесь несколько больше, но это не повод пугаться. Посмотрим, что у нас вообще есть и в каком порядке это должно писаться:
{
font-style: italic;
font-variant: small-caps;
font-weight: 500;
font-size: 1em;
line-height: 24px;
font-family: arial,verdana,sans-serif;
}
А коротко:
{font: italic small-caps 500 1em/24px arial,verdana,sans-serif;}
Следующий код задает размер шрифта 12 pixels, высоту линий 28 pixels, тип шрифта - без засечек:
{font: 12px/28px sans-serif;}
Остальные параметры, которые были опущены, либо наследуют родительские свойства, либо приравниваются к нормальным (обычным).
Объединяем несколько параметров в один:
{
background-color: #456;
background-image: url(back.gif);
background-repeat: repeat-y;
background-attachment: fixed;
background-position: 50% 50%;
}
или:
{background: #456 url(back.gif) repeat-y fixed 50% 50%;}
Свойства фона, как и шрифтов, имеют установки по умолчанию. Либо цвет фона, либо фоновый рисунок - должны быть прописаны. Вот эти параметры:
color: transparent; image: none; repeat: repeat; attachment: scroll; position: left top (0 0);
Самая частая ошибка - это когда значения позиции фона меняются местами. По-русски:
{background-position: top left;}
должно писаться как
{background-position: left top;}
Но, раз мы решили оптимизировать код, то положение фона слева вверху было бы проще написать как 0 0, а справа внизу - 100% 100%.
Еще один момент, который вы могли уже заметить - это настройки цвета. Мы установили цвет фона #456, а его шестнадцатиричное значение - #445566. Хотя это и не значительное изменение, но все-таки оно немного упрощает работу.
Одни из самых часто используемых свойств рамок - это ширина и стиль. Раньше, чтобы придать необходимые параметры, нам пришлось бы писать следующий код:
{
border-left-width: 2px;
border-left-style: solid;
border-left-color: #000;
border-right-width: 2px;
border-right-style: solid;
border-top-color: #000;
border-top-width: 3px;
border-top-style: solid;
border-top-color: #000;
}
Сейчас же мы можем уложиться всего в пару строк:
{
border: solid #000;
border-width: 3px 2px 0;
}
В случае, если параметры всех границ одинакомы:
{border: 3px solid #000;}
Используйте все возможности для оптимизации кода. В случае необходимости вам будет легче его потом править.
Списки используются редко, да и свойств у них не так уж много. Поэтому меньше слов, больше дела
{
list-style-type: circle;
list-style-position: inside;
list-style-image: url(bullet.gif);
}
заменяем на:
{list-style: inside circle url(bullet.gif);}
Так же редко используется. Плюс поддерживается не во всех браузерах - так что будьте осторожны.
{
outline-color: #fff;
outline-style: dotted;
outline-width: 1px;
}
можем смело заменить на
{outline: #fff dotted 1px;}
Понравилась статья? Тогда подпишитесь на RSS, чтобы следить за обновлениями!
29 апреля 2009 в 14:36
ух ты, первый раз вижу запись вида “font: 12px/28px;” незнал об этом.
спасибо большое, очень познавательная статья.
[Ответить]