CSS Style Sheet HTML Preview Generator (python script)

How do I see an HTML preview of every single CSS rule defined in a CSS file?

There is no fixed way to do it, especially if your CSS style sheets make abundant use of absolute and fixed positioning. This script below is a quick and dirty attempt to generate HTML tags for all the rules defined in a CSS file. If the rule is defined for a known HTML tag then that tag is rendered as itself, otherwise a div tag is created.

The script does not cover every possible scenario and only supports the most common CSS constructs. It wraps all fixed CSS rules into a dedicated iframe in order to prevent elements from overlapping. You can disable wrapping fixed elements into frames by passing --no-frames.

If you have a large CSS file the HTML generation can take up to several minutes since nested rules are iterated recursively.

⚠️ For complex CSS style sheets (1MB+) the generated HTML can cause the browser to freeze or rendering to take a signficant time even on a performant computer. You have been warned!

Dependencies

The CSS preview generator depends on the cssutil python module which can be installed with:

pip3 install cssutils

You are welcome to fork, improve and provide feedback.

Usage

css_stylesheet_preview_generator.py mystyles.css -o mypreview.html

For more options run with the -h or --help switch.

Example output

Python CSS preview generator script