Bite-sized CSS & HTML nuggets

Auto-hiding scrollbars in IE10

Was just looking for a way to make the scrollbars in Internet Explorer a little less obtrusive, and I found this.

-ms-overflow-style: -ms-autohiding-scrollbar;

This gives you scrollbars that appear during touch and keyboard interactions, and fade out again after a few seconds. Nice.

Unprefix express in full swing

The big vendor prefix discussion comes and goes in waves, but one conclusion that always pops up is that these prefixes should have a shorter lifespan. Of course browser makers may shift the responsability to specification writers, arguing that specs take too long to reach Candidate Recommendation (CR) status. Well, it seems the unprefix express is finally picking up steam.

A few weeks ago we heard about unprefixed transitions, transforms, animations, gradients, IndexedDB (and more) in the next Internet Explorer, and this week the Firefox team anounced exactly the same.

This is all great news. Even better, as Lea Verou noticed:

Keep in mind that this means you don’t have to use the -ms- prefix at all for transitions, animations and gradients, since no stable build of IE was ever released that requires it.

On filters, -ms-filters and filters

In CSS, there have been filters for a long time. Microsoft first introduced them for Internet Explorer 4, producing a range of visual effects and transitions. Also called DirectX filters, we still occasionally use them today, for things like fallbacks for CSS gradients. They are proprietary though, and were never picked up by other browser vendors.

As a result, the Internet Explorer team decided to add the -ms- prefix in 2009. But soon after these filters were deprecated, and in IE10 they won’t even be supported no more. So you really never need to bother with the -ms-filter syntax, just use filter in those rare cases.

In the meantime, the filter property has been reborn however, this time for SVG filter effects applied in CSS. Partially supported in Firefox since version 3.5, they’re currently being formally specified, and also being implemented in Internet Explorer 10 and WebKit. These CSS filter effects will allow some very exciting Photoshop-like filters, like grayscale, sepia, blur, saturate, brightness, and much more. Coming soon!

Working with 8-digit hex colors (aRGB) in Internet Explorer filters

You’ve probably come across the use of CSS filters as fallback techniques for RGBa colors or CSS gradients for example. They have their limitations and implications, but they do come in handy sometimes. They look something like this:

.awesomesauce {
    background: rgba(0,0,0,.6);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);

Maybe you’ve noticed these weird colors that have 8 instead of the usual 6 hexadecimal digits. Well, these are aRGB colors, used in Internet Explorer filters but also in Android development among others.

The syntax is pretty easy: first a pair of digits for the alpha channel and then 3 pairs for the RGB channels, just like regular hex colors. But instead of specifying alpha as a percentage or a floating point like for RGBa colors, it is defined in a range from 00 to FF. To calculate the hex value from a decimal number in JavaScript:

hexAlpha = Math.floor(decimalAlpha * 255).toString(16);
// so:
// rgba(255,255,255,0) = #00ffffff
// rgba(0,0,0,.5) = #7f000000
// rgba(255,255,0,1) = #ffffff00 = #ffff00 = #ff0

To make it even easier, there are several RGBa to aRGB convertors out there.

IE doesn’t like inline style blocks in AJAX responses

Having inline style blocks in an AJAX response is pretty problematic for Internet Explorer. If the style element is right at the start of the response, it’s ignored entirely. The solution is to put any other element before the style tag – check the demo.

But even then it’s not bug free. Using the background fallbacks technique (serving a solid background color to IE and gradients to other browsers) I ended up with no background at all. I had to explicitly specify the solid color in the gradient rules as well – see demo.

Internet Explorer… sigh

Show empty cells in data tables with empty-cells: show;

This is a simple old trick, but still an issue I see cropping up all too often: people putting non-breaking spaces ( ) in empty cells in data tables, so the background and borders are rendered. Don’t. Just put this in your reset.css:

table { empty-cells: show; }

Works fine in all browsers. Internet Explorer 7 and lower even have show as the default – unalterable – value.

Positioned floats (aka CSS3 floats)

One of the new features in Internet Explorer Platform Preview 2 that didn’t get a lot of attention is support for positioned floats. It’s the short name for a specification called CSS Floats and Positioning Level 3, proposed in May by Microsoft and Adobe. You can tell why these two companies submitted the idea, as it’s the translation of a common feature of word processing and desktop publishing apps: text wrap.

Instead of limiting elements to floating either to the left or right relative to their position in the document flow, positioned floats can be positioned at a specified distance from the top, bottom, left, or right sides of a containing block, while remaining part of the document flow.

How does it work? A new value is proposed for the float property: positioned – which becomes -ms-positioned in Microsoft’s first implementation. If you apply this in conjunction with position: absolute, you can position an element while it still affects the flow of the page. So inline content will not be overlapped by an absolutely positioned float, it will wrap around it.

It’s a pretty interesting answer to a common problem. It remains to be seen if the W3C deems it a good and complete solution however. There’s more details about the implementation of positioned floats on the IE10 Platform Preview docs.

Spaced out & stretched background images

Talking about the CSS Backgrounds and Borders Module Level 3, have you ever heard of the space and round values for background-repeat?

The spec says this about space:

The image is repeated as often as will fit within the background positioning area without being clipped and then the images are spaced out to fill the area.

And round will stretch your image:

The image is repeated as often as will fit within the background positioning area. If it doesn’t fit a whole number of times, it is rescaled so that it does.

Support is limited, but both Opera 11+ and IE 9+ are first of class. Demo - Bugzilla bug for Firefox