It's a nifty solution. But speaking as a music engraver, it could use a lot of improvement, and I don't think there's enough tolerance in CSS to make it work. The beams, slurs, and ties, in particular have real problems visually. This is why other methods of getting notation into the browser don't use such tools. You need pinpoint precision for vector rendering, which is why almost all browser notation is done with SVG or some sort of Canvas drawing.

Other than the clever solution of using CSS, why would you do this? One can already do scalable notation in the browser with other tools (Check out Adrian Holovaty's Soundslice or Sibelius Cloud Publishing).