Tag Archive for 'browsers'

RGBA — IE Fallback

Published on December 28, 2009 in Code. 1 Comment Tags: browsers, Chrome, CSS, CSS3, Firefox, IE, Safari.

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’

Adaptive CSS-Layouts: Compromising Ideals

Published on June 15, 2009 in Techniques. 0 Comments Tags: browsers, CSS, devices, layout, reaction.

Smashing Magazine recently published an article posing a question [as it's heading]:

Adaptive CSS-Layouts: New Era In Fluid Layouts?: “Fluid web designs have many benefits, but only if implemented correctly. With proper technique, a design can be seen correctly on large screens, small screens and even tiny PDA screens. With bad coding structure, however, a fluid layout can be disastrous. Because of this, we need to find ways to work around most, if not all, of the cons of fluid design.”

(Via Smashing Magazine.)

Intrigued, I read through the lengthly article; which, seemed to answer the posed question positively; or at least suggested the possibility of a yes answer.

The article is a prescription of six “effective techniques to create 100%-functional adaptive CSS-layouts” (quoted from article). These techniques are not independent from one another; they must be used together, and implemented correctly to achieve their prescribed solution to the Adaptive/Fluid layout problem.

All of these techniques can be implemented in one design to create a very user-friendly fluid layout. A smart use of the fluid grid can create an adaptable layout whose proportions remain faithful to the Rule of Thirds, balance and other design principles…

I’m left dissatisfied with Smashing Magazine’s solution. Spending time to understand and apply six different, seemingly independent, layout techniques to an interface feels too compromising. The one-size-fits-all approach to User Interface design leaves you compromising on crucial interface components and aspects of usability. The interface for a web site/application on a computer isn’t going to best serve a user on their iPhone; users with a computer screen resolution of 800×600 are rare; users with wide-screen monitors don’t browse at full screen.

Contorting the development of one interface to serve vastly different devices is not ideal. To achieve a better, more usable interface you must design for the device. I’m not buying the idea that we, as web developers and designers, can get away with forcing our compromised interfaces on user’s screens big and small.

I posed a somewhat opposing question about layout— regarding it’s flexibility, in October 2008: Layout Flexibility – Still A Requirement?

Questioning my own pervious layout techniques and use of Elastic Layouts (em’s to specifying box-model dimensions). Concluding that the adoption of full-page zoom in modern browsers leaves the elastic-layout technique obsolete.

Browser Testing IE On a Mac

Published on January 28, 2009 in Techniques. 13 Comments Tags: browsers, Firefox, IE, Mac, Safari, test, tools, Windows.

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’

Layout Flexibility – Still A Requirement?

Published on October 29, 2008 in Techniques. 1 Comment Tags: accessibility, browsers, CSS, HTML, layout.

Is having a flexible layout required anymore?

It is second nature for me to command + while testing out my XHTML and CSS to make sure the text scales nicely and the layout is flexible to wider and longer content. Firefox 3 has been my default browser since it’s been out of beta and I still increase the text-size to check if my layout is adapting correctly. Doing this in Firefox 3 has a different effect then what I am used to and I’m constantly reminded, “Oh yeah, Firefox now does that full-page-zoom thing”.

On a recent project I was working to get an Adobe Fireworks design “sliced” into XHTML and CSS; this time I remembered about the Firefox 3 full-page-zoom. Thinking about what Firefox 3 does, I also remember that IE7 does something similar but not as well as Firefox. Now launching Safari 3.1…, ready, set, command + …aww bummer, just normal text-resizing.

So which browsers are doing the full-page-zoom and which are doing just text-resizing?

Continue reading ‘Layout Flexibility – Still A Requirement?’