Microsoft has updated its modern.IE website with some new tools for testing sites in IE 10 and earlier versions of Internet Explorer.
Launched earlier this year, modern.IE aims to simplify the sometimes arduous process of getting websites to work in older versions of Microsoft’s Internet Explorer web browser. The site also serves to promote web standards and help developers avoid mistakes like only supporting WebKit browsers — roughly the modern equivalent of the regrettable “works best in IE6″ websites of 2001.
Today’s updates for modern.IE address the most common user suggestions and include some new virtual machines for testing IE10 on Windows 7 and IE8 on Windows XP, better results from the site scanner (which now handles URLs behind a firewall) and some more translations.
The big news for Mac developers though is that Microsoft is offering a limited number of “Windows QuickStart kits” for Mac — which consist of Parallels Desktop 8 and Windows 8 on a USB stick — in exchange for a $25 donation to charity (plus $8 shipping). That’s a pretty awesome deal and as of this writing the site has slowed to a crawl, presumably under the heavy load of interested developers.
Microsoft has also announced a new partnership with the Webby Awards to create the new Webby Award Winners Gallery and Archive. The site showcases Webby nominees and winners all the way back to 1997. The design is responsive and takes advantage of some IE 10-only features, like touch events, but it works in all modern browsers as well.
Amazon has quietly joined the ranks of cloud-based file syncing services like Dropbox, Google Drive and Microsoft’s SkyDrive. The company’s Amazon Cloud Drive — previously limited to a rather primitive web-based interface — now offers desktop file syncing tools like those found in Dropbox.
To test out the new Cloud Drive syncing, grab the new desktop app for Windows or OS X (sorry Linux fans, currently there is no desktop client for Linux).
Once you’ve installed the new Cloud Drive app, you’ll find a new folder on your drive — drop whichever files you’d like to sync into that folder and they’ll automatically be sent to Amazon’s servers. You’ll then have access to them on any computer with Cloud Drive installed and through the Cloud Drive web interface, though what you can do with files in the web interface is extremely limited.
It’s worth noting that the Cloud Drive app requires Java. As our friends at Ars Technica point out, that means users with newer Macs will be prompted to install Java as well (the Windows app comes with Java bundled).
There’s also no mobile apps for any platform (there is an Android Photo app, but all it does is send photos from your phone to Cloud Drive). In fact, while Cloud Drive will sync files between desktops, beyond that there isn’t much to see yet.
Part of the appeal of any web-based sync tool is ubiquitous access, not just via the web but in your favorite mobile apps as well and in that space Dropbox clearly has a huge lead over Cloud Drive.
Amazon offers 5GB of Cloud Drive storage for free, with additional storage available at roughly $.50/GB, which is down from the $1/GB price back when Cloud Drive first launched. That’s on par with SkyDrive’s pricing and roughly half the price of Dropbox. In this case though — at least right now — you get what you pay for. Amazon has the makings of a Dropbox competitor but it still has a lot of catching up to do.
HTML5 and CSS 3 offer web developers new semantic tags, native animation tools, server-side fonts and much more, but that’s not the end of the story. In fact, for developers slogging away in the web design trenches, one of the most promising parts of CSS 3 is still just over the horizon — true page layout tools.
While it’s possible to create amazingly complex layouts using tools like CSS floats, positioning rules and the odd bit of JavaScript, none of those tools were actually created explicitly for laying out content, which is why it’s amazingly complex to get them working the way you want across browsers.
Soon, however, you’ll be able to throw out your floats and embrace a better way — the CSS Flexible Box Model, better known as simply Flexbox. Flexbox enables you to create complex layouts with only a few lines of code — no more floats and “clearfix” hacks.
Perhaps even more powerful — especially for those building responsive websites — the Flexbox order property allows you to create layouts completely independent of the HTML source order. Want the footer at the top of the page for some reason? No problem, just set your footer CSS to order: 1;. Flexbox also makes it possible to do vertical centering. Finally.
We’ve looked at Flexbox in the past, but, unfortunately the spec has undergone a serious re-write since then, which renders older code obsolete. If you’d like to get up to speed with the new syntax, the Adobe Developer Blog recently published a guide to working with Flexbox by developer Steven Bradley.
Bradley walks through the process of using Flexbox in both mobile and desktop layouts, rearranging source order and elements to get both layouts working with a fraction of the code it would take to do the same using floats and other, older layout tools. The best way to wrap your head around Flexbox is to see it in action, so be sure to follow the links to Bradley’s demo page using either Chrome, Opera or Firefox 20+.
For some it may still be too early to use Flexbox. Browser support is improving, but obviously older browsers will never support Flexbox, so bear that in mind. Opera 12 supports the new syntax, no prefix necessary. Chrome supports the new syntax, but needs the -webkit prefix. Like Opera, Firefox 20+ Firefox 22 supports the unprefixed version of the new spec. Prior to v22 (currently in the beta channel), Firefox supports the old syntax. IE 10 supports the older Flexbox syntax. Most mobile browsers support the older syntax, though that is starting to change. [Update: Mozilla developer Daniel Holbert, who is working on the Flexbox code in Firefox, wrote to let me know that the Flexbox support has been pushed back to Firefox 22. Actually the new Flexbox syntax is part of Firefox 20 and up, but until v22 arrives it's disabled by default. You can turn it on by heading to about:config and searching for layout.css.flexbox.enabled pref. Set it to true and the modern syntax will work.]
So, as of this writing, only two web browsers really support the new Flexbox syntax, though Firefox will make that three in the next month or so.
But there is a way to work around some of the issues. First off, check out Chris Coyier’s article on mixing the old and new syntaxes to get the widest possible browser support. Coyier’s methods will get your Flexbox layouts working in pretty much everything but IE 9 and below.
If you’re working on a personal site that might be okay — IE 9 and below would just get a simplified, linear layout. Or you could serve an extra stylesheet with some floats to older versions of IE (or use targeted CSS classes if you prefer). That defeats some of the benefits of Flexbox since you’ll be writing floats and the like for IE, but when usage drops off you can just dump that code and help move your site, and the web, forward.
Unreal 3 engine in Firefox. Screenshot: Webmonkey.
Mozilla has partnered with Epic Games to bring the Unreal 3 gaming engine to the web. The result is a high-end gaming engine that could change the way you think of web-based games.
The Unreal 3 engine has previously been ported to Flash, but this is the first time a plugin-free (and therefore mobile-friendly) version has been built for the web.
Mozilla is hoping this project will help turn the web into a more serious gaming platform capable of running top-tier console titles.
Combining WebGL, Emscripten, a tool for compiling C++ apps into JavaScript, and the brand new asm.js, Unreal 3 for the web can, according to Mozilla, “rival native performance.”
While the Unreal 3 port is incredibly cool, there are still some stumbling blocks on the path to the web as a top-tier gaming platform, not the least of which is that load times for most games would be massive. Think hours, not minutes, to stream the complex graphics from a server to your mobile device — probably not something anyone particularly wants to sit through.
In other words, while Mozilla and Epic have made some impressive progress bringing Unreal 3 to JavaScript, it’s still going to be a while before you’re playing your favorite console games on the web.
However, Mozilla says it is “working with premium game publishers such as Disney, EA and ZeptoLab who are using the same technology to bring performance optimizations to their top-rated games.” The company is also hoping other browsers will make it possible to run the Unreal engine in their own JavaScript engines. The Chromium project is already discussing just how to do it.
For more on the project and to catch a glimpse of Unreal 3 running in the browser, check out the video below.
Building responsive websites means that your design has to adapt to different screen sizes. We’ve covered a number of ways to do that in the past, including working with percentage widths, em-based type and other flexible techniques of responsive design.
There’s another way to achieve flexibility that doesn’t involve keeping track of ems or percentages — the new CSS REM unit. REMs are just like ems — REM stands for Root Em — but instead of being relative to the parent element like Ems, REMs are relative to the document root’s font size. Most of the time that means the html element.
We’ve previously looked at REMs as a way to achieve fluid typography, but REMs can help with more than just type sizing.
Mobify’s Roman Rudenko has an article on CSS-Tricks that shows how to use REM units to scale specific page elements while leaving others unaffected. Rudenko even shows how you can use REM units as a replacement for the very powerful, but not very well supported, viewport width unit.
For those wondering why you might want to resize some elements and not others, here’s Rudenko’s use case:
This style of sizing can be useful for user-driven customization, or to adapt layouts for cases that require secondary elements to be more touchable (tablet) or visible (TV). Without REM, every adjustable element would have to be resized separately.
This technique can be applied to whole pages as well. For example, if your type is all sized in REMs and you want it to be a bit larger as screen sizes get bigger, all you need to do is adjust the font size on the html element with each media query and all your REM-sized type will get bigger based on that single line of code.
Browse Our Tutorials
Cheat Sheets
Color Charts
Cut & Paste Code
