Is There an Advanced CSS Minifier/Compiler That Does Things Like Strip Redundancy and Comma Separate Identical Rules

Is there an advanced CSS minifier/compiler that does things like strip redundancy and comma separate identical rules?

This can be done using CSSO.

Consider the following input:

input{margin:0}body{margin:0;background:white}

CSSO output:

input,body{margin:0}body{background:#fff}

(exactly what you are looking for)


But unfortunately, CSSO optimize this:

.dont-care {
background-image: url("images/chart.png");
background-repeat: no-repeat;
}

To:

.dont-care{background-image:url("images/chart.png");background-repeat:no-repeat}

However, CSSTidy converts the above to the corresponding shorthand property:

.dont-care {
background:url("images/chart.png") no-repeat;
}


Seven Four steps solution for optimizing CSS:
Here is the practice I follow:

  1. Merge CSS files in all.css.
  2. Supply to CSSO input.
  3. Hit Minimize
  4. Paste the output in all.min.css

Except paying @Grillz to get it done manually, I haven't found a better deal for CSS optimization thus far..


But what about old IE hacks?
If you are using CSS hacks for IE6 and 7, CSSO will preserve the hacks.

For example:

.dont-care {
background-image: url("images/chart.png");
*background-image: url("images/chart.jpg");
background-repeat: no-repeat;
}

CSSO output:

.dont-care{background-image:url("images/chart.png");*background-image:url("images/chart.jpg");background-repeat:no-repeat}


CSSTidy will ignore asterik(* hack used for IE6), and output:

.dont-care {
background:url("images/chart.jpg") no-repeat;
}

You can also avoid hacks and use separate CSS file for older IE versions (say all.oldIE.css). After optimizing (using 7 steps described earlier) both files separately, this is what you may use in the <head> tag of your HTML/masterpage/template/layout file eventually:

<!--[if lt IE 8]><link href="css/all.oldIE.min.css" rel="stylesheet" type="text/css"/><![endif]--> 
<!--[if gt IE 7]><!--><link href="css/all.min.css" rel="stylesheet" type="text/css"/><!--<![endif]-->

where all.min.css would work for all browsers except IE versions less than and equal to 7. But using CSSO alone is a safe bet.



Update

Skip the CSSTidy part. CSSO does safe optimization. According to their developer, shorthand optimization is not safe:

Consider that example:

.a{
background-attachment: fixed;
}
.b {
background-image: url("images/chart.png");
background-repeat: no-repeat;
}

and if you'd have <div class="a b"></div> — an element with both
classes, you can't optimize the .b as you write, 'cause it would
override the background-attachment set in .a.

So, no, that's not a safe optimization.

Any recommendations for a CSS minifier?

The YUI Compressor is fantastic. It works on JavaScript and CSS. Check it out.

Offline CSS compressor

Did you look at Yahoo! UI Library? This provides an programmable (.NET) CSS compressor (as well as an Javascript compressor).

What are some good css and js minimizers for production code?

YUI Compressor does both JavaScript and CSS. I'm not sure if you can send it a batch of files.

You can batch process at YUI Compressor Online (yui.2clics.net), though that version only accepts JavaScript. Another Online YUI Compressor (refresh-sf.com) accepts CSS, too, but doesn't batch.

In terms of comparing the various minifiers, see jQuery : Frequently Asked Questions (FAQ) : How do I compress my code? Also, check out Microsoft Ajax Minifier.

jQuery has switched from the YUI Compressor to Google's Closure Compiler for the minified version that they distribute.

What is the best method to reduce the size of my Javascript and CSS files?

In addition to using server side compression, using intelligent coding is the best way to keep bandwidth costs low. You can always use tools like Dean Edward's Javascript Packer, but for CSS, take the time to learn CSS Shorthand. E.g. use:

background: #fff url(image.gif) no-repeat top left;

...instead of:

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

Also, use the cascading nature of CSS. For example, if you know that your site will use one font-family, define that for all elements that are in the body tag like this:

body{font-family:arial;}

One other thing that can help is including your CSS and JavaScript as files instead of inline or at the head of each page. That way your server only has to serve them once to the browser after that browser will go from cache.

Including Javascript

<script type="text/javascript" src="/scripts/loginChecker.js"></script>

Including CSS

<link rel="stylesheet" href="/css/myStyle.css" type="text/css" media="All" />

Which Javascript minifier (cruncher) does the same things that the one Google uses for its JS APIs?

Google has now opened up the minifier they use along with some other internal javascript goodies.

It's all under the name "Closure Tools" and was announced earlier this month.

Why does the Wasm GC design address things like type equality, tagging, subtypes, and methods?

Owner of the GC Proposal here.

I am not entirely sure what precisely you are asking. Wasm is typed, so clearly, the proposal needs to define what types are equal or when a type is a subtype of another. That determines what programs validate and which don't. The rules need to be type-sound in order to prevent safety breaches without requiring runtime checks. For type equivalence we just suggest the canonical, most permissive semantics possible, similarly for subtyping. Furthermore, to get useful subtyping in practice, a producer needs to be able to restrict where mutation is allowed, because e.g. mutable fields cannot soundly allow subtyping.

It turns out that an adequate design and formulation of the typing rules around general GCed data types is actually far more intricate than defining their operational behaviour -- that is fairly simple, and does what you would probably expect.

The GC extension does not include anything like methods or method tables as primitive features. However, it is an important design goal that such notions are expressible with what the proposal provides, since we want to support the compilation of languages that have such concepts.

javac does not compile the Java code even though the jars are present and available

C:\temp\test>javac -cp ".;*.jar" *.java

See http://java.sun.com/javase/6/docs/technotes/tools/windows/classpath.html



Related Topics



Leave a reply



Submit