CSS の簡略記述特性は指定しなかった特性を初期値で上書きする

CSS

簡略記述特性とは

複数の特性を一度に指定できるプロパティの性質を「簡易記述特性」と呼びます。

body {
  font: normal normal normal medium normal serif; /* font-style, font-variant, font-weight, font-size, line-height, font-family */
}
p {
  border: solid 1px red; /* border-style, border-width, border-color をまとめて指定する */
}

簡略記述特性で全ての特性を指定しなかった場合

簡略記述特性は一つ以上の特性を指定する必要があり、指定しなかった特性はそれぞれのプロパティの初期値で上書きされます。

<style type="text/css">
p {
  color: black;
  border: solid 1px red;
}
.sample1 {
  border-style: double;
}
.sample2 {
  border: double; /* border-width, border-color を省略する */
}
</style>
</head>
<body>
<p class="sample1">sample1</p><!-- "border: dotted 1px red"  -->
<p class="sample2">sample2</p><!-- "border: dotted medium black"  -->

境界特性プロパティの初期値
プロパティ名初期値
border-stylenone
border-widthmedium
border-color要素のcolor特性の値

.sample2 では border-width, border-color を省略したため、それぞれのプロパティ初期値で上書きされています。

結論

簡略記述特性で指定しなかったプロパティには何もしない と勘違いしていると思わぬ不具合を生むので注意する必要がありそうです。(私も勘違いしてました)

参考リンク