[CSSチュートリアル】CSS擬似クラス：empty makes my eyes shine（コード例）

最近、私がWeChatのアプレットプロジェクトを担当していることは、私の記事を読んでくださっている方ならご存知だと思いますが、その中でいろいろと面白いことや、"気まぐれ"に遭遇しています。この記事の背景は、ある朝、wxml ファイルを眺めていたら、大量の wx:if/else と hidden は、wx:ifによるパフォーマンスの問題はもちろんのこと、タグ上の冗長性もあり、急に煩わしくなります。

前回の記事の続きです[ WeChatアプレットカスタムコンポーネントライブラリyPickerコンポーネント解析と省都三段連携実装 その中で、都市と地方の3レベルリンクのカスタム実装例を分析しましたが、コードの詳細は省きますが、その呼び方は以下の通りです。

ここでは、"あまりJavaScriptで書かない"ために、一方で、県、市、区の3つの変数を使っているので、JavaScriptではこの3つの変数に着目して、間にスペースを入れるなどして、wxmlファイルを取得するようにしたのです。こんな感じで。

<view class="departments location" bindtap="fixedshow">
  <view class="depart_title">location</view>
  <view wx:if="{{provinces&&citys&&areas}}" class="placeholder depart_content">{{provinces}} {{citys}} {{citys}} {{areas}}</view>
  <view class="placeholder depart_content befselect" wx:else>Please select current location</view>
  <view class="desc">If there are changes please modify and submit again</view>
</view>

(後の変更に関わる呼び出しは、ポップアップの "confirm" ボタンがクリックされた場合にこのコードに現れる3つの変数に割り当てられたものだけだからです -- さもなければ、クリックがキャンセルされたか確定したかどうかに関わらず、変更が行われたはずです。(これは良くないことです!)

.departments{
  width: 100%;
  height: 96rpx;
  display: flex;
  align-items: center;
  font-size: 36rpx;
  font-weight: 347;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.location{
  position: relative;
  border-bottom: 1rpx solid rgba(0,0,0,.009);
  display: flex;
  align-items: flex-start;
  padding-top: 20rpx;
}

.desc{
  position: absolute;
  right: 19rpx;
  bottom: 4rpx;
  color: rgb(63,142,255);
  font-size: 23rpx;
}
.departments .depart_title{
  width: 20%;
}
.departments .depart_content{
  margin-left: 10%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.departments .placeholder{
  width: 69%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

ここでwx:ifを置き換えることを決めたら、まず何を置き換えるか考える必要があります。
wx:if 効果は、"exists"が存在するかどうかを判断し、存在しない（条件を満たさない）場合、次のように切り替えます。 wx:else または wx:elif のロジックで

よし、よく考えてみると、cssの擬似クラスで :empty ! これはまさに私たちがやりたいことをやってくれます：要素（コンテンツ）が空かどうかを判断してくれるのです...
早速、次のようにコードを変更してみました。

<view class="departments location" bindtap="fixedshow">
  <view class="depart_title">location</view>
  <view class="placeholder depart_content">{{provinces}} {{citys}} {{areas}}</view>
  <view class="desc">Please change and resubmit if there are any changes</view>
</view>

そして、この擬似クラスをclass - depart_contentに追加しました。

.placeholder:empty::before{
  content: "Please select the current position";
  color: rgba(0,0,0,.6);
}

白紙状態！？

情報を見直した結果 :empty 擬似クラスは、タグが空の場合、コンテンツ領域にスペースがあるとマッチングしない、という意味だそうです

タグを書くときは、タグの中に空白や改行があるかどうか、これに必ず気をつけましょう (改行はスペースと解釈されることが多いようです。）
単一でないタグに遭遇したら、閉じタグに注意するようにしましょう

最終的な解決策は、3つの変数をjsでまとめてスペースに入れ、ページにレンダリングすることです!

(実はこれはカスタムセレクタで、オートロケーションはGode Mapsにリクエストを送り、県と市のフィールドを取得するだけなので、コードは書きません)

ここで問題なのは、上の空の擬似クラスだけでなく、before擬似要素も使っていることです!

結局のところ、emptyだけではコンテンツを追加できないのです（CSS全体では、beforeやafterのような疑似要素だけが、テキストであれ画像であれ、ページにコンテンツを追加することができるようです）。

むしろ2か所に絞ることが重要だと思うのですが。

• 擬似要素がpositionで位置決めされていない! 一般的に、（内容を持つ）要素に対して "before"/"after" のスタイルを設定するには、表示されるべき場所を指定する、つまり位置決めが必要です。そうしないと、この記事の空欄から推測できるように、擬似要素内のテキストはおそらく表示されないでしょう。
• 1点目から、次のように結論づけることができます。 :before と :after タグにコンテンツやグラフィックを挿入する疑似要素は、空の疑似クラスのマッチングには影響しません。

この機能の実用的なバッチです。

上で見たように、この擬似クラスの最大の用途は "フィールドヒントがない" です! これは非常に便利です。そして、このタスクをCSSに任せることで、多くの"(layout) load"を取り除き、より良い体験を提供し、メンテナンスを容易にすることができます!

たとえば、プロジェクトを最適化したとき、要求されたすべてのフィールドに統一されたクラス名を追加しました。

.ym-empty:empty::before{
	content: "No data available at this time, please try again",
	display: block;
	text-align: center;
	color: rgba(0,0,0,.6);
	/** Other positioning and font change operations */
}

CSS擬似クラスに関する記事です。空は私の目を輝かせるはこちら、より関連するCSS擬似クラス空の内容は、スクリプトホームの過去の記事を検索してくださいまたは、次の関連記事を閲覧し続ける、私はあなたがスクリプトホームをサポートすることを願っています！。