CSS оптимизация: пишем правила сокращенно
Использование CSS при разработке сайта поможет сэкономить массу времени и избежать лишнего кода в документе. Однако, мы часто перегружаем сам CSS файл лишним кодом, забывая о возможности писать правила сокращенно, о комбинировании селекторов и использовании потомков селекторов вместо прописывания отдельного класса.
Существует 6 CSS свойств, правила для которых можно писать сокращенно, (т.е. в одну строку, а не в отдельности для каждого подвида свойства) это: margin, padding, border, background, list-style, font.
Сокращенные правила для margin
Свойство margin включает: margin-top, margin-right, margin-bottom, margin-left. Таким образом, вместо:
div {
margin-top: 5px;
margin-right: 8px;
margin-bottom: 3px;
margin-left: 4px; }
можно написать:
div { margin: 5px 8px 3px 4px; }
Важно помнить, что сокращенные правила для margin всегда следуют в таком порядке: top, right, bottom, left. Чтобы легче запомнить, представьте, например, движение по часовой стрелке.
Если значения top/bottom и left/right одинаковы, то сокращение будет выглядеть так:
div { margin: 5px 8px; }
Т.е. получаем, что отступы сверху и снизу 8 px, а слева и справа 5 px.
Еще один способ:
div {margin : 5px 10px 2px}
Здесь порядок следующий: 5px – top, 10px – left и right, 2px – bottom
А если все 4 свойства имеют ожинаковое значение, то пишем:
div { margin: 5px; }
Сокращенные правила для padding
Сокращенные правила для свойства padding абсолютно идентичны вышеописанному для margin. Нужно лишь запомнить несколько правил:
- Порядок свойств: top, right, bottom, left
- Если правила можно сократить до двух значений, то свойства будут следовать в порядке: top/bottom и left/right.
- Если нужно обнулить значения для нескольких сторон одновременно, то достаточно прописать 0 без указания единиц.
div { padding: 30px 0; } /* top/bottom - 30px , left/right - 0px */
Сокращенные правила для border
Свойство border включает: border-width, border-style, border-color. Первым следует значение width, затем style и color. Таким образом, вместо:
div {
border-width: 3px;
border-style: solid;
border-color: #c00; }
Можно написать:
div { border: 3px solid #c00; }
Сокращенные правила для background
Свойство background содержит 5 возможных значений: background-color, background-image, background-repeat, background-attachment, и background-position (именно в таком порядке). Поэтому вместо:
div {
background-color: #fff;
background-image: url(../images/bg.gif);
background-repeat: repeat-y;
background-attachment: fixed;
background-position: top center; }
Пишем:
div { background: #fff url(../img/bg.gif) repeat-y fixed top left; }
Для свойства background-position первое значение относится к положению по вертикали, второе – по горизонтали. По умолчанию оба значения – center.
Сокращенные правила для list-style
Свойство list-style включает: list-style-position, list-style-type (или list-style-image).
ul {
list-style-type: square;
list-style-position: inside; }
Сокращенный код:
ul { list-style: square inside; }
Если нужно обнулить все значения стилей списков, то пишем:
ul { list-style: none; }
Сокращенные правила для font
Использование сокращений для свойства font, скорее всего, наиболее актуально, т.к. включает множество свойств: font-style, font-variant, font-weight, font-size, line-height, и font-family. Вместо большого и некрасивого кода:
p {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: small;
line-height: 1.2em;
font-family: Helvetica, Arial, sans-serif; }
Можно написать:
p { font: italic small-caps bold small/1.2em Helvetica, Arial, sans-serif; }
Конечно, не всегда нам нужно указывать все 6 значений – это пример лишь для указания порядка значений. Наиболее часто мы используем значения font-size, line-height, font-family одновременно.
Можно отметить еще одно небольшое правило к оформлению кода для указания цвета. Если все 6 символов цвета одинаковы, например #FFFFFF, то достаточно прописать #FFF. Это правило также будет работать и в случае если первые 3 символа совпадают с остальными 3мя каждые 2 символа образуют пару соотвественно модели R G B: #336699 = #369
Существуют также и on-line сервисы-оптимизаторы CSS, которые помогут съэкономить вам время, если вы только начинаете привыкать к написанию сокращенных правил. Среди них:
В статье использованы материалы сайта : ""
Dmoz
Я считаю, что короткую запись использовать нужно, но не везде,
например писать
-top -right -bottom -left действительно лучше за раз, там где это возможно,
но я категорически не рекомендую использовать записи вроде этой
div {margin : 5px 10px 2px}
экономия смехотворна, а прозрачность теряется, пусть лучше будет
div {margin : 5px 10px 2px 2px}
Цитировать
В последнем у вас ошибка:
10px – это значения для left и right, а у вас получилось для bottom и left. Это будет так:
div {margin : 5px 10px 2px 10px}
Для одной такой записи экономия байт конечно мизерная, но если у вас сложный проект с множеством CSS, то любое уменьшение объема будет иметь место.
Цитировать
Это правило также будет работать и в случае если первые 3 символа совпадают с остальными 3мя: #369369 (= #369)
Эм… и как определить #369 = #336699 или #369369 – скажите честно – вы это сами придумали? В стандарте CSS2.1 такого я не встречал.
Цитировать
Steward, сработает второй вариант #369369
Цитировать
с чего это вы так решили?
Внимательно читаем – – там нет ни слова в подтверждение сказанного вами.
Цитировать
Steward, вы правы. Исправила ошибку в тексте.
Цитировать
надо будет познакомиться поближе с этим
Цитировать
Про фонты – новенькое для меня в css. Как-то ране не пользовался подобным сокращением, теперь же буду :) Спасибо
Цитировать
Так как всё таки быть с сокращением 6-ти значного кода цвета?Есть ли какая-нибудь таблица сокращений?
Цитировать
если все цифры одинаковые, например #000000, то можно писать #000
если 3 пары цифр одинаковых, например #ccddee, то можно написать #cde
Никаких дополнительных таблиц не надо. Других способов сокращений нет.
Цитировать
А нет ли специальной программки для оптимизации CSS, которая может взять и склеить избыточные таблицы в одну маленькую? Я поискал по инету и че-то ни чего не нашел….
Цитировать
Именно программ не встречала, но он-лайн ресурсов по оптимизации стилей много – они в конце статьи.
Цитировать
Мне нужен был инструментик, который фильтрует бесполезные записи в CSS. Все, что нашел – это фильтрация комментариев и избыточных пробелов. Но какой с них толк… Пришлось самому написать. Благо есть готовые CSS-селекторы на PHP. Оставалось 20 строк кода набросать. И фильтр готов. Если кому интересно, могу показать…
Цитировать
Было бы интересно посмотреть :) Что понимается под бесполезными записями?
Цитировать
Ну, тогда смотрите. Залил значит скрипт и библиотеку сюда. Сама библиотека PHP Simple HTML DOM Parser скачивается .
Теперь пояснения:
Мне нравится запускать скрипты через один очень продвинутый блокнот – EmEditor. В котором есть возможность по клику или по хоткею запускать командную строку с именем открытого файла и тут же получить вывод инициированный этой камандной строкой, поэтому и скрипт заточен под использование командной строки. Цель, ради которой скрипт был написан – это фильтрация бесполезных стилей для заданного Html-документа, который на таблицу с этими стилями ссылается. Это полезно, когда надо перетащить понравившийся кусок приглянувшейся страницы в свою базу шаблонов, так как в ручную отфильтровать стили не реально, а если не фильтруя добавить одну таблицу к другой, то результат будет непредсказуем.
Таким образом все, что нужно – это:
1. открыть в EmEditor код понравившийся страницы (лучше из Оперы, она не ставит атрибут Readonly),
2. отфильтровать лишние теги (это отдельная, но тоже решаемая задача),
3. вставить в начало документа пустую строку и скопировать в нее url страницы,
4. запустить скрипт css_filtef,
5. получить список стилей,
6. перенести html и css в соответствующие шаблоны.
И все. Весь алгоритм html-плагиата. Если полученную CSS-таблицу и придется подредактировать, то это будет всего несколько строк. Поясню еще, что url страницы нужен скрипту для получения url домена, на котором лежат CSS-файлы.
Скрипт делает следующее:
1. загружает html-документ из адреса, указанного в командной строке,
2. пытается из первой строки поучить url домена,
3. находит в html ссылки на CSS-файлы
4. загружает и парсит таблицы из CSS-файлов
5. создает из html DOM-объект
6. для каждого css-селектора пытается найти в DOM соответствующие элементы
7. если найдено соответствие, то соответствующая запись css-запись выводится
При этом к каждой записи (на всякий случай) добавляются пустые комментирующие скобки, так как CSS-парсер не реагирует на коментарии в селекторах и может выдать не закрытый комментарий, поэтому после каждого вывода комментарии закрываются принудительно.
Вот и все.
Цитировать
Спасибо! Будем разбираться :) Код из комментария вставлять не стала, я так понимаю это тот самый скрипт на который вы дали ссылку?
Цитировать
Да, тот самый, но тогда следовало бы перезалить архив из файлобменника на ваш сервер, что бы идея пожила по дольше.
Цитировать
Уже залила к себе и обновила ссылку в комментарии. Спасибо!
Цитировать