CSS蛋疼應用之：資料上報和HTML驗證
byzhangxinxu from ofollow,noindex" target="_blank">https://www.zhangxinxu.com/wordpress/?p=8258
本文可全文轉載，個人網站無需授權，只要保留原作者、出處以及文中連結即可，任何網站均可摘要聚合，商用請聯絡授權。
一、純CSS實現資料上報
舉個例子，要跟蹤並統計某個按鈕的點選事件：
.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;
}
此時，當我們點選按鈕的時候，相關行為資料就會上報給伺服器，這種上報，就算把JS禁掉也無法阻止。
您可以狠狠地點選這裡： 純CSS跟蹤統計上報點選行為demo
點選demo頁面的兩個按鈕，可以看到發出瞭如下的請求：
當然，我們可以統計的不僅僅是單擊行為，hover行為，focus行為都可以統計，當然，還有很多其他方面的。例如：
1. 不支援CSS3瀏覽器比例統計
.any-element {
background: url(./pixel.gif?css=2);
background-image: url(./pixel.gif?css=3), none;
}
例如，我的Chrome發出的圖片請求地址就是：
類似的，我們可以檢測支援其他一些CSS屬性的比例，要比單純看瀏覽器的佔比要精準的多。因為同樣是Chrome瀏覽器，不同使用者版本可能不一樣，要想準確知道某些CSS新特性支援情況，這種CSS上報方法要更準確。
可以使用 @supports 規則。
.any-element {
background: url(./pixel.gif?grid=0);
}
@supports (display: grid) {
.any-element {
background: url(./pixel.gif?grid=1);
}
}
2. retina螢幕佔比統計
要麼上報0，要麼上報1，最後可以知道retina螢幕的比例。
.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);
}
}
例如，我家裡的window普通顯示屏：
類似的，可以檢測寬屏裝置比例等。
3. 是否支援某字型
例如，使用者是否電腦是否安裝了思源黑體：
@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';
}
這個要看font請求，如果你的瀏覽器沒有安裝思源黑體，則會嘗試載入anyFontName這個字型，於是發起了請求，如下圖所示：
如果安裝，則沒有上報。
//zxx: 對於一些常見中文字型在CSS中的英文名稱，可以參見我之前的研究成果：“ CSS font-family常見中文字型對應的英文名稱 ”。
以上1,2,3三個CSS上報資料的小按鈕，您可以狠狠地點選這裡親自體驗一番： 一些CSS跟蹤上報示意demo
頁面截圖如下：
我們還可以藉助瀏覽器原生行為簡化我們上報成本，比方說表單驗證出錯，用來統計使用者註冊或者其他重要表單操作的成功率。
CSS如下：
.track:invalid {
background: url(./pixel.gif?action=regist&status=invalid);
}
.track:valid {
background: url(./pixel.gif?action=regist&status=valid);
}
每當表單提交的時候，我們給form元素新增類名 .track ，此時，其會自動上報表單是否填寫完全成功， :invalid 和 :valid 都是標準的原生的CSS偽類選擇器，我們無需自己寫驗證邏輯。
JS如下：
forms.addEventListener('submit', function (event) {
event.preventDefault();
// 上報成功與否
this.classList.add('track');
// 這個是不影響原生表單的提交行為，實際開發多走Ajax
if (this.reportValidity()) {
this.submit();
}
setTimeout(function () {
this.classList.remove('track');
}.bind(this), 0);
});
HTML這裡也需要novalidate屬性配合下：
<form novalidate></form>
眼見為實，您可以狠狠地點選這裡： 表單驗證出錯與資料上報demo
不過，這種方法有個缺陷，無論成功與失敗，只能上報一次。
表單的 reportValidity() 方法雖然很省力，但是會呼起瀏覽器原生的提示，過不了設計師那一關的，因此，恩，大家high一下即可。
二、純CSS實現HTML驗證與提示
再說說另外一個純CSS應該，那就是進行HTML驗證，並且直接在頁面上輸出來。
舉個簡單例子，圖片如果空 alt 屬性，則高亮這個圖片：
img[alt=""] { outline: 2px solid red; }
又或者 _blank 連結的 rel 屬性沒有加 noopener 和 noreferrer 。
a[target="_blank"]:not([rel="noopener noreferrer"]) { outline: 2px solid red; }
諸如此類。
然後配合偽元素在頁面上顯示提示的文字：
script[src]:not([async]) {
display: block;
}
script[src]:not([async])::after {
content: '試試給帶有[src="…"]的<script>元素新增[async]屬性';
}
然後，就有清閒的有志之士還專門搞了個通過CSS驗證檢測HTML合法性的CSS庫，名為construct.css，專案地址為： https://github.com/t7/construct.css
這裡 有個demo ，有興趣的可以進去瞅瞅。
使用很簡單，你的專案引入這個CSS，那些使用有問題的HTML就會標記並提示，類似下面截圖：
然而，有些提示嘛，咳咳，有些牽強附會了，大家當新聞八卦看看就好了。
三、為什麼說是蛋疼應用
本文提到的兩個CSS的新奇應用，怎麼說呢，有點像手工耿哥的的各種手工作品，很有新意，很有特色，可惜，並不實用。
比方說一開始的資料上報，侷限很大，很多行為你無法統計；另外維護非常不方便，把一大堆URL地址塞到CSS中，回頭要是改個什麼東西，很囉嗦的。CSS是偏前前端的玩具，而資料上報偏後的前端更合適，實際開發肯定不會這麼玩的，人力資源利用完全沒有最大化嘛。
還有那個HTML驗證，這年頭，還有誰關心HTML語義，結構啥的嘛，小程式，Vue這種HTML結構都是自定義的，和標準越走越遠了，沒有市場，就沒有價值。而且裡面很多驗證，有些想得太多，空div為什麼就不能存在呢？我就想不通了。
因此看來，本文介紹的這兩個CSS應用，只適合遠觀，不適合褻玩。
以上！
本文為原創文章，會經常更新知識點以及修正一些錯誤，因此轉載請保留原出處，方便溯源，避免陳舊錯誤知識的誤導，同時有更好的閱讀體驗。
本文地址： https://www.zhangxinxu.com/wordpress/?p=8258
（本篇完）