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 mobile table. See also the desktop 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.

[an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive]
box-sizing
 Yes Alt Yes Yes Alt Yes Alt Yes Alt Yes Yes Alt Yes Yes Alt
Alt
Needs prefix

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 		Yes Almost Yes Yes Almost Yes Yes Almost Yes Yes Almost Yes Yes
Almost
Browser does not support none.
invert value for outline
Accessibility feature. Makes sure the outline always has good contrast with the background. 		No No No Yes No No Yes No No Yes No
outline
A sort of border, but it doesn’t count for the box model. 		Yes Yes No Yes Yes Yes Yes Yes
outline-offset
To draw the outline away from the border 		Yes Yes No Yes Yes Yes Yes No Yes
resize
Allow the user to resize an element. 		No No No No No No No Sort of

To my surprise Firefox supports it. It’s also a showcase of why the interface doesn’t work on touchscreens.
text-overflow
Shows ellipsis characters when a text flows outside its box. 		Almost Almost Minmal No Almost Almost No Almost Almost Almost Yes

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, IE and the WebKit-based browsers incorrectly treat the ellipsis as characters that scroll with the rest of the text. Firefox shows the actual text, while the ellipsis remains in place at the end of the line.
  • Opera Mini supports it only on iOS.

Not supported

The following declarations are supported on some desktop browsers, but on no mobile browser:

Tested browsers

[an error occurred while processing this directive]