Google Chrome

@13:32 Leave a comment

Came across this today.

Google Chrome is Google’s open source browser project. As rumored before under the name of “Google Browser”, this will be based on the existing rendering engine Webkit. Furthermore, it will include Google’s Gears project.

Apparently, it also includes its own JavaScript VM to help speed up scripts. Sounds interesting. I wonder how it'll render CSS ;) Seen as it's based on Webkit, I'm guessing it'll be very very good.

In other news, I also came across a FF extension called Pixel Perfect (well, actually it's a Firebug extension). It allows you to overlay an image onto a website, so you can see how close the coded site is to the original designs. Quite handy if you do that sort of thing.

UPDATE 1 :There's a load screenshots now available.

You can read the comic if you want. It describes some of the features.

Due to be released tomorrow, so I'll be giving it a go then.

Tags : browsers, google, css

Separation of content and presentation with HTML and CSS

@8:02 Leave a comment

Almost every day I come across sites which have missed this vital point entirely. They think that just by adding CSS to a site, it's suddenly now much better. This is not the case, and I admit I've been in this category myself in the past.

The whole concept of HTML and CSS is to separate the content of a site, from the presentation. To layer it. This means that there should be absolutely NO content in the CSS, and absolutely NO presentation in the HTML.

Over and over I'm seeing sites with things like id="left" in the code. What happens when the design changes? "left" gives no semantic meaning to the element at all, that is presentational, and should not be used. A better way is to name it something relevant to the content it contains id="home-page-quote", etc. Now when the design changes, the HTML still semantically represents the content.

I'm also seeing the use of spacer.gif's. Back in the days of table based layouts, people would use spacer.gif files ( a small transparent image ) to space out the content. Not only is this very bad practice, as it will mess up the layout for people who use mobile devices, but also because when the page is viewed without style (such as for screen readers) there will be images all over the place, that lend absolutely nothing to the content. If you use CSS, there is absolutely no need for a spacer.gif file, you can do everything you need in CSS, with no exceptions! Padding and margins can space out the content and you can use letter-spacing, text-indent or line-height to space out text.

Another thing I've noticed, is the use of a div or hr which has class="clear", yet they have no content whatsoever. Again, these add nothing to the content of the page, they don't make semantic sense. This is presentational, as you want to clear a float. But again, what if the design changes? The markup will need to be changed too. It is possible to use CSS to make self clearing floats with minimal effort, and with valid standards compliant CSS. A quick Google search will reveal many different pages discussing the matter of self-clearing floats.

When viewing HTML without the CSS applied it should be in a suitable order so that it reads well, and only images which are part of the content should be shown (logos are included here, as they're part of the page content). If the page is in an odd order, screenreaders will be confusing for people and if random style images are showing, then it detracts from the content. You should be able to completely change the layout of a page by only editing the CSS. If you have to edit the markup, then you've done something wrong and need to re-think the code. This includes extra markup only used for presentational purposes. You shouldn't have a div called "coloured-line" for example, as this is specific to the current design. Yes, you can hide it in later designs with display:none, but ideally you want to make the coloured line just part of the CSS and give no reference to it in the markup.

Nobody's perfect, and I've done many of the things I've mentioned here in the past myself (and a lot more recently I've found myself naming classes "left" without realising until later). The whole point is that we find new and better ways to do things, and constantly strive for perfect code. Hopefully this will help some people to use HTML/CSS the way they were meant to be used.

Tags : web, html, css

WebKit the first to get 100/100 on Acid3

@16:32 Leave a comment

WebKit has become the first publically available rendering engine to achieve 100/100 on the Acid3 test.

This is a big step forward, with other browsers not far behind. Opera employee David Storey announced yesterday that the Opera browser now achieves a 98% score. With Firefox Beta 4 not too far behind with 71%.

It's not all about the 100/100 score though, the animation also needs to render "smoothly", but I think the meaning of "smoothly" is open for interpretation. I imagine we'll start to see a lot more browsers getting 100% over the next few days. Unfortunately I doubt IE will be in that group, but I can always hope.

EDIT : Seems I spoke too soon, Opera is now at 100%.

Tags : internet, css, browsers

Acid3 Test Released

@7:33 Leave a comment

The Acid3 Test has been released by the Web Standards Project.

There's an article on DrunkenFist with screenshots of how the most common browsers render the test. From what I can see not a single one passes with 100/100, but Safari 3 gets pretty close with 87. Of course, Internet Explorer fails miserably, but I'd expect nothing less. Firefox 3 doesn't mess up the layout as much as the others, but still only scores 59/100.

It'll be interesting to see how, and if, popular browsers like Firefox and Opera adjust to be better at handling the standards and whether any of them will be able to get 100/100 anytime soon.

Tags : internet, css, browsers

IE8 Passes the Acid2 Test

@21:08 Leave a comment

A few of you may be wondering what the Acid2 test actually is. There's a Wikipedia article about it, but basically it's a test designed to highlight flaws in the way a browser renders CSS and HTML. Any standards compliant browser will render the image of the Acid2 Face correctly. As you can imagine, IE doesn't render the face correctly at the moment.

However, all that is about to change. Today, Internet Explorer General Manager Dean Hachamovitch posted an entry on the IEBlog declaring that the latest build of IE8 now passes the Acid2 test.

All I can say is, "About time!". I'm very much looking forward to not have to put up with all the quirks IE causes with compliant code. Of course, who knows when it'll be released, but it's a step in the right direction at least.

Obviously Acid2 doesn't test everything about the standards compliance, so it will be interesting to see if it copes with everything else.

Oh, and for those who are wondering, Firefox 2 fails the test and Opera 9 passes. Hopefully Firefox 3 will pass once it's out of beta. You can take the test here.

Tags : internet, css, browsers

CSS Animation

@13:21 Leave a comment

Safari have announced a new CSS feature, animation specified in CSS. Giving the designer the ability to code transitions such as fading out, and rotating elements on the page. All gracefully degrading for browsers which don't support it (which I imagine will be most).

While it's interesting, I'm rather worried that we'll be going back to the days of the "blink" and "marquee" HTML tags (*shudder*), where it'll just pop up on every site and we'll be overloaded with fading panels and ads which spin into view.

According to the article, they're planning on proposing these changes to be included in the CSS spec. As yet, I am undecided if this is a good thing or not. On the one hand, it's nice to see some expansion on CSS, but on the other hand... rotation effects?!..

I guess I'll just wait and see how this one turns out.

Tags : CSS, Design

12 Lessons for Those Afraid of CSS and Standards

@6:26 Leave a comment

There's a great article over at A List Apart called "12 Lessons for Those Afraid of CSS and Standards".

If you've been designing sites for years but haven't gotten around to taking a look at CSS, then this is the article for you. It's pretty interesting to read even if you have been using CSS for a while though too.

Tags : CSS, Design, Article