1. Implementing Data Reporting with Pure CSS

For example, to track and count the click events of a button:

.button-1:active::after {
    content: url(./pixel.gif?action=click&id=button1);
    display: none;
}
.button-2:active::after {
    content: url(./pixel.gif?action=click&id=button2);
    display: none;
}

At this point, when we click the button, the relevant behavior data will be reported to the server, such reporting, even if the JS ban can not be prevented.

Of course, we can count not only click behavior, hover behavior, focus behavior, of course, there are many other aspects. For example:

1. CSS3 browser proportionality statistics are not supported

web Front-end development learning Q-q-u-n:  767273102 ，Share learning methods and small details that need attention, and keep updating the latest teaching and learning methods (detailed front-end project teaching video)

.any-element {
   background: url(./pixel.gif?css=2);
   background-image: url(./pixel.gif?css=3), none;
}

For example, my Chrome image request address is:

Similarly, we can detect the proportion of CSS attributes that support other CSS attributes more accurately than simply looking at browsers. Because Chrome browser is the same, different user versions may be different, in order to accurately know the support of some new CSS features, this CSS reporting method should be more accurate.

You can use the @support rule.

.any-element {
  background: url(./pixel.gif?grid=0);
}
@supports (display: grid) {
  .any-element {
    background: url(./pixel.gif?grid=1);
  }
}

2. retina Screen Proportion Statistics

You can either report 0 or 1, and finally you can know the proportion of retina screens.

.any-element {
  background: url(./pixel.gif?retina=0);
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .any-element {
    background: url(./pixel.gif?retina=1);
  }
}

For example, my home's Windows display screen:

Similarly, the ratio of wide screen devices can be detected.

3. Supporting a font

For example, does the user have Siyuan Blackbody installed on the computer?

@font-face {
    font-family: anyFontName;
    src: url(../image/pixel.gif?font=unmatch&id=s_h_s);
}
.element-with-text {
    font-family: 'Source Han Sans CN', 'anyFontName';
}

This depends on the font request. If your browser does not install Siyuan Blackbody, it will try to load the font anyFontName and initiate the request, as shown in the following figure:

If installed, it is not reported.

// zxx: For the English names of some common Chinese fonts in CSS, see my previous research results. CSS font-family common Chinese font corresponding to the English name".

Above 1,2,3 CSS data reporting buttons, you can hit here to experience for yourself: Some CSS trace reports indicate demo

The screenshot of the page is as follows:

We can also use native browser behavior to simplify our reporting costs, such as form validation errors, to count the success rate of user registration or other important form operations.

CSS is as follows:

.track:invalid {
    background: url(./pixel.gif?action=regist&status=invalid);
}
.track:valid {
    background: url(./pixel.gif?action=regist&status=valid);
}

Whenever a form submits, we add a class name. track to the form element. At this point, it will automatically report whether the form has been filled in completely successfully: invalid and: valid are standard native CSS pseudo-Class selectors, and we do not need to write our own validation logic.

JS is as follows:

forms.addEventListener('submit', function (event) {
    event.preventDefault();
    // Report success or failure
    this.classList.add('track');
    // This is not to affect the submission behavior of native forms, the actual development of more Ajax
    if (this.reportValidity()) {
        this.submit();
    }
    setTimeout(function () {
        this.classList.remove('track');
    }.bind(this), 0);    
});

HTML also needs novalidate attributes here:

<form novalidate></form>

However, this method has a drawback, whether successful or unsuccessful, can only be reported once.

The report Validity () method of the form is very labor-saving, but it will call the browser's native prompt, which can't pass the designer's level. So, uh, you can just high light it.

2. Implementing HTML Verification and Tips with Pure CSS

Another pure CSS should be HTML validation and output directly on the page.

For example, if an image has an empty alt attribute, highlight the image:

web Front-end development learning Q-q-u-n:  767273102 ，Share learning methods and small details that need attention, and keep updating the latest teaching and learning methods (detailed front-end project teaching video)
img[alt=""] { outline: 2px solid red; }

Or the rel attribute of the _blank link does not add noopener and noreferrer.

a[target="_blank"]:not([rel="noopener noreferrer"]) { outline: 2px solid red; }

And so on.

Then display the prompt text on the page with pseudo-elements:

script[src]:not([async]) {
  display: block;
}
script[src]:not([async])::after {
  content: 'Give it a try.[src="..."]Of<script>Element addition[async]attribute';
}

It's easy to use. When your project introduces this CSS, those using questionable HTML will be tagged and prompted, similar to the following screenshot:

However, there are some hints, cough, some far-fetched, when you look at the news gossip.

Small partners who are interested in web front-end technology can join our learning circle. They have been working for the sixth year. They can share some learning methods and details of practical development. 767-273-102 autumn skirt. How to learn the front-end from the zero foundation? We may be in different cities, but we will travel together. Front end, front end, front end

3. Why is the application of egg pain?

The two novel applications of CSS mentioned in this article, how to say, are a bit like the various handicraft works of Gengo. They are very innovative, distinctive, unfortunately, not practical.

For example, the initial data reporting is very limited, many actions you can not count; in addition, the maintenance is very inconvenient, a lot of URL addresses are stuffed into CSS, if you change something later, it is very verbose. CSS is a toy on the front end, and the front end after data reporting is more appropriate. Actual development will certainly not play that way. Human resources utilization is not maximized at all.

There is also that HTML verification, this year, who cares about HTML semantics, structure, small programs, Vue HTML structure are custom, and standards go further and further away, there is no market, there is no value. And there are many validations, some think too much, why can't empty div exist? I just can't figure it out.