CSS3 Media Queries reaches Recommendation
The CSS Working Group has published Media Queries as a Recommendation.
Media Queries allows authors to tailor the style that they want to apply to a document based on characteristics of the environment the document is being rendered in.
There were no changes since PR.
As always, please send feedback to the (archived) public mailing list www-style@w3.org (see instructions). When sending e-mail, please put the text [css3-mediaqueries] in the subject if your comments are about mistakes in this document, or [css4-mediaqueries] for other discussions about Media Queries.
Alternatively you can email one of the editors and ask them to forward your comment.
How to unprefix -webkit-device-pixel-ratio
Once upon a time, Webkit decided a media query for the screen resolution was needed. But rather than using the already-standardized resolution media query, they invented -webkit-device-pixel-ratio. The resolution media query can take “dots per inch” and “dots per centimeter”, while -webkit-device-pixel-ratio takes “dots per px”. But these are all fundamentally the same thing because 1in = 96px = 2.54cm. (Granted, not all of this was well-understood in 2006, so we can forgive Webkit for making something up.)
So to unprefix -webkit-device-pixel-ratio all you have to do is convert it to resolution—which is already implemented by all the other browsers. The easiest way is to multiply the value by 96 and append dpi. Like this:
@media (-webkit-min-device-pixel-ratio: 2), /* Webkit */
(min-resolution: 192dpi) /* Everyone else */ {
...
}
But wait! you say. I don’t want to do math! Can’t the CSSWG standardize device-pixel-ratio so I don’t have to do math? We could… but then we’d have two features that do exactly the same thing. And typing device-pixel-ratio is awkard, isn’t it? So instead, we added the dppx unit to mean “dots per px”. This way, we can avoid dpi math not just in media queries, but anywhere else that takes a <resolution>, too. Instead of having to add a new device-pixel-resolution query, browsers can just implement the new dppx unit (which is already in CR) for the old resolution query. Then you can just write (min-resolution: 2dppx).
Some caveats: Several early implementations of resolution use the device’s physical resolution rather than its CSS resolution, and in these resolution: 192dpi is not necessarily equivalent to -webkit-device-pixel-ratio: 2. (This is likely to be more of a problem for ratios less than 2.) Since all implementations that support dppx will do so correctly, you can target them by using dppx rather than dpi.
@media (-webkit-min-device-pixel-ratio: 1.5), /* Webkit */
(min-resolution: 1.5dppx) /* The Future */
...
}
Flexbox Last Call, Box Alignment First Draft
Today the CSS Working Group published a Last Call Working Draft of the CSS Flexible Box Layout Module and a First Public Working Draft of the CSS Box Alignment Module Level 3.
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.
Box Alignment defines a common set of properties for aligning boxes within their containers in the various CSS box layout models: block layout, table layout, flex layout, and grid layout. In particular, it attempts to provide the horizontal and vetical alignment capabilities missing from CSS block layout and to tie that together with alignment models in tables, grid, and flexbox.
Box Alignment is in the unstable “exploratory” stages of design. However the property names and their effect on flex elements is at Last Call in the CSS Flexible Box Layout module, and will be frozen when that advances to Candidate Recommendation.
The CSS Flexible Box Layout Module is now in Last Call. The deadline for comments is 3 July 2012. There have been many significant changes since the last Working Draft: all of the alignment properties were renamed to coordinate with the Box Alignment module, and substantial parts of the algorithm have been rewritten for clarity and error-correction. We strongly encourage anyone interested in this module to review the draft and send in comments ASAP so that we can process them into a Candidate Recommendation by early July.
As always, please send feedback to the (archived) public mailing list www-style@w3.org with the appropriate spec code ([css3-flexbox] or [css3-align]) and your comment 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-06-06
- Resolved: Transitions, Transforms, and Animations may be released unprefixed.
- Resolved: Write document explaining prefixing policy as WG Note.
- Resolved: Publish FPWD of Box Align, with corrections & note about how Block and Table interaction is still uncertain.
- Tab and Florian summarized the state of the variables syntax debate.
- Resolved: Initial value of
flex is 0 1 auto.
- Resolved: Omitted
flex-shrink in the flex shorthand always uses the initial value.
- Resolved: Publish Flexbox as LC.
Full minutes
Minutes and Resolutions Telecon 2012-05-30
- Resolved: Support the publishing of Fullscreen provided the edits (in minutes) are made.
- Resolved: Switch before/after logical directions to head/foot (globally, across all of CSS)
- Resolved: Tab and fantasai to decide on directional keywords for alignment. [See follow-up]
Full minutes
Minutes and Resolutions Telecon 2012-05-23
- Resolved: jdaggett’s proposal to resolve the
font-family syntax issue is accepted, exact wording to be settled on list.
- Resolved: Alignment properties to be named
justify-self / justify-content / justify-items (inline/main axis)
align-self / align-content / align-items (block/cross axis)
- Resolved: Use
space-between/space-around as keywords instead of justify/distribute
- Resolved: Rename
flex-order to order
Full minutes
Minutes and Resolutions Hamburg F2F May 2012: Miscellaneous
Administrative and Testing
- The CSSWG is getting overloaded; discussed ways of scaling the WG resolution process to handle the higher flux of issues. Some ideas, no conclusions.
- Tentatively scheduling F2Fs in Tucson next February and Tokyo in May.
- Resolved: Send Style Attributes spec to PR once implementation reports are published on www.w3.org.
- Håkon encourages people to review the new tests in the multi-col test suite.
- Discussed separating the test approval process from the test review process, as we did for 2.1
Full minutes
XSL:FO and CSS3 Layout
- Liam Quin presented an overview of XSL:FO and proposed folding the remainder of the XSL:FO WG into CSS
- Bert Bos presented on a collection of various layout challenges and how they can or cannot be solved with proposals in the CSSWG
- Steve Zilles started a discussion on harmonizing the divergent CSS3 layout proposals
Full minutes
Spec Editing
- vhardy showed off a tool to help editors synchronize specs with Bugzilla
- plinss explained plans to host test-annotated /TR specs
Full minutes
Minutes and Resolutions Hamburg F2F May 2012: Text Layout and Typography
CSS3 Text
- Resolved: Pending Jonathan Kew’s okay, keep
text-transform:capitalize word-boundary rules undefined, with only an informative reference to UAX29.
- Resolved: Disallow combinations of values in
text-transform for this level.
- Resolved: Changing currentColor to resolve at used-time is okay with the SVGWG; we’re just waiting on Color to be errata’d.
- Resolved: The behavior of
letter-spacing at element boundaries is kept as-is in the draft. A note should be added about using padding to put extra spacing on either side of an element, for the use-cases in which that is important.
- Resolved: Remove the
avoid value from text-wrap.
- Resolved: Remove the longhands (
text-wrap, text-space-collapse) for white-space.
- Resolved: Change
overflow-wrap back to word-wrap. Allow CSS Property Aliasing (future spec) to define that it aliases to overflow-wrap. Next time Text revs, change the property name officially and talk about aliasing.
- Resolved: Drop the
full-size-kana value from text-transform in level 3.
- Resolved: Don’t change
nowrap keyword, even though it’s lack of a hyphen is confusing.
CSS3 Writing Modes
- Resolved: Nobody cares too strongly, so fantasai should decide whether to use
isolate bidi-override or isolate-override.
- Resolved: no UA dependent values for text-orientation
- Resolved: Put our own table of behaviors for
mixed-right and upright values in the Writing Modes spec until UTR50 stabilizes.
CSS3 Fonts
- Resolved: Fallback for font-variant-position occurs per run rather than per-glyph.
- Resolved: The
font-variant-position property is defined independent of the existing use of the font-size/vertical-align properties to synthesize subscripts/superscripts.
- Discussed small-caps fallback per-script rather than per-font, and using text-transform rules for synthesizing small-caps.
- Noted some proposed updates to prose for
font-family syntax to match CSS 2.1 errata.
Full minutes: Writing Modes and Text, Fonts
Minutes and Resolutions Hamburg F2F May 2012: Shaping and Paging Flows
Regions
Alan and Florian presented several ideas for generating styleable
pseudo-elements to hold content flows:
overflow: repeat, which would redirect overflow into creating a repetition of the element as it’s sibling. Individual repetitions can be targetted and styled with an ::nth-copy(An+B) pseudo-selector.
- A generic
::slot() pseudo element
- A Page Templates proposal
There was consensus to replace all the examples in Regions with some combination of the above techniques. There was also consensus that the proposals need to be developed further, and that overlap and interaction among them needs to be carefully considered.
Shapes and Exclusions
- Discussed how shapes/exclusions impact wrapping content. (It’s just like floats.)
- Discussed using background images to define shapes/exclusions
- Discussed concerns about mixing with absolute positioning and the resulting collision-prone layouts.
GCPM
- Reviewed some features in GCPM, including new float keywords,
columns() notation in float property, and float position snapping.
Fragmentation
- Resolved: The gap between a breakpoint and the end of the page does consume specified height. The box’s background and border are only drawn in that gap if
box-decoration-break is slice and the element has auto height.
- Resolved: Publish an updated Working Draft of CSS3 Fragmentation in a week after edits announced if there are no objections.
Full minutes: Regions, Shapes, and Exclusions, GCPM and Fragmentation
Minutes and Resolutions Hamburg F2F May 2012: Layout, Values and Units
Box Alignment
fantasai presented a proposal to converge all layout models on a single set of alignment properties.
- Resolved: fantasai to continue working on this proposal
- Resolved: flexbox alignment properties to be renamed to css3-align equivalents.
Grid Layout
- Resolved: rename the values of grid-flow so that row adds rows, column adds columns, and layer just stacks grid items on top of each other.
- Resolved: add row-gap and column-gap to the specification such that they provide uniform gutters
- Also discussed scoping of Grid Layout vs. Template, ways to remove overlap, and scoping things for Level 1 vs. higher. No conclusions.
Values and Units
- Resolved: Disallow values with commas in toggle() at this level. (LC Issue 12)
- Resolved: Won’t fix level-skipping in this level (except we’re renaming to toggle() because of it). (LC Issue 13)
- Resolved: Rename
cycle() to toggle(), leave behavior as is.
- Resolved: Fix error the UA stylesheet rule for
<ul>. (LC Issue 14)
- Resolved: Add a note to clarify computed style comparisons better. (LC Issue 15)
- Resolved: Reject deferring cycle() to L4. (LC Issue 16)
Full minutes: Box Alignment and Grid Layout, Values and Units
![[Photo: group photo of the CSS working group in Lyon, France]](/web/20120619181210im_/http://www.w3.org/Style/CSS/csswg-2010.jpg)
Contact: