| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one |
| or more contributor license agreements. See the NOTICE file |
| distributed with this work for additional information |
| regarding copyright ownership. The ASF licenses this file |
| to you under the Apache License, Version 2.0 (the |
| "License"); you may not use this file except in compliance |
| with the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, |
| software distributed under the License is distributed on an |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| KIND, either express or implied. See the License for the |
| specific language governing permissions and limitations |
| under the License. |
| --> |
| |
| <html> |
| <head> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>Inline CSS</title> |
| <link rel="stylesheet" href="doc.css"> |
| </head> |
| <body> |
| <!--#include virtual="_header.html" --> |
| |
| |
| <div id=content> |
| <h1>Inline CSS</h1> |
| |
| <h2>Configuration</h2> |
| <p> |
| The 'Inline CSS' filter is enabled by specifying: |
| <dl> |
| <dt>Apache:<dd><pre class="prettyprint" |
| >ModPagespeedEnableFilters inline_css</pre> |
| <dt>Nginx:<dd><pre class="prettyprint" |
| >pagespeed EnableFilters inline_css;</pre> |
| </dl> |
| <p> |
| in the configuration file. |
| </p> |
| <p>When this filter is enabled, you may also enable the following setting: |
| <dl> |
| <dt>Apache:<dd><pre class="prettyprint" |
| >ModPagespeedCssInlineMaxBytes bytes</pre> |
| <dt>Nginx:<dd><pre class="prettyprint" |
| >pagespeed CssInlineMaxBytes bytes;</pre> |
| </dl> |
| <p> |
| This is the maximum size in bytes of any CSS file that will be inlined. |
| </p> |
| <h2>Description</h2> |
| <p> |
| The "Inline CSS" filter reduces the number of requests made by a web page by |
| inserting the contents of small external CSS resources directly into the HTML |
| document. This can reduce the time it takes to display content to the user, |
| especially in older browsers. |
| </p> |
| <h2>Operation</h2> |
| <p> |
| When the 'Inline CSS' filter is enabled, The contents of small external CSS |
| resources are written directly into the HTML document; therefore the browser |
| does not request those CSS resources independently. |
| </p> |
| <p> |
| For example, if the HTML document looks like this: |
| </p> |
| <pre class="prettyprint"> |
| <html> |
| <head> |
| <link rel="stylesheet" href="small.css"> |
| </head> |
| <body> |
| <div class="blue yellow big bold"> |
| Hello, world! |
| </div> |
| </body> |
| </html> |
| </pre> |
| <p> |
| And the resource <code>small.css</code> is like this: |
| <pre class="prettyprint"> |
| .yellow {background-color: yellow;} |
| .blue {color: blue;} |
| .big { font-size: 8em; } |
| .bold { font-weight: bold; } |
| </pre> |
| <p> |
| Then PageSpeed will rewrite it into: |
| </p> |
| <pre class="prettyprint"> |
| <html> |
| <head> |
| <style> |
| .yellow {background-color: yellow;} |
| .blue {color: blue;} |
| .big { font-size: 8em; } |
| .bold { font-weight: bold; } |
| </style> |
| </head> |
| <body> |
| <div class="blue yellow big bold"> |
| Hello, world! |
| </div> |
| </body> |
| </html> |
| </pre> |
| <p> |
| This eliminates the browser request to <code>small.css</code> by placing its |
| contents inline in the HTML document. |
| |
| <h3>Example</h3> |
| <p> |
| You can see the filter in action at <code>www.modpagespeed.com</code> on this |
| <a href="https://www.modpagespeed.com/examples/inline_css.html?ModPagespeed=on&ModPagespeedFilters=inline_css">example</a>. |
| </p> |
| |
| <h2>Note</h2> |
| <p> |
| CSS may contain URLs that are relative to the location of the CSS |
| file. To avoid breaking such URLs, the 'Inline CSS' filter will attempt to |
| rewrite them into absolute URLs when it performs the inlining. |
| </p> |
| |
| <h2>Requirements</h2> |
| <p> |
| There is a tradeoff here between requests and cacheability: including the CSS |
| directly in the HTML avoids making an additional request to the external CSS |
| resource, but if the CSS file is large (and doesn't change often), it may be |
| better to keep it separate from the HTML so that it can be cached by the |
| browser. Thus, the Inline CSS filter will only inline CSS files below a |
| certain size threshold, which can be adjusted using the |
| <code>CssInlineMaxBytes</code> directive. |
| </p> |
| <p> |
| It is possible for CSS files to contain small snippets of JavaScript code, at |
| least for certain browsers. To avoid opening up cross-domain scripting |
| vulnerabilities, the Inline CSS filter will only inline an external CSS file if |
| it is being served from the same domain as the HTML file into which it is to be |
| inlined. |
| </p> |
| |
| <h2>Risks</h2> |
| <p> |
| The 'Inline CSS' filter is low to moderate risk. It should be safe for most |
| pages, but it could potentially break scripts that walk the DOM looking for |
| and examining <code><link></code> or <code><style></code> tags. |
| </p> |
| |
| |
| </div> |
| <!--#include virtual="_footer.html" --> |
| </body> |
| </html> |
