Web fonts and CSS features - a simple demonstration | Hacker News Reader

Web fonts and CSS features - a simple demonstration

hacks.mozilla.org

22 pointsandreyf12 comments

Open articleView on HN

This is how simple it should have been from the beginning.

Lets all thank M$ for holding the web in darkness for a decade.

Lets all thank Mozilla for giving the web back to the users.

Lets all thank safari, opera and chrome for their support.

(Special thanks to opera for always being a step forward)

Now, lets all keep working on improving the web more, we already lost a decade and we can not spend another one mourning the time lost.

Lets get rid of css -moz and -webkit hacks already.

Lets move SVG forward, canvas is already here.

And bring WebSockets to live, there is a whole new world awaiting...

M$ deserves some credit for supporting CSS long before other browsers did, as well as AJAX. But launching IE8 without canvas, border-radius, and web fonts is pretty sad.

Lets get rid of css -moz and -webkit hacks already.

They aren't hacks. They are the official way of providing extentions whose behavior is not yet part of a finalized standard.

It is my understanding (which may be incorrect) that -moz and -webkit is the way that it's supposed to be done, in compliance with standards. See vendor specific keywords here:

http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords

The idea is that by identifying them with a specific browser, new features can be tested by vendors first before moving into the main standard. This is much, much better than some sort of 'silent extension' where one browser treats some type of tag as different without being explicit about it being for one particular browser.

The demo also works in Safari 4 on a Mac.

and on Windows.

<blink>Aren't browser-specific features one of the things that mozilla was supposed to cure?</blink>

this is in the css3 spec and is already implemented by ie and webkit.

http://webkit.org/blog/124/downloadable-fonts/ http://www.css3.info/preview/web-fonts-with-font-face/

I think blhack is referring to the -moz-border-radius selector that only works in Firefox. One could use the CSS3 selector, border-radius, but that is not in the article.

Is it just me, or does the second font there give an optical illusion that it's moving?

Yes, the demo works in Safari 4 too. Opera 10 on a Mac only changes the third font from the left, though. Wonder why?

Reply on news.ycombinator.com