The (probably not) definitive list of CSS features in non-CSS specs

While most CSS features are defined by the CSS Working Group and either included in CSS Level 2.1, or individual CSS Modules, there are a surprising number squirrelled away in various other specifications. These may or may not have been worked on in conjunction with the CSS WG, but as many probably get overlooked, I thought I’d list them in a blog post so that I can find them later. How many did you know about?

Pointer Events

Spec

http://www.w3.org/TR/pointerevents/

Status

Candidate Recommendation

The touch-action property determines whether or not touches that begin on the element will trigger the default action, such as panning and zooming.

Resource Priorities

Spec

http://www.w3.org/TR/resource-priorities/

Status

First Public Working Draft

The resource-priority property specifies the download priority of the resource associated with the element (such as the image source or background image.) This includes lazy loading, postponing, or regular loading of the resource.

Input Method Editor API

Spec

https://dvcs.w3.org/hg/ime-api/raw-file/tip/proposals/IMEProposal.html

Status

Unofficial Draft

An Input Method Editor is commonly used for East Asian (CJK) languages to assist typing the specified language with a latin keyboard. It can also be used for other languages, such as to assist typing diacritics. When typing, an IME window pops up allowing the user to select from suggested matches.

The various imeproperties specify the size, positioning, and behaviour of the IME window.

Note: The ime-mode property exists in CSS Basic UI Level 3, but included for completeness as it is part of the ime shorthand.

Fullscreen API

Spec

http://www.w3.org/TR/fullscreen/

Status

Working Draft

The :fullscreen pseudo class and ::backdrop pseudo element allows you to style an element and its backdrop (the layer behind the fullscreen element, but on top of the rest of the elements behind it) when in fullscreen mode.

Note: WebKit, Blink, and Gecko browsers support :full-screen rather than the standardised :fullscreen. They each require their vendor prefixes: -webkit- (Chrome, Opera, and Safari), and -moz (Firefox).

Shadow DOM

Spec

http://w3c.github.io/webcomponents/spec/shadow/

Status

Editor’s Draft

When using the ::content pseudo element, the relative selector that follows is scope contained, so that you can only style the elements inserted via the shadow DOM, rather than the entire document.

Note: the Shadow DOM spec previously included the @host at-rule and ::distributed() pseudo element, but these are no longer in the latest editor’s draft.

There are also the Hats, ^, and Cats, ^^, selector combinators, but they are not yet included in the Shadow DOM Editor’s Draft, or any other version of the spec that I could find.

View Modes

Spec

http://www.w3.org/TR/view-mode/

Status

Recommendation

The view-mode media feature can be used with Media Queries to specify how a web site or app is styled when in different visual presentations. For example when it is windowed (think typical desktop apps such as on Windows or Mac with UI chrome, when not fully maximised), floating (the same as above, but without the chrome, such as Widgets or Gadgets), fullscreen (takes up the full screen without any chrome, such as Windows Metro apps or fullscreen video), maximised(full screen but with browser chrome, such as a maximised Windows desktop app), or minimised(when it is minimised but there is still some UI showing, such as a Windows Metro live tile, or “living icon”.)

Note: Opera version based on Presto supported the view-modemedia feature. Support was lost when it switched to the Blink rendering engine in version 15.

SVG

For SVG properties, I’ve removed any that have been moved into a spec produced by the SVG and CSS Working Group (FX task force) to define how they work in both SVG and HTML/XML, such as Masks, Filters and so on. For subsequent SVG versions I’ve only included the new properties unique to that version.

Most of these properties only work in SVG, but a number have since been made to work in HTML/XML in certain browsers.

For support information for SVG properties, I’ve only tested support by checking official documentation, and for the presence of the property in that browser’s developer tool. There are too many to check thoroughly at this time.

SVG 1.1

Spec

http://www.w3.org/TR/SVG11/

Status

Recommendation

Notes:

• Opera lost support for enable-background when it switched to the Blink rendering engine
• image-rendering exists in CSS Images Level 4, but it accepts different values, except the auto value.
• writing-mode exists in CSS Writing Modes Level 3, but it accepts different values
• text-rendering (in some browsers) and a subset of pointer-events can be used in HTML/XML, but there is no CSS specification for these features outside of SVG.
• CSS Fonts Level 3 includes the font-kerning property, which is similar but has different values (except auto) to the kerning property.
• enable-background wasn’t included in CSS Filters level 1. A similar but different property called isolation is included in CSS Compositing and Blend Modes Level 1.
• color-profile was included in an earlier draft of CSS Color level 3
• glyph-orientation-horizontal and glyph-orientation-vertical were in an earlier draft of CSS Text level 3.

SVG 1.2 Tiny

Spec

http://www.w3.org/TR/SVGTiny12/

Status

Recommendation

Note: the display-align, line-increment, solid-color, solid-opacity, viewport-fill, and viewport-fill-opacity properties are supported in Presto versions of Opera. They were dropped when switching to the Blink rendering engine.

SVG 2

Spec

http://www.w3.org/TR/SVG2/

Status

Working Draft

Note: the paint-order property is behind the “svg.paint-order” flag in Firefox. It needs to be enabled for the feature to work.

SVG Parameters

Spec

http://www.w3.org/TR/SVGParam/

Status

Working Draft

SVG Compositing

Spec

http://www.w3.org/TR/SVGCompositing

Status

Working Draft

MathML for CSS Profile

Spec

http://www.w3.org/TR/mathml-for-css/

Status

Recommendation

Notes: The table-baseline property is not actually defined in the MathML for CSS profile spec, but it is referenced in the default CSS style sheet, and is not mentioned in any other W3C specification. Opera previously supported this property until it was dropped when it switched to the Blink rendering engine.