Re: [whatwg] A mask="" advisory flag for <link rel=icon>

On 17 June 2015 at 07:37, Maciej Stachowiak <mjs@apple.com> wrote:

> It seems like the current leading candidate is:
>
> - Change <link rel=icon mask> to <link rel=mask-icon>, but keep using the
> theme-color meta for the color
>

Using the theme-color meta tag as a foreground colour for icons may cause
problems for us in Firefox OS. We have use cases where we display an icon
on a toolbar using the theme-color as a background colour for the toolbar.
This generally works OK because content authors tend to match the
theme-color to their toolbar colour, not their icon colour. Another
potential use case might be composing a splash screen from an icon and the
theme-color.

All the existing use cases I'm aware of for the theme-color meta tag [1]
use the colour as a background colour (e.g. Chrome's toolbar). I would
suggest that using re-using this meta tag for the purpose of an icon colour
is likely to cause problems for browser vendors and content authors alike.

Personally I would recommend using the web manifest for your use case,
something like this:

{
  "name": "My Site",
  "scope": "/",
  "start_url": "/index.html",
  "icons": {
    {
      "mask": "/mask.svg",
      "foreground_color: "#00ff00",
      "sizes": "all"
    }
  }
}


I know you say you didn't want to require a new format for this feature,
but really you are requiring a new format, it's just one nobody else uses.
Like apple-touch-icon the mask icon is another type of icon browser vendors
are going to have to look out for and deal with. The mobile Safari team
seemed to be interested in adopting web manifest, I wonder if this is
something you could co-ordinate?

I can understand if it's too late for you to implement web manifest in
Safari 9 because this has been brought up too late in your development
cycle, but if that's the case is it possible for you to use something other
than theme-color for the icon colour?

How about something like:

<link rel="icon" sizes="any" mask="/mask.svg" foreground-color="#ff0000">

The reason I suggest "mask" instead of "href" is that whilst your use case
for masking just uses a solid colour, a common use case of masking is to
use a mask over another image which may have its own src (see the mask
property [2] in CSS masking [3]). It's maybe odd to suggest a link relation
with an optional href attribute, but this allows for other masking type use
cases. It may also make it more backwards compatible because a link
relation without an href attribute might be considered invalid by browsers
(as an icon object without a src property would be in a web manifest).

Out of curiosity, I understand that flat design is fashionable right now
and you might want single colour icons to represent web sites in Safari,
but what is your fallback for the billion or so web sites which currently
only provide a multi-coloured icon? I assume you just display the icon they
provide?

Thanks

Ben

1. https://github.com/whatwg/meta-theme-color
2. https://developer.mozilla.org/en-US/docs/Web/CSS/mask
3. http://www.html5rocks.com/en/tutorials/masking/adobe/

Received on Wednesday, 17 June 2015 14:03:30 UTC