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

[Benjamin Francis]

On 17 June 2015 at 20:23, Maciej Stachowiak m...@apple.com wrote:

 Using a mask attribute in place of href would solve the compat problem
 about as well as using rel=“mask-icon”, but it seems kind of weird to me.
 It doesn’t make sense for an icon link to have both a mask and an href.


It makes sense to me, an image element can have a src attribute of
image.jpg and have a mask set to mask.svg in the mask CSS property [1].
The equivalents here are the href attribute and the mask attribute, It's
just that in your case you want to specify a solid colour to mask instead
of an image, so you would omit the href attribute.

That said, I'm not opposed to the creation of a new link relation with
option A.2 if that's what people would prefer.

Ben

1. https://developer.mozilla.org/en-US/docs/Web/CSS/mask

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

[Benjamin Francis]

On 17 June 2015 at 07:37, Maciej Stachowiak m...@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=#ff

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/