News Uni Dev Res Blag

/b/ - CSS3/HTML5 across browsers

2010/04/24 - 14:05

Adding more and more bling to my website, I've notice how things render quite differently across different browsers. While some browsers might disregard certain features completely, others make half-arsed attempts that pretty much leaves everything looking like shit.

Might as well make a list of what does and doesn't work in current browsers. My definition of current is Opera 10.51, Firefox 3.6.3, Chrome 4.1.249.1059, IE 8. Everything regarding Chrome probably accounts for Safari as well.

Everything mentioned here is completely ignored by all IE* browsers unless otherwise stated. IE is also not included in "all browsers".

Box-Shadow

Drops shadow from a block-element. Perfect in Firefox and Opera, does show in Chrome but doesn't look as nice.

Border-Radius

Rounded corners. Perfect in Firefox and Opera, decent in Chrome but bad antialiasing. Simply awful combined with box-shadow.

color: rgba(128, 192, 256, 0.7)

Transparent backgrounds. Perfect in Firefox and Opera, fine by itself in webkit (chrome/safari) but escalates issues with border-radius, especially if combined with box-shadow.

cursor: url('/o/u3m.net/res/custom.png');

Custom mouse cursors. Perfect in all browsers.

#something:before {

Inserting content with css. Perfect in Firefox and Opera. Margin/padding issues with Chrome. IE has patial implementation of display:block on :before and :after making things look ridiculous.

max-width

Define max width for dynamic sizing. Perfect in all browsers. Can be implemented in IE using width:expression();

text-shadow

Perfect in Firefox and Opera. Makes fonts appear incorrectly in Chrome, as well as odd shadow shaping (see box-shadow).

Updating as I find/remember more inconcistences.


Copyright © 2010 Ed Edland