Сокращения в CSS: пишите код компактнее

Краткость - сестра таланта . Это выражение смело можно применять и к CSS . Ведь уменьшая размер CSS - файла, мы увеличиваем скорость загрузки страниц, делаем работу с кодом более удобной и снижаем количество времени на разработку. Да и вообще, если есть возможность сделать что-то быстрее и компактнее, почему бы ей не воспользоваться!

Начнем с мелочей:

Сокращения шестнадцатеричных кодов цвета

Как Вы знаете, каждому цвету соответствует определенный 16-ричный код. Оказывается, если все 6 знаков данного кода одинаковы, то его можно сократить до 3-х знаков. Например:

Белый → #FFFFFF → #FFF
Черный →#000000→ #000

Думаю суть понятна...

Ноль - он и в Африке ноль

Неважно, в каких единицах будет НОЛЬ! От этого его значение не изменится.

Например, вместо margin:0px; - лучше написать margin:0;

Аналогично и с другими стилевыми правилами.

Если описание класса(или id) включает менее 2-х свойств, то рациональнее записать его в одну строку

Например, вместо этого:

.test {
color:#333
}

Лучше написать так:

.test {color:#333}

По возможности группируйте стили

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

Например вместо этого:

.test {color:#333}
.test1 {color:#333}

лучше написать так:

.test,.test1 {color:#333}

В конце последнего свойства, можно не ставить точку с запятой

.test {
color:#333;
text-decoration:underline
}

Обратите внимание, что после свойства text-decoration:underline нет точки с запятой.

В CSS существуют ряд свойств, имеющих как полные, так и сокращенные формы записи. Давайте кратенько по ним пройдемся:

Сокращенное свойство BACKGROUND

То что записано в обычной форме

BODY {
background-color:#ffee8c ;
background-image : url(smile.png) ;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right
}

Можно записать одной строчкой:

BODY {background: #ffee8c url(smile.png) no-repeat fixed top right }

После ключевого слова background , перечисляем через пробел значения свойств. Последовательность особого значения не имеет. Если чего-то не указать, автоматически подставится значение по умолчанию.

Сокращенное свойство BORDER

То , что записано в обычной форме

h1 {
border-width:30px;
border-style:solid;
border-color:#333;
}

Можно записать одной строчкой

h1 {border:30px solid #333}

В данном сокращении, важно строго соблюдать порядок свойств.

border-width затем через пробел border-style затем border-color .

Аналогичным образом действуют сокращения и для border-bottom, border-left, border-top, border-right.

Например:

h1 {border-left:30px solid #333}

Если какое либо свойство не указано, устанавливается значение по умолчанию.

Сокращенное свойство FONT

Полная форма

p {
font-style: italic;
font-variant: normal ;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif
}

Сокращенная форма

p { font:italic normal bold 30px arial,sans-serif}

Как видите, после ключевого слова font , через пробел перечисляются значения свойств в таком порядке:

font-style_ font-variant _font-weight_font-size_font-family

Если какое либо свойство не указать, установится значение по умолчанию.

Сокращенное свойство LIST-STYLE

Полная форма:

ul {
list-style-type:square;
list-style-position: inside;
list-style-image: url(galka.gif)
}

Сокращенная форма:

ul {list-style:square inside url(galka.gif) }

Опять же, значения свойств перечисляются через пробел. В данном случае порядок роли не играет.

Сокращения для свойств, имеющих значения право, лево, верх, низ

У таких свойств как margin, padding и border имеются уточнения, типа справа(right), слева(left), сверху(top), снизу(bottom)...

Например:

border-left:10px;

означает рамка слева толщиной в 10 пикселей.

Либо

margin-bottom:20px;

означает отступ снизу 20 пикселей.

Так вот, если имеются четыре значения для всех сторон, например:

border-top:10px;
border-right:15px;
border-bottom:10px;
border-left:15px

то сократить эту запись можно используя перечисление значений свойств через пробел ПО ЧАСОВОЙ СТРЕЛКЕ.

border:10px 15px 10px 15px;

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

border:10px 15px;

В данном случае, первое значение, это величина верх/низ, а второе - лево/право.

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

Например:

border:10px;

означает рамку со всех сторон, толщиной 10 пикселей.

Вот так. Надеюсь Вы узнали что-то новенькое :)

Есть вопрос? Получи ответ на ФОРУМЕ ПОДДЕРЖКИ

 Создан: 2010-03-21      Просмотров: 36827      Автор:Андрей Галямов

Комментарии:

Автор: Дима
Дата : 2010-03-21

Хороший урок))а я первый его увидел))

Автор: Юрий
Дата : 2010-03-21

Спасибо за урок.Я второй его увидел.

Автор: nikvornik@gmail.com
Дата : 2010-03-21

Класное дополнение... И вообще, все так интересно...

Автор: ivan
Дата : 2010-03-21

андрюха МОЛОЧИК так держать!!!!

Автор: Дима
Дата : 2010-03-21

Только помоему про такие сокращения писалось в учебнике css

Автор: геннадий
Дата : 2010-03-22

многие умеют читать и много читают, а единицы отмечают, запоминают и используют нужное, Андрей молодчина!

Автор: Алексей
Дата : 2010-03-22

Супер)) спасибо за рассылку:)

Автор: Роман
Дата : 2010-03-22

Спасибо, информация полезная и очень нужная.

Автор: Евгений
Дата : 2010-03-23

Андрей, спасибо! Уже то, что Вы тратите свое время, рассылая нам эту информацию, обязывает нас быть прилежными учениками.

Автор: Антон
Дата : 2010-03-23

Супер!!! Хоть и знал практически все из этого, но повторить все же следует:)

Автор: Серёга
Дата : 2010-04-12

Есть простенькая программа для сокращений CSS и не только, называется (Free CSS Toolbox) из названия ясно что она бесплатна... Спасибо Андрею за поучительный сайт!

Автор: инна
Дата : 2010-04-15

мне очень понравилось хороший урок

Автор: Pavlo K.
Дата : 2010-04-18

Спасибо)))Очень интересно

Автор: Magneto
Дата : 2010-05-07

Белый → #FFFFFF → #FFF Черный →#000000→ #000 это не все сокращаются и эти значения #55FF00 → #5F0 #AACC77 → #AC7 эти уже не сокращаются #001000 #FF55A 7 #33333B #73FC89