Friday, July 3, 2015

CSS Trimmer

Update Oct 10, 2015

Please use Firefox if you have thousands of lines.

2015-10-10

Updated the CSS RegExp filter input strings.

2015-09-24

Updated the buttons triggers.
Someone forgot to disable the "V2" button on empty input.

2015-09-18

Updated the trimming for function wrapped with ( and ).
Trimmer will leave the white spaces within those parentheses intact.

Additional V2 Trimmer

There's time when we have bunch of selectors combined with spaces to style the other element. But when the white spaces are trimmed, the CSS won't work.

For example:

.my_selector .myother_selector .some_other small

trimmed into

.my_selector.myother_selector.some_other small

can work or not. It depends on how the elements stacking is.

If it's used to style other element(s) (with a certain element being the reference), it's better to implement the child/next—adjacent sibling operators like:

  • > for child element.

    Example: .my_selector > .child_selector { ... }

  • + for the exact next element.

    Example: .my_selector + .next_selector { ... }

  • ~ for next element but can be far apart.

    Example: .my_selector ~ .next_selector { ... }

But of course, not all of us have time to re-tinker the CSS we made. So then, "TRIM V2" button (function) suddenly appears to facilitate that.
Like that "Suddenly Appear" song.

In another words, the "V2" will not trim the selectors' (horizontal) white spaces if they're not separated by comma(s).
If a particular element is meant to have lots of selectors, for classes toggling and other things, you don't need to use the "V2".

What this tool does:

  • It first checks (pretty much) whether your input has CSS code patterns. If it detects the pattern, this tool will enable both "TRIM V1" and "TRIM V2" buttons.

    This only detects the braces and brackets pattern, not the keywords.

  • The main function (for both versions) will trim the white spaces, but not the ones which separate the shorthanded values.

    For example,

    border: 2px solid gray;

    will be trimmed into

    border:2px solid gray;

    The characters wrapped in quotations (single or double) won't be trimmed, not really. It will be trimmed, take for instance, "lala     la la" to "lala la la". Make sure the pseudo-selector content doesn't have "extraordinary" spaces.

    Plus some other exclusions. calc() function and content property for instance.

  • The comments within the CSS will be stripped.
  • It will trim the same six hexadecimal color number pattern into three-pattern.

    Such as: #000000 or #aaaaaa or #DDDDDD,

    into #000 or #aaa or #DDD, respectively.

  • The semicolon (;) before the closing curly bracket (}) will be trimmed.
  • All the UNICODEs and base64 URIs will be left intact.
  • It will revert back to the original untrimmed CSS if you click the (enabled) "RESTORE" button.

Please make sure:

  • The input is CSS.

    For Blogger, the <Variable> tags in <b:skin>, or <b:variable> tags in <b:template-skin>, are the Blogger's custom CSS pre-processor codes. Do not include them. Copy-paste the codes beneath those.

    In general, this tool tries to recognize CSS codes pattern. Sort of.
    The $, expression, and any others without the < and > wrapper (but still grouped by curly brackets) are accepted.

  • The original-untrimmed CSS is working on your page.
  • The comments within the CSS are properly closed.
  • Each of property: value pair is closed with semicolon.

    Especially the ones declared among other properties.

  • There's no HTML tag in your CSS.

Even further compression:

You can make the CSS transferred as gzip compressed data from your server.
Your cloud/storage platform usually provides the method to convert the resource as a gzip compressed file and/or compress it "on the fly".
Like, while you're uploading the thingy.
You can search and read the provided API (Application Programming Interface) docs perhaps. Or maybe ask the customer service.
Related:
CSS Structurizor