Hi, I’m Front-end Picker, a writer who has just started writing. The first time in the article to send books, also do not know what process, do not spray!!

This is the second day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

preface

As a modern language, it should develop with the development of The Times. CSS has been vastly different from JAVA,Python and other languages since its inception.

But slowly CSS began to support many advanced ideas. Variables are a huge step forward. In other languages, variables are natural, but CSS has evolved so far. How variables are defined, in other languages, including type, variable name, and value. But the previous CSS was defined like this:

html {
 --myColor:red;
}

Copy the code

It is. @property is another big step forward for CSS.

compatibility

As an experimental property, I feel pretty good about having so much browser support! By the way: after three months of writing this article, the most I have seen in the comments section is to make fun of the compatibility of the properties I learned. I just want to say that our company only needs to support Chrome browser. And I’m sure other browser vendors will support it over time!!

@property

@ Property belongs to the CSS@ rule, which is part of the Houdini API

@ Property is mainly used for developers to customize properties. Using this, you can define the type of the property, default value, and whether it can be inherited.

How did we define variables in the past:

:root{
--myColor:red;
}
Copy the code

With @property we can define more details.

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: red;
}
Copy the code

Pay attention to

@property must define syntax and inherits, and is invalid if either is missing. The default value is optional.

syntax

The following attributes are mainly supported

  • length

  • number

  • percentage

  • length-percentage

  • color

  • image

  • url

  • integer

  • angle

  • time

  • resolution

  • transform-function

It also supports usage

  1. ‘|’ multi-type combination

    “< color > | < integer >” : so we can accept the color value or values.

  2. ‘+’

    ”
    +” : this will accept whitespace separated color values. red, blue”

  3. The ‘#’

    ”
    +” : this will accept whitespace separated color values. red blue”

usage

  @property --colorHover {
      syntax: "<color>";
      initial-value: green;
      inherits: false;
    }
    div {
      height: 100px;
      width: 100px;
      border: 1px solid #000;
    }
    div:hover {
      background-color: var(--colorHover);
    }
Copy the code

From the love of JS

JS provides ** css.registerProperty ()** for custom properties.

grammar

window.CSS.registerProperty({
  required DOMString name;
        DOMString syntax= "*";
  required boolean  inherits;
        DOMString initialValue;
});
Copy the code

Example:

window.CSS.registerProperty({
  name: '--my-color',
  syntax: '<color>',
  inherits: false,
  initialValue: '#c0ffee',
});
Copy the code

usage

  <style>
    div {
      height: 100px;
      width: 100px;
      border: 1px solid # 000;
    }
    div:hover {
      background-color: var(--colorHover);
    }
  </style>


  <script>
    CSS.registerProperty({
      name: "--colorHover",
      syntax: "<color>",
      inherits: false,
      initialValue: "red"}); </script>Copy the code

Reviews get a book

Rule: feel free to comment in the comments section

Deadline: Depending on the mood, haha

Send what

Originally, I wanted to send a new world of CSS for Zhang Dahao, but I felt that there were not many people, so I gave up.

Finally, I chose a book by Vue, which was published by Peking University Press. I think the quality is ok. And I know the author.

Vue.js family bucket zero basic entry to advanced project combat

The author is Xu Zhaoxing, a university professor from whom I learned a lot about WEB development. This book focuses on technology, VUE buckets, and plugins around VUE, as well as cross-domain issues and on-line deployment. I think it’s all right.

In order to guarantee that the certificate is genuine, I will buy it on JINGdong,

Because I bought it at my own expense, SO I still want to really send it out, because nuggets have no private message, it is difficult to find someone, you can add my wechat and other results!

WeChat link