/ / Сжатие CSS файлов шаблона
март 08 2010

Сжатие CSS файлов шаблона

Дорогие друзья,

как вы знаете, начиная с версии 8.5, в скрипте появилась возможность сжатия javascript файлов, что позволяет до 70% уменьшить их размер и тем самым существенно ускорить их загрузку в браузер. В данной статье я хочу вам рассказать о том, что данную возможность можно применить для файлов стилей CSS вашего шаблона. Для этого необходимо изменить их подключение в шаблон, допустим ваши стили подключаются в шаблоне строчками:
<link rel="stylesheet" type="text/css" href="/templates/Default/css/style.css" />
<link rel="stylesheet" type="text/css" href="/templates/Default/css/engine.css" />

для включения сжатия для этих файлов, эти строки необходимо заменить на:
<link rel="stylesheet" type="text/css" href="/engine/classes/min/index.php?f=/templates/Default/css/style.css,/templates/Default/css/engine.css" />

Собственно и все, теперь ваши стили будут автоматически объединены и сжаты, и в браузер будут отдаваться уже сжатые файлы, существенно экономя ваш траффик. При этом нужно будет помнить лишь одну особенность, если вы захотите изменить содержание этих файлов, то после внесения изменений, вам необходимо будет обязательно зайти в админпанель скрипта и сделать очистку кеша в админпанели скрипта, а также сделать очистку кеша в браузере.

Комментарии

GoodShadow

GoodShadow

8 марта 2010 05:15 Посетители
0
Первая, спасибо за подарок love очень полезная вещь.
pahanorlando

pahanorlando

8 марта 2010 05:41 Клиенты
0
Второй :)
Большое Спасибо!

а можно спросить, в каком шаблоне эти строки надо поменять? спасибо)
minych

minych

8 марта 2010 06:33 Клиенты
0
pahanorlando,
в main.tpl
Red Drag

Red Drag

8 марта 2010 07:09 Клиенты
0
А есть ли у этого побочные следствия?
celsoft

celsoft

8 марта 2010 07:46 Администраторы
0
Цитата: Red Drag
А есть ли у этого побочные следствия?

зависит от ваших стилей, но не должно.
Red Drag

Red Drag

8 марта 2010 08:46 Клиенты
0
celsoft,шаблон от DLETemplates,думаю ничего страшного...
guusr

guusr

8 марта 2010 10:04 Клиенты
0
celsoft,
спасибо (=
crazy-man

crazy-man

8 марта 2010 10:07 Клиенты
0
DLETemplates не продлили хостинг на мирохост.нет... wink
Avacore

Avacore

8 марта 2010 10:59 Клиенты
0
у меня че-то стили местами некорректно стали отображаться при таком способе передачи, хотя верстка у меня валидная
-=DLE=-

-=DLE=-

8 марта 2010 12:28 Посетители
0
Спасибо, возьму на заметку! lol
razer85

razer85

8 марта 2010 12:49 Клиенты
0
спасибо полезная статья
ATHF

ATHF

8 марта 2010 14:17 Клиенты
0
celsoft, можно ли так сжимать js файлы?
razer85

razer85

8 марта 2010 14:23 Клиенты
0
ATHF,
в скрипте есть такая возможность
ATHF

ATHF

8 марта 2010 14:27 Клиенты
0
Это если стандартные скрипты, а если собственные?
pahanorlando

pahanorlando

8 марта 2010 16:26 Клиенты
0
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
{headers}
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml">
<style type="text/css" media="all">
@import url({THEME}/css/style.css);
</style>
<style type="text/css" media="all">
@import url({THEME}/css/engine.css);
</style>
</head>
<body>{AJAX}


a меня так в шаблоне написано, что мне надо заменить?
kangalexey

kangalexey

8 марта 2010 16:31 Посетители
0
Цитата: Avacore
у меня че-то стили местами некорректно стали отображаться при таком способе передачи, хотя верстка у меня валидная

Если у вас валидный шаблон - это не значит что валидный файл стилей. Он проверяется отдельно на валидность.

pahanorlando,
<style type="text/css" media="all">
@import url({THEME}/css/style.css);
</style>
<style type="text/css" media="all">
@import url({THEME}/css/engine.css);
</style>

на это:
<link rel="stylesheet" type="text/css" href="/engine/classes/min/index.php?f={THEME}/css/style.css,{THEME}/css/engi
ne.css" />

xoxmalv

xoxmalv

8 марта 2010 17:35 Клиенты
1
После таво как поставил поивилась в php логе следушая ошибка:

PHP Notice: Undefined index: charset in /home/www/site/engine/classes/min/config.php on line 158, referer:


Где 158 строка: if ( $_GET['charset'] ) {

Какие идеи? tongue
bud77

bud77

8 марта 2010 18:09 Посетители
1
xoxmalv,
мабыть if ( isset($_GET['charset']) ) {

ци if ( @$_GET['charset'] ) {
xoxmalv

xoxmalv

8 марта 2010 18:20 Клиенты
0
bud77,

Неасоба понял на каком язике ты пишеш :)
Avacore

Avacore

8 марта 2010 20:58 Клиенты
0
Цитата: kangalexey
Если у вас валидный шаблон - это не значит что валидный файл стилей. Он проверяется отдельно на валидность.

css так же валидный

Получается вот что: при обычном способе соединения со стилями все отображается корректно, а вот при описаном в статье все работает криво, местами не воспринимает некоторые значения стилей, например: em и т.д. все баги долго перечислять, я это дело Firebug'om вылавливаю и лечу...
xoxmalv

xoxmalv

8 марта 2010 21:31 Клиенты
0
А при чом тут валидность или нет css же просто жимаются... и что за ошибка в 158 строке хотелось ответ услишить от Celsofta... :)
celsoft

celsoft

9 марта 2010 00:13 Администраторы
0
PHP Notice это не ошибка, а уведомление, если вы не хотите видеть в логах уведомления, то отключите их вывод и генерацию в php.ini
Avacore

Avacore

9 марта 2010 18:24 Клиенты
0
xoxmalv, валидность имела смысл т.к. я пару багов из шаба убрал и все нормально заработало
WWW.ZEOS.IN

WWW.ZEOS.IN

9 марта 2010 18:26 Клиенты
0
Кому интересно вот как выглядит CSS сжатый и не сжатый:

1) Не сжатый: http://dle-news.ru/templates/DLEoffsite/css/style.css (7531 байт)

2) Сжатый: http://dle-news.ru/engine/classes/min/index.php?f=/templates/DLEoffsite/css/style.css (6918 байт)


Вопрос:
Очень хотелось бы разобрать вот эти две строчки:

1) <script type="text/javascript" src="/engine/classes/min/index.php?charset=windows-1251&амр;g=general&амр;1"></script>

2) <link rel="stylesheet" type="text/css" href="/engine/classes/min/index.php?charset=windows-1251&амр;f=/templates/DLEoffsite/css/style.css,/templates/DLEoffsite/css/engine.css&амр;1" />



1) Зачем вот это: charset=windows-1251 ?

2) Какая разница между f= и g= ?

3) Почему не амперсант ( & ), а его html сущность: &амр; ?

4) Что за цифра: 1 ?

5) И интересно, почему написано general, а не general.js ?

6) При написании комментариев на этом сайте, в браузере Опера (Версия:
10.10, Сборка: 1893), если нажать на выбор цвета для текста, то последние (нижние) кубики с цветом в два раза больше, чем остальные вверху (в других браузерах не проверял)

Заранее спасибо за ответы winked
celsoft

celsoft

9 марта 2010 20:45 Администраторы
0
Цитата: WWW.ZEOS.IN
Кому интересно вот как выглядит CSS сжатый и не сжатый:

1) Не сжатый: http://dle-news.ru/templates/DLEoffsite/css/style.css (7531 байт)

2) Сжатый: http://dle-news.ru/engine/classes/min/index.php?f=/templates/DLEoffsite/css/style.css (6918 байт)

неверно считаете, в браузер отдаются Gzip архивы, а вы видите уже нормальный файл, т.к. браузер его распаковывает автоматически, в реальности же при сжатии вы получили файл размеров менее 2KB
Цитата: WWW.ZEOS.IN
1) Зачем вот это: charset=windows-1251 ?

кодировка файла, т.к. в нем может содержаться например русский текст
Цитата: WWW.ZEOS.IN
2) Какая разница между f= и g= ?

огромная, g это не указание файла, это указание название внутренней группы файлов
Цитата: WWW.ZEOS.IN
3) Почему не амперсант ( & ), а его html сущность: &амр; ?

валидность еще никто не отменял
Цитата: WWW.ZEOS.IN
4) Что за цифра: 1 ?

время жизни кеша, до следующей версии
Цитата: WWW.ZEOS.IN
5) И интересно, почему написано general, а не general.js ?

потому что это не название файла, а название группы.
Shader

Shader

10 марта 2010 08:15 Посетители
0
А будет ли корректно работать сжатие, если указывать media?
<link rel="stylesheet" type="text/css" href="/engine/classes/min/index.php?f={THEME}/css/reset.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="/engine/classes/min/index.php?f={THEME}/css/print.css" media="print" />

UPD: Глупый вопрос, да. Проверил, все в порядке. Спасибо, полезная фича.
ATHF

ATHF

10 марта 2010 14:02 Клиенты
0
Подскажите можно ли сжать дополнительный (не от dle) js файл?
celsoft

celsoft

10 марта 2010 15:59 Администраторы
0
Цитата: ATHF
Подскажите можно ли сжать дополнительный (не от dle) js файл?

да можно
WWW.ZEOS.IN

WWW.ZEOS.IN

11 марта 2010 17:02 Клиенты
0

WWW.ZEOS.IN
Кому интересно вот как выглядит CSS сжатый и не сжатый:
1) Не сжатый: http://dle-news.ru/templates/DLEoffsite/css/style.css (7531 байт)
2) Сжатый: http://dle-news.ru/engine/classes/min/index.php?f=/templates/DLEoffsite/css/style.css (6918 байт)

celsoft
неверно считаете, в браузер отдаются Gzip архивы, а вы видите уже нормальный файл, т.к. браузер его распаковывает автоматически, в реальности же при сжатии вы получили файл размеров менее 2KB

Супер, фантастика tongue


WWW.ZEOS.IN
1) Зачем вот это: charset=windows-1251 ?

celsoft
кодировка файла, т.к. в нем может содержаться например русский текст


WWW.ZEOS.IN
2) Какая разница между f= и g= ?

celsoft
огромная, g это не указание файла, это указание название внутренней группы файлов


WWW.ZEOS.IN
4) Что за цифра: 1 ?

celsoft
время жизни кеша, до следующей версии


WWW.ZEOS.IN
5) И интересно, почему написано general, а не general.js ?

celsoft
потому что это не название файла, а название группы.

Хотелось бы, чтобы всё это было расписано в документации к двигателю.
Я так, например, и не понял, что за группы файлов и как мне сжимать javascript и какое еще время жизни кеша до следующей версии можно указывать или только 1 ?



WWW.ZEOS.IN
3) Почему не амперсант ( & ), а его html сущность: &амр; ?

celsoft
валидность еще никто не отменял

Если я буду указывать просто обычные амперсанты ( & ) всё будет правильно работать?

*************************

javascript сжимать так:
было:
<script type="text/javascript" src="/путь/showhide.js"></script>

сделать:
<script type="text/javascript" src="/engine/classes/min/index.php?f=/путь/showhide.js"></script>

Правильно я написал?

Заранее спасибо за ответы winked

*************************

И еще один баг:
Написал данный комментарий и когда выбираю быстрое редактирование, то не работают все кнопки редактора, текст сделать жирным так и не вышло сделать. А в полном редактировании работает. А также когда в быстром редактировании выбираешь смайлик, то он не вставляется, а просто кидает вверх страницы :(

А еще если выбрать быстрое редактирование, то под сайтом появляется пустое белое пространство высотой где-то 700 пикселей.

Opera 10.10
celsoft

celsoft

11 марта 2010 21:01 Администраторы
0
Цитата: WWW.ZEOS.IN
Если я буду указывать просто обычные амперсанты ( & ) всё будет правильно работать?

зачем?
Цитата: WWW.ZEOS.IN
javascript сжимать так:
было:
<script type="text/javascript" src="/путь/showhide.js"></script>

сделать:
<script type="text/javascript" src="/engine/classes/min/index.php?f=/путь/showhide.js"></script>

Правильно я написал?

Правильно
Написал данный комментарий и когда выбираю быстрое редактирование, то не работают все кнопки редактора, текст сделать жирным так и не вышло сделать. А в полном редактировании работает. А также когда в быстром редактировании выбираешь смайлик, то он не вставляется, а просто кидает вверх страницы :(

А еще если выбрать быстрое редактирование, то под сайтом появляется пустое белое пространство высотой где-то 700 пикселей.

нет таких проблем на сайте, я не вижу ни в одном браузере

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Календарь
«    Декабрь 2016    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
262728293031 
Опрос на сайте
Совершаете ли вы покупки в интернет?

Популярные новости
Архив новостей
Декабрь 2016 (3)
Ноябрь 2016 (3)
Октябрь 2016 (2)
Сентябрь 2016 (3)
Июль 2016 (1)
Июнь 2016 (2)