Mozilla implements @font-face

Mozilla implements @font-face

Mozilla employee John Daggett has provided some try‐out builds of Firefox with support for the @font-face from CSS3’s web-fonts module. Currently available for Windows and Mac only—no Linux build yet—there remain several caveats as described in his comment on bug 70132, the most important of which being that the same‐site origin restriction is turned on by default, which means that most examples on the web will not work until you turn it off.

CSS3 Pseudo-Class Selectors Emulation in Internet Explorer

CSS3 Pseudo-Class Selectors Emulation in Internet Explorer

Keith Clark, an independent web developer from the UK, has developed a JavaScript solution to IE’s CSS3 shortcomings in relation to CSS3 selectors. CSS3 selectors became the first W3C module to reach proposed recommendation status back in December 2009.
His ie-css3.js project (currently in beta) allows Internet Explorer, versions 5 through 8, to identify CSS3 pseudo-class selectors and render any style rules defined with them. All this is achieved by simply including the script, along with Robert Nyman’s DomAssistant, within the head element of your web pages.

Supported Pseudo-Classes

• :nth-child
• :nth-last-child
• :nth-of-type
• :nth-last-of-type
• :first-child
• :last-child
• :only-child
• :first-of-type
• :only-of-type
• :empty

Limitations of the project

• Style sheets MUST be added to the page using atag. Page level stylesheets or inline styles won’t work. You can still use @import in your style sheets.
• Style sheets MUST be hosted on the domain as the page.
• Style sheets using file:// protocol will not work due to browser security restrictions.
• The :not() pseudo-class is not supported.
• The emulation is not dynamic. Once the styles are applied they are fixed so changes to the DOM won’t be reflected.

How does it work?

ie-css3.js downloads each style sheet on the page and parses it for CSS3 pseudo-class selectors. If a selector is found it’s replaced by a CSS class of a similar name. For example: div:nth-child(2) will become div._iecss-nth-child-2. Next, Robert Nyman’s DOMAssistant is used to find the DOM nodes matching the original CSS3 selector and the same CSS class is applied them.
Finally, the original stylesheet is replaced with the new version and any elements targeted with CSS3 selectors will be styled.

Bypassing IE’s CSS parser

In accordance with the W3C specs, a web browser should discard style rules it doesn’t understand. This presents a problem — we need access to the CSS3 selectors in the style sheet but IE throws them away.
To avoid this issue each style sheet is downloaded using a XMLHttpRequest. This allows the script to bypass the browsers internal CSS parser and gain access to the raw CSS file.

Find out more and Download

ie-css3.js is released under the MIT License and can be downloaded from the project page on Keith Clark’s website.
You’ll also need to download Robert Nyman’s DOMAssistant.

Transcending CSS

For web designers who know some code there is plenty of forward thinking material about the importance of semantic HTML; for coders with an eye for design there is lots of food for thought about colour, style and inspiration; for everyone, there are some genuinely innovative tips on using CSS to tie it all together.

The mark of a good book is that you learn something when you read it (Jeffrey Zeldman’s Designing With Web Standards is a good example); I’ve been coding HTML and CSS for eight years and there were still tutorials in here that made me think afresh about the subject, and some tips that I’ve assumed into my arsenal.
Of most interest to readers of this site will be the section on CSS3. Included are a look at some of the new selectors, the background and border modules, multi-column layouts and, most excitingly, a way to see the advanced layout module in action.
There are plenty of examples and exercises, and the book is lavishly laid out and illustrated. That alone would make it a good buy, but the look at CSS3 is what really made it for me.
I’m presuming by the fact that you’re reading this site that you’re interested in the evolution of standards and how web development is moving forward; that being the case, I can wholeheartedly recommend this book to you.

CSS3 Resource: Preview Custom Web Fonts with Font Dragr

CSS3 Resource: Preview Custom Web Fonts with Font Dragr

Font Dragr is a HTML5/CSS3 powered web app for testing custom web fonts. The app allows you to drag and drop your truetype (ttf), opentype (otf), scalable vector graphics (svg) or Web Open Font Format (WOFF) fonts into the webpage for an instant preview of how the font will be rendered in the browser, you can even edit the example text.



This useful app allows web designers to preview how embeddable fonts will render in their target browsers without having to code a single line of html/css and without having to upload any files via ftp. Unfortunately, however, at present compatibility is limited to Firefox 3.6+, due to the apps reliance upon Firefox’s drag and drop functionality, however the author promises compatibility with other browsers as they add support.
The app also boasts a number of CSS3 features in it’s design including:

• Custom fonts with @font-face
• Gradients
• Rounded corners using border-radius
• Drop shadows with text-shadow & box-shadow
• Attribute and pseudo selectors
• Multiple border colours
• Box model adjust using box-sizing

Give it a try for yourself at: http://labs.thecssninja.com/font_dragr/

Online Tools for Cross-browser CSS3 Rule Generation

Online Tools for Cross-browser CSS3 Rule Generation

This week has seen the announcement of a couple of new online tools for generating cross-browser CSS3 rules, CSS3 Please! and CSS3 Generator.
CSS3 Please!, produced by Paul Irish and Jonathon Neal, aims to simplify the design process by allowing designers to enter one value, and have this instantly synced and normalised for each vendor-specific prefix, with the corresponding code generated automatically.
The tool offers support for border-radius, box-shadow, linear-gradients, rotation, rgba colors and @font-face, with work underway on support for skew and scale. In some circumstances the tool also offers support for Internet Explorer using IE filters to replicate the same effects as achieved by CSS3 properties. CSS3 Please! has been gaining a significant amount of interest around the blogosphere since its launch earlier this week.

This week has seen the announcement of a couple of new online tools for generating cross-browser CSS3 rules, CSS3 Please! and CSS3 Generator.
CSS3 Please!, produced by Paul Irish and Jonathon Neal, aims to simplify the design process by allowing designers to enter one value, and have this instantly synced and normalised for each vendor-specific prefix, with the corresponding code generated automatically.
The tool offers support for border-radius, box-shadow, linear-gradients, rotation, rgba colors and @font-face, with work underway on support for skew and scale. In some circumstances the tool also offers support for Internet Explorer using IE filters to replicate the same effects as achieved by CSS3 properties. CSS3 Please! has been gaining a significant amount of interest around the blogosphere since its launch earlier this week.


Another online CSS3 rule generator to brought to light this week, although perhaps not so well known, is Randy Jensen’s CSS3 Generator, which offers a drop down menu with subsequent options to generate and customise rules for a wide selection of CSS3 properties and functionality including border-radius, shadow, text-shadow, rgba colors, @font-face, multiple columns, box sizing and more.

Whilst these are not the first online rule generators for CSS3, westciv.com for example offers several online tools for generating rules for a selection of CSS3 properties, CSS3 Please! and the CSS3 Generator do however offer two of the most comprehensive solutions to date, particularly with regard to cross-browser compatibility, and with both still being in their infancy I’m excited to see how they develop in the future.

CSS3 Selectors Test

Is your browser compatible?

After starting the testsuite it will automatically run a large number of small tests which will determine if your browser is compatible with a large number of CSS selectors. If it is not compatible with a particular selector it is marked as such. You can click on each selector to see the results, including a small example and explaination for each of tests.
Because it is technically not possible to simulate certain user interactions the test is limited to selectors that are not dependant on user interactions. So this testsuite does not include tests for the following selectors: :hover, :active, :focus and :selection.

Start the test…

CSS3 Previews

Many exciting new functions and features are being thought up for CSS3. We will try and showcase some of them on this page, when they get implemented in either Firefox, Konqueror, Opera or Safari/Webkit.
Here they are: