{"id":9535,"date":"2020-10-10T23:56:09","date_gmt":"2020-10-10T15:56:09","guid":{"rendered":"https:\/\/www.zhangxinxu.com\/wordpress\/?p=9535"},"modified":"2025-05-27T10:43:16","modified_gmt":"2025-05-27T02:43:16","slug":"css-attr-polyfill","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2020\/10\/css-attr-polyfill\/","title":{"rendered":"Polyfill\u540a\u70b8\u5929\u7684CSS attr()\u65b0\u8bed\u6cd5"},"content":{"rendered":"<p>by <a href=\"https:\/\/www.zhangxinxu.com\/\">zhangxinxu<\/a> from <a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=9535\">https:\/\/www.zhangxinxu.com\/wordpress\/?p=9535<\/a><br \/>\n\u672c\u6587\u6b22\u8fce\u5206\u4eab\u4e0e\u805a\u5408\uff0c\u5168\u6587\u8f6c\u8f7d\u5c31\u4e0d\u5fc5\u4e86\uff0c\u5c0a\u91cd\u7248\u6743\uff0c\u5708\u5b50\u5c31\u8fd9\u4e48\u5927\uff0c\u82e5\u6025\u7528\u53ef\u4ee5\u8054\u7cfb\u6388\u6743\u3002<\/p>\n<p><script>window.wxShareImgUrl = 'https:\/\/www.zhangxinxu.com\/study\/image\/share\/202010-attr-polyfill.jpg';<\/script><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202010\/poly-cover.jpg\" width=\"484\" height=\"321\" alt=\"poly\u5c0f\u72d7 attr()\u51fd\u6570 CSS\" class=\"alignright clip thumb size-medium\" \/><\/p>\n<p><strong>\u66f4\u65b0\u4e8e2025\u5e745\u670827\u65e5<\/strong><\/p>\n<p>\u73b0\u5728Chrome\u6d4f\u89c8\u5668\u5df2\u7ecf\u539f\u751f\u652f\u6301<code>attr()<\/code>\u51fd\u6570\u4e86\uff0c\u8be6\u89c1\u6b64\u6587\uff1a\u201c<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=11709\">\u9707\u60ca\uff0c\u6709\u751f\u4e4b\u5e74\u5c45\u7136\u770b\u5230CSS attr()\u5168\u5c5e\u6027\u652f\u6301<\/a>\u201d<\/p>\n<h3>\u4e00\u3001CSS attr()\u6307\u5b9a\u503c\u7c7b\u578b\u7684\u65b0\u8bed\u6cd5\u7b80\u4ecb<\/h3>\n<p>\u4f20\u7edf\u7684<code>attr()<\/code>\u8bed\u6cd5\u53ea\u80fd\u8ba9HTML\u5c5e\u6027\u4f5c\u4e3a\u5b57\u7b26\u4e32\u4f7f\u7528\uff0c\u4e14\u53ea\u80fd\u4f7f\u7528\u5728\u4f2a\u5143\u7d20\u4e2d\uff0c\u4f8b\u5982\uff1a<\/p>\n<pre>&lt;span data-title=\"\u63d0\u793a\"&gt;\u6309\u94ae&lt;\/span&gt;<\/pre>\n<pre>span:hover::after {\r\n    content: attr(data-title);\r\n}<\/pre>\n<p>\u4f46\u662f\u5168\u65b0\u7684<code>attr()<\/code>\u8bed\u6cd5\u90a3\u53ef\u5c31\u5b8c\u5168\u4e0d\u5f97\u4e86\u4e86\uff0c\u53ef\u4ee5\u8ba9HTML\u5c5e\u6027\u503c\u8f6c\u6362\u6210\u4efb\u610f\u7684CSS\u6570\u636e\u7c7b\u578b\u3002<\/p>\n<p>\u4f8b\u5982\u5982\u4e0b\u6240\u793a\u7684HTML\u548cCSS\u8bed\u53e5\uff1a<\/p>\n<pre>&lt;button bgcolor=\"skyblue\" radius=\"4\"&gt;\u6309\u94ae&lt;\/button&gt;\r\n&lt;button bgcolor=\"#00000040\" radius=\"1rem\"&gt;\u6309\u94ae&lt;\/button&gt;\r\n&lt;button bgcolor=\"red\" radius=\"50%\"&gt;\u6309\u94ae&lt;\/button&gt;\r\n&lt;button bgcolor=\"orange\" radius=\"100% \/ 50%\" title=\"by zhangxinxu(.com)\"&gt;\u6309\u94ae&lt;\/button&gt;<\/pre>\n<pre>button {\r\n    background-color: attr(bgcolor color);\r\n    border-radius: attr(radius px, 4px);\r\n}<\/pre>\n<p>\u4e5f\u5c31\u662f\u51e0\u4e2a\u6309\u94ae\u7684\u6837\u5f0f\u4f7f\u7528\u4e86\u65b0\u7684<code>attr()<\/code>\u8bed\u6cd5\u8fdb\u884c\u8bbe\u7f6e\uff0c\u5e73\u5e38\u7684\u6309\u94ae\u989c\u8272\u3001\u5706\u89d2\u90fd\u662f\u5728CSS\u4e2d\u8bbe\u5b9a\u597d\u7684\uff0c\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\u5219\u4e0d\u4e00\u6837\uff0c\u989c\u8272\u548c\u5706\u89d2\u5168\u90e8\u90fd\u662f\u5916\u90e8\u7684HTML\u5c5e\u6027\u63a7\u5236\u7684\u3002<\/p>\n<p>\u7406\u8bba\u4e0a\uff0c\u4e0a\u9762\u7684\u4ee3\u7801\u4f1a\u6709\u5982\u4e0b\u56fe\u6240\u793a\u7684\u6548\u679c\u3002<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202010\/8-10_attr-button.png\" loading=\"lazy\" width=\"235\" height=\"141\" alt=\"attr()\u65b0\u8bed\u6cd5\u4e0b\u7684\u6309\u94ae\u7406\u8bba\u6548\u679c\"><\/p>\n<p>\u53ef\u4ee5\u770b\u51fa\uff0c\u5982\u679c\u6d4f\u89c8\u5668\u652f\u6301\u4e86<code>attr()<\/code>\u51fd\u6570\u7684\u503c\u7c7b\u578b\u65b0\u8bed\u6cd5\uff0c\u90a3\u4e48\u6211\u4eec\u65e5\u5e38\u7684\u7ec4\u4ef6\u5f00\u53d1\u5c31\u4f1a\u8fce\u6765\u5de8\u5927\u7684\u98a0\u8986\uff0c\u8bb8\u591a\u7ec4\u4ef6\u7684\u63a5\u53e3\u53ef\u4ee5\u76f4\u63a5\u4ea4\u7ed9CSS\u5b8c\u6210\uff0c\u4ee5\u53ca\u6211\u4eec\u7684\u5f00\u53d1\u4f1a\u66f4\u7075\u6d3b\uff0c\u53ef\u4ee5\u8282\u7701\u5927\u91cf\u7684CSS\u4ee3\u7801\u548c\u4e66\u5199CSS\u7684\u65f6\u95f4\uff0c\u4f8b\u5982\uff1a<\/p>\n<pre>[ml] { margin-left: attr(ml px, 0); }\r\n[mt] { margin-top: attr(ml px, 0); }\r\n[mr] { margin-right: attr(mr px, 0); }\r\n[mb] { margin-bottom: attr(mb px, 0); }\r\n[pl] { padding-left: attr(pl px, 0); }\r\n[pt] { padding-top: attr(pt px, 0); }\r\n[pr] { padding-right: attr(pr px, 0); }\r\n[pb] { padding-bottom: attr(pb px, 0); }<\/pre>\n<p>\u90a3\u4e48\u5143\u7d20\u7684<code>margin<\/code>\u548c<code>padding<\/code>\u8bbe\u7f6e\u5c31\u4e0d\u9700\u8981\u4e13\u95e8\u5199\u5728CSS\u6837\u5f0f\u4e2d\uff0c\u76f4\u63a5\u5728HTML\u4e2d\u8bbe\u7f6e\u5373\u53ef\uff0c\u652f\u6301\u4efb\u610f\u7684<code>margin<\/code>\u548c<code>padding<\/code>\u5927\u5c0f\uff0c\u4f8b\u5982\uff1a<\/p>\n<pre>&lt;div mt=\"10\"&gt;\u4e0a\u95f4\u8ddd10px&lt;\/div&gt;<\/pre>\n<p>\u5594\u5662\uff0c\u770b\u4e0a\u53bb\u5f88\u5389\u5bb3\u54e6\uff0cHTML\u548cCSS\u4f1a\u4e00\u4e0b\u5b50\u53d8\u5f97\u975e\u5e38\u7075\u6d3b\u4e0e\u9ad8\u6548\u3002<\/p>\n<p>\u53ea\u53ef\u60dc\uff0c<code>attr()<\/code>\u51fd\u6570\u7684\u65b0\u8bed\u6cd5\u76ee\u524d\u6ca1\u6709\u4efb\u4f55\u6d4f\u89c8\u5668\u652f\u6301\uff0c\u800c\u4e14\u5728\u6211\u770b\u6765\u5f88\u957f\u4e00\u6bb5\u65f6\u95f4\u6d4f\u89c8\u5668\u90fd\u4e0d\u4f1a\u652f\u6301\uff0c\u5b89\u5168\u3001\u6027\u80fd\u7b49\u65b9\u9762\u7684\u5f71\u54cd\u592a\u6df1\u8fdc\u4e86\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202010\/2020-10-10_222846.png\" width=\"819\" height=\"334\" alt=\"attr()\u65b0\u8bed\u6cd5\u517c\u5bb9\u6027\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u4e0d\u6b7b\u5fc3\u7684\u6211\u5c31\u7422\u78e8\u7740\u6709\u6ca1\u6709\u4ec0\u4e48\u529e\u6cd5\u8ba9\u6d4f\u89c8\u5668\u53ef\u4ee5\u652f\u6301CSS <code>attr()<\/code>\u51fd\u6570\u7684\u8fd9\u4e2a\u65b0\u8bed\u6cd5\u5462\uff1f<\/p>\n<p>\u7136\u540e\u60f3\u5230\u4e86\u53ef\u4ee5\u501f\u52a9CSS\u53d8\u91cf\u4f5c\u4e3a\u4fe1\u4f7f\u5b9e\u73b0Polyfill\u5b9e\u73b0\u3002<\/p>\n<h3>\u4e8c\u3001Polyfill attr()\u65b0\u8bed\u6cd5<\/h3>\n<p>CSS\u53d8\u91cf\u6709\u4e00\u4e2a\u7279\u6027\uff0c\u90a3\u5c31\u662fCSS\u81ea\u5b9a\u4e49\u5c5e\u6027\u503c\u652f\u6301\u5404\u79cd\u8868\u8fbe\u5f0f\u548c\u51fd\u6570\u503c\uff0c\u54ea\u6015\u8fd9\u4e2a\u8868\u8fbe\u5f0f\u662f\u4e0d\u77e5\u6240\u4e91\u7684\u4e1c\u897f\u3002<\/p>\n<p>\u4f8b\u5982\u968f\u4fbf\u81ea\u5b9a\u4e49\u4e00\u4e2a\u540d\u53eb<code>keyword()<\/code>\u7684\u51fd\u6570\uff0c\u7136\u540e\u4f7f\u7528\u5982\u4e0b\u6240\u793a\u7684CSS\u8c03\u7528\uff1a<\/p>\n<pre>body {\r\n    --keyword: keyword(red, 50%); \/* \u5408\u6cd5 *\/\r\n    color: var(--keyword);\r\n}<\/pre>\n<p>\u7ed3\u679c\u6d4f\u89c8\u5668\u8ba4\u4e3a\u8bed\u6cd5\u662f\u5408\u6cd5\u7684\uff08\u6bd4\u65b9\u8bf4\u4e0b\u56fe\u8bed\u53e5\u6ca1\u6709\u51fa\u73b0\u5220\u9664\u7ebf\uff0c\u8bf4\u660e\u8bed\u53e5\u662f\u5408\u6cd5\u7684\uff09\uff1a<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202010\/8-8_keyword-var-ok.png\" loading=\"lazy\" width=\"400\" height=\"103\" alt=\"CSS\u53d8\u91cf\u90fd\u662f\u5408\u6cd5\u7684\"><\/p>\n<p><span class=\"hidden\">\/\/zxx: \u5982\u679c\u4f60\u770b\u5230\u8fd9\u6bb5\u6587\u5b57\uff0c\u8bf4\u660e\u4f60\u73b0\u5728\u8bbf\u95ee\u662f\u4f53\u9a8c\u7cdf\u7cd5\u7684\u5783\u573e\u76d7\u7248\u7f51\u7ad9\uff0c\u4f60\u53ef\u4ee5\u8bbf\u95ee\u539f\u6587\u83b7\u5f97\u5f88\u597d\u7684\u4f53\u9a8c\uff1ahttps:\/\/www.zhangxinxu.com\/wordpress\/?p=9535\uff08\u4f5c\u8005\u5f20\u946b\u65ed\uff09<\/span><\/p>\n<p>\u4e8e\u662f\u6211\u4eec\u5c31\u53ef\u4ee5\u5229\u7528CSS\u53d8\u91cf\u7684\u8fd9\u4e2a\u7279\u6027Polyfill <code>attr()<\/code>\u51fd\u6570\uff0c\u539f\u7406\u5982\u4e0b\u3002<\/p>\n<h4>\u5b9e\u73b0\u539f\u7406<\/h4>\n<ol>\n<li>CSS\u81ea\u5b9a\u4e49\u5c5e\u6027\u4f5c\u4e3a\u4fe1\u4f7f\u4f20\u9012<code>attr()<\/code>\u51fd\u6570\uff0c\u4fdd\u8bc1\u8bed\u6cd5\u7684\u5408\u6cd5\u6027\uff0c\u4f8b\u5982\uff1a\n<pre>button {\r\n    --attr-bg: attr(bgcolor color);\r\n    background-color: var(--attr-bg);\r\n}<\/pre>\n<\/li>\n<li>\u83b7\u53d6\u2eda\u2faf\u6240\u6709\u7684\u5305\u542b<code>attr()<\/code>\u51fd\u6570\u7684\u2f83\u5b9a\u4e49\u5c5e\u6027\uff1b<\/li>\n<li>\u904d\u5386\u5e76\u89c2\u5bdf\u6240\u6709DOM\uff0c\u5982\u679c\u8bbe\u7f6e\u4e86\u5bf9\u5e94\u7684\u2f83\u5b9a\u4e49\u5c5e\u6027\uff0c\u5c06<code>attr()<\/code>\u8bed\u6cd5\u8f6c\u6362\u6210\u6d4f\u89c8\u5668\u8bc6\u522b\u7684\u5e38\u89c4\u81ea\u5b9a\u4e49\u5c5e\u6027\u8bed\u6cd5\u3002<\/li>\n<\/ol>\n<p>\u57fa\u4e8e\u4e0a\u8ff0\u539f\u7406\uff0c\u6211\u5199\u4e86\u4e2aJavaScript\u811a\u672c\uff0c\u5927\u5bb6\u53ea\u9700\u8981\u5728\u9875\u9762\u4e2d\u5f15\u5165\u4e0b\u9762\u8fd9\u6bb5HTML\u4ee3\u7801\uff0c\u5c31\u53ef\u4ee5\u7545\u5feb\u81ea\u5982\u5730\u4f7f\u7528<code>attr()<\/code>\u51fd\u6570\u7684\u65b0\u8bed\u6cd5\u4e86\u3002<\/p>\n<h4>\u5982\u4f55\u4f7f\u7528<\/h4>\n<p>\u9875\u9762\u5934\u90e8\u5f15\u5165\u4e0b\u9762\u4e0b\u9762\u8fd9\u4e2aJS\u6587\u4ef6\u3002<\/p>\n<pre>&lt;script src=\".\/css-attr.js\"&gt;&lt;\/script&gt;<\/pre>\n<p>css-attr.js\u8fd9\u4e2aJS\u6587\u4ef6\u4e0b\u8f7d\u53ef\u4ee5\u8bbf\u95ee\u8fd9\u91cc\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/study\/202008\/css-attr.js\" rel=\"noopener\" target=\"_blank\">css-attr.js<\/a><\/p>\n<p>\u7136\u540e\u6b63\u5e38\u4f7f\u7528CSS\u53d8\u91cf\u6765\u5b9e\u73b0<code>attr()<\/code>\u6548\u679c\u5373\u53ef\uff0c\u4f8b\u5982\u2014\u2014<\/p>\n<h4>Polyfill\u6d4b\u8bd5<\/h4>\n<p>\u5047\u8bbe\u5df2\u7ecf\u5f15\u5165\u4e86css-attr.js\uff0c\u7136\u540e\u9875\u9762\u4e2d\u6709\u5982\u4e0b\u6240\u793a\u7684HTML\u548cCSS\u4ee3\u7801\uff1a<\/p>\n<pre>&lt;button bgcolor=\"skyblue\" radius=\"4\"&gt;\u6309\u94ae&lt;\/button&gt;\r\n&lt;button bgcolor=\"#00000040\" radius=\"1rem\"&gt;\u6309\u94ae&lt;\/button&gt;\r\n&lt;button bgcolor=\"red\" radius=\"50%\"&gt;\u6309\u94ae&lt;\/button&gt;\r\n&lt;button bgcolor=\"orange\" radius=\"100% \/ 50%\"&gt;\u6309\u94ae&lt;\/button&gt;<\/pre>\n<pre>button {\r\n    border: 0;\r\n    padding: .5em 1em;\r\n}\r\nbutton {\r\n    --attr-bg: attr(bgcolor color);\r\n    background-color: var(--attr-bg);\r\n    --attr-radius: attr(radius px, 4px);\r\n    border-radius: var(--attr-radius);\r\n}<\/pre>\n<p>\u7ed3\u679c\u5c31\u6709\u5982\u4e0b\u56fe\u6240\u793a\u7684\u6548\u679c\uff0c\u6309\u94ae\u8868\u73b0\u51fa\u4e86\u7b26\u5408\u9884\u671f\u7684\u6548\u679c\u3002<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202010\/8-11_attr-button2.png\" loading=\"lazy\" width=\"406\" height=\"61\" alt=\"attr()\u51fd\u6570Polyfill\u540e\u7684\u751f\u6548\u793a\u610f\"><\/p>\n<p>\u540c\u65f6\uff0c\u5982\u679c\u6211\u4eec\u624b\u52a8\u4fee\u6539\u6309\u94ae\u5143\u7d20\u7684<code>bgcolor<\/code>\u6216<code>radius<\/code>\u5c5e\u6027\u503c\uff0c\u6309\u94ae\u7684\u6837\u5f0f\u4e5f\u4f1a\u540c\u6b65\u53d8\u5316\uff0c\u773c\u89c1\u4e3a\u5b9e\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a<a href=\"https:\/\/demo.cssworld.cn\/new\/8\/4-2.php\" class=\"a_link\" target=\"_blank\" rel=\"noopener\">attr() polyfill\u540e\u7684\u6309\u94aedemo<\/a><\/p>\n<p>\u5b9e\u9645\u5f00\u53d1\u4e2d\uff0c\u6309\u94ae\u5143\u7d20\u5f80\u5f80\u9700\u8981\u4e00\u4e2a\u9ed8\u8ba4\u7684\u4e3b\u6837\u5f0f\uff0c\u6b64\u65f6\u53ef\u4ee5\u901a\u8fc7\u5c5e\u6027\u9009\u62e9\u5668\u8fdb\u884c\u533a\u5206\uff0c\u4f8b\u5982\uff1a<\/p>\n<pre>button {\r\n    color: #fff;\r\n    background-color: deepskyblue;\r\n}\r\nbutton[bgcolor] {\r\n    --attr-bg: attr(bgcolor color);\r\n    background-color: var(--attr-bg);\r\n}\r\nbutton[radius] {\r\n    --attr-radius: attr(radius px, 4px);\r\n    border-radius: var(--attr-radius);\r\n}<\/pre>\n<p>\u8fd9\u6837\u81ea\u5b9a\u4e49\u7684HTML\u5c5e\u6027\u65e0\u8bba\u8bbe\u7f6e\u8fd8\u662f\u4e0d\u8bbe\u7f6e\u90fd\u4e0d\u4f1a\u5f71\u54cd\u6309\u94ae\u7684\u6b63\u5e38\u663e\u793a\u4e86\u3002<\/p>\n<h4>\u5176\u4ed6<\/h4>\n<p>\u7136\u540e\u8fd9\u91cc\u8fd8\u6709\u4e2a\u6d4b\u8bd5\u9875\u9762\uff0c\u98ce\u683c\u7c97\u72b7\u7684\u90a3\u79cd\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/study\/202008\/css-attr.html\" rel=\"noopener\" class=\"a_link\" target=\"_blank\">CSS attr() polyfill\u6d4b\u8bd5demo<\/a><\/p>\n<p>\u70b9\u51fb\u6309\u94ae\u4f1a\u4fee\u6539HTML\u5c5e\u6027\uff0c\u5927\u5bb6\u53ef\u4ee5\u770b\u5230\u6837\u5f0f\u540c\u6b65\u53d8\u5316\u4e86\uff0c\u5982\u4e0b\u56fe\u6240\u793a\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202010\/2020-10-10_230609.png\" width=\"738\" height=\"227\" alt=\"\u6309\u94ae\u989c\u8272\u53d8\u5316\" class=\"alignnone size-medium\" \/><\/p>\n<p><strong>\u8865\u5145\u4e8e2020-12-01<\/strong><\/p>\n<p>\u76f8\u5173JavaScript\u4ee3\u7801\u5df2\u7ecf\u5728gitee\u4e0a\u5f00\u6e90\u4e86\uff0c\u5730\u5740\u662f\uff1a<a href=\"https:\/\/gitee.com\/zhangxinxu\/css-attr-polyfill\" rel=\"noopener\" target=\"_blank\" class=\"a_link\">https:\/\/gitee.com\/zhangxinxu\/css-attr-polyfill<\/a><\/p>\n<p>\u4e5f\u6b22\u8fce\u5927\u5bb6\u5173\u6ce8\u6211\u7684gitee\u8d26\u53f7\u3002<\/p>\n<h3>\u4e09\u3001\u7ed3\u675f\u8bed<\/h3>\n<p>CSS <code>var()<\/code>\u51fd\u6570\u7684\u8fd9\u79cd\u4efb\u610f\u8868\u8fbe\u5f0f\u7279\u6027\u8fd8\u9002\u7528\u4e8eCSS\u81ea\u5b9a\u4e49\u8bed\u6cd5\u652f\u6301\u7684\u5b9e\u73b0\u4e0a\uff0c\u5173\u4e8e\u8fd9\u4e2a\uff0c\u6211\u4f1a\u4e0b\u4e00\u7bc7\u6587\u7ae0\u4e13\u95e8\u4ecb\u7ecd\uff0c\u656c\u8bf7\u671f\u5f85\u3002<\/p>\n<p>\u4ee5\u4e0a\u5c31\u662f\u81ea\u5df1\u7814\u7a76\u51fa\u6765\u7684\u4e00\u70b9\u5c0f\u4e1c\u897f\uff0c\u65e8\u5728\u629b\u7816\u5f15\u7389\uff0c\u6b22\u8fce\u4ea4\u6d41\uff01<\/p>\n<p>\u53e6\u5916\uff0cPolyfill\u5b9e\u73b0\u7684attr()\u8bed\u6cd5\u6bd4\u539f\u751f\u7684\u8bed\u6cd5\u8981\u66f4\u5f3a\u5927\uff0c\u56e0\u6b64\u652f\u6301\u590d\u5408\u7684HTML\u5c5e\u6027\u503c\uff0c\u4f8b\u5982\uff1a<\/p>\n<pre>&lt;div m=\"10px 20px 30px 40px\"&gt;\u4e0a\u95f4\u8ddd10px&lt;\/div&gt;<\/pre>\n<pre>[m] {\r\n    --m: attr(m);\r\n    margin: var(--m);\r\n}<\/pre>\n<p>\u53ef\u4ee5\u540c\u65f6\u6307\u5b9a\u591a\u4e2a\u5206\u4eab\u7684margin\u5c5e\u6027\u3002<\/p>\n<p>\u7136\u540e\u517c\u5bb9\u6027\u8fd9\u5757\uff0c\u51e1\u662f\u652f\u6301CSS\u53d8\u91cf\u7684\u6d4f\u89c8\u5668\u90fd\u652f\u6301\u8fd9\u91cc\u7684<code>attr()<\/code>\u65b0\u8bed\u6cd5\u3002<\/p>\n<p>\u597d\uff0c\u5c31\u8bf4\u8fd9\u4e48\u591a\uff0c<\/p>\n<p>\u5982\u679c\u4f60\u89c9\u5f97\u672c\u6587\u7684\u5185\u5bb9\u8fd8\u7b97\u6709\u8da3\uff0c\u6b22\u8fce\u5206\u4eab\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/emtion\/emoji\/1f618.svg\" width=\"20\" height=\"20\" align=\"absmiddle\"><\/p>\n<p>\u672c\u6587\u4e3a\u539f\u521b\u6587\u7ae0\uff0c\u6b22\u8fce\u5206\u4eab\uff0c\u52ff\u5168\u6587\u8f6c\u8f7d\uff0c\u5982\u679c\u5b9e\u5728\u559c\u6b22\uff0c\u53ef\u6536\u85cf\uff0c\u6c38\u4e0d\u8fc7\u671f\uff0c\u4e14\u4f1a\u53ca\u65f6\u66f4\u65b0\u77e5\u8bc6\u70b9\u53ca\u4fee\u6b63\u9519\u8bef\uff0c\u9605\u8bfb\u4f53\u9a8c\u4e5f\u66f4\u597d\u3002<br \/>\n\u672c\u6587\u5730\u5740\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=9535\">https:\/\/www.zhangxinxu.com\/wordpress\/?p=9535<\/a><\/p>\n<p>\uff08\u672c\u7bc7\u5b8c\uff09<\/p>\n","protected":false},"excerpt":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202010\/poly-cover.jpg\" width=\"161\" height=\"107\" alt=\"poly\u5c0f\u72d7 attr()\u51fd\u6570 CSS\" class=\"alignright size-medium\" \/><\/p>\n<p>CSS attr()\u65b0\u8bed\u6cd5\u53ef\u4ee5\u8ba9HTML\u5c5e\u6027\u4ee5\u4efb\u610f\u7684CSS\u5c5e\u6027\u503c\u7c7b\u578b\u5448\u73b0\uff0c\u8db3\u77e3\u5bf9\u73b0\u6709\u7684web\u5f00\u53d1\u4ea7\u751f\u98a0\u8986\uff0c\u4f46\u662f\u53ef\u60dc\u8fd9\u4e48\u597d\u7528\u7684\u4e1c\u897f\u76ee\u524d\u6ca1\u6709\u4efb\u4f55\u6d4f\u89c8\u5668\u652f\u6301\uff0c\u672c\u6587\u4f1a\u4ecb\u7ecd\u6211\u81ea\u5df1\u627e\u5230\u7684\u4e00\u79cdPolyfill\u65b9\u6cd5\uff0c\u53ef\u4ee5\u8ba9\u6240\u6709\u652f\u6301CSS\u53d8\u91cf\u7684\u6d4f\u89c8\u5668\u90fd\u53ef\u4ee5\u4f7f\u7528attr()\u65b0\u8bed\u6cd5\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,180],"tags":[1518,365,1561,1506,1052,1635],"_links":{"self":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/9535"}],"collection":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/comments?post=9535"}],"version-history":[{"count":2,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/9535\/revisions"}],"predecessor-version":[{"id":11712,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/9535\/revisions\/11712"}],"wp:attachment":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/media?parent=9535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/categories?post=9535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/tags?post=9535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}