何気なくソースコードを読んでいて発覚。
normalize.cssもsanitize.cssも同じ作者が作っているのですが、こんな記述を発見しました。
[hidden] {
display: none;
}
[]は属性セレクタですね。つまり、hiddenという属性を持ったHTMLタグは表示されなくなるようです。
hidden属性の仕様については、hidden- HTML5リファレンス、または w3cの 7.1 The hidden attribute をご参照ください。
わりと今まで、display: none;のためだけに、こんな処理を書くことがあったのですが、
button.php
<button class="<?php (hoge) ? 'is-hidden' : '' ?>" />
button.css
.is-hidden {
display: none;
}
normalize.cssかsanitize.cssを採用している場合、不要だったんですね…笑
button.php
<button "<?php (hoge) ? 'hidden' : '' ?>" />
スクショ
これは↓
こうなる↓
追記
hidden属性の仕様としては、以下のとおり。
- 今は関連性がないが、これから関連するかもしれない要素。
- 以前は関連性があったが、今はもう関連していない要素。
とのこと。
参照：
ブラウザの対応状況としてはIEは11のみ対応しているようです。(2016/08/26現在)
わりかしモダンな属性なんですね。