普通に引かれた下線

Mediumライクなかっこいいリンクの下線をついに諦めた。目的とコードがあまりにもかけはなれていて、CSSらしくないのが気になるようになったからだ。プロパティーの組み合わせから結果が想像しづらいルールセットに苦しめられた過去を思い出す。

とは言うものの、できることなら下線の色だけを変えるようにはしたいので、text-decoration-colorプロパティーのサポートで切り替えるようにCSSを書いた。

a {
  color: #1188bb;
  text-decoration: underline;
}

@supports (-moz-text-decoration-color: red) or
  (-webkit-text-decoration-color: red) or
  (text-decoration-color: red) {
  a {
    color: inherit;
    -moz-text-decoration-color: #5bacd0;
    -webkit-text-decoration-color: #5bacd0;
    text-decoration-color: #5bacd0;
  }
}

まず通常はリンクの色を変えて、普通にその色で下線が引かれるようにしておく。そして@supportsルールを使い、text-decoration-colorプロパティーをサポートしている環境では、文字色を地の文と合わせ(inherit)た上で、下線の色を変更してやる。式でredを使っているのは一番短いからで、他に特に意味はない。

text-decoration-colorプロパティーをサポートしている環境はFirefox 6.0以降とSafari 7.1及びMobile Safari 7.1以降のみだ。Chrome 40やInternet Explorer 11ではまだサポートされていない。また、サポートしている環境でもまだプリフィックスがとれていないので(Firefoxでは36から取れる)、@supportsルールの式とプロパティーの両方でプリフィックスを書く必要がある。

しかしながら@supportsルールはSafari 7.1以降やMobile Safari 7.1以降でサポートされていない。そのため、ここまでちゃんと書いてもFirefox 6.0以降でしか有効にならないという現実が待ち受けている。CSSハックを混ぜて適用させることもできるが、ChromeやIEの安定版でサポートされていないことを考えると、まだそこまでする必要もなさそうだ。

Mediumライクなリンクの下線は、その表示結果自体の満足度はかなり高いが、時々これはいったい何をどうするためのCSSなのかがわからなくなる。特にそういったものをプレースホルダー・セレクターやミックスインとして定義している場合、ハイパーリンクへ適用されるスタイルであることという文脈が失われるため、何がどうなっていて何のための定義たちなのかまったく想像できないルールセットになる。

%underline {
  background-image: linear-gradient(
    transparent 50%,
    #5bacd0 50%
  );
  background-position: 0 87.5%;
  background-repeat: repeat-x;
  background-size: 2px 2px;
  text-decoration: none;
}

実際に実装するとこんな感じのプレースホルダー・セレクターになる。CSSグラデーションで横方向に繰り返す画像を作ろうとしているまではわかるが、このルールセットを見てスッと文字列の少し下に1pxの線を引くというルールセットだということを把握するのは無理があるだろう。プレースホルダー・セレクターの名前で説明を試みても良いが……。

このようなセレクターとセットで初めて意味をなすことがあるようなケースはままある。例えば:target擬似クラスや、:focus擬似クラスと隣接セレクターを組み合わせたセレクターなどは良い例だろう。これらに割り当てられるルールセットは一部プロパティーを変更するだけであったりするため、それだけでは何のために何をやっているのかよくわからない。

僕がCSSにおいてオブジェクト志向を持ち込むことに無理があると考えているのは、このようにロジックが混ざるセレクターとルールセットが事実上不可分だと考えているからだ。一部で例外を設けるという選択もあるが、それを赤の他人に汲んでもらうのは難しい。それならばきちんと設計されたHTMLの構造のような意味のある単位でルールセットを構築するか、CSSを構造化して管理することを放棄するかの方が良いのではないか。

実際にはこの辺りとOOCSSの間を行ったり来たりしているところだ。

なおこのウェブサイトではこの新しい普通のリンクの下線がデフォルトになっていて、いくつかのコンポーネント(例えばグローバル・ヘッダー)などでは下線を消すような仕組みになっている(SCSSでプレースホルダー・セレクターを使って当てる)。そちらはそちらで書き直す必要があったりもする。

%link-underline-removal {
  a {
    text-decoration: none;
  }

  @supports (-moz-text-decoration-color: red) or
    (-webkit-text-decoration-color: red) or
    (text-decoration-color: red) {
    a {
      color: #1188bb;
      -moz-text-decoration-color: initial;
      -webkit-text-decoration-color: initial;
      text-underline-color: initial;
    }
  }
}

プリフィックス付きの式を含む@supportsルールをもう一回書いたりしていると頭がおかしくなってくる。現実は厳しい。