CSSFrag Safari Extension

Update Karan Lyons has created a new and significantly improved version of CSSFrag that (among other improvements) can automatically generate CSSFrag links from the context menu. I have now passed the torch of CSSFrag Safari Extension maintainer to Karan. We tried to rig up a way to smoothly and automatically update users of my extension to his but Safari didn’t like the hand-off so you’ll need to manually update to the new version.

Yesterday I twondered if there had been any developments in the browser space regarding linking directly to arbitrary elements. I wanted to link to a specific section of a page on a site I don’t maintain but that the author hadn’t anticipated linking to. The solution I proposed was a jQuery-like syntax for a normal CSS selector added to a url as part of the hash.

Then Eric Meyer pointed me to this proposal for Using CSS Selectors as Fragment Identifiers (co-authored by Simon St.Laurent).

Almost exactly what I was looking for but still just a proposal. So I put together a simple Safari Extension called CSSFrag that implements #css() selectors in url fragments (sans fallbacks). Then Laurian Gridinoc ported it to Firefox as a restartless extension (source). And then Lim Chee Aun ported it to a Chrome extension (source). Later, David Hasather ported it to an Opera extension (source). Progress!

Download CSSFrag for Safari, Firefox, or Chrome. Here’s an sample link to try once installed: Daniel Brown’s excellent Metroid Piano covers. (Note that attribute selector values must be quoted as well as URI encoded). The best part is that even if you don’t have the extension installed the link still works.

Author-designed versus User-designed urls

CSSFrags are not meant to replace more concise, author-designed urls. CSSFrags enable a site’s users to address specific sub-content that the site’s author may not have anticipated as being interesting. Think about user stylesheets and how they afford another layer of control above author-designed stylesheets. This was also the intention of the original proposal.


Like normal fragment identifiers, CSSFrags may not be able to jump to an anchored element if the page is modified by JavaScript that causes the document to reflow or otherwise modifies attributes. Not sure if there’s a sensible solution to that problem.

Because CSSFrags might rely on content or specific document structure they are considerably more volatile than “normal” links. But, unlike a traditional broken link where a 404 results in missing content, a broken or unsupported CSSFrag only results in a loss of context, leaving the user to manually find the relevant element.

The Last Rocket
Shaun Inman
July 25th, 2011 at 9:25 am