Open6

HTML/CSSの小ネタ備忘録

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

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

https://developer.mozilla.org/ja/docs/Web/CSS/word-break

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

アイテムを横並べにしつつレスポンシブに折り返す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を使っても同じようなことができるかもしれない(要調査)

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

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

https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-line-clamp

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

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

https://drafts.csswg.org/cssom/#parsing-media-queries

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

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

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

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

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

https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

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

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

https://caniuse.com/?search=background-clip
作成者以外のコメントは許可されていません