[SCSS] CSS의 파선을 IE·Edge에도 대응시키는 브라우저 해킹과 Mixin

CSS의 text-decoration:underline wavy; 에서 파선을 그릴 수 있게 되었습니다만, IE와 Edge는 서포트하고 있지 않기 때문에, CSS 그라데이션으로 파선을 재현시킨 브라우저 해킹입니다.
Scss의 mixin에 정리했으므로, 설정해 두면 일행의 지정으로 text-decoration:underline wavy; 를 각 브라우저로 사용할 수 있습니다.

브라우저 표시 예

Chrome(대응 브라우저)

text-decoration: underline wavy #8A65FE; 가 적용되었습니다.

집

background 에서 물결선을 재현하고 있습니다.

코드

Mixin

@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);
  }
}

사용법

인라인 요소에 물결선 클래스를 할당합니다.

 <span class="wave">Lorem ipsum dolor sit amet...</span>

Scss 지정 방법은 다음과 같습니다.

.wave {
  @include wavy-underline(#8A65FE); // 波線の色を指定。指定がなければ文字色。
}

출력된 CSS

.wave {
  text-decoration: underline wavy #8A65FE;
}

_:-ms-lang(x)::backdrop, .wave {
  /* Edge */
  display: inline;
  padding-bottom: .15em;
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0) 0.1em, #8A65FE 0.1em, #8A65FE 0.15em, rgba(255, 255, 255, 0) 0.15em), radial-gradient(circle at bottom, rgba(255, 255, 255, 0) 0.1em, #8A65FE 0.1em, #8A65FE 0.15em, rgba(255, 255, 255, 0) 0.15em);
  background-position: 0 1em, .25em 1.05em;
  background-size: .5em 1.15em;
  background-repeat: repeat;
}

_:lang(x)::-ms-backdrop, .wave {
  /* IE11 */
  display: inline;
  padding-bottom: .15em;
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0) 0.1em, #8A65FE 0.1em, #8A65FE 0.15em, rgba(255, 255, 255, 0) 0.15em), radial-gradient(circle at bottom, rgba(255, 255, 255, 0) 0.1em, #8A65FE 0.1em, #8A65FE 0.15em, rgba(255, 255, 255, 0) 0.15em);
  background-position: 0 1em, .25em 1.05em;
  background-size: .5em 1.15em;
  background-repeat: repeat;
}

이상이 됩니다.

CSS 그라데이션을 사용한 브라우저 해킹입니다만, 파선의 디폴트 스타일을 사용하고 싶지 않은 경우에도 좋아하는 밑줄로 어레인지할 수 있습니다.

도움이되면 다행입니다.

▼IE와 Edge의 브라우저 해킹은 아래를 참고로 했습니다. 감사합니다.
css hacks 2019 ( IE11 / Edge / Chrome / Safari / Firefox )

▼text-decoration-style
htps : //에서 ゔぇぺぺr. 모잖아. rg / 그럼 / cs / u b / Cs / xt - Korachion-sty ぇ