nlog

とめどなく流れるよだれ

JSFiddle( Dashboard 画面)の CSS を読む

Dashboard 画面で Minify されていた CSSDirtyMarkup: CSS Beautifier で適当に整形して読んだ。JSFiddle は普段からよく使っているが、今回コードを読むときにサイトの表示はあまり見てない。


CSS は整形後 1100行くらい。

もっとも特徴的なのはここ。ベンダーごとの指定はいいとして、Firefox 18- とFirefox 19+ で分けてるのが他では見ない指定。セレクターのコロンの数が両者の違うから、疑似クラスと擬似要素の違いってことなのかな。

::-webkit-input-placeholder {
  color: #62666c;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: #62666c;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #62666c;
}

:-ms-input-placeholder {
  color: #62666c;
}

:-moz-focusring はフォーカスの当たっている要素のスタイルを変更する。

select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

JSFiddle だけじゃなくて他でも Flexbox のベンダープレフィックスつきの指定を見かけるけど、実際どこまで必要だったかな。普段 Autoprefixer 使ってるから本当に意識しなくてわかんなくなってるな。

#sidebar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

わかる。きっと横か縦に長い要素で、半円 2 つ両端に間に矩形を置いた見た目(なんて言えばいいのか)にしたいんだ。border-radius: 1000px とかでも良さそう。たとえば横は可変するけど高さは固定で決まってるなら、border-radius: $height が良さそう。

#sidebar .userSidebar .avatar img {
  border-radius: 100px;
}

!important や。

#actions .actionItem a.aiButton span {
  margin-right: 6px !important;
}

ID を子孫セレクターにしてカスケーディングする場面ってないはず。ID はページに 1 つのはずだから。

#sidebar #carbonads {
  text-align: center;
}

will-change が使われてる。ブラウザに要素上の予測される変更を伝えておくことで、実際変更するときに最適なレスポンスを返す。ここでは height が transition によって変更されることをブラウザにあらかじめ伝えようとしている。

#hello-bar {
  height: 0;
  background: #0084ff;
  -webkit-transition: height 0.15s;
  transition: height 0.15s;
  overflow: hidden;
  position: relative;
  will-change: height;
}

Grid Layout が使われてる。

#hello-bar .hbBody {
  display: grid;
}

眺めていると全体的に -ms- のベンダープレフィックスが多い気がした。