Shulou(Shulou.com)06/03 Report--

This article mainly explains "what is CSS in JS and JS in CSS". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "what is CSS in JS and JS in CSS"?

CSS in JS

CSS in JS is a collection of ideas for solving css problems, not a specified library. As you can see from the literal meaning of CSS in JS, it is to write the css style in an JavaScript file without having to separate files such as .css, .less and so on. Putting css in js makes it easier for us to use js variables, modularization, and tree-shaking. It also solves some problems in css, such as making it easier to solve state-based styles, making it easier to trace dependencies, and generating unique selectors to lock scope. Although CSS in JS is not a very new technology, its popularity in China is not high. Because both Vue and Angular have their own set of schemes for defining styles, and React itself does not care how users define the styles of components, CSS in JS is relatively hot in the React community.

So far, there are many third-party libraries that implement CSS in JS: click here. Such as JSS, styled-components and so on. We are not going to repeat it here (the related links are below). The focus of this article is JS in CSS??.

What is JS in CSS?

When we mention CSS in JS above, we write CSS in JavaScript, so JS in CSS we can infer that we can use JavaScript script in CSS, as shown below. You can write the functionality of Paint API in CSS. You can also visit: ctx,geom. We can even write our own css custom properties and so on. The implementation of these functions is based on CSS Houdini.

El {--color: cyan;-multiplier: 0.24;-- pad: 30;-- slant: 20;-- background-canvas: (ctx, geom) = > {let multiplier = var (--multiplier); let c = `var (--color) `; let pad = var (--pad); let slant = var (--slant); ctx.moveTo (0,0) Ctx.lineTo (pad + (geom.width-slant-pad) * multiplier, 0); ctx.lineTo (pad + (geom.width-slant-pad) * multiplier + slant, geom.height); ctx.lineTo (0, geom.height); ctx.fillStyle = c; ctx.fill ();}; background: paint (background-canvas); transition:-- multiplier .4s;} .el: hover {--multiplier: 1;}

Click here for the above online demo

What problem did Houdini solve?

Comparison of standard-setting process between CSS and JS

In today's Web development, JavaScript accounts for almost most of the project code. We can use ES 2020, ES2021, or even new features in the proposal (such as Decorator) in project development, and even if the browser does not yet support it, we can write Polyfill or use tools such as Babel for translation, so that we can apply the latest features to the production environment (as shown in the following figure).

CSS is different. In addition to the time required to develop CSS standards and specifications, the versions and actual progress of different browsers vary for a long time (as shown in the following figure). At most, we can use PostCSS, Sass and other tools to help us translate CSS acceptable to browsers. What developers can do is to control DOM and CSSOM through JS to influence page changes, but they have little control over the next Layout, Paint and Composite. In order to solve the above problems, in order to make the magic of CSS no longer limited by browsers, Houdini was born.

CSS Polyfill

We mentioned above that the features in the JavaScript proposal can be written in Polyfill, and it only takes a short time to put the new features into the production environment. At this point, the first thought that comes to mind is CSS Polyfill. As long as CSS's Polyfill is strong enough, CSS may be able to grow as fast as JavaScript. Sadly, writing CSS Polyfill is extraordinarily difficult, and in most cases it cannot be done without destroying performance. This is because JavaScript is a dynamic scripting language. It brings great extensibility, and because of this, we can easily use JavaScript to make JavaScript's Polyfill. But CSS is not dynamic, and in some scenarios, we can convert one form of CSS into another at compile time (such as PostCSS). If your Polyfill depends on the DOM structure or the layout, positioning, etc., of an element, then our Polyfill cannot be executed at compile time and needs to be run in the browser. Unfortunately, it is not easy to implement this scheme in a browser.

As shown in the image above, it is the whole process of getting HTML from the browser to rendering on the screen. We can see that only the part with color (pink, blue) is the link that JavaScript can control. First of all, we have no control over the process that browsers parse HTML and CSS and convert them into DOM and CSSOM, and there is nothing we can do about Cascade,Layout,Paint,Composite. The only thing we can completely control in the whole process is DOM, and the CSSOM is partially controllable.

As mentioned in the CSS Houdini draft, this level of exposure is uncertain, compatibility is unstable, and there is a lack of support for key features. For example, CSSOM in the browser does not tell us how it handles cross-domain stylesheets, and it does not parse CSS statements that the browser cannot parse, that is to say, if we want to use CSS polyfill to get the browser to support attributes that it does not yet support, we can't do it in the CSSOM section, we can only iterate through the DOM, find or tag Get the CSS style, parse, rewrite, and finally add it back to the DOM tree. Embarrassingly, the DOM tree is completely refreshed, resulting in the re-rendering of the page (as shown below).

Even so, some people may say: "in addition to this method, we have no choice, let alone will not have a great impact on the performance of the site." Well, for some websites, it is like this. But what if our Polyfill needs to be on interactive pages? For example, scroll,resize,mousemove,keyup and so on, these events can be triggered at any time, which means that the page will be re-rendered at any time, the interaction will not be as silky as the original, or even cause the page to crash, and the experience for the user is extremely bad.

To sum up, if we want browsers to parse styles that they don't know (lower-version browsers use grid layouts), but we can't get involved in the rendering process, we can only update DOM manually, which will cause a lot of problems, and Houdini is dedicated to solving them.

Houdini API

Houdini is a set of underlying API that exposes various parts of the CSS engine, and shows the new API corresponding to each link as shown in the following figure (the gray part of the major browsers have not yet been implemented), thus enabling developers to extend CSS by adding the style and layout process of the browser rendering engine. Houdini is designed by a working group of engineers from Mozilla,Apple,Opera,Microsoft,HP,Intel and Google. They give developers direct access to the CSS object Model (CSSOM), allowing developers to write code that browsers can parse into CSS, creating new CSS features without waiting for them to be implemented locally in the browser.

Properties & Values API

Although there are CSS variables that allow developers to control attribute values, there is no way to constrain types or more stringent definitions, CSS Houdini's new API, we can extend css variables, we can define CSS variables' types, initial values, inheritance. It makes css variables more powerful and flexible.

Current status of CSS variables:

.dom {--my-color: green;-- my-color: url ('not-a-color'); / / it does not know the current variable type color: var (--my-color);}

Houdini provides two ways to register custom properties, one in js and one in css.

CSS.registerProperty ({name:'--my-prop', / / String Custom attribute name syntax:'', / / String how to parse the current attribute, that is, the attribute type, default * inherits: false, / / Boolean if it is true, the child node will inherit initialValue:'# c0ffee, / / String attribute point initial value})

We can also register in css, or we can achieve the above effect.

@ property-- my-prop {syntax:'; inherits: false; initial-value: # c0ffee;}

The most exciting feature in this API is to add animation to custom attributes, like this: transition:-- multiplier 0.4s. This is a function we introduced earlier about what is js in css that demo has used. We can also use + to make the syntax attribute support one or more types, or we can use | to split. More syntax attribute values:

Attribute value describes the length value numeric percentage length or percentage, calc will be the length and percentage of the expression color image URL integer angle time resolution conversion function ident

Worklets

Worklets is an extension of the rendering engine, which is similar to Web Workers in concept, but with several important differences:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Designed to be parallel, each Worklets must always have two or more instances, any one of which can be run when called

The scope is small and the API that cannot access the global scope is restricted (except for functions of Worklet)

The rendering engine will call them when needed, rather than manually.

Worklet is a JavaScript module that is added by calling the addModule method of worklet (which is a Promise). For example, registerLayout, registerPaint, registerAnimator, we all need to put them in Worklet.

/ / load a single await demoWorklet.addModule ('path/to/script.js'); / / load multiple worklet Promise.all at once ([demoWorklet1.addModule (' script1.js'), demoWorklet2.addModule ('script2.js'),]) .then (results = > {}) RegisterDemoWorklet ('name', class {/ / each Worklet can define different functions to use / / they will be called by the rendering engine process (arg) {return! arg;}} when needed)

Life cycle of Worklets

The life cycle of Worklet starts within the rendering engine

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

For JavaScript, the rendering engine starts the JavaScript main thread

Then he will start multiple worklet processes and can run them. These processes are ideally threads independent of the main thread so that they do not block the main thread (but they do not need to block)

Then load our browser's JavaScript in the main thread

The JavaScript calls worklet.addModule and loads a worklet asynchronously

After loading, load worklet into two or more available worklet processes

When needed, the rendering engine executes the Worklet by calling the appropriate handler from the loaded Worklet. This call can be directed against any parallel Worklet instance.

Typed OM

Typed OM is an extension of the existing CSSOM and implements Parsing API and Properties & Values API related features. It converts the CSS value to an object of meaningful type JavaScript, rather than a string like today. There may be a lot of performance overhead if we try to convert a value of a string type to a meaningful type and return it, so this API allows us to use the value of CSS more efficiently.

Now reading CSS values adds a new base class, CSSStyleValue, which has many subclasses that can more accurately describe the type of CSS value:

The subclass describes the CSSKeywordValueCSS keyword and other identifiers (such as inherit or grid) CSSPositionValue location information (xPowery) the object CSSUnitValue that represents the value attribute of the image is represented as a single value with a single unit (for example, 50px), or as a single value without a unit or as a percentage of CSSMathValue more complex values, such as calc,min and max. This includes the CSSTransformComponent list of subclasses CSSMathSum, CSSMathProduct, CSSMathMin, CSSMathMax, CSSMathNegate and CSSMathInvertCSSTransformValue made up of CSS transforms, including CSSTranslate, CSSRotate, CSSScale, CSSSkew, CSSSkewX, CSSSkewY, CSSPerspective and CSSMatrixComponent

There are two main ways to use Typed OM:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Set and get typed interline styles through attributeStyleMap

Get the complete Typed OM style of the element through computedStyleMap

Use attributeStyleMap to set and get

MyElement.attributeStyleMap.set ('font-size', CSS.em (2)); myElement.attributeStyleMap.get (' font-size'); / / CSSUnitValue {value: 2, unit: 'em'} myElement.attributeStyleMap.set (' opacity', CSS.number (.5)); myElement.attributeStyleMap.get ('opacity'); / / CSSUnitValue {value: 0.5, unit:' number'}

Use computedStyleMap

.foo {transform: translateX (1em) rotate (50deg) skewX (10deg); vertical-align: baseline; width: calc (100%-3em);} copy code const cs = document.querySelector ('.foo'). ComputedStyleMap (); cs.get ('vertical-align'); / / CSSKeywordValue {/ / value:' baseline', / /} cs.get ('width') / / CSSMathSum {/ / operator: 'sum', / / length: 2, / / values: CSSNumericArray {/ / 0: CSSUnitValue {value:-90, unit:' px'}, / / 1: CSSUnitValue {value: 100, unit: 'percent'}, / /} cs.get (' transform') / / CSSTransformValue {/ / is2d: true, / / length: 3, / / 0: CSSTranslate {/ / is2d: true, / / x: CSSUnitValue {value: 20, unit: 'px'}, / / y: CSSUnitValue {value: 0, unit:' px'}, / / z: CSSUnitValue {value: 0, unit: 'px'}, / / 1: CSSRotate {...} / / 2: CSSSkewX {...}, / /}

Layout API

Developers can use this API to implement their own layout algorithms, and we can use our custom layouts (like display:flex, display:table) like native css. On Masonry layout library we can see how much developers want to implement a variety of complex layouts, some of which cannot be done by CSS alone. Although these layouts can be refreshing and impressive, their page performance is often poor, and performance problems are obvious on some low-end devices.

CSS Layout API exposes a registerLayout method to the developer, accepts a layout name (layout name) as the property value to be used later in the CSS, and a JavaScript class that contains the layout logic.

My-div {display: layout (my-layout);} copy code / / layout-worklet.js registerLayout ('my-layout', class {static get inputProperties () {return ['-- foo'];} static get childrenInputProperties () {return ['--bar'];} async intrinsicSizes (children, edges, styleMap) {} async layout (children, edges, constraints, styleMap) {}}) Copy the code await CSS.layoutWorklet.addModule ('layout-worklet.js')

Painting API

We can use it in CSS background-image, we can use the Canvas 2d context, we can control the image according to the size of the element, and we can use custom attributes.

Await CSS.paintWorklet.addModule ('paint-worklet.js'); copy code registerPaint (' sample-paint', class {static get inputProperties () {return ['- foo'];} static get inputArguments () {return ['];} static get contextOptions () {return {alpha: true};} paint (ctx, size, props, args) {}})

Animation API

This API allows us to control Keyframe animation based on user input and in a non-blocking manner. You can also change the properties of a DOM element without causing the rendering engine to recalculate the attributes of the layout or style, such as transform, opacity, or scroll bar position (scroll offset). Animation API is used in a slightly different way than Paint API and Layout API. We also need to register worklet through a WorkletAnimation of new.

/ / animation-worklet.js registerAnimator ('sample-animator', class {constructor (options) {} animate (currentTime, effect) {effect.localTime = currentTime;}}); copy code await CSS.animationWorklet.addModule (' animation-worklet.js'); / / elements to add animation const elem = document.querySelector ('# my-elem'); const scrollSource = document.scrollingElement; const timeRange = 1000; const scrollTimeline = new ScrollTimeline ({scrollSource, timeRange,}) Const effectKeyframes = new KeyframeEffect (elem, / / Keyframes to be bound in the animation [{transform: 'scale (1)'}, {transform: 'scale (.25)'}, {transform: 'scale (1)'}], {duration: timeRange,},); new WorkletAnimation ('sample-animator', effectKeyframes, scrollTimeline, {},). Play ()

Parser API

Allows developers to freely extend the CSS lexical analyzer.

Resolution rules:

Const background = window.cssParse.rule ("background: green"); console.log (background.styleMap.get ("background") .value) / / "green" const styles = window.cssParse.ruleSet (".foo {background: green; margin: 5px;}") Console.log (styles.length) / / 5 console.log (styles [0] .styleMap.get ("margin-top") .value) / / 5 console.log (styles [0] .styleMap.get ("margin-top") .type) / / "px"

Parse CSS:

Const style = fetch ("style.css"). Then (response = > CSS.parseStylesheet (response.body)); style.then (console.log)

Font Metrics API

It will provide ways to measure the size of text elements rendered on the screen and will allow developers to control how text elements are rendered on the screen. These values are difficult or impossible to measure with the current functionality, so the API will make it easier for developers to create CSS features related to text and fonts. For example:

Flex layout: align-items baseline feature. You need to know the baseline location of the first element in each flex box.

Initials: you need to know the baseline height and maximum height of each letter, as well as the baseline length of the newline content.

Forward and backward of a single glyph.

Line wrapping: requires access to font data, all style input of text, and layout information (available paragraph lengths, etc.).

Each line boxes in the element requires a baseline. (line boxes stands for the line that contains many inline boxes)

Current progress of Houdini

The blueprint of Houdini

Knowing this, some developers may say, "I don't need these fancy technologies, and I can't bring benefits. I just want to simply write a few pages and do ordinary Web App, and I don't want to try to interfere with the browser's rendering process to achieve some experimental or cool features." If we think so, we might as well take a step back and think about it. Recall that recent projects used techniques to achieve page effects, and grid layout had to be abandoned when considering compatibility with older browsers. We want to control the process of rendering pages by browsers not just to show off skills, but also to help developers solve the following two problems:

Unify the behavior of major browsers

Like JavaScript, when introducing new features, we can quickly put them into production in the form of Polyfill.

Look back a few years later, when mainstream browsers fully support Houdini. We can use any CSS attribute on the browser as we like, and they all support it perfectly. Problems like today's grid layouts that are not friendly in older browsers, when we only need to install the corresponding Polyfill to solve similar problems.

At this point, I believe you have a deeper understanding of "what is CSS in JS and JS in CSS". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.