Подтвердить что ты не робот

Как правильно обслуживать CSS

Скажем, я почему-то хочу обслуживать мой CSS через PHP (из-за предварительной обработки, слияния и т.д.). Что мне нужно сделать на моем PHP, чтобы сделать эту работу хорошо? Кроме самого очевидного:

header('content-type: text/css; charset=utf-8');

Как насчет заголовков, связанных с кэшированием, временем модификации, etags и т.д.? Какие из них я должен использовать, почему и как? Как я могу анализировать входящие заголовки и отвечать соответствующим образом (например, 304 Not Modified)?


Примечание.. Я знаю, что это может быть сложно, и было бы намного проще делать то, что я хочу делать с CSS, прежде чем я буду использовать его как обычный файл CSS. Если бы я хотел это сделать, я бы не задал этот вопрос. Мне любопытно, как это сделать правильно и хотелось бы знать. То, что я делаю или могу сделать заранее с помощью CSS, не имеет значения; Я просто хочу знать, как правильно его обслуживать:)

Примечание 2: Я действительно хотел бы знать, как это сделать должным образом. Я чувствую, что большая часть деятельности по этому вопросу превратилась в меня, защищая, почему я хотел бы это сделать, вместо того, чтобы получать ответы на вопрос о том, как это сделать. Был бы очень признателен, если бы кто-то мог ответить на мой вопрос, а не просто предлагать такие вещи, как SASS. Я уверен, что это потрясающе, и я мог бы попробовать это когда-нибудь, но это не то, о чем я прошу сейчас. Я хочу знать, как обслуживать CSS через PHP и научиться правильно обращаться с кешированием и т.д.

4b9b3361

Ответ 1

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

Резюме

Отправка заголовка ETag и Last-Modified позволяет браузеру отправлять заголовки If-Modified-Since и If-None-Match обратно на ваш сервер при последующих запросах. Вы можете, когда это применимо, ответить кодом состояния 304 Not Modified HTTP и пустым телом, т.е. Content-Length: 0. Включение заголовка Expires поможет вам обслуживать свежий контент в один прекрасный день, когда контент действительно изменился.

Подмастерье

Звучит достаточно просто, но это может быть немного сложно, чтобы все было в порядке. К счастью для всех нас, есть действительно хорошее руководство.

Как только вы его запустите, перейдите на REDbot, чтобы помочь вам сгладить любые грубые углы, которые вы, возможно, оставили в.

Эксперт

Для значения ETag вам нужно иметь что-то, что вы можете воспроизвести, но все равно будет меняться всякий раз, когда это будет происходить. В противном случае вы не сможете определить, соответствует ли входящее значение или нет. Хорошим кандидатом на воспроизводимое значение, которое по-прежнему изменяется при его содержании, является хеш MD5 файла mtime файла, обслуживаемого через кеш. В вашем случае это, вероятно, будет суммой для всех файлов, которые будут объединены.

Для Last-Modified логическим ответом является фактический mtime обслуживаемого файла. Зачем пренебрегать очевидным. Или для группы файлов, как в вашем случае, используйте самую последнюю mtime в связке.

Для Expires просто выберите подходящий TTL или время жизни для актива. Добавьте этот номер в актив mtime или значение, которое вы выбрали для Last-Modified, и у вас есть свой ответ.

Вы также можете включить заголовки Cache-Control, чтобы позволить возможным прокси-серверам на пути знать, как правильно обслуживать своих клиентов.

Ученый

Для более конкретного ответа на ваш вопрос, пожалуйста, обратитесь к этим вопросам, предшествующим вашим:

Ответ 2

Самый простой способ обслуживания CSS (или JavaScript) через PHP - использовать Assetic, схожего на Django contrib.staticfiles или Ruby Jammit. Он обрабатывает кэширование и кэширование недействительности, динамическое масштабирование, сжатие и все "хитрые биты", которые были упомянуты в других ответах.

Чтобы понять, как правильно писать свой собственный сервер ресурсов, я настоятельно рекомендую вам прочитать исходный код Assetic. Это очень прокомментировано и доступно для чтения, и вы узнаете много нового о лучших методах кэширования, минимизации и всего остального, что Assetic делает так хорошо.

Ответ 3

Один общий шаг - включить бессмысленный параметр GET. Фактически, сайты обмена стеками делают это явно:

<link ... href="http://cdn.sstatic.net/stackoverflow/all.css?v=0285b0392b5c">

v (версия) предположительно является хешем какого-либо типа, возможно, самого css файла. Они не хранят старые листы, это просто способ заставить браузер загружать новый файл, а не использовать кешированный.

С помощью этой настройки безопасно установить Cache-Control:max-age на большое значение.

ETag сделает ответ сервера 304, если файл не будет изменен, вы также можете использовать тот же хеш:

header('ETag: "' . md5("path to css file") . '"');

Ответ 4

Я только что закончил объяснять здесь, почему я не думаю, что PHP-обработанный CSS - хорошая идея; Я считаю, что большинство людей, которые его реализуют, будут лучше обслуживаться другой структурой приложений. Посмотрите.

Если вы должны это сделать, выполнение работы по кешированию потребует независимого отслеживания каждого варианта и отправки клиентом параметра, который однозначно идентифицирует этот вариант (так что вы можете сказать "не изменено" ).

Заголовок Content-Type - хороший старт, но не сложный бит...

Ответ 5

Вам нужно добавить строку запроса в конец javascript файла, что является хорошим вариантом сказать, что это новый файл, пока браузеры не будут считать одни и те же файлы css

www.example.com/css/tooltip.css?version1.0  

или

www.example.com/css/tooltip.css?12-01-2012

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