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

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.)

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

Source: W3C's Cascading Style Sheets home page16 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.

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

Release Notes for Safari Technology Preview 18

Source: Surfin' Safari Jon Davis • 16 November 2016

Safari Technology Preview Release 18 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 208261–208427.

Input Events

JavaScript

Shadow DOM

Web Inspector

CSS

Rendering

Indexed Database 2.0

Accessibility

Printing

HTTP Authentication

Web APIs

Release Notes for Safari Technology Preview 17

Source: Surfin' Safari Jon Davis • 09 November 2016

Safari Technology Preview Release 17 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 207669–208261.

Safari Extensions

Custom Elements

Web APIs

Input Events

URL Parser

Fetch API

JavaScript

Web Inspector

CSS

Media

Networking

Indexed Database 2.0

Bug Fixes

Variable Fonts on the Web

Source: Surfin' SafariMyles Maxfield • 08 November 2016

This year, at the ATypI typography conference in Warsaw, representatives from Adobe, Microsoft, Apple, and Google presented an exciting development in typography: support for variable fonts in OpenType fonts. Font variations are best shown with an example:

Here, you can see the weight of San Francisco being animated on iOS. As you can see, the weights are continuously interpolated, allowing for weights between the previously-available weights of this font. (You can try it here using Safari Technology Preview only on macOS Sierra.)

However, variations can do more than simply change the weight of a font. A font can expose any number of axes, each one controlling a different aspect of the font. The user (or browser) can select a floating-point value to apply to each axis, and each value will contribute to the font’s final look.

In addition to finer-grained control over the font’s look, a font variation can improve loading performance for a website if multiple faces of the same family are used. Currently, a website may load two weights of a font independently, which can lead to a significant amount of duplicated data. Instead, a website may choose to use a font variation and simply apply different variation values to the same font, thereby eliminating the duplicated data and only downloading a single font.

Font weight and width variations

Even with just two axes (weight and width), a single font can be used in a variety of typographical situations. Using the same font file repeatedly with different variations can dramatically decrease the loading time of a website. (This example can be seen here using Safari Technology Preview only on macOS Sierra.)

CSS

The W3C is currently drafting a way to describe variation axis values in CSS. The current draft divides axes into three groups: font selection, common, and other.

There are four CSS properties which affect which fonts are selected to be used in the document: font-weight, font-stretch, font-style, and font-size. With font variation support, each of these four properties will accept a numerical value which will both affect font selection as well as be applied to the font after it is selected. Therefore, a web site declaring font-weight: bold may cause a variable font to be selected, and then bold applied to that variable font. Naturally, CSS animations are supported in all these properties, because the values can be smoothly interpolated. These properties are expected to match the most common variation axes, so most CSS authors won’t need to learn any new properties.

font-weight: 791; /* Intermediate value between 700 and 800. */

Other than the above properties, any well-known or common variation axes will get their own CSS properties. Currently, there is only one axis in this group: optical-sizing. As new variation axes become popular, new properties will be added to control those axes.

Lastly, font creators may wish to include axes which are uncommon or not well known. In this situation, a web author should be able to set these axes without requiring the browser to implement new CSS properties. Therefore, the lowest-level font-variation-settings CSS property allows web authors to specify axis names as CSS values as well as their associated variation values. Similarly to the other properties, font-variation-settings also supports CSS animations. Because this property is only intended to be used as an escape hatch in case no higher-level property exists, it should only be used rarely, if ever.

font-variation-settings: "XHGT" 0.7;

Implementation

While the above announcement is regarding variation support in OpenType fonts, TrueType has had variation support for many years. In fact, all of the operating systems Apple ships currently include system APIs for TrueType font variations. Because of this, I have started implementing font variation support in WebKit in relation to the existing TrueType font support in the platform. Currently, I’ve only implemented the lowest-level font-variation-settings property, but I’m very excited to implement the complete support as soon as I’m able. Please try the existing support out in a Safari Technology Preview only on macOS Sierra and let me know how it works for you!

If you have any questions or comments, please contact me at @Litherum, or Jonathan Davis, Apple’s Web Technologies Evangelist, at @jonathandavis or web-evangelist@apple.com.

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