- From: Benjamin Francis <bfrancis@mozilla.com>
- Date: Wed, 17 Jun 2015 15:03:04 +0100
- To: Maciej Stachowiak <mjs@apple.com>
- Cc: WHATWG List <whatwg@whatwg.org>, "Tab Atkins Jr." <jackalmage@gmail.com>, Edward O'Connor <eoconnor@apple.com>
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