Monthly Archives: February 2013

Internet Explorer 10 on Windows 7

Over on the IEBlog Microsoft just announced the official release of Internet Explorer 10 for all Windows 7 users. This is tremendous news considering the great deal of support for web-standards that Internet Explorer 10 has over Internet Explorer 9. Apparently there a number of serious performance enhancements done as well.

All Windows 7 users (well, assuming they have a legit copy of Windows 7 I presume) can download the latest browser from Microsoft today, and begin to participate in the more modern web. Anybody running the Release Preview of IE10 on Windows 7 will be auto-updated today, and in weeks to come we will see instances of IE9 auto-update to IE10.

This is a good day for the web!

Flexible Browsers

I overheard a comment a few days ago that a friend made regarding the default layout of Internet Explorer; namely its placing of the address bar inline with tabs. This results in reduced space for tabs, thus reduced title lengths, thus reduced efficiency managing multiple tasks in parallel.

Chrome, on the other hand, places the tabs above the address bar, giving the impression the address bar is part of the tab currently-opened tab. Firefox, and Opera both also place the tabs above the address bar. Every browser appears to write in stone their tab-placement – though Internet Explorer appears to show the most flexibility.

Upon exploring Internet Explorer following my friends comments, I soon found that I could resize the address bar, re-arrange the stop/refresh buttons, drop tabs down onto their own line (or leave them inline), reduce certain toolbars down into command buttons to minimize space-used. Needless to say, I was pretty impressed with just how much flexibility I found in Internet Explorer.

Here are a few arrangements I went through:

Exploring Varation in Internet Explorer's Layout

Exploring various customizations of the address bar, tabs, and more in Internet Explorer.

As previously mentioned, the above shows the resizing of the address bar, shifting of the stop/refresh buttons from the right over to the left (easier to avoid accidentally clicking the Compatibility View button), dropping tabs onto their own line (you can leave them inline, if that floats your boat), collapsing toolbars like the LastPass one into the command region, and making it inline with the favorites.

Of the four browsers I checked, Chrome appears to be the most rigid. As for customization, you can change the theme, but this is really not much more than swapping out a background image on browser itself. You can’t change the address bar width (well, you can resize the add-on bar, which results in a longer/shorter address bar), the placement of the tabs, the locality of the buttons or anything. You can, however, toggle the “Home” button on and off.

chrome-appearance

Both Firefox and Opera have really impressive options for customizing your toolbars, but that might be a degree of control that few people enjoy. I personally explored it, but didn’t find it too appealing. Also in Firefox you can disable tabs until you explicitly request to open a link in a second tab. This too reduces used-space around the “chrome” of the browser.

Opera sports an even more advanced set of options for Tab Bar Placement. While tabs at are traditionally at the top of the content (following their real-world exemplar of manila folders), you can place them on any side of the viewport in Opera. The changes of the layout are pretty drastic, so I apologize for the disorienting effect of the following gif:

Tab Bar Placement in Opera.

Tab Bar Placement in Opera.

My take-away is that Chrome is nice on the eyes, but far too rigid with the layout options. Opera and Firefox go to the other extreme, and drop enough tools in your lap that you’d need an engineer’s manual to truly understand the power you’ve been given. Internet Explorer hits closest to the sweet spot in my sincere opinion. While I wish Internet Explorer had a few features we’ve come to love in its competition, I am happy with the degree (and limits) of flexibility Microsoft has chosen to provide.

Repeating Lateral Text Shadows

I’ve wanted to do this effect for some time now. It consists of one or more lines of text with variable indentation, and seemingly ever-repeating washed out copies of the text on both sides running off screen.

Decided to use text-shadow to implement it, though support is not as broad as I’d like to see. The primary pain in this is with the offset for the text-shadows. Due to the varying length of each line, you have to provide specific offsets for each line having the effect. This could a lot less painful if it were to be built with a preprocessor.

I’ve uploaded the demo over at Dabblet, JSFiddle, and CodePen. And for those who don’t have a browser that supports text-shadow, here’s a screenshot of the result:

shadows

One really neat side-effect of this approach is that because it uses shadows, it inherently gives off a responsive feel; in the demos above you can see that it extends as far left and right as its parent permits.

Update: Now Animated using @keyframes