cainiaoblog 23.2.171

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (401) hide show
  1. package/CNAME +1 -0
  2. package/MP_verify_o6dHCK5mIkxNpzvZ.txt +1 -0
  3. package/README.md +8 -0
  4. package/about/index.html +54 -0
  5. package/ads.txt +1 -0
  6. package/app/manual.html +104 -0
  7. package/appConfigs/config +1 -0
  8. package/archives/2018/index.html +48 -0
  9. package/archives/2019/index.html +48 -0
  10. package/archives/2019/page/2/index.html +48 -0
  11. package/archives/2020/index.html +48 -0
  12. package/archives/2021/index.html +48 -0
  13. package/archives/2022/index.html +48 -0
  14. package/archives/2023/index.html +48 -0
  15. package/archives/index.html +48 -0
  16. package/archives/page/2/index.html +48 -0
  17. package/archives/page/3/index.html +48 -0
  18. package/article/10047.html +148 -0
  19. package/article/10164.html +64 -0
  20. package/article/10624.html +436 -0
  21. package/article/10745.html +586 -0
  22. package/article/11674.html +71 -0
  23. package/article/11939.html +72 -0
  24. package/article/12238.html +86 -0
  25. package/article/1230.html +533 -0
  26. package/article/13265.html +69 -0
  27. package/article/13823.html +78 -0
  28. package/article/14125.html +72 -0
  29. package/article/14192.html +561 -0
  30. package/article/14375.html +85 -0
  31. package/article/14744.html +83 -0
  32. package/article/14936.html +451 -0
  33. package/article/1518.html +250 -0
  34. package/article/15428.html +71 -0
  35. package/article/15518.html +288 -0
  36. package/article/15569.html +418 -0
  37. package/article/1566.html +122 -0
  38. package/article/16017.html +156 -0
  39. package/article/16947.html +440 -0
  40. package/article/17096.html +82 -0
  41. package/article/17246.html +89 -0
  42. package/article/17575.html +350 -0
  43. package/article/179.html +757 -0
  44. package/article/18039.html +233 -0
  45. package/article/18071.html +375 -0
  46. package/article/18142.html +71 -0
  47. package/article/19909.html +160 -0
  48. package/article/20014.html +89 -0
  49. package/article/20021.html +389 -0
  50. package/article/20037.html +280 -0
  51. package/article/20056.html +95 -0
  52. package/article/20093.html +404 -0
  53. package/article/2021.html +607 -0
  54. package/article/20459.html +115 -0
  55. package/article/20613.html +263 -0
  56. package/article/20635.html +71 -0
  57. package/article/21317.html +71 -0
  58. package/article/21320.html +90 -0
  59. package/article/21782.html +548 -0
  60. package/article/22230.html +435 -0
  61. package/article/22237.html +347 -0
  62. package/article/22398.html +109 -0
  63. package/article/22422.html +270 -0
  64. package/article/22565.html +300 -0
  65. package/article/23046.html +250 -0
  66. package/article/23083.html +215 -0
  67. package/article/23195.html +297 -0
  68. package/article/23301.html +835 -0
  69. package/article/23589.html +285 -0
  70. package/article/23655.html +338 -0
  71. package/article/23864.html +76 -0
  72. package/article/23914.html +96 -0
  73. package/article/24169.html +135 -0
  74. package/article/24581.html +349 -0
  75. package/article/2475.html +500 -0
  76. package/article/24826.html +77 -0
  77. package/article/24924.html +247 -0
  78. package/article/25164.html +1495 -0
  79. package/article/25318.html +394 -0
  80. package/article/25710.html +1129 -0
  81. package/article/25734.html +83 -0
  82. package/article/26083.html +174 -0
  83. package/article/26147.html +283 -0
  84. package/article/26291.html +110 -0
  85. package/article/26354.html +71 -0
  86. package/article/26624.html +145 -0
  87. package/article/26639.html +298 -0
  88. package/article/26850.html +138 -0
  89. package/article/26940.html +258 -0
  90. package/article/27796.html +190 -0
  91. package/article/27800.html +161 -0
  92. package/article/28963.html +159 -0
  93. package/article/28976.html +247 -0
  94. package/article/29042.html +72 -0
  95. package/article/29596.html +81 -0
  96. package/article/29619.html +183 -0
  97. package/article/29623.html +329 -0
  98. package/article/29829.html +205 -0
  99. package/article/29abbd1c.html +112 -0
  100. package/article/30215.html +178 -0
  101. package/article/30552.html +78 -0
  102. package/article/30818.html +201 -0
  103. package/article/31330.html +364 -0
  104. package/article/3154.html +577 -0
  105. package/article/31695.html +348 -0
  106. package/article/31826.html +71 -0
  107. package/article/31843.html +132 -0
  108. package/article/32280.html +212 -0
  109. package/article/32431.html +74 -0
  110. package/article/32443.html +72 -0
  111. package/article/32732.html +122 -0
  112. package/article/3286.html +251 -0
  113. package/article/32960.html +198 -0
  114. package/article/33713.html +72 -0
  115. package/article/33899.html +615 -0
  116. package/article/34351.html +74 -0
  117. package/article/34372.html +89 -0
  118. package/article/34410.html +74 -0
  119. package/article/34431.html +118 -0
  120. package/article/3447.html +75 -0
  121. package/article/34474.html +142 -0
  122. package/article/34871.html +147 -0
  123. package/article/35397.html +175 -0
  124. package/article/3544.html +199 -0
  125. package/article/35503.html +115 -0
  126. package/article/35624.html +84 -0
  127. package/article/35697.html +384 -0
  128. package/article/35863.html +73 -0
  129. package/article/36037.html +253 -0
  130. package/article/36118.html +71 -0
  131. package/article/3621.html +119 -0
  132. package/article/36251.html +296 -0
  133. package/article/36642.html +352 -0
  134. package/article/37102.html +763 -0
  135. package/article/37336.html +351 -0
  136. package/article/37351.html +89 -0
  137. package/article/3760.html +294 -0
  138. package/article/37749.html +75 -0
  139. package/article/37789.html +83 -0
  140. package/article/38005.html +765 -0
  141. package/article/38009.html +284 -0
  142. package/article/38269.html +194 -0
  143. package/article/38344.html +88 -0
  144. package/article/38359.html +334 -0
  145. package/article/38423.html +379 -0
  146. package/article/38530.html +213 -0
  147. package/article/38743.html +268 -0
  148. package/article/38753.html +204 -0
  149. package/article/38881.html +71 -0
  150. package/article/39087.html +414 -0
  151. package/article/39309.html +84 -0
  152. package/article/39486.html +74 -0
  153. package/article/39637.html +306 -0
  154. package/article/39839.html +72 -0
  155. package/article/39937.html +152 -0
  156. package/article/39970.html +71 -0
  157. package/article/402.html +559 -0
  158. package/article/40698.html +71 -0
  159. package/article/40811.html +71 -0
  160. package/article/40964.html +462 -0
  161. package/article/41011.html +322 -0
  162. package/article/41152.html +78 -0
  163. package/article/41696.html +71 -0
  164. package/article/41717.html +281 -0
  165. package/article/41777.html +149 -0
  166. package/article/419.html +985 -0
  167. package/article/4233.html +136 -0
  168. package/article/4292.html +86 -0
  169. package/article/43302.html +96 -0
  170. package/article/43397.html +106 -0
  171. package/article/43724.html +281 -0
  172. package/article/43999.html +224 -0
  173. package/article/44426.html +77 -0
  174. package/article/44964.html +137 -0
  175. package/article/45004.html +123 -0
  176. package/article/4510.html +83 -0
  177. package/article/45156.html +320 -0
  178. package/article/45157.html +52 -0
  179. package/article/45267.html +87 -0
  180. package/article/45641.html +207 -0
  181. package/article/45960.html +75 -0
  182. package/article/46100.html +1262 -0
  183. package/article/46366.html +74 -0
  184. package/article/46771.html +96 -0
  185. package/article/46911.html +517 -0
  186. package/article/46948.html +137 -0
  187. package/article/46ee4850.html +349 -0
  188. package/article/47019.html +84 -0
  189. package/article/47532.html +94 -0
  190. package/article/4783.html +429 -0
  191. package/article/47972.html +72 -0
  192. package/article/48216.html +127 -0
  193. package/article/48252.html +185 -0
  194. package/article/48520.html +74 -0
  195. package/article/48722.html +75 -0
  196. package/article/48807.html +99 -0
  197. package/article/49126.html +323 -0
  198. package/article/50001.html +88 -0
  199. package/article/50058.html +151 -0
  200. package/article/50343.html +410 -0
  201. package/article/50510.html +82 -0
  202. package/article/51082.html +98 -0
  203. package/article/51677.html +111 -0
  204. package/article/5204.html +1085 -0
  205. package/article/52500.html +538 -0
  206. package/article/52689.html +259 -0
  207. package/article/52877.html +569 -0
  208. package/article/53125.html +191 -0
  209. package/article/53428.html +251 -0
  210. package/article/53524.html +74 -0
  211. package/article/53698.html +322 -0
  212. package/article/53803e6.html +93 -0
  213. package/article/53924.html +291 -0
  214. package/article/53962.html +253 -0
  215. package/article/54006.html +71 -0
  216. package/article/54018.html +88 -0
  217. package/article/54161.html +83 -0
  218. package/article/54178.html +69 -0
  219. package/article/54258.html +327 -0
  220. package/article/54295.html +214 -0
  221. package/article/54313.html +1976 -0
  222. package/article/54351.html +90 -0
  223. package/article/54604.html +80 -0
  224. package/article/54632.html +71 -0
  225. package/article/54912.html +756 -0
  226. package/article/54918.html +129 -0
  227. package/article/55119.html +136 -0
  228. package/article/55756.html +118 -0
  229. package/article/55769.html +136 -0
  230. package/article/55870.html +161 -0
  231. package/article/56139.html +92 -0
  232. package/article/56557.html +69 -0
  233. package/article/56604.html +69 -0
  234. package/article/56816.html +266 -0
  235. package/article/56926.html +153 -0
  236. package/article/57747.html +409 -0
  237. package/article/57965.html +475 -0
  238. package/article/58816.html +78 -0
  239. package/article/59059.html +435 -0
  240. package/article/59095.html +350 -0
  241. package/article/59349.html +244 -0
  242. package/article/59402.html +216 -0
  243. package/article/59448.html +55 -0
  244. package/article/59870.html +94 -0
  245. package/article/59877.html +208 -0
  246. package/article/5dbb6f41.html +86 -0
  247. package/article/6008.html +75 -0
  248. package/article/60327.html +126 -0
  249. package/article/6035.html +76 -0
  250. package/article/60428.html +71 -0
  251. package/article/60544.html +128 -0
  252. package/article/61319.html +95 -0
  253. package/article/61367.html +93 -0
  254. package/article/624d1918.html +292 -0
  255. package/article/62543.html +71 -0
  256. package/article/62887.html +169 -0
  257. package/article/63074.html +120 -0
  258. package/article/63266.html +311 -0
  259. package/article/63351.html +74 -0
  260. package/article/63542.html +104 -0
  261. package/article/63824.html +275 -0
  262. package/article/64051.html +653 -0
  263. package/article/64189b69.html +72 -0
  264. package/article/64354.html +75 -0
  265. package/article/64869.html +79 -0
  266. package/article/64923.html +596 -0
  267. package/article/65128.html +95 -0
  268. package/article/65295.html +79 -0
  269. package/article/6888.html +75 -0
  270. package/article/7065.html +84 -0
  271. package/article/7455.html +85 -0
  272. package/article/7a3ef8f.html +315 -0
  273. package/article/8140.html +188 -0
  274. package/article/8190.html +85 -0
  275. package/article/8225.html +78 -0
  276. package/article/84c9ccd6.html +159 -0
  277. package/article/8f9a9ae3.html +82 -0
  278. package/article/9174.html +73 -0
  279. package/article/9738.html +294 -0
  280. package/article/a4145266.html +71 -0
  281. package/article/bedea419.html +72 -0
  282. package/article/bf7e7421.html +78 -0
  283. package/article/c1867fbf.html +103 -0
  284. package/article/c5576490.html +70 -0
  285. package/article/dcb0db28.html +76 -0
  286. package/article/fc3b727a.html +79 -0
  287. package/atom.xml +445 -0
  288. package/baidusitemap.xml +1079 -0
  289. package/blocks/dns.txt +264 -0
  290. package/blocks/filter.txt +1070 -0
  291. package/blocks/script.js +42 -0
  292. package/categories/CDN/index.html +48 -0
  293. package/categories/IDE/index.html +48 -0
  294. package/categories/git/index.html +48 -0
  295. package/categories/hexo/index.html +48 -0
  296. package/categories//345/205/254/345/205/261/350/212/202/346/227/245/index.html +48 -0
  297. package/categories//345/210/206/344/272/253/index.html +48 -0
  298. package/categories//345/211/215/347/253/257/index.html +48 -0
  299. package/categories//345/211/215/347/253/257/page/2/index.html +48 -0
  300. package/categories//345/211/215/347/253/257//346/265/217/350/247/210/345/231/250/index.html +48 -0
  301. package/categories//345/211/215/347/253/257//346/265/217/350/247/210/345/231/250//347/275/221/347/273/234/345/215/217/350/256/256/index.html +48 -0
  302. package/categories//345/215/232/345/256/242/index.html +48 -0
  303. package/categories//345/267/245/345/205/267/index.html +48 -0
  304. package/categories//345/271/277/345/221/212/350/277/207/346/273/244/index.html +48 -0
  305. package/categories//345/271/277/345/221/212/350/277/207/346/273/244//350/247/206/351/242/221/347/224/265/350/247/206/345/260/217/350/257/264/346/274/253/347/224/273/350/265/204/350/256/257/351/237/263/344/271/220/index.html +48 -0
  306. package/categories//346/255/243/345/210/231/index.html +48 -0
  307. package/categories//346/265/217/350/247/210/345/231/250/index.html +48 -0
  308. package/categories//347/256/227/346/263/225/index.html +48 -0
  309. package/categories//350/265/204/350/256/257/index.html +48 -0
  310. package/categories//350/275/273/346/235/276/344/270/200/345/210/273/index.html +48 -0
  311. package/cdn/css/font-awesome.min.css +4 -0
  312. package/cdn/css/grids-responsive-min.css +7 -0
  313. package/cdn/css/normalize.css +349 -0
  314. package/cdn/css/pure-min.css +11 -0
  315. package/cdn/fonts/fontawesome-webfont.eot +0 -0
  316. package/cdn/fonts/fontawesome-webfont.svg +2671 -0
  317. package/cdn/fonts/fontawesome-webfont.ttf +0 -0
  318. package/cdn/fonts/fontawesome-webfont.woff +0 -0
  319. package/cdn/fonts/fontawesome-webfont.woff2 +0 -0
  320. package/cdn/js/Valine.min.js +17 -0
  321. package/cdn/js/canvas-nest.js +1 -0
  322. package/cdn/js/clipboard.min.js +7 -0
  323. package/cdn/js/crypto-js.js +25 -0
  324. package/cdn/js/jquery.min.js +2 -0
  325. package/css/default.css +1144 -0
  326. package/css/donate.css +338 -0
  327. package/css/hbe.style.css +749 -0
  328. package/css/style.css +2095 -0
  329. package/donate/index.html +39 -0
  330. package/google917dcf72f6e5c7f5.html +1 -0
  331. package/guestbook/index.html +68 -0
  332. package/hosts/ads.txt +149 -0
  333. package/hosts/flash.txt +9 -0
  334. package/hosts/github.txt +6 -0
  335. package/hosts/google.txt +16936 -0
  336. package/hosts/winrar.txt +2 -0
  337. package/img/alipay.svg +46 -0
  338. package/img/bitcoin.svg +135 -0
  339. package/img/blog.ico +0 -0
  340. package/img/blog.png +0 -0
  341. package/img/gaba.png +0 -0
  342. package/img/github.svg +1 -0
  343. package/img/like.svg +1 -0
  344. package/img/mp-mini.jpg +0 -0
  345. package/img/mp.png +0 -0
  346. package/img/paypal.svg +63 -0
  347. package/img/upy_logo.svg +59 -0
  348. package/img/wechat.svg +49 -0
  349. package/index.html +48 -0
  350. package/jd_root.txt +1 -0
  351. package/js/codeblock-resizer.js +51 -0
  352. package/js/dark.js +12 -0
  353. package/js/donate.js +87 -0
  354. package/js/fixedPage.js +106 -0
  355. package/js/gitment.browser.js +3751 -0
  356. package/js/search.js +86 -0
  357. package/js/share.js +60 -0
  358. package/js/smartresize.js +32 -0
  359. package/js/totop.js +12 -0
  360. package/kankan/index.html +77 -0
  361. package/lib/hbe.js +293 -0
  362. package/package.json +25 -0
  363. package/page/10/index.html +49 -0
  364. package/page/11/index.html +59 -0
  365. package/page/12/index.html +67 -0
  366. package/page/13/index.html +63 -0
  367. package/page/14/index.html +66 -0
  368. package/page/15/index.html +60 -0
  369. package/page/16/index.html +60 -0
  370. package/page/17/index.html +62 -0
  371. package/page/18/index.html +61 -0
  372. package/page/19/index.html +58 -0
  373. package/page/2/index.html +48 -0
  374. package/page/20/index.html +57 -0
  375. package/page/21/index.html +61 -0
  376. package/page/22/index.html +55 -0
  377. package/page/23/index.html +64 -0
  378. package/page/24/index.html +60 -0
  379. package/page/25/index.html +58 -0
  380. package/page/26/index.html +48 -0
  381. package/page/27/index.html +58 -0
  382. package/page/3/index.html +48 -0
  383. package/page/4/index.html +48 -0
  384. package/page/5/index.html +51 -0
  385. package/page/6/index.html +51 -0
  386. package/page/7/index.html +51 -0
  387. package/page/8/index.html +53 -0
  388. package/page/9/index.html +48 -0
  389. package/randomcall/README.html +1 -0
  390. package/randomcall/lucker.html +290 -0
  391. package/randomcall/lucky.png +0 -0
  392. package/robots.txt +22 -0
  393. package/search.xml +6740 -0
  394. package/sitemap.xml +2669 -0
  395. package/tags//345/216/237/345/210/233/index.html +48 -0
  396. package/tags//345/250/261/344/271/220/index.html +48 -0
  397. package/tags//346/211/213/345/206/231/index.html +48 -0
  398. package/tags//347/226/253/346/203/205/index.html +48 -0
  399. package/tags//350/275/254/350/275/275/index.html +48 -0
  400. package/tags//350/275/254/350/275/275/page/2/index.html +48 -0
  401. package/v.html +90 -0
package/article/54918.html ADDED
@@ -0,0 +1,129 @@
1
+ <!DOCTYPE html><html lang="zh-CN" data-dark><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta name="description" content="前端壹菜鸟，记录工作难题，关注前端知识，收集精彩博文，做技术的搬运工"><meta name="msvalidate.01" content="0FE4D8B3381D3D87088996B886E1E2BD"><title>推荐几款免费且不限流量的全球CDN | 前端壹菜鸟</title><link rel="stylesheet" type="text/css" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/css/style.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/normalize.css@latest/normalize.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/purecss@latest/build/pure-min.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/purecss@latest/build/grids-responsive-min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"><link rel="icon" mask="" sizes="any" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.ico"><link rel="Shortcut Icon" type="image/x-icon" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.ico"><link rel="apple-touch-icon" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.png"><link rel="apple-touch-icon-precomposed" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.png"><link rel="alternate" type="application/atom+xml" href="/atom.xml"><script type="text/javascript" src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8385136408348258"></script><script src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" async></script><script>(function(){
2
+ var bp = document.createElement('script');
3
+ var curProtocol = window.location.protocol.split(':')[0];
4
+ if (curProtocol === 'https'){
5
+ bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
6
+ }
7
+ else{
8
+ bp.src = 'http://push.zhanzhang.baidu.com/push.js';
9
+ }
10
+ var s = document.getElementsByTagName("script")[0];
11
+ s.parentNode.insertBefore(bp, s);
12
+ })();
13
+ </script><script>(function(){
14
+ var src = 'https://jspassport.ssl.qhimg.com/11.0.1.js?d182b3f28525f2db83acfaaf6e696dba';
15
+ document.write('<script src="' + src + '" id="sozz"><\/script>');
16
+ })();
17
+ </script><script>var _hmt=_hmt||[];(function(){var hm=document.createElement("script");hm.src='https://hm.baidu.com/hm.js?011f0b44e8452bfa57fbfa23c5fe7683';var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();
18
+ </script><script async src="https://www.googletagmanager.com/gtag/js?id=UA-150860401-1"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);};gtag('js',new Date());gtag('config','UA-150860401-1');
19
+ </script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/fixedPage.min.js"></script><meta name="generator" content="Hexo 6.3.0"></head><body><div class="body_container"><div id="header"><div class="site-name"><a id="logo" href="/.">前端壹菜鸟</a><p class="description">关注前端知识，收集精彩博文，做技术的搬运工</p></div><div id="nav-menu"><a class="current" href="/." target="_self"><i class="fa fa-home"> 首页</i></a><a href="/archives/" target="_self"><i class="fa fa-archive"> 归档</i></a><a href="/guestbook/" target="_self"><i class="fa fa-comments"> 留言</i></a><a href="/about/" target="_self"><i class="fa fa-user"> 关于</i></a><a href="https://laonongmin.online/" target="_target"><i class="fa fa-group"> 看看</i></a><a href="https://love.xuehuayu.cn/" target="_target"><i class="fa fa-heart"> LOVE</i></a></div></div><div class="pure-g" id="layout"><div class="pure-u-1 pure-u-md-3-4"><div class="content_container"><div class="post"><h1 class="post-title c-post">推荐几款免费且不限流量的全球CDN</h1><div class="post-meta"><span class="date">2021-11-22</span><span> | </span><span class="tag"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载 </a></span><span> | </span><span class="category"><a href="/categories/CDN/">CDN </a></span><span id="busuanzi_container_page_pv"> | <span id="busuanzi_value_page_pv"><i class="fa fa-spinner"></i></span><span> 阅读</span></span><span class="post-time"><span class="post-meta-item-text"> | </span><span class="post-meta-item-icon"><i class="fa fa-keyboard-o"></i><span class="post-count"> 1.2k</span><span class="post-meta-item-text"> 字</span></span></span><span class="post-time"> | <span class="post-meta-item-icon"><i class="fa fa-hourglass-half"></i><span class="post-count"> 5</span><span class="post-meta-item-text"> 分钟</span></span></span></div><a class="disqus-comment-count" href="/article/54918.html#vcomment"><span class="waline-comment-count" data-path="/article/54918.html"></span><span> 条评论</span></a><div class="post-content"><h2 id="推荐几个免费的且不限流量的CDN，包括jsdelivr-staticaly-githack-全球通用，可以存储些网站的静态资源，然后引用CDN地址，优化网站的访问速度。npm国内镜像请查看：jsdelivr挂了不能访问替代方案还有哪些免费cdn"><a href="#推荐几个免费的且不限流量的CDN，包括jsdelivr-staticaly-githack-全球通用，可以存储些网站的静态资源，然后引用CDN地址，优化网站的访问速度。npm国内镜像请查看：jsdelivr挂了不能访问替代方案还有哪些免费cdn" class="headerlink" title="推荐几个免费的且不限流量的CDN，包括jsdelivr staticaly githack 全球通用，可以存储些网站的静态资源，然后引用CDN地址，优化网站的访问速度。npm国内镜像请查看：jsdelivr挂了不能访问替代方案还有哪些免费cdn"></a>推荐几个免费的且不限流量的CDN，包括jsdelivr staticaly githack 全球通用，<br>可以存储些网站的静态资源，然后引用CDN地址，优化网站的访问速度。<br><span id="more"></span><br>npm国内镜像请查看：<a href="/article/4292.html">jsdelivr挂了不能访问替代方案还有哪些免费cdn</a></h2><h3 id="jsdelivr"><a href="#jsdelivr" class="headerlink" title="jsdelivr"></a>jsdelivr</h3><p>官网地址：<a target="_blank" rel="noopener" href="https://www.jsdelivr.com/">https://www.jsdelivr.com</a> 没梯子访问可能有点慢，不过CDN的节点是很快的 可以引用的资源包括NPM、github、wordpress的所有资源，github可以是任意体积小于50M的仓库，具体使用参考官网，有介绍，或者看下面的介绍</p>
20
+ <blockquote>
21
+ <p>Github</p>
22
+ </blockquote>
23
+ <figure class="highlight txt"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">//加载任何GitHub版本，提交或分支</span><br><span class="line">//注意：我们建议将npm用于支持它的项目</span><br><span class="line">https://cdn.jsdelivr.net/gh/user/repo@version/file</span><br><span class="line"></span><br><span class="line">//任意Github仓库</span><br><span class="line">//主分支</span><br><span class="line">https://cdn.jsdelivr.net/gh/liub1934/LB-Blog@master/wp-content/themes/Memory/style.css</span><br><span class="line">//版本分支</span><br><span class="line">https://cdn.jsdelivr.net/gh/liub1934/LB-Blog@630440b51d272219117ca7fe34ec5ee4e005e8a9/wp-content/themes/Memory/style.css</span><br><span class="line"></span><br><span class="line">//加载jQuery v3.2.1</span><br><span class="line">https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js</span><br><span class="line"></span><br><span class="line">//使用版本范围而不是特定版本</span><br><span class="line">https://cdn.jsdelivr.net/gh/jquery/jquery@3.2/dist/jquery.min.js</span><br><span class="line">https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js</span><br><span class="line"></span><br><span class="line">//完全省略版本以获取最新版本</span><br><span class="line">//你不应该在生产中使用它</span><br><span class="line">https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js</span><br><span class="line"></span><br><span class="line">//将“.min”添加到任何JS / CSS文件中以获得缩小版本</span><br><span class="line">//如果一个不存在，我们将为您生成它</span><br><span class="line">https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js</span><br><span class="line"></span><br><span class="line">//在末尾添加/以获取目录列表</span><br><span class="line">https://cdn.jsdelivr.net/gh/jquery/jquery/</span><br></pre></td></tr></table></figure>
24
+
25
+ <blockquote>
26
+ <p>wordpress</p>
27
+ </blockquote>
28
+ <figure class="highlight txt"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">//从WordPress.org插件SVN repo加载任何插件</span><br><span class="line">https://cdn.jsdelivr.net/wp/plugins/project/tags/version/file</span><br><span class="line"></span><br><span class="line">//加载一个确切的版本</span><br><span class="line">https://cdn.jsdelivr.net/wp/plugins/wp-slimstat/tags/4.6.5/wp-slimstat.js</span><br><span class="line"></span><br><span class="line">//加载最新版本</span><br><span class="line">//你不应该在生产中使用它</span><br><span class="line">https://cdn.jsdelivr.net/wp/plugins/wp-slimstat/trunk/wp-slimstat.js</span><br><span class="line"></span><br><span class="line">//从WordPress.org主题SVN repo加载任何主题</span><br><span class="line">https://cdn.jsdelivr.net/wp/themes/project/version/file</span><br><span class="line"></span><br><span class="line">//加载一个确切的版本</span><br><span class="line">https://cdn.jsdelivr.net/wp/themes/twenty-eightteen/1.7/assets/js/html5.js</span><br><span class="line"></span><br><span class="line">//将“.min”添加到任何JS / CSS文件中以获得缩小版本</span><br><span class="line">//如果一个不存在，我们将为您生成它</span><br><span class="line">https://cdn.jsdelivr.net/wp/themes/twenty-eightteen/1.7/assets/js/html5.min.js</span><br></pre></td></tr></table></figure>
29
+
30
+ <hr>
31
+ <h3 id="staticaly"><a href="#staticaly" class="headerlink" title="staticaly"></a>staticaly</h3><p>官网地址：<a target="_blank" rel="noopener" href="https://www.staticaly.com/">https://www.staticaly.com</a><br>轻松地从GitHub &#x2F; GitLab &#x2F; Bitbucket加载您的项目 没有流量限制或限制。<br>文件通过超快速全球CDN提供。 在URL（不是分支）中使用特定标记或提交哈希。<br>根据URL永久缓存文件。 除master分支外，文件在浏览器中缓存1年。 具体用法：</p>
32
+ <blockquote>
33
+ <p>GitHub CDN</p>
34
+ </blockquote>
35
+ <figure class="highlight txt"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://cdn.staticaly.com/gh/:user/:repo/:tag/:file</span><br></pre></td></tr></table></figure>
36
+
37
+ <blockquote>
38
+ <p>GitLab CDN</p>
39
+ </blockquote>
40
+ <figure class="highlight txt"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://cdn.staticaly.com/gl/:user/:repo/:tag/:file</span><br></pre></td></tr></table></figure>
41
+
42
+ <blockquote>
43
+ <p>Bitbucket CDN</p>
44
+ </blockquote>
45
+ <figure class="highlight txt"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://cdn.staticaly.com/bb/:user/:repo/:tag/:file</span><br></pre></td></tr></table></figure>
46
+
47
+ <blockquote>
48
+ <p>WordPress CDN</p>
49
+ </blockquote>
50
+ <figure class="highlight txt"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">https://cdn.staticaly.com/wp/c/:version/wp-includes/:file </span><br><span class="line">https://cdn.staticaly.com/wp/p/:plugin_name/:version/:file </span><br><span class="line">https://cdn.staticaly.com/wp/t/:theme_name/:version/:file</span><br></pre></td></tr></table></figure>
51
+
52
+ <blockquote>
53
+ <p>Imgpx CDN</p>
54
+ </blockquote>
55
+ <figure class="highlight txt"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://cdn.staticaly.com/img/:image_url</span><br></pre></td></tr></table></figure>
56
+
57
+ <blockquote>
58
+ <p>Favicons CDN</p>
59
+ </blockquote>
60
+ <figure class="highlight txt"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://cdn.staticaly.com/favicons/:favicon_url</span><br></pre></td></tr></table></figure>
61
+
62
+ <blockquote>
63
+ <p>举个栗子</p>
64
+ </blockquote>
65
+ <figure class="highlight txt"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">//从GitHub 加载jQuery的生产文件</span><br><span class="line">https://cdn.staticaly.com/gh/jquery/jquery-dist/master/dist/jquery.min.js</span><br><span class="line"></span><br><span class="line">//和Bootstrap CSS</span><br><span class="line">https://cdn.staticaly.com/gh/twbs/bootstrap/v4-dev/dist/css/bootstrap.min.css</span><br><span class="line"></span><br><span class="line">//或者来自WordPress.org SVN的WordPress核心文件</span><br><span class="line">https://cdn.staticaly.com/wp/c/latest/wp-includes/css/dashicons.min.css</span><br><span class="line"></span><br><span class="line">//或者自己的任意仓库</span><br><span class="line">//主分支</span><br><span class="line">https://rawcdn.githack.com/liub1934/LB-Blog/master/wp-content/themes/Memory/emoji/xiaodianshi/baiyan.png</span><br><span class="line"></span><br><span class="line">//版本分支</span><br><span class="line">https://rawcdn.githack.com/liub1934/LB-Blog/8806f440d3f9a7cc3e6125d7d75564e40262c6a8/wp-content/themes/Memory/emoji/xiaodianshi/baiyan.png</span><br></pre></td></tr></table></figure>
66
+
67
+ <hr>
68
+ <h3 id="githack"><a href="#githack" class="headerlink" title="githack"></a>githack</h3><p>直接从GitHub，Bitbucket或GitLab提供原始文件<br>官网地址：<a target="_blank" rel="noopener" href="http://raw.githack.com/">http://raw.githack.com/</a> 具体用法和上面的staticaly很类似</p>
69
+ <blockquote>
70
+ <p>github</p>
71
+ </blockquote>
72
+ <figure class="highlight txt"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">//主分支</span><br><span class="line">https://rawcdn.githack.com/liub1934/LB-Blog/master/wp-content/themes/Memory/emoji/xiaodianshi/baiyan.png</span><br><span class="line"></span><br><span class="line">//版本分支</span><br><span class="line">https://rawcdn.githack.com/liub1934/LB-Blog/8806f440d3f9a7cc3e6125d7d75564e40262c6a8/wp-content/themes/Memory/emoji/xiaodianshi/baiyan.png</span><br></pre></td></tr></table></figure>
73
+
74
+ <hr>
75
+ <h3 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h3><p>以上几款免费的CDN，都是不限流量的，所以可以用于个人的项目，公司的项目请酌情考虑使用，<br>可能会存在流量过大导致出现一些问题。<br>一些比较：<br>1、jsdelivr：图片资源过多可能会出现一些问题，例如本站的表情图片，之前用的一直是jsdelivr，经常出现一大片的表情加载失败的情况，也可能和我表情图片CDN用的是master主版本的原因，因为经常提交有变动，本站其他的静态资源一切都好。<br>2、staticaly：和jsdelivr的问题一样，过多的表情图片有时候个别的几个表情加载不出来，通过地址直接打开页面503报错。不过staticaly有个imgpx可以优化图片，具体参考：<a target="_blank" rel="noopener" href="https://www.staticaly.com/imgpx">https://www.staticaly.com/imgpx</a><br>3、githack：最后过多的图标表情的问题还是通用githack加载解决了，没有出现上面所说的部分表情图片加载失败的情况。上面的文件都是通过CloudFlare的CDN提供，CloudFlare国外很有名，资源应该也相对稳定些。</p>
76
+ <hr>
77
+ <blockquote>
78
+ <p>原文地址：<code>https://www.31du.cn/blog/jsdelivr.html</code></p>
79
+ </blockquote>
80
+ </div><iframe src="/donate/?AliPayQR=https://store.xuehuayu.cn/store/public/alipay_qr.jpg&amp;WeChatQR=https://store.xuehuayu.cn/store/public/wechat_qr.png&amp;UnionPayQR=null&amp;GitHub=null&amp;BTCQR=null&amp;BTCKEY=null&amp;PayPal=https://www.paypal.com/paypalme/OrdinaryPerson" style="overflow-x:hidden; overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;" frameborder="0" scrolling="no"></iframe><div><ul class="post-copyright"><li class="post-copyright-author"><strong>本文作者：</strong>雪花雨</li><li class="post-copyright-link"><strong>本文链接：</strong><a href="/article/54918.html">https://xuehuayu.cn/article/54918.html</a></li><li class="post-copyright-license"><strong>版权声明：</strong>① 标为原创的文章为博主原创，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接。② 转载文章来自网络，已标明出处，<a href="mailto:cainiaoblog@126.com">侵删</a>。</li></ul></div><br><div class="tags"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载</a></div><div class="post-nav"><a class="pre" href="/article/54351.html">uni-app横竖屏切换之后样式错乱字体变大解决方法</a><a class="next" href="/article/65128.html">项目中遇到的有趣的“BUG”，这样做比删库跑路更高明</a></div><div id="vcomment"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.min.css"><script src="//cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.js"></script><script>const origin = window.location.origin
81
+ const serverURL = origin.includes('cainiaoblog') ? 'https://cmts.cainiaoblog.cn' : 'https://cmts.xuehuayu.cn'
82
+ const locale = {
83
+ placeholder: '请正确填写昵称和邮箱，方便接收回复通知~',
84
+ sofa: '沙发空缺中，还不快抢~',
85
+ };
86
+ Waline.init({
87
+ el: '#vcomment',
88
+ serverURL: serverURL,
89
+ pageSize: '20',
90
+ visitor: true, // 阅读量统计
91
+ requiredMeta: ['nick', 'mail'],
92
+ emoji: [
93
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo',
94
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/qq',
95
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-emoji',
96
+ ],
97
+ locale,
98
+ pageview: true
99
+ })
100
+ </script></div></div></div><div class="pure-u-1 pure-u-md-1-4 fixed-search hidden_mid_and_down"><div id="sidebar"><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/search.min.js"></script><div class="widget"><div class="widget-search"><input class="search" type="radio" name="search" value="baidu" id="baidu" checked="checked"/><label class="label" for="baidu" title="百度全站搜索">百度</label><input class="search" type="radio" name="search" value="google" id="google"/><label class="label" for="google" title="谷歌全站搜索">谷歌</label><input class="search" type="radio" name="search" value="self" id="self"/><label class="label" for="self" title="使用站内搜索">站内</label></div><div class="widget" id="search"><form class="search-form" action="//www.baidu.com/baidu" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="word" maxlength="30" placeholder="百度全站搜索"/><input type="hidden" name="si" value="xuehuayu.cn"/><input type="hidden" name="cl" value="3"/><input type="hidden" name="ct" value="2097152"/><input type="hidden" name="s" value="on"/><input class="search-submit" type="submit" value=""/></form></div></div><script>$('input[type=radio][name=search]').change(function() {
101
+ var val = $(this).val()
102
+ var self = '<div class="search-form"><input id="local-search-input" placeholder="站内搜索，首次慢" type="search" name="q" results="0"><input class="search-submit" type="submit" value=""/><div id="local-search-result"></div></div>'
103
+ var google = '<form class="search-form" action="//www.google.com/search" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="q" maxlength="30" placeholder="谷歌全站搜索"><input type="hidden" name="sitesearch" value="xuehuayu.cn"><input class="search-submit" type="submit" value=""/></form>'
104
+ var baidu = '<form class="search-form" action="//www.baidu.com/baidu" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="word" maxlength="30" placeholder="百度全站搜索"><input type="hidden" name="si" value="xuehuayu.cn"><input type="hidden" name="cl" value="3"><input type="hidden" name="ct" value="2097152"><input type="hidden" name="s" value="on"><input class="search-submit" type="submit" value=""/></form>'
105
+
106
+ if (val === 'self') {
107
+ $('#search').html(self)
108
+ var search_path = 'search.xml';
109
+ if (search_path.length == 0) {
110
+ search_path = 'search.xml';
111
+ }
112
+ var path = 'https://cdn.staticaly.com/gh/npljy/npljy.github.io/main/' + search_path;
113
+ searchFunc(path, 'local-search-input', 'local-search-result');
114
+ } else if (val === 'baidu') {
115
+ $('#search').html(baidu)
116
+ } else if (val === 'google') {
117
+ $('#search').html(google)
118
+ }
119
+ })</script><div class="widget widget-wxmp"><img alt="微信公众号" width="100%" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/mp-mini.jpg"/></div><div class="widget widget-categories"><div class="widget-title"><i class="fa fa-folder-o"> 分类</i></div><ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/CDN/">CDN</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/IDE/">IDE</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/git/">git</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/hexo/">hexo</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%85%AC%E5%85%B1%E8%8A%82%E6%97%A5/">公共节日</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%88%86%E4%BA%AB/">分享</a><span class="category-list-count">29</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a><span class="category-list-count">191</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E6%B5%8F%E8%A7%88%E5%99%A8/">浏览器</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E6%B5%8F%E8%A7%88%E5%99%A8/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/">网络协议</a><span class="category-list-count">1</span></li></ul></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%8D%9A%E5%AE%A2/">博客</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B7%A5%E5%85%B7/">工具</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B9%BF%E5%91%8A%E8%BF%87%E6%BB%A4/">广告过滤</a><span class="category-list-count">8</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B9%BF%E5%91%8A%E8%BF%87%E6%BB%A4/%E8%A7%86%E9%A2%91%E7%94%B5%E8%A7%86%E5%B0%8F%E8%AF%B4%E6%BC%AB%E7%94%BB%E8%B5%84%E8%AE%AF%E9%9F%B3%E4%B9%90/">视频电视小说漫画资讯音乐</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%AD%A3%E5%88%99/">正则</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%B5%8F%E8%A7%88%E5%99%A8/">浏览器</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E7%AE%97%E6%B3%95/">算法</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%B5%84%E8%AE%AF/">资讯</a><span class="category-list-count">16</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%BD%BB%E6%9D%BE%E4%B8%80%E5%88%BB/">轻松一刻</a><span class="category-list-count">1</span></li></ul></div><div class="widget widget-tags"><div class="widget-title"><i class="fa fa-star-o"> 标签</i></div><div class="tagcloud"><a href="/tags/%E5%8E%9F%E5%88%9B/" style="font-size: 15px;">原创</a> <a href="/tags/%E8%BD%AC%E8%BD%BD/" style="font-size: 15px;">转载</a> <a href="/tags/%E6%89%8B%E5%86%99/" style="font-size: 15px;">手写</a> <a href="/tags/%E7%96%AB%E6%83%85/" style="font-size: 15px;">疫情</a> <a href="/tags/%E5%A8%B1%E4%B9%90/" style="font-size: 15px;">娱乐</a></div></div><div class="widget widget-recent-posts"><div class="widget-title"><i class="fa fa-file-o"> 最近文章</i></div><ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/article/c5576490.html">面试准备</a></li><li class="post-list-item"><a class="post-list-link" href="/article/84c9ccd6.html">精读《SolidJS》</a></li><li class="post-list-item"><a class="post-list-link" href="/article/53803e6.html">git提交注释规范</a></li><li class="post-list-item"><a class="post-list-link" href="/article/a4145266.html">前端数组拍平flat一行代码</a></li><li class="post-list-item"><a class="post-list-link" href="/article/bedea419.html">一道前端this面试题</a></li><li class="post-list-item"><a class="post-list-link" href="/article/bf7e7421.html">git多账号配置</a></li></ul></div><div class="widget widget-links"><div class="widget-title"><i class="fa fa-external-link"> 友情链接</i></div><ul></ul><a href="https://github.com/npljy?utm_source=xuehuayu.cn" title="GitHub" target="_blank">GitHub</a><ul></ul><a href="https://laonongmin.online?utm_source=xuehuayu.cn" title="看看" target="_blank">看看</a><ul></ul><a href="https://cainiaoblog.cn?utm_source=xuehuayu.cn" title="菜鸟博客" target="_blank">菜鸟博客</a><ul></ul><a href="mailto:cainiaoblog@126.com" title="友链联系" target="_blank">友链联系</a></div></div></div><div class="pure-u-1 pure-u-md-3-4"><div id="footer"><div class="flex-block justify-center align-center flex-wrap"><a class="gxba-link" id="gxba" rel="nofollow" target="_blank" href="http://beian.miit.gov.cn/">京ICP备20007647号-2</a><a class="gaba-link" id="gaba-link" rel="nofollow" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802031264"><img class="nofancybox" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/gaba.png" alt=""/><span id="gaba">京公网安备 11010802031264号</span><span style="padding-right: 10px;"></span></a><span>Copyright © 2023 </span><a href="/." rel="nofollow">前端壹菜鸟. </a><script>(function(){
120
+ var cnb =window.location.origin.indexOf('cainiaoblog') !==-1
121
+ if (cnb) {
122
+ var gxba =document.getElementById('gxba')
123
+ var gaba =document.getElementById('gaba')
124
+ var gabaLink =document.getElementById('gaba-link')
125
+ gxba.innerText ='京ICP备20007647号-1'
126
+ gaba.innerText ='京公网安备 11010802031254号'
127
+ gabaLink.setAttribute('href','http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802031254')
128
+ }
129
+ })()</script></div><div class="flex-block justify-center align-center flex-wrap"><a rel="nofollow" target="_blank" href="https://v6.51.la/s/Guz3lwHCsVme9Cu"><div class="busuanzi_container" id="busuanzi_container"><span class="busuanzi_container_site_pv" id="busuanzi_container_site_pv">访问量：<span id="busuanzi_value_site_pv"><i class="fa fa-spinner"></i></span></span><span class="busuanzi_container_site_uv" id="busuanzi_container_site_uv">访客数：<span id="busuanzi_value_site_uv"><i class="fa fa-spinner"></i></span></span><span style="padding-right: 10px;"></span></div></a><a rel="nofollow" target="_blank" href="https://www.upyun.com/?utm_source=lianmeng&amp;utm_medium=referral"><span style="font-weight:bold;letter-spacing: 1px;">本网站由 </span><img class="nofancybox" height="32" style="vertical-align: middle" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/upy_logo.min.svg" alt=""/><span style="font-weight:bold;letter-spacing: 1px;">提供CDN加速/云存储服务</span></a><span style="padding-right: 10px;"></span><a rel="nofollow" style="font-size:18px;font-weight:bold;vertical-align: middle" target="_blank" title="注册就送代金券可直接使用" href="https://console.upyun.com/register/?invite=HyDsjZHIL">注册</a></div></div></div></div><a class="show" id="rocket" href="#top"></a><div class="darkmode-toggle">🌓</div><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/totop.min.js" async></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/dark.min.js" async></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/codeblock-resizer.min.js"></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/smartresize.min.js"></script></div></body></html>
package/article/55119.html ADDED
@@ -0,0 +1,136 @@
1
+ <!DOCTYPE html><html lang="zh-CN" data-dark><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta name="description" content="前端壹菜鸟，记录工作难题，关注前端知识，收集精彩博文，做技术的搬运工"><meta name="msvalidate.01" content="0FE4D8B3381D3D87088996B886E1E2BD"><title>来自新时代的 CSS | 前端壹菜鸟</title><link rel="stylesheet" type="text/css" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/css/style.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/normalize.css@latest/normalize.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/purecss@latest/build/pure-min.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/purecss@latest/build/grids-responsive-min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"><link rel="icon" mask="" sizes="any" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.ico"><link rel="Shortcut Icon" type="image/x-icon" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.ico"><link rel="apple-touch-icon" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.png"><link rel="apple-touch-icon-precomposed" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.png"><link rel="alternate" type="application/atom+xml" href="/atom.xml"><script type="text/javascript" src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8385136408348258"></script><script src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" async></script><script>(function(){
2
+ var bp = document.createElement('script');
3
+ var curProtocol = window.location.protocol.split(':')[0];
4
+ if (curProtocol === 'https'){
5
+ bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
6
+ }
7
+ else{
8
+ bp.src = 'http://push.zhanzhang.baidu.com/push.js';
9
+ }
10
+ var s = document.getElementsByTagName("script")[0];
11
+ s.parentNode.insertBefore(bp, s);
12
+ })();
13
+ </script><script>(function(){
14
+ var src = 'https://jspassport.ssl.qhimg.com/11.0.1.js?d182b3f28525f2db83acfaaf6e696dba';
15
+ document.write('<script src="' + src + '" id="sozz"><\/script>');
16
+ })();
17
+ </script><script>var _hmt=_hmt||[];(function(){var hm=document.createElement("script");hm.src='https://hm.baidu.com/hm.js?011f0b44e8452bfa57fbfa23c5fe7683';var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();
18
+ </script><script async src="https://www.googletagmanager.com/gtag/js?id=UA-150860401-1"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);};gtag('js',new Date());gtag('config','UA-150860401-1');
19
+ </script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/fixedPage.min.js"></script><meta name="generator" content="Hexo 6.3.0"></head><body><div class="body_container"><div id="header"><div class="site-name"><a id="logo" href="/.">前端壹菜鸟</a><p class="description">关注前端知识，收集精彩博文，做技术的搬运工</p></div><div id="nav-menu"><a class="current" href="/." target="_self"><i class="fa fa-home"> 首页</i></a><a href="/archives/" target="_self"><i class="fa fa-archive"> 归档</i></a><a href="/guestbook/" target="_self"><i class="fa fa-comments"> 留言</i></a><a href="/about/" target="_self"><i class="fa fa-user"> 关于</i></a><a href="https://laonongmin.online/" target="_target"><i class="fa fa-group"> 看看</i></a><a href="https://love.xuehuayu.cn/" target="_target"><i class="fa fa-heart"> LOVE</i></a></div></div><div class="pure-g" id="layout"><div class="pure-u-1 pure-u-md-3-4"><div class="content_container"><div class="post"><h1 class="post-title c-post">来自新时代的 CSS</h1><div class="post-meta"><span class="date">2019-12-27</span><span> | </span><span class="tag"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载 </a></span><span> | </span><span class="category"><a href="/categories/%E5%89%8D%E7%AB%AF/">前端 </a></span><span id="busuanzi_container_page_pv"> | <span id="busuanzi_value_page_pv"><i class="fa fa-spinner"></i></span><span> 阅读</span></span><span class="post-time"><span class="post-meta-item-text"> | </span><span class="post-meta-item-icon"><i class="fa fa-keyboard-o"></i><span class="post-count"> 4.4k</span><span class="post-meta-item-text"> 字</span></span></span><span class="post-time"> | <span class="post-meta-item-icon"><i class="fa fa-hourglass-half"></i><span class="post-count"> 18</span><span class="post-meta-item-text"> 分钟</span></span></span></div><a class="disqus-comment-count" href="/article/55119.html#vcomment"><span class="waline-comment-count" data-path="/article/55119.html"></span><span> 条评论</span></a><div class="post-content"><blockquote>
20
+ <p>作者：鱼头的Web海洋 公号 &#x2F; 陈大鱼头 （本文来自作者投稿）<br><code>原文地址：https://mp.weixin.qq.com/s/</code>pPtzhXbAaXfoTV2q3u0Dww<code> 最近听说TypeScript3.7添加了对Optional Chaining[2]的支持，然后就想着给鱼头的脚手架ying-template[3]的TS版本升级，然后在命令行发现这样的一句信息： &#39;postcss-cssnext&#39; 已经被 &#39;postcss-preset-env&#39;代替了。详情请查看 https://moox.io/blog/deprecating-cssnext/ 其实鱼头的脚手架里早就把</code>postcss-cssnext<code>换成了</code>postcss-preset-env&#96;，不过一直没删，但是看到这句话之后，处于好奇，就去翻了翻<strong>PostCSS</strong>的官网，然后又思考了下这些年CSS的发展历程，遂有这篇文章的出炉。</p>
21
+ </blockquote>
22
+ <span id="more"></span>
23
+ <h2 id="浅谈现代化的CSS"><a href="#浅谈现代化的CSS" class="headerlink" title="浅谈现代化的CSS"></a><strong>浅谈现代化的CSS</strong></h2><p>从1997年 <code>CSS1.0</code> 发布到如今，从最开始只支持简单的文字排版到如今已经可以做出酷炫的3D动画，CSS已经走过了22个年头，其发展如图所示：<br><img src="https://mmbiz.qpic.cn/mmbiz_png/y0rsINPrlZzcOldnTEe1q0k6ibUNetJkQl4T7hHn87g4J6bmKVhLG0LBPrVHXJQ4E8OBmSUXkehtcUr879MVABQ/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" alt="null"><br>[图片来自MDN[4]]<br>随着互联网的发展，人们对网页的要求已经是从只要展示图文就好变成了各种交互跟视觉效果都需要有着更多的体验要求。CSS为此也是不断的更新着。<br>随着web业务日益复杂化和多元化，前端开发也从单纯的web page转变成web app，在此也诞生了“前端工程化”的概念，一个完备的web app往往会很大很复杂，甚至会有很多人共同维护，以往的拼页面，写jQuery已经是不足以支撑现代的需求。同样的，CSS也是如此，不再是内联写几个<code>margin</code>，<code>padding</code>或者HTML一股脑引入几个CSS就足够的，而且由于人员配置的增多，不同的开发，命名习惯，样式是否会冲突也是必须要考虑的。<br>除了工程问题，还有就是CSS与浏览器之间的关系也是我们不得不考虑的，虽然CSS发展的很快，但是浏览器对CSS新特性支持的进度确实非常缓慢的。所以虽然某些属性已经推出了很多年，但是也往往因为浏览器的原因而无法进行大规模的使用。<br>虽然在实际开发过程中，CSS有着这样那样让人无法忽略的问题，但是“方法总比困难多”，在前端界也有许多热心的大牛们在尝试着解决这些问题。这次让鱼头与大家一起分享下这些与CSS相关的技巧与方法。</p>
24
+ <h2 id="最初的CSS模块化-——-CSS命名规则"><a href="#最初的CSS模块化-——-CSS命名规则" class="headerlink" title="最初的CSS模块化 —— CSS命名规则"></a><strong>最初的CSS模块化 —— CSS命名规则</strong></h2><blockquote>
25
+ <p>命名一直是开发者比较头疼的问题，在前端里，除了JS各种变量的命名，还有元素class的命名，虽然我们可以随意起名，愿意的话甚至可以使用<code>.a .b .c</code>等无意义的规则来命名，但是如果是一个长期的，大型的或多人协作的项目里这么命名，恐怕容易被人胖揍。这次我们来分享下业界常用的用来防挨揍的命名规则。</p>
26
+ </blockquote>
27
+ <h3 id="OOCSS-Object-Oriented-CSS"><a href="#OOCSS-Object-Oriented-CSS" class="headerlink" title="OOCSS(Object-Oriented CSS)"></a>OOCSS(Object-Oriented CSS)</h3><p>OOCSS有两个编写原则：<br>•结构与样式分离•容器与内容分离<br>我们来看看官网的一个例子：<br><img src="https://mmbiz.qpic.cn/mmbiz_png/y0rsINPrlZzcOldnTEe1q0k6ibUNetJkQmSxZkFjPYzRib0jOKiaURNlwO6ibZwFJ0ZEqdMkoREgwC4UJhoc5kjyKQ/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" alt="null"></p>
28
+ <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;mod grab&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">b</span> <span class="attr">class</span>=<span class="string">&quot;top&quot;</span>&gt;</span> <span class="tag">&lt;<span class="name">b</span> <span class="attr">class</span>=<span class="string">&quot;tl&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">b</span>&gt;</span> <span class="tag">&lt;<span class="name">b</span> <span class="attr">class</span>=<span class="string">&quot;tr&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">b</span>&gt;</span> <span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;inner&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;hd&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">h3</span>&gt;</span>grab<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;bd&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">p</span>&gt;</span>Body<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">b</span> <span class="attr">class</span>=<span class="string">&quot;bottom&quot;</span>&gt;</span> <span class="tag">&lt;<span class="name">b</span> <span class="attr">class</span>=<span class="string">&quot;bl&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">b</span>&gt;</span> <span class="tag">&lt;<span class="name">b</span> <span class="attr">class</span>=<span class="string">&quot;br&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">b</span>&gt;</span> <span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
29
+
30
+ <p>在这里<code>.mod</code>是父类，所有的类都是继承自它，<code>.grab</code>便是子类。<br>至于<code>.top</code>、<code>.inner</code>与<code>bottom</code>，顾名思义就是不同位置的子盒子。<br>这里是以“容器”为命名法则。</p>
31
+ <h3 id="BEM"><a href="#BEM" class="headerlink" title="BEM"></a>BEM</h3><p>BEM 是块（Block）、 元素（Element）、修饰符（ Modifier）的单词集合。<br>在选择器中，我们用以下三种符号来表示以上内容<br>•**<code>-</code>** 中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。•<code>__</code> 双下划线：双下划线用来连接块和块的子元素•<code>_</code> 单下划线：单下划线用来描述一个块或者块的子元素的一种状态<br>就像这样：<code>type-block__element_modifier</code><br>官网的例子如下：<br><img src="https://mmbiz.qpic.cn/mmbiz_png/y0rsINPrlZzcOldnTEe1q0k6ibUNetJkQuWzHtaNh6oYSyZnV6haNKTTorauUWU6fA52Ro4Rop8mwic7K0wF5qIw/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" alt="null"></p>
32
+ <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.button</span> &#123;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">display</span>:inline-block;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">border-radius</span>:<span class="number">3px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">padding</span>:<span class="number">7px</span> <span class="number">12px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">border</span>:<span class="number">1px</span> solid <span class="number">#D5D5D5</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-image</span>:<span class="built_in">linear-gradient</span>(<span class="number">#EEE</span>,<span class="number">#DDD</span>);</span></span><br><span class="line"><span class="language-css"> <span class="attribute">font</span>:<span class="number">700</span> <span class="number">13px</span>/<span class="number">18px</span> Helvetica,arial;</span></span><br><span class="line"><span class="language-css"> &#125;</span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.button--state-success</span> &#123;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">color</span>:<span class="number">#FFF</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background</span>:<span class="number">#569E3D</span> <span class="built_in">linear-gradient</span>(<span class="number">#79D858</span>,<span class="number">#569E3D</span>) repeat-x;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">border-color</span>:<span class="number">#4A993E</span>;</span></span><br><span class="line"><span class="language-css"> &#125;</span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.button--state-danger</span> &#123;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">color</span>:<span class="number">#900</span>;</span></span><br><span class="line"><span class="language-css"> &#125;</span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">&quot;button&quot;</span>&gt;</span>Normal button<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">&quot;button button--state-success&quot;</span>&gt;</span>Success button<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">&quot;button button--state-danger&quot;</span>&gt;</span>Danger button<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure>
33
+
34
+ <h3 id="SMACSS"><a href="#SMACSS" class="headerlink" title="SMACSS"></a>SMACSS</h3><p>SMACSS，一个长得很像OOCSS的规则。<br>核心只有以下6个：<br>•Base：页面的基本样式命名规则•Layout：布局命名规则•Module：模块规命名规则•State：状态命名规则•Theme：主题命名规则•Changing State：可变状态的命名规则<br>修饰符是<code>--</code>，子模块是<code>__</code><br>官网的例子如下：<br><img src="https://mmbiz.qpic.cn/mmbiz_png/y0rsINPrlZzcOldnTEe1q0k6ibUNetJkQ8eL9BePVC6GPyhyUDcculgmsDTfaibR28aO59iab5MJ13Xb9iazxqDeEw/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" alt="null"></p>
35
+ <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"> #header &#123;</span><br><span class="line"> …</span><br><span class="line"> &#125;</span><br><span class="line"> #primarynav &#123;</span><br><span class="line"> …</span><br><span class="line"> &#125;</span><br><span class="line"> #maincontent &#123;</span><br><span class="line"> …</span><br><span class="line"> &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;header&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;primarynav&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;maincontent&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
36
+
37
+ <h2 id="为CSS赋能-——-预处理器"><a href="#为CSS赋能-——-预处理器" class="headerlink" title="为CSS赋能 —— 预处理器"></a><strong>为CSS赋能 —— 预处理器</strong></h2><blockquote>
38
+ <p>CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序。市面上有很多CSS预处理器可供选择，且绝大多数CSS预处理器会增加一些原生CSS不具备的特性，例如代码混合，嵌套选择器，继承选择器等。这些特性让CSS的结构更加具有可读性且易于维护。</p>
39
+ </blockquote>
40
+ <h3 id="sass"><a href="#sass" class="headerlink" title="sass"></a>sass</h3><p><img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="null"><br>sass是诞生最早，也是世界上最成熟、最稳定、最强大的专业级CSS扩展语言！（官网说的(O_o)?? ）<br>sass可用使用变量，嵌套规则，混合器，继承等编程语言才有的概念，代码例子如下：<br> $nav-color: #F90;<br> nav { $width: 100px; width: $width; color: $nav-color;}<br> &#x2F;&#x2F;编译后<br> nav { width: 100px; color: #F90;}</p>
41
+ <h3 id="less"><a href="#less" class="headerlink" title="less"></a>less</h3><p><img src="https://mmbiz.qpic.cn/mmbiz_png/y0rsINPrlZzcOldnTEe1q0k6ibUNetJkQG50FjKDmz2ZRpSuIGCPgXUgsF3hV3SY935ibWANf6w5l2lWR5Aaqnqw/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" alt="xuehuayu.cn"><br>Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。<br>代码例子如下：</p>
42
+ <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@base</span>:#f938ab;</span><br><span class="line"> <span class="selector-class">.box-shadow</span>(<span class="keyword">@style</span>,<span class="keyword">@c</span>) when (iscolor(@c)) &#123;</span><br><span class="line"> -webkit-<span class="attribute">box-shadow</span>:@style @c;</span><br><span class="line"> <span class="attribute">box-shadow</span>:@style @c;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box-shadow</span>(<span class="keyword">@style</span>,<span class="keyword">@alpha</span>:50%) when (isnumber(@alpha)) &#123;</span><br><span class="line"> <span class="selector-class">.box-shadow</span>(<span class="keyword">@style</span>,rgba(0,0,0,<span class="keyword">@alpha</span>));</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line"> <span class="attribute">color</span>:<span class="built_in">saturate</span>(@base,<span class="number">5%</span>);</span><br><span class="line"> <span class="attribute">border-color</span>:<span class="built_in">lighten</span>(@base,<span class="number">30%</span>);</span><br><span class="line"> <span class="selector-tag">div</span> &#123;</span><br><span class="line"> <span class="selector-class">.box-shadow</span>(<span class="number">0</span> <span class="number">0</span> <span class="number">5px</span>,<span class="number">30%</span>)</span><br><span class="line">&#125;</span><br><span class="line">&#125;// 编译后<span class="selector-class">.box</span> &#123;</span><br><span class="line"> <span class="attribute">color</span>:<span class="number">#fe33ac</span>;</span><br><span class="line"> <span class="attribute">border-color</span>:<span class="number">#fdcdea</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span> <span class="selector-tag">div</span> &#123;</span><br><span class="line"> -webkit-<span class="attribute">box-shadow</span>:<span class="number">0</span> <span class="number">0</span> <span class="number">5px</span> <span class="built_in">rgba</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">0.3</span>);</span><br><span class="line"> <span class="attribute">box-shadow</span>:<span class="number">0</span> <span class="number">0</span> <span class="number">5px</span> <span class="built_in">rgba</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">0.3</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
43
+
44
+ <h3 id="stylus"><a href="#stylus" class="headerlink" title="stylus"></a>stylus</h3><p><img src="https://mmbiz.qpic.cn/mmbiz_jpg/y0rsINPrlZyexPkIAFiaEdJj8aKaepia2fMD3TCVMg2RxHcEpA4fUoZ8Wft8qUH48Gw602rSaJp47icttGl2ic8QyA/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" alt="null"><br>Stylus，富于表现力、动态的、健壮的 CSS<br>代码例子如下：<br> body font 12px Helvetica, Arial, sans-serif<br> a.button border-radius 5px<br>完全不需要<code>&#123;&#125; : ;</code>的预处理器，个人是特别不喜欢这种写法，但是对于很多喜欢简洁的开发者来说，这确实非常好的编写方式</p>
45
+ <h2 id="如魔法师一般的存在-——-CSS-Houdini"><a href="#如魔法师一般的存在-——-CSS-Houdini" class="headerlink" title="如魔法师一般的存在 —— CSS Houdini"></a><strong>如魔法师一般的存在 —— CSS Houdini</strong></h2><blockquote>
46
+ <p>有点时候眼看CSS出来新的属性，但是因为浏览器兼容的问题，所以往往是只能看而不能用，即便有的属性可以用，但也因为各浏览器的现实情况而存在意想不到的BUG，那么这就意味着一个属性出来之后我们要等到5年甚至更久之后才能使用吗？都9012年了耶？<br>当然不是，接下来我们可以了解一下这个如魔法师一般的存在 —— CSS Houdini</p>
47
+ </blockquote>
48
+ <h3 id="CSS-Houdini是什么？"><a href="#CSS-Houdini是什么？" class="headerlink" title="CSS Houdini是什么？"></a>CSS Houdini是什么？</h3><p>CSS Houdini是一组底层API，它们公开了CSS引擎的各个部分，从而使开发者可以通过这组API来扩展CSS。它让开发者拥有了直接访问CSSOM的能力，开发者可以通过这组API来编写浏览器可解析的CSS代码，这让开发者可以在不需要等待浏览器的实现的前提下实现自己想要的CSS功能。<br><img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="null"><br>[图片来自：<a target="_blank" rel="noopener" href="https://www.qed42.com/blog/building-powerful-custom-properties-CSS-houdini]">https://www.qed42.com/blog/building-powerful-custom-properties-CSS-houdini]</a><br>如上所示，不同的API所对应的就是浏览器不同的渲染环节，用时下流行的概念来解释就是浏览器加载时不同生命周期的钩子函数。<br>简单来说，CSS Houdini就是<strong>JS IN CSS</strong>，niubility ..</p>
49
+ <h3 id="CSS-Houdini是怎么工作的？"><a href="#CSS-Houdini是怎么工作的？" class="headerlink" title="CSS Houdini是怎么工作的？"></a>CSS Houdini是怎么工作的？</h3><p>我们可访问的7个API如下：<br>1.Typed OM API2.Properties &amp; Values API3.Paint API4.Layout API5.Animation worklet6.Parser API7.Font Metrics API<br>Mmmm，虽然是有7个API（Houdini drafts上还有一些），但浏览器实际的支持情况其实是这样的：<br><img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="xuehuayu.cn"><br>[图片来自：<a target="_blank" rel="noopener" href="https://ishoudinireadyyet.com/]">https://ishoudinireadyyet.com/]</a><br>CSS Houdini的工作流程如下：<br><img src="https://mmbiz.qpic.cn/mmbiz_png/y0rsINPrlZzcOldnTEe1q0k6ibUNetJkQhms5Q08hqNeXKpfakHSGFus7G1CB5X61fSAJIdjJntMpfx0lgxboiaw/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" alt="xuehuayu.cn"><br>[图片来自：<a target="_blank" rel="noopener" href="https://www.qed42.com/blog/building-powerful-custom-properties-CSS-houdini]">https://www.qed42.com/blog/building-powerful-custom-properties-CSS-houdini]</a><br>1.钩子进入渲染的进程中2.JS是这个钩子的核心3.使用JS的Typed OM，可以挂载自定义的属性，绘制图形，布局以及动画4.还有其他两个API：Parser API 和 Font Metrics API。它们用于注册CSS相关的新事物</p>
50
+ <h3 id="一些示例"><a href="#一些示例" class="headerlink" title="一些示例"></a>一些示例</h3><blockquote>
51
+ <p>本篇不打算细讲CSS Houdini，所以不会画出所有的DEMO，有兴趣的可以查看底部的“资料来源”，从而获取更加详细的信息。<br><strong>Typed OM</strong></p>
52
+ </blockquote>
53
+ <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> * &#123;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">margin</span>:<span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">padding</span>:<span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> &#125;</span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.box</span> &#123;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background</span>:<span class="built_in">linear-gradient</span>(to right,<span class="number">#2c3e50</span>,<span class="number">#4ca1af</span>);</span></span><br><span class="line"><span class="language-css"> &#125;</span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span> <span class="attr">id</span>=<span class="string">&quot;box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"><span class="meta"></span></span></span><br><span class="line"><span class="meta"><span class="language-javascript"> &#x27;use strict&#x27;</span>;</span></span><br><span class="line"><span class="language-javascript"> box.<span class="property">attributeStyleMap</span>.<span class="title function_">set</span>(<span class="string">&#x27;width&#x27;</span>, <span class="variable constant_">CSS</span>.<span class="title function_">px</span>(<span class="number">200</span>))</span></span><br><span class="line"><span class="language-javascript"> box.<span class="property">attributeStyleMap</span>.<span class="title function_">set</span>(<span class="string">&#x27;height&#x27;</span>, <span class="variable constant_">CSS</span>.<span class="title function_">px</span>(<span class="number">200</span>))</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">const</span> [x, y] = <span class="string">&#x27;width,height&#x27;</span>.<span class="title function_">split</span>(<span class="string">&#x27;,&#x27;</span>).<span class="title function_">map</span>(<span class="function"><span class="params">val</span> =&gt;</span> <span class="title class_">Number</span>.<span class="built_in">parseInt</span>(box.<span class="title function_">computedStyleMap</span>().<span class="title function_">get</span>(val)))</span></span><br><span class="line"><span class="language-javascript"> box.<span class="property">attributeStyleMap</span>.<span class="title function_">set</span>(<span class="string">&#x27;transform&#x27;</span>, <span class="keyword">new</span> <span class="title class_">CSSTranslate</span>(<span class="variable constant_">CSS</span>.<span class="title function_">px</span>(x), <span class="variable constant_">CSS</span>.<span class="title function_">px</span>(y)))</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(box.<span class="title function_">computedStyleMap</span>().<span class="title function_">get</span>(<span class="string">&#x27;transform&#x27;</span>))</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">window</span>.<span class="title function_">getComputedStyle</span>(box, <span class="literal">null</span>)[<span class="string">&#x27;transform&#x27;</span>])</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
54
+
55
+ <p><img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="null"><br>上面就是Typed OM的示例，这里值得一提的就是，如果我们用<code>getComputedStyle</code>去获取<code>transform</code>的值，最终结果是个矩阵，这其实不太方便我们做二次操作，但是用Typed OM的JS API <code>computedStyleMap</code>，去取的结果就是一个具体属性的集合，这是非常有利于我们进行二次操作的。<br><strong>Paint API</strong><br>Paint API就是允许你例如Canvas的属性来编写CSS样式，使用方法也很简单，我们可以看看<a target="_blank" rel="noopener" href="https://slides.iamvdo.me/waq19/#/35%E4%B8%8A%E7%9A%84%E7%A4%BA%E4%BE%8B">https://slides.iamvdo.me/waq19/#/35上的示例</a><br>首先我们新建个文件叫<code>registerPaint.js</code>，在里面写下以下代码：</p>
56
+ <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">registerPaint</span>(<span class="string">&#x27;circle-ripple&#x27;</span>, <span class="keyword">class</span> &#123;</span><br><span class="line"> <span class="keyword">static</span> <span class="keyword">get</span> <span class="title function_">inputProperties</span>() &#123;</span><br><span class="line"> <span class="keyword">return</span> [<span class="string">&#x27;--circle-color&#x27;</span>, <span class="string">&#x27;--circle-radius&#x27;</span>, <span class="string">&#x27;--circle-x&#x27;</span>, <span class="string">&#x27;--circle-y&#x27;</span>]</span><br><span class="line"> &#125;</span><br><span class="line"> <span class="title function_">paint</span>(<span class="params">ctx, geom, props, args</span>) &#123;</span><br><span class="line"> <span class="keyword">const</span> x = props.<span class="title function_">get</span>(<span class="string">&#x27;--circle-x&#x27;</span>).<span class="property">value</span>;</span><br><span class="line"> <span class="keyword">const</span> y = props.<span class="title function_">get</span>(<span class="string">&#x27;--circle-y&#x27;</span>).<span class="property">value</span>;</span><br><span class="line"> <span class="keyword">const</span> radius = props.<span class="title function_">get</span>(<span class="string">&#x27;--circle-radius&#x27;</span>).<span class="property">value</span>;</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
57
+
58
+ <p>然后再新建一个<code>index.html</code>，并且在JS代码里注册上面写好的<code>registerPaint.js</code>，方式如下：<code>CSS.paintWorklet.addModule(&#39;registerPaint.js&#39;);</code><br>具体代码如下：</p>
59
+ <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-class">.el</span> &#123;</span></span><br><span class="line"><span class="language-css"> <span class="attr">--circle-radius</span>:<span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attr">--circle-color</span>:deepskyblue;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-image</span>:<span class="built_in">paint</span>(circle-ripple);</span></span><br><span class="line"><span class="language-css">&#125;</span></span><br><span class="line"><span class="language-css"><span class="selector-class">.el</span><span class="selector-class">.animating</span> &#123;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transition</span>:--circle-radius <span class="number">1s</span>,--circle-color <span class="number">1s</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attr">--circle-radius</span>:<span class="number">300</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attr">--circle-color</span>:transparent;</span></span><br><span class="line"><span class="language-css">&#125;</span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;el&quot;</span> <span class="attr">id</span>=<span class="string">&quot;el&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"><span class="meta"></span></span></span><br><span class="line"><span class="meta"><span class="language-javascript"> &#x27;use strict&#x27;</span> </span></span><br><span class="line"><span class="language-javascript"> <span class="variable constant_">CSS</span>.<span class="property">paintWorklet</span>.<span class="title function_">addModule</span>(<span class="string">&#x27;registerPaint.js&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript"> el.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, e = &gt;&#123;</span></span><br><span class="line"><span class="language-javascript"> el.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&#x27;animating&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript"> el.<span class="property">attributeStyleMap</span>.<span class="title function_">set</span>(<span class="string">&#x27;--circle-x&#x27;</span>, e.<span class="property">offsetX</span>);</span></span><br><span class="line"><span class="language-javascript"> el.<span class="property">attributeStyleMap</span>.<span class="title function_">set</span>(<span class="string">&#x27;--circle-y&#x27;</span>, e.<span class="property">offsetY</span>);</span></span><br><span class="line"><span class="language-javascript"> &#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
60
+
61
+ <p>所以我们有以下的效果：<br><img src="https://mmbiz.qpic.cn/mmbiz_gif/y0rsINPrlZzcOldnTEe1q0k6ibUNetJkQRI1xxcJAvtRkkCMkXBqibeX9egufyuM8E3tXJhCACqiaicDeXOrroT6PQ/640?wx_fmt=gif&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1" alt="null"></p>
62
+ <h2 id="CSS界的Babel-——-PostCSS"><a href="#CSS界的Babel-——-PostCSS" class="headerlink" title="CSS界的Babel —— PostCSS"></a><strong>CSS界的Babel —— PostCSS</strong></h2><blockquote>
63
+ <p>说到底CSS Houdini其实也只是JS IN CSS，并不是纯正的CSS，那么对于一些新的CSS属性，我们相用的话，真的还得等5年后吗？还有即便是有各种工具，但是像一些兼容性写法，厂商前缀，循环，原生CSS也没有，我们不是还得需要依赖CSS预处理器吗？<br>其实也不是，这时候我们可以利用CSS界的Babel —— PostCSS</p>
64
+ </blockquote>
65
+ <h3 id="PostCSS是什么？"><a href="#PostCSS是什么？" class="headerlink" title="PostCSS是什么？"></a>PostCSS是什么？</h3><p>简单来说PostCSS就是可以让开发者使用JS来处理CSS的处理器，它分了以下5大类功能：</p>
66
+ <h3 id="增强代码的可读性"><a href="#增强代码的可读性" class="headerlink" title="增强代码的可读性"></a>增强代码的可读性</h3><p>利用从 Can I Use 网站获取的数据为 CSS 规则添加特定厂商的前缀。Autoprefixer[5] 自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。<br>例如我们输入以下代码：<br> :fullscreen {}<br>那么就会输出：<br> :-webkit-:full-screen {}:-moz-:full-screen {}:full-screen {}</p>
67
+ <h3 id="将未来的-CSS-特性带到今天！"><a href="#将未来的-CSS-特性带到今天！" class="headerlink" title="将未来的 CSS 特性带到今天！"></a>将未来的 CSS 特性带到今天！</h3><p>PostCSS Preset Env[6] 帮你将现代 CSS 语法转换成大多数浏览器都能理解的东西，根据你的目标浏览器或运行时环境来确定你需要的 polyfills，基于 cssdb 实现[7]。<br>例如我们输入以下代码：<br> @custom-media –med (width &lt;&#x3D; 50rem);<br> @media (–med) { a { &amp;:hover { color: color-mod(black alpha(54%)); } } }<br>就会输出：<br> @media (max-width: 50rem) { a:hover { color: rgba(0, 0, 0, 0.54); } }</p>
68
+ <h3 id="终结全局-CSS"><a href="#终结全局-CSS" class="headerlink" title="终结全局 CSS"></a>终结全局 CSS</h3><p>CSS 模块[8] 就是说你永远不用担心命名太大众化而造成冲突太普通，只要用最有意义的名字就行了。<br>例如我们输入以下代码：<br> .name { color: gray;}<br>就会输出：<br> .Logo__name__SVK0g { color: gray;}</p>
69
+ <h3 id="避免-CSS-代码中的错误"><a href="#避免-CSS-代码中的错误" class="headerlink" title="避免 CSS 代码中的错误"></a>避免 CSS 代码中的错误</h3><p>通过使用 stylelint 强化一致性约定并避免样式表中的错误[9]，stylelint 是一个现代化 CSS 代码检查工具。它支持最新的 CSS 语法，包括类似 CSS 的语法，例如 SCSS 。<br>例如我们输入以下代码：<br> a { color: #d3;}<br>那么控制台会抛出错误：<br> app.css2:10 Invalid hex color</p>
70
+ <h3 id="强大的网格系统"><a href="#强大的网格系统" class="headerlink" title="强大的网格系统"></a>强大的网格系统</h3><p>LostGrid[10] 利用 calc() 和你所定义的分割方式来创建网格系统，无需传递大量参数。<br>例如我们输入以下代码：<br> div { lost-column: 1&#x2F;3 }<br>就会输出：</p>
71
+ <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line"> <span class="attribute">width</span>:<span class="built_in">calc</span>(<span class="number">99.9%</span> * <span class="number">1</span>/<span class="number">3</span> - (<span class="number">30px</span> - <span class="number">30px</span> * <span class="number">1</span>/<span class="number">3</span>));</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-pseudo">:nth-child</span>(<span class="number">1</span>n) &#123;</span><br><span class="line"> <span class="attribute">float</span><span class="selector-pseudo">:left</span>;</span><br><span class="line"> <span class="attribute">margin-right</span>:<span class="number">30px</span>;</span><br><span class="line"> <span class="attribute">clear</span>:none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-pseudo">:last-child</span> &#123;</span><br><span class="line"> <span class="attribute">margin-right</span>:<span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-pseudo">:nth-child</span>(<span class="number">3</span>n) &#123;</span><br><span class="line"> <span class="attribute">margin-right</span>:<span class="number">0</span>;</span><br><span class="line"> <span class="attribute">float</span><span class="selector-pseudo">:right</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-pseudo">:nth-child</span>(<span class="number">3</span>n + <span class="number">1</span>) &#123;</span><br><span class="line"> <span class="attribute">clear</span>:both;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
72
+
73
+ <h3 id="可窥探的未来-——-cssdb"><a href="#可窥探的未来-——-cssdb" class="headerlink" title="可窥探的未来 —— cssdb"></a>可窥探的未来 —— cssdb</h3><blockquote>
74
+ <p>cssdb是postcss-preset-env的实现基准，主要就是CSS的新功能功能及这些功能从提出到成为标准时所在的进程。<br>cssdb跟ecma一样，对新属性分了不同的进程，具体的进程如下：<br>1.Stage 0：脑袋风暴阶段。高度不稳定，可能会发生变化。2.Stage 1：实验阶段。也非常不稳定，可能会发生变化，但是该提案已得到W3C成员的认可。3.Stage 2：承认阶段。高度不稳定并且可能会发生变化，但是正在积极研究中。4.Stage3：拥抱阶段。稳定且变化不大，此功能可能会成为标准。5.Stage4：标准阶段。最终的解决方案，所有主流浏览器都支持。<br>这就是postcss-preset-env依赖的实现基准，那么如果我们想要在我们的代码里使用这些Stage，该怎么做呢？<br>以我的脚手架<code>ying-template</code>为例，我们来查看在webpack中的实际配置：<br>首先我们先安装postcss以及其相应的插件：<br> npm install postcss postcss-loader postcss-preset-env postcss-nesting –save-dev<br>然后我们在webpack的config配置module中输入以下配置：</p>
75
+ </blockquote>
76
+ <figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">module<span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line"> rules<span class="punctuation">:</span> <span class="punctuation">[</span><span class="punctuation">&#123;</span></span><br><span class="line"> test<span class="punctuation">:</span> /\.css$/<span class="punctuation">,</span></span><br><span class="line"> include<span class="punctuation">,</span></span><br><span class="line"> exclude<span class="punctuation">,</span></span><br><span class="line"> use<span class="punctuation">:</span> <span class="punctuation">[</span> <span class="comment">/* 你其它的loader */</span> &#x27;postcss-loader&#x27;<span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">&#125;</span><span class="punctuation">]</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>
77
+
78
+ <p>然后在根目录新建一个<code>postcss.config.js</code></p>
79
+ <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> postcssConfig = &#123;</span><br><span class="line"> <span class="attr">plugins</span>: &#123;</span><br><span class="line"> <span class="attr">precss</span>: &#123;&#125;,</span><br><span class="line"> <span class="string">&#x27;postcss-preset-env&#x27;</span>: &#123;</span><br><span class="line"> <span class="attr">browsers</span>: <span class="string">&#x27;last 2 versions&#x27;</span>, <span class="comment">// 浏览器兼容的版本</span></span><br><span class="line"> <span class="attr">stage</span>: <span class="number">3</span> <span class="comment">// 你用的属性所在的阶段</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="string">&#x27;postcss-nesting&#x27;</span>: &#123;&#125; <span class="comment">// 这里就是你所使用的插件</span></span><br><span class="line"> &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = postcssConfig</span><br></pre></td></tr></table></figure>
80
+
81
+ <p>这样就完成了，如果想看完整的配置，可以clone我的脚手架：<a target="_blank" rel="noopener" href="https://github.com/KRISACHAN/ying-template">https://github.com/KRISACHAN/ying-template</a><br>（这是个多页面的webpack4脚手架，可以使用ES6+语法，TypeScript，各类CSS处理器，ESLint以及单元测试等现代前端开发所需常用的东西，有兴趣的可以去看看。）<br>我们可以通过<a target="_blank" rel="noopener" href="https://preset-env.cssdb.org/playground%E8%BF%99%E4%B8%AA%E7%BD%91%E7%AB%99%E6%9D%A5%E6%9F%A5%E7%9C%8B%E5%85%B7%E4%BD%93%E7%9A%84%E7%BC%96%E8%AF%91%E7%BB%93%E6%9E%9C%E3%80%82">https://preset-env.cssdb.org/playground这个网站来查看具体的编译结果。</a><br>编译结果图如下：<br><img src="https://mmbiz.qpic.cn/mmbiz_png/y0rsINPrlZzcOldnTEe1q0k6ibUNetJkQffGMPmJqKI84JABHsZ0Xib2EmiaiammJ9amDpUUmvxj7Z8YL2LUuGk5BA/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" alt="null"><br>是不是非常神奇呢？</p>
82
+ <h2 id="后话"><a href="#后话" class="headerlink" title="后话"></a><strong>后话</strong></h2><p>随着前端工程的普及，某E浏览器的没落，CSS的发展可谓是一日千里，近日也有一些数学属性的提案在发起，以后会发展成什么样，没人可以知道。只是总的来说，CSS的未来是一片光明的。本文简单分享了一些现代化的CSS知识，通过这些知识，我们很容易就能写出完备且现代化的CSS代码，能够给创造出更多的效益，希望大家可以积极地用起这些知识，并对CSS可以有更多的思考以及想象。</p>
83
+ <h2 id="资料来源"><a href="#资料来源" class="headerlink" title="资料来源"></a><strong>资料来源</strong></h2><p>1.<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Archive/CSS32.http://oocss.org/3.http://getbem.com/4.http://smacss.com/5.https://sass-lang.com/6.http://lesscss.org/7.http://stylus-lang.com/8.https://blog.techbridge.cc/2017/05/23/css-houdini/9.https://www.smashingmagazine.com/2016/03/houdini-maybe-the-most-exciting-development-in-css-youve-never-heard-of/10.https://slides.iamvdo.me/waq19/fr/11.https://www.qed42.com/blog/building-powerful-custom-properties-CSS-houdini12.https://www.postcss.com.cn/13.https://cssdb.org/#staging-process14.https://s0dev0to.icopy.site/adrianbdesigns/postcss-preset-env-babel-for-css-12hp">https://developer.mozilla.org/zh-CN/docs/Archive/CSS32.http://oocss.org/3.http://getbem.com/4.http://smacss.com/5.https://sass-lang.com/6.http://lesscss.org/7.http://stylus-lang.com/8.https://blog.techbridge.cc/2017/05/23/css-houdini/9.https://www.smashingmagazine.com/2016/03/houdini-maybe-the-most-exciting-development-in-css-youve-never-heard-of/10.https://slides.iamvdo.me/waq19/fr/11.https://www.qed42.com/blog/building-powerful-custom-properties-CSS-houdini12.https://www.postcss.com.cn/13.https://cssdb.org/#staging-process14.https://s0dev0to.icopy.site/adrianbdesigns/postcss-preset-env-babel-for-css-12hp</a></p>
84
+ <h3 id="References"><a href="#References" class="headerlink" title="References"></a>References</h3><p><code>[1]</code> KRISACHAN: <em><a target="_blank" rel="noopener" href="https://github.com/KRISACHAN">https://github.com/KRISACHAN</a></em><br><code>[2]</code> Optional Chaining: <em><a target="_blank" rel="noopener" href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chaining">https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chaining</a></em><br><code>[3]</code> ying-template: <em><a target="_blank" rel="noopener" href="https://github.com/KRISACHAN/ying-template">https://github.com/KRISACHAN/ying-template</a></em><br><code>[4]</code> MDN: <em><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Archive/CSS3">https://developer.mozilla.org/zh-CN/docs/Archive/CSS3</a></em><br><code>[5]</code> Autoprefixer: <em><a target="_blank" rel="noopener" href="https://github.com/postcss/autoprefixer">https://github.com/postcss/autoprefixer</a></em><br><code>[6]</code> PostCSS Preset Env: <em><a target="_blank" rel="noopener" href="https://preset-env.cssdb.org/">https://preset-env.cssdb.org/</a></em><br><code>[7]</code> cssdb 实现: <em><a target="_blank" rel="noopener" href="https://cssdb.org/">https://cssdb.org/</a></em><br><code>[8]</code> CSS 模块: <em><a target="_blank" rel="noopener" href="https://github.com/css-modules/css-modules">https://github.com/css-modules/css-modules</a></em><br><code>[9]</code> stylelint 强化一致性约定并避免样式表中的错误: <em><a target="_blank" rel="noopener" href="http://stylelint.io/">http://stylelint.io/</a></em><br><code>[10]</code> LostGrid: <em><a target="_blank" rel="noopener" href="https://github.com/peterramsing/lost">https://github.com/peterramsing/lost</a></em></p>
85
+ <p><strong>推荐阅读</strong></p>
86
+ <p>（点击标题可跳转阅读）<br><a target="_blank" rel="noopener" href="http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&amp;mid=2651557548&amp;idx=1&amp;sn=c21424485a0dabbbdd47f2403651adb4&amp;chksm=8025596db752d07be9a88aa11d086309f50c6903b7adfb4b5962cc2152d274070d508c614a21&amp;scene=21#wechat_redirect">你可能不知道的 CSS 计数器</a><br><a target="_blank" rel="noopener" href="http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&amp;mid=2651557445&amp;idx=2&amp;sn=f6ac345977b8b808f7645ef51ba75640&amp;chksm=80255984b752d092c6c2dcb59768315b61cbe050a70e8e69f1b02974a8e6c3c6d93b396b985a&amp;scene=21#wechat_redirect">10 个 CSS 高频面试题，你都会吗？</a><br><a target="_blank" rel="noopener" href="http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&amp;mid=2651557345&amp;idx=2&amp;sn=f38e0f7f566c707f85e4894e651fb047&amp;chksm=80255a20b752d336b0039f98b582f5506395e3a75f42ea39ea4f0002292c2b56571a73c995f8&amp;scene=21#wechat_redirect">20 个让你效率更高的 CSS 代码技巧</a></p>
87
+ </div><iframe src="/donate/?AliPayQR=https://store.xuehuayu.cn/store/public/alipay_qr.jpg&amp;WeChatQR=https://store.xuehuayu.cn/store/public/wechat_qr.png&amp;UnionPayQR=null&amp;GitHub=null&amp;BTCQR=null&amp;BTCKEY=null&amp;PayPal=https://www.paypal.com/paypalme/OrdinaryPerson" style="overflow-x:hidden; overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;" frameborder="0" scrolling="no"></iframe><div><ul class="post-copyright"><li class="post-copyright-author"><strong>本文作者：</strong>雪花雨</li><li class="post-copyright-link"><strong>本文链接：</strong><a href="/article/55119.html">https://xuehuayu.cn/article/55119.html</a></li><li class="post-copyright-license"><strong>版权声明：</strong>① 标为原创的文章为博主原创，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接。② 转载文章来自网络，已标明出处，<a href="mailto:cainiaoblog@126.com">侵删</a>。</li></ul></div><br><div class="tags"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载</a></div><div class="post-nav"><a class="pre" href="/article/29829.html">深入理解浏览器的缓存机制</a><a class="next" href="/article/44426.html">7 个令人兴奋的 JavaScript 新特性</a></div><div id="vcomment"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.min.css"><script src="//cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.js"></script><script>const origin = window.location.origin
88
+ const serverURL = origin.includes('cainiaoblog') ? 'https://cmts.cainiaoblog.cn' : 'https://cmts.xuehuayu.cn'
89
+ const locale = {
90
+ placeholder: '请正确填写昵称和邮箱，方便接收回复通知~',
91
+ sofa: '沙发空缺中，还不快抢~',
92
+ };
93
+ Waline.init({
94
+ el: '#vcomment',
95
+ serverURL: serverURL,
96
+ pageSize: '20',
97
+ visitor: true, // 阅读量统计
98
+ requiredMeta: ['nick', 'mail'],
99
+ emoji: [
100
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo',
101
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/qq',
102
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-emoji',
103
+ ],
104
+ locale,
105
+ pageview: true
106
+ })
107
+ </script></div></div></div><div class="pure-u-1 pure-u-md-1-4 fixed-search hidden_mid_and_down"><div id="sidebar"><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/search.min.js"></script><div class="widget"><div class="widget-search"><input class="search" type="radio" name="search" value="baidu" id="baidu" checked="checked"/><label class="label" for="baidu" title="百度全站搜索">百度</label><input class="search" type="radio" name="search" value="google" id="google"/><label class="label" for="google" title="谷歌全站搜索">谷歌</label><input class="search" type="radio" name="search" value="self" id="self"/><label class="label" for="self" title="使用站内搜索">站内</label></div><div class="widget" id="search"><form class="search-form" action="//www.baidu.com/baidu" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="word" maxlength="30" placeholder="百度全站搜索"/><input type="hidden" name="si" value="xuehuayu.cn"/><input type="hidden" name="cl" value="3"/><input type="hidden" name="ct" value="2097152"/><input type="hidden" name="s" value="on"/><input class="search-submit" type="submit" value=""/></form></div></div><script>$('input[type=radio][name=search]').change(function() {
108
+ var val = $(this).val()
109
+ var self = '<div class="search-form"><input id="local-search-input" placeholder="站内搜索，首次慢" type="search" name="q" results="0"><input class="search-submit" type="submit" value=""/><div id="local-search-result"></div></div>'
110
+ var google = '<form class="search-form" action="//www.google.com/search" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="q" maxlength="30" placeholder="谷歌全站搜索"><input type="hidden" name="sitesearch" value="xuehuayu.cn"><input class="search-submit" type="submit" value=""/></form>'
111
+ var baidu = '<form class="search-form" action="//www.baidu.com/baidu" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="word" maxlength="30" placeholder="百度全站搜索"><input type="hidden" name="si" value="xuehuayu.cn"><input type="hidden" name="cl" value="3"><input type="hidden" name="ct" value="2097152"><input type="hidden" name="s" value="on"><input class="search-submit" type="submit" value=""/></form>'
112
+
113
+ if (val === 'self') {
114
+ $('#search').html(self)
115
+ var search_path = 'search.xml';
116
+ if (search_path.length == 0) {
117
+ search_path = 'search.xml';
118
+ }
119
+ var path = 'https://cdn.staticaly.com/gh/npljy/npljy.github.io/main/' + search_path;
120
+ searchFunc(path, 'local-search-input', 'local-search-result');
121
+ } else if (val === 'baidu') {
122
+ $('#search').html(baidu)
123
+ } else if (val === 'google') {
124
+ $('#search').html(google)
125
+ }
126
+ })</script><div class="widget widget-wxmp"><img alt="微信公众号" width="100%" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/mp-mini.jpg"/></div><div class="widget widget-categories"><div class="widget-title"><i class="fa fa-folder-o"> 分类</i></div><ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/CDN/">CDN</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/IDE/">IDE</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/git/">git</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/hexo/">hexo</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%85%AC%E5%85%B1%E8%8A%82%E6%97%A5/">公共节日</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%88%86%E4%BA%AB/">分享</a><span class="category-list-count">29</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a><span class="category-list-count">191</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E6%B5%8F%E8%A7%88%E5%99%A8/">浏览器</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E6%B5%8F%E8%A7%88%E5%99%A8/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/">网络协议</a><span class="category-list-count">1</span></li></ul></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%8D%9A%E5%AE%A2/">博客</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B7%A5%E5%85%B7/">工具</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B9%BF%E5%91%8A%E8%BF%87%E6%BB%A4/">广告过滤</a><span class="category-list-count">8</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B9%BF%E5%91%8A%E8%BF%87%E6%BB%A4/%E8%A7%86%E9%A2%91%E7%94%B5%E8%A7%86%E5%B0%8F%E8%AF%B4%E6%BC%AB%E7%94%BB%E8%B5%84%E8%AE%AF%E9%9F%B3%E4%B9%90/">视频电视小说漫画资讯音乐</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%AD%A3%E5%88%99/">正则</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%B5%8F%E8%A7%88%E5%99%A8/">浏览器</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E7%AE%97%E6%B3%95/">算法</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%B5%84%E8%AE%AF/">资讯</a><span class="category-list-count">16</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%BD%BB%E6%9D%BE%E4%B8%80%E5%88%BB/">轻松一刻</a><span class="category-list-count">1</span></li></ul></div><div class="widget widget-tags"><div class="widget-title"><i class="fa fa-star-o"> 标签</i></div><div class="tagcloud"><a href="/tags/%E5%8E%9F%E5%88%9B/" style="font-size: 15px;">原创</a> <a href="/tags/%E8%BD%AC%E8%BD%BD/" style="font-size: 15px;">转载</a> <a href="/tags/%E6%89%8B%E5%86%99/" style="font-size: 15px;">手写</a> <a href="/tags/%E7%96%AB%E6%83%85/" style="font-size: 15px;">疫情</a> <a href="/tags/%E5%A8%B1%E4%B9%90/" style="font-size: 15px;">娱乐</a></div></div><div class="widget widget-recent-posts"><div class="widget-title"><i class="fa fa-file-o"> 最近文章</i></div><ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/article/c5576490.html">面试准备</a></li><li class="post-list-item"><a class="post-list-link" href="/article/84c9ccd6.html">精读《SolidJS》</a></li><li class="post-list-item"><a class="post-list-link" href="/article/53803e6.html">git提交注释规范</a></li><li class="post-list-item"><a class="post-list-link" href="/article/a4145266.html">前端数组拍平flat一行代码</a></li><li class="post-list-item"><a class="post-list-link" href="/article/bedea419.html">一道前端this面试题</a></li><li class="post-list-item"><a class="post-list-link" href="/article/bf7e7421.html">git多账号配置</a></li></ul></div><div class="widget widget-links"><div class="widget-title"><i class="fa fa-external-link"> 友情链接</i></div><ul></ul><a href="https://github.com/npljy?utm_source=xuehuayu.cn" title="GitHub" target="_blank">GitHub</a><ul></ul><a href="https://laonongmin.online?utm_source=xuehuayu.cn" title="看看" target="_blank">看看</a><ul></ul><a href="https://cainiaoblog.cn?utm_source=xuehuayu.cn" title="菜鸟博客" target="_blank">菜鸟博客</a><ul></ul><a href="mailto:cainiaoblog@126.com" title="友链联系" target="_blank">友链联系</a></div></div></div><div class="pure-u-1 pure-u-md-3-4"><div id="footer"><div class="flex-block justify-center align-center flex-wrap"><a class="gxba-link" id="gxba" rel="nofollow" target="_blank" href="http://beian.miit.gov.cn/">京ICP备20007647号-2</a><a class="gaba-link" id="gaba-link" rel="nofollow" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802031264"><img class="nofancybox" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/gaba.png" alt=""/><span id="gaba">京公网安备 11010802031264号</span><span style="padding-right: 10px;"></span></a><span>Copyright © 2023 </span><a href="/." rel="nofollow">前端壹菜鸟. </a><script>(function(){
127
+ var cnb =window.location.origin.indexOf('cainiaoblog') !==-1
128
+ if (cnb) {
129
+ var gxba =document.getElementById('gxba')
130
+ var gaba =document.getElementById('gaba')
131
+ var gabaLink =document.getElementById('gaba-link')
132
+ gxba.innerText ='京ICP备20007647号-1'
133
+ gaba.innerText ='京公网安备 11010802031254号'
134
+ gabaLink.setAttribute('href','http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802031254')
135
+ }
136
+ })()</script></div><div class="flex-block justify-center align-center flex-wrap"><a rel="nofollow" target="_blank" href="https://v6.51.la/s/Guz3lwHCsVme9Cu"><div class="busuanzi_container" id="busuanzi_container"><span class="busuanzi_container_site_pv" id="busuanzi_container_site_pv">访问量：<span id="busuanzi_value_site_pv"><i class="fa fa-spinner"></i></span></span><span class="busuanzi_container_site_uv" id="busuanzi_container_site_uv">访客数：<span id="busuanzi_value_site_uv"><i class="fa fa-spinner"></i></span></span><span style="padding-right: 10px;"></span></div></a><a rel="nofollow" target="_blank" href="https://www.upyun.com/?utm_source=lianmeng&amp;utm_medium=referral"><span style="font-weight:bold;letter-spacing: 1px;">本网站由 </span><img class="nofancybox" height="32" style="vertical-align: middle" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/upy_logo.min.svg" alt=""/><span style="font-weight:bold;letter-spacing: 1px;">提供CDN加速/云存储服务</span></a><span style="padding-right: 10px;"></span><a rel="nofollow" style="font-size:18px;font-weight:bold;vertical-align: middle" target="_blank" title="注册就送代金券可直接使用" href="https://console.upyun.com/register/?invite=HyDsjZHIL">注册</a></div></div></div></div><a class="show" id="rocket" href="#top"></a><div class="darkmode-toggle">🌓</div><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/totop.min.js" async></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/dark.min.js" async></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/codeblock-resizer.min.js"></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/smartresize.min.js"></script></div></body></html>