CSS Structurizor

✒️ Edit
Last modified on

2015-10-10

  • Added @charset "UTF-8"; or @charset 'UTF-8'; filter.
  • Updated the auto keyword structuring.
  • Updated the CSS RegExp filter input strings.

2015-09-19

  • Updated the background-* filter.
  • Updated the base64 structuring filter.

How to use this:

  • Make sure your input is CSS. Paste your code on the textarea. You'll see the (approximated) size of your codes.
  • Hit either "2 Spaces" or "4 Spaces" to indent your CSS. You'll get the structured CSS code and the size.
  • Hit "RESTORE" to revert back to its original state.
  • To keep important comment in your CSS, use /*! as opening (with exclamation).

How this works:

  • It first (half) compacts the CSS using the method from the earlier tool (you can see the link below).
  • Then, the magic begins.
  • This only works for two nested-blocks deep. Deeper than that, it won't be CSS. I guess. Hm.

Indentation style

This applies the Stroustrup (Bjarne Stroustrup) variant of K&R (Kernighan and Ritchie's The C Programming Language) indentation style.

Sort of...

en.wikipedia.org/wiki/Indent_style#Variant:_Stroustrup

Related:
CSS Trimmer