Categories
Web development

When can I use…

Preview of the 'When can I use' page

A few weeks ago I was trying to find out which browser supported exactly which experimental feature, be it CSS3, HTML5, or something else. I found a couple of useful pages, but nothing quite as detailed as what I was looking for. Since I enjoy graphs, charts, and showing the world how much IE6 really sucks, I went ahead and made what I was looking for.

Thus was born the “When can I use…” page, which shows tables of a variety of current and upcoming web technologies. For all major browsers (Internet Explorer, Firefox, Safari, Opera and Chrome), versions for four different eras (past, present, near and far future).

The page can be customized to show only certain browsers/features/eras, so you have the option to ignore lesser used browsers or for that matter the most used one (it’s a lot of fun to pretend Internet Explorer doesn’t exist). I’ve also included a summary at the bottom of the page, which shows what percentage of the displayed features are supported.

Most features were tested myself, to ensure that the information is accurate. Please let me know if you notice any mistakes. Keep in mind that a “supported” feature may not actually work 100%, as well as the fact that some of the specifications are not set in stone yet, so what may be supported today may not actually work in the future. However, it is likely that in most cases the browser will update its support as the spec changes.

The feature list includes anything I personally feel is of significant use to web designers, but still lacks support in at least one browser version. I am open to adding more features, but only if it’s of significant importance and not just a detailed subset of another feature.

I intend to update the page as new browsers are released, or at the very least once a year. Due to its popularity, the page is updated as soon as new information becomes available.

Categories
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.

Categories
Geeky

Hello world!

So, I’ve finally set up a new wordpress blog here on deveria.com.

Current to do list:

  1. Import older blog posts.
  2. Learn more about wordpress
  3. Redesign this blog
  4. Add appropriate links to my online work

Not much of a redesign, but it’s a start.

Categories
Opera blog post Web development

IE8 beta 1 first impressions

Anyone who cares has heared that IE8 beta 1 has just been released, with quite a bit of documentation.

Mark “Tarquin” Wilton-Jones offers a pretty good overview of the changes. Many are good, and I’m especially happy with the Acid2 support and the decision to make the IE8 rendering mode the default. It is also important to note that there is still “much more” expected in beta 2.