HTML5/CSS 3 Test Page Update Adventures

Been doing some updating to my HTML5/CSS 3 test page lately. I added Mobile Opera (as of this post – version 11) to the test list. Mobile Opera is now my default browser on my n900. It’s a real joy to use. Unfortunately, it doesn’t support contenteditable – which would be really nice if it did. I have Maemo’s browser and Mobile Firefox on there. I would be using FF but it’s painfully slow – like splinter in the eye death slow (NSFW) from Lucio Fulci’s Zombie (it’s October, that’s means it’s Halloween time!).

Gradient stuff

Opera 11.1+ now partially supports CSS 3 gradients (partially meaning linear gradient only). You can use gradient with the -o- prefix. Mobile Opera 11.1+ supports linear gradients.

Webkit (ex. Safari, Chrome, Android) has switched it’s gradient properties to the same format everyone else is using. Example:

Old

background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#CC9900),  color-stop(0.45, #ffffff), color-stop(1.0, #CC9900));

New

background:-webkit-linear-gradient(90deg, #CC9900 5%,  #ffffff 55%);

I’m glad they switched to this format because I was beginning to think that I had a really bad reading comprehension problem everytime I tried to work with gradients in a webkit browser. Now, if only Google would fix the rgba() border bug problem that still plagues Chrome.

@Font-face adventures

For about the time I have had my test page up, neither Firefox nor Internet Explorer 9. I listed that neither browser supported @font-face but, this was not the case. The problem, as I found out, was that FF and IE9 do not like @font-face to be directed to an “outside” the domain/subdomain area. My subdomain, html5, points to the folder “html5” in the main directory. I used the the address http://www.gophanet.com/html5 and, I found out that @font-face was actually working in both browsers. Subsequently, I moved the fonts from the root directory to a subdirectory of “html5”.

I stumbled onto a site with a comprehensive list of what HTML5 and CSS 3 browsers (desktop and mobile) support. It’s called caniuse.com and clicking on the link will take you there.

Advertisements

About gopha

Gopha is a web programmer, techie and heir to several Nigerian fortunes. In his spare time he likes to game, spend time with his wife, daughters and dogs. He eats [far too much], watches TV and lift weights. He also like to take moonlit walks on the beach and sing songs next to a roaring campfire, in a white sweater with his acoustic guitar. View all posts by gopha

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: