CSS WG Blog front page

This is a page from the Cascading Style Sheets Working Group Blog. Some other places to find information are the “current work” page, the www-style mailing list, the Future of CSS syndicator, and the issue list on Github.

Do you want to know how the CSS WG works? Fantasai has written about:csswg, An Inside View of the CSS Working Group at W3C.

Minutes Telecon 2018-02-21

By Dael Jackson February 22, 2018 (Permalink)
Categories: resolutions

Full Minutes

Updated WD of Selectors Level 4

By fantasai February 2, 2018 (Permalink)
Categories: publications

The CSS Working Group has published an updated Working Draft of CSS Selectors Level 4. Selectors is a pattern-matching syntax for identifying sets of elements in a document, and is used e.g. for applying CSS declarations to elements in a document tree.

This publication brings the official draft up-to-date with all of the WG resolutions since 2013. Significant changes are summarized in the Changes section.

This specification is now in the Refining stage: we don’t expect any large changes prior to Candidate Recommendation, but will be continuing to address issues. Most features are well-scoped, with significant open issues described in the draft to solicit directed feedback. Other than addressing open issues, a significant focus of the next round of edits will be to update and improve cross-references between Selectors and other Web standards (in coordination with the editors of the DOM and HTML standards at WHATWG).

Please send feedback by either filing an issue in GitHub (preferable) or sending mail to the (archived) public mailing list www-style@w3.org with the spec code ([selectors-4]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

Minutes Telecon 2018-01-17

By Dael Jackson January 18, 2018 (Permalink)
Categories: resolutions

Full Minutes

Minutes Telecon 2018-01-10

By Dael Jackson January 11, 2018 (Permalink)
Categories: resolutions

Full Minutes

Minutes Telecon 2018-01-03

By Dael Jackson January 4, 2018 (Permalink)
Categories: resolutions

Full Minutes

Remaining Spec Update Announcements 2017

By fantasai December 31, 2017 (Permalink)
Categories: publications

The CSSWG published a number of major updates last year, not all of which were announced, so here are the missing publications, in reverse chronological order:

  1. CSS Grid Layout Level 1 — updated CR
  2. CSS Scroll Snapping Level 1 — updated CR
  3. CSS Counter Styles Level 3 — updated CR
  4. CSS Writing Modes Level 3 & Level 4 — updated CR, FPWD
  5. CSS Transitions Level 1 — updated WD
  6. CSS Animations Level 1 — updated WD
  7. CSS Transforms Level 1 — updated WD
  8. CSS Flexible Box Layout Level 1 — updated CR
  9. CSS Box Alignment Level 3 — updated WD
  10. CSS Text Level 3 — updated WD
  11. CSS Logical Properties Level 1 — FPWD
  12. CSS Fill and Stroke Level 3 — FPWD
  13. CSS Images Level 4 — updated WD
  14. CSS Rhythmic Sizing Level 1 — FPWD
  15. CSS Timing (Easing) Functions Level 1 — FPWD

As usual, please send feedback by either filing an issue in GitHub (preferable) or sending mail to the (archived) public mailing list www-style@w3.org with the appropriate spec code and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

CSS Grid Layout Module Level 1

On 14 December 2017, the CSS WG published an updated Candidate Recommendation of the CSS Grid Layout Module Level 1.

This module defines a new type of layout manager, the grid, which makes it extremely easy to specify complex, responsive 2-dimensional layouts for a page or sub-component of the page.

This update incorporates all of the feedback received over the past year since the initial Candidate Recommendation in October 2016.

Major changes include

Significant changes are listed (with diffs) at in the Changes section, and a Disposition of Comments is also available.

Please send feedback with the spec code [css-grid-1].

CSS Scroll Snapping Module Level 1

On 14 December 2017, the CSS WG published an updated Candidate Recommendation of the CSS Scroll Snapping Module Level 1.

This module contains features to control panning and scrolling behavior with “snap positions”.

This update renames the scroll-snap-margin property to scroll-margin and applies it also to the target element of scrolling operations such as scrollIntoView(), focus(), and navigating to #fragment.

Note that scroll-padding is already applied generally, to allow adjustment of the scrolling area for visual continuity and to accommodate floating sidebars/headers/footers, without requiring JavaScript.

Significant changes are listed in the Changes section, and a Disposition of Comments is also available.

Please send feedback with the spec code [css-scroll-snap-1].

CSS Counter Styles Module Level 3

On 14 December 2017, the CSS WG published an updated Candidate Recommendation of the CSS Counter Styles Module Level 3.

This module introduces the @counter-style rule, which allows authors to define their own custom counter styles for use as list markers and generated content. It also predefines a set of common counter styles, including the ones present in CSS2 and CSS2.1.

This update addresses feedback received since the 11 June 2015 CR. Significant changes are listed in the Changes section; a Disposition of Comments is also available.

Please send feedback with the spec code [css-counter-styles-3].

CSS Writing Modes Level 3 and Level 4

On 7 December 2017, the CSS WG published an updated Candidate Recommendation of CSS Writing Modes Level 3 and a First Public Working Draft of CSS Writing Modes Level 4.

CSS Writing Modes defines CSS support for various international writing modes, such as left-to-right (e.g. Latin or Indic), right-to-left (e.g. Hebrew or Arabic), bidirectional (e.g. mixed Latin and Arabic) and vertical (e.g. Asian scripts).

Level 4 is the same as the previous Level 3 draft; several features were cut from Level 3 due to lack of implementation:

The only other change was to adjust the fallback “available space” for orthogonal flows to use the nearest fixed-size scrollport where available, rather than always using 100vh/vw.

The significant changes are all listed in the draft: Level 3 changes, Level 4 additions.

A Disposition of Comments is also available.

We anticipate transitioning Level 4 back up to Candidate Recommendation as soon as the requisite waiting periods have ended; Level 3 will transition to REC as soon as the last few tests pass in two implementations.

Please send feedback with the spec code [css-writing-modes].

CSS Transitions Module Level 1

On 30 November 2017, the CSS WG published an updated Working Draft of the CSS Transitions Module Level 1.

CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.

This update adds more precision and correctness to the draft in a number of cases and also adds some new events. Significant changes in the draft.

Please send feedback with the spec code [css-transitions-1].

CSS Animations Module Level 1

On 30 November 2017, the CSS WG published an updated Working Draft of the CSS Animations Module Level 1.

This module introduces declarative keyframe animations of CSS properties.

his draft folds in a number of previously-outstanding WG resolutions, as well as other fixes and clarifications, see status.

Please send feedback with the spec code [css-animations-1].

CSS Transforms Module Level 1

On 30 November 2017, the CSS WG has published an updated Working Draft of the CSS Transforms Module Level 1

CSS transforms allows elements styled with CSS to be transformed in two-dimensional space. This specification is the convergence of the CSS 2D transforms and SVG transforms specifications.

This update incorporates a lot of feedback since the earlier 2013 draft; 3D Transforms have been split out into Level 2.

There is no completed disposition of comments or changes list. The changelog can be found in the CSSWG’s drafts repository (part 3, part 2, part 1), and a partial disposition of comments, up through 31 December 2016, is available, with a number of resolutions for the issues therein logged in the Seattle F2F minutes (part 1, part 2. Subsequent issue-tracking was moved to GitHub.

Please send feedback with the spec code [css-transforms-1].

CSS Flexible Box Module Level 1

On 19 October 2017, the CSS WG published an updated Candidate Recommendation of the CSS Flexible Box Layout Module Level 1.

Flexbox is a new layout model for CSS. The contents of a flex container can be laid out in any direction, can be reordered, can be aligned and justified within their container, and can “flex” their sizes and positions to respond to the available space. We expect this model to be particularly useful for UI layouts.

This update addresses issues found since the 26 May 2016 publication. Exact diff-marked changes, and their justifications, are available in the Changes section. A Disposition of Comments resulting in the latest changes is also available.

Please send feedback with the spec code [css-flexbox-1].

CSS Box Alignment Level 3

Probably the worst announcement to have missed this year…

In August the CSSWG resolved to drop the grid- prefixes of Grid Layout‘s gutter properties, grid-gap/grid-row-gap/grid-column-gap, merging its row gap property with the existing Multi-column Layout module’s row-gap property and extending its functionality to apply to Flexbox as well. See full discussion.

As a result, on 6 September 2017 the CSS Working Group published an updated Working Draft of the CSS Box Alignment Module Level 3, shifting the definitions of these properties (and renaming them accordingly) to this module. (The Grid module has also been updated to remove the grid-gap definitions.)

There were no other changes since the draft six weeks prior.

Please send feedback with the spec code [css-align-3].

CSS Text Module Level 3

On 22 August 2017, the CSS WG published an updated Working Draft of the CSS Text Module Level 3.

This module contains various typesetting properties not related to font selection, such as alignment, line breaking, white space collapsing, text justification, and other forms of text-level spacing adjustments.

This update represents the handling of all comments received during the 2013 Last Call period and up through about mid-2015 (as well as a handful of later issues). A completed disposition of comments and a full changes list will be made available once the rest of the comments are handled. See the Disposition of Comments.

Please send feedback with the spec code [css-text-3].

CSS Logical Properties Level 1

On 18 May 2017, the CSS WG published a First Working Draft of the CSS Logical Properties and Values Module Level 1.

This module introduces properties and values that control layout through logical (writing-mode–relative), rather than physical, direction and dimension mappings. The module defines such flow-relative properties and values for the features defined in [CSS21] and older CSS modules; newer CSS modules are expected to define such equivalents on their own.

This is a very late FPWD for a variety of unfortunate reasons, however as a functional dependency of supporting writing-mode for HTML much of the draft has been implemented and shipped (per WG resolution, see minutes and explanation). An explanation of the status of the spec is given in the intro; note, the inset name was later resolved.

Further work on this module is likely to consist of fixing issues raised against details such as the cascading mechanism, and either resolving or deferring unstable features not required by HTML’s default UA stylesheet.

One of the major open issues is the syntax for switching margin-style shorthand parsing from physical to logical, and the WG would appreciate feedback and suggestions on this feature, see open issue.

Please send feedback with the spec code [css-logical-1].

CSS Fill and Stroke Module Level 3

On 13 April 2017, the CSS WG published a First Public Working Draft of the CSS Fill and Stroke Module Level 3.

This module extends the SVG fill and stroke properties to apply to text in CSS-formatted documents, allowing control over text fills and outlines. It also extends the properties to allow for layered image-based fills similar to the CSS background properties.

This is an early-stage Working Draft, and there are many open issues listed in the draft. Comments and suggestions are quite welcome on the public-fx@w3.org mailing list or, preferably, in the FXTF GitHub repo with the spec code [fill-stroke-3].

CSS Images and Replaced Content Module Level 4

On 13 April 2017 the CSS WG published an updated Working Draft of the CSS Image Values and Replaced Content Module Level 4.

This module defines the CSS <image> type used in background-image and other image-accepting propertys, and additionally defines several properties for handling replaced elements. The main extensions compared to Level 3 are several additions to the <image> type: the image() notation, the element() notation, and conic gradients.

This is an early-stage Working Draft. The update includes a number of fixes as well as the addition of some new features:

Significant changes are listed in the draft.

Please send feedback with the spec code [css-images-4].

CSS Rhythmic Sizing Module Level 1

On 2 March 2017 the CSS WG published a First Public Working Draft of the CSS Rhythmic Sizing Module Level 1.

This module contains CSS features for sizing boxes in multiples of a “step size”.

This is an early-stage Working Draft and may change significantly as the feature designs are worked out. The line-height-step property in particular has raised a number of design concerns, see e.g. minutes of an F2F discussion.

The CSSWG is interested in use cases for line-height-step that are not better solved by either the block-step feature in the draft or by adjusting the inline layout model to exclude child boxes from the calculation of the line box height (thus forcing the line height to remain constant within a paragraph), as thus far the use cases presented for line-height-step seem to be better solved with these other approaches.

Please send feedback with the spec code [css-rhythm-1].

CSS Timing (Easing) Functions Module Level 1

On 21 February 2017, the CSS WG published a First Public Working Draft of the CSS Timing Functions Module Level 1.

This module extracts the various timing functions previously specified in CSS Transitions into their own module, for easier re-use across modules.

It also adds a new stepped timing notation for looped animations (called
frames() in the FPWD, but to be changed to an extension of steps()).

There was a request to change the name of the module to be more general for potential re-use with progressions other than time, such as in gradients; therefore, unless someone comes up with a much better idea soon, it is expected that the next publication will be titled CSS Easing Functions [css-easing].

Please send feedback with the spec code [css-timing-1].

PR of CSS Basic User Interface Module Level 3

By Florian Rivoal December 29, 2017 (Permalink)
Categories: publications

The CSS WG has published a Proposed Recommendation of the CSS Basic User Interface Module Level 3. This specification describes user interface related properties and values that are proposed for CSS level 3 to style HTML and XML (including XHTML). It includes and extends user interface related features from the properties and values of CSS level 2 revision 1. It uses various properties and values to style basic user interface elements in a document.

This document is intended to become a W3C Recommendation. This document will remain a Proposed Recommendation at least until 1 February 2018 in order to ensure the opportunity for wide review. The W3C Membership and other interested parties are invited to review the document and send comments. Advisory Committee Representatives should consult their WBS questionnaires.

Changes since the last Candidate Recommendation are listed in the Changes section.

A disposition of comments and implementation report are available.

Please send feedback by either filing an issue in GitHub (preferable) or sending mail to the (archived) public mailing list www-style@w3.org with the spec code ([css-ui-3]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

Updated WD of CSS UI Level 4

By Florian Rivoal December 29, 2017 (Permalink)
Categories: publications

The CSS Working Group has published an updated Working Draft of CSS Basic User Interface Module Level 4.

This specification describes user interface related properties and values to style HTML and XML (including XHTML). It includes and extends user interface related features from the properties and values of previous CSS levels. It uses various properties and values to style basic user interface elements in a document.

CSS-UI Level 4 includes all features defined for level 3, as well new features and extensions of existing ones:

Changes since the last Working Draft are listed in the Changes section.

Please send feedback by either filing an issue in GitHub (preferable) or sending mail to the (archived) public mailing list www-style@w3.org with the spec code ([css-ui-4]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

Minutes Telecon 2017-12-20

By Dael Jackson December 21, 2017 (Permalink)
Categories: resolutions

Full Minutes

How should we resolve percentage margins and padding on grid and flex items?

By Rachel Andrew December 20, 2017 (Permalink)
Categories: Feedback

The CSS Working Group would like your opinion. There is a longstanding issue in both the CSS Grid Layout and Flexbox specifications.

From the CSS Grid specification:

Percentage margins and paddings on grid items can be resolved against either:

• their own axis (left/right percentages resolve against width, top/bottom resolve against height), or,

• the inline axis (left/right/top/bottom percentages all resolve against width)

A User Agent must choose one of these two behaviors.

Note: This variance sucks, but it accurately captures the current state of the world (no consensus among implementations, and no consensus within the CSSWG). It is the CSSWG’s intention that browsers will converge on one of the behaviors, at which time the spec will be amended to require that.

Authors should avoid using percentages in paddings or margins on grid items entirely, as they will get different behavior in different browsers.

The flexbox specification has the same wording.

What is the problem here?

A percentage has to be resolved against something. If you give a grid item a margin-right of 10%, you would probably expect that 10% to be calculated as 10% of the width of the grid area. What happens however if you give the item a margin-bottom of 50%? Do you expect it to resolve to 50% of the total height of the grid area or do you expect it to calculate 50% from the width? The spec allows for both, and browser implementations are split.

You can see the problem in this very simple CodePen. We have three column tracks which are each 120 pixels in width. The margin-right applied to each track resolves to 12 pixels, 10% of 120.

In Chrome and Safari the margin-bottom resolves to 60 pixels. 50% of the width of 120 pixels is 60 pixels.

In Firefox and Edge the margin-bottom uses the height of the grid area and so in this case resolves to 150 pixels as I have put a height on the grid and items are stretching.

If you remove the height on the grid container you will see how Firefox now completely collapses the container as there is now no height to resolve against. Chrome will keep the container at 60 pixels – that being the margin.

We see the same variance in Flexbox, however in Flexbox we resolve against the flex container as the containing block. However you can see in the below example how Chrome uses 10% of 500 pixels for the margin-right, and 50% of 500 pixels for margin-bottom. Firefox uses 10% of 500 pixels for margin-right and 50% of 300 pixels for margin-bottom.

The fact that percentages resolve from the width is essentially a throwback to the old days of layout on the web where we didn’t have great control over the height of things. The width was the measurement we could control and so became the dominant measurement.

The ‘aspect ratio hack’

One reason to follow the Chrome behaviour here is that it allows the percentage-based padding “aspect ratio hack” to work on flex and grid items. There is an excellent write-up of the interoperability issue on Bram.us – Vertical margins/paddings and Flexbox, a quirky combination, the issue is also detailed on Flexbugs and Gridbugs.

However, perhaps a better solution is to properly solve the aspect ratio issue, while also deciding on one solution for margins and padding in general.

We want your feedback!

The CSS Working Group would love to know your thoughts on this issue. As you can see above this is not an issue when using horizontal percentage margins and padding, this continues to work as it always has done. The issue is with vertical margins and padding. Would you prefer the Chrome behaviour, of the Firefox one? Other than the aspect ratio padding hack, are you using vertical margins and padding for any other reason?

You can comment directly on the GitHub issue with thoughts and use cases. It would be great to get this particular interoperability problem solved.

Cross-posted to rachelandrew.co.uk.

Older articles »

Archives

(Also available as Atom news feed.)

Browse by date:

Browse by category:

[Photo: group photo of the CSS working group in Lyon, France] Contact: Bert Bos
Copyright © 2017 W3C®

Last updated 2018-02-22 00:17:42.000000