

New CSS3 Image Values 3 Working Draft published

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Thu, 8 Sep 2011 17:13:26 -0700
Message-ID: <CAAWBYDAK8NDNKYc=A3BwFoP8i-BpLJu7HSMhtpHmubAUhwNSXA@mail.gmail.com>
Heya everyone, a new WD of the Image Values 3 spec was published
today, and can be found at the permanent url
<http://www.w3.org/TR/2011/WD-css3-images-20110908/> (or the temporary
url <http://www.w3.org/TR/css3-images/>).  The current Editor's Draft
can be found at <http://dev.w3.org/csswg/css3-images>.

Here is an abbreviated listing of the features of this draft:

1. Defines the <image> type, a generalization of the <url> type of
CSS2.1 that specifically represents images, both external and

2. Defines the image() function, which can be used for image fallback.
 If a particular image file is missing or is an unknown format, the
browser will attempt to use the next image in the list.  At the end, a
color may be provided for an always-available emergency fallback; this
is useful, for example, to guard against temporary failure of a
background-image rendering text unreadable.  As well, the image()
function allows you to tag an image with a direction, so the image is
automatically flipped in the inline direction if used within an
opposite-direction element.

3. Defines the element() function, which allows one to use an element
in the DOM as an image.  This image updates in realtime as the element
changes.  Some types of elements (<img>, <canvas>, etc.) can even be
used when outside the DOM.

4. Defines functions for generating linear and radial gradients.

5. Defines a generic algorithm for negotiating the size of images and
other replaced elements.  This isn't author-facing, but it generalizes
and normalizes the several separate algorithms in CSS2.1.  Future
specs can simply hook this algorithm and get a size-resolution
algorithm consistent with the rest of CSS.

6. Defines the 'object-fit' and 'object-position' properties, which
allow one to size and position the contents of replaced elements.

7. Defines the 'image-resolution' property, which allows one to
specify the resolution of an image.  (CSS currently assumes that all
images are 96dpi, which means that images saved at other resolutions
will display at incorrect sizes.)

8. Defines the 'image-orientation' property, which allows one to do
layout-effecting 90deg rotations of images, so one can, for example,
correct the rotation of an image taken with the camera at a
non-standard orientation.

The list of changes since the last WD is identical to the last time I
made the list, so I'll just copy it here:

* marked several properties/values as at-risk
* image() can no longer adjust the resolution of images (kicked to level 4)
* removed the cross-fade() function (kicked to level 4)
* made element() more explicit in how it treats several types of elements
* changed linear gradients to use "to <side-or-corner>" for the
keyword arguments
* changed corner keywords to be "magic" (see Behnam's message)
* made "degenerate shapes" in radial-gradient() render in a way that's
more continuous in the limit
* made several types of degenerate repeating gradients render in a way
that's more continuous in the limit
* added the "snap" keyword to image-resolution
* removed the 'image-rendering' property (kicked to level 4)

Received on Friday, 9 September 2011 00:14:13 GMT
