Ключевым показателем удобства использования веб-сайта является скорость, или, точнее, то, как быстро страница появляется в окне браузера посетителя. Существует множество факторов, влияющих на скорость, включая скорость вашего веб-сервера, подключение к Интернету вашего посетителя и размер файла, который браузер должен загрузить. Хотя вы не можете контролировать скорость вашего сервера и соединения, вы можете контролировать размер файлов, составляющих веб-страницы вашего веб-сайта.
Чтобы сделать веб-сайты быстрее, веб-разработчики регулярно сжимают и оптимизируют каждый файл изображения на своем веб-сайте, часто жертвуя качеством изображения, чтобы уменьшить размер файла на несколько процентных пунктов. Поскольку таблицы стилей CSS представляют собой простые текстовые файлы и относительно малы по сравнению с изображениями, веб-разработчики редко рассматривают возможность уменьшения размера своих файлов таблиц стилей CSS. Однако, используя сокращения CSS и другие простые приемы, вы можете значительно уменьшить размер таблицы стилей. В ходе неформального специального теста моих собственных таблиц стилей я уменьшил размер файла примерно на 25–50%.
Используйте свойства сокращений CSS:
Сокращенные свойства CSS — это специализированные имена свойств, которые используются для замены нескольких наборов связанных свойств. Например, свойство «padding» является сокращением от «padding-top», «padding-right», «padding-bottom» и «padding-left».
Использование сокращенных свойств позволяет сжать несколько пар свойств/атрибутов в одну строку кода в таблице стилей CSS. Например, рассмотрим следующий код:
.образец1 {
поле сверху: 15 пикселей;
поле справа: 20 пикселей;
нижнее поле: 12 пикселей;
поле слева: 24 пикселя;
отступ-верх: 5 пикселей;
отступ справа: 10 пикселей;
отступ снизу: 4 пикселя;
отступ слева: 8 пикселей;
ширина верхней границы: тонкая;
border-top-style: сплошной;
цвет верхней границы: #000000;
}
Замена его некоторыми свойствами аббревиатуры может привести к следующему коду: фактический эффект обоих будет одинаковым:
.образец1 {
поле: 15 пикселей 20 пикселей 12 пикселей 24 пикселей;
отступы: 5 пикселей 10 пикселей 4 пикселей 8 пикселей;
border-top: тонкий сплошной #000000;
}
Обратите внимание, что сокращенные свойства также имеют несколько свойств, каждое из которых соответствует обычному свойству, которое объединяется в сокращенное свойство. Свойства разделяются пробелом.
Если свойства имеют схожие значения, например, при линейных измерениях свойств полей, важен порядок свойств, следующих за сокращенным свойством. Порядок атрибутов начинается сверху (верхняя граница пуста) и продолжается по часовой стрелке вокруг поля.
Если все свойства свойства-аббревиатуры одинаковы, вы можете просто перечислить одно свойство и скопировать его четыре раза вперед. Следовательно, следующие два свойства равны:
поле: 5 пикселей 5 пикселей 5 пикселей 5 пикселей;
поле: 5 пикселей;
Аналогичным образом вы можете представлять пары свойств «верх/низ» и «право/лево», используя два свойства, следующие за свойствами границы или интервала.
поле: 5 пикселей 10 пикселей 5 пикселей 10 пикселей;
поле: 5 пикселей 10 пикселей;
Порядок атрибутов не важен, если они представляют собой разные значения. Таким образом, такие свойства, как цвет границы, стиль границы и ширина границы, могут следовать за свойством контура в любом порядке. Игнорирование атрибута эквивалентно исключению соответствующего общего свойства из правил стиля.
Список свойств сокращений CSS
Ниже приведен список сокращенных свойств CSS и общие свойства, которые они представляют.
Фон: вложение фона, цвет фона, фоновое изображение, положение фона, повтор фона.
Граница: цвет границы, стиль границы, ширина границы.
border-bottom (нижняя граница): цвет нижней границы, стиль нижней границы, ширина нижней границы.
border-left (левая граница): цвет левой границы, стиль левой границы, ширина левой границы.
border-right (правая граница): цвет правой границы, стиль правой границы, ширина правой границы.
border-top (верхняя граница): цвет верхней границы, стиль верхней границы, ширина верхней границы.
сигнал (звуковой сигнал): до сигнала, после сигнала
шрифт: шрифт, размер шрифта, стиль шрифта, вес шрифта, вариант шрифта, высота строки, регулировка размера шрифта, растяжение шрифта.
list-style: изображение стиля списка, позиция стиля списка, тип стиля списка.
поле (пусто): верхнее поле, правое поле, нижнее поле, левое поле.
контур: цвет контура, стиль контура, ширина контура.
отступы: верхний зазор, правый зазор, нижний зазор, левый зазор
пауза (пауза): пауза после, пауза перед, уменьшение пробелов
Другой способ уменьшить размер таблицы стилей CSS — удалить из документа большую часть ненужных пробелов. Другими словами, поместите каждый разрыв правила в одну строку кода, т. е. удалите символы новой строки и отступы, которые изначально были вставлены в код, чтобы разделить каждое свойство/атрибут на отдельные строки.
Например, следующие примеры кода идентичны по содержанию, но второй гораздо более усовершенствован:
ч1 {
размер шрифта: x-большой;
начертание шрифта: жирный;
цвет: #FF0000;
}
h1 {размер шрифта: x-большой; вес шрифта: жирный цвет: #FF0000}
Удалить комментарии
Удаление комментариев из вашего CSS-кода — еще один способ уменьшить размер файла. Хотя комментарии полезны для чтения кода, они не помогают браузеру создавать веб-страницы. Многие веб-разработчики привыкли комментировать каждую строку кода или, по крайней мере, каждое утверждение правила. Такие щедрые комментарии редко необходимы в таблицах стилей CSS, поскольку большинство свойств и свойств CSS легко читаются и понимаются. Если вы используете осмысленные имена для классов, идентификаторов и других селекторов, вы можете исключить большинство комментариев, сохраняя при этом читабельность и удобство обслуживания вашего кода.
h1 { /* Стиль заголовка 1*/
размер шрифта: x-большой; /* x-большой размер */
шрифт-вес: жирный; /* Жирный */
цвет: #FF0000; /* Красный */
}
Использование сокращенных свойств, удаление ненужных пробелов и комментариев может значительно уменьшить размер файла таблицы стилей CSS. Это, в свою очередь, внесет небольшой, но потенциально заметный вклад в достижение общей цели по ускорению вашего веб-сайта.