Support text-emphasis-position

[yisibl]

Old Safari and Chrome support for -webkit-text-emphasis-position. These browsers support over and under as values, but not the added left and right values required by the spec.

input:

em {
  text-emphasis-position: over right; /* Standard syntax in the specification */
}

output:

em {
 -webkit-text-emphasis-position: over;
         text-emphasis-position: over right;
}

Note

WebKit and Blink support over and under as values, but not the added left and right values required by the spec.

That is to say:

-webkit-text-emphasis-position: under ≈ text-emphasis-position: under left;
-webkit-text-emphasis-position: over  ≈ text-emphasis-position: over right;

input:

em {
  text-emphasis-position: under;
}

output:

em {
 -webkit-text-emphasis-position: under;
         text-emphasis-position: under left;
}

Demo

@zmmbreeze @ethantw Please review this.

jquery.emphasis and han.css muse be use standard grammar.

[ai]

Cool, we have Can I Use page for it: http://caniuse.com/#feat=text-emphasis

Try to fix it at weekend

[yisibl]

PR for caniuse: Fyrd/caniuse#2123

[ai]

Done 5a9a8bc

[yisibl]

Are you going to support this?

input:

em {
  text-emphasis-position: under;
}

output:

em {
 -webkit-text-emphasis-position: under;
         text-emphasis-position: under left;
}

[ai]

We are not a polyfill or CSS linter. In prefix-less future CSS should be correct without Autoprefixer. So we should not fix unprefixed value.

[ai]

If it is very popular mistake, we can show warning for user. What do you think about it?

[yisibl]

OK, I know.

[yisibl]

If it is very popular mistake, we can show warning for user. What do you think about it?

@ai You can increase the warning, because WebKit only support one value.

[ai]

@yisibl but we specially generate -webkit-text-emphasis-position: under; for Safari. Why users will write text-emphasis-position: under? Idea of Autoprefixer to write CSS by W3C spec with under left.

[yisibl]

@ai Because WebKit and Blink only support the old spec(2010) syntax.Many people don't know the new syntax, so there should be a warning.

For example jquery.emphasis and han.css used the old syntax.

  @if ( $posi != null and $posi != none )
    -moz-text-emphasis-position:    $posi
    -webkit-text-emphasis-position: $posi
    text-emphasis-position:         $posi

[zmmbreeze]

👍