CSS User Interface

Back to the index.

CSS3 User Interface

The CSS User Interface module is kind-of a Miscellaneous module, where stuff that couldn’t be treated in any other module is gathered.

This is the desktop table. See also the mobile table.

The User interface spec contains several selectors, which are treated in the selectors section.

Last major update on 9 March 2013.

I'm writing a CSS book.

Selector IE5.5 IE6 IE7 IE8 IE9 IE10 FF 19 Win FF 19 Mac Safari 6.0.2 Mac Chrome 25 Win Chrome 25 Mac Yandex 1.5 Mac Opera 12.14 Win Opera 12.14 Mac
box-sizing
No Yes -moz- Yes Yes Yes

In theory the default box-sizing is content-box. In practice it’s border-box for buttons and selects, and in IE and Firefox for tables (though not for trs, tds, and so on.) See the second test.
content
for :before/:after 		No Yes Yes Yes Yes Yes
cursor
Change cursor style 		Incomplete Yes Yes Yes Yes Yes

The only remaining weirdness is that of the Windows browsers, only IE/Edge supports contextmenu. The rest doesn’t. I don’t know why.
invert value for outline
Accessibility feature. Makes sure the outline always has good contrast with the background. 		No Yes Yes No No No Yes
outline
A sort of border, but it doesn’t count for the box model. 		No Yes Yes Yes Yes Yes
outline-offset
To draw the outline away from the border 		No Yes Yes Yes Yes
resize
Allow the user to resize an element. 		No Yes Yes Yes No

It gets interesting when you factor in min/max-width/height. Turns out Firefox and the WebKit-based browsers have different algorithms:

  • Firefox constrains the resize only when a min or max is defined: then the element cannot be resized above the max or below the min.
  • The WebKit-based browsers constrain the resize by the actual computed width and height of the element and, if present, the max-width or -height.
text-overflow
Shows ellipsis characters when a text flows outside its box. 		No Almost Yes almost almost almost

This property only makes sense when a box has white-space: nowrap and an overflow other than visible.

  • The string value is only supported by Firefox.
  • When the element has overflow: auto and you scroll it, IE8-10 and the WebKit-based browsers incorrectly treat the ellipsis as characters that scroll with the rest of the text. Firefox and IE7(!) show the actual text, while the ellipsis remains in place at the end of the line.
Selector IE5.5 IE6 IE7 IE8 IE9 IE10 FF 19 Win FF 19 Mac Safari 6.0.2 Mac Chrome 25 Win Chrome 25 Mac Yandex 1.5 Mac Opera 12.14 Win Opera 12.14 Mac

Not supported

The following properties are not supported by any browser.