14 ms·
Show HN: A visual guide to the most popular CSS properties
- rohannair 10y agoI 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 10y agoHow would they fix that? It's rendering all the examples on one page (like it should) so I understand it takes a long time.
- rohannair 10y ago> like it should No it shouldn't. Split up large chunks if it impacts performance.
- deleted 10y ago[deleted]
- Kiro 10y agoI think it's much better UX to show everything on one page in this case. You're speaking like this is an application, completely disregarding the purpose.
- Raphmedia 10y agoThe best solution would be to lazy load. If you can only see the first 3 property on page load, there is no gain in having them all load at the same time.
- dom0 10y agoNo it wouldn't, because this means additional delays for anyone that is actually using the site.
- Raphmedia 10y agoLazy loading done well is invisible for the user. You preload things as users scroll down and when user hover / click on one of the anchors.
- mschuster91 10y agoThat doesn't work for those ctrl+f'ing for a specific property. I'd probably do a full load for the text, with specifying the height for the examples inline, and then lazy-render the examples once they're visible.
- Raphmedia 10y agoYou would still need all the text to be in the markup for SEO purposes anyway.
- scotty79 10y agoYou could have all content just unstyled (apart from sections heights) and enable the style for each section as it comes into view. The problem with this site is not that it has too much context. Just too much new and crazy styles.
- flukus 10y agoLike how wikipedia does it? Full content but mostly collapsed.
- jklinger410 10y agoThe page almost crashed my browser and made me not want to use it. Very lazy on the part of the developer to code it that way.
- Kiro 10y agoHow would you do it and still view all the properties on one page?
- jklinger410 10y agoI wouldn't have the properties on one page.
- Kiro 10y agoThen it's more a matter of taste than laziness. I very much prefer to have them all on a single page.
- jklinger410 10y agoExcept that it loads slowly which hurts the usability so it's not really that I prefer a certain layout but more that I prefer the page to load easily.
- scotty79 10y agoDisable all the styles. Enable the styles just for the sections that are currently visible. It would require setting section heights to fixed values so you can know which section is visible and enable and disable styles for them without changing the sites height.
- CamperBob2 10y agoThe page almost crashed my browser Thanks for the report. Hopefully the author will almost fix it.
- 10y ago
- prashnts 10y agoI agree that it is fine for a reference site. Though, Virtual elements are possibly a solution where only the current viewport is painted.
- bryanrasmussen 10y agoWell 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 10y agoI personally don't like that solution. I want to see everything (on one page) without having to click anything.
- hexasquid 10y agoHow about both?
- 91bananas 10y agoThen someone would have complained that this site needed JavaScript to handle those click event. Or, would have complained that it was stupid to actually use an anchor tag to link to god forbid another complete page load. Or, if they used a javascript framework to make deep links someone would have complained that they used a javascript framework for a static page, or even maybe they used the wrong JavaScript framework.
- nilliams 10y agoI don't get this complaint. This site is aimed at developers. I think it's safe to assume they're either not viewing this on mobile ever, or are going to come back and visit on desktop/etc if they actually want to use it as a resource for work, so perf is a low priority compared to the content.
- rhizome 10y agoDevelopers don't use mobile? Or tablets? Or...performance? http://imgur.com/a/GiGBY http://imgur.com/a/GiGBY
- nilliams 10y agoThat's not what I said.
- rhizome 10y agoIt's not your exact words, but I don't think it's an unfair characterization, if the excuse is simply that they'll be reading it on a desktop machine anyway. I took that image from a non-laptop desktop machine, by the way.
- nilliams 10y ago> It's not your exact words, but I don't think it's an unfair characterization You ignored the half of the sentence following the 'or'. To me, that's unfair. > if the excuse is [...] It's not an excuse, it's context. The performance is a low priority compared to the content, when the site is a developer resource.
- nateberkopec 10y agoScrolling is giving me ~20fps on my MBP...ouch.
- fractallyte 10y agoAnd yet on the native browser on my (underspecced) Jolla phone, scrolling is beautifully smooth...
- Angostura 10y agoReally - it's fine here on this old iMac running updated Safari
- deleted 10y ago[deleted]
- clement75009 10y agoReally 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.
- Guyag 10y agoSecond this. Will be using this in the future, and some kind of categorisation would improve usability.
- usaphp 10y agoI disagree, I think it's much easier to search for a property by name. It's really hard to objectively categories every property, one person would put one property in one type another one would not. Sorting it alphabetically helps all users to find the property
- jamessb 10y agoBut a user who was searching for a property with a particular name would presumably use Ctr-f/Cmd-f to search, rather than scrolling through the whole list to find it.
- wallace_f 10y agoI agree with this viewpoint. Additionally, even if the categorization is to some degree arbitrary, at least it beats alphabetical order which ends up being the most arbitrary (well other than just rolling the dice).
- olalonde 10y agoFrom the title, I thought this would be a list of CSS properties ordered by frequency of use (as crawled on the web).
- coding123 10y agoI 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.
- closetheworld 10y agoWow that's so useful. Thanks for this.
- paradite 10y agoI 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 10y agoNot as fast as asking random people on Youtube for help
- willemwijnans 10y agoSo useful, great stuff again after Bulma & marksheet.
- ww520 10y agoNicely put together. I like the examples showing the effect of different properties.
- mschuster91 10y agoWhoa. That is awesome. Thanks for the hard work!
- paublyrne 10y agoI've nothing more to say, other than that this is a lovely app. I'll certainly use it. Thanks.
- xufi 10y agoInteresting app. Something I'll definitely use in the future for referencing
- tambourine_man 10y ago“Play animation” doesn't work in Safari
- demoonkevin 10y agoIt's a really nice app, I'm learning front-end so this will definitely help me.
- datamoshr 10y agoVery handy tool. Might I suggest indexing some values too. Searching for gradient returns nothing, but a suggestion for background-image might make sense.
- namelezz 10y agoVery nice. Can you make a visual guide for CSS selectors too?
- NatW 10y agoVery nice - wish list items: adding css version numbers and browser compatibility.
- mbrookes 10y agoTry http://caniuse.com/ http://caniuse.com/
- yasserkaddour 10y agoDoiuse 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
- Ph0X 10y agoIn the corner of each there's an MDN link which has that info, though having it inline would be neat too. Also maybe a link to www.caniuse.com
- edblarney 10y ago"adding css version numbers and browser compatibility." Changes daily. More work to keep that accurate than to make the page in the first place :(
- edblarney 10y agoThis 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.
- Raphmedia 10y agoThere are references already but they are often really dry.
- HTeuMeuLeuOnHN 10y agoRegarding 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 10y agoYes - 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 10y ago
- parr0t 10y agoThis is going to be super helpful - thanks!!
- imafish 10y agoDefinitely a nice site. However, I'd argue that if CSS was in any way intuitively designed, this site wouldn't be necessary.
- philmander 10y agoVery 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.
- dolzenko 10y agoAs 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!
- tholman 10y agoGreat 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/
- kojoru 10y agoPlease 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/align-content/index.html https://github.com/jgthms/css-reference/edit/master/property...
- austinjp 10y agoHandy, 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/
- archildress 10y agoQuick 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?
- matthewhall 10y agoAll of the other positioning systems are still completely valid, it's just that some people (myself included) find it easier to center things horizontal + vertical and distribute items on the page.
- shakna 10y agoIt can be easier than other ways of positioning in CSS, but you may need to be careful on relying on it, depending on your target audience, and what browsers they use. [0] [0] http://caniuse.com/#search=flexbox http://caniuse.com/#search=flexbox
- jrapdx3 10y agoI think you're right on both counts. After getting the hang of it, flexbox is pretty straightforward to use, IMO less confusing and touchy than floats, especially for responsive layouts. Most browsers are OK these days, but IE/Edge is where I've encountered the most problems with compatability. There are ways to work around it, but that takes a bit of additional effort. CSS tools, e.g., Autoprefix are useful.
- shakna 10y agoAbsolutely, flexbox is great. My comment with browsers, is more about knowing your audience. Most of the evergreen browsers do support flexbox but... Well, I maintain a website for a company. 97.3% of visitors, are return visitors. 69.77% of the visitors are using a version of Internet Explorer. 69.03% of the visitors are using Internet Explorer 7.0. I have no hope of getting to use flexbox to simplify managing the website, which makes me very sad.
- partycoder 10y agoThis is fantastic. For me CSS has been largely very unintuitive, and part of that has been because of the adversarial evolutionary race of browsers.
- LargeCompanies 10y agoFlexbox 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 10y agocaniuse [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/
- Divyaboppana 10y agoits good site for CSS with practical environment.. and i have also some related article on that go with this https://askopinion.com/polls/technology/worldwide/ https://askopinion.com/polls/technology/worldwide/
- d--b 10y agoAm 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.
- faraggi 10y agoI'm on an xps 13 2016 and it runs just fine. Guess you just have to upgrade. /s
- caspg 10y agoYup, 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 10y agoFor 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/
- gshakir 10y agoA codepen that goes along with every example would be cherry on top.
- ehosca 10y agovery useful... thanks!
- brute 10y agoSmall 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 10y agoSame 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.
- ollie 10y agoI'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!
- huherto 10y agoVery 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 10y agoI 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/
- aphextron 10y agoA link to the relevant caniuse.com page in each section would be fantastic
- ahm786 10y agoThe search feature doesn't work sometimes.
- huan9huan 10y agoThe example is very helpful for me, brilliant works!
- GrinningFool 10y agoThis 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.