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

W3C holds a developer meetup in Fukuoka (Japan) on the eveni…

Source: W3C's Cascading Style Sheets home page23 May 2019

22 Oct 2019 W3C holds a developer meetup in Fukuoka (Japan) on the evening of Monday 16 September 2019. Among the speakers are Ada Rose Cannon, Lin Clark and Alice Boxhall. The program also includes demos of several new W3C technologies. (Free, registration required)

Updated Working Draft of CSS Sizing Level 3

Source: CSS WG Blogfantasai • 23 May 2019

The CSS Working Group has published an updated Working Draft of CSS Sizing Level 3 . This module describes the various CSS sizing properties like width/height/etc. Level 3 extends them with keywords that represent content-based “intrinsic” sizes, allowing CSS to more easily describe boxes that fit their content or fit into a particular layout context. It also defines a lot of the key sizing terminology used throughout our layout specs.

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

First Public Working Draft of CSS Color Adjustment Level 1

Source: CSS WG Blogfantasai • 23 May 2019

The CSS Working Group has published a First Public Working Draft of CSS Color Adjustment Level 1. This module introduces a model for and controls over automatic color adjustment by the user agent to handle user preferences, such as “Dark Mode”, contrast adjustment, or forced-contrast color schemes.

This is a First Public Working Draft and the features herein are subject to change. Implementers should track open issues and ongoing discussions.

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-color-adjust-1]) 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 2019-05-22

Source: CSS WG BlogDael Jackson • 23 May 2019

Full Meeting Minutes

Updated Working Draft: CSS Intrinsic & Extrinsic Sizing …

Source: W3C's Cascading Style Sheets home page22 May 2019

22 May 2019 Updated Working Draft: CSS Intrinsic & Extrinsic Sizing Level 3.

New Working Draft: CSS Color Adjust Level 1.

Source: W3C's Cascading Style Sheets home page21 May 2019

21 May 2019 New Working Draft: CSS Color Adjust Level 1.

Minutes Telecon 2019-05-15

Source: CSS WG BlogDael Jackson • 15 May 2019

Full Meeting Minutes

Release Notes for Safari Technology Preview 82

Source: Surfin' Safari 15 May 2019

Safari Technology Preview Release 82 is now available for download for macOS Mojave and macOS High Sierra. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS Mojave and from the Mac App Store’s Updates tab on macOS High Sierra. After updating to macOS Mojave, you may have to reinstall Safari Technology Preview.

This release covers WebKit revisions 244684-245007.

Web API

JavaScript

Media

Storage

CSS

Accessibility

Web Inspector

Web Driver

Web Authentication

WebGPU

Browser Changes

Dark Mode in Web Inspector

Source: Surfin' Safari10 May 2019

Web Inspector on macOS Mojave now supports Dark Mode.

Web Inspector: Light/Dark color schemes

Dark Mode in Web Inspector was introduced in Safari Technology Preview last year. This article highlights implementation details which could be helpful for anyone adapting Dark Mode for their websites or web views.


How do I enable Dark Mode for Web Inspector?

Web Inspector matches macOS appearance. To enable Dark Mode in macOS Mojave, go to “System Preferences → General” and select “Appearance: Dark” (see How to use Dark Mode on your Mac for more details). Note that it’s not possible to enable Dark Mode only for Web Inspector.

Dark Mode in Web Inspector is supported in macOS Mojave and later.

Why Dark Mode isn’t supported on macOS 10.13 High Sierra and below?
Web Inspector uses native form controls. macOS Mojave has a dark version of each form control (text fields, buttons, checkboxes, drop-downs, radio buttons, and etc.).

Dark form controls on dark background and light form controls on light background in macOS Mojave

macOS 10.13 High Sierra and below don’t support Dark Mode and only have light version of form controls. Without the proper form control styles, Dark Mode experience would be inconsistent so we decided not to do it.


Resources tab: light/dark color schemes

We tried to preserve syntax highlighting colors of the light theme. To keep text readable, we increased luminosity — by increasing brightness and sometimes changing the hue.

Network tab: light/dark color schemes

For some cases, like the bars in Network tab, we didn’t have to change anything. The same colors are readable in both light and dark themes.

Console tab

SVG and currentColor

Instead of maintaining a separate set of icons for Dark Mode, we changed the colors of the existing icons with CSS wherever possible.

SVG Icons

Most of Web Inspector icons are SVG files included inline in HTML:

<svg style="color: blue">
    <use xlink:href="Images/Paint.svg#root"/>
</svg>

Paint.svg:

<svg>
    <path fill="currentColor" d="..."/>
</svg>

currentColor is the color of the parent element. In this example, it’s blue.

currentColor only works for inline SVGs. It doesn’t work for SVGs included via <img> element or CSS (e.g. via background-image or content). For these cases, we used CSS filters to invert the colors.

CSS filters

The very first iteration of Dark Mode in Web Inspector was a single CSS rule:

body {
  filter: invert()
}

Inverting colors rotated the hue by 180 degrees. Notice how the selected color changed from blue to orange. We fixed that by rotating the hue another 180 degrees:

body {
   filter: invert() hue-rotate(180deg)
}

This had several issues. The colors didn’t exactly match the Dark Mode Human Interface Guidelines. The dark shadows turned light.

We ended up not using this filter for body, but we used it for icons included via CSS (e.g. via background-image or content), where currentColor didn’t work.

CSS variables

Implementing Dark Mode took over 1,000 lines of CSS. We used CSS variables extensively to reduce code duplication.

Previously, we had variable names such as --text-color-dark-gray and --text-color-light-gray. In Dark Mode, they would have to be inverted to provide desired contrast with the background: --text-color-dark-gray would become light gray, and --text-color-light-gray would become dark gray.

We started using semantic names such as --text-color-secondary instead of --text-color-dark-gray, and --text-color-tertiary instead of --text-color-light-gray.

Contributing

Please report bugs regarding Dark Mode in Web Inspector on webkit.org/new-inspector-bug. Make sure to include “Dark Mode” in the title.

If you’re interested in contributing or have any questions, please stop by the #webkit-inspector IRC channel.

Dark Mode Support in WebKit

Source: Surfin' Safari09 May 2019

With the introduction of Dark Mode in macOS Mojave last year, web developers have been asking for support in Safari to style web content that matches the system appearance. With the Safari 12.1 update in macOS 10.14.4, dark mode support in WebKit has arrived.

WebKit.org Getting Started page shown in light modeWebKit.org Getting Started page shown in dark mode

Dark Mode Behaviors

By default there are no behavior changes with how pages look when a user is in dark mode. This preserves the standard assumptions web designers have had for almost thirty years — that a page defaults to a white background and black text. To change these defaults in dark mode would be a web compatibility nightmare.

However, this leaves a large area of the screen with potentially bright content in dark mode. For simple content, an app could transform colors in the document for dark mode. This is what Mail does in macOS Mojave — it displays simple email messages with a dark mode interpretation.

Not all web content is simple. For this reason Safari and WebKit do not auto-darken web content — documents will need to opt-in to dark mode. The main way to signal that your content supports dark mode it to adopt the new color-scheme style property, specified in this proposal.

You would use this inherited property in your stylesheet like this:

:root {
    color-scheme: light dark;
}

Specifying the values light and dark on the root element lets the engine know both modes are supported by the document. This changes the default text and background colors of the page to match the current system appearance. Also standard form controls, scrollbars, and other named system colors change their look automatically. Without this declaration, it would not be safe for the engine to use dark form controls or a dark color scheme, since many documents are designed with an assumed light color scheme.

For example, this simple page, with color-scheme: light dark specified, will be entirely ready to use in both appearances.

Example page in light modeExample page in dark mode

These default background and text colors can be different values when using the high contrast accessibility mode or with different browser and system versions. You should not assume they will always be the same color values.

The color-scheme style property is also supported on style rules that select specific elements in the document, not just the root element. This is useful if you have content or components that need a specific color scheme, specifically content with form controls, since dark mode form controls would not look correct on light backgrounds.

There is also <meta name="color-scheme">, specified in this proposal. This meta tag declaration allows apps like Mail to know early on in parsing which color scheme to use for the document, as it can affect the auto-darkening transformations that get applied to the document’s colors. Declaring <meta name="color-scheme" value="light dark"> in a rich email message lets Mail know it supports its own styling for dark mode. You can also specify "light only", informing Mail that it should not transform your light color scheme email message.

Note: The color-scheme property and meta tag name were renamed from supported-color-schemes in Safari Technology Preview 81. The old name is supported by WebKit, Safari, and Mail in macOS 10.14.4. This is a developing standard that could change more in the future.

Styling For Dark Mode

Defining color-scheme will get you going for simple content. For most web content, you will need to adopt the prefers-color-scheme media query, specified in this proposal, to style elements with custom colors or images. You can use this media query anywhere media queries are supported, such as in <picture> elements or window.matchMedia() for script triggers.

The best way to deploy a dark and light color scheme in your documents is to utilize CSS variables. Then you can easily specify the colors in one place with the media query, and use those variables throughout your stylesheets. When the media query matches, the variables will change wherever they are used — auto switching with any appearance change.

Here is an example using the media query to specify color values with CSS variables:

:root {
    color-scheme: light dark;
    --special-text-color: hsla(60, 100%, 50%, 0.5);
    --border-color: black;
}

@media (prefers-color-scheme: dark) {
    :root {
        --special-text-color: hsla(60, 50%, 70%, 0.75);
        --border-color: white;
    }
}

.special {
    color: var(--special-text-color);
    border: 1px solid var(--border-color);
}

Images and Dark Mode

For most hero images, they will still look great in dark mode — they might even pop off the page more than ever! As mentioned before, you can use the prefers-color-schemes media query in <picture> elements or style rules to select a different image if you have a dark mode version.

For our simple example page, we can select a different hero image of the Mojave desert:

<picture>
    <source srcset="mojave-night.jpg" media="(prefers-color-scheme: dark)">
    <img src="mojave-day.jpg">
</picture>
Example page in light modeExample page in dark mode

You might also have images for controls or other interactive elements that you will need to update for dark mode. Many sites today have adopted vector images for these glyphs, such as SVG or web fonts. Fonts will naturally adapt to your dark mode text colors, but SVG images will need some additional styling to look correct. One trick you can use with SVG is the currentColor keyword to have embedded SVGs use the current text color — thus automatically adapting to your dark mode text colors. You can also use CSS variables to style colors inside of SVG, just like your other elements.

For specific images that you can’t style any other way, you can use a CSS invert() filter. If the image also has color, you might consider using invert() hue-rotate(180deg) to moderately preserve the image intent. In any case you should not use an overall filter on broad sections of content, since that can have high memory and performance costs. Using direct styling of colors is the best approach for color accuracy and performance.

Debugging Dark Mode

Web Inspector now includes a navigation bar button in the Elements tab to toggle dark or light mode, depending on your current overall system preference. This allows you to quickly test pages in both appearances without having to toggle the whole system appearance in System Preferences. The Styles sidebar updates to reflect the current matching rules, as well as any CSS color variables.

Dark Mode Web Inspector Toggle

Examples

As you might have noticed, if you are using Safari on macOS 10.14.4, the WebKit.org site already supports dark mode. Since we added support a while ago in Safari Technology Preview, a number of other sites have also adopted dark mode. Here are some examples you can check out today:

CSS Easing Functions (Timing Functions) Level 1 Candidate Recommendation

Source: CSS WG Blogfantasai • 02 May 2019

The CSS Working Group has published a Candidate Recommendation and invites
implementations of CSS Easing Functions Module Level 1. Easing functions allow specifying the rate of change of some value according some measure of progress; for example, the rate of change in a CSS property value over time in an animation or transition effect.

This module extracts out these “timing functions” from earlier drafts of CSS Transitions for easier re-use across CSS and SVG modules. It also adds some additional options to the steps() function.

There are no significant changes since the previous Working Draft.

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-easing]) 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 81

Source: Surfin' Safari 01 May 2019

Safari Technology Preview Release 81 is now available for download for macOS Mojave and macOS High Sierra. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS Mojave and from the Mac App Store’s Updates tab on macOS High Sierra. After updating to macOS Mojave, you may have to reinstall Safari Technology Preview.

This release covers WebKit revisions 244110-244684.

Dark Mode

JavaScript

WebRTC

Media

Layout

Accessibility

Web API

Storage

Security

Web Inspector

WebDriver

Web GPU

Privacy Preserving Ad Click Attribution

New Candidate Recommendation: CSS Easing Functions Level 1. …

Source: W3C's Cascading Style Sheets home page30 April 2019

30 Apr 2019 New Candidate Recommendation: CSS Easing Functions Level 1. Updated Candidate Recommendation: CSS Containment Level 1.

Up-to-date Working Draft of CSS Lists Level 3

Source: CSS WG Blogfantasai • 25 April 2019

The CSS Working Group has published an updated Working Draft of CSS Lists Level 3. The Lists module covers list-styling options such as changing counter styles and marker position as well as automatic counters and numbering. Level 3 introduces:

This is a significant and overdue redraft of Level 3: some experimental features were dropped and the whole draft has been streamlined and tightened up, shifting the draft from “please don’t try to implement this” to “pretty reliable”. However, there are still some open issues against Chapter 4 (Automatic Numbering with Counters), and we recommend continuing to use CSS2.1 as the definitive reference for those features until Level 3 has been fully synchronized with it. 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-lists-3]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

New Working Draft: CSS Lists Level 3.

Source: W3C's Cascading Style Sheets home page25 April 2019

25 Apr 2019 New Working Draft: CSS Lists Level 3.

Minutes Telecon 2019-04-24

Source: CSS WG BlogDael Jackson • 24 April 2019

Full Meeting Minutes

New Working Draft: CSS Spatial Navigation Level 1.

Source: W3C's Cascading Style Sheets home page23 April 2019

23 Apr 2019 New Working Draft: CSS Spatial Navigation Level 1.

Minutes Telecon 2019-04-17

Source: CSS WG BlogDael Jackson • 17 April 2019

Full Meeting Minutes

Release Notes for Safari Technology Preview 80

Source: Surfin' Safari 16 April 2019

Safari Technology Preview Release 80 is now available for download for macOS Mojave and macOS High Sierra. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS Mojave and from the Mac App Store’s Updates tab on macOS High Sierra. After updating to macOS Mojave, you may have to reinstall Safari Technology Preview.

This release covers WebKit revisions 243538-244110.

WebGPU

Web API

SVG Animation

Media

CSS

Accessibility

Web Inspector

Safari Extensions

Minutes Telecon 2019-04-10

Source: CSS WG BlogDael Jackson • 10 April 2019

Full Meeting Minutes

Release Notes for Safari Technology Preview 79

Source: Surfin' Safari 03 April 2019

Safari Technology Preview Release 79 is now available for download for macOS Mojave and macOS High Sierra. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS Mojave and from the Mac App Store’s Updates tab on macOS High Sierra. After updating to macOS Mojave, you may have to reinstall Safari Technology Preview.

This release covers WebKit revisions 242836-243538.

Web Authentication

Accessibility

Service Workers

Browser Changes

CSS

Web API

Web Inspector

W3C Strategic Highlights: Outreach to the world (W3C Training)

Source: W3C Blog Amy van der Hiel • 02 April 2019

W3C Training

(This post is part of a series recapping the October 2018 W3C Strategic Highlights and does not include significant updates since that report.)

w3cx logo

In partnership with edX, W3C started a  MOOC training program in June 2015: W3Cx.

The W3Cx Front-End Web Developer program's visual, as a rounded badge.W3Cx offers a “Front-End Web Developer” (FEWD) professional certificate program which consists of a suite of five W3Cx courses on the three foundational languages that power the Web: HTML5, CSS and JavaScript.

Over 830K people from all over the world have followed one or more of these popular W3C MOOCs (ranging from beginner to advanced levels) to learn how to build Web sites using the latest W3C Web standards, and to gain skills in one of the fastest growing careers — as demonstrated in this inspiring learner story.

By following best practices and playing with interactive examples, students are guided step by step on how to use all client-side Web development techniques to create and innovate on the Web: code modern HTML5 tags, draw and animate Web graphics, play audio&video elements, develop interactive Web apps and fun games, and much more.

New Note: Non-element Selectors Level 1.

Source: W3C's Cascading Style Sheets home page02 April 2019

2 Apr 2019 New Note: Non-element Selectors Level 1.

W3C Strategic Highlights: Outreach to the world (Developer Relations)

Source: W3C Blog Amy van der Hiel • 28 March 2019

(This post is part of a series recapping the October 2018 W3C Strategic Highlights and does not include significant updates since that report.)

W3C Developer Relations

W3C developers logoTo foster the excellent feedback loop between Web Standards development and Web developers, and to grow participation from that diverse community, the W3C team has revived its Developer Relations activities with a three-pronged approach:

W3C & MDN

MDN logo

MDN Web Docs is the cross-browser Web standards documentation that helps Web developers build the open Web. W3C Staff member Dominique Hazaël-Massieux has joined the MDN Product Advisory Board (PAB). This opens many opportunities:

Minutes Telecon 2019-03-27

Source: CSS WG BlogDael Jackson • 27 March 2019

Full Meeting Minutes

Release Notes for Safari Technology Preview 78

Source: Surfin' Safari 27 March 2019

Safari Technology Preview Release 78 is now available for download for macOS Mojave and macOS High Sierra. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS Mojave and from the Mac App Store’s Updates tab on macOS High Sierra. After updating to macOS Mojave, you may have to reinstall Safari Technology Preview.

This release covers WebKit revisions 242087-242836.

Pointer Events

Web Inspector

WebDriver

Web API

Accessibility

Media

Showcasing Australia’s Design tools

Source: Web Directions Blog John • 26 March 2019

I’ve long felt Australia punches well above its weight when it comes to developer tools. From HotDog back in the early days of the Web, to Sublime (you didn’t know Sublime is developed in Australia? Well now you do), and even to be less than 100% humble Style Master, the CSS editor that I developed for many years.

In recent years we’ve seen Linc, BuildKite, Calibre, and other great Australian developer tooling focussed companies, and last year we showcased a number of these at Web Directions Summit.

But it’s not just developer tooling where Australia is doing well. In the design tools and tooling arena, Easee (web animation tooling) and Trunk (‘Github for designers’) have both been acquired by Invision, and Interplay and Modulz (both with strong Australian connections) are sophisticated design applications in closed beta.

Showcasing Australia’s Design Tooling

So, just as we showcased a number of developer tooling companies at Summit last year, at Design we’ll be showcasing a few up and coming design tools companies with a strong Australian connection.

We’re excited to be showcasing these emerging companies and tools so if you’re attending Design (and if not, why not?) make sure you say hi!

The post Showcasing Australia’s Design tools appeared first on Web Directions.

W3C Strategic Highlights: Web for All (Web Accessibility)

Source: W3C Blog Amy van der Hiel • 25 March 2019

 

WAI icon

(This post is part of a series recapping the October 2018 W3C Strategic Highlights and does not include significant updates since that report.)

W3C “Web Content Accessibility Guidelines (WCAG)  2.1”, which became a W3C Recommendation in June, has been adopted for web content, electronic documents, and non-web software, such as native mobile applications by the three official European Standards Organizations, CEN, CENELEC, and ETSI who published an updated version of EN 301 549 “Accessibility requirements for ICT products and services”. W3C staff involvement fosters continued harmonization of formal and informal European standards with the international technical guidance from W3C.

A billion people in the world have disabilities—one out of every seven—according to the World Report on Disabilities. Helping build accessibility-supporting specifications, guidelines, evaluation and educational materials helps ensure that your own organization is improving access to the Web for people with disabilities.

Learn why accessibility is essential for people with disabilities and useful for all: watch the Video Introduction to Web Accessibility and W3C Standards (4 minutes).

Accessibility activities support W3C’s Web for All mission. The Web Accessibility Initiative (WAI) continues to help ensure a cohesive package of coordinated accessibility activities, distributed throughout the groups and areas of W3C. Notable progress include:

Accessibility reviewers for W3C specs are always welcome in the APA WG, and the RQTF is looking for industry and user community researchers.

W3C Strategic Highlights: Web for All (Internationalization (i18n))

Source: W3C Blog Amy van der Hiel • 21 March 2019

 

text and signs in different language scripts

Internationalization (i18n)

(This post is part of a series recapping the October 2018 W3C Strategic Highlights and does not include significant updates since that report.)

To live up to the “World Wide” portion of its name, and for the Web to truly work for stakeholders all around the world, there must be a collaboration of language experts, Web site designers, developers, and vendors who are active in moving the Web forward. To ensure a rapid response to the growth of the Web, the W3C wants to marshal the resources of organizations and experts who care about these problems and enlist their help in strengthening internationalization support for the Web.

The W3C Internationalization Initiative was set up last July to supplement the core funding received from W3C Member fees so as to increase in-house resources dedicated to accelerating progress in making the World Wide Web “worldwide” by gathering user requirements, supporting developers, and education & outreach. In the next year, we have set the following goals:

For an overview of current projects see the i18n radar. W3C’s Internationalization efforts progressed on a number of fronts recently:

The Web needs your help

Photo: a boy Tibetan monk, reading a book with Tibetan letters

W3C’s Internationalization Initiative a sponsorship program is designed to provide participants and funding to address three main aspects of the internationalization continuum:

Enablement Development Education
Stake­hold­ers Governments, Publishers, User communities,… W3C Working Groups, Application developers,… Content authors & developers, localizers,…
Typ­i­cal ac­tiv­i­ties Gap analysis & prioritization Documenting requirements Guidelines & checklists Reviews Architectural solutions Educational resources Outreach Checker tools

Minutes Telecon 2019-03-20

Source: CSS WG BlogDael Jackson • 20 March 2019

Full Meeting Minutes

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