Comments on: Online Tools for Cross-browser CSS3 Rule Generation

By: van man

van man — Wed, 04 Jan 2012 22:30:39 +0000

You can not ! It is to late !

By: therealspaguy

therealspaguy — Thu, 22 Dec 2011 15:22:34 +0000

wtf…installing a headlight in a volvo is easier than trying to convince msie of anything…and this whole thing about standards is a joke. If all browsers were standards based, (they all seem to be excet msie…) it would be a one page world. Instead, we need seperate lines for ie…! I’ve only been coding a year or two, but it obvious that supporting msie is 3x’s more work than developing a css3 tool in the first place. I just want a page that conveys a message…not one that conveys 5 different messages depending on the browser. I’m going css3 and html5, and leave the rest behind. Screw it…

By: Caleb

Caleb — Sat, 03 Dec 2011 05:44:04 +0000

I’m not sure why some are complaining about a few decent FREE CSS3 tools, but I would like to ask those who are bitching about someone else’s hard work and time, please post your css3 tools (that you made) for us all to see and use. I have found the two tools listed to be extremely helpful and tie saving. Thanks for all the hard work Paul!

By: Madhukar Adhikari

Madhukar Adhikari — Thu, 01 Dec 2011 11:27:50 +0000

hi i am working on css3 bt when i used pie.htc for border radius same time on same div i require opacity bt box opacity did’t work on internet explorer pls how 2 solve this problem

By: Samiullah Khan

Samiullah Khan — Sun, 11 Sep 2011 18:59:10 +0000

I am not happy with the suggestions because both of didn’t helpful in my case.
Css3please don’t have ability to generate rules for transform.
css3generator is able to do with transform but not accurate.

By: Andy Webber

Andy Webber — Tue, 01 Feb 2011 09:56:13 +0000

Great tools, thanks! I’d also like to add http://css3gen.com to the list.

By: Jeffrey Zeldman

Jeffrey Zeldman — Mon, 09 Aug 2010 15:14:33 +0000

Michał Ordon, we are encouraging IE to also use a vendor prefix.

By: Michał Ordon

Michał Ordon — Thu, 05 Aug 2010 11:14:40 +0000

It kind of scares me when well known websites like this one mislead all the new kids on the block trying to learn CSS3 and the way how browsers handle it. It scares me even more when people like Jeffrey Zeldman himself link to educational websites (CSS3Generator in this case) that has not been entirely checked.

CSS3Generator.com has been online for at least few months, mentioned everywhere tons of times. Its examples have been used to create tens (if not hundreds or even thousands) of CSS3 showcases and cheat sheets.

Here is an example that grabbed my attention:

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-icab-box-sizing: border-box;
-khtml-box-sizing: border-box;

As far as I am concerned, Firefox and the browsers based on WebKit (Safari, Chrome and the latest version of iCab) require prefixes, indeed. However, Internet Explorer handles box-sizing just fine since version 8. Same with Opera since version 7 (not 9.6 as the generator suggests) and Konqueror since version 3.4. Also, regarding browser compatibility, according to Mozilla Developer Center, Firefox handles box-sizing since version 1 (not 3) and Safari since version 3 (build 522, not 3.1+). Chrome, presumably, has it since version 0.2 (as it was built on WebKit 522). That is a lot of inconsistency and bloated code on a website that has been linked by pretty much anyone in the industry.

That leaves us with a much shorter version of the universal (read as: much more universal as the generator suggests) box-sizing implementation:

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

Note the vendor-specific prefixes before the main, non-specific property.

Please do not get me wrong: we all make mistakes and we all suffer from time shortage these days but please think about the consequences of linking sources that has not been entirely checked. We talk about what HTML5 is and what it is not, yet we miseducate others at the same time (as this example shows, let alone the extra bandwidth caused by the bloated code).

During the pursuit of the pure, semantically correct web with all the great things that HTML5 and CSS3 provide these days it is hard to not notice the fact that we lose our grip a little bit and we should really *think* about the hype we are all in.

By: Design is BS

Design is BS — Sun, 01 Aug 2010 17:29:15 +0000

Great way to learn CSS3

By: man van

man van — Thu, 01 Jul 2010 22:17:03 +0000

css3 generators is great