The future of style

The Future of Style aggregates posts from various blogs that talk about the development of Cascading Style Sheets (CSS) [not development with Cascading Style Sheets]. While it is hosted by the W3C CSS Working Group, the content of the individual entries represent only the opinion of their respective authors and does not reflect the position of the CSS Working Group or the W3C.

Latest articles

The 2017 edition of the CSS Day will take place on the 16th …

Source: W3C's Cascading Style Sheets home page22 February 2017

16 Jun 2017 The 2017 edition of the CSS Day will take place on the 16th of June (in Amsterdam). Speakers include Tab Atkins, Jen Simmons, Rachel Andrew, Håkon Wium Lie and Bert Bos.

CSS Containment First Public Working Draft

Source: CSS WG Blog Florian Rivoal • 22 February 2017

The CSS Working Group has published a First Public Working Draft of CSS Containment.

This CSS module describes the contain property, which indicates that the element’s subtree is independent of the rest of the page. This enables heavy optimizations by user agents when used well.

Even though this is only the First Public Working Draft, the specification has spent quite some time maturing as an Editor Draft already, and is fairly stable. Detailed reviews and experiments by implementers are welcome, as we may try to move this forward to CR before too long.

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-contain]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

Release Notes for Safari Technology Preview 24

Source: Surfin' Safari Jon Davis • 22 February 2017

Safari Technology Preview Release 24 is now available for download for macOS Sierra. If you already have Safari Technology Preview installed, you can update from the Mac App Store’s Updates tab. This release covers WebKit revisions 211256-212356.

User Timing

Link Preload

Web API

JavaScript

CSS

Web Inspector

Accessibility

Rendering

Performance

Security

The CSS WG published the first Working Drafts of CSS Contain…

Source: W3C's Cascading Style Sheets home page21 February 2017

21 Feb 2017 The CSS WG published the first Working Drafts of CSS Containment Module Level 1 and CSS Timing Functions Level 1

Updated Working Drafts: CSS Display, CSS Sizing, CSS Box Alignment

Source: CSS WG Blog Tab Atkins Jr. • 17 February 2017

The CSS Working Group has published several updated Working Drafts:

CSS Display Module Level 3

This module describes how the CSS formatting box tree is generated from the document element tree and defines the display property that controls it. Additions since CSS2 include: a flow-root value to create a block formatting context root (BFC), a contents value to discard the element’s box but keep its children, inline list items, a run-in layout model slightly less wonky than the one proposed in CSS2.0. Significant changes since the last publication are listed in the changes section.

We anticipate this being the last draft before the transition to Candidate Recommendation, therefore this is the “last call” for comments.

CSS Intrinsic and Extrinsic Sizing Module Level 3
This module extends the CSS sizing properties with keywords that represent content-based “intrinsic” sizes and context-based “extrinsic” sizes, allowing CSS to more easily describe boxes that fit their content or fit into a particular layout context. Significant change ssince hte last publicaiton are listed in the changes section and include renaming the fill keyword to stretch to match the similar stretch option in the alignment properties. Remaining work prior to Candidate Recommendation includes addressing issues in the extrinsic sizing section (which includes stretch) and handling replaced elements’ interaction with the intrinsic sizing keywords.
CSS Box Alignment Module Level 3
This module contains the features of CSS relating to the alignment of boxes within their containers in the various CSS box layout models: block layout, table layout, flex layout, and grid layout. This update incorporates several rounds of changes to the baseline alignment rules as well as the following syntactic changes:
  • Dropped hyphen in first-baseline and last-baseline. See discussion for rationale.
  • Added place-* as shorthands for align-* + justify-*.
  • Dropped fallback alignment feature for distribution keywords; this is due to their incompatibility with shorthanding. Alternate syntaxes are under investigation in Issue 1002, along with a potential syntactic restriction on safe/unsafe in Issue 1001 to allow better integration with the shorthands.

We are hoping to take this module to CR this year. In the meantime, we are looking for

  • Reviews of baseline alignment and other details.
  • Input on the open issues.
  • More illustrations, if anyone wants to draw them. 🙂
  • Any other feedback

As always, 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-display], [css-sizing], [css-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 Telecon 2017-02-15

Source: CSS WG Blog Dael Jackson • 16 February 2017

The CSS WG updated the Working draft of CSS Box Alignment Mo…

Source: W3C's Cascading Style Sheets home page15 February 2017

15 Feb 2017 The CSS WG updated the Working draft of CSS Box Alignment Module Level 3

Weekend Reading Links

Source: Web Directions BlogJohn • 10 February 2017

Things I’ve Been Reading

A fortnightly collection of links to online articles, news and resources of interest to people working on the web.

Automating Visual Testing

At Web Directions events we frequently cover testing and a key to this is, of course, automation (see also Atul Gawande‘s Checklist Manifesto, which we mentioned in a newsletter last year and was the foundation for a great presentation by Jeremy Nagel at Web Directions 2015, “Checklist Driven Development” [you can watch the popular 20 minute video here]) but an area I don’t see talked about all that much is automated visual regression testing.

There are a number of tools, like PhantomCSS (covered in detail in this SitePoint article) and hosted services like SiteEffect, but this week I stumbled across an article by Tom Partington at REA on Automated visual checking of deployments with ImageMagick. See how they ensure “greater confidence that each continuous deployment of our home page is issue free.”

Inherent Value Testing

“Is your web site chartered with encouraging people to buy or use your product or service? Is it succeeding? It turns out there is a simple usability testing technique that can help you measure how your site communicates your product’s inherent value.”

Jared Spool, who spoke at last year’s inaugural Transform conference, considers how we look for not what’s broken about our site (or company’s service), but what isn’t, in this article about what he terms ‘inherent value testing’. When services undergo significant change (as LinkedIn has recently done in terms of its UI), its most loyal users often react strongly to the movement of their cheese.

Jared considers how we can identify and ensure the inherent values of our offerings when considering change.

Creating Good Content in Government

“Government has a complicated relationship with content. We publish too much, information can be hard to understand, and users often find it hard to work out what we are asking them to do. Research shows that 50% of users of government services experience difficulty finding information online. Of those, 24% resort to making a telephone call.* This is despite the hard work that many Australian public servant content and web teams do on a daily basis.”

So, how can folks in Government – and anywhere, really – do better? Libby Varcoe, Content Community Lead at the Digital Transformation Agency and Darren Menachemson from ThinkPlace look at some practical techniques in this piece published this week.

Things I’ve Been Listening To

Atul Gawande, whose “Checklist Manifesto” I referred to above in conversation with Ezra Klein, founder of Vox Magazine. Gawande is also a feature writer for the New Yorker, a surgeon, and a self confessed health care policy wonk, who worked on campaigns for Bill Clinton, Al Gore and Gary Hart.

Klein’s podcast is full of fascinating conversations with a huge variety of extraordinary people (another recent favourite is his conversation with Slack CEO Stewart Butterfield, also founder of Flickr and the original 5K competition).

I know, I know – lots of men talking with each other, but there are some great interviews with women there too.

The post Weekend Reading Links appeared first on Web Directions.

Minutes Telecon 2017-02-08

Source: CSS WG Blog Dael Jackson • 09 February 2017

Full Minutes

The CSS WG updated the Candidate Rcommendations of CSS Fragm…

Source: W3C's Cascading Style Sheets home page09 February 2017

9 Feb 2017 The CSS WG updated the Candidate Rcommendations of CSS Fragmentation Module Level 3, CSS Grid Layout Module Level 1 and CSS Scroll Snap Module Level 1

The CSS WG updated the Working Draft of CSS Intrinsic & Extr…

Source: W3C's Cascading Style Sheets home page07 February 2017

7 Feb 2017 The CSS WG updated the Working Draft of CSS Intrinsic & Extrinsic Sizing Module Level 3

What’s new in Chromium 56 and Opera 43

Source: Dev.OperaSimon Pieters • 07 February 2017

Opera 43 (based on Chromium 56) for Mac, Windows, Linux is out! To find out what’s new for users, see our Desktop blog. Here’s what it means for web developers.

Prerender from address bar

Opera will now prerender pages that are typed into the address bar, before the user hits enter, which can make the page finish loading much sooner.

If you can predict what the user’s likely next navigation will be, you can start a prerender from the current page by using <link rel=prerender>. This has actually been supported since Opera 15, but this seemed like a good opportunity for a reminder. 🙂 For more information about how to use prerender and other resource hints, see Resource Hints – What is Preload, Prefetch, and Preconnect? by Brian Jackson.

Opera now allows users to select link text instead of always dragging the link (like in Opera 12). The user can select by dragging left or right, and start a drag-and-drop by dragging up or down.

Not being able to select text to copy and paste is often frustrating for users. But in some cases it can be justified, like if a link is being used to act as a button, or if text is used only for decoration. To disable text selection in general, CSS user-select: none can be used.

Scroll anchoring intervention

When some content changes above the viewport (e.g., an image is loaded), what used to happen is that the rest of the content is pushed down. With the scroll anchoring intervention the scroll position is updated to keep the content currently in the viewport stable. This behavior can be disabled for a specific subtree or for the whole page by using CSS overflow-anchor: none. See this video for a comparison with and without this intervention.

CSS

HTTP Referrer-Policy header

The new Referrer-Policy HTTP header allows sites to forward site traffic by URL without leaking the user’s session identifier or other private information.

Events: keyboardEvent.isComposing

The KeyboardEvent interface now supports the isComposing attribute which returns true if this event is fired between compositionstart and compositionend events.

Canvas

ImageBitmapRenderingContext can be used to reduce memory consumption and compositing overhead by rendering pixel data in the form of an ImageBitmap.

Audio/video

Shadow DOM

Deprecated and removed features

What’s next?

If you’re interested in experimenting with features that are in the pipeline for future versions of Opera, we recommend following our Opera Developer stream.

Minutes Telecon 2017-02-01

Source: CSS WG Blog Dael Jackson • 02 February 2017

Full Minutes

The CSS WG published the Note CSS Snapshot 2017

Source: W3C's Cascading Style Sheets home page31 January 2017

31 Jan 2017 The CSS WG published the Note CSS Snapshot 2017

Release Notes for Safari Technology Preview 22

Source: Surfin' Safari Jon Davis • 27 January 2017

Safari Technology Preview Release 22 is now available for download for macOS Sierra. If you already have Safari Technology Preview installed, you can update from the Mac App Store’s Updates tab. This release covers WebKit revisions 210274-210845.

JavaScript

CSS

Form Validation

Web Inspector

Web API

Media

Rendering

Security

Note Safari WebDriver is broken in this release. We expect this will be fixed in release 23.

Minutes Telecon 2017-01-25

Source: CSS WG Blog Dael Jackson • 26 January 2017

Full Minutes

The CSS WG updated the Working Draft of CSS Display Module L…

Source: W3C's Cascading Style Sheets home page26 January 2017

26 Jan 2017 The CSS WG updated the Working Draft of CSS Display Module Level 3

Release Notes for Safari Technology Preview 21

Source: Surfin' Safari Jon Davis • 11 January 2017

Safari Technology Preview Release 21 is now available for download for macOS Sierra. If you already have Safari Technology Preview installed, you can update from the Mac App Store’s Updates tab. This release covers WebKit revisions 209803-210274.

JavaScript

Fetch API

IndexedDB 2.0

CSS

Rendering

Accessibility

Web API

Web Inspector

Security

Bug Fixes

Minutes Telecon 2017-01-04

Source: CSS WG Blog Dael Jackson • 05 January 2017

Full Minutes

Minutes Telecon 2016-12-21

Source: CSS WG Blog Dael Jackson • 22 December 2016

Full Minutes

Release Notes for Safari Technology Preview 20

Source: Surfin' Safari Jon Davis • 21 December 2016

Safari Technology Preview Release 20 is now available for download for macOS Sierra. If you already have Safari Technology Preview installed, you can update from the Mac App Store’s Updates tab. This release covers WebKit revisions 209238-209803.

Visual Viewport

Touch Bar

JavaScript

Web API

Security

CSS

Pointer Lock

Web Inspector

WebCrypto API

Bug Fixes

CSS is 20 years old!

Source: W3C's Cascading Style Sheets home page17 December 2016

17 Dec 2016 CSS is 20 years old!

Minutes Telecon 2016-12-14

Source: CSS WG Blog Dael Jackson • 14 December 2016

Full Minutes

Minutes Telecon 2016-12-07

Source: CSS WG Blog Dael Jackson • 14 December 2016

Full Minutes

What’s new in Chromium 55 and Opera 42

Source: Dev.OperaSimon Pieters • 14 December 2016

Opera 42 (based on Chromium 55) for Mac, Windows, Linux is out! To find out what’s new for users, see our Desktop blog. Here’s what it means for web developers.

Built-in currency converter

Opera is now the first of the major browsers to add a built-in currency converter.

The user select the price they want to convert on the page and Opera will automatically show it in their local currency. Opera 42 supports conversion in 32 currencies based on daily values from the European Central Bank.

Currency symbols are supported, but for ambiguous symbols (e.g. “$”, “kr”) we recommend using the ISO 4217 alphabetic code before or after the amount, as selectable text. This makes it unambiguous for Opera’s currency converter what to convert from, but it should also be helpful for end users and other tools in general.

<p>USD 50</p>
<p>995 SEK</p>

Input handling improvements

The PointerEvent standard is now supported. It gives developers a unified API for handling “pointer” user input, whether that is mouse, touch, pen, etc. PointerEvent also does not block scrolling, which should reduce jank during scrolling. When using TouchEvent, the same performance benefit can be achieved using passive event listeners. The touch-action CSS property is now also supported, to allow reacting to gestures such as panning. For more information, see Pointing the Way Forward by Sérgio Gomes.

The auxclick event is now fired for non-primary mouse buttons, instead of click.

JavaScript async and await

The async and await keywords are now supported, which allows writing Promise-based JavaScript with a neater syntax, and enables use of try/catch to catch rejected promises.

async function myFirstAsyncFunction() {
        try {
                const fulfilledValue = await promise;
        }
        catch (rejectedValue) {
                // …
        }
}

For more information, see Async functions - making promises friendly by Jake Archibald.

CSS automatic hyphenation

The hyphens CSS property is now supported (on Mac), which can be used to enable automatic hyphenation when text is broken across multiple lines. Possible values are none, manual (initial value) and auto.

For none, hyphenation will not happen even when &shy; is used. For manual, hyphenation only happens for &shy;. For auto, automatic hyphenation happens, based on the language specified in the lang attribute.

html { hyphens: auto; }
code { hyphens: manual; }

See demo.

once event listener option

The once event listener option` is now supported, for a convenient way to only invoke an event listener once and then remove the listener.

element.addEventListener('click', function(event) {
        // ...one-time handling of the click event...
}, {once: true});

For more information, see Once Upon an Event Listener by Jeff Posnick.

Persistent storage

Persistent storage is now on by default.

TLS

New constructors

new MediaStreamTrackEvent(type, options) and new AudioNode(context, options) constructors are now available.

document.write() intervention

Cross-origin and parser-blocking scripts injected using document.write() will no longer load over 2G connections. See this article by Paul Kinlan for more information.

Deprecated and removed features

What’s next?

If you’re interested in experimenting with features that are in the pipeline for future versions of Opera, we recommend following our Opera Developer stream.

Release Notes for Safari Technology Preview 19

Source: Surfin' Safari Jon Davis • 07 December 2016

Safari Technology Preview Release 19 is now available for download for macOS Sierra. If you already have Safari Technology Preview installed, you can update from the Mac App Store’s Updates tab. This release covers WebKit revisions 208427-209238.

Touch Bar

HTML Form Validation

Pointer Lock API

Input Events

URL Parser

Custom Elements

CSS Font Loading

Shadow DOM

Web Inspector

Rendering

Indexed Database 2.0

Accessibility

WebDriver

Media

Security

Bug Fixes

Minutes Telecon 2016-11-30

Source: CSS WG Blog Dael Jackson • 01 December 2016

Full Minutes

Minutes Telecon 2016-11-23

Source: CSS WG Blog Dael Jackson • 24 November 2016

Full Minutes

Efficient representation for Web formats

Source: W3C Blog Daniel Peintner • 22 November 2016

EXI is a format that sends an efficient data stream of parse events that can have noticeable, measurable savings in CPU, memory and bandwidth. Test results have consistently shown EXI advantages for XML, HTML, and now CSS/JavaScript minify, over gzip and zip formats. You may want to look at EXI overview presentation for CSS.

Since the start of the EXI Working Group, the focus of group members has been to make XML interchange more efficient. Participants plan to further continue this effort by making improvements to what has been achieved by EXI and its related specifications. We are now exploring how to consistently apply EXI approaches to other Web formats besides XML.

The acronym “EXI” now stands for “Efficient Extensible Interchange” instead of “Efficient XML Interchange.” This adjustment indicates that EXI is not only useful for XML documents, but improves compactness and performance across many Web technologies.

We encourage everyone to take a look at how EXI for JSONEXI for CSS, and EXI for JavaScript work.  All comments are of interest.  We are looking to

Multiple EXI implementations are available.  Public participation and feedback are welcome!  Send a comment to EXI participants through the public-exi@w3.org mailing list or leave a comment here in the blog. Thanks for considering these possibilities for the Web.

Minutes Telecon 2016-11-16

Source: CSS WG Blog Dael Jackson • 17 November 2016

Feeds

The Future of Style features:

If you have a post you want to add to this feed, post a link (or the whole thing) on the CSS3 Soapbox. If you own a blog with frequent posts about the future of CSS, and want to be added to this aggregator, please get in touch with fantasai.

fantasai

Made with CSS! Valid CSS!Valid HTML 4.0! RSS feed Atom feed