Google Chrome; A second look

Following on from my previous post about Google Chrome, Googles WebKit based new browser I think I have some answers to my issues.

The first issue was that the background colours on my select lists were black. It turns out that this is due to the use of the CSS directive background-color: transparent;. Both this and background-color: inherit; appear to cause select elements to have a black background. I don’t see any obvious reason why I had this so I’ve removed it. I suspect that this might have been added for an IE fix – but if that’s the case its okay because I’m already using IE conditional comments to load IE only style sheets.

Rounded Corners, Disabled by Design?

My second issue – that the rounded corners are disabled also has a solution and it is strange. Weirdly it seems that the default user style sheet disables them. This seems very strange given that Google released this browser because they were tired of waiting for web browsers (Read: Internet Explorer) to catch up with modern web standards, and thus be useful for their products. But there it is:

It appears that there’s also work to do on my part. I had been using -webkit-border-radius: #px;, just as I have with -moz-border-radius. This always works, but what doesn’t is specifying multiple corner radii values in the same way that you specify multiple border thicknesses, margins or paddings. As describe by Peter Gasson on CSS3.info, in the Mozilla specification they allow only regularly rounded corners and thus you can specify a two or four value list to -moz-border-radius and see each of the pairs of corners, or all corners, curved. The CSS3 spec, and thus Safari, you can use irregularly rounded corners by specifying two values for each corner. This is nice, but would lead to a spec of eight values for the single border-radius definition, or some other kludgy definition. Therefore they’ve decided to fore-go this and only use the individual specifications (-webkit-border-top-right-radius, etc.). Needed to update my code for that.

Discovered Some New Features

Auto/Silent Updating of Stylesheets

I just discovered a nice feature in Chrome. I had a style sheet open in a second tab – the style sheet with the offending -webkit-border-radius code from above. After fixing it I reloaded the tab with the website open. When I flicked back to the style sheet a moment later it had been updated to the new version. This is nice, although it can also be bad. Sometimes I want to keep the old version open for comparison, so having it auto-update isn’t always desirable, but its still an interesting feature.

JavaScript Console behaves different when reloading if it is open

I’ve also discovered that the JavaScript console has different behaviour if you reload the page when it is open then it will throw errors it didn’t previously. In this case this is not incorrect behaviour. I cheat and embed a style tag in the code using document.write() because I only know what the spec should be at run time. Its done like this because you can’t place style tags in the code outside of head element.

What’s strange about this is not that the site then breaks, but that it doesn’t break the first time, or any subsequent time, when it is loaded unless the JavaScript console is open. If it is open and you reload the page it breaks. Why is that? Why does it see more the second time, but not the first, and how would this help – may be it is Apple’s way of letting sites slide by as best as possible in most cases, but when you have the JavaScript Console open its going to tell you what’s wrong? That’s nice, but it seems that it would be more sensible to log the error every time, even if you’re going to let it slide when the dev console isn’t open. Otherwise I have to do all of my browsing by opening the dev console and reloading a page, that’s just not feasible in certain cases; Where I’m submitting forms for example.

Advertisements

2 Responses to Google Chrome; A second look

  1. Tim says:

    See, I love Chrome for it’s innovative features, but the ‘black’ select hitch is throwing me for a loop.

    I’m trying to resolve the error as we speak and find an alternative other than ‘background: #fff’.

    Additionally, does IE7 not loading in background images for ‘select’ elements?

    Why are there such inconsistencies across browsers? They need to have massive gathering and really just knuckle down.

  2. wislam says:

    Nice little article, but one thing got to me…

    “This seems very strange given that Google released this browser because they were tired of waiting for web browsers (Read: Internet Explorer) to catch up with modern web standards, and thus be useful for their products.”

    That’s sadly not true.

    There was absolutely no reason for Google to release yet-another-browser in the market, given that Firefox is far ahead of anyone else in terms of web standards (one of the biggest reasons why Mozilla / Gecko was created).

    Why didn’t Google simply contribute to the Gecko / WebKit project?
    Similarly to Google Android, they did minimal effort by taking existing code and effort and created a similar product to further listen-in on people and to electronically tag individuals.

    Take a close look at Google’s privacy policy and how they can use data on individuals however they wish.
    http://en.wikipedia.org/wiki/Criticism_of_Google#Privacy

    Then take a look at the technologies from Google, i.e. GMail, Google Maps, Google blogger, YouTube, Orkut, Google Desktop, Google Health, Google DNS, Android, Chrome, etc.

    There’s no doubt that Google is an innovative company, but their recent offerings, particularly Health, Orkut, DNS and delving into the OS and Web Browser market should really make people think about what they’re up to.

    Fundamentally, Chrome is nothing more than Safari re-branded.

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: