CSSのbackgtound-sizeを含めたショートハンド

背景画像のサイズを指定するスタイルプロパティbackground-sizeは、ショートハンドで1行にまとめられないものなんだと思い込んでいて
ながい間、このように分割して指定していました。

.xxx {
  background: lightgray url('xxx.svg') no-repeat;
  background-size: 100px 100px;
}

が、/をはさめばショートハンドでかけることが発覚！

.xxx {
  background: lightgray url('xxx.svg') no-repeat / 100px 100px;
}

ショートハンドだと複数背景の設定がわかりやすい

ショートハンドで1行にまとめられると、カンマ区切りで複数の背景を指定するとき
スッキリにまとまってわかりやすいです。

.xxx {
　background:
    linear-gradient(white, white) no-repeat bottom / 13.5em 2px,
    linear-gradient(lightgray, lightgray) no-repeat bottom / 100% 2px;
}

もし、ショートハンドを使わなかったら
こんな感じにごちゃごちゃします。

.xxx {
　background-image:
    linear-gradient(white, white),
    linear-gradient(lightgray, lightgray);
　background-repeat: no-repeat, no-repeat;
　background-position: bottom, bottom;
　background-size: 13.5em 2px, 100% 2px;
}

ショートハンドだと複数背景の設定がわかりやすい

関連記事