Browsers - Sink or Swim?
The predominate browser in the market-place, Internet Explorer, is struggling with
its "doggy paddle" and seems a long way off achieving gold in the freestyle race. Yes, IE has lost its way and is wandering off down strange and inexplicable paths, creating all sorts of wonderful gizmo's for webmasters to play with, but has lost sight of what should be its main goal, i.e. implementing the W3C standards, all of CSS2 and working towards incorporating CSS3 in order to keep abreast of the achievements of its erstwhile competition - Firefox, Opera, Chrome and Safari.
Some eighteen months or more ago, I had a look at what Firefox had achieved in implementing CSS3 and decided to create a TV style test-card using the available styles. That test-card is displayed in the iframe below and contains no graphics. The logo displayed within the circle will be that of the browser you are viewing this in, and has been super-imposed by code in this page. The original page for the test-card can be found at - http://countjustonce.com/test-pattern.
Creating the test-card was not that difficult, the hardest problem was creating the grid table so that it would render correctly at 800 x 600 pixels, the standard 4:3 ratio. The circle was created using "border-radius", the small square in the center was rotated 45 degrees using "transform:rotate(45deg)", and the triangles are made by "playing" with the standard "border" styles. Small frequency graduation bars were created using "font-size" and the "keyboard pipe character" and were lined up largest to the left and decreasing to the center. The wedge shapes around them were created once again using standard "border" styles.
Gradient color bars at the bottom were originally created using a jQuery Gradient Plugin, and used one color in each bar with 100 percent saturation at one end being graded to black at the other. EDIT : Dec 2011 - With the passage of time, all browsers are now able to render linear gradients using CSS, and this has now been adopted instead of the jQuery Gradient Plugin. The triangular color-bars at the top use standard colors at 75% saturation, which is the TV standard. The grey-scale bars are also at standard TV saturation levels, and in case you are wondering, the Test Card 'ZL' represents the International Telecommunications Union's radio call-sign prefix for New Zealand land stations. Test noIndex of iFrames
Well other than Firefox, none of the other browsers displayed the test-card correctly, and Opera was the only other browser capable of rendering the grid accurately. In the intervening period IE8 and the Webkit browsers, Chrome and Safari have finally got that part right, while Opera, Chrome and Safari are now rendering the test-card using its CSS3 styles correctly. Needless to say, Internet Explorer 8 has not yet (March 21, 2010) joined the party, and if you are still using IE7, being invited would be a waste of time. Add innerHTML Links - Obfuscated Javascript Version
EDIT : Dec 2011 - Overall, rendering of this test pattern varies a little from browser to browser, with Opera, Chrome and Safari performing the best. Current versions of Firefox introduce some artifact when rendering the frequency graduations, and IE9 (and IE10 beta) fail(s) to show the Test Card ZL div. So, it can still be said that not all browsers are created equal.
I shouldn't be too hard on the Internet Explorer development team, as they are working hard to implement the basic CSS3 styles that have been used in this page for the IE9 release. One final problem I have with IE8 is that its JavaScript engine has a head explosion when rendering the following page - http://countjustonce.com/ie-test/vertical-align-ie8.html. The pale blue rectangle should be rendered in the center of the page, as per the IE7 Emulation Mode rendering, and as earlier versions of IE and all the W3C standards compliant browsers do. EDIT : Dec 2011 - Now fixed in IE9. It seems that the problem lies lay in the refresh page timing once the script has had run.
Remember the super-imposed logo I mentioned inside the circle at the top of the test-card? I mention it again because it is a timely reminder that not all external web-pages rendered in iframes may be in their original form. It is not possible to directly modify their content, but you can place "stuff" such as the logo on top of it. Be warned!
