💬

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

2021/05/02に公開

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

1. <popup>要素

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

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

content プロパティに open-quote と close-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)
}