W3C home > Mailing lists > Public > www-style@w3.org > May 2011

[css3-images] Features Overview

From: fantasai <fantasai.lists@inkedblade.net>
Date: Thu, 05 May 2011 22:04:55 -0700
Message-ID: <4DC38177.1050304@inkedblade.net>
To: "www-style@w3.org" <www-style@w3.org>
The CSSWG wanted to discuss what features from CSS3 Images and Replaced Content
other than gradients are stable enough to go to CR. So I've prepared an overview
of what all the feature are, along with notes on why they were added to the draft
and, as far as I know, who implements which bits so far. I've copied this text to
so that we can update it as people point out other implementations, use cases,

Several features are incorporated into the image() notation; I have split them
out here.

Image Slices (Basic Spriting)

   The use case we're trying to solve is the one that authors are currently
   hacking 'background-position' and other properties to solve: namely, page
   loading optimization and easier management of graphic resources
   (only one file to to load/edit for a series of related icons)

   The Media Fragments WG has created a fragment identifier notation for
   representing slices of images:
   But URLs don't have the same parsing-fallback behavior that CSS does,
   so if an author used, e.g.
   in a style sheet, new UAs would pull out the relevant portion of
   sprites.png, but old UAs would use the *entire* png file.

   One of the features of the image() notation is to allow for fallbacks:
     list-style: circle;
     list-style-image: image('sprites.png#xywh=60,0,20,20');
     background-image: url('swirl.png'); /* old UAs */
     background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */


   Implementation notes:
     - Mozilla implements a -moz-image-rect() notation that has this

Image Fallbacks

   There'd been discussion of fallback images, particularly for background
   images, in the past. A fallback color was originally integrated into the
   Backgrounds and Borders spec. After discussions on syntax and
   understandability, the feature was dropped with the suggestion to
   integrate it into a different mechanism. This is the image() notation's
   comma-separated syntax:

   background-image: image(url(wavy.svg), 'wavy.png', "wavy.gif",


   Implementation notes:

Image Resolution

   High-resolution images are critical for printing applications, but for
   backwards-compatibility, CSS images must be rendered at 1dppx. Prince
   and Antenna House Formatter support an 'image-resolution' property to
   explicitly set the resolution of replaced elements or to indicate that
   the resolution information embedded in the image should be used.


   Implementation notes:
     - implemented in Antenna House Formatter
     - implemented in Prince

   Both products also support a 'background-image-resolution' property.
   When the WG discussed this at the last Tokyo F2F, it was decided that
   we didn't want an explosion of properties to control image resolution
   for each way of introducing images in CSS (backgrounds, list markers,
   border-image, other future extensions, etc.). The conclusion was to
   use a functional notation to associate an image resolution with the
   CSS image where it was declared.

   The image() notation has an optional <resolution> argument to handle
   this use case.


   Implementation notes:
     - none, but would replace/extend 'background-image-resolution'

Image Directionality

   This feature, which associates an image with a directionality and
   automatically flips it as necessary, comes from a request from the
   bidi folks in the I18n WG. It was originally a request for an
   additional feature in HTML, but after some discussions they were
   convinced that legitimate uses of HTML <img>/<object> are rarely
   flippable, whereas stylistic images (which /should/ be used via
   CSS) were the images they were concerned with.


   This feature request was also folded in as an argument to the
   image() notation.

   Implementation notes:


   The -moz-element() notation was implemented in Mozilla, and proposed
   for standardization as element():
   As CSS3 Image Values seemed the logical place to put it, it wound
   up here.


   Implementation notes:
     - Mozilla

cross-fade() notation

   As noted in the spec, this was needed to represent the intermediate
   state when animating one image to another.


   Implementation notes:

Sizing Images and Objects in CSS

   This is a more detailed rewrite of the intrinsic sizing algorithms
   in CSS2.1, including the SVG-related portions that were recently
   kicked out due to lack of correct implementation. It generalizes
   the algorithm so that it can be referenced by other modules, such
   as CSS3 Backgrounds and Borders.


     - everyone, partial

object-fit and object-position

   These were pulled in from the CSS3 Paged Media module where they
   didn't quite belong and were renamed, after a fair amount of
   negotiation with the SVGWG, from image-* to object-*. The SVGWG
   plans to use these properties as a CSS mapping for <svg>'s
   preserveAspectRatio attribute.


     - HP
     - Opera

   Tab recently re-added the 'none' value, which had been removed by
   WG resolution, in response to a request from Opera:
   There doesn't seem to be consensus on this value, yet. See also

   The 'scale-down' value is similarly new, and was added from the
   same thread.


   This feature applies a rotation to the image before it is processed
   by layout. It is intended to correct images that are given in the
   wrong orientation (e.g. sideways off a camera). This was also pulled
   out of the CSS3 Paged Media module, and IIRC was particularly
   important for printers. (They use CSS as a templating language for
   printing photos off your camera.)


     needs investigation


   This property was originally defined in SVG:

   I haven't followed the discussions that resulted in the current definition.

   Implementation notes:
    - Mozilla
    - Microsoft (different syntax)

Serialization and Interpolation

   These sections are provided to define interactions with the CSSOM and
   animation, respectively, so I expect their inclusion to be uncontroversial.

Received on Friday, 6 May 2011 05:05:25 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:45 UTC