News for hackers. Stuff that matters.
Re:Show HN: CSS Pokemon – created with clip-path and CSS var... by lucideer on Tuesday December 13, 2016 @10:29AM (#13167458)
Edit: Major correction: it appears Firefox only supports clip-path behind a flag. Enabling this flag makes the experiment appear in Firefox.

---

It's Webkit/Blink-only - no support for other browsers. It says it uses clip-path and variables, both supported in Firefox, so I see no compelling reason for this.

Also viewing it in Chrome, I don't see anything that would actually require the use of clip-path or variables - arbitrary triangles have been possible in CSS since the beginning, and much more impressive drawings have been created[0][1] than this. The added animation doesn't add much.

Why is this currently #6 on the HN front page?

[0] http://www.subcide.com/experiments/fail-whale/

[1] https://pattle.github.io/simpsons-in-css/

Re:Show HN: CSS Pokemon – created with clip-path and CSS var... by Gammarays on Tuesday December 13, 2016 @11:34AM (#13168078)

  Why is this currently #6 on the HN front page?
Because someone took time to make this, and we tend to approach Show HN projects with an open mind.

If it doesn't work on your browser, then try another one. The OP isn't asking you to buy anything or force anything down your throat.

Re:Show HN: CSS Pokemon – created with clip-path and CSS var... by lucideer on Tuesday December 13, 2016 @12:17PM (#13168477)
I understand, as others have said elsewhere, that it's just an experiment, and as such cross-browser support isn't as much of a priority - it's not a product that people need to work. I've made plenty of experiments myself that only work in one browser.

However, for many experiments like this, they're doing something somewhat novel using a tech a single browser has just introduced - in those cases, it's limitations that lead to lack of interop. In this case, it just seemed a bit disappointing. That is subjective of course, but it was my - I think warranted - first reaction.

Re:Show HN: CSS Pokemon – created with clip-path and CSS var... by Gammarays on Tuesday December 13, 2016 @12:36PM (#13168666)

  much more impressive drawings have been created than this.
  The added animation doesn't add much.
You say it's subjective, but when you start posting things like the above, you're deeming this project as unworthy of being on HN just because you feel it's "novel". The OP never claims the technology is new or cutting-edge, so why even bring that up? And there's really no need to link other css artworks in an attempt to undermine the work at hand.
Re:Show HN: CSS Pokemon – created with clip-path and CSS var... by lucideer on Tuesday December 13, 2016 @02:22PM (#13169850)
You could be right. I wouldn't conflate "novel" with "new or cutting-edge" (one can still do novel things with old tech) but even just limiting it to novel may be unfair. I guess this is just something I associate with HN submissions from experience - many things posted here really genuinely blow me away. This didn't. The normal reaction to that might be to just say nothing, but given the browser support issue, I commented.

Given that I was additionally mis-attributing the non-cross-browser functionality to the author (see edit - it works fine in Firefox), my own subjective reaction to it is probably that little bit more unfair again now.

Re:Show HN: CSS Pokemon – created with clip-path and CSS var... by iamdave on Tuesday December 13, 2016 @12:23PM (#13168541)
OP provided the source. Why not make a pull request and make those implementations and submit then back? Would be a good learning opportunity for some, no?
Re:Show HN: CSS Pokemon – created with clip-path and CSS var... by lukehaas on Tuesday December 13, 2016 @11:55AM (#13168268)
Unfortunately Firefox only supports clip-path behind a flag.
Re:Show HN: CSS Pokemon – created with clip-path and CSS var... by lucideer on Tuesday December 13, 2016 @12:18PM (#13168493)
I was unaware of this. Thanks for the info. Edited.
Re:Show HN: CSS Pokemon – created with clip-path and CSS var... by erlehmann_ on Tuesday December 13, 2016 @10:47AM (#13167614)
It seems to me that nowadays Webkit/Blink has replaced IE for developers not caring about interoperability – with some even going so far as to claim „IE? but nobody uses that!“.
Re:Show HN: CSS Pokemon – created with clip-path and CSS var... by Manishearth on Tuesday December 13, 2016 @12:38PM (#13168686)
FWIW clip-path is specced and in CR stage right now. I think it's okay to implement it provided that there is an understanding that any further changes are reflected even if it breaks existing code using the new property.

All browsers do this. Firefox implements around 88 properties (30 of these are "logical properties", which aren't exactly new properties) that Chrome doesn't[1] and Chrome implements around 68 properties that Firefox doesn't[2].

The numbers are a bit skewed here. My method of collecting the list of "properties that Firefox implements" included preffed-off properties, but the same is not true for Chrome, so for example the `grid` property shows up as implemented in Firefox but not Chrome even though both have it behind a pref/flag.

However, there are some properties implemented in Firefox without being behind a pref (ruby-align, scroll-snap-foo, image-orientation are examples).

-------------------

I do feel that in general Blink does push a lot of nonstandard (or not on the standards path) features into the web at times. But I don't have anything to back that assertion up.

Blink is being interoperable in this particular case.

[1]: https://manishearth.github.io/css-properties-list/?stylo=sho...

[2]: https://manishearth.github.io/css-properties-list/?stylo=sho...

Re:Show HN: CSS Pokemon – created with clip-path and CSS var... by erlehmann_ on Tuesday December 13, 2016 @04:50PM (#13171434)
Clarification: My comment was not primarily about browser developers, it was about web developers that do not care about interoperability – and either do not test in non-Webkit/Blink browsers or declare that for some reason (e.g. marketshare, “it is just an experiment”), other browsers are irrelevant in their specific case.
Re:Show HN: CSS Pokemon – created with clip-path and CSS var... by Manishearth on Tuesday December 13, 2016 @06:48PM (#13172458)
Ah, fair point. Yeah, this irks me a lot.
Re:Show HN: CSS Pokemon – created with clip-path and CSS var... by lukehaas on Wednesday December 14, 2016 @04:46AM (#13174874)
It's important for web developers to experiment with new browser features. Browser vendors encourage this as it can help them with crushing bugs early and refining their specs.
Re:Show HN: CSS Pokemon – created with clip-path and CSS var... by Manishearth on Wednesday December 14, 2016 @03:34PM (#13179402)
Yes, which is why experimenting with features on the standards track is okay. At a certain stage it becomes less likely that the feature will change behavior.

The problem arises when the experimentation is done with entirely new features that the browser wants to push (features which haven't been discussed and somewhat settled on with other browsers). If they aren't behind a flag, sites start using it, and then you have to support the legacy syntax forever.

clip-path is on the standards track. It's not going to change much. So browser vendors exposing it by default is fine.

(However, if you're building an experiment using these, at least test in other browsers and put up a warning that it won't work in some browsers. A lot of the interior issues today are because folks only bother to test in chrome. Ultimately this means that all browsers have to copy Chrome bugs to make things work.)

Re:Show HN: CSS Pokemon – created with clip-path and CSS var... by Semaphor on Tuesday December 13, 2016 @11:57AM (#13168289)
Eh, it always only seems to be the case for experiments. Stuff that has no use case besides "looking fun" and probably being a fun challenge to work at. There are a few FF only, and many that are Chrome only.
Re:Show HN: CSS Pokemon – created with clip-path and CSS var... by staticelf on Tuesday December 13, 2016 @02:37PM (#13170062)
> much more impressive drawings have been created[0][1] than this.

Dude, that is highly subjective and you can't deny it's really impressive done. Stop being a fucking douchebag. I for one thinks this beats both your links.

Re:Show HN: CSS Pokemon – created with clip-path and CSS var... by taf2 on Tuesday December 13, 2016 @10:31AM (#13167475)
Seems to work for me in mobile safari
Re:Show HN: CSS Pokemon – created with clip-path and CSS var... by mhurron on Tuesday December 13, 2016 @11:03AM (#13167758)
Safari is webkit.
Re:Show HN: CSS Pokemon – created with clip-path and CSS var... by lucideer on Tuesday December 13, 2016 @10:37AM (#13167531)
Edited, cheers.