Tag Archive for 'Safari'

RGBA — IE Fallback

Published on December 28, 2009 in Code. 1 Comment Tags: , , , , , , .

I’ve been using RGBA color values, border-radius, and box-shadow CSS3 features all over in my current projects. Since Internet Explorer (6, 7, & 8) does not support any CSS3 features I wanted to find some suitable fallbacks. RGBA color values are the most important (of the three CSS3 features I’m using) to find an IE-alternative; without one, IE will inherit the last non-RGBA color value (which maybe no color value, i.e. transparent).

A great article, Working With RGBA Colour, recently appeared on the collaborative web development blog: 24 Ways. The ‘Supporting All Browsers’ section of the article fell short of describing a robust way to “support” IE without punishing the other browsers.

Falling back to a PNG

In cases where you’re using transparency on a background-color (although not on borders or text) it’s possible to fall back to using a PNG with alpha channel to get the same effect. This is less flexible than using CSS as you’ll need to create a new PNG for each level of transparency required, but it can be a useful solution.

Using the same principal as before, we can specify the background in a style that all browsers will understand, and then overwrite it in a way that browsers without RGBA support will ignore.

h1 {
	background: transparent url(black50.png);
	background: rgba(0, 0, 0, 0.5) none;
}

Drew McLellan, 24 Ways: Working With RGBA Colour

I had a feeling, as did Martin Klepsch, that this code would result in downloading black50.png in browsers which wouldn’t even use/need it (i.e. non-IE browsers). Running tests and investigating alternate fallback techniques for RGBA color values in IE shined some light on this issue. Continue reading ‘RGBA — IE Fallback’

Browser Testing IE On a Mac

Published on January 28, 2009 in Techniques. 13 Comments Tags: , , , , , , , .

For the past couple of years I’ve been trying to get a reasonable setup for testing Internet Explorer on my Mac. With the recent release of IE 8 RC1, I thought it might be a good time to revisit my browser testing setup.

I use an Apple Macbook (the black one) with OS X 10.5 and 4GB of RAM as my sole machine. With my Mac I should be able create a reasonable setup to test all major web browsers. I’m less interested in testing all OS and browser combinations simply because that seems unreasonable for most projects.

Operating System and Browser Testing Combinations

The following is the list of OS and browser combinations I want to be able to test; each OS has browsers listed in the order of which I care most about supporting:

  • OS X 10.5
    • Firefox 3
    • Safari 3
  • Windows XP
    • IE 7
    • IE 8
    • Firefox 3
    • IE 6
    • Firefox 2

Developing on a Mac, I’m always running things in OS X 10.5 / Firefox 3, making the combination always supported. I will also occasionally checkout how Safari 3 is doing while developing, although it’s usually fine.

When in browser testing mode (not developing new features) I’ll run through the Windows XP / Firefox 3 and Windows XP / Firefox 2 combinations; mainly to checkout how the font-renderings are holding up in Windows.

Then comes IE testing. I start with IE 7 which I find not too difficult to get working, usually just have to fix the hasLayout issues. With IE 8 coming into the mix soon I’m going to start testing it; hoping that it will be even easier to get working than IE 7. JavaScript frameworks like YUI are pushing hard to support IE 8; which is great as the CSS support in IE 8 seems to be much better than in IE 7. Of course the hardest of all to get working, IE 6; some projects need to support it no matter what, others can just not worry about it (like my personal web page).

I feel that I’ve found a testing setup that will allow me to carry out my browser testing process much easier than I could in the past.

Continue reading ‘Browser Testing IE On a Mac’