DD_roundies 0.0.1a

December 2, 2008

As follows is DD_roundies, another (hopefully improved) implementation of rounded corners in an HTML document:

http://dillerdesign.com/experiment/DD_roundies/

Recently, Jonathan Snook published an interesting experiment using VML in Internet Explorer to bring that technically sedentary browser something similar to what can be done in standard browsers with the border-radius CSS property.  I wanted to see where I could take it from there.

Advertisements

29 Responses to “DD_roundies 0.0.1a”

  1. rob Says:

    Drew, DD_roundies is looking like it could be the holy grail (short of, dare we ask, IE actually supporting border-radius) of rounded corner scripts.

    Thanks for the hard work. I may actually implement this on a fairly large scale project. I’ll let you know if I do and run into any issues.

  2. dillerdesign Says:

    Thank you, Rob! Like the version number implies, I plan on continuing development of this script. I want correct implementations of background-repeat and background-position more than anything.

  3. ttutuncu Says:

    Drew, I tested on Opera/9.62 and it doesn’t work. But it does work on Safari (iPhone too). When I tested it on IE6 I got a javascript error. Thanks for this script and keep up the good work!

  4. Sam Says:

    It does not work in Opera 😦

  5. John van Dijk Says:

    Looks very promising!!! I saw an error on the page looking with IE6 but it was caused by the digg.com script on the page…

  6. dillerdesign Says:

    ttutuncu and Sam, indeed it does not (yet) work in Opera. I did note this: http://dillerdesign.com/experiment/DD_roundies/#lacking

    The main point here is that the roundies work in IE6 and 7. You could include this script only for those guys using conditional comments, and then use a or SVG solution (and there are a few already out in the wild) for the other browsers, including Opera.

  7. pinit Says:

    It’s just amazing.

    I was looking in these days for an IE border-radius alternative and I discovered this some minutes ago on the delicious home page.

    I’m already experimenting it here! (using conditional comments)

    here 2 notes:
    1. adding a DD_roundies class to a form element (as inputs, textareas) cause a javascript error.

    2. some divs loose their height in a random way. I think the problem is somewhere in the loading stage.

    anyway, great work!

  8. dillerdesign Says:

    pinit, good deal! Thanks for the bug reports. Keep ’em coming. I intend to continue to developing this.

  9. Paperboy Says:

    Wow, this looks promising, just tested in on my site and this maybe the best solution yet!

    Will you add support for having different corners on a box with something like DD_roundies.addRule(‘.box’, 10 10 0 0); too?

  10. dillerdesign Says:

    Paperboy: Indeed I will, because I would want to use such a feature! Development on this is still present and under way.

  11. MikeS Says:

    By far the best solution I have seen for IE. I will be using it for sure. Thank you so much!! One thing i would really like to see is the ability to round just the top 2 corners or perhaps the bottom 2 as well …for creating tabbed navigation, otherwise an excellent job very well done!


  12. Unfortunately it doesn’t work in IE 8
    error on line 31
    and on line 47
    if (this.styleSheet.addRule) { /* IE */
    but great work!

  13. dillerdesign Says:

    Martin, indeed, IE8 doesn’t even have VML yet. I have noted this:
    http://www.dillerdesign.com/experiment/DD_roundies/#lacking

  14. Eugene Says:

    Great work so far~! I’ve taken a copy of your script and modified it to allow different sized corners by supplying an array of numbers for the radius and changing the updateVmlPath function. I’ll be happy to send you my changes if you would like.

    Have you ever thought about just letting the web developer be able to set the behavior attribute in the css for IE instead doing all the javascript calls such as DD_roundies.addRule()?

    example:

    .rounded {
    behavior : expression( DD_roundies.roundifyElement.call(this, 10) );
    }

  15. d_run Says:

    Thanks for this – very interesting solution – note: actually its not working for me in Safari 3.2.1 Mac – possible selector problem? I’m using the packed version. Works a treat in FF3.

  16. d_run Says:

    actually – my bad – was a problem with padding – when set below the corner radius in webkit browsers it switched off the rounding. Nothing to see here… move along…

  17. rob Says:

    @Eugene — I think Drew was pointing out that behaviors are performance no-no’s so the script removes those (?).

    Anyone thinking about the roundies and the transparency might look at:

    http://cfis.savagexi.com/2008/06/22/a-new-take-on-transparent-pngs-in-ie6-performance-and-vml

  18. rob Says:

    Oh hey Drew, any thoughts on when you might back the PNG repeat and position fixes into this script too?

    • dillerdesign Says:

      Rob: Probably before the weekend.

      Regarding that link you posted, I did manage to work around the lack of onload by using dummy image elements appended to . It’s hackish. I’m open to alternatives.

      Also, I should test the claim that the VML images aren’t cached between page loads. I wonder if BackgroundImageCache will have something to say about that (crosses fingers).

  19. rob Says:

    @Drew: huh, yeah: (BackgroundImageCache) that could be key… but VML may operate at a whole different level, I dunno.

  20. Dale Larsen Says:

    Wow!!!! The web design world will now be changed forever! Rounded corners are everything in design and now they are easily possible!!

    Thanks a ton!

  21. Quin Says:

    This solution gives me goosebumps (will not say what it actually gives me).

    One question though: When you say that one could add a boolean indicating whether you wish to add styles for standards-compliant browsers, how does that work?

    Great work and thanks so much!

    • dillerdesign Says:

      Quin, ok, that question is kind of funny. The boolean would default to false, and the function should ask, “Should I add border-radius CSS to the document in browsers other than Internet Explorer?” – the boolean would by default say “no”, and the user could change the boolean to true in the call to roundify, such as DD_roundies.roundify(‘.your .selector’, 10, true);

      Thing is, if you look at the script, it just adds the styles. It doesn’t check for the boolean at all. I completely forgot to write it. So it doesn’t matter if the third argument is there or not. I will fix this for release 0.0.2a (have already done so, but the code is not release-quality yet).

  22. MarcoBR Says:

    Yes, this looks promising indeed!

    The best rounded corners solution so far, with no doubt.

    One thing, my css is not validating with this script. The validator complains about border-radius, -moz-border-radius and -webkit-border-radius

    Is there any work around to make this 100% webstandard ?

  23. MarcoBR Says:

    Oh, but that’s CSS3.. still a long way to go, no?

    I still think this is the best rounded corner solution, and I thank you for sharing 🙂

    But I might wait until CSS3 then, since having non-standard website is out of question due to my work.

    But that’s just me. I’m sure that I will end up using this nice script again..

  24. Adam Says:

    Drew, Amazing script but mine seems not to work in IE 7 or 8, works fine in Safari and FF tho… Any ideas? http://adamtarry.co.uk/benkaye/

    • dillerdesign Says:

      Adam, IE7 does work. Are you behind McAfee antivirus or using Parallels? I’d be interested in hearing about the former.

      IE8 is what I’m working on currently for 0.0.2a – almost there.

  25. Simone Says:

    Sorry for my English…
    Thanks for the hard work.
    I’ve just tried it in a new website for a restyling.
    Very good.
    But sometimes some borders disappear…
    A memory problem or what ?

    Bye


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: