Page MenuHomePhabricator

Restrict <abbr> formatting to where a title attribute is present
Closed, ResolvedPublic

Description

The rule currently present in shared.css

abbr,
acronym,
.explain {
border-bottom: 1px dotted;
cursor: help;
}

should become

abbr[title],
.explain[title] {
border-bottom: 1px dotted;
cursor: help;
}

Reasoning:


Version: 1.22.0
Severity: enhancement

Details

Reference
bz54729

Event Timeline

bzimport raised the priority of this task from to Low.Nov 22 2014, 2:23 AM
bzimport set Reference to bz54729.

[[mw:Developer access]]. Get it and submit patches directly! :)

(In reply to comment #0)

  • It does not negatively impact compatibility, as far as I know (IE 6 does not support the [title] selector, but does not support the <abbr> element either).

jQuery (which we include on all pages) includes a hack to make <abbr> and other elements stylable in IE6. Adding an attribute selector, however, will force it to drop the entire rule (including the styles for .explain) per the CSS spec (browsers should drop the entire rule if they don't understand any part of it).

So if we want to support IE6, we need to split this rule and provide different styles for saner browsers. I'm not sure if we want to do this, or if we should just kill this altogether (apart from the .explain part, I guess).

(In reply to comment #1)

[[mw:Developer access]]. Get it and submit patches directly! :)

I'll try to have a look.

jQuery (which we include on all pages) includes a hack to make <abbr> and
other elements stylable in IE6.

Is that true? It doesn't work for me. See also bug 24778.

So if we want to support IE6, we need to split this rule and provide
different styles for saner browsers. I'm not sure if we want to do this,
or if we should just kill this altogether (apart from the .explain part,
I guess).

"Kill this altogether" just for IE 6 or for all browsers?

I wouldn't kill it for all browsers because that would make it inconsistent: Mozilla and Opera <= 12 have a default styling similar to the one in shared.css, but IE and WebKit don't.

For the <abbr> part, I think restricting it to the presence of a title would be an improvement that might justify killing it for IE 6 (assuming that it worked at all, which it doesn't, for me) - there are valid reasons to use <abbr> without a title. The .explain part probably doesn't matter too much (one could argue that the class should simply not be used without a title).

Maybe something along the lines of this (assuming that it works at all in IE 6):

/* Always highlight these things in IE 6 */

  • html abbr,
  • html .explain { border-bottom: 1px dotted; cursor: help;

}

/* In other browsers, only highlight this if there is something to see */
abbr[title],
.explain[title] {

border-bottom: 1px dotted;
cursor: help;

}

(In reply to comment #2)

jQuery (which we include on all pages) includes a hack to make <abbr> and
other elements stylable in IE6.

Is that true? It doesn't work for me. See also bug 24778.

…actually, I don't even know. I was under the impression that it's supposed to work, but I tested now and it clearly doesn't. I don't think anybody cares. ;)

Given that I think going with your original patch is a good idea :) Do you want to submit it yourself or should I do it?

(In reply to comment #4)

Do you want to submit it yourself or should I do it?

It would be nice if you could submit it this time ;) I'll try to understand how this works for the next time.

Change 86382 had a related patch set uploaded by Bartosz Dziewoński:
Restrict <abbr> formatting to where a title attribute is present

https://gerrit.wikimedia.org/r/86382

Change 86382 merged by jenkins-bot:
Restrict <abbr> formatting to where a title attribute is present

https://gerrit.wikimedia.org/r/86382