Inlines style sheets, images, fonts and scripts in HTML documents. Works in the browser.
See the API.
Resources referenced in the document (CSS, images, fonts and JS) can only be loaded if from the same origin, unless techniques like CORS are used.
Yet to be supported:
- Background images in inline style declarations (
<div style="...">) - Media queries defined on link elements (
<link rel="stylesheet" media="..." />) - Media queries defined on import rules (
@import url("...") screen and (orientation:landscape);) - Future responsive img solution (
<img srcset="...">)
- jasonbellamy/asset-inliner
- cdata/collapsify
- EE/grunt-inline-images
- popeindustries/inline-source
- LearnBoost/juice
- fb55/node-inline
- callumlocke/resource-embedder
- kevva/rework-inline
- andreypopp/xcss-inline-woff
- ... and many more
For linting, tests and a browser build install Node.js and run
$ ./go
Check ./dist/ for the browserified builds.
To test against several browsers while editing, run grunt testWatch and point those browsers to http://localhost:9989/.
- rasterizeHTML.js, Renders HTML into the browser's canvas
- ...
Christoph Burgmer. Licensed under MIT. Reach out on Twitter.