March 29, 2007

Styling Internal Anchors

Ever seen an interesting link on a large page, middle-clicked it to open it in a new tab and then realised that it was an internal anchor, and you are just loading another copy of the same large page?

To have every internal anchor marked with a small "#" symbol after it, add the following to your userContent.css:

a[href^="#"] {
  padding-right: 6px;
  background: url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%06\
%00%00%00%08%08%06%00%00%00%DA%C6%8E8%00%00%00%09pHYs%00%00\
%0B%13%00%00%0B%13%01%00%9A%9C%18%00%00%00%07tIME%07%D7%03\
%1D%10%0D*T%0FgN%00%00%00!IDAT%08%D7c%F8%0F%05%0C%0C%0C%A84\
%8C%83%81A%12%BF%FF%FE%23Q%07N%3B%B0%01%D2%25%00N4%8Fj%C7U\
%97%89%00%00%00%00IEND%AEB%60%82") center right no-repeat;
}
Posted by gerv at March 29, 2007 4:15 PM
Comments

First, your selector does not cover all cases. Imagine doc foo.html and href="foo.html#bla". This is local. Your selector does not get it.

Then you can also write

a[href^="#"]:after { content: " #"; font-size: smaller; }

Posted by: Daniel Glazman at March 29, 2007 4:56 PM

Of course glazou, foo.html#blah might not be THIS large file... it could simply be a fragment identifier in ANOTHER page, which makes it worth the "load in new tab" as gerv is suggesting here

Posted by: Callek at March 29, 2007 5:47 PM

When you're using data URIs, base64 is almost always smaller for binary stuff. This might help, it's more or less the same image:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFAgMAAADwAc52AAAACVBMVE\
UAAAD7/f7///8qldNwAAAAEklEQVQI12PoaGAAAg8w2dEAABVPAtkqtxQKAAAAAElFTkSuQmCC

If you're interested, there's a perl module "URI::data" that does all this encoding stuff automatically. Really good for things like this.

Posted by: ant at March 29, 2007 7:31 PM

I thought I'd also note for whoever may be interested that there is a really nice extension out there that covers this and quite a lot more, its called Link Alert and it can be found here: https://addons.mozilla.org/en-US/firefox/addon/3199

-- Ryan

Posted by: Ryan Jones at March 29, 2007 11:00 PM

Thanks Ryan, I was looking for that for years! Extension rocks.
I think that there is few bugs in bugzilla that request such feature - and I also think that some of it (but not all!) should be included directly in Firefox.
It is relatively unobtrusive (of course less category are requested for the general public - but I like for example the open/close lock that is only displayed 'if it is different from the current page' )

Posted by: franCk at March 30, 2007 5:07 AM

Daniel: Callek has spotted why I didn't do as you suggest. Sadly, there's no way of checking whether a link uses the URL form you mention. Fortunately, it's much less common than the bare "#foo" form.

ant: I just used Hixie's data URI kitchen. Looking at it now, I guess I missed the "base64" checkbox.

Ryan: Thanks, I'll definitely try that out. It's a good solution.

Posted by: Gerv at March 30, 2007 8:20 AM

Daniel hasn't suggested anything to do about that limitation, he showed you a simpler (which can also be styled) way of doing what you css does.

Posted by: Anno1602 at March 30, 2007 9:54 AM