CSS Shrink
- RSteinwand
- Rank VI - Professional
- Posts: 596
- Joined: Mon Jun 09, 2008 2:12 pm
- Location: Fargo, ND
- Contact:
CSS Shrink
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/
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
- RSteinwand
- Rank VI - Professional
- Posts: 596
- Joined: Mon Jun 09, 2008 2:12 pm
- Location: Fargo, ND
- Contact:
Re: CSS Shrink
Great video on optimizing css: http://www.stubbornella.org/content/201 ... nt-page-1/
Rick
- RSteinwand
- Rank VI - Professional
- Posts: 596
- Joined: Mon Jun 09, 2008 2:12 pm
- Location: Fargo, ND
- Contact:
Re: CSS Shrink
Clean up css you no longer use: https://www.wired.com/2012/06/clean-up- ... selectors/
http://blackbe.lt/removing-unused-css-s ... rome-tool/
http://blackbe.lt/removing-unused-css-s ... rome-tool/
Rick
- Albert Wiersch
- Site Admin
- Posts: 3785
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: CSS Shrink
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.
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
- RSteinwand
- Rank VI - Professional
- Posts: 596
- Joined: Mon Jun 09, 2008 2:12 pm
- Location: Fargo, ND
- Contact:
Re: CSS Shrink
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.
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
- Albert Wiersch
- Site Admin
- Posts: 3785
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: CSS Shrink
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):
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
- RSteinwand
- Rank VI - Professional
- Posts: 596
- Joined: Mon Jun 09, 2008 2:12 pm
- Location: Fargo, ND
- Contact:
Re: CSS Shrink
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:
After:
A partial example of where it added linefeeds to a line that originally was 774 chars long:
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.
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>
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">
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>
Rick
- Albert Wiersch
- Site Admin
- Posts: 3785
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: CSS Shrink
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.
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
- RSteinwand
- Rank VI - Professional
- Posts: 596
- Joined: Mon Jun 09, 2008 2:12 pm
- Location: Fargo, ND
- Contact:
Re: CSS Shrink
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
I added this to my profile:
Just discovered Html Tidy doesn't work well with CSS.
I wonder if the problem is the block level tags. http://api.html-tidy.org/tidy/quickref_ ... level-tags
This didn't help at all, <li> still starts with a new line: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>.
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." />
Rick
- Albert Wiersch
- Site Admin
- Posts: 3785
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: CSS Shrink
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
- RSteinwand
- Rank VI - Professional
- Posts: 596
- Joined: Mon Jun 09, 2008 2:12 pm
- Location: Fargo, ND
- Contact:
Re: CSS Shrink
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.
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