Свойство фона CSS - Сокращение от Длинной формы - PullRequest
Новая
       15

Свойство фона CSS - Сокращение от Длинной формы

3 голосов
/ 07 августа 2010

Насколько я понимаю, когда вы используете сокращенное свойство background, браузер сначала устанавливает для всех свойств фона значения по умолчанию, а затем вводит значения, которые вы объявляете.Тогда лучше использовать background-color:white;вместо background:white?Изменится ли это, когда вы вводите больше значений, таких как положение фона или фоновое изображение?Или всегда лучше объявлять атрибуты по отдельности?

Я думаю, что должен быть какой-то переломный момент, когда экономия в байтах уравновешивает время обработки, полученное путем индивидуального задания атрибутов.Тем не менее, я могу быть совершенно не прав - вот почему я спрашиваю здесь.

Ответы [ 2 ]

4 голосов
/ 07 августа 2010

Я слышу вас о лучших практиках, но, как уже упоминалось, различия в обработке и даже времени загрузки незначительны.Не рекомендуется применять эти правила, кроме того, что имеет смысл в вашей таблице стилей.Реальная разница в том, что они по-разному влияют на наследуемые свойства.Установка background-color: white; будет перезаписывать только правило background-color (независимо от того, было ли оно изначально установлено с background или background-color), но background будет перезаписывать любой / все background набор правил, таким образом потенциально убивая фоновые изображенияи связанный background-repeat, и т. д. Вот пример: 

.box {
    background: url(star.png); // set with just background instead of background-image
    width: 100px;
    height: 100px;
    float: left;
    margin: 10px;
}
.box1 {
    background-color: blue;
}
.box2 {
    background: green;
}

С HTML как: 

<div class="box1 box"></div>
<div class="box2 box"></div>

.box1 покажет изображение star.png (с синим фоном, еслиизображение прозрачное), в то время как .box2 будет показывать только зеленый фон, без изображения.Урок передового опыта с этими двумя правилами заключается в оценке CSS-авторинга и наследования в целом, а не производительности рендеринга.Имея это в виду, как правило, лучше применять background к наиболее общему / обобщенному правилу элемента, а затем перезаписывать свойства в более конкретных экземплярах, используя классы или идентификаторы, с помощью background-color, background-image и т. Д.

2 голосов
/ 07 августа 2010

Время обработки вашего CSS должно быть незначительным.Если вы воздерживаетесь от их использования только из-за этого, то не стоит больше себя сдерживать.

При использовании только цвета background: color и background-color: color должны давать одинаковый результат.

В конце концов, все сводится к тому, если вы предпочитаете короткие объявления отдельным объявлениям.Обычно shorthands будет использовать разумные значения по умолчанию, так что все в порядке.Я обычно не помню правильный порядок для них (особенно сокращение font), но кроме этого я думаю, что они вполне нормальные.

Возможно, вы использовали гораздо больше сокращенных свойств, чем ожидали,в любом случае.Например, margin и padding - это сокращения их -top, -right, -bottom и -left, а border - сокращение для border-width, border-color и border-style, которые являются сокращениями для их border-[direction]-[attribute] свойств.Используя border вместо всех не сокращенных свойств, вы сохраняете как 11 строк.

...