More than 3 years have passed since last update.

-webkit とかついたCSSセレクタをグループ化（カンマ区切りで複数まとめて指定）すると突然効かなくなる

Last updated at 2020-07-30Posted at 2020-07-30

.css

:-webkit-full-screen,:fullscreen {
  height: 100%
}

一見問題なさそうじゃん？
ところがこれ、Firefox( :fullscreen, :-moz-full-screen には対応してる）でも
Safari( :-webkit-full-scree には対応してる)でも動かないんだな

ちなみにIEは -ms-fullscreen らしい

グループ化したセレクタ群の中に、ひとつでも閲覧中のブラウザが未対応のセレクタを含むと、グループ化したほかのセレクタまで無効化されてしまって、グループ化したブロックのスタイルが適用されなくなってしまうみたいです。

なんか仕様らしい。

.css

:-webkit-full-screen {
  height: 100%
}

:fullscreen {
  height: 100%
}

こう直しましょう。

余談: ベンダープレフィックス付きのスタイル一緒にしてたよ？

セレクタじゃなくてスタイルは対応してないものについては無視されるので大丈夫

.hoge{
  -webkit-transition:all 0.2s ease 0s;
  -moz-transition:all 0.2s ease 0s;
  -o-transition:all 0.2s ease 0s;
  transition:all 0.2s ease 0s;
}