Tab Atkins and I published an updated Working Draft of CSS Image Values and Replaced Content Level 3 this month. We anticipate that this will be the last draft before Last Call, which we aim to publish in January. If you have an interest in this draft, please review it and send in your comments.
Changes to Gradients
Below is a summary of the major changes to CSS gradients over the past year:
- Angles in
linear-gradient()changed from polar angles to bearing angles (compass directions). 0° now points up (bottom-to-top), and angles increase clockwise. See Angles in Gradients for the feedback that informed this decision.
- Keyword directions in
linear-gradient()changed from bare directional keywords (
left) indicating the starting point to
to ‹keyword›where the keyword indicates the endpoint. (
to left). This change was made because Tab felt having
0degmean bottom-to-top made the fact that
topmeant top-to-bottom confusing. The WG was split but mostly ambivalent on whether this was necessary, or whether
from ‹keyword›was a better alternative; the resolution landed on
linear-gradient()has been redefined so that instead of aligning the gradient line to the diagonal, the central color occupies the other diagonal. See Behnam Esfabad’s post for a demonstration showing the old and new (“magic”) versions.
- Syntax of
radial-gradient()has been changed to (roughly)
radial-gradient( [ ‹size› || ‹shape› ] [ at ‹position› ]?, ‹color-stop-list› ): specifically, the shape/size and position parameters are collapsed into the first argument using CSS property value conventions, allowing either or both to be specified. Position is distinguished from size by the preceding
atkeyword. See Radial Gradient Readability for some of the thinking that went into this change.
Although CSS gradients are undoubtedly the most anticipated feature in CSS3 Images, there are a number of other features in this draft:
- Media Fragments can be used to clip out part of an image and use it in CSS. The new
image()notation, which can be used in place of
url(), allows authors to trigger CSS parser fallback in older UAs when using media fragments.
image()notation allows specifying a list of fallback images in various formats and allows annotating images with left-to-right or right-to-left directionality so that they flip automatically to match the element’s directionality.
object-fitproperty allows preserving the aspect ratio of an image when assigning its box a specified size. In conjunction with the
min/max-width/heightproperties, it also allows scaling the image and its box up to a given maximum, or down to a given minimum. The
object-positionproperty allows repositioning the image within its content box using background-positioning sytax when
object-fitcauses the aspect ratio of the image and the content box to mismatch.
image-resolutionproperty allows for using bitmap resolutions other than 1 image pixel == 1 CSS px unit.
The preferred method for feedback is email www-style with the spec code (
[css3-images]) and your comment topic in the subject line. But we’ll also scan the comments here for issues up through the actual Last Call comment deadline (yet TBD).
You can skip to the end and leave a response.
- Angles in
I’ve still not delved into CSS gradients, i’ve always been dubious or just plain lazy getting it to work cross browser.