Utilities

aQuery.injectCss(css)

Inject new css rules to the page. When converting html to AMP it is very common to add css overrides to the original html page to adjust it to the AMP result.

  • css
    • Type: String
    • css rules

Example:

$.injectCss(`#div { width: 100vw; }`);

aQuery.cssIgnore(cssRule[, cssRule....]);

Amplify’s conversion algo shortens all class names and IDs, and removes all css that is not being used by an html element. This is done to make sure the amp version would comply with the 75K css limit.

If you want to exclude certain IDs and classes from being shortened and removed from the css, use the cssIgnore method. A common use case is when creating dynamic html content with amp-script which is paired with external css rules. Those css rules would be removed unless added to css Ignore.

  • cssRule
    • Type: String
    • css rules

Example:

HTML before Ampify algo:

<html><body class=”body”><body></html>

CSS before Ampify algo:

.body { color:red };
.keep-this-class { background: blue; }
#and-this-id { display: none; }

HTML after Ampify algo:

<html><body class=”.xd”><body></html>

CSS after Ampify algo:

.xd { color:red };

aQuery.cssIgnore(‘.keep-this-class’, ‘’#and-this-id’);

HTML after Ampify algo with css ignore:

<html><body class=”.xd”><body></html>

CSS after Ampify algo with css ignore:

.xd { color:red };
.keep-this-class { background: blue; }
#and-this-id { display: none; }
Edit this page