-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdocs__myblog__css__csshoudini.md.js
More file actions
1 lines (1 loc) · 7.7 KB
/
docs__myblog__css__csshoudini.md.js
File metadata and controls
1 lines (1 loc) · 7.7 KB
1
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[35],{"7zro":function(e,t,n){"use strict";n.r(t);var a=n("q1tI"),o=n.n(a),l=n("dEAq"),i=n("H1Ra"),r=o.a.memo((e=>{e.demos;return o.a.createElement(o.a.Fragment,null,o.a.createElement("div",{className:"markdown"},o.a.createElement("p",null,"\u5728\u73b0\u4eca\u7684 Web \u5f00\u53d1\u4e2d\uff0cJavaScript \u51e0\u4e4e\u5360\u636e\u6240\u6709\u7248\u9762\uff0c\u9664\u4e86\u63a7\u5236\u9875\u9762\u903b\u8f91\u4e0e\u64cd\u4f5c DOM \u5bf9\u8c61\u4ee5 \u5916\uff0c\u8fde CSS \u90fd\u76f4\u63a5\u5199\u5728 JavaScript \u91cc\u9762\u4e86\uff0c\u5c31\u7b97\u6d4f\u89c8\u5668\u90fd\u8fd8\u6c92\u6709\u5b9e\u73b0\u7684\u7279\u6027\uff0c\u603b\u4f1a\u6709\u4eba\u505a\u51fa\u5bf9\u5e94 \u7684 Polyfills\uff0c\u8ba9\u4f60\u5feb\u901f\u7684\u5c06\u65b0 Feature \u5e94\u7528\u5230 Production \u73af\u5883\u4e2d\uff0c\u66f4\u5225\u63d0\u6211\u4eec\u8fd8\u6709 Babel \u7b49\u5de5\u5177 \u5e2e\u5fd9\u8f6c\u8bd1\u3002"),o.a.createElement("p",null,"\u800c CSS \u5c31\u4e0d\u540c\u4e86\uff0c\u9664\u4e86\u5236\u5b9a CSS \u6807\u51c6\u89c4\u8303\u6240\u9700\u7684\u65f6\u95f4\u5916\uff0c\u5404\u5bb6\u6d4f\u89c8\u5668\u7684\u7248\u672c\u3001\u5b9e\u6218\u8fdb\u5ea6\u5dee\u5f02\u66f4\u662f \u65f7\u65e5\u6301\u4e45\uff0c\u9876\u591a\u5229\u7528 PostCSS\u3001Sass \u7b49\u5de5\u5177\u4f86\u5e2e\u6211\u5011\u8f6c\u8bd1\u51fa\u6d4f\u89c8\u5668\u80fd\u63a5\u53d7\u7684 CSS\u3002\u5f00\u53d1\u8005\u4eec\u80fd\u64cd \u4f5c\u7684\u5c31\u662f\u901a\u8fc7 JS \u53bb\u63a7\u5236 DOM \u4e0e CSSOM \u6765\u5f71\u54cd\u9875\u9762\u7684\u53d8\u5316\uff0c\u4f46\u662f\u5bf9\u4e8e\u63a5\u4e0b\u4f86\u7684 Layout\u3001Paint \u4e0e Composite \u5c31\u51e0\u4e4e\u6c92\u6709\u63a7\u5236\u6743\u4e86\u3002"),o.a.createElement("p",null,"\u4e3a\u4e86\u89e3\u6c7a\u4e0a\u8ff0\u95ee\u9898\uff0c\u4e3a\u4e86\u8ba9 CSS \u7684\u9b54\u529b\u4e0d\u518d\u6d4f\u89c8\u5668\u628a\u6301\uff0cHoudini \u5c31\u8bde\u751f\u4e86!( Houdini \u662f\u7f8e\u56fd\u7684 \u4f1f\u5927\u9b54\u672f\u5e08\uff0c\u64c5\u957f\u9003\u8131\u672f\uff0c\u5f88\u9002\u5408\u60f3\u5c06 CSS \u4ece\u6d4f\u89c8\u5668\u4e2d\u89e3\u653e\u7684\u6982\u5ff5) CSS Houdini \u662f\u7531\u4e00\u7fa4\u4f86\u81ea Mozilla, Apple, Opera, Microsoft, HP, Intel, IBM, Adobe \u4e0e Google \u7684\u5de5\u7a0b \u5e08\u6240\u7ec4\u6210\u7684\u5de5\u4f5c\u5c0f\u7ec4\uff0c\u5fd7\u5728\u5efa\u7acb\u4e00\u7cfb\u5217\u7684 API\uff0c\u8ba9\u5f00\u53d1\u8005\u80fd\u591f\u4ecb\u5165\u6d4f\u89c8\u5668\u7684 CSS engine"),o.a.createElement("img",{src:n("Nrje")}),o.a.createElement("h2",{id:"houdini-api"},o.a.createElement(l["AnchorLink"],{to:"#houdini-api","aria-hidden":"true",tabIndex:-1},o.a.createElement("span",{className:"icon icon-link"})),"Houdini API"),o.a.createElement("p",null,o.a.createElement("strong",null,"1. Parser API")),o.a.createElement("p",null,"\u8fd8\u6ca1\u6709\u88ab\u5199\u5165 \u89c4\u8303\uff0c\u6240\u4ee5\u4e0b\u9762\u6211\u8981\u8bf4\u7684\u5185\u5bb9 \u968f\u65f6\u90fd\u4f1a\u6709\u53d8\u5316\uff0c\u4f46\u662f\u5b83\u7684\u57fa \u672c\u601d\u60f3\u4e0d\u4f1a\u53d8:\u5141\u8bb8\u5f00\u53d1\u8005\u81ea \u7531\u6269\u5c55 CSS \u8bcd\u6cd5\u5206\u6790\u5668\uff0c\u5f15 \u5165\u65b0\u7684\u7ed3\u6784(constructs)\uff0c \u6bd4\u5982\u65b0\u7684\u5a92\u4f53\u89c4\u5219\u3001\u65b0\u7684\u4f2a \u7c7b\u3001\u5d4c\u5957\u3001@extends\u3001 @apply \u7b49\u7b49\u3002"),o.a.createElement("p",null,"\u53ea\u8981\u65b0\u7684\u8bcd\u6cd5\u5206\u6790\u5668\u77e5\u9053\u5982\u4f55 \u89e3\u6790\u8fd9\u4e9b\u65b0\u7ed3\u6784\uff0cCSSOM \u5c31 \u4e0d\u4f1a\u76f4\u63a5\u5ffd\u7565\u5b83\u4eec\uff0c\u800c\u662f\u628a\u8fd9 \u4e9b\u7ed3\u6784\u653e\u5230\u6b63\u786e\u7684\u5730\u65b9"),o.a.createElement("p",null,o.a.createElement("strong",null,"2.CSS Layout API")),o.a.createElement("p",null,"\u5141\u8bb8\u5f00\u53d1 \u8005\u53ef\u4ee5\u901a\u8fc7 CSS Layout API \u5b9e\u73b0\u81ea\u5df1\u7684\u5e03\u5c40\u6a21\u5757 (layout module)\uff0c\u8fd9\u91cc \u7684\u201c\u5e03\u5c40\u6a21\u5757\u201d\u6307\u7684\u662f display \u7684\u5c5e\u6027\u503c\u3002\u4e5f\u5c31\u662f \u8bf4\uff0c\u8fd9\u4e2a API \u5b9e\u73b0\u4ee5\u540e\uff0c \u5f00\u53d1\u8005\u9996\u6b21\u62e5\u6709\u4e86\u50cf CSS \u539f\u751f\u4ee3\u7801(\u6bd4\u5982 display:flex\u3001 display:table)\u90a3\u6837\u7684\u5e03 \u5c40\u80fd\u529b\u3002"),o.a.createElement("p",null,o.a.createElement("strong",null,"3.CSS Paint API")),o.a.createElement("p",null,"\u548c Layout API \u975e\u5e38\u76f8\u4f3c\u3002\u5b83\u63d0\u4f9b\u4e86\u4e00\u4e2a registerPaint \u65b9\u6cd5\uff0c\u64cd\u4f5c\u65b9\u5f0f\u548c registerLayout \u65b9\u6cd5\u4e5f\u5f88 Worklet \u76f8\u4f3c\u3002\u5f53\u60f3\u8981\u6784\u5efa\u4e00\u4e2a CSS \u56fe\u50cf\u7684\u65f6\u5019\uff0c\u5f00\u53d1\u8005 \u968f\u65f6\u53ef\u4ee5\u8c03\u7528 paint() \u51fd\u6570\uff0c\u4e5f\u53ef\u4ee5\u4f7f\u7528\u521a\u521a\u6ce8\u518c\u597d\u7684\u540d\u5b57"),o.a.createElement("h2",{id:"\u5b9e\u9645\u4f7f\u7528"},o.a.createElement(l["AnchorLink"],{to:"#\u5b9e\u9645\u4f7f\u7528","aria-hidden":"true",tabIndex:-1},o.a.createElement("span",{className:"icon icon-link"})),"\u5b9e\u9645\u4f7f\u7528"),o.a.createElement("p",null,"\u7528",o.a.createElement("code",null,"css houdini"),"\u7ed8\u5236\u4e00\u7247\u661f\u7a7a"),o.a.createElement(i["a"],{code:'<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title>CSS Houdini\u7ed8\u5236\u661f\u7a7a</title>\n <style type="text/css">\n body {\n margin: 0;\n color: #fff;\n font-size: 24px;\n background: #000;\n }\n body::before {\n content: \'\';\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n --star-density: 0.8;\n --star-opacity: 1;\n background-image: paint(yd-sky);\n animation: shine 1s linear alternate infinite;\n }\n @keyframes shine {\n from {\n --star-opacity: 1;\n }\n to {\n --star-opacity: 0.4;\n }\n }\n </style>\n </head>\n <body>\n <script>\n if (!CSS in window || !CSS.paintWorklet) {\n console.log(\'\u4e0d\u652f\u6301paintWorklet\');\n } else {\n CSS.paintWorklet.addModule(\'./sky.js\');\n }\n <\/script>\n </body>\n</html>',lang:"html"}),o.a.createElement("p",null,"sky.js"),o.a.createElement(i["a"],{code:"class StarSky {\n constructor() {}\n static get inputProperties() {\n return ['--star-density', '--star-opacity'];\n }\n paint(ctx, geom, properties) {\n const xMax = geom.width;\n const yMax = geom.height;\n console.log(xMax, yMax);\n ctx.fillRect(0, 0, xMax, yMax);\n let starDensity = properties.get('--star-density').toString() || 1;\n let starOpacity = properties.get('--star-opacity').toString() || 1;\n const stars = Math.round((xMax + yMax) * starDensity);\n for (let i = 0; i <= stars; i++) {\n const x = Math.floor(Math.random() * xMax + 1);\n const y = Math.floor(Math.random() * yMax + 1);\n const size = Math.floor(Math.random() * 2 + 1);\n const opacityOne = Math.floor(Math.random() * 9 + 1);\n const opacityTwo = Math.floor(Math.random() * 9 + 1);\n const opacity = +('.' + (opacityOne + opacityTwo)) * starOpacity;\n const hue = Math.floor(Math.random() * 360 + 1);\n ctx.fillStyle = `hsla(${hue},30%,80%,${opacity})`;\n ctx.fillRect(x, y, size, size);\n }\n }\n}\nregisterPaint('sky', StarSky);",lang:"js"})))}));t["default"]=e=>{var t=o.a.useContext(l["context"]),n=t.demos;return o.a.useEffect((()=>{var t;null!==e&&void 0!==e&&null!==(t=e.location)&&void 0!==t&&t.hash&&l["AnchorLink"].scrollToAnchor(decodeURIComponent(e.location.hash.slice(1)))}),[]),o.a.createElement(r,{demos:n})}},Nrje:function(e,t,n){e.exports=n.p+"static/houdini.aef0ae68.png"}}]);