
Show HN: A visual guide to the most popular CSS properties - bbx
http://cssreference.io/#hn
======
edblarney
This is a great little site.

A) How has the web been around for this long and nobody has done this before,
i.e. there isn't at least some kind of authoritative reference like this?

B) Having worked with many UI/layout paradigms, and full aware of the fact
that none of them are very good - css is indeed perhaps the worst. It takes
quite a lot of abstraction on top of it to make sense of it.

But it's what we have - so good work.

~~~
HTeuMeuLeuOnHN
Regarding point A, here are a few sites that come off the top of my head :

* Index of CSS Properties by W3C [https://www.w3.org/Style/CSS/all-properties.en.html](https://www.w3.org/Style/CSS/all-properties.en.html)

* CSS Reference by Mozilla Developer Network [https://developer.mozilla.org/en/docs/Web/CSS/Reference](https://developer.mozilla.org/en/docs/Web/CSS/Reference)

* CSS Reference by Tympanus [http://tympanus.net/codrops/css_reference/](http://tympanus.net/codrops/css_reference/)

* CSS Almanac by CSS-Tricks [https://css-tricks.com/almanac/](https://css-tricks.com/almanac/)

~~~
edblarney
Yes - those list a bunch of values - but they don't help that much in terms of
actual documentation. They list nothing but the values.

Even MDN, which is probably the closest thing to 'standard' has very few
examples, missing definitions, nothing interactive.

W3C is only really the basic stuff.

Let's face it: the tool we all use for showing our stuff to the world
basically has no documentation. It's a mess.

The Mac/Safari documentation is literally blank for tons of objects. I mean -
$100B billion in the bank and they can't make docs. Even swift documentation
is totally lacking in examples and hard to read (they're still depending on
your ability to read Objective-C stuff).

~~~
91bananas
To your last point, making developers lives easier does not move their bottom
line is my assumption. If they improve docs it isn't going to sell one single
extra Mac, so why should they bother?

------
kojoru
Please include the link to github ( [https://github.com/jgthms/css-
reference](https://github.com/jgthms/css-reference) ) for everyone to edit and
write issues.

Would be particularly nice to have a direct link to edit every particular
property on its section, e. g. [https://github.com/jgthms/css-
reference/edit/master/property...](https://github.com/jgthms/css-
reference/edit/master/property/align-content/index.html)

------
clement75009
Really nice. I think it would be more helpful if the properties were ordered
in a logical order (by "type" of properties) instead of alphabetical order.

~~~
olalonde
From the title, I thought this would be a list of CSS properties ordered by
frequency of use (as crawled on the web).

~~~
coding123
I thought so too, but looking at chrome css usage stats, flexible stuff is
really low on the list. Its rising fast, but currently unused on the majority
of the web.

------
archildress
Quick question: this refers heavily to Flexbox, which as someone who has only
a tangental interest in CSS, I don't know much about. Is it the standard way
of doing positioning now? Care to explain it like I'm 5?

~~~
pault
Flexbox is conceptually more difficult than older float & grid based layout
systems (it takes some time to wrap your head around the relationship between
`display: flex` containers and the various flex-* properties that child
elements utilize), but it makes certain things dead simple that were nearly
impossible before. For example, vertically centering content (almost comically
difficult before flexbox) and fixed-width elements mixed with expanding
elements that will share unused space in a row. In a lot of ways flexbox acts
like old-school table layouts--which were easy to use and predictable--but
without the ugly, non-semantic, and verbose markup. Best of both worlds
really.

They are supported in all self-updating browsers, so unless you have to
support IE<=10 they are safe to use and extremely convenient. Replacing a
classic grid-based layout with flexbox saves an astonishing amount of markup.
I've been using it exclusively for the last six months or so.

I found this CSSTricks article helpful when I was building my first flexbox
layouts: [https://css-tricks.com/snippets/css/a-guide-to-
flexbox/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

~~~
zem
ooh, mixing fixed-width with expanding elements is exactly the thing i'm
struggling with now. i'll look into converting from grid to flex based layout
and see how that goes.

~~~
pault
You can also use calc(100% - [fixed container width]px) in a pinch.

------
tholman
Great clean guide. Here's a couple more that often offer extra tidbits of
certain properties.

\- [https://css-tricks.com/almanac/](https://css-tricks.com/almanac/) \-
[http://tympanus.net/codrops/css_reference/](http://tympanus.net/codrops/css_reference/)

------
d--b
Am I the only one whose computer has trouble running the site? Using a xps 13
from 2015 and it is really sluggish. Breaking it down into sub-pages would
help.

~~~
caspg
Yup, scrolling is a little bit sluggish. All sections with properties are
loaded at one. Quick solution would be to break down into sub-pages as you
said or use pagination.

For those from React world, there is really awesome component, for rendering
large sets of data: [https://github.com/bvaughn/react-
virtualized](https://github.com/bvaughn/react-virtualized).

~~~
SahAssar
For those not in the react world, this seems to similar to react-virtualized
and has worked great for me before:
[https://clusterize.js.org/](https://clusterize.js.org/)

------
rohannair
I would expect a site about CSS properties to also know about the performance
impacts of paints... Takes a good 5s for everything to load.

~~~
Kiro
How would they fix that? It's rendering all the examples on one page (like it
should) so I understand it takes a long time.

~~~
bryanrasmussen
Well they could have a list of the properties without them all rendered and
then render just the property they need when someone clicks on the property
name.

And why should it render all examples on one page?

They could have a static page for every property so one could link to
[http://cssreference.io/align-content](http://cssreference.io/align-content)
instead of [http://cssreference.io/#align-
content](http://cssreference.io/#align-content) and get just that static page.
That should be pretty quick, especially with long caching of all other
resources than the actual page content.

There's lots of different ways to have done it without having to do it all at
once.

~~~
Kiro
I personally don't like that solution. I want to see everything (on one page)
without having to click anything.

~~~
hexasquid
How about both?

------
philmander
Very useful.

You should consider serving a separate page for each property in addition to
one big list. This would be more useful for quick Google lookups.

------
ww520
Nicely put together. I like the examples showing the effect of different
properties.

------
NatW
Very nice - wish list items: adding css version numbers and browser
compatibility.

~~~
mbrookes
Try [http://caniuse.com/](http://caniuse.com/)

~~~
yasserkaddour
Doiuse is a great PostCSS plugin that check if your css is compatible with the
browsers you aim to support using caniuse.
[https://github.com/anandthakker/doiuse](https://github.com/anandthakker/doiuse)

------
huherto
Very nice CSS Visual Guide.

My other wish to really really learn CSS.... A list of CSS problems to solve
ala project Euler. You get a visual example and you have to make it look
identical. Then you get to see other solutions for the same problem.

~~~
dwaltrip
I find layout to be the hardest part of CSS (as it deals with how elements
interact).

This online book was helpful for me:
[http://book.mixu.net/css/](http://book.mixu.net/css/)

------
paradite
I think this is a good guide for brushing up css knowledge before interviews.

But for actual coding people would still Google for css-tricks or
stackoverflow because Googling is faster than opening this website and
searching.

~~~
kakarot
Not as fast as asking random people on Youtube for help

------
ollie
I've put together a PR for lazy-displaying the property examples. This should
help with the rendering speed. [https://github.com/jgthms/css-
reference/pull/10](https://github.com/jgthms/css-reference/pull/10)

Ace work on the site!

------
paublyrne
I've nothing more to say, other than that this is a lovely app. I'll certainly
use it. Thanks.

------
GrinningFool
This is an excellent resource ,, thanks for taking the time to make it.

I would request/suggest an option to have one-per-page display of attributes -
currently there's a _lot_ of scrolling if you want to move between things.

------
brute
Small bug: [http://cssreference.io/#animation-fill-
mode](http://cssreference.io/#animation-fill-mode) does not play the animation
the second time you click the button.

Great site though.

~~~
chei0iaV
Same with animation-timing-function. It also doesn't fit on my screen, so it's
hard to see what the ones on the bottom do.

------
xufi
Interesting app. Something I'll definitely use in the future for referencing

------
austinjp
Handy, must have taken a while to put this together.

Minor bug (?): your lorem ipsum is showing when viewing via
[http://hn.premii.com/](http://hn.premii.com/)

------
dolzenko
As someone who does frontend only occasionally I expect this site to be of
great help to refresh my knowledge now and then.

PS. Note to everyone - whitelist this in your ad blocker as author asks you to
do!

------
datamoshr
Very handy tool. Might I suggest indexing some values too. Searching for
gradient returns nothing, but a suggestion for background-image might make
sense.

------
LargeCompanies
Flexbox is it supported by all major browsers?

How does it compare to table HTML vs. div HTML?

What are the benefits vs. div HTML & Bootstrap .. is it just the new thing to
learn?

~~~
shakna
caniuse [0] has some stats.

Flexbox is supported in:

* Internet Explorer 11, but only partially

* Edge 14+

* Firefox 52+ (Everything but buttons in Firefox 50)

* Chrome 51+ (50 had it, but had a bug that still plagues Safari)

* Safari 9.1 (but Safari has a couple huge bugs [1][2])

* Opera 41+

* Safari iOS 9.3+ (but see [1] & [2])

* Every version of Opera mini

* Android Browser 4.4+

* Android Chrome 53+

A great bullet-point list of why not to use tables for layout can be found
here [3].

Flexbox is designed to enhance and make easier some of the CSS that we already
use today, so they go hand in hand.

As to Bootstrap, as of v4, it will include Flexbox as an opt-in option (in
case you support old browsers where it wouldn't work). [4]

[0] [http://caniuse.com/#search=flexbox](http://caniuse.com/#search=flexbox)

[1]
[https://bugs.webkit.org/show_bug.cgi?id=136041](https://bugs.webkit.org/show_bug.cgi?id=136041)

[2]
[https://bugs.webkit.org/show_bug.cgi?id=137730](https://bugs.webkit.org/show_bug.cgi?id=137730)

[3]
[http://phrogz.net/css/WhyTablesAreBadForLayout.html](http://phrogz.net/css/WhyTablesAreBadForLayout.html)

[4] [http://v4-alpha.getbootstrap.com/getting-
started/flexbox/](http://v4-alpha.getbootstrap.com/getting-started/flexbox/)

------
partycoder
This is fantastic.

For me CSS has been largely very unintuitive, and part of that has been
because of the adversarial evolutionary race of browsers.

------
parr0t
This is going to be super helpful - thanks!!

------
closetheworld
Wow that's so useful. Thanks for this.

------
demoonkevin
It's a really nice app, I'm learning front-end so this will definitely help
me.

------
aphextron
A link to the relevant caniuse.com page in each section would be fantastic

------
gshakir
A codepen that goes along with every example would be cherry on top.

------
huan9huan
The example is very helpful for me, brilliant works!

------
willemwijnans
So useful, great stuff again after Bulma & marksheet.

------
ahm786
The search feature doesn't work sometimes.

------
mschuster91
Whoa. That is awesome. Thanks for the hard work!

------
tambourine_man
“Play animation” doesn't work in Safari

------
imafish
Definitely a nice site. However, I'd argue that if CSS was in any way
intuitively designed, this site wouldn't be necessary.

------
ehosca
very useful... thanks!

------
namelezz
Very nice. Can you make a visual guide for CSS selectors too?

