csso
csso copied to clipboard
css
Небезопасная структурная минимизация для сочетания "фоновых" свойств в полной и короткой записи
В чем-то перекликается с #58, но смысл другой немного. Структурная минимизация ломает правильную последовательность свойств при сочетании конкретных правил для фона и укороченной записи. Реальный случай кнопки на цсс3 с полным фолбеком для ИЕ на картинках. "Лишние" свойства удалены:
.b-billet_viewtype_a1-right-arrow {
background-image: url('../images/bg/billets_original.png');
background-position: 0 -100px;
background: linear-gradient(to bottom, transparent 0%, transparent 100%);
}
.b-billet_viewtype_a1-right-arrow .b-billet__in {
background-image: url('../images/bg/billets_original.png');
background-position: 100% -125px;
background: linear-gradient(to bottom, #fbfbfb 0%, #e4e6e8 100%);
}
На выходе:
.b-billet_viewtype_a1-right-arrow {
background-position: 0 -100px;
background: linear-gradient(to bottom, transparent 0, transparent 100%);
}
.b-billet_viewtype_a1-right-arrow, .b-billet_viewtype_a1-right-arrow .b-billet__in {
background-image: url('../images/bg/billets_original.png');
}
.b-billet_viewtype_a1-right-arrow .b-billet__in {
background-position: 100% -125px;
background: linear-gradient(to bottom, #fbfbfb 0, #e4e6e8 100%);
}
Т.е. современные браузеры получают лишнее правило (и лишний запрос к серверу):
.b-billet_viewtype_a1-right-arrow {
background-image: url('../images/bg/billets_original.png');
}
Без лишних свойств я ошибку повторить не могу, т.к. при таком входе выход оказывается другой — ни одно из свойств не меняет место. :)
Оу, окей, вот реальный код, с вендорными префиксами и прочим:)
.b-billet_viewtype_a1-right-arrow {
background-image: url('../images/bg/billets_original.png');
background-position: 0 -229px;
color: #5a5a5a;
height: 30px;
margin-right: 4px;
-moz-border-radius: 3px;
background: -moz-linear-gradient(top, transparent 0%, transparent 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(100%, transparent));
background: -webkit-linear-gradient(top, transparent 0%, transparent 100%);
background: -o-linear-gradient(top, transparent 0%, transparent 100%);
background: linear-gradient(to bottom, transparent 0%, transparent 100%);
margin-right: 14px;
}
.b-billet_viewtype_a1-right-arrow .b-billet__in {
background-image: url('../images/bg/billets_original.png');
background-position: 100% -733px;
color: #5a5a5a;
height: 30px;
line-height: 30px;
padding-right: 16px;
margin-right: -4px;
-moz-border-radius: 3px;
border-radius: 3px;
padding-right: 14px;
padding-left: 16px;
margin-right: -14px;
background: -moz-linear-gradient(top, #fbfbfb 0%, #e4e6e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fbfbfb), color-stop(100%, #e4e6e8));
background: -webkit-linear-gradient(top, #fbfbfb 0%, #e4e6e8 100%);
background: -o-linear-gradient(top, #fbfbfb 0%, #e4e6e8 100%);
background: linear-gradient(to bottom, #fbfbfb 0%, #e4e6e8 100%);
-moz-box-shadow: 0 0 0 1px #bebebe inset;
box-shadow: 0 -1px 0 0 #adadad inset, 0 0 0 1px #bebebe inset, 0 2px 0 rgba(255, 255, 255, 0.2) inset;
}
Результат:
.b-billet_viewtype_a1-right-arrow {
background-position: 0 -229px;
background: -moz-linear-gradient(top, transparent 0, transparent 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(100%, transparent));
background: -webkit-linear-gradient(top, transparent 0, transparent 100%);
background: -o-linear-gradient(top, transparent 0, transparent 100%);
background: linear-gradient(to bottom, transparent 0, transparent 100%);
margin-right: 14px
}
.b-billet_viewtype_a1-right-arrow, .b-billet_viewtype_a1-right-arrow .b-billet__in {
background-image: url('../images/bg/billets_original.png');
color: #5a5a5a;
height: 30px;
-moz-border-radius: 3px
}
.b-billet_viewtype_a1-right-arrow .b-billet__in {
background-position: 100% -733px;
line-height: 30px;
border-radius: 3px;
padding-right: 14px;
padding-left: 16px;
margin-right: -14px;
background: -moz-linear-gradient(top, #fbfbfb 0, #e4e6e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fbfbfb), color-stop(100%, #e4e6e8));
background: -webkit-linear-gradient(top, #fbfbfb 0, #e4e6e8 100%);
background: -o-linear-gradient(top, #fbfbfb 0, #e4e6e8 100%);
background: linear-gradient(to bottom, #fbfbfb 0, #e4e6e8 100%);
-moz-box-shadow: 0 0 0 1px #bebebe inset;
box-shadow: 0 -1px 0 0 #adadad inset, 0 0 0 1px #bebebe inset, 0 2px 0 rgba(255, 255, 255, .2) inset
}
Ещё один случай из жизни :) На этот раз c display, и, похоже, что это не от свойства зависит. Не уверен, но такое ощущение, что оптимизация не в том порядке идёт — структурная минимизация правил для соседних блоков происходит раньше, чем удаление дублирующихся внутри блока.
Ситуация ещё больше усложняется при наличии правил с вендорными префиксами, которые нельзя схлопывать или менять местами, что нужно учитывать при объединении правил соседних блоков.
.b-top-links {
font: 0/0 a;
text-align: justify;
letter-spacing: normal;
display: inline-block;
display: block;
vertical-align: top;
padding-left: 179px;
}
.b-top-links:after {
content: '';
font: 0/0 a;
display: -moz-inline-stack;
display: inline-block;
visibility: hidden;
vertical-align: top;
margin: 0;
padding: 0;
width: 100%;
height: 0;
}
=>
.b-top-links {
text-align: justify;
letter-spacing: normal;
display: block;
padding-left: 179px
}
.b-top-links, .b-top-links:after {
font: 0/0 a;
display: inline-block;
vertical-align: top
}
.b-top-links:after {
content: '';
display: -moz-inline-stack;
visibility: hidden;
margin: 0;
padding: 0;
width: 100%;
height: 0
}
Да, вижу проблему. Будем фиксить. Как минимум, потеря порядка вендоров — явно не то, что должно происходить.
В общем, всё гораздо сложнее, чем казалось поначалу. Бага не будет забыта, но уходит на начало 2013 года, похоже. Надо пару корневых функций заново переписывать. Извините.
