zoukankan      html  css  js  c++  java
  • CSS变量和浏览器前缀

    一、CSS变量

      CSS变量是CSS的新特性,大多数浏览器都实现了这个功能,使用CSS变量有利代码复用,而且当我们修改变量值时,所有引用该变量的属性都会发生改变。

      

      定义变量后可以有两种使用方法,第一种时var(var_name),第二种时var(var_name,defaultvalue);当变量不存在时使用默认值。

    二、浏览器前缀

      实现浏览器前缀可以让我们使用新的属性,且不行影响该属性成为标准后的效果。不同的浏览器的前缀不一样。

    .container { display: -webkit-box; 
            display
    : -ms-flexbox;
           display: -webkit-flex;
    display
    : flex;
    }

      手动添加浏览器前缀是件很麻烦的事,我们可以通过webpack使用postcss的loader来完成自动添加前缀的工作,也可以在https://autoprefixer.github.io/上直接进行转换。

      一些属性在某些浏览器上根本不支持,为了不影响用户体验,我们需要使用support queries.

    @supports (display: grid) {
         .container { display: grid; }
    }

      当浏览器支持这个特性的时候,才会执行下面括号中的样式。  

    三、polyfills  

      使用浏览器前缀是为了在旧的浏览器上使用新特性,Support Queries是一种备用方法,而polyfills可让我们在就浏览器中使用新浏览器才支持的特性。

      A Polyfillis a JavaScript Package which enables certain CSS Featuresin Browsers which would not support it otherwise.

     四、消除跨浏览器的不一致性

      

  • 相关阅读:
    模拟105 题解
    模拟104 题解
    模拟103 题解
    模拟102 题解
    python与 Ajax跨域请求
    Django--进阶--中间件的使用
    Django--权限组件
    python 最基本的的单例模型的实现及应用
    Django-数据库访问优化
    Create views of OpenCASCADE objects in the Debugger
  • 原文地址:https://www.cnblogs.com/yiluhuakai/p/10755588.html
Copyright © 2011-2022 走看看