[css3-images] Features Overview

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
   http://wiki.csswg.org/spec/css3-images
so that we can update it as people point out other implementations, use cases,
etc.

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)
     http://www.google.com/search?q=css%20sprites

   The Media Fragments WG has created a fragment identifier notation for
   representing slices of images:
     http://www.w3.org/TR/media-frags/#naming-space
   But URLs don't have the same parsing-fallback behavior that CSS does,
   so if an author used, e.g.
     url('sprites.png#xywh=10,30,60,20')
   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');
   or
     background-image: url('swirl.png'); /* old UAs */
     background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */

   http://dev.w3.org/csswg/css3-images/#url

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

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",
                           rgba(255,0,0,0.5));

   http://dev.w3.org/csswg/css3-images/#image-notation

   Implementation notes:
     none

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.

   http://dev.w3.org/csswg/css3-images/#image-resolution

   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.
     http://lists.w3.org/Archives/Public/www-style/2009Mar/0065.html

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

   http://dev.w3.org/csswg/css3-images/#image-notation

   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.

   http://lists.w3.org/Archives/Public/www-style/2010Nov/0000.html

   This feature request was also folded in as an argument to the
   image() notation.
     http://dev.w3.org/csswg/css3-images/#image-notation

   Implementation notes:
     none

Element-as-Image
================

   The -moz-element() notation was implemented in Mozilla, and proposed
   for standardization as element():
     http://lists.w3.org/Archives/Public/www-style/2010Aug/0635.html
   As CSS3 Image Values seemed the logical place to put it, it wound
   up here.

   http://dev.w3.org/csswg/css3-images/#element-notation

   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.

   http://dev.w3.org/csswg/css3-images/#cross-fade-function

   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.

   http://dev.w3.org/csswg/css3-images/#sizing

   Implementations:
     - 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.

   http://dev.w3.org/csswg/css3-images/#object-fit
   http://dev.w3.org/csswg/css3-images/#object-position

   Implementations:
     - HP
     - Opera

   Tab recently re-added the 'none' value, which had been removed by
   WG resolution, in response to a request from Opera:
     http://lists.w3.org/Archives/Public/www-style/2011Jan/0554.html
   There doesn't seem to be consensus on this value, yet. See also
     http://lists.w3.org/Archives/Public/www-style/2011Jan/0649.html

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

image-orientation
=================

   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.)

   http://dev.w3.org/csswg/css3-images/#image-orientation

   Implementations:
     needs investigation

image-rendering
===============

   This property was originally defined in SVG:
     http://www.w3.org/TR/SVG/painting.html

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

   Implementation notes:
    - Mozilla
      https://developer.mozilla.org/En/CSS/Image-rendering
    - Microsoft (different syntax)
      http://msdn.microsoft.com/en-us/library/ff521095%28VS.85%29.aspx

Serialization and Interpolation
===============================

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

~fantasai

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