WebKit Comparison on CSS3

.opracity {opacity: .5;}
.textShadow {text-shadow: #777 2px 2px 2px;}
.textShadows2 {text-shadow: rgba(0,0,255, .7) 3px 3px 2px, rgba(255,0,0, .7) -3px -3px 2px;
.ellipsis{text-overflow: ellipsis; width: 200px; overflow: hidden;}
.borderRadius {background-color: #666; color: #fff; width: 200px; padding: 10px; -webkit-border-radius: 10px;}
.boxShodow{-webkit-box-shadow: #000 3px 2px 6px; width: 200px; padding:5px;}
.strokeAndFill{-webkit-text-stroke: 1px green; -webkit-text-fill-color: #ccc; font-size: 2em; }
.borderImg{-webkit-border-image: url(button.gif) 0 13 0 13 stretch stretch; border-width: 0px 13px; padding: 5px 0 7px;}

Author: Tomomi Imura

Short story: keeping my website since 1996, finally started this blog in 2007. Long story: see "About" page!

Tomomi Imura has written 87 articles for us.

Share this article:

7 Comments to “WebKit Comparison on CSS3”

• 
  Rahul January 28, 2009 at 4:34 am

  Hey,
  I have been working with webkit transform and moz tranform recently…Sorry for bothering but i dunno where else to ask it..

  I have been tryin to scale up a google gadget before displaying it on my page. It works fine in Firefox but the buttons on the gadget dont seem to work in Safari..can you please help…(this has been the case with all gadgets i have tried so far)

  code:

  .gadgetdiv{
  -webkit-transform-origin:top left;
  -webkit-transform:scale(1.5);
  -moz-transform-origin:top left;
  -moz-transform:scale(1.5);”
  }
• 
  admin January 28, 2009 at 5:26 pm

  Hi Rahul.
  It is actually a timely topic since Firefox has released Firefox 3.1 (Shiretoko) that supports a bunch of css3 properties!

  I tested the code with:
  1) an image
  2) iframe
  3) script src (embedded Google Gadget)

  On Firefox 3.1b on Mac, all works beautifully.

  On WebKit and Safari, I found (2) and (3) transform as expected (scale to 1.5x), however, both fails to load the content on WebKit Nightly, and (2) failed to load and (3) content is loaded partially on Safari 4.

  So I’d say, it is a limitation/bug on Safari?
• 
  Rahul January 29, 2009 at 6:55 am

  Hmmm…thanks for the response..

  Thats rather strange considering webkit CSS transforms have been around longer…

  Also, I have noticed in some gadgets that the buttons and links work where they should have been if scaling wasn’t done…so i would say thats definitely a bug…
• 
  Luis June 3, 2009 at 12:29 pm

  Hi! I’m adapting mobile web contents specifically for iphone so i was trying out some of these fun stuff. But I think that iphone’s safari does not support both webkit’s reflect and gradient effects. Do you know if this is true? I tested the gradient with this link:
  http://www.martinilab.com/blog/wp-content/uploads/2009/05/album.html
  I tested the reflect effect some time ago… Can you share your expertise?
  Thanks in advance!
  Luis
• 
  admin June 3, 2009 at 6:54 pm

  Hi Luis! I think you’re right. So far, it looks like neither gradient or reflect (also many more css3 fun stuff) seem to be supported by mobile Safari. Nothing I wrote had worked on my iPhone.
  I am hoping the next gen will!
• 
  David Kaneda September 3, 2009 at 3:08 am

  Tomomi,

  Dave here from WKB and jQTouch. I’ve been searching for something like this, but a tad more comprehensive, for a while now. I’m not able to find what I’m looking for, so I was wondering if I could possibly “sponsor” your research a bit more — I could, for example, send you some cash via PayPal, in exchange for you appending results to this… We could even present as a joint venture between WKB and GirlieMac — I’ll gladly help design the results I could see it becoming somewhat authoritative, ala http://www.campaignmonitor.com/css/. Would this be something you’d be interested in?

  Primarily, I would want to add several devices/systems, like separating iPhone 2.2 vs. iPhone 3.0 (or 3.1 soon enough…), the Pre, and Android’s first release vs. the “cupcake” update. I would also want to add in a variety of tests like transitions, animations, gradients, tap-highlight-color, rgba, reflections, etc. Ideally, we could also add some HTML/Javascript tests, like localStorage, Cache Manifest, transition events, and touch events.

  Anyway, you get the idea. Let me know if you’re interested. We could even throw it on a mini-site like “webkitreport.com” — would be a great promo for both of us. Anyway, hope all’s well, email me
• Cross-platform mobile application development and payment | Twinapex Blog September 30, 2009 at 3:55 am

  [...] iPhone’s Safari already supports client-side storage and CSS3. [...]