CSS compression issues

Discuss general web development questions. Help others and get help from others.

Moderator: kfury77

CSS compression issues

Postby mapleleaf » Sat Jan 22, 2011 2:48 pm

Has anyone had issues with the feature CSS compression on/with WeBuilder?

Whenever I use the feature to compress the CSS file, I loose all of the functionality of my CSS3 such such as for example the gradient color on various elements?

This result is seen across the board namely all of the browsers that I use to test my web pages(IE8, FF-3.6.13 & 4.0beta10pre, Opera, Safari, Google and Maxthon). ( I don't have IE9 , an IPad or an IPhone to test.(cant afford them at the moment :( )

However, IF using the code compression feature from html7 Guardian then there is no effect and the pages perform as they should.

I both instances, the file size of my CSS is reduced by 3kb which is IMHO a significant result.

I now ask myself, what changes may be made in the setting so that the CSS compression functions without having a negative affect? It could be very well that I donot have the settings correctly. For if it works with one program then logically it should work with WeBuilder.

Now here is a question on compression everyone.

We all look at the source code to view how a web page has been done and it often gives us a different view on how to execute this or that.

Is it good practice to compress the code for the html, CSS and JavaScript?

Is it good practice to encrypt the code?

The only negative that comes to mind to mind is not sharing things how one has done things?

I'd be very interested what others think on (a) code compression and (b) code encryption?

What does one think when they visit a web site and the code is unreadable(encrypted)?


mapleleaf

http://www.mirana.net
User avatar
mapleleaf
 
Posts: 121
Joined: Thu Oct 14, 2010 2:21 am
Location: Ashcroft, BC Canada

Re: CSS compression issues

Postby Capricorn » Sun Jan 23, 2011 12:47 pm

I always use http://tools.w3clubs.com/cssmin/ to compress my CSS Code. Maybe you have problems because WeBuilder changes the order of your CSS rules, which is not really necessary while compressing. Often the order of the CSS rules is very important, especially in bigger projects.

Code compression is often very important, to speed up your website. That's why tools like YSlow and Google Page Speed suggest to compress CSS and JavaScript.
User avatar
Capricorn
 
Posts: 63
Joined: Fri Aug 06, 2010 11:37 am
Location: Germany!

Re: CSS compression issues

Postby mapleleaf » Sun Jan 23, 2011 3:32 pm

Maybe you have problems because WeBuilder changes the order of your CSS rules, which is not really necessary while compressing. Often the order of the CSS rules is very important, especially in bigger projects.


Yup, that is exactly the issue at hand. The compression changes the order and it literally "screwed" things up. :(

All of my CSS3 was changed such that even my color gradients didn't work anymore on any browsers that I tested.

I had to revert to the code compression that comes with the html7 Guardian that I have which is an awesome program. As a result, I am able to save significantly in the size of the CSS file and as you file reduction is an important consideration in web site optimization particularly when addressing the reduction of http calls.

What I like about this program is that it places virtually everything onto 1 line and knowing that it is quicker to read down and left to right all of the information on 1 line yields/contributes to an increase in speed this equally applies to the html.

This is not an issue with speed speed DSL but certainly with low speed connectivity connectivity. This is why I prefer to use jpgs and then apply a jpeg compression to them although "PNGaunlet" is a good one particularly with larger pngs.

Btw, thanks for the link, very useful to have.
User avatar
mapleleaf
 
Posts: 121
Joined: Thu Oct 14, 2010 2:21 am
Location: Ashcroft, BC Canada

Re: CSS compression issues

Postby MikeyB » Mon Jan 24, 2011 11:24 am

The few times I've tried the CSS compression I've always found the resulting CSS to not work correctly because the order has changed, and as such have given up on using it.

I'll try the tool Capricorn linked to next time I think of it.
User avatar
MikeyB
Top Contributor
 
Posts: 511
Joined: Fri Jun 09, 2006 10:38 am
Location: UK

Re: CSS compression issues

Postby Capricorn » Mon Jan 24, 2011 1:22 pm

Maybe it should be implemented that WeBuilder does not change the order?!
User avatar
Capricorn
 
Posts: 63
Joined: Fri Aug 06, 2010 11:37 am
Location: Germany!

Re: CSS compression issues

Postby Gatis » Thu Jan 27, 2011 2:35 pm

Hi,

Please can anyone send example files to our supports system?
One file before formatting, the other after formatting.
Does it only happen to CSS 3 files?

We might be able to fix this problem, but it would help to see an example.

Thanks,
Gatis
Kind regards,
Gatis Avots
Gatis
Blumentals Software Developer
 
Posts: 545
Joined: Sun Mar 05, 2006 12:30 am
Location: Latvia

Re: CSS compression issues

Postby mapleleaf » Thu Jan 27, 2011 7:45 pm

Does it only happen to CSS 3 files?

We might be able to fix this problem, but it would help to see an example.


Yes it only happens in or with the CSS and in particular it affects the CSS3 declarations. It surprised me.

I came across this during the conversion from flash to htm5 of my web site.

for example here is in part a declaration I have in the CSS(hope this helps):

.bar, .dbar, .barm {
position: relative;
width: 1000px;
height: 50px;
margin-left: auto;
margin-right:auto;
padding:0px;
border: 0px solid #424242;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-moz-box-shadow: 2px 2px 2px #000;
-webkit-box-shadow: 2px 2px 2px #000;
box-shadow: 2px 2px 2px #000;
border-radius: 8px;
background: #333;
background: -moz-linear-gradient(top, #333, #181818);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#181818));
background: linear-gradient(#333, #181818);
-pie-background: linear-gradient(#333, #181818);
behavior: url(PIE.htc);
color:#99ccff;
font-size:14px !important;
text-align:center;
text-decoration: none;
z-index: 2;
}


before formatting it works then when using the CSS formatting in WB it screws it all up!

BUT if I use a product like Proware's HTML Guardian,the CSS3 parts are unaffected. http://www.protware.com/

(I have used this program for many years and swear by it not only for the compression but also for encryption not only the HTML but also CSS and JavaScript when it was necessary.)

I brought this up when I wanted to reduce the file size using the built-in compression of WB.

I'll be happy to send you the full CSS file the b4 and the after AND the one created by the html guardian. Just email me for contact.

mapleleaf

http://www.mirana.net << the html5 version is online but I am still in the process of doing the de-bugging and making changes etc and will once that is done then compress where ever necessary.
User avatar
mapleleaf
 
Posts: 121
Joined: Thu Oct 14, 2010 2:21 am
Location: Ashcroft, BC Canada

Re: CSS compression issues

Postby Gatis » Fri Jan 28, 2011 4:24 pm

Well, with CSS3 maybe things have changed.
I mean, for very long time we have not received any complaints about the CSS compressor..

If the problem is only with the order of CSS selectors and CSS properties, then you can fix this yourself this way:
1) Open APP DATA folder for WeBuiler (or the editor edition you are using):
C:\Program Files\WeBuilder 2010\data

2) Open file csscompress.ini
3) Modify following lines:
from "SelectorOrder=1" to "SelectorOrder=0"
from "PropOrder=1" to "PropOrder=0"

Let me know if this helps. Thanks!

Gatis
Kind regards,
Gatis Avots
Gatis
Blumentals Software Developer
 
Posts: 545
Joined: Sun Mar 05, 2006 12:30 am
Location: Latvia

Re: CSS compression issues

Postby mapleleaf » Sat Jan 29, 2011 2:53 am

Gatis wrote:Well, with CSS3 maybe things have changed.
I mean, for very long time we have not received any complaints about the CSS compressor..


The statement you made is only partially true :wink:

That very well may be true but then ask yourself was html5 around and CSS3 around and those that used CSS compression were they using CSS3?

Since the new release(I hope soon) of WB will support html5, I believe that it is prudent for you to consider this aspect seriously.
This only came about when my color gradients didn't work after using the WB CSS compression. :(

I did manage to use the compression from html Guardian which resulted in a 26% reduction in file size, very significant. :D

Btw, the latest Editor's Draft of the html5 standard is 22.01.2011.


mapleleaf

http://www.mirana.net
User avatar
mapleleaf
 
Posts: 121
Joined: Thu Oct 14, 2010 2:21 am
Location: Ashcroft, BC Canada

Re: CSS compression issues

Postby mapleleaf » Sun Jan 30, 2011 11:59 pm

Gatis wrote:Well, with CSS3 maybe things have changed.
I mean, for very long time we have not received any complaints about the CSS compressor..

If the problem is only with the order of CSS selectors and CSS properties, then you can fix this yourself this way:
1) Open APP DATA folder for WeBuiler (or the editor edition you are using):
C:\Program Files\WeBuilder 2010\data

2) Open file csscompress.ini
3) Modify following lines:
from "SelectorOrder=1" to "SelectorOrder=0"
from "PropOrder=1" to "PropOrder=0"

Let me know if this helps. Thanks!

Gatis


This weekend I did some testing and to make things short: it didn't work.

source: CSS with size of 23K
changes to csscompress.ini as advised were done
Code: Select all
program                                 size                           compression size                    %reduction                             affect

Proware's                                 23K                                17K                                      26.087%                   none (color gradients worked with every browser tested)
html7 guardian
v.7.7.4

WeBuilder 2010                        23K                               15K                                    34.783%                     color gradients did not work with any of the browsers tested


Conclusion:
CSS compression in WeBuilder affects the CSS3 declaration for color gradients although it did result in a better compression result by just over 8%.
testing for other CSS3 aspect were not tested but prudent to test to see if this is a generalized effect when using the WeBuilder CSS compression

Recommend that this be looked into since the use of color gradients is ever increasing particularly with the event of html5 and CSS3 and particularly with the imminent event of the release of version 2011 having the support for html5.

Browser used to test were:

IE7&8, FF 3.6.13, FF 4.0beta10, FF 4.0beta11pre, Opera 11, Safari 5, Google Chrome 10.0.648.6, Maxthon 3.0.19.3

Opera 11 by default doesnt support color gradients

In comparing the output from the two namely, Proware's html7 Guardian and WeBuilder 2010, the difference seen is that the former places the whole of the CSS onto one line whereas WeBuilder
does not.

mapleleaf


http://www.mirana.net
User avatar
mapleleaf
 
Posts: 121
Joined: Thu Oct 14, 2010 2:21 am
Location: Ashcroft, BC Canada

Re: CSS compression issues

Postby Gatis » Fri Feb 04, 2011 4:41 pm

Thanks for taking time to test this and give a report.
I will write this down. The problem might not be fixed right with next version, but we will try to solve it in nearest future.

Gatis
Kind regards,
Gatis Avots
Gatis
Blumentals Software Developer
 
Posts: 545
Joined: Sun Mar 05, 2006 12:30 am
Location: Latvia

Re: CSS compression issues

Postby mapleleaf » Wed Feb 23, 2011 11:16 am

Well I did it the hard way.

I managed to drop the file size of my CSS from 24K to 15K doing it manually. approx. a 37% drop in file size.

Using shorthand CCS styling, combining multiple statements, getting rid of white spaces wherever AND of course corrected the typos

I purely did it to see if I can do it better than either using the feature in WB 2010 OR the other program that I have purely for mental exercise.

mapleleaf

www.mirana.net
User avatar
mapleleaf
 
Posts: 121
Joined: Thu Oct 14, 2010 2:21 am
Location: Ashcroft, BC Canada

Re: CSS compression issues

Postby mapleleaf » Wed Feb 23, 2011 11:59 am

now double checking before placing it online
User avatar
mapleleaf
 
Posts: 121
Joined: Thu Oct 14, 2010 2:21 am
Location: Ashcroft, BC Canada

Re: CSS compression issues

Postby mapleleaf » Thu Mar 03, 2011 5:03 pm

mapleleaf wrote:Well I did it the hard way.

I managed to drop the file size of my CSS from 24K to 15K doing it manually. approx. a 37% drop in file size.

Using shorthand CCS styling, combining multiple statements, getting rid of white spaces wherever AND of course corrected the typos

I purely did it to see if I can do it better than either using the feature in WB 2010 OR the other program that I have purely for mental exercise.



Ok, having done the CSS compression, the final size is 13K from the original of 24K resulting is an 45.8% drop in size.

I then also compressed all of the html files with an average drop in file size of 28% using Protware.

For both the CSS and the html files, I used http://www.protware.com/

In both cases, the drop in file size is IMHO significant that adds to the overall impression of speed in the display by a visitor. This is the first thing that a visitor gets his/her impression of a web site...IF too slow then a negative impression.

Therefore, the following are prudent:

1. compression of the CSS and html
2. image size and compression
- for png a utility called PNGGaunlet is a good one to use and a freeware
http://benhollis.net/software/pnggauntlet/

- for jpg a program that I have used for quite awhile is Advanced JPEG Compressor, a commercial product but well worth the price
http://www.winsoftmagic.com/ajc_features.html

Hope this is helpful information.

mapleleaf

http://www.mirana.net
User avatar
mapleleaf
 
Posts: 121
Joined: Thu Oct 14, 2010 2:21 am
Location: Ashcroft, BC Canada

Re: CSS compression issues

Postby Gatis » Mon Mar 14, 2011 12:19 pm

Hi, mapleleaf,

Can you please verify if the following file makes the compression result acceptable:
http://fileshar.es/Bb67ZaL

To use the file, make a back-up of your current file C:\Program Files\WeBuilder 2010\data\csscompress.ini and then replace it with the one above.

Basically, it seems there are problems with CSS3, because when using compressor, property order is changed, and also duplicate properties are removed. With the updated csscompress.ini file this is not the case anymore.
I wonder if with CSS3 some general rules have changed? Because in the code example mapleleaf gave, there are some duplicate properties. How do browsers handle this situation..?
background: #333;
background: -moz-linear-gradient(top, #333, #181818);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#181818));
background: linear-gradient(#333, #181818);


I will be waiting for your results. Thanks!

Gatis
Kind regards,
Gatis Avots
Gatis
Blumentals Software Developer
 
Posts: 545
Joined: Sun Mar 05, 2006 12:30 am
Location: Latvia

Next

Return to Web Developer Talk

Who is online

Users browsing this forum: No registered users and 10 guests

cron