traverse html dom tree and its css style

Question

I am looking for a way to adapt web pages for various screen devices.

My idea is to build a proxy server to return a new dom tree and CSS style of the page requested by a client browser.

1. Can I run javascript on the proxy server (node.js?) to analysis the dom node tree?
2. Any other ways?

Thanks!

Answer 1

Are you in control of the web pages that you want to adapt for different devices?

If so, you could write different CSS stylesheets for the pages, and apply them to devices with different screen sizes using media queries:

• https://developer.mozilla.org/en-US/docs/CSS/Media_queries
• http://msdn.microsoft.com/en-us/magazine/gg619395.aspx
• http://www.alistapart.com/articles/responsive-web-design/

Edit: as you’re not in control of the web pages, then I guess some sort of proxy server is the way to go.

Building one that works well with most web pages sounds like a huge job though.

To inspect the DOM on the server, I imagine node.js would work fine (I don’t have much node experience, so I’m not 100%), but most languages will have a library (or a few) that allow you to supply HTML as text, and get back a DOM representation of it. Python, for example, has lxml, Beautiful Soup, and others.

The tricky bit would be automatically figuring out how to change the DOM of random pages to make them display better on mobile phones. I don’t know of any libraries that help you figure out what styles apply to a give DOM node, as that only becomes relevant when you’re rendering a web page, which is what browsers do.