Hacker News Reader

What we need are 'Element Queries' - http://ianstormtaylor.com/media-queries-are-a-hack/

It doesn't, directly, but you could argue that when designing/building a website with mobile at the forefront of your thought process, you should end up with a less-excessive DOM, as you begin by building the simplest (i.e. mobile) UI, first.

What if there was a way server-side to look at the CSS and HTML and strip out the elements that won't ever be visible on a specific client device? A bit of HTML and CSS parsing, as well as knowledge about the client, and voila: less HTML (and CSS?) to the device!

This way as a developer you still have one HTML page, but smaller devices don't ever get non-visible DOM elements.

You can do it client side with matchMedia.

Instead of setting `display: none` with CSS media queries, make a function to rip out elements with a class like `onlyBig` from the DOM, or better yet, use client side templates and only inject the DOM elements appropriate for that screen to start with.

I think mobile first solves excess DOM mostly when you are serving different templates to different devices.