Re: [css-pseudo] please make sure pseudo-element "alt" property makes it into next ED

James Craig <jcraig@apple.com>:
> 
> It might be worth noting in Example 12 that the style sheet is  not the best place for localizable strings. A comment on the example should suffice.
> 
>> .new::before { 
>>  content: url(./img/star.png);
>>  alt: "New!"; /* or from a localized attribute like alt: attr(title); */
>> }

That’s a very bad example actually. A certain bit of information is only conveyed through styles here and it is not bound to individual user action like ‘:visited’. The ‘title’ attribute in markup that applies to the whole element/node is usually also no appropriate place to put the meaning of the content of purely stylistic before and after boxes, because there shouldn’t be any generic meaning.

That’s a problem you will run into very often if ‘alt’ was added to CSS. The current abbreviated name doesn’t help at all, because it resembles the HTML attribute which is often either not used or misused. So reusing that name gets us confusion for newcomers, because CSS properties are rarely abbreviated, and transfer of bad habits for “oldcomers”. I suggest to do some name (and concept) bikeshedding – ‘alternate’, ‘alternative’, ‘content-alternate’, ‘content-textual’, …

  .new::before { 
    content: url(./img/star.png);
    alt: "★"; /* U+2605, ‘*‘ would do, too */
  }

Class names like “new” are arbitrary and do not carry meaning by themselves, but generated content actually can be used to improve visibility of information that is already there:

  [href^="mailto:"]::before { 
    content: url(./img/envelope.png);
    alternative: "✉︎"; /* U+2709 */
  }
  [rel="home"]::before { 
    content: url(./img/house.png);
    alternative: "⌂"; /* U+2302 */
  }

In cases like this, localizable textual content can make sense.

  :root:lang(en) {
    --text-email: "email";
    --text-home:  "homepage";
  }
  :root:lang(de) {
    --text-email: "E-Mail";
    --text-home:  "Startseite";
  }
  [href^="mailto:"]::before { 
    content: url(./img/envelope.png);
    alternative: var(--text-email);
  }
  [rel="home"]::before { 
    content: url(./img/house.png);
    alternative: var(--text-home);
  }

Note that the textual content is not descriptive “envelope” and “house” in this example.

Received on Wednesday, 5 November 2014 07:49:26 UTC