May I suggest updating abbr[title] to add support for Safari?

[simevidas]

normalize.css includes the following style rule:

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

Source: https://github.com/necolas/normalize.css/blob/master/normalize.css#L80-L89

This results in a solid underline in Safari:

However, Safari does support text-decoration-style. You could add the following declaration to the above style rule to make the underline dotted in Safari as well:

text-decoration-style: dotted;

Demo: https://jsbin.com/guriqel/edit?html,css,output

Could you check if this is something that you could do?

[juytter]

738

[sean1138]

I'm not sure that there is anything that can be done for this as far as normalize.css goes but thought it might be noteworthy.

I noticed some oddness with the dotted underline in chrome with a three letter acronym. At first i thought it was just because the content was all caps but no. Changing the font-size can change/improve the appearance of the dotted underline IMO, at around font-size:21px the dotted underline looks better in chrome here. Using 5 letters saw unexpected results in chrome here as well. https://codepen.io/sean1138/pen/dyGeKK

[garrettw]

@simevidas is this fix still needed in Safari?

[simevidas]

@garrettw Yes, it’s needed. Safari 16.3 still does not support the shorthand text-decoration: underline dotted.

The relevant WebKit bug is here: https://bugs.webkit.org/show_bug.cgi?id=230083

[garrettw]

Ok, adding it to my normalize in https://github.com/garrettw/vitals