Re: [whatwg] A mask= advisory flag for link rel=icon
We're considering supporting SVG in the places in the UI where we render the icon in full color. Nothing to announce currently. - Maciej On Jun 24, 2015, at 8:33 PM, Kevin Marks kevinma...@gmail.com wrote: Does this mean we can now have rel=icon with SVG instead of providing a bitmap for every iOS device specifically (when we add to homepage)? Do chrome and Firefox support SVG icon images? On 24 Jun 2015 2:40 pm, Tab Atkins Jr. jackalm...@gmail.com wrote: On Wed, Jun 24, 2015 at 2:36 PM, Maciej Stachowiak m...@apple.com wrote: To close the loop on this, we will change to link rel=mask-icon href=whatever.svg color=#aabbcc. We like the idea of determining the color from the SVG, but we won't be able to implement in time for this cycle, and having an explicit color override seems useful. So for now we'll implement explicit color and we'll consider automatic color picking based on the SVG as a fallback when the color is missing as a future extension. Please let me know if anyone disagrees with this approach. Sounds acceptable to me. What's the grammar of color=''? Just hex, or full CSS color? (Either is fine with me.) ~TJ
Re: [whatwg] A mask= advisory flag for link rel=icon
On Fri, Jun 26, 2015 at 10:17 AM, Timothy Hatcher timo...@apple.com wrote: On Jun 24, 2015, at 2:39 PM, Tab Atkins Jr. jackalm...@gmail.com wrote: Sounds acceptable to me. What's the grammar of color=''? Just hex, or full CSS color? (Either is fine with me.) We support full CSS colors. Though, we ignore the alpha component. Cool. When are we going to see a spec for this? ^_^ ~TJ
Re: [whatwg] A mask= advisory flag for link rel=icon
On Jun 24, 2015, at 2:39 PM, Tab Atkins Jr. jackalm...@gmail.com wrote: Sounds acceptable to me. What's the grammar of color=''? Just hex, or full CSS color? (Either is fine with me.) We support full CSS colors. Though, we ignore the alpha component. — Timothy Hatcher
Re: [whatwg] A mask= advisory flag for link rel=icon
Hi Tab, You wrote: Sounds acceptable to me. What's the grammar of color=''? Just hex, or full CSS color? (Either is fine with me.) We support full CSS colors. Though, we ignore the alpha component. Cool. When are we going to see a spec for this? ^_^ Well, typically what happens is people talk through various options on this mailing list and then Ian specs something out when he catches up on the thread. But you already knew that. :) Ted
Re: [whatwg] A mask= advisory flag for link rel=icon
On Jun 26, 2015 14:30, Edward O'Connor eocon...@apple.com wrote: Hi Tab, You wrote: Sounds acceptable to me. What's the grammar of color=''? Just hex, or full CSS color? (Either is fine with me.) We support full CSS colors. Though, we ignore the alpha component. Cool. When are we going to see a spec for this? ^_^ Well, typically what happens is people talk through various options on this mailing list and then Ian specs something out when he catches up on the thread. But you already knew that. :) I also happen to have experience with just writing the spec myself, as you know from both picture and theme-color, so I was hoping y'all'd do the same. ~TJ
Re: [whatwg] A mask= advisory flag for link rel=icon
On Thu, Jun 25, 2015 at 7:24 AM, Daniel Holbert dholb...@mozilla.com wrote: From my brief testing with my testcase above (Chrome 45 dev channel on linux, Edge on Win10, Safari 8 on Yosemite), it doesn't look like other browser support SVG favicons right now, though. FWIW, here’s the relevant Chromium issue: https://code.google.com/p/chromium/issues/detail?id=294179
Re: [whatwg] A mask= advisory flag for link rel=icon
On Wed, Jun 24, 2015 at 2:36 PM, Maciej Stachowiak m...@apple.com wrote: To close the loop on this, we will change to link rel=mask-icon href=whatever.svg color=#aabbcc. We like the idea of determining the color from the SVG, but we won't be able to implement in time for this cycle, and having an explicit color override seems useful. So for now we'll implement explicit color and we'll consider automatic color picking based on the SVG as a fallback when the color is missing as a future extension. Please let me know if anyone disagrees with this approach. Sounds acceptable to me. What's the grammar of color=''? Just hex, or full CSS color? (Either is fine with me.) ~TJ
Re: [whatwg] A mask= advisory flag for link rel=icon
To close the loop on this, we will change to link rel=mask-icon href=whatever.svg color=#aabbcc. We like the idea of determining the color from the SVG, but we won't be able to implement in time for this cycle, and having an explicit color override seems useful. So for now we'll implement explicit color and we'll consider automatic color picking based on the SVG as a fallback when the color is missing as a future extension. Please let me know if anyone disagrees with this approach. Regards, Maciej On Jun 17, 2015, at 3:32 PM, Maciej Stachowiak m...@apple.com wrote: 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? Details of the UI of the pinned tabs feature are a bit out of scope for this mailing list, but since it might provide useful context to people, here are some facts: - We sometimes display the mask icon in the specified color, and sometimes in a medium grey. - We I meant to say - If no mask icon is provided, we will fall back to a monochrome monogram for the site rather than the full-color icon, in the context where mask icons are currently used. Regards, Maciej
Re: [whatwg] A mask= advisory flag for link rel=icon
On 06/24/2015 08:33 PM, Kevin Marks wrote: Does this mean we can now have rel=icon with SVG instead of providing a bitmap for every iOS device specifically (when we add to homepage)? Do chrome and Firefox support SVG icon images? Here's a simple testcase: http://people.mozilla.org/~dholbert/tests/favicon/test1.html Firefox 41 (currently on Nightly, hitting release in late September) supports SVG favicons. (Earlier versions have partial support due to a bug with our favicon cache - the SVG favicon would work on first load, but would fail to show up on subsequent loads. That was fixed here: https://bugzilla.mozilla.org/show_bug.cgi?id=366324 ) From my brief testing with my testcase above (Chrome 45 dev channel on linux, Edge on Win10, Safari 8 on Yosemite), it doesn't look like other browser support SVG favicons right now, though. ~Daniel
Re: [whatwg] A mask= advisory flag for link rel=icon
Does this mean we can now have rel=icon with SVG instead of providing a bitmap for every iOS device specifically (when we add to homepage)? Do chrome and Firefox support SVG icon images? On 24 Jun 2015 2:40 pm, Tab Atkins Jr. jackalm...@gmail.com wrote: On Wed, Jun 24, 2015 at 2:36 PM, Maciej Stachowiak m...@apple.com wrote: To close the loop on this, we will change to link rel=mask-icon href=whatever.svg color=#aabbcc. We like the idea of determining the color from the SVG, but we won't be able to implement in time for this cycle, and having an explicit color override seems useful. So for now we'll implement explicit color and we'll consider automatic color picking based on the SVG as a fallback when the color is missing as a future extension. Please let me know if anyone disagrees with this approach. Sounds acceptable to me. What's the grammar of color=''? Just hex, or full CSS color? (Either is fine with me.) ~TJ
Re: [whatwg] A mask= advisory flag for link rel=icon
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
On Jun 17, 2015, at 12:42 PM, Benjamin Francis bfran...@mozilla.com wrote: 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 makes sense in theory, but I don’t think anyone intends to support combining a full-color image with a mask, so this implies a level of generality that the feature won’t actually have. Also, I don’t think there is any use case for supplying both an image and a mask. Since the site icon can itself have an alpha channel, you could always pre-mask it. And it’s not really a consideration that you’d want to post-process an existing image. Based on that, I think it’s better to use a separate link type rather than to act as if an icon link could have two URLs. - Maciej 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
On Tue, Jun 16, 2015 at 9:49 PM, Anne van Kesteren ann...@annevk.nl wrote: On Tue, Jun 16, 2015 at 10:42 PM, Tab Atkins Jr. jackalm...@gmail.com wrote: Before we start bikeshedding, can you commit to actually changing your implementation? Safari has already shipped with the exact proposal given in this thread; if you're seeking a rubberstamp rather than a collab, say so. Maciej already clarified this, no? They're perfectly happy to change this before Safari 9 ships, provided, I'm guessing, that we settle this somewhat quickly. Yup, I missed that part of Maciej's email; I just did a quick skim of the rest of the thread after reading Ted's OP. Sounds good, then. ~TJ
Re: [whatwg] A mask= advisory flag for link rel=icon
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? Details of the UI of the pinned tabs feature are a bit out of scope for this mailing list, but since it might provide useful context to people, here are some facts: - We sometimes display the mask icon in the specified color, and sometimes in a medium grey. - We I meant to say - If no mask icon is provided, we will fall back to a monochrome monogram for the site rather than the full-color icon, in the context where mask icons are currently used. Regards, Maciej
Re: [whatwg] A mask= advisory flag for link rel=icon
On Wed, Jun 17, 2015 at 9:42 PM, Benjamin Francis bfran...@mozilla.com wrote: 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. 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. Not giving link another way to fetch resources seems preferable. Might get tricky with error/load events and future fetching APIs otherwise. -- https://annevankesteren.nl/
Re: [whatwg] A mask= advisory flag for link rel=icon
On Wed, Jun 17, 2015 at 9:23 PM, Maciej Stachowiak m...@apple.com wrote: (A.2) Add an attribute to link specifically for use in specifying the color for that icon, e.g. link rel=mask-icon href=whatever.svg color=lightred. (B.1) If the the color isn’t specified using the A method, use the theme color. My current preference out of these is (A.2)/(B.1). This seems reasonable to me too. Though perhaps color= should share parsing with input type=color? More restrictive, but does not allow transparency either, which CSS/canvas-like parsing would allow for. -- https://annevankesteren.nl/
Re: [whatwg] A mask= advisory flag for link rel=icon
On Jun 16, 2015, at 9:49 PM, Anne van Kesteren ann...@annevk.nl wrote: On Tue, Jun 16, 2015 at 10:42 PM, Tab Atkins Jr. jackalm...@gmail.com wrote: Before we start bikeshedding, can you commit to actually changing your implementation? Safari has already shipped with the exact proposal given in this thread; if you're seeking a rubberstamp rather than a collab, say so. Maciej already clarified this, no? They're perfectly happy to change this before Safari 9 ships, provided, I'm guessing, that we settle this somewhat quickly. Yep. Quoting myself from earlier: On Jun 15, 2015, at 12:00 PM, Maciej Stachowiak m...@apple.com wrote: We don’t have a strong principle on this, and it’s not too late to change before shipping the release version of Safari 9. We welcome input on which of these would be best, or whether something else entirely is better. To be even more explicit, we’re willing to change. If there’s a rough consensus soon, we can change it before any final non-beta release of Safari ships with the feature. Even if the discussion continues for a while, we may be able to change after we ship, but we might have to stage it and support two syntaxes for a while. 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 If anyone feels strongly about sticking with the icon rel value, please speak up. It might also be good to change interpretation of the icon as a mask to consider only alpha. But this probably wouldn’t affect the spec since how any link rel=icon is rendered is implementation-specific. Also, t would not make it practical to use the same icon for mask and non-mask purposes in most cases, so it wouldn’t help with the compat issue. So this aspect seems less urgent. Regards, Maciej
Re: [whatwg] A mask= advisory flag for link rel=icon
Kornel Lesiński writes: - Change link rel=icon mask to link rel=mask-icon, but keep using the theme-color meta for the color Please don't use meta theme-color. Financial Times' theme color is salmon pink (#fff1e0), but FT's logo must use black letters. That's another advantage of specifying the mask icon should be a single colour (with transparency), and using that colour as the basis for displaying it: The Pink Un can use black letters and have them actually be black, and Twitter can use a blue bird and have it actually be blue, with nobody having to add or change any existing theme-color. It's also much easier to teach ‘if you want a red house, draw a solid house in the particular share of red you want’ than ‘if you want a red house, draw it in solid black, then specify the shade of red separately in multiple files that you don't necessarily have full control over’. Smylers -- http://twitter.com/Smylers2
Re: [whatwg] A mask= advisory flag for link rel=icon
- Change link rel=icon mask to link rel=mask-icon, but keep using the theme-color meta for the color Please don't use meta theme-color. Financial Times' theme color is salmon pink (#fff1e0), but FT's logo must use black letters. FT's logo is: http://image.webservices.ft.com/v1/images/raw/fticon:brand-ft?format=jpgbgcolor=fff1e0quality=highestsource=example and for Safari's icon it should be: http://image.webservices.ft.com/v1/images/raw/fticon:brand-ft?format=svgsource=example but theme-color makes it look like: http://image.webservices.ft.com/v1/images/raw/fticon:brand-ft?format=svgtint=fff1e0,fff1e0source=example For this case Safari requires theme-color to be changed to black, but that would make the entire UI of Chrome for Android black, which is also unacceptable. -- Kind regards, Kornel Lesiński
Re: [whatwg] A mask= advisory flag for link rel=icon
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/
Re: [whatwg] A mask= advisory flag for link rel=icon
On Tue, Jun 16, 2015 at 2:36 PM, Elliott Sprehn espr...@chromium.org wrote: On Tue, Jun 16, 2015 at 2:33 PM, Tab Atkins Jr. jackalm...@gmail.com wrote: On Tue, Jun 16, 2015 at 2:25 PM, Elliott Sprehn espr...@chromium.org wrote: On Tue, Jun 16, 2015 at 2:22 PM, Tab Atkins Jr. jackalm...@gmail.com wrote: On Tue, Jun 16, 2015 at 2:07 PM, Elliott Sprehn espr...@chromium.org wrote: sizes is a generic feature that's available for all image resources. No it's not; img sizes and link sizes are completely unrelated. :( That's really confusing: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-sizes Non-global attributes aren't global. Who knew. ^_^ Well, two elements that both load image resources and both have an attribute named sizes that do different things isn't very good developer ergonomics. href isn't global either, but I'd be sad if we added a new element where it was interpreted as something besides a url. Yeah, you're not wrong. I simply didn't remember that link sizes existed when I designed img sizes. If we could redo that, I might have chosen a different name. ~TJ
Re: [whatwg] A mask= advisory flag for link rel=icon
On Tue, Jun 16, 2015 at 1:51 PM, Edward O'Connor eocon...@apple.com wrote: Hi Elliott, You wrote: I'm fine with either interpretation, mask-icon or icon mask like alternate stylesheet. I don't think adding a mask attribute to the HTMLLinkElement for this makes sense. Could you elaborate? It's not clear to me why link rel=icon mask wouldn't make sense, but link rel=icon sizes does. They are both useful advisory hints that help UAs avoid redundant resource loads. Do you plan to add the mask attribute to img, picture and CSS? sizes is a generic feature that's available for all image resources. - E
Re: [whatwg] A mask= advisory flag for link rel=icon
On Tue, Jun 16, 2015 at 2:07 PM, Elliott Sprehn espr...@chromium.org wrote: sizes is a generic feature that's available for all image resources. No it's not; img sizes and link sizes are completely unrelated. ~TJ
Re: [whatwg] A mask= advisory flag for link rel=icon
On Tue, Jun 16, 2015 at 1:51 PM, Edward O'Connor eocon...@apple.com wrote: Hi Elliott, You wrote: I'm fine with either interpretation, mask-icon or icon mask like alternate stylesheet. I don't think adding a mask attribute to the HTMLLinkElement for this makes sense. Could you elaborate? It's not clear to me why link rel=icon mask wouldn't make sense, but link rel=icon sizes does. They are both useful advisory hints that help UAs avoid redundant resource loads. sizes really is an advisory hint; if you don't understand it and just download one of the icons, at worst you'll get a version that needs to be scaled up or down. Accidentally displaying a mask version of the favicon can give substantially worse results; the design tradeoffs made for mask icons can be substantially different than those for favicons, and result in a completely unsuitable icon (particularly if rendered in solid black, as is currently recommended). Note the WHATWG thread from two days ago about link rel=icon mask already being seen in the wild and having precisely this problem, where the simplest conclusion appears to be *specifically ignoring the mask links*. https://lists.w3.org/Archives/Public/public-whatwg-archive/2015Jun/0011.html ~TJ
Re: [whatwg] A mask= advisory flag for link rel=icon
On Tue, Jun 16, 2015 at 2:22 PM, Tab Atkins Jr. jackalm...@gmail.com wrote: On Tue, Jun 16, 2015 at 2:07 PM, Elliott Sprehn espr...@chromium.org wrote: sizes is a generic feature that's available for all image resources. No it's not; img sizes and link sizes are completely unrelated. :( That's really confusing: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-sizes In any case, I don't think adding a boolean mask attribute to link specific to the icon type makes sense. - E
Re: [whatwg] A mask= advisory flag for link rel=icon
On Tue, Jun 16, 2015 at 2:25 PM, Elliott Sprehn espr...@chromium.org wrote: On Tue, Jun 16, 2015 at 2:22 PM, Tab Atkins Jr. jackalm...@gmail.com wrote: On Tue, Jun 16, 2015 at 2:07 PM, Elliott Sprehn espr...@chromium.org wrote: sizes is a generic feature that's available for all image resources. No it's not; img sizes and link sizes are completely unrelated. :( That's really confusing: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-sizes Non-global attributes aren't global. Who knew. ^_^ In any case, I don't think adding a boolean mask attribute to link specific to the icon type makes sense. Agreed, for the reasons stated previously by myself and others. ~TJ
Re: [whatwg] A mask= advisory flag for link rel=icon
On Jun 15, 2015, at 5:40 PM, Justin Dolske dol...@mozilla.com wrote: Hmm, I suppose Elliott's proposal is a bit ambiguous, but I read it as fixing the ordering issue by adding a separate mask rel value. Such that the following are equivalent and independent of ordering: A) link rel=icon href=colorful.pnglink rel=mask href=black.svg B) link rel=mask href=black.svglink rel=icon href=colorful.png And if someone actually did want the same icon for both, they could do: C) link rel=icon mask href=blackhole.svg That isn’t how I interpreted Elliot’s proposal. That said, if we do make a new standalone rel value for mask icons, I would suggest mask-icon or something like that instead of mask, since mask is too generic a term. - Maciej Justin On Mon, Jun 15, 2015 at 4:20 PM, Maciej Stachowiak m...@apple.com wrote: On Jun 15, 2015, at 3:55 PM, Elliott Sprehn espr...@chromium.org wrote: Adding a whole new attribute for this seems like overkill, why not use the rel. link rel=icon mask href=... sizes=... That's what the rel list was designed for. In general, rel values are supposed to be orthogonal, they should not modify each other’s meanings. rel=“alternate stylesheet” and rel=“shortcut icon” are two specific historical exceptions. But rel=“license help” means the link is both the license and the help for the page, not that it’s help about the license or anything like that. So I don’t think it would be a good pattern to use the rel value for this. It also wouldn’t solve the immediate problem with browsers getting the wrong icon because sites didn’t carefully set the correct order. Perhaps we don’t care about solving that, but if so, I’m not sure it’s an improvement. - Maciej On Mon, Jun 15, 2015 at 10:37 AM, Edward O'Connor eocon...@apple.com wrote: When link is used to pull in external resources, authors may use several attributes as hints about the linked resource to help UAs decide whether or not to load it. ... This combines well with the other resource hints we already have: link rel=icon href=mask.svg type=image/svg+xml sizes=any mask There are any number of properties UAs might want to use when deciding whether or not to load a resource, so you might think we shouldn't add a new, one-off attribute every time we identify one. Instead, we could add a generic hints attribute and have it take a space-separated list of advisory info about the resource. That space separated list already exists, it's called rel. - E
Re: [whatwg] A mask= advisory flag for link rel=icon
On Tue, Jun 16, 2015 at 12:43 PM, Maciej Stachowiak m...@apple.com wrote: On Jun 15, 2015, at 5:40 PM, Justin Dolske dol...@mozilla.com wrote: Hmm, I suppose Elliott's proposal is a bit ambiguous, but I read it as fixing the ordering issue by adding a separate mask rel value. Such that the following are equivalent and independent of ordering: A) link rel=icon href=colorful.pnglink rel=mask href=black.svg B) link rel=mask href=black.svglink rel=icon href=colorful.png And if someone actually did want the same icon for both, they could do: C) link rel=icon mask href=blackhole.svg That isn’t how I interpreted Elliot’s proposal. That said, if we do make a new standalone rel value for mask icons, I would suggest mask-icon or something like that instead of mask, since mask is too generic a term. I'm fine with either interpretation, mask-icon or icon mask like alternate stylesheet. I don't think adding a mask attribute to the HTMLLinkElement for this makes sense. - E
Re: [whatwg] A mask= advisory flag for link rel=icon
You could just set the colors of all paths to black internally and derive a suitable mask from any SVG logo that way. See any error? Maciej Stachowiak m...@apple.com writes: There’s no technological enforcement that the SVG only uses the color black. We will interpret it as a mask in the same way as the SVG ‘mask’ element, which effectively combines the luminance with the alpha channel. Effectively, this means that other colors will end up partly transparent, so using other colors will probably do something weird, but nothing prevents authors from doing that afaik. The reason for treating the icon as a mask is that we want to enforce having a monochrome shape, specifically for our pinned tabs feature. Regards, Maciej On Jun 15, 2015, at 6:52 PM, Nils Dagsson Moskopp n...@dieweltistgarnichtso.net wrote: If I am not mistaken, it should be possible to use the outline shape while not requiring 100% black color for every path in the SVG icon. As I see it, a proper icon has to have a distinctive outline anyway. Karl Dubost k...@la-grange.net writes: Nils, Le 16 juin 2015 à 10:03, Nils Dagsson Moskopp n...@dieweltistgarnichtso.net a écrit : Edward O'Connor eocon...@apple.com writes: These images can be tinted to better fit in with the site's theme. Please tell me where the requirement for SVG favicons with 100% black paths comes from. I do not understand why an SVG favicon cannot have proper SVG colors so there are no interoperability issues with it. Ed, maybe, replied already I believed in the sentence above. The mask icon is giving just a shape. So that the chosen theme of the phone can customized the color to its own choice. Be imposed by the brand of the operator, or I guess someone hacking its theme to have its own. see for example http://stackoverflow.com/questions/9711481/icon-color-on-different-themes I guess things like Android theme, icon sets, etc. would give some answers. https://dribbble.com/search?q=+icon+sets+monochrome It's a way for a site to provide a generic shaped icon but that will adjust its colors depending on the theme. -- Karl Dubost http://www.la-grange.net/karl/ -- Nils Dagsson Moskopp // erlehmann http://dieweltistgarnichtso.net -- Nils Dagsson Moskopp // erlehmann http://dieweltistgarnichtso.net
Re: [whatwg] A mask= advisory flag for link rel=icon
On Mon, Jun 15, 2015 at 10:37 AM, Edward O'Connor eocon...@apple.com wrote: Authors would provide a mask icon like so: link rel=icon href=mask.svg mask [...] P.S. OK, bikeshedding. What should we call the attribute? The ideal name says something about the icon and not about how a UA might use it. There are a few properties of the icon that are interesting: it's monochrome (and can be tinted to fit a theme), it's suitable for use as a mask, it's a simple/minimal/reduced representation of the site or app. We could go with a monochrome attribute, a mask attribute, or some other option. Out of these I most like an attribute named mask. It's shorter, for one. But I don't strongly prefer it and I'm sure someone else will come up with something way better. Before we start bikeshedding, can you commit to actually changing your implementation? Safari has already shipped with the exact proposal given in this thread; if you're seeking a rubberstamp rather than a collab, say so. In the spirit of bikeshedding, Justin Dolske seems to have the right idea. mask or icon-mask or something as a new rel value that indicates a file to be used as a theme-color-filled mask works better within the existing ecosystem. In particular, naive processors that understand rel=icon but not mask (aka every browser on the market today besides latest Safari) won't do stupid things, like use the mask as an icon directly. There’s no technological enforcement that the SVG only uses the color black. We will interpret it as a mask in the same way as the SVG ‘mask’ element, which effectively combines the luminance with the alpha channel. Effectively, this means that other colors will end up partly transparent, so using other colors will probably do something weird, but nothing prevents authors from doing that afaik. The reason for treating the icon as a mask is that we want to enforce having a monochrome shape, specifically for our pinned tabs feature. The svg mask element has a switch for choosing between luminance and alpha masking; I think using alpha masking instead seems like a pretty clear win. It makes the color irrelevant, making it more likely that the plain icon is appropriate to use for a mask as well, and there's no difference in behavior if you're using opaque colors. (No difference in functionality overall, either; you just achieve partial-transparency with alpha rather than color.) ~TJ
Re: [whatwg] A mask= advisory flag for link rel=icon
Hi Elliott, You wrote: I'm fine with either interpretation, mask-icon or icon mask like alternate stylesheet. I don't think adding a mask attribute to the HTMLLinkElement for this makes sense. Could you elaborate? It's not clear to me why link rel=icon mask wouldn't make sense, but link rel=icon sizes does. They are both useful advisory hints that help UAs avoid redundant resource loads. Ted
Re: [whatwg] A mask= advisory flag for link rel=icon
There’s no technological enforcement that the SVG only uses the color black. We will interpret it as a mask in the same way as the SVG ‘mask’ element, which effectively combines the luminance with the alpha channel. Effectively, this means that other colors will end up partly transparent, so using other colors will probably do something weird, but nothing prevents authors from doing that afaik. The reason for treating the icon as a mask is that we want to enforce having a monochrome shape, specifically for our pinned tabs feature. Regards, Maciej On Jun 15, 2015, at 6:52 PM, Nils Dagsson Moskopp n...@dieweltistgarnichtso.net wrote: If I am not mistaken, it should be possible to use the outline shape while not requiring 100% black color for every path in the SVG icon. As I see it, a proper icon has to have a distinctive outline anyway. Karl Dubost k...@la-grange.net writes: Nils, Le 16 juin 2015 à 10:03, Nils Dagsson Moskopp n...@dieweltistgarnichtso.net a écrit : Edward O'Connor eocon...@apple.com writes: These images can be tinted to better fit in with the site's theme. Please tell me where the requirement for SVG favicons with 100% black paths comes from. I do not understand why an SVG favicon cannot have proper SVG colors so there are no interoperability issues with it. Ed, maybe, replied already I believed in the sentence above. The mask icon is giving just a shape. So that the chosen theme of the phone can customized the color to its own choice. Be imposed by the brand of the operator, or I guess someone hacking its theme to have its own. see for example http://stackoverflow.com/questions/9711481/icon-color-on-different-themes I guess things like Android theme, icon sets, etc. would give some answers. https://dribbble.com/search?q=+icon+sets+monochrome It's a way for a site to provide a generic shaped icon but that will adjust its colors depending on the theme. -- Karl Dubost http://www.la-grange.net/karl/ -- Nils Dagsson Moskopp // erlehmann http://dieweltistgarnichtso.net
Re: [whatwg] A mask= advisory flag for link rel=icon
If reuse of the same SVG `rel=icon` is desirable, would it be possible to have certain elements inside the SVG use `class=mask` or something similar? --Taylor Hunt On Tue, Jun 16, 2015 at 3:47 PM, Maciej Stachowiak m...@apple.com wrote: There’s no technological enforcement that the SVG only uses the color black. We will interpret it as a mask in the same way as the SVG ‘mask’ element, which effectively combines the luminance with the alpha channel. Effectively, this means that other colors will end up partly transparent, so using other colors will probably do something weird, but nothing prevents authors from doing that afaik. The reason for treating the icon as a mask is that we want to enforce having a monochrome shape, specifically for our pinned tabs feature. Regards, Maciej On Jun 15, 2015, at 6:52 PM, Nils Dagsson Moskopp n...@dieweltistgarnichtso.net wrote: If I am not mistaken, it should be possible to use the outline shape while not requiring 100% black color for every path in the SVG icon. As I see it, a proper icon has to have a distinctive outline anyway. Karl Dubost k...@la-grange.net writes: Nils, Le 16 juin 2015 à 10:03, Nils Dagsson Moskopp n...@dieweltistgarnichtso.net a écrit : Edward O'Connor eocon...@apple.com writes: These images can be tinted to better fit in with the site's theme. Please tell me where the requirement for SVG favicons with 100% black paths comes from. I do not understand why an SVG favicon cannot have proper SVG colors so there are no interoperability issues with it. Ed, maybe, replied already I believed in the sentence above. The mask icon is giving just a shape. So that the chosen theme of the phone can customized the color to its own choice. Be imposed by the brand of the operator, or I guess someone hacking its theme to have its own. see for example http://stackoverflow.com/questions/9711481/icon-color-on-different-themes I guess things like Android theme, icon sets, etc. would give some answers. https://dribbble.com/search?q=+icon+sets+monochrome It's a way for a site to provide a generic shaped icon but that will adjust its colors depending on the theme. -- Karl Dubost http://www.la-grange.net/karl/ -- Nils Dagsson Moskopp // erlehmann http://dieweltistgarnichtso.net
Re: [whatwg] A mask= advisory flag for link rel=icon
On Tue, Jun 16, 2015 at 10:42 PM, Tab Atkins Jr. jackalm...@gmail.com wrote: Before we start bikeshedding, can you commit to actually changing your implementation? Safari has already shipped with the exact proposal given in this thread; if you're seeking a rubberstamp rather than a collab, say so. Maciej already clarified this, no? They're perfectly happy to change this before Safari 9 ships, provided, I'm guessing, that we settle this somewhat quickly. -- https://annevankesteren.nl/
Re: [whatwg] A mask= advisory flag for link rel=icon
The reason for treating the icon as a mask is that we want to enforce having a monochrome shape, specifically for our pinned tabs feature. The svg mask element has a switch for choosing between luminance and alpha masking; I think using alpha masking instead seems like a pretty clear win. It makes the color irrelevant, making it more likely that the plain icon is appropriate to use for a mask as well, and there's no difference in behavior if you're using opaque colors. (No difference in functionality overall, either; you just achieve partial-transparency with alpha rather than color.) I think it would be a big improvement if Safari only looked at the alpha channel and ignored luminance for the mask. And as I've suggested before, instead of reading the theme color from the problematic meta theme-color, Safari could read the theme color from the icon by averaging colors of opaque pixels of the icon. Instead of 100% black, authors should be advised to make the icon 100% in the theme color they want. It would be easy to author (it'd display essentially as-is if the author used a solid color) and still meet the requirement of enforcing a monochrome image (authors that mixed colors against the advice would get one color that is a blend). And all this would be achieved without the need for another metatag, and the mask icon would the same in other browsers. -- Kind regards, Kornel Lesiński
Re: [whatwg] A mask= advisory flag for link rel=icon
Edward O'Connor eocon...@apple.com writes: Lately we've identified a need for an additional advisory attribute for icons. Modern user interfaces have a flatter, more minimal UI style as compared to UIs of the past, and modern devices often feature higher-density displays. Legacy favicons don't really do well in these new environments—they can come off as garish and pixelated. It'd be great if sites could provide a simple, monochrome, scalable icon that would fit right in on modern systems. Such an icon could be used as the default tile image on Windows, as a template image on OS X and iOS, or a system icon in Material Design. These images can be tinted to better fit in with the site's theme. Their shape is important and can be used as a mask which lets the image be used in a variety of UI contexts. Please tell me where the requirement for SVG favicons with 100% black paths comes from. I do not understand why an SVG favicon cannot have proper SVG colors so there are no interoperability issues with it. -- Nils Dagsson Moskopp // erlehmann http://dieweltistgarnichtso.net
Re: [whatwg] A mask= advisory flag for link rel=icon
Nils, Le 16 juin 2015 à 10:03, Nils Dagsson Moskopp n...@dieweltistgarnichtso.net a écrit : Edward O'Connor eocon...@apple.com writes: These images can be tinted to better fit in with the site's theme. Please tell me where the requirement for SVG favicons with 100% black paths comes from. I do not understand why an SVG favicon cannot have proper SVG colors so there are no interoperability issues with it. Ed, maybe, replied already I believed in the sentence above. The mask icon is giving just a shape. So that the chosen theme of the phone can customized the color to its own choice. Be imposed by the brand of the operator, or I guess someone hacking its theme to have its own. see for example http://stackoverflow.com/questions/9711481/icon-color-on-different-themes I guess things like Android theme, icon sets, etc. would give some answers. https://dribbble.com/search?q=+icon+sets+monochrome It's a way for a site to provide a generic shaped icon but that will adjust its colors depending on the theme. -- Karl Dubost http://www.la-grange.net/karl/
Re: [whatwg] A mask= advisory flag for link rel=icon
If I am not mistaken, it should be possible to use the outline shape while not requiring 100% black color for every path in the SVG icon. As I see it, a proper icon has to have a distinctive outline anyway. Karl Dubost k...@la-grange.net writes: Nils, Le 16 juin 2015 à 10:03, Nils Dagsson Moskopp n...@dieweltistgarnichtso.net a écrit : Edward O'Connor eocon...@apple.com writes: These images can be tinted to better fit in with the site's theme. Please tell me where the requirement for SVG favicons with 100% black paths comes from. I do not understand why an SVG favicon cannot have proper SVG colors so there are no interoperability issues with it. Ed, maybe, replied already I believed in the sentence above. The mask icon is giving just a shape. So that the chosen theme of the phone can customized the color to its own choice. Be imposed by the brand of the operator, or I guess someone hacking its theme to have its own. see for example http://stackoverflow.com/questions/9711481/icon-color-on-different-themes I guess things like Android theme, icon sets, etc. would give some answers. https://dribbble.com/search?q=+icon+sets+monochrome It's a way for a site to provide a generic shaped icon but that will adjust its colors depending on the theme. -- Karl Dubost http://www.la-grange.net/karl/ -- Nils Dagsson Moskopp // erlehmann http://dieweltistgarnichtso.net
[whatwg] A mask= advisory flag for link rel=icon
When link is used to pull in external resources, authors may use several attributes as hints about the linked resource to help UAs decide whether or not to load it. For instance, the resource's MIME type may be provided in the type attribute. This allows UAs to avoid loading resources they don't support. Another example is the sizes attribute, which is used to help browsers download an appropriately-sized icon for a site without redundant resource loads. Lately we've identified a need for an additional advisory attribute for icons. Modern user interfaces have a flatter, more minimal UI style as compared to UIs of the past, and modern devices often feature higher-density displays. Legacy favicons don't really do well in these new environments—they can come off as garish and pixelated. It'd be great if sites could provide a simple, monochrome, scalable icon that would fit right in on modern systems. Such an icon could be used as the default tile image on Windows, as a template image on OS X and iOS, or a system icon in Material Design. These images can be tinted to better fit in with the site's theme. Their shape is important and can be used as a mask which lets the image be used in a variety of UI contexts. There are already some favicons in use out there would work for this purpose but UAs aren't in a position to know that (at least, not without downloading the icon first). A simple author opt-in saying that an icon is suitable would help UAs pick the right icon to download and, unlike the sizes and type attributes, there's no need for a complicated attribute value microsyntax. A boolean attribute will do nicely. See the postscript for bikeshedding the attribute name; in the rest of this proposal, it's called `mask`. Authors would provide a mask icon like so: link rel=icon href=mask.svg mask This combines well with the other resource hints we already have: link rel=icon href=mask.svg type=image/svg+xml sizes=any mask There are any number of properties UAs might want to use when deciding whether or not to load a resource, so you might think we shouldn't add a new, one-off attribute every time we identify one. Instead, we could add a generic hints attribute and have it take a space-separated list of advisory info about the resource. I don't think this objection holds for at least two reasons: 1) In the 10+ years we've been working on HTML at the WHATWG, we've only actually added one new hint to link, the sizes attribute. We're not at risk of a Cambrian explosion of attributes here. 2) All of the three existing hints (the type, media, and sizes attributes) take values with microsyntaxes; if we assume that pattern continues, the syntax needed for a unified hints attribute would get way too complex (think srcset= but *much* worse). Better to separate hints with different syntax into different attributes. I think the addition of a boolean mask attribute to link rel=icon is the simplest thing we could do here, and would help sites' icons better fit in on modern platforms. Ted P.S. OK, bikeshedding. What should we call the attribute? The ideal name says something about the icon and not about how a UA might use it. There are a few properties of the icon that are interesting: it's monochrome (and can be tinted to fit a theme), it's suitable for use as a mask, it's a simple/minimal/reduced representation of the site or app. We could go with a monochrome attribute, a mask attribute, or some other option. Out of these I most like an attribute named mask. It's shorter, for one. But I don't strongly prefer it and I'm sure someone else will come up with something way better.
Re: [whatwg] A mask= advisory flag for link rel=icon
On Jun 15, 2015, at 3:55 PM, Elliott Sprehn espr...@chromium.org wrote: Adding a whole new attribute for this seems like overkill, why not use the rel. link rel=icon mask href=... sizes=... That's what the rel list was designed for. In general, rel values are supposed to be orthogonal, they should not modify each other’s meanings. rel=“alternate stylesheet” and rel=“shortcut icon” are two specific historical exceptions. But rel=“license help” means the link is both the license and the help for the page, not that it’s help about the license or anything like that. So I don’t think it would be a good pattern to use the rel value for this. It also wouldn’t solve the immediate problem with browsers getting the wrong icon because sites didn’t carefully set the correct order. Perhaps we don’t care about solving that, but if so, I’m not sure it’s an improvement. - Maciej On Mon, Jun 15, 2015 at 10:37 AM, Edward O'Connor eocon...@apple.com wrote: When link is used to pull in external resources, authors may use several attributes as hints about the linked resource to help UAs decide whether or not to load it. ... This combines well with the other resource hints we already have: link rel=icon href=mask.svg type=image/svg+xml sizes=any mask There are any number of properties UAs might want to use when deciding whether or not to load a resource, so you might think we shouldn't add a new, one-off attribute every time we identify one. Instead, we could add a generic hints attribute and have it take a space-separated list of advisory info about the resource. That space separated list already exists, it's called rel. - E
Re: [whatwg] A mask= advisory flag for link rel=icon
Adding a whole new attribute for this seems like overkill, why not use the rel. link rel=icon mask href=... sizes=... That's what the rel list was designed for. On Mon, Jun 15, 2015 at 10:37 AM, Edward O'Connor eocon...@apple.com wrote: When link is used to pull in external resources, authors may use several attributes as hints about the linked resource to help UAs decide whether or not to load it. ... This combines well with the other resource hints we already have: link rel=icon href=mask.svg type=image/svg+xml sizes=any mask There are any number of properties UAs might want to use when deciding whether or not to load a resource, so you might think we shouldn't add a new, one-off attribute every time we identify one. Instead, we could add a generic hints attribute and have it take a space-separated list of advisory info about the resource. That space separated list already exists, it's called rel. - E
Re: [whatwg] A mask= advisory flag for link rel=icon
Hmm, I suppose Elliott's proposal is a bit ambiguous, but I read it as fixing the ordering issue by adding a separate mask rel value. Such that the following are equivalent and independent of ordering: A) link rel=icon href=colorful.pnglink rel=mask href=black.svg B) link rel=mask href=black.svglink rel=icon href=colorful.png And if someone actually did want the same icon for both, they could do: C) link rel=icon mask href=blackhole.svg Justin On Mon, Jun 15, 2015 at 4:20 PM, Maciej Stachowiak m...@apple.com wrote: On Jun 15, 2015, at 3:55 PM, Elliott Sprehn espr...@chromium.org wrote: Adding a whole new attribute for this seems like overkill, why not use the rel. link rel=icon mask href=... sizes=... That's what the rel list was designed for. In general, rel values are supposed to be orthogonal, they should not modify each other’s meanings. rel=“alternate stylesheet” and rel=“shortcut icon” are two specific historical exceptions. But rel=“license help” means the link is both the license and the help for the page, not that it’s help about the license or anything like that. So I don’t think it would be a good pattern to use the rel value for this. It also wouldn’t solve the immediate problem with browsers getting the wrong icon because sites didn’t carefully set the correct order. Perhaps we don’t care about solving that, but if so, I’m not sure it’s an improvement. - Maciej On Mon, Jun 15, 2015 at 10:37 AM, Edward O'Connor eocon...@apple.com wrote: When link is used to pull in external resources, authors may use several attributes as hints about the linked resource to help UAs decide whether or not to load it. ... This combines well with the other resource hints we already have: link rel=icon href=mask.svg type=image/svg+xml sizes=any mask There are any number of properties UAs might want to use when deciding whether or not to load a resource, so you might think we shouldn't add a new, one-off attribute every time we identify one. Instead, we could add a generic hints attribute and have it take a space-separated list of advisory info about the resource. That space separated list already exists, it's called rel. - E
