nlog

とめどなく流れるよだれ

:matches を使ってコードの視認性を上げる

css

f:id:namikuguri:20180201203802p:plain

:matches を使うと CSS コードの記述量が減らせる。また、このセレクターは Firefox や Chrome といった一部のブラウザで実装されているが、セレクターの指定は :matches ではなく :any という名前になっている。同じ意味を持つセレクター名が 2つあることはややこしいが、仕様が固まるまではしょうがない、待とう。

さて、 CSS コードの記述量が減らせるとはどういうことかというと、いままで以下のように書いていたのが、

a:hover,
a:active {
  color: blue;
  text-decoration: none;
  border-bottom: 2px solid blue;
}

:matches つぎのように済ませられるということである。

a:-webkit-any(:hover, :active) { /*a:matches(:hover, :active)*/
  color: blue;
  text-decoration: none;
  border-bottom: 2px solid blue;
}

コードの記述量はたぶんほとんどの場合変わらないだろう。増えることさえあると思う。

けど、同じことを繰り返し書かないで済むようになるので、コードの見通しはよくなりそうだ。

参考