M y    b r a i n    h u r t s  !                                           w e                 r e a l l y                 t h i n k                   w h a t                y o u             k n o w

22 November 2020

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!


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 mystyles.css -o mypreview.html
For more options run with the -h or --help switch.

Example output

Python CSS preview generator script

No comments :

Post a Comment