All posts tagged ‘CSS 3’

File Under: Browsers

New IE9 Offers Geolocation, Privacy Controls and More Speed

Microsoft has released the first release candidate for its coming Internet Explorer 9 web browser. IE9 is a major overhaul, bringing much needed speed improvements, better support for web standards, privacy controls and tighter integration with Windows 7.

Overall IE9 RC1 is a huge leap forward for Microsoft, embracing web standards and speeding up the browser. When IE9 is released web developers will finally be able to stop using CSS hacks and start using HTML5 with more confidence. Of course IE8 and IE7 will still be with us for some time to come, but things are looking up.

Curious developers running Windows can download the release candidate from Microsoft. This version of IE9 expands support for semantic HTML5 elements (like <nav>, <section> and <article>), adds more CSS 3 properties and introduces support for the geolocation API.

The additional geolocation support rounds out Internet Explorer’s new HTML5 features. While IE9′s competitors have implemented some of the more experimental APIs (like Web Workers and offline cacheing), IE9 does close the feature gap considerably and is leaps and bounds beyond where IE8 left off.

When it comes to CSS 3 the new IE offers nearly full support, though it still doesn’t understand text-shadow (which is actually been around since CSS 2.1) or the new CSS 3 multi-column text layout tools. On the bright side, IE9 does render border-radius, 2D transforms and new CSS 3 selectors like :first-of-type. For a full rundown of IE9′s HTML5 and CSS 3 features, see our earlier coverage. Also, be sure to head over to the IE9 Test Drive website for some demos that show off IE9′s new standards support.

IE9's CSS 3 support handles border-radius rules

The new IE9 release candidate adds some privacy controls similar to those Mozilla and Google have been adding to their browsers. IE9 will support the Do Not Track HTTP header [Update: Microsoft says that IE9 does not support an HTTP header at the moment, but does offer Tracking Protection Lists which can block cookies, beacons, pixels and more]. IE9 also supports cookie-based blacklists to stop advertisers from tracking your movements around the web.

If you’ve been using the beta releases of IE9, you’ll notice several changes to the look of IE9, including the ability to put tabs back in their own row, rather than next to the address bar, which is the default setting. To give your tabs a bit more breathing room, just right click on the tab bar and select the “Show tabs on a separate row” option.

Top: the default tab arrangement; Bottom: tabs in their own row

This release also adds a new security feature which allows you to turn off ActiveX for all sites and then re-enable it on a site by site basis. ActiveX, a Windows-only “enhancement” that allows webpages to install code on your PC, has long been an excellent way to load up your Windows machine with viruses and other malware. The new controls mean you can turn off ActiveX entirely and avoid malicious code being installed.

Microsoft is also touting IE9′s hardware acceleration improvements in this release. According the IEblog, the release candidate is 35 percent faster than the previous IE9 beta. Indeed, in our informal testing IE held its own with Firefox 4 and Chrome 11. Pitted against stable releases like Firefox 3.6 or Chrome 9, IE9 fares even better.

Microsoft has not yet set an official release date for IE9, though the company’s web-centric MIX conference, which starts April 12, has historically been host to major IE announcements.

See Also:

Transform Your Site With CSS 3

CSS 3 transforms in action

Our friends at TypeKit, the custom web fonts service, have posted a nice CSS tutorial from web developer Andy Clarke. Clarke walks you through the basics of how to use CSS 3′s new two-dimensional transform properties.

CSS transforms allow you to rotate images, create a mirror effect without adding extra images or add some scaling mouse events to your pages. With rules like scale() rotate() and translate(), CSS 3 can do what was once only possible with JavaScript. The final result of Clarke’s tutorial may be a bit too close to Apple’s Coverflow visuals to just cut-and-paste, but the step-by-step walkthrough makes it simple to tweak the look to your liking.

In addition to the transform rules, the tutorial makes use of the oft-overlooked, but very powerful, nth-of-type(n) selector to avoid cluttering the markup with extraneous ids.

Best of all, thanks to widespread support in modern browsers and a little JavaScript help for older browsers, the example code in TypeKit’s walkthrough works in just about every web browser. That said, perhaps the best advice in the tutorial is this gem:

No two browsers are the same, so to make the most from emerging technologies such as HTML5 and CSS3, we need to banish the notion that websites should look and be experienced exactly the same in every browser. We should design around browser differences instead of hacking around them.

See Also:

File Under: HTML5, Web Standards

Join the Early Adopters and Help Make HTML5 Better for Everyone

Whenever we write about HTML5 here at Webmonkey — whether it’s something great, like Microdata, or something not-so-great, like the flaw in WebSockets — there is an inevitable comment or two telling everyone that they should wait until HTML5 is done. Some people think even the W3C doesn’t want you adopting HTML5 just yet.

Of course all those people, including the W3C, are wrong. Not only is much of the HTML5 spec well on its way to being finalized, browsers already support much of it. The level of support varies by browser, but HTML5 is very much here today.

The real reason you should use HTML5 now is that early adopters are already helping to make it better, finding bugs and giving the browser makers a reason to fix them.

Mark Pilgrim’s site Dive Into HTML5 is a fantastic resource for learning HTML5 and it’s written in HTML5. Pilgrim recently pointed out that the site’s use of HTML5 and CSS 3 has “led to bug fixes in at least four browsers and one font.”

If we all waited to use HTML5 until it was “done” we wouldn’t know about those bugs. It’s early adopters — like many Webmonkey readers — who are helping to make the web better by using HTML5 today and helping to discover the parts that don’t work in the real world. Browser bugs aren’t always discovered by reading specs or through stress tests like ACID 3, they’re discovered in the wild, on the web. Finding them now means that than in five or ten years when HTML5 is set in stone, it will have fewer problems.

Naturally we’re not suggesting that HTML5 is right for every website. Mainstream sites don’t want to discover bugs, though that hasn’t stopped big names like Nike from jumping in the HTML5 waters.

Maybe some parts of HTML5, like say WebSockets, aren’t quite ready to be used on the New York Times homepage. But smaller sites using WebSockets are helping to pave the way so that eventually sites the size of the Times can use WebSockets and the rest of HTML5 without worrying about bugs.

Not every site needs to live on the edge, but those that do make the web a better place for all the rest.

[Note to the commenters who will inevitably point out that we don't use HTML5 at Webmonkey: those of us that write for Webmonkey do not also write the code that runs it.]

5 Mosaic photo by Leo Reynolds/Flickr/CC

See Also:

Cool Sites: Nike’s ‘Better World’ Site Embraces HTML5

You might think, given the varying browser support, that no one is using HTML5 yet. But you’re wrong. HTML5 is everywhere you look. Even Nike, which has a history of Flash websites, recently turned to HTML5 to build its new “Better World” website.

The Nike Better World website uses HTML5, CSS 3 and JavaScript to create a unique scrolling storyboard-style experience. The site has received quite a bit of attention in the design community for its unique interface and fancy animations.

It also makes a great lesson in how you can use — and, sadly, now you should not use — HTML5 today.

One of the best ways Better World uses HTML5 is the awesome, and often overlooked, data- attribute. If you’ve ever used a title attribute to pass some data to JavaScript, well, the data- attribute is your new friend. HTML5′s custom data attributes allow you to write semantically valid HTML while, simultaneously, embedding data within the page.

On the Nike site, attributes like data-controller and data-scrolloffset pass information to the JavaScript scrolling function without mucking up the semantics of the page.

The best thing about the data- attribute is that you can define your own syntax — just prefix your attributes with data-. For a great overview of the new data syntax and how you can use it, check out JavaScript guru John Resig’s overview of the data- attribute.

However, impressive as the Nike site is, it also gets some things wrong. While Better World uses many of the new HTML5 tags — like article, section, header, footer and canvas — it isn’t always using them properly.

The prime offender is the ever-confusing section tag, which is scattered about the site somewhat haphazardly. Deciding when you should use section can be a headache (see HTML5 Doctor’s article on when to use the section tag), but one good rule of thumb is — does the element have a heading? In the case of Nike’s site, the answer is often no. In most cases the code would be improved by simply using a div tag.

Despite all the cool new semantically meaningful tags, remember that there’s nothing wrong with good old div. In fact, that’s one of the things it’s for — elements that don’t have semantic value.

Nitpicking aside, the Nike site is great example of a big company pushing the envelope with HTML5. Our only real complaint is that Nike is still relying on Flash for video — ironic considering that HTML5 video is one of the more common examples of HTML5 on the web today.

See Also:

File Under: CSS, Fonts, Visual Design

Good Web Typography Is Easy With Type-a-File

The web is awash with CSS frameworks. But, while frameworks can be great for prototyping and quick mockups, they’re often overkill for most projects. It’s also pretty rare to find a framework that meets all of your design needs.

If you’re just looking for a way to get some great typography on your site, but don’t need a grid or other tools that often come with a full-blown framework, check out Type-a-File. Type-a-File isn’t exactly a framework, it’s more specific — a set of typography styles that you can adapt into your CSS.

Type-a-File is the work of designer Russ Maschmeyer and currently offers eight different typographic style sheets, designed, in Type-a-File’s words, to “give your web typography a head start.”

The style sheets takes advantage of some of the new features in CSS 3 like column-count and border-radius, as well as services like TypeKit for fancy fonts. Fortunately, the vast majority of the rules aren’t based on the still-nascent CSS 3 spec, so nearly all the effects will work in older browsers as well.

In addition to basic rules for typographic elements — h1-6, p, lists, cite and so on — Type-a-File has a few classes you can apply to pull quotes, create “kickers” or “sidenotes” and change default headings.

Type-a-File is released under a Creative Commons Attribution license, so if you’d like to take one of the eight example style sheets and use it to build something of your own you’re feel to do so. You can even submit it back to Type-a-File for inclusion on the site.

Photo by the four elements/Flickr/CC

See Also: