杂七杂八的部分css新特性记录2

之前写过一点点后来又看了一篇ppt You Might Not Need CSS Preprocessor 讲了一些关于当前预处理解决的痛点以及它们缺点并给出了使用原生css解决这些痛点的方法然而大部分方法都还只是标准甚至有的还是提案浏览器实现就更少了不过可以作为展望来期待一下美好的未来吧算是The Future of CSS

预处理器解决的痛点:

变量 (CSS Variables)
混合 (Mixins)
嵌套 (Nesting)
模块 (Modules)
其他: 选择器辅助方法, 颜色函数等 (Selector helpers, color functions)

预处理器的缺点:

额外配置 (Additional setup)
需要编译 (Compilation)
不够标准化的语法 (Not standardized syntax)
调试困难 (Hard debug)

然后文章告诉你这些痛点都有原生的解决办法具体的兼容性可以查看 caniuse或者MDN或者官方标准这些东西更新太快了不能保证写本文的时候的标准以后不会变

变量 (CSS Variables)

第一个变量: currentColor 用法很简单基本上所有现代浏览器都能用了

    div { 
      color: red; 
      border: 5px solid currentColor;
      box-shadow: 0 0 5px solid currentColor;
    }

更加通用的css变量 CSS Variables 标准

语法

    /* 定义变量 */
    --VAR_NAME: <declaration-value>;
    /* 使用 */
    var(--VAR_NAME)

使用

    :root {
        --main-color: #ff00ff;
    }

    body {
        color: var(--main-color);
    }

为啥 css变量要用--foo和var(foo)这样的语法呢而不用sass或者其他的类似$foo呢这里有篇文章 Let’s Talk about CSS Variables 相当早的文章关于制定这个语法的时候规则制定者们的一些思考

具体的css变量语法各个地方资料都很多这里就不多讲了

混合 (Mixins)

主要是@apply 这个语法和css变量的有点点相似 @apply 提案

    :root {
        --pink-schema: {
            color: #6A8759;
            background-color: #F64778;
        }
    }

    body{
        @apply --pink-schema;
    }

和这个功能相似的有个 @extend(继承) 提案

    .error {
      color: red;
      border: thick dotted red;
    }

    .serious-error {
      @extend .error;
      font-weight: bold;
    }

嵌套 (Nesting)

和各种预处理也没有大的区别 nesting 提案

基本语法

    ul {
      & > li {
        color: #000;

        & > ul { display: none; }

        &:hover {
          color: #f00;

          & > ul { display: block; }
        }
      }
    }

还有一个关键字 @nest 必须要结合&使用

    .foo {
      color: black;
      @nest body.loading & {
        opacity: 0.5;
      }
    }

相当于

    .foo {
      color: black;
    }
    body.loading .foo {
      opacity: 0.5;
    }

模块 (Modules)

这个所有浏览器应该都兼容了的早在ie5.5就可以用了

但是由于浏览器没有实现并行请求所有的子模块按顺序全部加载会阻塞其他请求所以这个语法虽然没有兼容性问题但是几乎没人用但是等到HTTP/2普及之后这个情况会有改观

    /* Formal syntax */
    @import [ <string> | <url> ] [<media-query-list>]?;

    /* example */
    @import url("print.css");
    @import "mobile.css" (max-width: 728px);

其他

:matches伪类

可以使用css选择器同时选择多个元素来自Selectors4 标准

    .nav:matches(.side,.top) .links:matches(:hover, :focus) {
        color: #BADA55;
    }

    /* 等同与 */
    .nav.side .links:hover,
    .nav.top  .links:hover,
    .nav.side .links:focus,
    .nav.top  .links:focus {
        color: #BADA55;
    }

@custom-selector

自定义选择器来自CSS Extensions 草案这个草案非常新鲜 9 February 2017才编辑过的

    @custom-selector :--text-inputs input[type="text"], input[type="password"];

    :--text-inputs.disabled,
    :--text-inputs[disabled] {
        opacity: 0.5
    }

这个功能是不是和:matches有点重复

@custom-media

自定义媒体查询这个语法和@custom-selector如出一辙 mediaqueries 草案

    @custom-media --tablet (min-width: 800px) and (max-width: 1024px);

    @media (--tablet){
        .custom-media-queries{
            background-color: red;
        }
    }

Color Function

是一个颜色的扩展类帮助设置一些颜色什么的 Color Function

    /* syntax */
    color( <color> <color-adjuster>* );

    /* example */
    color(
      red             /* from red */
      blackness(+25%) /* to 25% more black than red */
      blackness(+25%) /* to 50% more black than red */
      blackness(-50%) /* to red again */
      hue(+ 30deg)    /* to orange */
      hue(- 30deg)    /* to red again */
    );

现在这些特性肯定不能全部都用上的如果想用可以试一下这个 css next 相关的一些新css特性也可以再这里查到