😎 » CSS3 » Сокращеная запись свойст CSS 3
1 415 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-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif


Сокращеная:

font: 1em/1.5em bold italic serif;
/* ПРИМЕРЫ */
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
2009
2023