6

When selecting something on a page, I noticed this oddity: (to reprodce press CTRL+A)

On closer inspection, I saw there's indeed the text "Meta Stack Exchange" inside the logo placeholder, with transparent color.

My first thought was that it's a fallback mechanism for those with images disabled, but when disabling images in my browser (Chrome), that's what I saw:

So what is the purpose of this transparent text? Or is this just a bug/leftover?

Checking other sites on Stack Exchange, they all appear to also have such text inside the logo placeholder, but hiding it by applying a big negative text-indent value, thus it's not showing even when selecting. Why is the difference here on MSE?

  • 4
    Screenreaders and/or search crawlers most likely – Tim Stone Jan 10 '17 at 13:41
  • @Tim oh. Is this some common way to put things in place? It doesn't break anything, just looking weird when selecting text or search. (browser highlights the transparent text.) – Shadow The Princess Wizard Jan 10 '17 at 13:42
  • I'm not sure of the benefits of transparent text vs. offsetting it far out of the container, but otherwise yeah. I don't know which motivation(s) factor in specifically for SE though – Tim Stone Jan 10 '17 at 13:43
  • @Tim interesting, all other sites I checked appear to choose that "offsetting it far out of the container" you mentioned – Shadow The Princess Wizard Jan 10 '17 at 13:50
  • Yes, and having that offset meant that the logo wasn't clickable... as it is on other sites. – Oded Jan 10 '17 at 14:00
  • @Oded what you mean? The logo is clickable for both options, here on MSE, and on those sites with the negative indent. Why not apply the same design in MSE? – Shadow The Princess Wizard Jan 10 '17 at 14:02
  • OK. Give that text a negative indent as on other sites. Logo still clickable? – Oded Jan 10 '17 at 14:02
  • @Oded oh. Wait, there was such a bug. But still, how it works on other sites then? – Shadow The Princess Wizard Jan 10 '17 at 14:03
  • I was never able to track it down completely - the fix was a compromise :/ - I think something else in the MSE css is the issue, but I don't know what. – Oded Jan 10 '17 at 14:03
  • @Oded I see. Might try and figure this out then, just for fun. Feel free to drop an answer, linking to that bug. :) – Shadow The Princess Wizard Jan 10 '17 at 14:05
  • I actually can't reproduce with the default style, but it might be related to this bug. It seems the text-indent value that it starts to fail at is context or system dependent. If that were the case just some smaller indent value might work too – Tim Stone Jan 10 '17 at 14:24
  • @Tim on SO the text indent is -999999em and it's still clickable. – Shadow The Princess Wizard Jan 10 '17 at 14:27
  • 1
    @Oded Hmm, MSE's font-size for #hlogo a seems atypically larger than the other sites (set specifically to 24px, for whatever reason), so the same em value probably more easily pushes it over the threshold for the above bug, if I had to guess – Tim Stone Jan 10 '17 at 14:28
  • @TimStone - I'll play around with that and see. – Oded Jan 10 '17 at 14:33
  • I remember I accidentally selected the logo some months ago, and this wasn't there. – M.A.R. Jan 10 '17 at 16:14
5

I've updated the CSS for this - mostly removing things.

The negative indent is back (removed the override), put the color back to what it was originally and the actual fix was to remove the 24px font size directive on the element (thanks to Tim Stone for pointing me at the right direction) - I have also removed a line-height directive.

With you in the next build.

  • I still see this now after a build, was it pulled back for some reason? :/ – Shadow The Princess Wizard Jan 11 '17 at 15:56
  • Nope. Still there Ctrl + F5? – Oded Jan 11 '17 at 16:03
  • Oh. Duh. But still, aren't you using some cache busting mechanism when updating the CSS? – Shadow The Princess Wizard Jan 11 '17 at 16:04
  • Should have busted, yeah. Not sure what that wouldn't work. – Oded Jan 11 '17 at 16:04
  • Let's see for other users... – Shadow The Princess Wizard Jan 11 '17 at 16:04
  • At least one other user sees it @Sha. RE: chat – M.A.R. Jan 11 '17 at 16:07
  • @M.A.R. you mean you see the text when selecting (i.e. cache wasn't busted), or you don't see the text? (i.e. cache bust worked) – Shadow The Princess Wizard Jan 11 '17 at 16:08
  • I see the text that shouldn't be there. AKA this isn't [status-completed] yet – M.A.R. Jan 11 '17 at 16:09
  • Hm. There is no cache buster on the CSS file URL. That's... strange. Will need to investigate further, @Sha – Oded Jan 11 '17 at 16:12
  • @M.A.R. well, it is, kind of. You just have to clear your cache first. :-) – Shadow The Princess Wizard Jan 11 '17 at 16:13
  • @Oded huh! So two bugs in the price of one... :D – Shadow The Princess Wizard Jan 11 '17 at 16:14
  • 1
    @ShadowWizard - looks like the cache buster is fixed. – Oded Jan 12 '17 at 9:15
3

Because the logo is actually a background image. In HTML, you can link an image, but only if it's actually in the DOM. The header appears to be this

#header {
    background: transparent url("img/icon-cloud@2.png?v=2f4838039b7f") no-repeat scroll left center;
}

Now, the URL itself won't load for some reason (probably anti-scraping), but that's the Meta.SE header. So you have to have some sort of DOM object to link. So they add it as an actual link that sits, positionally, over the logo

<a href="/"> Meta Stack Exchange </a>

Seems screwy, but it does a few useful things

  1. Helps with SEO. Search Engines key in on the link text (yes, they still pay attention to that stuff).
  2. Helps with screen readers like Chromevox
  3. Legacy compatibility. Yes, people use all sorts of screwy browsers still. But <a href></a> is an HTML staple. If you don't load CSS at all, the link will still work.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .