💬

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

2021/03/12に公開

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

1. input[type="email"]とmultiple属性

input[type="email"] 要素に multiple 属性をつけるとカンマ区切りで複数のメールアドレスを入力できるようになります。

<input type="email" inputmode="text" multiple>

ただし、input 要素に type="email" を指定すると iOS のキーボードでカンマが入力できなくなるため、inputmode="text" を指定しておきます。

2. :not()セレクタに複雑なセレクタを指定

これまでは :not() セレクタ内に単一のセレクタしか指定できませんでしたが、これからは複雑なセレクタを指定できるようになります。

p:not(article *) {
  // article要素の子孫にないp要素
}

一見すると、現在の :not() で表現できると思うかもしれません。

:not(article) p {
  // article要素の子孫にないp要素???
}

このようにすると、p:not(article *) と同じことができるように思いますが、実際には違います。html p や body p、div p なども当てはまるため、p { ... } とやっていることは変わりません。

IE	Edge	Firefox	Chrome	Safari	Opera	iOS Safari	Android
-	88	84	88	9	74	9	88

3. Data URIの可読性

Data URI はバックスラッシュで改行でき、SVG などのコードを見やすくできます。

.icon {
  width: 1em;
  height: 1em;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml,\
    <svg xmlns="http://www.w3.org/200/svg" viewBox="0 0 200 200">\
      <circle cx="100" cy="100" r="100"/>\
    </svg>');
}

IE に対応する必要がある場合は PostCSS プラグイン等で Base64 エンコードするとよいです。

4. ネットワーク状況の判定

オンラインやオフラインの状態を検知できます。

widow.addEventListener('online', event => {
  // オフライン状態からオンラインになったとき
})

widow.addEventListener('offline', event => {
  // オンライン状態からオフラインになったとき
})

// 現在のネットワーク状態
console.log(window.navigator.onLine)

5. 要素の取得をする脱jQuery

jQuery から JavaScript で要素の取得をする書き換えです。

タグ名で要素を取得

jQuery

$('tag')

JavaScript

document.querySelectorAll('tag')

クラス名で要素を取得

jQuery

$('.class')

JavaScript

document.querySelectorAll('.class')
document.getElementsByClassName('class')

どちらでも取得できますが、.querySelectorAll() だけ覚えておけば大丈夫です。

id名で要素を取得

jQuery

$('#id')

JavaScript

document.querySelectorAll('#id')
document.getElementById('id')
window['id']

これも色々方法がありますが、.querySelectorAll() だけ覚えておけば大丈夫です。

CSSセレクタで要素を取得

jQuery

$('a[target="_blank"]')

JavaScript

document.querySelectorAll('a[target="_blank"]')

.querySelectorAll() にそのまま CSS セレクタを指定できます。

6. クラス名の操作をする脱jQuery

jQuery から JavaScript でクラス名のつけ外しと特定のクラス名をもつかどうかを判定する書き換えです。

.toggleClass()

jQuery

const element = $('.element')

// クラス名のつけ外し
element.toggleClass('class')

JavaScript

// IEなどclassList非対応の場合はmdn-polyfillsを読み込む
import 'mdn-polyfills/Element.prototype.classList'

const element = document.querySelector('.element')

// クラス名のつけ外し
element.classList.toggle('class')

.hasClass()

jQuery

const element = $('.element')

// クラス名があるかどうか
element.hasClass('class')

JavaScript

// IEなどclassList非対応の場合はmdn-polyfillsを読み込む
import 'mdn-polyfills/Element.prototype.classList'

const element = document.querySelector('.element')

// クラス名があるかどうか
element.classList.contains('class')