[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 instead of 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?

[91bananas]

Then 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.

[rohannair]

> like it should

No it shouldn't. Split up large chunks if it impacts performance.

[Kiro]

I 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.

[prashnts]

I agree that it is fine for a reference site. Though, Virtual elements are possibly a solution where only the current viewport is painted.

[Raphmedia]

The 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]

No it wouldn't, because this means additional delays for anyone that is actually using the site.

[Raphmedia]

Lazy 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]

That 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.

[scotty79]

You 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.

[Raphmedia]

You would still need all the text to be in the markup for SEO purposes anyway.

[flukus]

Like how wikipedia does it? Full content but mostly collapsed.

[jklinger410]

The 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.

[CamperBob2]

The page almost crashed my browser

Thanks for the report. Hopefully the author will almost fix it.

[jklinger410]

My chrome was unresponsive but recovered.

[Kiro]

How would you do it and still view all the properties on one page?

[scotty79]

Disable 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.

[jklinger410]

I wouldn't have the properties on one page.

[Kiro]

Then it's more a matter of taste than laziness. I very much prefer to have them all on a single page.

[jklinger410]

Except 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.