Split from: http://drupal.org/node/763730#comment-3218038

any news on this? -webkit-* -moz-* stuff gets thrown out when running thru csstidy. like gradient/border radius et al. or is there a way to "preserve" certain portions of a stylesheet from being optimized?

Comments

philbar’s picture

philbar commented

Since these CSS elements aren't standard and many will likely be replaced by CSS3, I'm not going to be able to spend much time on it. Also, this is a issue that belongs upstream at the official project: http://csstidy.sourceforge.net/

I do welcome patches though, if someone else wants to figure out a solution.

Anonymous’s picture

Anonymous (not verified) commented

Understandable!

What about implementing a comment tag to prevent csstidy from optimising portions of a stylesheet? I haven't been able to find anything via google on this. :(

Easiest form of this would be something like

/*<notidy>*/
-moz-....
-webkit-....
ms-filter:...
filter:...
/*</notidy>*/

But looking through the source of the csstidy class, this might get very complicated. :-( Also, adding "quirky" comments and styles to a CSS file and then optimizing it using a parser like CSSTidy is a little bit schizophrenic, but with all the browsers being "complicated" and slightly "impaired" even ... :-) Oh my.

Also, I came across Yahoo's CSS minifier, a JAVA CLI tool. There's also a PHP class for that. But no module yet for Drupal. *hint hint* :-)

philbar’s picture

philbar commented
Status: Active » Closed (won't fix)

You could probably add the following to the csstidy/data.inc.php after:

/**
 * All CSS Properties. Needed for csstidy::property_is_next()
 *
 * @global array $GLOBALS['csstidy']['all_properties']
 * @todo Add CSS3 properties
 * @version 1.0
 * @see csstidy::property_is_next()
 */

$GLOBALS['csstidy']['all_properties']['-moz-....'] = 'CSS1.0,CSS2.0,CSS2.1';
$GLOBALS['csstidy']['all_properties']['-webkit-....'] = 'CSS1.0,CSS2.0,CSS2.1';

It's a hack...but it should work. You just have to trick CSSTidy into thinking those are valid CSS elements.

philbar’s picture

philbar commented
Status: Closed (won't fix) » Postponed
Anonymous’s picture

Anonymous (not verified) commented

Thanks for the investigation :D

$GLOBALS['csstidy']['all_properties']['-moz-border-radius'] = 'CSS1.0,CSS2.0,CSS2.1';
$GLOBALS['csstidy']['all_properties']['-moz-box-shadow'] = 'CSS1.0,CSS2.0,CSS2.1';
$GLOBALS['csstidy']['all_properties']['-webkit-border-radius'] = 'CSS1.0,CSS2.0,CSS2.1';
$GLOBALS['csstidy']['all_properties']['-webkit-box-shadow'] = 'CSS1.0,CSS2.0,CSS2.1';
$GLOBALS['csstidy']['all_properties']['filter'] = 'CSS1.0,CSS2.0,CSS2.1';
$GLOBALS['csstidy']['all_properties']['-ms-filter'] = 'CSS1.0,CSS2.0,CSS2.1';

It's possible to tweak it for these properties (tested). While -moz-border-radius is already not being rejected without the "hack", I don't see currently a way to make this work for gradients. Gradients are being specified as values of the background property and are being "thrown out" because there is no whitelist for values of the given syntax. Hacking this would most probably need some more advanced changes.

I think the best we can do for now is to wait for an updated csstidy library aswell as vendors implementing official CSS3 properties. In my case, the size difference of gzipped tidy css and gzipped regular/aggregated css is not really a game killer, so I'll just turn csstidy off for now and leave it to Apache to gzip css files on the fly and cache the stuff via mod_disk_cache.

philbar’s picture

philbar commented

Here is a hack that supposedly works for gradients:

http://drupal.org/node/763730#comment-3227172

philbar’s picture

philbar commented

Can you tell me if it works as follows?

/* Browser Specific CSS */
$GLOBALS['csstidy']['all_properties']['-moz-border-radius'];
$GLOBALS['csstidy']['all_properties']['-moz-box-shadow'];
$GLOBALS['csstidy']['all_properties']['-webkit-border-radius'];
$GLOBALS['csstidy']['all_properties']['-webkit-box-shadow'];
$GLOBALS['csstidy']['all_properties']['filter'];
$GLOBALS['csstidy']['all_properties']['-ms-filter'];

If not try:

/* Browser Specific CSS */
$GLOBALS['csstidy']['all_properties']['-moz-border-radius'] = 'moz';
$GLOBALS['csstidy']['all_properties']['-moz-box-shadow'] = 'moz';
$GLOBALS['csstidy']['all_properties']['-webkit-border-radius'] = 'webkit';
$GLOBALS['csstidy']['all_properties']['-webkit-box-shadow'] = 'webkit';
$GLOBALS['csstidy']['all_properties']['filter'] = 'IE8';
$GLOBALS['csstidy']['all_properties']['-ms-filter'] = 'IE5, IE6, IE7';

If those work, I'll add it to the module.

The setting that removes invalid CSS is turned off, so it shouldn't matter what is in the CSS version part of the string.

philbar’s picture

philbar commented

For reference:
https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions

Still looking for a reputable source for webkit properties.

philbar’s picture

philbar commented
Status: Postponed » Postponed (maintainer needs more info)
philbar’s picture

philbar commented
Status: Postponed (maintainer needs more info) » Fixed

http://drupal.org/cvs?commit=432558

Added all properties contained in the following sources:
- https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions
- http://css-infos.net/properties/webkit.php

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.