Web development

border-radius for all!

Screenshot of rounded corner generator

One of CSS3’s most popular features is border-radius. The ease of just being able to specify your rounded corners in CSS is very appealing compared to using JavaScript or a bunch of bloated HTML to accomplish a simple effect. So here I will describe a CSS-only method we can use today that works in all four major browsers. Sadly, this does not include Internet Explorer, so I will include an alternative solution for it too.

Web development

When can I use…by spec status!

An update to the “When can I use” page, now you can filter by spec status. This is helpful to only see support for full W3 recommendations, mostly stable specs, features still in flux or completely unofficial features.

I find it interesting to see that with IE8 Microsoft has focused largely on improving items under “candidate recommendation” status (primarily CSS 2.1), whereas most full recommendations (XHTML, SVG, MathML) get ignored. Working draft features seem to only be added when the spec is pretty clear cut, such as the querySelector one.

Web development

Direct URLs to browser support table selections

The “When can I use…” page now makes URLs based on selections. For example, I made the following links:

Just selecting the options at the top of the page will immediately generate the URL.

Web development

SVG test page

I have created a test page to determine how current web browsers deal with SVG in HTML, using an SVG file as an OBJECT element, an IMG element, or as CSS background.

My main purpose for this was to discover the limitations of Webkit’s ability to display SVG files as CSS backgrounds, after which I thought it might be helpful to show the other methods too.

Here is the SVG test page.

Currently, only Opera 9.5+ is able to render all the instances correctly.

Webkit (Safari, Chrome) appears to only be able to display SVG as CSS backgrounds under the following conditions:

  1. The HTML container may not larger than the width and height set in the SVG file
  2. The SVG file must have a width and height set
  3. Only elements in the SVG file with pixel rather than percentage positioning will appear

Similar restrictions exist for images.

There doesn’t appear to be a specification that states how SVGs should be handled in CSS backgrounds, so technically there’s nothing that says that Opera’s more flexible rendering is any more correct than Webkit’s. However, having more restrictions than it does on regular images seems odd. Tiling the image, for example, is not possible in Webkit.

Hopefully Webkit will at some point adopt Opera’s method, until then it’s limited to fixed width vector images in fixed width containers. Gecko, in the mean time, continues to have open bug reports for CSS in image as well as CSS, and anything from IE will have to wait until IE9 or a sudden switch to Webkit.