on:2018年9月25日sponsorsエラーメッセージを実装する際、エラーがある時とエラーがない時の区別は「:empty」や「:blank」を使用すると、非常に簡単にスタイルを定義することができます。「:empty」と「:blank」、その違いと実際にどのように使用するのか、どちらが便利なのかを紹介します。:blank下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。「:empty」と「:blank」のサポートブラウザまとめ私は誤解していた私は1ヵ月前のツイートで、「:empty」と「:blank」についてひどい誤解をしてました。「:empty」は有用ではなく、「:blank」は「:empty」よりはるかに有用であると。「:empty」は非常に有用で、むしろ「:blank」が現状使えないと思います。それがなぜなのか、「:empty」と「:blank」について解説します。「:empty」と「:blank」の違い「:empty」は疑似セレクタで、空の要素を選択できます。*/}空の要素とは、その中に何もデータを持たない要素です。空白スペースさえも含むことはできません。--><div></div>空の要素はデータを持つことはできませんが、コメントを含めることはできます。--></div>「:blank」は「:empty」をパワーアップした形です。「:blank」では、空白スペースを持つことができます。「:empty」と「:blank」は、次の場合に便利です。空の要素をスタイルするというのは、例えば、文言が変わるエラーメッセージを表示するための空のdiv要素をスタイルする場合です。wrong!</div>div要素には.errorが付与されています。スタイルを定義する際に「:empty」を使用しない場合は、classや属性に依存しなければなりません。これは冗長な感じがします。block;}しかし、「:empty」を使用すると、余分なclassや属性は必要ありません。.errorを直接スタイルすることができます。none;」さえ必要ありません。0;}実際の動作は、下記のデモで確認できます。0;」を削除してみてください。レッドの背景が表示されるはずです。続いて、空の状態を作成する場合を見てましょう。リスト要素で実装したTODOリストで、最初の状態はリストの中身がゼロです。state)と呼ばれます。リストがゼロの時は、div要素でメッセージを表示するようにしてみます。この場合、「:empty」を使用すると、ゼロの時とゼロでない時のスタイルを簡単に定義できます。Listから学びました。state)はコンテンツを作成する上で必ず必要です。詳しく学びたい時は、Invisionの記事が参考になります。「:empty」の方が十分ではないと思った理由これには2つの理由があります。制作者の経験不足JavaScriptで空白スペースを整える必要があるため1つ目の理由はもっともですが、あまり重要ではありません。2つ目の理由は重要です。私はこの記事を書いている時にはなぜうまくいかなかったのか分かりませんでしたが、コメントのおかげで理解できました。それぞれ詳しく説明します。先ほど使用したTODOリストを例にします。class="empty-state"></div>あなたは「:empty」が機能しているかどうか、どのように調べますか?私はcommand+Xでli要素をカットして削除します。3つのli要素を削除すると、下記のようになります。</ul>12<ul></ul>ここまでで、上記のHTMLが「:empty」をトリガーにしないことが分かります。「:empty」は要素に空白スペースがない場合にのみ機能します。私は「:empty」のために空白スペースを削除しなければならなかったということです。これはまぁ、小さな問題と言えるでしょう。JavaScriptで空白スペースを整える必要があるため空白スペースは、JavaScriptで手動で切り取る必要があります。実際に例を見てましょう、そうすれば何を意味するのかが分かると思います。一度、TODOリストを例に使用します。state)が機能するには、ul要素からli要素を削除する必要があります。シンプルなJavaScriptを使用する場合は、removeChildで実現できます。ul.children[0]ul.removeChild(li)removeChildはインスペクタに表示されない場合でも、空白スペースを含むHTMLを生成します。childNodesプロパティでテキストノード(つまり空白スペース)を調べることができます。空白スペースはremoveChildで削除できないので、あなた自身で削除する必要があります。これは余分なJavaScriptです。''}実際の動作は、下記デモで確認できます。CodePen.「:empty」と「:blank」のサポートブラウザ2018年9月現在、「:empty」はすべてのブラウザにサポートされていますが、「:blank」はごく一部のブラウザにしかサポートされていません。このことだけでも「:empty」を「:blank」より使用する理由になります。「:empty」のサポートブラウザ「:blank」は、主要なブラウザのほとんどでサポートされていません。「:blank」のサポートブラウザ「:blank」がすべてのブラウザにサポートされる日がくることを願っています。state)を簡単にスタイルできます。「:blank」は「:empty」よりも機能的に優れているため、より良い制作環境が提供されます。「:blank」のサポートブラウザは十分ではありません。「:empty」のサポートブラウザは十分で、すぐに使用することができます。「:empty」と「:blank」について、あなたの考えを教えてください。