Hacker News new | past | comments | ask | show | jobs | submit login
Visualize How CSS Rules Interact with a Page (benjaminbenben.com)
143 points by uptown on May 24, 2013 | hide | past | web | favorite | 23 comments

Yup - It's been falling over quite a lot in the last couple of hours! It is all served through cloudfront so that the popular urls get cached (which is why I added the example links - so they would hit the cache). I've just thrown a whole load more heroku dynos at it, so it seems to be working okay again now!

(I built this!)

Out of curiousity how many dynos did you add during this peak time?

I went to 5 and was still seeing a lot of errors, so upped it to 10.

Do you know about Adept Scale?


I didn't. That's fantastic - exactly what I needed; added it and gone back down to 2 dynos.

Neat, though I haven't been able to get it to load anything but the examples. Is this done server-side, and it's just overloaded? Or is there something odd about e.g. yahoo.com ?

yup, it's just overloaded at the moment. It's serverside using phantomjs - I'm running it through cloudfront so the common urls are cached there.

I think I'm making it angry. I tried 3till7.net and then civchoice.com, both of which 'failed to load'.

Cool. I'm curious - how'd you do it? Is there any open source library to find out CSS rules?

document.stylesheets - https://developer.mozilla.org/en-US/docs/Web/API/document.st...

The main part of the injected code is https://gist.github.com/benfoxall/5647039 - there's a bit of hacking round cors issues there too.

You can use cssom (by visionmedia) and document.querySelectorAll/sizzle.

Presumably, you could take the selectors in the CSS and pass them to a JavaScript selector engine. That way, you'd automatically have a list of elements affected by each rule.

Is there not a way to scroll down the target page, or am I missing something? I would love to be able to see this for the lower portions of my site, but it seems that I only can only scroll through the CSS styles themselves...

Zooming out (using the browsers page zoom i.e. cmd/ctrl -) kind of works. There is a html element <div id="zoom">-</div> on the page though but can't actually see it. I'm guessing that will zoom the page out.

That's the minus sign on the bottom right - it's for zooming the css list so that it's all in view (it was originally built to see if appended styles were more specific on a page).

For some reason my website isn't loaded on the left side. I see my rules, but not the screen. My website loads in 300ms or a bit more and it's way optimized.


Little confused... Why do like 90% of the css tags either go to the very top left or to the bottom left? Shouldn't every tag have a specific area?

i'm not sure how useful this is compared to something like a css profiler, but it's definitely cool

thanks. Yeah - it's not as useful as something like css profiler, I built it to work out if there were ways that I could architect my css in a more efficient way.. Though it looked cool, so I threw it online!

I don't understand. Are the blue lines supposed to represent something?

Seems to be broken in FF 23

yeah - there were issues in FF dealing with large data-url embedded images in a json file. I'm looking into it though.

Please do file a bug with a testcase if you have a testcase. That should make it pretty simple to determine where the problem is.

Registration is open for Startup School 2019. Classes start July 22nd.

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact