
Show HN: CSS Pokemon – created with clip-path and CSS variables - lukehaas
https://projects.lukehaas.me/css-pokemon/
======
6DM
Should be called CSS pikachu unless you can somehow swap them. Good job
though, better than I could do!

------
lucideer
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/](http://www.subcide.com/experiments/fail-whale/)

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

~~~
erlehmann_
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!“.

~~~
Manishearth
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...](https://manishearth.github.io/css-properties-
list/?stylo=show&servo=show&firefox=only&chrome=hide&mdn=false&alexa=false)

[2]: [https://manishearth.github.io/css-properties-
list/?stylo=sho...](https://manishearth.github.io/css-properties-
list/?stylo=show&servo=show&firefox=only&chrome=hide&mdn=false&alexa=false)

~~~
erlehmann_
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.

~~~
Manishearth
Ah, fair point. Yeah, this irks me a lot.

~~~
lukehaas
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.

~~~
Manishearth
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.)

------
marvindanig
Damn cool, I just love polygon cuts! CSS has become quite powerful in the last
few years. Guess we're not so far from being able to replace
images/icons/logos with "design code" written in CSS in the coming ten years.

Here's a book on ABCs for babies done entirely in CSS:

[https://bubbl.in/book/abcd-animal-book-by-judith-
neumann/1](https://bubbl.in/book/abcd-animal-book-by-judith-neumann/1)

~~~
TheCoreh
We can sorta already do that by inlining SVGs inside CSS (but perhaps it's
cheating)

------
odabaxok
I am not sure what I am looking at. I see a big yellow rectangle. Should I be
looking at the code only? Should I press a button?

~~~
CM30
View it in Chrome. It appears as a Pikachu made out of shapes, like in the
screenshot I took here:

[https://dl.dropboxusercontent.com/u/67216205/csspokemon.png](https://dl.dropboxusercontent.com/u/67216205/csspokemon.png)

In Firefox or other browsers, it just appears as a yellow square.

~~~
odabaxok
Thanks for the screenshot.

------
blauditore
I made another pokemon in CSS (view from behind):
[https://jsfiddle.net/t2mngvwn/show/](https://jsfiddle.net/t2mngvwn/show/)

------
jaytaylor
I found this very cool and surprisingly beautiful!

I'd love to understand the techniques and processes @lukehaas used to create
it.

------
datpuz
Anyone notice how a website meant to showcase some CSS messed up the code
display and gave it double scroll bars? Haha.

The Pikachu looks great though ;)

------
slinger
Awesome!

------
sauronlord
I never realized they introduced a yellow rectangle as a Pokémon.

Galaxy S7

------
gm-conspiracy
Meh.

This works in Firefox:

[http://pattle.github.io/simpsons-in-css/](http://pattle.github.io/simpsons-
in-css/)

