Internet Explorer 9

Internet Explorer 9 logoI’ve had a little bit of an opportunity to play around with Internet Explorer 9, and I’m still not sure if I like it or hate it. I am excited about the possibility of natively using some CSS3 and HTML5 in Internet Explorer, but I’m also disappointed by the lack of specific CSS3 elements.

On the plus side, IE9 does support almost all of the new CSS3 pseudo-classes (nth-child(), nth-of-type(), etc.), 2D transforms, almost the entire background module (multiple background images, background-clip, background-size, etc.), border-radius (rounded corners), box-shadow and RGBA colors.

Cross-Browser Gradient Backgrounds

One of the great new features coming with CSS3 is the ability to use native gradient backgrounds. In addition to saving server resources (no need to call an external image), the gradients tend to be more vibrant and faithful to the original colors than any external images.

So far, none of the modern browsers have agreed on which method to use to implement the gradients, so you will need to utilize a few different methods in order to get it to work in multiple browsers.

Google Fonts

Google Font LogoOne of many new features in CSS3 that has the Web development and design world clamoring is the introduction (well, reintroduction and standardization, really) of embedded fonts. Commonly referred to as the @font-face property, CSS3 will allow you to use non-standard fonts on your Web pages without having to resort to using images. Instead, you’ll upload the font file (in most cases, a Truetype Font [TTF] file) to a space on the Web, then use the @font-face property to import that font file as a resource for the page.

Chrome Adds More CSS3 Support

I’m not sure when this was implemented, and I don’t know what else was implemented at the same time, but I noticed the other day that Chrome now supports the standard border-radius CSS3 property, rather than requiring the -webkit- prefix.

If you’re using Chrome (or the new IE9 platform preview), this text should be inside of a box with a black, rounded border.

Has this also been implemented in the new versions of Safari? Any ideas what other CSS3 properties might have been added with the latest updates to Chrome?

A Look Into HTML5 and CSS3

I spent most of the day today in a conference session dealing with the new elements that will be coming with the future of HTML5 and CSS3, presented by Molly Holzschlag. The session was extremely informative, and we discussed some really interesting topics. In addition to our discussion on HTML5 and CSS3, we discussed quite a bit about accessibility, browser limitations, the reasons that things are the way they are (doctype declarations, for instance) and how things might be in the future.

Molly made it very clear throughout the session that she does not own a crystal ball, so she obviously can’t tell us exactly how or when the final CSS3 or HTML5 specs will be completed and approved. However, she did give us some insight into the elements that have already been implemented and the elements that are in the process of being implemented in specific browsers. In this article, I will try to give a quick overview of some of the things she mentioned. Most likely, you’ve heard of most, if not all of these. However, I just wanted to put some of them together in one place.