CSS 疑似クラス: 空っぽだと光る (サンプルコード)

最近私の記事を読んだ人なら誰でも、私が現在WeChatミニプログラムプロジェクトを担当しており、その中で多くの興味深いことやいくつかの「奇妙なアイデア」に遭遇したことをご存知でしょう。この記事の背景は、ある朝、wxml ファイル内にhidden一連のwx:if/elseを見ていて、突然イライラしたことです。wx:if によってパフォーマンスの問題が発生するだけでなく、タグも冗長でした。

前回の記事[WeChatアプレットカスタムコンポーネントライブラリのyPickerコンポーネントの分析と省、市、地区間の3レベルリンクの実装]に続いて、省、市、地区間の3レベルリンクのカスタム実装という例を分析しました。詳細なコードが含まれているため、ここではこれ以上説明しません。呼び出し方法について説明します。

当時の私の考えはこうです。一方では「JavaScript で書きすぎない」という配慮から、他方では、それぞれ 3 つの変数を使用して、province、city、district を実装したため、JavaScript ではこの 3 つの変数のみに注意が向けられ、その間にあるスペースなどはすべて wxml ファイルに取り込まれてしまう、というものでした。このような：

<view class="部門の場所" bindtap="fixedshow">
  <view class="depart_title">場所</view>
  <view wx:if="{{provinces&&citys&&areas}}" class="placeholder decent_content">{{provinces}} {{citys}} {{areas}}</view>
  <view class="placeholder decent_content befselect" wx:else>現在の場所を選択してください</view>
  <view class="desc">変更がある場合は、修正して再度送信してください</view>
</ビュー>

(呼び出しにはその後の変更が含まれるため、ポップアップ ウィンドウの [確認] ボタンをクリックするのは、イベントのこのコードに表示される 3 つの変数に 3 つの変数を割り当てるときだけです。それ以外の場合、変更が行われると、[キャンセル] をクリックしても [確認] をクリックしても、変更は既に行われており、これは適切ではありません。)

レイアウトは次のとおりです。

.部門{
  幅: 100%;
  高さ: 96rpx;
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  フォントサイズ: 36rpx;
  フォントの太さ: 347;
  テキストオーバーフロー: 省略記号;
  オーバーフロー: 非表示;
  空白: ラップなし;
}
。位置{
  位置: 相対的;
  下境界線: 1rpx実線rgba(0,0,0,.009);
  ディスプレイ: フレックス;
  align-items:flex-start;
  パディングトップ: 20rpx;
}

.desc{
  位置: 絶対;
  右: 19rpx;
  下部: 4rpx;
  色: rgb(63,142,255);
  フォントサイズ: 23rpx;
}
.部門 .depart_title{
  幅: 20%;
}
.部門 .depart_content{
  左マージン: 10%;
  テキストオーバーフロー: 省略記号;
  オーバーフロー: 非表示;
  空白: ラップなし;
}
.部門.プレースホルダー{
  幅: 69%;
  テキストオーバーフロー: 省略記号;
  オーバーフロー: 非表示;
  空白: ラップなし;
} 

ここで wx:if を置き換えることを決定したら、まず何に置き換えるかを考える必要があります。
wx:ifの機能は、存在するかどうかを判定することです。存在しない場合 (条件が満たされていない場合) は、 wx:elseまたはwx:elifのロジックに切り替わります。

さて、これを考えると、CSS 疑似クラス: :emptyを思いつくはずです。これは、私たちが望んでいることを実行します。要素 (コンテンツ) が空の場合...
私はすぐにコードに次の変更を加えました:

<view class="部門の場所" bindtap="fixedshow">
  <view class="depart_title">場所</view>
  <view class="placeholder decent_content">{{provinces}} {{citys}} {{areas}}</view>
  <view class="desc">変更がある場合は、修正して再度送信してください</view>
</ビュー>

次に、この疑似クラスをクラス - decent_content に追加します。

.placeholder:empty::before{
  内容: 「現在の場所を選択してください」;
  色: rgba(0,0,0,.6);
} 

空白です！

情報を確認した後: :empty疑似クラスは、タグ コンテンツが空の場合、コンテンツ領域にスペースがあると一致しないことを意味します。

タグを記述するときは、タグ内にスペースや改行があるかどうかに必ず注意してください。 (改行はスペースとして解釈されることが多いです。)
単一でないタグに遭遇したときは、必ず終了タグに注意してください。

最終的な解決策は、js 内で 3 つの変数をスペースで接続し、ページにレンダリングすることです。

(実際、これはカスタム セレクターであり、自動配置は Amap にリクエストを送信して、州、市、地区のフィールドを取得するだけです。コードは書きません...)

この時点で、1 つのことがわかります。上記では、空の疑似クラスだけでなく、before 疑似要素も使用していました。

実際、これは非常に一般的です。結局のところ、空要素だけがコンテンツを追加できるのです（CSS 全体を通して、before や after などの疑似要素だけが、テキストであれ画像であれ、ページにコンテンツを追加できるようです）。

もっと注意を払うべき領域が 2 つあると思います。

• 疑似要素では位置が使用されていません。一般的に、要素（コンテンツを含む）の場合、「前」/「後」のスタイルを設定するには、配置、つまり表示される場所の指定が必要です。そうしないと、疑似要素内のテキストは表示されない可能性が高くなります。この記事の空白部分から、元のコンテンツによって覆われていると推測できます。
• 最初の点から、 :beforeおよび:after疑似要素を使用してタグにコンテンツとグラフィックを挿入しても、空の疑似クラスの一致には影響しないという結論に達することができます。

この機能は非常に便利です。

上記から、この疑似クラスの最大の用途は「フィールド不足プロンプト」であることがわかります。これは非常に実用的です。さらに、このタスクを CSS に任せることで、「(レイアウト) の負担」を大幅に軽減し、エクスペリエンスを向上させ、メンテナンスを容易にすることもできます。

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

.ym-empty:empty::before{
	内容:「データがありません。もう一度お試しください」
	表示: ブロック;
	テキスト配置: 中央;
	色: rgba(0,0,0,.6);
	/** その他の配置とフォント変更操作*/
}

これで、私の目を引いた CSS 疑似クラス: empty に関する記事は終わりです。CSS 疑似クラス empty の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。