CSS pseudo-class: empty makes me shine (example code)

Anyone who has read my articles recently knows that I am currently in charge of a WeChat mini-program project, during which I encountered many interesting things and some "weird ideas". The background of this article is that one morning I was looking at a bunch of wx:if/else and hidden in the wxml file and suddenly felt annoyed. Not to mention the performance problems caused by wx:if, the tags were also redundant.

Following the previous article [Analysis of yPicker components in WeChat applet custom component library and implementation of three-level linkage between provinces, cities and districts], I analyzed such an example - the custom implementation of three-level linkage between provinces, cities and districts. There are detailed codes in it, so I won’t say more here. Let’s talk about how to call it:

This is what I thought at the time: on the one hand, it was out of consideration of "not writing too much in JavaScript", and on the other hand, because I used three variables to implement the province, city, and district respectively, JavaScript only paid attention to these three variables, such as the spaces or other things between them were all taken to the wxml file. Like this:

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

(Because the call involves subsequent changes, the only time you click the "Confirm" button in the pop-up window is when you assign the three variables to the three variables that appear in this code in the event - otherwise, as long as the change is made, whether you click Cancel or Confirm, the change will have already occurred, which is not appropriate!)

Its layout is as follows:

.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;
} 

After deciding to replace the wx:if here, you should first think: what to replace it with?
The function of wx:if is to determine whether it exists. If it does not exist (the condition is not met), it will switch to the logic of wx:else or wx:elif !

OK, thinking of this, you should be able to think of a CSS pseudo-class: :empty ! It does what we want: if the element (content) is empty...
I quickly made this change to the code:

<view class="departments location" bindtap="fixedshow">
  <view class="depart_title">Location</view>
  <view class="placeholder depart_content">{{provinces}} {{citys}} {{areas}}</view>
  <view class="desc">If there are any changes, please modify and submit again</view>
</view>

Then add this pseudo-class to class - depart_content:

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

A blank!

After consulting the information: The :empty pseudo-class means that if the tag content is empty, then if there is a space in the content area, it will not be matched!

Be sure to pay attention to this when writing tags: whether there are spaces or line breaks within the tags! (Newlines are often interpreted as a space.)
When encountering non-single tags, be sure to pay attention to the closing tag!

The final solution is: connect the three variables with spaces in js, and then render them on the page!

(In fact, this is a custom selector, and automatic positioning is just sending a request to Amap to obtain the province, city, and district fields. I won’t write the code...)

At this point we will find one thing: above we not only used the empty pseudo-class, but also the before pseudo-element!

In fact, this is very common - after all, only empty can't add content (it seems that throughout CSS, only pseudo-elements such as before and after can add content to the page, whether it is text or pictures)

I think there are two areas that should be paid more attention to:

• There is no position used in pseudo-elements! Generally speaking, for an element (with content), setting the "before"/"after" style for it requires positioning: specifying where it is displayed. Otherwise, the text in the pseudo-element will most likely not be displayed. From the empty in this article, we can guess that it is covered by the original content.
• From the first point, we can conclude that: inserting content and graphics into the tag with the :before and :after pseudo-elements will not affect the matching of the empty pseudo-class!

This feature is very useful.

From the above, we can see that the biggest use of this pseudo-class is "field missing prompt"! This is very practical. Moreover, leaving this task to CSS can also reduce a lot of "(layout) burden", provide a better experience, and make maintenance easier!

For example, when I optimized the project, I added a unified class name to all the requested fields:

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

This concludes my article about the CSS pseudo-class: empty that caught my eye. For more information about the CSS pseudo-class empty, please search previous articles on 123WORDPRESS.COM or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future!