» » Сокращеная запись свойст CSS 3
141 0  

Сокращеная запись свойст CSS 3

В CSS3 для уменьшения веса кода предусмотрено использование сокращенного синтаксиса - в нем имеет значение в каком порядке идут свойства - поэтому очень тяжело запомнить все правила поочеродности написания.

Правила сокращенной записи для следующих свойств:

  1. Свойства шрифтов.
  2. Свойства списков.
  3. Свойства фона.
  4. Свойства границ
  5. Свойства контуров
  6. Свойства переходов (для CSS3)

winked По мере свободного времени буду расширять этот список. Все сокращения прохоят валидацию по спецификациях W3C:

 Свойства шрифтов

Для задание шрифта нужно, как правило, 6 свойств шрифта: /* свойства шрифтов со значениями по умолчанию */
font-variant: normal
line-height: normal
font-family: varies
font-weight: normal
font-style: normal
font-size: medium

/* краткая запись для свойств шрифта */
font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];

/* ПРИМЕРЫ */
font: 14px Georgia, serif;
font: 14px/1.4 Georgia, serif;
font: italic lighter 14px/1.4 Georgia, serif;
font: italic small-caps lighter 14px/1.4 Georgia, serif;

 Свойства списков

В CSS есть 3 свойства, позволяющие работать со списками: вид маркера, адрес изображения, позиция в тексте (type, image, и position).

/* свойства списка по умолчанию */
list-style-position: outside;
list-style-image: none;
list-style-type: disc;

Давайте упростим, согласно правилам W3C:

/* краткая форма для свойств списка */
list-style: [list-style-type] [list-style-position] [list-style-image];

/* ПРИМЕРЫ */
list-style: none;
list-style: disc;
list-style: disc outside;
list-style: disc outside url(bg.png);

 Свойства фона

Каждое из пяти свойств представляет из себя много кода. /* свойства фона в значении по умолчанию */
background-attachment: scroll;
background-color: transparent;
background-position: top left;
background-repeat: repeat;
background-image: none;

/* краткая форма записи свойств фона */
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];

/* ПРИМЕРЫ */
background: #777;
background: url(/images/bg.png) 0 0;
background: #777 url(/images/bg.png) repeat-x 0 0;
background: #777 url(/images/bg.png) repeat-x fixed 0 0;

 Свойства границ и контуров. Границы (border)

3 свойства border выглядят по умолчанию: /* свойства границ по умолчанию */
border-width: none;
border-style: none;
border-color: none;

/* краткая запись свойств границы */
border: [border-width] [border-style] [border-color];

/* ПРИМЕРЫ */
border: 1px solid #111;
border: 2px dotted #222;
border: 3px dashed #333;

Можно также упростить форму записи для каждой из границ рамки:
border-bottom: 1px solid #777;
border-right:  2px solid #111;
border-left:   2px solid #111;
border-top:    1px solid #777;
 border-width: 1em 2em 3em 4em  border-radius: 1em 2em 3em 4em

 Контуры (outline)

три отдельных свойства:

/* свойства контуров */
outline-width: thin;
outline-style: dotted;
outline-color: inherit;

И краткий вариант:

/* краткая запись свойств контуров */
outline: [outline-width] [outline-style] [outline-color];

/* ПРИМЕРЫ */
outline: 1px solid #111;
outline: 2px dotted #222;
outline: 3px dashed #333;


 Свойства переходов (CSS3) ↩

Стандартных 4 свойства переходов, /* свойства переходов в значениях по умолчанию */
transition-property: none;
transition-duration: none;
transition-delay: none;
transition-timing-function: none;

/* сокращенная форма записи для переходов */
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

/* ПРИМЕРЫ */
transition: opacity 3s ease 1s;
transition: opacity 3s ease-in 1s;
transition: opacity 3s ease-out 1s;
transition: opacity 3s ease-in-out 1s;

Почти то же самое, только в начале используются префиксы в соответствии с вариантами браузеров:
-webkit-transition: opacity 3s ease 1s;
-moz-transition: opacity 3s ease 1s;
-o-transition: opacity 3s ease 1s;
transition: opacity 3s ease 1s;


bully Буду рад увидеть в комментариях и Ваши сокращения для CSS...

Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2019