Re: [whatwg] `brand-color` meta extension

On Thu, Jun 26, 2014 at 10:35 AM, Marcos Caceres <w3c@marcosc.com> wrote:
> Folks at Mozilla and Google would like to standardize the `brand-color` meta extension. The `brand-color` keyword has been added to the MetaExtensions WHATWG wiki and a rough spec is below (prepared by some folks at Google).
>
> # Overview
>
> The browser will use this brand color when distinct color is needed, i.e. it could be used as Web App’s title bar.
>
> Other browsers have similar features, but each defined as its own specific meta tag, IE uses mapplication-navbutton-color, Safari’s is apple-mobile-web-app-status-bar-style, they are all similar with brand-color, but have a little different usage.
>
> # Syntax
>
> <meta name="brand-color" content="#0000ff">
>
> The content attribute can be any value defined in css color specification http://www.w3.org/TR/css3-color/ , the value might be adjusted by browser if it is not proper for display, i.e. extremely bright. the leading and trailing whitespace (defined in http://www.w3.org/TR/html401/struct/text.html) is permitted.
> The brand-color meta tag must be in head element, If there are multiple brand-color meta tags in head element, first one takes effect.
> Brand color could be changed by script, browser shall respect this change.
>
> Relevant issues/discussions:
> https://bugzilla.mozilla.org/show_bug.cgi?id=1013913
> https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/nzRY-h_-_ig/IeXq74xUWzkJ

Here's a first crack at a better spec:

# Overview

The 'brand-color' meta extension defines a suggested color that
browsers and OSes displaying this page SHOULD use if they customize
the display of individual pages in their UIs with varying colors.

For example, a browser might color a web app's title bar with the
specified 'brand-color' value, or use it as a color highlight in a
task switcher.

This feature has been developed in the past under multiple proprietary
names, such as "mapplication-navbutton-color" for Internet Explorer
and "apple-mobile-web-app-status-bar-style" for Mobile Safari.
Authors MUST NOT use the proprietary variants of this meta extension.
User agents that support proprietary variants of this meta extension
must, if "brand-color" is specified, use "brand-color" for these
purposes, and ignore any proprietary variants.

# Syntax

Example:
<meta name="brand-color" content="#0000ff">

The content attribute for the "brand-color" meta extension can take
any valid CSS color.

To <dfn>find a page's brand color</dfn>:

1. Let <var>candidate elements</var> be a list of all the
"brand-color" meta elements on the page, in document order.
2. For each <var>element</var> in <var>candidate elements</var>:
    1. Parse a component value from <var>element</var>'s content
attribute value. [[css-syntax]]
    2. Attempt to parse the result as a CSS color.  If it succeeds,
return the parsed color.

Note: This implies that the first successfully parsed "brand-color"
meta element defines the page's "brand color". Any further
"brand-color" meta elements have no effect.

If "brand-color" meta elements are added or removed from the page, or
have their content attribute changed, user agents MUST find the page's
brand color again.

When using the page's "brand color", user agents MAY adjust the color
in UA-defined ways to make it more suitable for particular uses.  For
example, if a UA intends to use the "brand color" as a background and
display white text over it, it may use a darker variant of the "brand
color" for that purpose, to ensure adequate contrast.

~TJ

Received on Thursday, 26 June 2014 17:58:40 UTC