Now this is really good for us real web craftsman and women. Real knowledge of your field once again proves itself against frameworks. How much I loved the demos of jQtouch at last weeks @media ( or #wdx as it is called now ), I still think that using a library or a framework isn't the thing to do for speed. So Ipad and Iphone development will create a new demand for good old hand coders.

"Don’t rely on frameworks or what standards zealots tell you. In our case, a highly trimmed HTML page, with inline CSS, just some pure JavaScript without a framework and using the capabilities of the target platform (iPad) as much as possible allows for a lean page that loads almost instantly, caches well and works great offline. Yes, we could have used JavaScript and CSS frameworks, but sometimes less is more (and remember, you don’t need all the cross-browser heavy lifting that frameworks do for you)."

(Via Thomas Fuchs.)

I read an interesting tweet just now by Sergey ilinsky, saying that his bug report to Chromium was being ignored. A bug that let's you include css only for chrome WebKit browsers, like apple's safari and google's chrome. Look here for the example page., the text is red in chromium WebKit and black in other browsers. The HTML is valid in case you're wondering, so you won't catch it that way.

All you have to do is to write a phony include that only chromium WebKit browser ( today ) will detect and act upon. Like this:

<link type="custom/mime+type"
rel="stylesheet" 
href="css/chromehack.css" />

The type="custom/mime+type" is what does the magic. Chromium WebKit browsers will request the file from the server and add it to the document. What should happen is that browser shouldn't fetch the file or process it for that matter. The chrome team responded with a status: WontFix, which is wrong in my opinion. People will use this to write css to over come chromium WebKit bugs instead of learning what it is they are doing wrong.

The reasoning of the chromium team is:

Darin, given the number of web sites this would likely break I don't think we want to be this strict. If you disagree then I will re-open this.

I think that there is something to be said about this reasoning, but I am one of those people that wants browsers to be very, very strict... I understand that browsers don't want to "break the web", after all, who remembers the outrage that ensued when microsoft released version 7 of IE. A lot of people blamed IE for their own sloppy coding, breaking bad websites.

Why should this be fixed?

A lot of people write css to work around browser bugs, when they should go out and read the specifications. Very often I see people complain about bugs, they have done something wrong in their HTML. So when I see a reaction like the wontfix by chromium I think that a lot of people still will take the easy way out and choose the hack, instead of learning to do it the right way. Not knowing that they are walking a fine line, utilizing a "feature" in a browser which may be fixed at any moment, thus rendering their fixes obsolete.

So I hope that they will fix this soon, after all building browsers to allow sloppy coding is encouraging that very thing in my opinion. And yes, I know that the "we render anything you code, even our own front page garbage" is what made IE6 the greatest browser in it's time. But in the end it slowed down the web, as people were not encouraged to write proper code, but got away with building crap.

Update

Kyle made an excellent point in his comment. This is a WebKit bug or feature. The browser does not do anything wrong, as this is not being specified. So browsers can do what they want with it. He even makes some good points on how we could be using this. Still I am not conviced and urge people not to use this, as it will come back and bite you somewhere...

Doubled Float-Margin Bug
Peekaboo Bug
IE 6 Duplicate Characters Bug
Internet Explorer and the
Expanding Box Problem
Guillotine Bug
The Float Model Problem
Three Pixel Text Jog
IE and Italics
Inherited margins on form elements
Quirky Percentages In IE6's
Visual Formatting Model
IE/Win Line-height Bug
IE6 Border Chaos
Disappearing List-Background Bug
Unscrollable Content Bug
Duplicate Indent Bug
Escaping Floats Bug
Creeping Text Bug
Missing First Letter Bug
Phantom Box Bug

In this site I use several html5 elements and attributes. One of them is <input type="search" /> which gives me (for instance) a search button on my Iphone. It degrades to an text kinda input so it's backwards compatible.

What it also does is look kinda ugly in safari, with rounded corners and a frigging shadow and so on.

Default rendering in safari 4 os x

Custom rendering

The way to render this is this one line of css:

input[type="search"]{
  -webkit-appearance:textfield;
  /* textfield instead of searchbox */
  border: 1px solid #39c;
  /* and a border of course but that's not relevant :) */ 
}

But for now that's it, on simple line in your css and apple no longers controls the style of your search field and you can style it (semi) consistent over browsers. A complete list of webkit specific styles can be found on Qooxdoo.org.

As I know, one disadvantage is that the search box does not longer appear as the default one in safari. But in my opinion the search box is not in usage as of now, so people are now more baffled by a strange box than they recognize the search box. In the future, however I think that this trick is no longer needed nor wanted.

I recently started using @font-face in a major website. The time has come to free ourselves from the shackles of the webfonts. I got the chance to host the fonts on a amazon s3 cloudfront instance. Really fast and with the 'bullet-proof @font-face' solution of Paul Irish I decided to give it a go.

So I started testing and everything looked very promising, even the FOUT wasn't too bad. But when we got around to implementing it in the real templates for the site, my esteemed colleague Maarten found a flaw.

It seems that the .otf file that we use isn't being read properly in Firefox, but instead gives a weird error.

Failed to load source for: http://wnas.nl/fonts/FrescoStd-Normal.otf 

Safari uses the same .otf file and displays it properly. But with this CSS:

@font-face { 
  font-family:'FrescoStdNormalRegular';
  src: url('http://wnas.nl/fonts/FrescoStd-Normal.eot');
  src: local('no local - Fresco Std Normal Regular'),local('no local-FrescoStd-Normal'), 
  url('http://wnas.nl/fonts/FrescoStd-Normal.woff') 
    format('woff'), 
  url('http://wnas.nl/fonts/FrescoStd-Normal.otf') 
    format('opentype'), 
  url('http://wnas.nl/fonts/FrescoStd-Normal.svg#FrescoStd-Normal') 
    format('svg'); 
}
#test{
	font-family:FrescoStdNormalRegular,courier;
}

FrescoStdNormalRegular,courier;

Firefox, as you can see, just doesn't render the font, can anyone help me and point out what I am doing wrong? Please let me know in the comments...

Update

It seems that this does work on my website, but not locally... Here is a test page where I get two different responses from firefox 3.5.7 on os X 10.6.2.

• on the Imac it says : The resource from this URL is not text: http://wnas.nl/fonts/FrescoStd-Normal.otf
• And the macbook pro says: Failed to load source for: http://wnas.nl/fonts/FrescoStd-Normal.otf

Get the source from here and let me know what happens on your machines through the comments or twitter.

#WIN

Thanks to Jeroen who at least does some research, before asking the rest to help, we have a cause and a solution. On the mozzilla page about font-face it states:

By default, Firefox 3.5 only allows fonts to be loaded for pages served from the same site.

So you should set this in your .htaccess file and you're right as rain.

# example Apache .htaccess file to add access control header
 
<FilesMatch "\.(ttf|otf)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Thanks everybody for helping, I hope someone else benefits from this as well. I just learned something new, the main reason I really like my job!