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.
order affects painting order.
background-attachment: fixed; in transformed elements; vendors to investigate their implementations.
recto/verso values to (page-)break-before/after in CSS3 Fragmentation.
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.
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 */
...
}
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.)
flex is 0 1 auto.
flex-shrink in the flex shorthand always uses the initial value.
font-family syntax issue is accepted, exact wording to be settled on list.
justify-self / justify-content / justify-items (inline/main axis)
align-self / align-content / align-items (block/cross axis)
space-between/space-around as keywords instead of justify/distribute
flex-order to order
text-transform:capitalize word-boundary rules undefined, with only an informative reference to UAX29.
text-transform for this level.
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.
avoid value from text-wrap.
text-wrap, text-space-collapse) for white-space.
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.
full-size-kana value from text-transform in level 3.
nowrap keyword, even though it’s lack of a hyphen is confusing.
isolate bidi-override or isolate-override.
mixed-right and upright values in the Writing Modes spec until UTR50 stabilizes.
font-variant-position property is defined independent of the existing use of the font-size/vertical-align properties to synthesize subscripts/superscripts.
font-family syntax to match CSS 2.1 errata.
Full minutes: Writing Modes and Text, Fonts
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.
::slot() pseudo element
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.
columns() notation in float property, and float position snapping.
box-decoration-break is slice and the element has auto height.
Full minutes: Regions, Shapes, and Exclusions, GCPM and Fragmentation
Browse by date:
Browse by category: