What is the difference between wxss and css3

Differences: 1. wxss cannot directly set the displayed background image through the background-image attribute in css3; 2. There are no window or document objects in the document flow in the applet. When using the css3 attribute position Please pay attention to setting the fixed attribute value for the base node.

The difference between wxss and css3

0 . wxss cannot be passed directly The background-image property in css3 is used to set the displayed background image.

For example, I write the following in wxss

background-image: url(imageB.png);

Console printing:

pages/index/index.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用<image/>标签。

1. There is no window or window in the document stream in the applet. document object, that is, you cannot use js libraries such as jquery and zepto to operate dom. This also causes the css3 attribute: position to require some attention when using it.

使用时应注意，为基础节点container设置fixed属性，否则position=absolute不会生效
/**app.wxss**/

.container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
  position: fixed;
}

2. When setting the wxss variable in wxml in the applet, the string type value should be returned (Note the nested relationship between " " and ' '''). As follows:

<view id=&#39;imageBtn&#39; style=&#39;display:{{imageBtn_display?"inherit":"none"}}&#39; catchtouchmove=&#39;touchRotateAction&#39;></view>

3. Others

support animation @keyframes, but it seems that the manufacturer prefix cannot be added.

Support transition transition.

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of What is the difference between wxss and css3. For more information, please follow other related articles on the PHP Chinese website!