思いついたら随時追加していく。

softoika 2020/11/30

word-break: break-wordは非推奨なのでword-break: break-all;を使うべし。
なお、word-break: break-wordはIEではサポートされていない。

デフォルトのword-break(normal)だとレアケースではあるが領域から文字がはみ出てしまうことがあり不格好なので、word-breakは極力指定しておいた方がいい。

softoika 2020/11/30

アイテムを横並べにしつつレスポンシブに折り返すUIの作り方

アイテムをinline-blockにして上下左右に均等なmarginを入れつつ、アイテムのコンテナ要素にそれと同等のネガティブマージンを入れるといい。折り返されたときアイテム間の上下方向に余白が付く。

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  ...
</div>

というHTML構造なら、

.container {
  margin: -10px;
}
.container > .item {
  display: inline-block;
  margin: 10px;
}

とすればいい。

IE対応を気にする必要がないサイトであればdisplay: gridを使っても同じようなことができるかもしれない(要調査)

softoika 2020/11/30

テキストを折り返すがn行目以降は...で省略するUI

webkit対応しているブラウザは-webkit-line-clampが使える。便利✨

もちろんIEは対応していないので、fallbackとしてline-height * 行数分のmax-heightを指定すると良い(...は表示されない)。
この場合、line-heightを固定しないと、例えば日本語が含まれる行と英語のみの行で変わってしまうので注意が必要。

softoika 2021/01/25に更新

メディアクエリーで無効なクエリーを指定するとnot allとして評価される。(つまりif (false)な条件と同等)

例えばIEでany-hoverを指定した場合、IE未対応なのでnot allとなる。

この仕様はwindow.matchMedia(query)で指定したクエリがそのブラウザで対応されているのかを調べるのに都合が良い。
戻り値のMediaQueryList.matchesは、クエリがブラウザ未対応のものでもfalseになってしまうが(クエリにマッチせずfalseなのか、対応するクエリが存在せずfalseなのか区別がつかない)
MediaQueryList.mediaは"not all"にfallbackされるので指定したクエリが対応しているものかどうか判別することができる

softoika 2021/04/06に更新

borderを親要素の透過色にする方法

通常、backgroundの範囲はpaddingやborderも含むので、border-colorをtransparentにしてもその要素自体のbackground-colorと同じ色になってしまう。

この対処方法としては、background-clipを使うといい。

background-clip: padding-boxでbackgroundの範囲がborderを含まなくなる。
background-clip: content-boxでpaddingを含まなくなる。

ブラウザ対応範囲はIE9以降が対応しているので大抵動く。(background-clip: textのみEdge(非Chromium)とFirefoxでしか動かない模様)