Проблемы с css combiner?
Я работаю с пользовательскими рамками.
Когда я разрабатываю свои сайты, я делю правила CSS на несколько файлов, например
- typography.css
- links.css
- master.css
- tables.css
- так далее
Теперь очевидная проблема заключается в том, что это означает несколько http-запросов.
Как я уже говорил, я работаю с пользовательским фреймворком.
В этой структуре, чтобы включить файл CSS, вы просто позвоните
echo load::css('name');
echo load::css('another');
который выплюнет
<link rel="stylesheet" type="text/css" href="http://site.com/name.css">
<link rel="stylesheet" type="text/css" href="http://site.com/another.css">
Теперь я думаю о том, чтобы звонить
load::css('name');
echo load::css('another');
как вы можете видеть, я вызываю эхо только на последнем, это выведет
<link rel="stylesheet" type="text/css" href="http://site.com/combined/0df4899f90fe7be26f4893b1a4a30eb6.css">
0df4899f90fe7be26f4893b1a4a30eb6 == 'назови другого'
В общем,
когда ты звонишь load:css('something')
он будет хранить имя в массиве, он вернет тег ссылки со значением md5(implode(' ', $cssArray))
в конце обработки скриптов php он фактически создаст объединенный файл с именем md5'd (если он не существует).
Это означает, что только один запрос сделан к серверу для всего содержимого CSS.
Кто-нибудь может увидеть какие-либо потенциальные проблемы с этим подходом?
Я также планирую реализовать это для файлов JavaScript.
Могли бы я столкнуться с какими-либо проблемами, если бы мне пришлось также использовать компрессор css/js?
Google Minify?
После некоторых исследований я наткнулся на Google Minify.
Можно ли изменить это так, чтобы вы могли просто дать ему массив путей к css-файлам и заставить его выплевывать содержимое, чтобы я мог вызвать что-то вроде
$css = minify::css($cssArray)
Затем делать то, что я хочу с минимизированным содержанием?
Одна из полезных вещей, которые я увидел, - способность переписывать пути?
1 ответ
Ну, это может зависеть от того, как вы комбинируете таблицы стилей. Я не уверен, как ваш фреймворк объединяет CSS-файлы (по имени, по папке или вручную), но браузеры (я не знаю о IE) интерпретируют каждую строку буквально, даже если она избыточна:
#foo
{
color: red;
color: green;
color: blue; /* This one will be the actual color of #foo */
}
Все они выполняются, поэтому последний, который нужно интерпретировать, это тот, который представлен. Если вы переопределите стили в разных таблицах стилей (я обычно использую globals.css
, header.css
, а также body.css
), последний из них вступит в силу, что может сделать ваш сайт в стиле фанк.
Я думаю, что та же самая концепция применима к JavaScript, но я еще не встречал переопределения функций.