其他分享
首页 > 其他分享> > css新一代特性

css新一代特性

作者:互联网

前言:

sass和Less等css预处理器,已经被前端工程师们应用了好多年了,其中很多变量、函数、嵌套等规则让我们写起css来非常高效。在新一代的css规范中,也慢慢加入了一些新特性,支持css的动态编写等。虽然目前浏览器支持度不是很好,但一定是未来的趋势~


文章目录


一、css新特性

1、支持变量var()

变量用--表示,用var()使用变量,区别于sass等,变量有不同的作用域。在:root伪类中设置变量,作用域为全局。
变量名称是区别大小写的。

 :root{
    --base-color: #333;
 }
 body {
   color: var(--base-color);
 }

局部作用域:

.hello {
  --base-color: red;
  color: var(--base-color);
 }

目前大部分浏览器均支持

2、自定义属性集

用定义变量的方式,自定义属性集,用@apply装饰器使用变量。参考sass中的@mixin用法

:root{
   --text-ellipsis: {  
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
   }
}
.demo {
   @apply --text-ellipsis;
}

经测试,目前chrome(87.0)不支持此特性

3、计算属性方法calc()

.demo{
  --font-size: 12px;
  font-size: calc(var(--font-size) * 2);
  width: calc(100% - 30px);
  height: calc(100vh - 20px);
}

浏览器支持良好

4、语义化的媒体查询@custom-media

@custom-media --my-screen (width >= 375px) and (width <= 420px);
@media (--my-screen) {
   .content {
        background: blue;
    }
}

经测试,目前chrome(87.0)不支持此特性

5、嵌套写法&

<div class="demo">
    <p class="title">这是一段标题</p>
</div>

直接子元素:& 和子元素之间要有空格

.demo {
	& .title {
		height: 50px;
	}
}

6、 image-set() 函数

& .content {
    height: calc(100vh - 20px);
    background-image: image-set(url(../assets/bg@1x.png) 1x,
                                url(../assets/bg@2x.png) 2x,
                                url(../assets/bg@3x.png) 600dpi);
  }

在手机上验证居然无效,很奇怪

7、color() 函数

通过color函数来修改颜色,改变透明度、灰度等。更多参考:官方介绍

background-color: color(yellowgreen alpha(-10%));

二、在vue-cli4中使用

PostCSS是使用NodeJs编写的css处理工具,实际上postcss只是工具的骨架,其丰富的插件使其变得强大。是使用 javascript 插件转换 CSS 的后处理器
postcss-cssnext 是一个 CSStranspiler,允许你使用最新的 CSS 语法。cssnext 把新 CSS 规范转换成兼容性更强的 CSS,所以不需要等待各种浏览器的支持。

安装插件依赖包来支持。

 npm i postcss-cssnext --save-dev
 npm i postcss-import --save-dev
 npm i postcss-loader --save-dev

注意:postcss-cssnext本身包含了 autoprefixer 插件~

在.postcssrc.js中配置

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: [   // 支持的浏览器
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'ff > 31',
        'ie >= 8'
      ]
    },
    'postcss-cssnext': {}
  }
}

标签:变量,--,image,特性,新一代,color,postcss,css
来源: https://blog.csdn.net/qq_36131788/article/details/112320700