abbr[title] should not have border-bottom
Closed this issue · 33 comments
On the latest Firefox releases this is showing 2 underlines on abbr elements, the specification states that the default CSS for abbr[title] should be:
abbr[title], acronym[title] { text-decoration: dotted underline; }Therefore this is not required in Bootstrap.
Refer to: http://www.w3.org/TR/html5/rendering.html#phrasing-content-0
@Rewt0r I think potentially instead of removing it, it would make more sense to use the border-bottom and modify the Firefox one instead of adding the text decoration. This is how it works in the latest Chrome AFAIK.
@Rewt0r would you be able to post an exact browser version where this issue occurs, the operating system which you use, and a JSBin demonstrating the issue? This will make it easier for the core team to quickly test and confirm the issue which you mention.
Relevant Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1157083
@Rewt0r Ah, link to your bug next time :-) https://bugzilla.mozilla.org/show_bug.cgi?id=1170480
I think potentially instead of removing it, it would make more sense to use the
border-bottomand modify the Firefox one instead of adding the text decoration. This is how it works in the latest Chrome AFAIK.
Mozilla didn’t make the change at random. There’s two reasons behind it:
- https://bugzilla.mozilla.org/show_bug.cgi?id=1157083 indicates the
border-bottom-based solution that Firefox previously used doesn’t look very good when used with the Japanese Meiryo (メイリオ) font that is pre-installed on Windows versions since Vista. - The UA stylesheet in the HTML spec suggests to use
abbr[title], acronym[title] { text-decoration: dotted underline; }. This change matches the spec.
Hopefully this explains why your proposal is not the most future-friendly solution.
Yep, saw that in the x-ref which explained all of that :) thanks for the links though
Can we close since this doesn't appear to be something we'll be fixing in Bootstrap?
I just hit this with FF 40 beta. Not sure what we can do but currently it's not right either.
EDIT: Just saw the normalize.css issue, subscribed there and we'll see.
In addition to being affected by this due to Normalize.css, Bootstrap is also directly affected due to
Line 237 in 0db1838
True that.
What do you think we should do @cvrebert? I mean, we should address this as soon as possible since it just looks bad on Firefox. On the other hand, I know Firefox doesn't have the user share Chrome has, but since I use it personally, I'd like to sort this out as soon as possible :)
How about we just use @supports?
For the tooltip plugin, we could move that style to JS and inject it according to the browser, although I'm not sure I like browser sniffing.
@XhmikosR Yeah, I think we should apply either @supports or necolas/normalize.css#451 in type.less & normalize.less.
But what about other browsers? I mean, they don't all implement this. So @supports seems like the best solution at this point, right?
@supports seems the cleanest solution to me (from a philosophical point of view, not thoroughly tested yet) - though of course that tests "does the browser supported dotted underlines", rather than "what does the browser use as its default styling for this element" (unless i'm misunderstanding it)
I'm in favor of necolas/normalize.css#451.
But that would remove the border for all browsers, even those which don't have it...
@XhmikosR So what? It's a harmless no-op if the browser doesn't support text-decoration.
Well, the browsers that don't have this are the all except for Firefox 40+, right?
Ah, never mind, I thought that normalize.css patch was just removing border. That solution seems fine with most browsers indeed, so I say we go with that for now too.
Well, the browsers that don't have this are the all except for Firefox 40+, right?
Ah, thinking it through myself, if the end result would be something like
abbr[title], acronym[title] { border-bottom: ... }
@supports (text-decoration: dotted underline) {
abbr[title], acronym[title] { text-decoration: dotted underline; border-bottom: none; }
}
then yeh, that'd work nicely. 👍
Closing for now—we'll get the fix from Normalize whenever it happens <3.
This issue has been resolved by necolas/normalize.css@5304c78 and a new release will be coming soon.
Can we get a v3 release with this fix?
@niemyjski, I think it’s possible, but is there any reason you couldn’t use v4?
@jonathantneal Yes my app is deployed in production and our customers are seeing this with firefox and opera. Also v4 is alpha and will break a lot of stuff on top of it I'm using less.
Last time I tried this in Chrome it resulted in a black solid line for
abbr. I will need to check again. Also I was under the impression we had
backported this but apparently not.
On Apr 13, 2016 00:05, "Blake Niemyjski" notifications@github.com wrote:
@jonathantneal https://github.com/jonathantneal Yes my app is deployed
in production and our customers are seeing this with firefox and opera.
Also v4 is alpha and will break a lot of stuff on top of it I'm using less.—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#16574 (comment)
I don’t know about “alpha”, but normalize.css v4 has had a proper release. A lot of people and time and testing went into v4. There were also a lot of fixes beyond that particular issue. I also understand if you would want to just patch this one thing; and in that case I would recommend adding this rule to your CSS.
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}Works in firefox but results in solid underline on chrome and others
Yeah that is what I said above too.
On Apr 13, 2016 00:20, "Blake Niemyjski" notifications@github.com wrote:
Works in firefox but results in solid underline on chrome and others
—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#16574 (comment)
Chrome and Firefox are implementing abbr[title], acronym[title] { text-decoration: dotted underline; } per the W3C specification HTML5 Section 10.3.4. Firefox has already released this change. Other browsers have yet to.
Remember, other browsers never styled abbr to begin with. The style you know from normalize.css v3 came from the Firefox style, and Firefox has since changed that style to match the spec. normalize.css should not invent a normalization that does not follow any browser or specification.
As for the solid line; the nearest fallback for text-decoration: underline dotted is text-decoration: underline, which is equivalent to text-decoration: underline solid; and this is why you see a solid line. You are experiencing the same thing your IE visitors have been experiencing for years, which is being a little behind the curve and getting the fallback.
As Chrome adds this update (which might come sooner if you ask them for it), your visitors will receive the dotted experience. Does this help clarify the situation?
Should you wish to avoid the standards and the fallback, I would recommend adding this rule to your CSS.
abbr[title] {
border-bottom: 1px dotted;
text-decoration: none;
}@jonathantneal Thanks! that did the trick and I also left a message on the chrome issue tracker
Bootstrap 3 is no longer being officially developed or supported.
All work has moved onto our next major release, v4. As such, this issue or pull request is being closed as a "won't fix." For additional help and support, we recommend utilizing our community resources. Thanks for your understanding, and see you on the other side of v4!
<3,
@mdo and team