scss CSSの波线をIE·边缘にも対応させるブラウザハックと密新

Posted 2021-05-17

/** Usage
.wave {
  @include wavy-underline(#ccc);
}
*/
@mixin wavy-underline-style($underline-color:currentColor) {
  display: inline;
  padding-bottom: .15em;
  background:
  radial-gradient(circle at top,
    rgba(255,255,255,0) .1em,
    $underline-color .1em,
    $underline-color .15em,
    rgba(255,255,255,0) .15em
    ),

  radial-gradient(circle at bottom,
    rgba(255,255,255,0) .1em,
    $underline-color .1em,
    $underline-color .15em,
    rgba(255,255,255,0) .15em
    ),
  ;
  background-position: 0 1em, .25em 1.05em;
  background-size: .5em 1.15em;
  background-repeat: repeat;
}

@mixin wavy-underline($underline-color:currentColor) {
  text-decoration: underline wavy $underline-color;

  @at-root _:-ms-lang(x)::backdrop, & {
    /* Edge */
    @include wavy-underline-style($underline-color);
  }

  @at-root _:lang(x)::-ms-backdrop, & {
    /* IE11 */
    @include wavy-underline-style($underline-color);
  }
}