💬

#8 2021年3月にツイートしたHTML/CSS/JavaScriptのTipsまとめ

2021/05/02に公開

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

1. <popup>要素

MicrosoftEdgeのGithub でドロップダウンメニューや使い方のヒントなどをまとめて使える <popup> 要素が策定中です。

2. <blockqoute>要素の多言語対応

content プロパティに open-quoteclose-quote を指定することで、html 要素の lang 属性に応じて引用符が自動で切り替わるようになります。

<html lang="ja"> <html lang="en"> <html lang="fr">
「引用ブロック」 “引用ブロック” «引用ブロック»
<blockquote>引用ブロック</blockquote>
blockquote::before {
  content: open-quote;
}
blockquote::after {
  content: close-quote;
}

lang 属性は個別に指定することもできます。

<blockquote lang="ja">引用ブロック</blockquote>
<blockquote lang="en">引用ブロック</blockquote>
<blockquote lang="fr">引用ブロック</blockquote>

また、行内の引用の場合は q 要素を使えば、CSS を使わなくても lang 属性に応じて自動で切り替わります。

3. :user-(in)valid擬似クラス

:(in)valid 擬似クラスの場合は入力中であってもリアルタイムでバリデーションされてしまいますが、:user-(in)valid 擬似クラスを使うと入力を終えてからバリデーションできます。

<input type="email">
<span></span>
input:user-invalid + span::before {
  content: '値が正しくありません';
}

すでに Firefox では :-moz-ui-(in)valid として実装されており、Firefox 88 から正式に実装されています。

4. :user-(in)validのPolyfill

:user-(in)valid 擬似クラスは現在 Firefox 以外では対応していないため、現在のブラウザでも使える方法を考えました。

<input type="email" name="email" placeholder=" " required>
<p>正しいメールアドレスを入力してください。</p>
p {
  display: none;
}
// 入力確定後、無効な値のときに適用されるスタイル
input:not(:focus):not(:placeholder-shown):invalid {
  border-color: red;
}
input:not(:focus):not(:placeholder-shown):invalid ~ p {
  display: block;
}
// 入力確定後、有効な値のときに適用されるスタイル
input:not(:focus):not(:placeholder-shown):valid {
  border-color: green;
}

placeholder=" " を指定すると :placeholder-shown 擬似クラスが使えるようになるのでそれを利用しています。

5. prefers-contrastメディアクエリ

コントラスト比に関する設定を取得できる prefers-contrast メディアクエリは現在 Safari Preview 版で実装されています。

@media (prefers-contrast: less) {
  // コントラスト比が低い方を好む設定のとき
}
@media (prefers-contrast: more) {
  // コントラスト比が高い方を好む設定のとき
}

6. MacOS版Chromeのスクロールバーの色

MacOS 版 Chrome のスクロールバーの色は html または body 要素の background-color によって決まります。

html {
  background-color: blue;
}
body {
  background-color: white;
}

なので、html 要素に青の背景色を指定するとスクロールバーの色は半透明の白色となります。そして、body 要素には白の背景色が指定されているため、この場合はスクロールバーが見えなくなってしまうので注意が必要です。

7. :focus-visibleがデフォルトに

Chrome 90 から :focus-visible 擬似クラスでの指定がデフォルトとなり、キーボード以外でフォーカスされた場合にフォーカスリングを消す指定が必要なくなります。

:focus:not(:focus-visible) {
  outline: 0;
}

8. ドーナツセレクタ

<article> の子孫要素である <p> のうち、<blockquote> の子孫要素でないものが選択されます。

<p>そのころわたくしは、モリーオ市の博物局に勤めて居りました。</p>
<article>
  <h2>遁げた山羊</h2>
  <p>五月のしまいの日曜でした。</p>
  <blockquote>
    <p>わたくしは賑にぎやかな市の教会の鐘の音で眼をさましました。</p>
  </blockquote>
  <p>もう日はよほど登って、まわりはみんなきらきらしていました。</p>
</article>
<blockquote>
  <p>時計を見るとちょうど六時でした。</p>
</blockquote>
article p:not(blockquote *) {
  background-color: yellow;
}

9. Array.from()の第2引数

Array.from() の第 2 引数には map() 関数を指定できるため、Array.from().map(v => {}) のようにする必要はありません。

const headings = document.querySelectorAll('h2')
const toc = `<ul>${Array.from(headings, heading => `<li>${heading.textContent}</li>`).join('')}</ul>`

console.log(toc)
// => <ul>
// =>   <li>...</li>
// =>   <li>...</li>
// =>   <li>...</li>
// => </ul>

10. Object.hasOwnProperty()とその注意点

Object.hasOwnProperty()for...in ループで継承プロパティを除外するときによく使われます。

// プロトタイプ
function Person(name) {
  this.name = name
}

// プロトタイプにプロパティを追加
Person.prototype = {
  age: 25,
  gender: 'male',
}

// インスタンス生成
const bob = new Person('Bob')

for (const key in bob) {
  if (!bob.hasOwnProperty(key)) {
    // Personプロトタイプの継承プロパティである
    // ageとgenderは無視
    continue
  }

  // nameプロパティだけ出力される
  console.log(key)
}

Object.create(null) で生成した場合は、hasOwnProperty() 関数をもたないため、エラーとなります。

const bob = Object.create(null)

bob.name = 'Bob'

for (const key in bob) {
  // TypeError: bob.hasownproperty is not a functionを回避
  if (!Object.prototype.hasOwnProperty.call(bob, key)) {
    continue
  }

  // nameプロパティが出力される
  console.log(key)
}

その場合は、Object.prototype.hasOwnProperty.call というように直接呼び出せば使えます。

11. fs.promises.readFileとfs.readFile

Node.js の fs.promises.readFile()fs.readFile() よりも 40% 遅い!?

https://github.com/nodejs/node/issues/37583

12. ress

モダンな CSS リセットライブラリです。

https://github.com/filipelinhares/ress

13. conic.css

conic-gradient() を使った美しいグラデーション集です。

https://github.com/argyleink/conic.css

14. postcss-aspect-ratio-polyfill

自作の aspect-ratio プロパティをすべてのブラウザで使えるようにする PostCSS プラグインです。

https://github.com/takamoso/postcss-aspect-ratio-polyfill

15. simple-keyboard

軽量でカスタマイズしやすい仮想キーボードライブラリです。

https://github.com/hodgef/simple-keyboard

16. quickmenu

モバイル向けのナビゲーションメニューライブラリです。

https://github.com/aullah/quickmenu

17. tagify

タグ型の input 要素を実装できるライブラリです。

https://github.com/yairEO/tagify

18. lite-youtube-embed

YouTube 動画の埋め込みを 224 倍高速化できるライブラリです。

https://github.com/paulirish/lite-youtube-embed

19. element-resize-detector

要素単位でリサイズを検知できるライブラリです。

https://github.com/wnr/element-resize-detector

20. fast-json-stringify

2 倍高速な JSON.stringify() ライブラリです。

https://github.com/fastify/fast-json-stringify

21. Svelte NodeGUI

HTML/CSS/JavaScript でクロスプラットフォームなデスクトップアプリを作れるフレームワークです。Electron のブラウザベースな実装と違って Qt5 を使っているのでメモリなどのパフォーマンスも良さそうです。

https://github.com/nodegui/svelte-nodegui

22. web-minecraft

Web 上で Minecraft を実装できるライブラリです。

https://github.com/michaljaz/web-minecraft

23. CSS Shadows Generator

ベジェ曲線を使って滑らかな影を実装できるオンラインジェネレーターです。

https://shadows.brumm.af/

24. Fancy Border Radius Generator

border-radius を使って変わった形を作れるオンラインジェネレーターです。

https://9elements.github.io/fancy-border-radius/

25. Cubic Bezier Generator

cubic-bezier() 関数をより直感的に生成できるオンラインジェネレーターです。

https://cubic-bezier.com/

26. Easing Gradient Generator

滑らかなグラデーションを生成できるオンラインジェネレーターです。

https://larsenwork.com/easing-gradients/

27. Neumorphism.io

https://neumorphism.io/

28. Neumorphic Generator

https://neumorphic.design/

29. Neumorphism UI

https://demo.themesberg.com/neumorphism-ui/

30. Glassmorphism Generator

http://santhoshsivan.com/glass.html

31. avif.io

あらゆる画像を AVIF 形式に変換できるオンラインサービスです。

https://avif.io/


No.7 ← | No.9


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

Discussion