css新一代特性

4 篇文章 0 订阅

前言:

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() 函数

  • 如果是普通屏,此时选择image-set中的@1x背景图像;
  • 如果是高清屏幕,此时选择image-set中的@2x背景图像
& .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': {}
  }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值