💬

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

9 min read

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)
}))

requestAnimationFrame() だと別タブに移動したときに実行されないようになったり、他の処理の割り込みがあってもレンダリングが遅延することなく適切なタイミングで実行されます。

8. ピクセルパーフェクト

Twitter 上で話題になったピクセルパーフェクトについて、海外の記事が書かれていたので要約すると、ピクセルパーフェクトはデバイスやブラウザによってレンダリングが微妙に異なるため現実的には不可能とのことです。

9. Webアクセシビリティ

https://zenn.dev/catnose99/scraps/8dd52a640e440ce1e265

10. Checka11y.css

Checka11y.css は CSS を読み込むだけでアクセシビリティの問題点を表示してくれるライブラリです。

11. Plyr

Plyr はアクセシブルでカスタマイズ性にも富んだ動画プレイヤーを作成できるライブラリです。

12. Cleave.js

Cleave.js は input 要素に入力できる値を特定の形式に限定できるライブラリです。

13. Dexie.js

Dexie.js は IndexedDB ストレージを扱いやすくしたライブラリです。

14. jsdiff

jsdiff はテキストの差分を取得できるライブラリです。

15. graphery

graphery は SVG をヒューマンリーダブルなコードで実装できるライブラリです。

16. XRegExp

XRegExp は正規表現の構文を大幅に拡張して使いやすくしたライブラリです。

17. spacetime

spacetime は時刻から特定の地域の現地時間を算出できるライブラリです。

18. NoSleep.js

NoSleep.js は iOS や Android ブラウザで閲覧中にスリープさせないようにできるライブラリです。

19. japanese-addresses

japanese-addresses は全国の町丁目レベル(189,540件)の住所データです。

20. Tabler Icons

Tabler Icons は 900 種類以上のカスタマイズ可能なアイコン集です。

21. Simple Icons

Simple Icons は 1700 種類以上の SVG 製ブランドアイコン集です。

22. SvgPathEditor

SvgPathEditor は Web ページ上で SVG のパスを編集できるオンラインジェネレーターです。

23. imagemaps

imagemaps はイメージマップを簡単に作れるオンラインジェネレーターです。

24. patternico

patternico はシームレスパターンを作れるオンラインジェネレーターです。

25. Dev Fonts

Dev Fonts はコーディングにぴったりのフォントを探せるオンラインサービスです。


#3 ← | → #5


今すぐ使えるCSSレシピブック

Discussion

ログインするとコメントできます