💬

#4 2020年11月にツイートしたHTML/CSS/JavaScriptのTipsまとめ

2021/02/05に公開

2020 年 11 月にツイートした HTML/CSS/JavaScript のツイートまとめです。見出しをクリックするとツイート元に遷移するので、気に入ったらフォロー・ファボ・リツイートお願いします。

1. input[type="date"]

input[type="date"] がモダンブラウザで使えるようになりました。対応ブラウザを見る限り、まだしばらくはライブラリを使うのが良さそうですが。

<input type="date">

2. :is()セレクタ

:is() セレクタを使うとセレクタを列挙する必要がなくなり、簡潔に記述できます。

/* 3層（以上）の順序なしリストに四角形を使用 */
ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
menu ol menu, menu ul menu, menu menu menu, menu dir menu,
menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
  list-style-type: square;
}

これは以下のように簡略化できます。

/* 3層（以上）の順序なしリストに四角形を使用 */
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul,
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu,
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir {
  list-style-type: square;
}

:is() に対応していなくても、:-webkit-any() や :-moz-any()、:matches() を使えばモダンブラウザでは使えます。

3. 文字を等幅に

等幅でないフォントの数字部分を等幅に揃えられます。カウントアップのアニメーションなどで横幅が変わるのを防いだりできます。

.tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

OpenType フォントの拡張機能なので、フォント自体に tnum が設定されていなければ使えません。

4. グラデーション文字

Apple の Web サイトでも使われているおしゃれなグラデーション文字の作り方です。

<h2>そのコンピュータは、コンピュータの先を行く。</h2>

h2 {
  color: transparent;
  font-size: 4em;
  background-image: radial-gradient(
                      circle at 100% 100%,
                      #6b16a7 1%,
                      #2c318c 5%,
                      rgba(255, 255, 255, 0) 20%,
                      rgba(255, 255, 255, 0)
                    ),
                    radial-gradient(
                      circle at 0% 80%,
                      #d00c3a 20%,
                      #178ee2 55%
                    );
  -webkit-background-clip: text;
  background-clip: text;
}

radial-gradient() 関数を複数組み合わせておしゃれなグラデーションを描画し、background-clip: text; で文字の背景部分だけくり抜いています。

5. 美しいメニューバー

Apple の Web サイトで使われている美しいメニューバーは backdrop-filter と blur() 関数でただぼかすだけでなく、saturate() 関数を使って調整もしています。

nav {
  backdrop-filter: saturate(180%) blur(20px);
}

6. stickyの状態を検知

position: sticky; を使った際、要素が固定されたときを検知するテクニックです。

<div class="sticky">...</div>

.sticky {
  position: sticky;
  top: 0;
}

const observer = new IntersectionObserver(
  ([event]) => event.target.classList.toggle('is-sticky', event.intersectionRatio < 1),
  {rootMargin: '-1px 0px 0px', threshold: [1]},
)

observer.observe(document.querySelector('.sticky'))

sticky ライブラリでは固定されたときにイベントが用意されていますが、標準の position: sticky; では用意されていないため、IntersectionObserver を使っています。

7. resizeやscrollイベントの負荷軽減

resize や scroll イベントの負荷軽減には、setTimeout() よりも requestAnimationFrame() を使った方がいいかもしれないです。

setTimeout()版

const debounce = (fn, time = 60) => {
  let timeout

  return (...args) => {
    clearTimeout(timeout)
    timeout = setTimeout(() => fn.apply(this, args), time)
  }
}

widow.addEventListener('resize', debounce(event => {
  console.log('debounce setTimeout()', event)
}))

requestAnimationFrame()版

const debounce = fn => {
  let timeout

  return (...args) => {
    window.cancelAnimationFrame(timeout)
    timeout = window.requestAnimationFrame(() => fn.apply(this, args))
  }
}

widow.addEventListener('resize', debounce(event => {
  console.log('debounce requestAnimationFrame()', event)
}))