Re: [csswg-drafts] [css-fonts] Address missing aspect of Progressive Enhancement in font loading

One possible idea is something like the following:

@font-face {
  font-family: "MyFont";
  src: url("MyFont.ttf");
  @loading {
    #myfancydiv {
      letter-spacing: -3px;
    }
  }
}

This approach would piggyback on the CSS Font Loading API's notion of 
an @font-face block being "loading" or "loaded." The style rules would
 only apply if the block is loading. The style rules inside the 
@loading block behave according to the regular priority rules (and, 
since order of rules within the document matters, the rules behave as 
if they are in the position of the @font-face block). Because 
selectors are present inside the @loading block, the browser knows 
which elements to modify.

The downside is that this requires nested at-rules, which I'm not sure
 have ever been done before.

For browsers which don't support the nested at-rules, they would 
likely treat this as a parse error, and either 1) ignore the @loading 
block (which is the most desirable behavior) or 2) ignore the 
@font-face block, which could be worked around by putting a duplicate 
@font-face block just before this one (but omitting the @loading block
 from the earlier duplicate).

Maybe there is a better solution to this problem; this is just what 
I've come up with off the top of my head.

-- 
GitHub Notification of comment by litherum
Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/450#issuecomment-245440197 
using your GitHub account

Received on Wednesday, 7 September 2016 22:31:50 UTC