CSS Shrink

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
Post Reply
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

CSS Shrink

Post by RSteinwand »

http://cssshrink.com/

A unique twist on minimizing css. I like the "Pretty" before and after code windows, but you don't want to do editing of your source with a big file, 'cause it can be slow.

I've used other apps to do this before, but it still found two statements (next to each other) that could be combined.

Previously I've used this page: http://cssminifier.com/
Rick
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: CSS Shrink

Post by RSteinwand »

Rick
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: CSS Shrink

Post by RSteinwand »

Rick
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: CSS Shrink

Post by Albert Wiersch »

Thanks Rick.

What can be added to CSE HTML Validator to help with some of this that fits in with what CSE HTML Validator already does and how it works? What would you find useful?

I have thought about adding a 'CSS Tidy' feature that can tidy up or minify CSS similar to the HTML Tidy functionality that works with HTML. Would something like this be useful? I imagine there must be a tool I can integrate with out there somewhere, like I've done with HTML Tidy.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: CSS Shrink

Post by RSteinwand »

Hi Albert,

The FireFox extension will scan your entire website from a sitemap (page or xml) and pair up the style sheets with the pages and give you a list of possible orphans, which you then have to figure out from scripts (and memory), which ones you might be able to comment out. Lots of guessing going on. Of course there's "hover" and "active" tags you'll also have to ignore as well as old IE code.

In other words, it could be better. If you have a way of improving on that, it might be worth updating to pro. I suspect that's more work than you wanted tho.

Tidy would be cool, but you have to account for nice looking minimal but readable and fully minimized. I like minimized code, but retaining my linefeeds and comments. When I ftp to the server, I'll remove the comment blocks on the server side, maybe indents on busy pages (like home and contact pages). Other options: removal of quotes (or not), white-space (or not)... you've seen all the options. Something else to worry about is protected regions in templated pages like Dreamweaver, although that's easy to repair.
Rick
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: CSS Shrink

Post by Albert Wiersch »

Hi Rick,

Yes, orphaned CSS is not on the roadmap. It would be rather difficult and probably really requires a browser engine to do it right or better.

The CSS Tidy I would integrate would have to be based on a third party program, like HTML Tidy is. I would just integrate it into CSE HTML Validator. Hopefully it would have all the features you mention. I will have to look into this for a possible addition in a v17 update. If there is a CSS Tidy program like the HTML Tidy program then there's a good chance I will be able to add it. I think CSS Tidy would be more useful than HTML Tidy since most HTML is generated dynamically nowadays but I don't think CSS is.

I did add some HTML Tidy profiles for HTML minification (added to the tidyprofiles.xml file):

Code: Select all

 <profile name="Minify (lite)" args="--hide-comments 1 --tidy-mark 0 --indent 0 --wrap 256" hint="Remove comments and unnecessary whitespace with wrap at 256 characters." />
 <profile name="Minify (max)" args="--hide-comments 1 --hide-endtags 1 --tidy-mark 0 --indent 0 --wrap 512" hint="Maximum removal of comments, optional end tags, and unnecessary whitespace with wrap at 512 characters." />
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: CSS Shrink

Post by RSteinwand »

Hi Albert,

I added your profiles and applied it to an html page using pretty-fix. Instead of removing white space it added a LOT. Minify (max) should have no indents, possibly even removing CRLF to make super long lines. I had to use the dialog and uncheck "Use below options", then it worked a little better, but still added a lot of linefeeds.

This was originally one line:

Code: Select all

<link rel=icon type=image/png href=/favicon-32x32.png sizes=32x32><link rel=icon type=image/png href=/favicon-194x194.png sizes=194x194><link rel=icon type=image/png href=/favicon-96x96.png sizes=96x96><link rel=icon type=image/png href=/android-chrome-192x192.png sizes=192x192><link rel=icon type=image/png href=/favicon-16x16.png sizes=16x16><link rel=manifest href=/manifest.json><meta name=msapplication-TileColor content=#00aba9><meta name=msapplication-square150x150logo content=/mstile-150x150.png><meta name=theme-color content=#ffffff><link rel=icon href=/images/favicon.ico sizes=32x32 type=image/vnd.microsoft.icon>
After:

Code: Select all

<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#00aba9">
<meta name="msapplication-square150x150logo" content="/mstile-150x150.png">
<meta name="theme-color" content="#ffffff">
<link rel="icon" href="/images/favicon.ico" sizes="32x32" type="image/vnd.microsoft.icon">
A partial example of where it added linefeeds to a line that originally was 774 chars long:

Code: Select all

<ul>
<li><a href="/">Home</a></li>
<li><a href="/about.html">About Us</a></li>
<li><a href="tel:+1-800-378-3328" class="tel">(800) 378-3328</a></li>
<li><a href="/contact.html">Contact Us</a></li>
<li class="search">
<form action="/searchsite.aspx" method="post" id="searchform" name="searchform"><input type="text" class="form_field" name="searchword" id="searchword" value="Search..." onclick=
"searchword.value='';" onblur="if(this.value==''){this.value='Search...'};" maxlength="20"><input type="submit" value="Go" class="search_button" title="Click to search"></form>
</li>
</ul>
I suspect a Tidy will need more tweaking to be used for this purpose. Possibly there's an option to remove the additional CRLF's. I tried "--indent-spaces 0" to prevent having to bring up the dialog to uncheck the checkbox I mentioned above, but the checkbox still overrides it.
Rick
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: CSS Shrink

Post by Albert Wiersch »

Hi Rick,

Yes, in the HTML Tidy Tool dialog you will need to uncheck the 'Use below options' checkbox otherwise those settings will override the ones in the profile.

You are right about the line feeds. I looked into it and couldn't find any HTML Tidy option to eliminate the unnecessary linefeeds so this seems to be a limitation of HTML Tidy.

If you are able to find any other HTML Tidy options for minimizing HTML that I haven't added to the minify profiles then please let me know.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: CSS Shrink

Post by RSteinwand »

I looked over all the options, but found nothing else.

I wonder if the problem is the block level tags. http://api.html-tidy.org/tidy/quickref_ ... level-tags
new-blocklevel-tags
This option specifies new block-level tags. This option takes a space or comma separated list of tag names.
Unless you declare new tags, Tidy will refuse to generate a tidied file if the input includes previously unknown tags.
Note you can't change the content model for elements such as <table>, <ul>, <ol> and <dl>.
This didn't help at all, <li> still starts with a new line:

Code: Select all

--new-blocklevel-tags <table>,<ul>,<ol>

I added this to my profile:

Code: Select all

 <profile name="Minify (keep comments)" args="--tidy-mark 0 --indent 0 --indent-spaces 0 --wrap 200" hint="Keep comments but remove unnecessary whitespace with wrap at 200 characters." />
Just discovered Html Tidy doesn't work well with CSS.
Rick
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: CSS Shrink

Post by Albert Wiersch »

I think you are right about it inserting newlines before new block-level tags. However, I don't think the --new-blocklevel-tags option would help as it is just for specifying new block-level tags. But if you were going to use it then I think it would be used like this instead:

Code: Select all

--new-blocklevel-tags table,ul,ol
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: CSS Shrink

Post by RSteinwand »

Thanks, that doesn't work either. I used "a" for the only tag, expecting to see links start a new line and that didn't work either.

NBD for me. 98% of my code is in a Dreamweaver template so update half a dozen public templates and most of my code is cleaned up. Great feature, but with subscription rates now for DW, I'm probably stuck with this version of DW for years.
Rick
Post Reply