Оптимизация css(5 свойств)
Оптимальный CSS играет важную роль в создании сайта. В этой статье показаны варианты краткой записи для пяти основных свойств css.
Отличный способ оптимизации CSS – это использование сокращенного синтаксиса. Проработав с большим количеством кода, я надежно заучил массу вариантов CSS-верстки, но все равно мне порой приходится обращаться к какому-нибудь письменному источнику, чтобы освежить память. В этом топике я покажу вам правила сокращенной записи для следующих свойств:
Свойства шрифтов.
Свойства списков.
Свойства фона.
Свойства границ и контуров
Свойства переходов (для CSS3)
Это топ 5 в моем списке самых сложных и часто используемых сокращенных свойств. Есть и другие, даже в CSS3, но им я посвящу отдельный пост. Ладно, хватит обо мне, давайте приступим.
Свойства шрифтов
Стилизация шрифтов включает в себя ряд отдельных свойств. Можно сэкономить довольно много места, используя сокращенный метод записи, но надо быть осторожным с их порядком, например font-size и font-family должны располагаться именно в такой последовательности. Вот все 6 свойств шрифта в значениях по умолчанию:
/* свойства шрифтов со значениями по умолчанию */
font-variant: normal
line-height: normal
font-family: varies
font-weight: normal
font-style: normal
font-size: medium
Эти 6 строчек можно объединить в одно правило, основываясь на спецификациях W3C:
/* краткая запись для свойств шрифта */
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;
К счастью, большинству дизайнеров знакома сокращенная форма записи, а не индивидуальное название каждого свойства. Для экономии, эти пять строк можно превратить в одну, все так же основываясь на спецификациях W3C:
/* краткая форма записи свойств фона */
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];
/* ПРИМЕРЫ */
background: #777;
background: url(http://domain.tld/images/bg.png) 0 0;
background: #777 url(http://domain.tld/images/bg.png) repeat-x 0 0;
background: #777 url(http://domain.tld/images/bg.png) repeat-x fixed 0 0;
Есть несколько нюансов, касающихся правильного использования сокращенного синтаксиса и записи свойств фона с его помощью, со всеми можно ознакомиться в официальной документации разработчиков.
Свойства границ и контуров. Границы (border)
Стилизовать границы и контуры намного проще, записывая свойства в сокращенном виде. Вот как 3 свойства border выглядят по умолчанию:
/* свойства границ по умолчанию */
border-width: none;
border-style: none;
border-color: none;
Объединяем согласно спецификации W3C:
/* краткая запись свойств границы */
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;
На самом деле, с границами можно колдовать намного больше. Если хотите узнать подробнее, почитайте вот этот скучный пост – информация крайне сухая, но очень полезная. Также много интересного можно найти о создании в CSS красивых закругленных углов.
Контуры (outline)
Очень схожи с border. Вот три отдельных свойства:
/* свойства контуров */
outline-width: thin;
outline-style: dotted;
outline-color: inherit;
И краткий вариант:
/* shorthand notation for outline properties */
outline: [outline-width] [outline-style] [outline-color];
/* ПРИМЕРЫ */
outline: 1px solid #111;
outline: 2px dotted #222;
outline: 3px dashed #333;
Несколько замечаний по поводу контуров (outline):
Не все браузеры поддерживают свойство outline
Контуры не противоречат размещению – они располагаются над элементом
Дизайнеры часто удаляют ненужные границы на графических ссылках
Если вы убираете стили контуров, устанавливая таблицу заново, не забудьте использовать альтернативный стиль
Свойства переходов (CSS3) ↩
Анимированные переходы в CSS находятся на стадии разработки, так что корректно их пока поддерживают только основанные на Webkit браузеры, такие как Сафари. Заставить работать transition в Firefox, Chrome, и Opera можно, добавив несколько строчек к коду. Вот 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;
Стиль «слово, число, слово, число» очень удобен. Разделяя числа словами, как на примере выше, легче запомнить порядок, в котором идут свойства. Но как упоминалось ранее, чтобы заставить работать свойства во всех основных браузерах (кроме IE), надо дописать еще несколько правил. Почти то же самое, только в начале используются префиксы в соответствии с вариантами браузеров:
-webkit-transition: opacity 3s ease 1s;
-moz-transition: opacity 3s ease 1s;
-o-transition: opacity 3s ease 1s;
transition: opacity 3s ease 1s;
Да, дополнительные строчки портят элегантность краткой записи переходов, но зато так они будут работать. Я рассматриваю это как независимое усовершенствование. Все эти специфичные свойства для браузеров влияют только на них,
Отличный способ оптимизации CSS – это использование сокращенного синтаксиса. Проработав с большим количеством кода, я надежно заучил массу вариантов CSS-верстки, но все равно мне порой приходится обращаться к какому-нибудь письменному источнику, чтобы освежить память. В этом топике я покажу вам правила сокращенной записи для следующих свойств:
Свойства шрифтов.
Свойства списков.
Свойства фона.
Свойства границ и контуров
Свойства переходов (для CSS3)
Это топ 5 в моем списке самых сложных и часто используемых сокращенных свойств. Есть и другие, даже в CSS3, но им я посвящу отдельный пост. Ладно, хватит обо мне, давайте приступим.
Свойства шрифтов
Стилизация шрифтов включает в себя ряд отдельных свойств. Можно сэкономить довольно много места, используя сокращенный метод записи, но надо быть осторожным с их порядком, например font-size и font-family должны располагаться именно в такой последовательности. Вот все 6 свойств шрифта в значениях по умолчанию:
/* свойства шрифтов со значениями по умолчанию */
font-variant: normal
line-height: normal
font-family: varies
font-weight: normal
font-style: normal
font-size: medium
Эти 6 строчек можно объединить в одно правило, основываясь на спецификациях W3C:
/* краткая запись для свойств шрифта */
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;
К счастью, большинству дизайнеров знакома сокращенная форма записи, а не индивидуальное название каждого свойства. Для экономии, эти пять строк можно превратить в одну, все так же основываясь на спецификациях W3C:
/* краткая форма записи свойств фона */
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];
/* ПРИМЕРЫ */
background: #777;
background: url(http://domain.tld/images/bg.png) 0 0;
background: #777 url(http://domain.tld/images/bg.png) repeat-x 0 0;
background: #777 url(http://domain.tld/images/bg.png) repeat-x fixed 0 0;
Есть несколько нюансов, касающихся правильного использования сокращенного синтаксиса и записи свойств фона с его помощью, со всеми можно ознакомиться в официальной документации разработчиков.
Свойства границ и контуров. Границы (border)
Стилизовать границы и контуры намного проще, записывая свойства в сокращенном виде. Вот как 3 свойства border выглядят по умолчанию:
/* свойства границ по умолчанию */
border-width: none;
border-style: none;
border-color: none;
Объединяем согласно спецификации W3C:
/* краткая запись свойств границы */
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;
На самом деле, с границами можно колдовать намного больше. Если хотите узнать подробнее, почитайте вот этот скучный пост – информация крайне сухая, но очень полезная. Также много интересного можно найти о создании в CSS красивых закругленных углов.
Контуры (outline)
Очень схожи с border. Вот три отдельных свойства:
/* свойства контуров */
outline-width: thin;
outline-style: dotted;
outline-color: inherit;
И краткий вариант:
/* shorthand notation for outline properties */
outline: [outline-width] [outline-style] [outline-color];
/* ПРИМЕРЫ */
outline: 1px solid #111;
outline: 2px dotted #222;
outline: 3px dashed #333;
Несколько замечаний по поводу контуров (outline):
Не все браузеры поддерживают свойство outline
Контуры не противоречат размещению – они располагаются над элементом
Дизайнеры часто удаляют ненужные границы на графических ссылках
Если вы убираете стили контуров, устанавливая таблицу заново, не забудьте использовать альтернативный стиль
Свойства переходов (CSS3) ↩
Анимированные переходы в CSS находятся на стадии разработки, так что корректно их пока поддерживают только основанные на Webkit браузеры, такие как Сафари. Заставить работать transition в Firefox, Chrome, и Opera можно, добавив несколько строчек к коду. Вот 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;
Стиль «слово, число, слово, число» очень удобен. Разделяя числа словами, как на примере выше, легче запомнить порядок, в котором идут свойства. Но как упоминалось ранее, чтобы заставить работать свойства во всех основных браузерах (кроме IE), надо дописать еще несколько правил. Почти то же самое, только в начале используются префиксы в соответствии с вариантами браузеров:
-webkit-transition: opacity 3s ease 1s;
-moz-transition: opacity 3s ease 1s;
-o-transition: opacity 3s ease 1s;
transition: opacity 3s ease 1s;
Да, дополнительные строчки портят элегантность краткой записи переходов, но зато так они будут работать. Я рассматриваю это как независимое усовершенствование. Все эти специфичные свойства для браузеров влияют только на них,
(4)
© 2024, JohnCMS