Php сжатие html. Как работает сжатие GZIP. Сжатие выходных данных
В наше время не знать верстальщику что такое css-препроцессоры наверно уже постыдное явление. Но сам я долго не хотел вникать как же его настроить и использовать. Мне казалось, что быстрее написать по старинке сразу css, чем сидеть и вникать в что-то новое (особенно если учесть, что дедлайн всегда близко). Но последнее время все больше и больше проектов, даже средней сложности делаются с использованием less или sass.
Поэтому хочу вкратце сделать так сказать интродьюс в работу с css-препроцессором LESS. Почему я выбрал для начала его? Потому что синтаксис у него такой же, как и у обычного css. LESS — это надстройка над css и если просто вставить обычный код из css файла, то он успешно скомпилируется, при этом в less можно использовать переменные и миксины (функции, которые значительно ускоряют написание например градиентов или свойств требующих множество повторений с разными префиксами).
Итак, начнем. Прежде всего нам необходимо понять, что less — это файл, который при компиляции выдаст нам готовый файл css. Скомпилировать его можно несколькими способами. Вы можете создать LESS файл и конвертировать его при помощи Javascript на лету при загрузке страницы или скомпилировать его заранее, и использовать получившийся CSS файл.
Используем LESS и Javascript файл
Для начала нужно скатать с сайта LESS Javascript файл и привязать его к страничке как любой другой js скрипт.
<script src ="less.js" type ="text/javascript" > script >Затем создадим файл с расширением.less и привяжем его с помощью такого кода:
<link rel ="stylesheet/less" type ="text/css" href ="style.less" >При этом LESS файл должен находиться перед JS файлом. Теперь LESS файл будет работать также как и обычный CSS.
Компилируем LESS файл
Такой способ меня привлекает больше тем, что не нужно множеством подключений грузить файлы LESS, а можно сразу грузить на клиенте заранее минифицированный единственный файл css.
Прежде всего нам нужно установить NodeJs. Для этого мы идем на официальный сайт http://nodejs.org/ и нажав на кнопку install начнется загрузка установочного файла для вашей операционной системы. Установив его теперь нужно установить компилятор less, для этого мы откроем консоль и введем:
Npm install -g less
Теперь его можно компилировать либо вручную через консоль. Подробную инструкцию можно прочитать на официальном сайте LESS. Либо использовать таскеры (о них мы поговорим в дальнейшем), либо средствами вашей IDE. Я использую PhpStorm с плагином File Watchers. Теперь открыв в нем наш проект, создаем в нем папку например «source» или «less», куда мы в дальнейшем будем сохранять наши исходные файлы.
Открываем Preferences -> File Watchers — > Нажимаем «+» внизу окна и выбираем тип файлов для отслеживания less. На данный момент, если все было сделано верно, то даже с дефолтными настройками наша IDE будет отслеживать less файлы в проекте и компилировать их в реальном времени при изменении и помещать их в папку рядом с компилируемым исходным файлом. Главное убедитесь, что в поле Program прописан путь к компилятору less (который мы устанавливали в консоли).
Работа с LESS
Наконец давайте немного развлечемся – и приступим к написанию LESS кода. Как вы увидите код легко читать и понимать, так как синтаксис очень похож на обычный css, что снижает порог вхождения девелопера для его использования.
Переменные в LESS работают так же как в PHP, JS и в большинстве других языков программирования. Вы можете использовать их для хранения значения, и затем использовать переменные вместо самого значения всякий раз, когда вам это нужно.
@header-font: Georgia ; h1 , h2 , h3 , h4 { font-family : @header-font; } .large { font-family :@header-font; }В примере выше мы объявляем переменную @header-font и записываем туда значение «Georgia». Теперь мы можем использовать эту переменную всегда, когда мы хотим установить шрифт Georgia. Если же мы решим, что Trebuchet MS лучше подходит для наших заголовков, то нам не нужно будет просматривать весь файл, мы просто изменим значение переменной.
Я нашел отличное применение переменным в определении цветов сайта. В старые добрые времена (которые были не так давно) я использовал что-то вроде этого:
Нет ничего плохого в том, чтобы документировать ваши цвета также как здесь, это хорошая практика, проблема заключается в том, что документация не имеет ничего общего с функциональностью ваших стилей. Если вы решили изменить цвета после 2000 строки кода, а затем передумали на 3567 строчке, то будет чрезвычайно сложно исправить все цвета и документацию.
С LESS мы можем модифицировать и одновременно документировать наш рабочий процесс.
Область видимости переменных
Область видимости переменных описывает места, где они доступны. Если вы определите переменную в самом начале LESS файла, то она будет доступна для любого кода написанного после.
Также можно определять переменную внутри CSS правила. В этом случае переменные не будут доступны вне этого правила, они могут быть использованы локально.
В этом примере LESS не будет сконвертирован из-за ошибки, @color не определена для использования внутри элемента button. Если переменная объявлена вне элемента и внутри другого элемента, то она будет доступна только локально.
@color: #222222 ; a { @color : #ffffff ; color :@color; } button { background : @color; }Переменные в переменных
Если вы кодили на PHP, то вы знаете что можно объявить имя переменной в другой переменной.
@color-chirstmas_red: #941 f1f ; @name-of-color: "color-chirstmas_red" ; color : @@name-of-color ;Лично я почти не использую это, так как переменные в переменных почти бесполезны без замыканий, но я уверен, что найдутся умные примеры использования этого.
Константы и Переменные
Важно отметить, вопреки тому, что вы только что прочитали, переменные в LESS больше похожи на константы. Это значит, что они, в отличие от переменных, могут быть определены только один раз.
Операции
Вы можете добиться невероятно точного контроля с использованием операций в LESS. Идея проста:
.button { @unit : 3 px; border :@unit solid #ddd ; padding : @unit * 3 ; margin : @unit * 2 ; }Код выше устанавливает переменную @unit в 3px. Затем мы устанавливаем это значение в ширину рамки, отступы в три раза больше этой ширины, а поля – в два.
Можно использовать операции умножения, деления, сложения и вычитания. Что бы создать блок с рамкой увеличивающей ширину сторон по часовой стрелке, можно использовать следующий код:
Управление цветом
Моя любимая особенность LESS – управление цветом. Можно использовать операции для смешивания цветов и несколько специальных функций для работы с цветом.
Цветовые операции
Если вы хотите изменить значение цвета, то можете сделать это вычитанием или добавлением другого цвета.
@color: #941 f1f ; button { background : #941f1f + #222222 ; border : #941f1f - #111111 ; }Вышеприведённая операция с фоном увеличит каждое значение HEX на 2. Результатом будет “B64141″ - более светлый вариант оригинального цвета. Операция с рамкой уменьшит каждое значение HEX на 1 и выдаст более темный цвет: “830E0E”.
На практике есть немало случаев, когда мы начинаем с базового цвета и нуждаемся в слегка затемненном или осветленном его варианте.
Цветовые функции
Есть гораздо больше возможностей для работы с цветом; LESS позволяет манипулировать ими на канальном уровне. Вы можете осветлять, затемнять, насыщать, обесцвечивать и вращать цвета. Взгляните на следующие примеры с картинками, чтобы понять, что каждый из них делает.
@color: #3 d82d1 ; .left_box { background :lighten(@color, 20 %) ; } .right_box { background :darken(@color, 20 %) ; }Вложенность
Во время написания CSS мы пользуемся каскадностью стилей. Чтобы изменить поля у параграфа только внутри статьи можно использовать следующий код:
article .post p { margin : 0 0 12 px 0 ; }Нет ничего плохого в таком подходе, но если нам надо также изменить стиль ссылок, цитат, заголовков и т.д. только внутри статьи, нужно будет использовать префикс “article.post” для каждого элемента. Это делает написание кода более скучным и усложняет его чтение.
В LESS мы можем вложить эти правила, что даст нам более короткую и логичную версию наших стилей. Например:
Article.post { p{ margin: 0 0 12px 0; } a { color: red; } a:hover { color: blue; } img { float:left; } }
Отступы не обязательны, но они делают код более читабельным. Уровни вложенности не ограничены.
A { color:red; } p { margin:0px; } article { a { color: green; } p { color: #555; a { color:blue; } } }
Примеси (mixins)
Примеси в LESS избавят вас от набора излишнего кода. Вам когда-нибудь приходилось создавать закругленную рамку в которой только верхние углы скругленны?
.tab { -webkit-border-top-left-radius : 6 px; -webkit-border-top-right-radius : 6 px; -moz-border-radius-topleft : 6 px; -moz-border-radius-topright : 6 px; border-top-left-radius : 6 px; border-top-right-radius : 6 px; }И так каждый раз… С LESS все это можно изменить, создав примесь. Примеси – элементы многоразового использования, которые можно добавить к любому элементу как правило. И даже не нужно изучать новый синтаксис.
Rounded_top { -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; } .tab { background: #333; color:#fff; .rounded_top; } .submit { .rounded_top; }
В вышеприведенном коде мы определили элемент.rounded_top для округления верхних углов. Когда мы добавляем его к любому другому элементу как примесь (смотрите.tab) мы по существу импортируем правила, которые мы создали для него. Благодаря такому синтаксису мы можем использовать любой элемент в качестве примеси.
Rounded_top { -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; } .tab { background: #333; color:#fff; .rounded_top; } .submit { .tab; background: red; }
Стили у элемента.submit - это скругленные углы наверху, белый цвет и красный фон (значение #333 переопределено).
Примеси с параметрами
Примеси с параметрами, звучит сложно, они решают проблему очень простым способом. В примерах выше вы видели как мы можем определить элемент с радиусом в 6px на верхних углах. А если мы захотим создать элемент с радиусом в 3px? Мы должны объявлять разные примеси для всех пиксельных значений? Конечно же ответ нет, мы должны использовать примеси с параметрами!
Они сходны с функциями, потому что при их вызове можно менять значения. Давайте перепишем пример с border-radius, чтобы посмотреть, как это работает.
Rounded_top(@radius) { -webkit-border-top-left-radius: @radius; -webkit-border-top-right-radius: @radius; -moz-border-radius-topleft: @radius; -moz-border-radius-topright: @radius; border-top-left-radius: @radius; border-top-right-radius: @radius; } .tab { background: #333; color:#fff; .rounded_top(6px); } .submit { .rounded_top(3px); }
В вышеприведенном коде радиус у.tab равен 6px, а.submit элемент получит значение 3px.
Стандартные значения
Если вы обычно используете одинаковый border-radius, но иногда необходим другой, нужно задать примеси стандартное значение.
Rounded_top(@radius:6px) { -webkit-border-top-left-radius: @radius; -webkit-border-top-right-radius: @radius; -moz-border-radius-topleft: @radius; -moz-border-radius-topright: @radius; border-top-left-radius: @radius; border-top-right-radius: @radius; } .tab { background: #333; color:#fff; .rounded_top; } .submit { .rounded_top(3px); }
В этом примере.tab получит стандартное значение в 6px, а.submit – 3px.
Множественные параметры
Вы также можете использовать множественные параметры, чтобы определить более сложные примеси.
Radius(@radius:6px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .button(@radius:3px, @background: #e7ba64, @padding: 4px) { .radius(@radius); background:@background; border: 1px solid @background - #222; padding: @padding; } .read_more { .button(0px); }
В этом примере класс.read_more отформатирован с отступом 4px, фоновым цветом #e7ba64 и с border-radius рывным 0px.
Используем все аргументы за раз
Еще одна опция при использовании аргументов это их объединение. Сокращённые свойства в CSS имеют множественные значения, записанные одно за другим.
div { border :1 px solid #bbb ; }Чтобы задать всем необходимым элементам серую границу, вы можете использовать такую функцию:
Gray_border(@width: 1px, @type: solid, @color: #bbb){ border:@arguments; } div { .gray_border(2px, dashed); }
@arguments это специальное ключевое слово, которое выводит все параметры один за другим в заданном порядке. Результатом вышеприведённого LESS кода будет:
div { border :2 px dashed #bbb ; }Параметрические примеси без параметров
Также можно использовать параметрические примеси без параметров. Это используется тогда, когда вам не нужно выводить примесь в CSS, но вы хотите чтобы ее правила применялись к элементу в котором она используется.
Alert { background: red; color: white; padding:5px 12px; } .error_message { .alert; margin: 0 0 12px 0; }
CSS вышеприведенного кода будет таким:
.alert { background : red; color : white; padding :5 px 12 px; } .error_message { background : red; color : white; padding :5 px 12 px; margin : 0 0 12 px 0 ; }Чтобы скрыть класс.alert нужно установить пустой параметр.
Alert() { background: red; color: white; padding:5px 12px; } .error_message { .alert; margin: 0 0 12px 0; }
Готовый CSS будет следующим:
.error_message { background : red; color : white; padding :5 px 12 px; margin : 0 0 12 px 0 ; }В основном это используется для уменьшения размера CSS файла.
Пространство имён
Пространство имён в языках программирования обычно используется для группировки сходных по функциональности элементов. Мы можем добиться подобного в LESS, объединяя наш код с помощью примесей.
#my_framework { p { margin: 12px 0; } a { color:blue; text-decoration: none; } .submit { background: red; color: white; padding:5px 12px; } }
Начиная работу над новым сайтом, основанным на вашем фреймворке, вы можете добавить связку #my_framework и использовать ее не засоряя пространство имён.
Submit_button { #my_framework > .submit; }
Также это отличный способ сделать возможным быструю смену и доработку тем. Если вы разрабатываете несколько тем для вашей компании, то для смены шаблонов на лету, вы можете поместить их все в один LESS файл, используя связки.
#fw_1 { p { margin: 12px 0; } a { color:blue; text-decoration: none; } .submit { background: red; color: white; padding:5px 12px; } } #fw_2 { p { margin: 8px 0; } a { color:red; text-decoration: underline; } .submit { background: blue; color: white; padding:8px 20px; } } .submit_button { #fw_2 > .submit; }
В итоге мы получаем возможность используя заранее заготовленные свои или фреймворка миксины ускорить написание верстки нашего проекта. Притом используя less — читаемость, структура и логика ваших стилей на порядок увеличивается, что улучшит поддержку сайта в будущем.