CSS3 Images reaches Candidate Recommendation
The CSS Image Values and Replaced Content Module Level 3 specification has been published as a W3C Candidate Recommendation. This module includes syntax for CSS gradients, image slices, and fallbacks; as well as several properties to control replaced element sizing and rendering.
W3C encourages everybody to implement this specification and return comments to the (archived) public mailing list www-style@w3.org (see instructions). When sending e-mail, please put the text [css3-images] in the subject (alternatively you can email one of the editors and ask them to forward your comment).
Minutes and Resolutions Telecon 2012-04-11
- Resolved: Accept Anton’s edit merging the sentences in comment 2 and 3 in CSS2.1 bug 16049 about margin-collapsing.
- Resolved: Accept Anton’s edit about margin-collapsing of a min-height parent and last-child for CSS2.1 bug 16037.
- Closed CSS3 Text Issue 229 about justification and pre-wrap; text-align already defines this.
- Resolved: Change the animation model to snapshot much less properties. Details of exactly what snapshotting is left TBD.
- Resolved: Treat both mismatched string lengths and non-rectangular regions as illegal syntax in Grid/Template.
- Discussed -webkit-mask and reflections; and relation to SVG properties and element(). Edward O’Connor to report what WebKit implements for masking, FXTF to help align that with SVG using earlier suggestions from roc and techniques used on ‘filter’.
Full minutes
Minutes and Resolutions Telecon 2012-04-04
- Resolved: Move
text-size-adjust proposal submitted last week to an official Editor’s Draft.
- CSS Selectors as Fragment Identifiers CG is looking for help.
- Resolved: Proposal #2 (require backgrounds and
border-radius, allow border-image, disallow CSS2.1 border properties) accepted for ::first-line; box-shadow allowed but not required.
- Resolved: Move CSS3 Backgrounds and Borders back to CR.
- Resolved: For CSS2.1 bug 16049 replace the sentence about
min-height with “For example, margin collapsing is not affected because it is based on computed values and not used values.” or similar.
- Resolved: For CSS2.1 bug 16036 accept proposal in Anton’s email.
- Discussed proposal for bandwidth queries. It’s unclear how exactly to implement the suggested functionality.
Full minutes
New Working Drafts of CSS Transitions and CSS Animations
The CSS Working Group has published updated Working Drafts of CSS Transitions and CSS Animations.
CSS Transitions allows specifying that certain CSS property changes that would happen anyway will animate over time rather than taking place instantly. CSS Animations allows authors to animate the values of CSS properties over time, using keyframes. (CSS Animations allows authors to cause changes, in contrast to CSS Transitions, which only allows animating changes that are otherwise happening.)
These drafts update the copies on the Technical Reports (TR) page with the various changes made to the Editor’s Drafts of these specifications over the past few years. These specifications are becoming more stable and we hope to advance them to Last Call relatively soon. Transitions in particular has only a small number of remaining open issues (though some of those issues are complex).
As always, please send feedback to www-style with the spec shortname ([css3-transitions] or [css3-animations]) and your comment topic in the subject line.
Changes since the previous drafts
The changes since the previous drafts of these specification include the following changes. For the full list of changes see the version control log for transitions or for animations.
Changes to both specifications
- new steps(), step-start, and step-end timing functions
- cubic-bezier() timing function allows Y values outside of [0, 1]
Changes to CSS Transitions
- clearer description of how future specifications will change how properties animate
- In ‘transition-property’, ‘all’ is allowed within a list rather than only on its own.
- Repeating behavior for transition-* properties have different lengths is defined; transition-property defines the number of transitions and the other properties are repeated or truncated as needed.
- It is defined when (based on transition-property, transition-duration, and transition-delay) transitions (and thus transition events) occur.
- Changes to the interpolation rules for font weight, visibility, lists of properties.
- various changes to the list of animatable properties (removing shorthand, nonstandard, or future properties; changing clip, vertical-align, font-weight)
- TransitionEvent objects expose the pseudo element on which the transition occurred.
Changes to CSS Animations
- clearer description of the keyframes animation model
- describe how missing properties are handled in keyframes
- add ‘animation-fill-mode’ property
- add ‘reverse’ and ‘alternate-reverse’ values to ‘animation-direction’
- define how ‘animation-duration’ and ‘animation-delay’ are distinguished in the ‘animation’ shorthand
- define when the animationstart event fires
- define which animation wins when multiple animations try to animate the same property
- define that ‘animation-name’ determines the length of lists for animations, and other properties are repeated as needed
- changed insertRule method to appendRule method on CSSKeyframesRule
- describe that animations with 0 duration still fire events and honor fill mode and delay
- negative values of ‘animation-iteration-count’ are parse errors rather than being treated as 0
- make animation events non-cancelable
CSSWG Proposes W3C-wide Spec Redesign
As per our action item from TPAC, the CSS Working Group has prepared a spec restyling proposal that we feel captures the mission of the W3C, which we have sent to the W3C spec-production mailing list for comment. I’ve archived a preview applied to several of our CSS specs on www-archive: CSS3 Images, CSS Flexbox. Below is an explanation of the motivations for our changes:
- Futuristic Look
- In keeping with W3C’s mission to “lead the Web to its full potential”, we wanted to emphasize that W3C is creating the Future of the Web. To show that, we chose a deep space background, which gives the design its futuristic feel. To preserve sufficient contrast with the background in keeping with the WCAG, we chose a bright yellow text color.
- Passion and Creativity
- People have the impression that creating specs at W3C is a boring, beaureaucratic, process-laden process. They rarely get to see the passionate dedication to a better Web that our Members bring to our discussions, such as the vibrant discussions of
longdesc and of video formats in the HTMLWG. To better reflect the passion and creativity of the standards process, we propose a new W3C logo creatively designed with animated flames.
- Diversity and Dynamism
- Symbolizing the diversity and dynamism of the Web, we chose animated rainbow horizontal rules to set off headings from the body text. A defining characteristic of 90s web design, this also gives us a more modern, up-to-date look by hooking us into the “retro” trends of some of the latest and most fashionable designers. (And by choosing the 90s rather than an earlier decade of visual design, we expect to remain ahead of the curve for awhile. Future-compatibility being one of the design principles of CSS, we felt this was an important consideration.)
- Under Construction
- Of course we wanted to address the concerns that people don’t take the “under construction” nature of our specs seriously, referring to Working Drafts and Candidate Recommendations (and even Editor’s Drafts!) as if they were a done deal. To that end we added an “under construction” logo to the background of the text. So as not to interfere with the readability of the spec itself, this logo is only placed in the marginal gutters on either side of the spec. But to make sure that even people landing on URLs with fragment IDs see it, we gave it a
repeat-y value so that it shows up on all sections of the spec. (Of course for REC, the “under construction” styling would be removed.)
- Preserving Symmetry
- Tying the design together, and upholding the the classical ideals of symmetry—which represents our commitment to logical design decisions—we center-aligned all the text.
We hope you like the new design! As you can see, we’ve already deployed it on all of the CSSWG editor’s drafts. We’re looking forward to seeing the new design adopted W3C-wide~
Finally, I’d like to thank Tab Atkins for his tireless work preparing this design in consultation with various members of the W3C community.
For the CSSWG,
~fantasai
Minutes and Resolutions 2012-03-28
- Resolved: Publish CSS3 Images as CR
- Resolved: No transition (and no transition event) if the end of the transition is not in the future (not the present or the past).
- Resolved: Rule that between
visibility: visible and non-visible transitions interpolate as visible applies between 0–1; at and beyond 0/1 it clamps.
- Resolved: Pseudo-element attribute on transition event is called
pseudoElement and the argument to initTransitionEvent() is pseudoElementArg.
- Resolved: Publish Transitions and Animations as WD
- Resolved: Add
reverse and alternate-reverse to animation-direction
- Resolved: Make interaction of
border-image with collapsed tables undefined, recommend not applying it to such tables in L3, expect it to be defined in L4.
- Discussed proposal for
text-size-adjust.
Full minutes
W3C Invites Implementations of CSS Speech Module
The Cascading Style Sheets (CSS) Working Group invites implementation of the Candidate Recommendation of CSS Speech Module. The Speech module defines aural CSS properties that enable authors to declaratively control the rendering of documents via speech synthesis, and using optional audio cues. Note that this standard was developed in cooperation with the Voice Browser Activity.
W3C encourages everybody to implement this specification and return comments to the (archived) public mailing list www-style@w3.org (see instructions). When sending e-mail, please put the text [css3-speech] in the subject (alternatively you can email one of the editors and ask them to forward your comment).
New Working Drafts of CSS Grid Layout and CSS Flexible Box Layout Module
The CSS Working Group has released two new Working Drafts:
CSS Grid Layout, Working Draft 2012-mar-22. CSS Grid Layout allows designers to define invisible grids of horizontal and vertical lines. Elements from a document can then be anchored to points in the grid, which aligns them visually to each other, even if they are not next to each other in the source.
Please review the draft and send us your comments! Best way to send feedback is to www-style@w3.org mailing list with [css3-grid-layout] and your topic in the subject line. (Alternatively you can email one of the editors and ask them to forward your comment.)
CSS Flexible Box Layout Module, Working Draft 2012-mar-22. CSS Flexible Box Layout Module describes a CSS box model optimized for user interface design. In the flexbox layout model, the children of a flexbox can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.
Please review the draft and send us your comments! Best way to send feedback is to www-style@w3.org mailing list with [css3-flexbox] and your topic in the subject line. (Alternatively you can email one of the editors and ask them to forward your comment.)
Minutes and Resolutions Telecon 2012-03-21
- Resolved: New Working Draft for Transforms.
- Resolved: Defer directional images (ltr/rtl annotations) to CSS4 Images to address design-level LC comments. (Issue 37 and Issue 41)
- Resolved: Accept to drop content-box resizing behavior from
object-fit; address use cases in CSS4 Images. (Issue 24)
- Resolved: Shift
object-fit/image-fit back-compat aliasing to CSS Print Profile. (Issue 33)
- Resolved: Approved edits treating unsupported fragment syntaxes as invalid images. (Issue 14)
- Resolved:
image-orientation inherits. (Issue 42)
- Resolved:
image() can accept element(). (Issue 27)
- Resolved: Consecutive page areas are glued together by aligning their start edges when element calculating bounding boxes. (Resolution pending approval by Alex and Vincent.) (Issue 26)
- Resolved:
element() deferred to Level 4 due to outstanding issues and need for further review cycles.
Full minutes
Minutes and Resolutions 2012-03-07
- Resolved: No change to background-position or transform-origin syntaxes.
- Resolved: Publish Media Queries as a Proposed Recommendation.
- Resolved: Round font-weight to nearest multiple of 100 when animating.
- Resolved: Intermediate value of
visibility during a transition between hidden/visible and collapse/visible is visible; between hidden/collapse is non-interpolable.
- Resolved: Add a field to the transition event saying which pseudo-element it’s for (if any).
- Resolved: Keep the
to syntax for linear-gradient(), and only that syntax, because it’s adequate and has been tweaked too much already.
Full minutes
![[Photo: group photo of the CSS working group in San Francisco]](/Style/CSS/csswg-2016.jpg)
Contact: