Generated Content by David Storey

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
Properties
Property Support
Firefox Safari Opera Chrome IE
touch-action No No No No Yes

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
Properties
Property Support
Firefox Safari Opera Chrome IE
resource-priority No No No No No

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
Property
Property Support
Firefox Safari Opera Chrome IE
ime No No No No No
ime-align No No No No -ms-
ime-mode * Yes No No No Yes
ime-width No No No No No
ime-offset No No No No No

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
Pseudo classes and elements
Property Support
Firefox Safari Opera Chrome IE
:fullscreen pseudo-class Alt Alt Alt Alt -ms-
::backdrop pseudo-element No No No No -ms-

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
Pseudo elements
Pseudo element Support
Firefox Safari Opera Chrome IE
::content No No No No No

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
Media features
Media feature Support
Firefox Safari Opera Chrome IE
view-mode No No Dropped No No

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
Properties
Property Support
Firefox Safari Opera Chrome IE
color-interpolation Yes Yes Yes Yes No
color-profile No No No No No
color-rendering No Yes Yes Yes No
enable-background No No Dropped No Yes
fill Yes Yes Yes Yes Yes
fill-opacity Yes Yes Yes Yes Yes
fill-rule Yes Yes Yes Yes Yes
glyph-orientation-horizontal No Yes Yes Yes Yes
glyph-orientation-vertical No Yes Yes Yes Yes
image-rendering * Yes Yes Yes Yes No
kerning No Yes Yes Yes Yes
marker Yes Yes Yes Yes Yes
marker-start Yes Yes Yes Yes Yes
marker-mid Yes Yes Yes Yes Yes
marker-end Yes Yes Yes Yes Yes
pointer-events Yes Yes Yes Yes Yes
shape-rendering Yes Yes Yes Yes No
stop-color Yes Yes Yes Yes Yes
stop-opacity Yes Yes Yes Yes Yes
stroke Yes Yes Yes Yes Yes
stroke-dasharray Yes Yes Yes Yes Yes
stroke-dashoffset Yes Yes Yes Yes Yes
stroke-linecap Yes Yes Yes Yes Yes
stroke-linejoin Yes Yes Yes Yes Yes
stroke-miterlimit Yes Yes Yes Yes Yes
stroke-opacity Yes Yes Yes Yes Yes
stroke-width Yes Yes Yes Yes Yes
text-anchor Yes Yes Yes Yes Yes
text-rendering * Yes Yes Yes Yes No
writing-mode * No Yes Yes Yes Yes

Notes:

SVG 1.2 Tiny

Spec
http://www.w3.org/TR/SVGTiny12/
Status
Recommendation
Properties
Property Support
Firefox Safari Opera Chrome IE
audio-level No No No No No
buffered-rendering No Yes Yes Yes No
display-align No No Dropped No No
line-increment No No Dropped No No
solid-color No No Dropped No No
solid-opacity No No Dropped No No
vector-effect Yes Yes Yes Yes No
viewport-fill No No Dropped No No
viewport-fill-opacity No No Dropped No No

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
Properties
Property Support
Firefox Safari Opera Chrome IE
marker-knockout-left No No No No No
marker-knockout-right No No No No No
marker-pattern No No No No No
marker-segment No No No No No
paint-order Flag No No No No

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

Functions
Function Support
Firefox Safari Opera Chrome IE
icc-color() No No No No No
device-gray() No No No No No
device-rgb() No No No No No
device-cmyk() No No No No No
device-nchannel() No No No No No
icc-named-color() No No No No No
cielab() No No No No No
cielch() No No No No No

SVG Parameters

Spec
http://www.w3.org/TR/SVGParam/
Status
Working Draft
Properties
Property Support
Firefox Safari Opera Chrome IE
parameters No No No No No

SVG Compositing

Spec
http://www.w3.org/TR/SVGCompositing
Status
Working Draft
Properties
Property Support
Firefox Safari Opera Chrome IE
clip-to-self No No No No No
comp-op No No No No No
knock-out No No No No No

MathML for CSS Profile

Spec
http://www.w3.org/TR/mathml-for-css/
Status
Recommendation
Properties
Property Support
Firefox Safari Opera Chrome IE
table-baseline No No Dropped No No

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.

  1. dstorey posted this