2017年Css新特性

发表于 | 分类于
字数统计: 1,665 字 | 阅读时长 ≈ 7

  Js技术每年都在日新月异的更新，那么我们生活中常见的Css呢？是否在Css3之后，已无让你喜爱的特性出现？
  本文内容来自于互联网，仅收录一些个人喜欢的东西，在本博客供自我学习。

关于Css一些新特性，大漠老师在博客中写的十分详尽，欢迎大家去学习。

CSS3新特性-大漠老师

CSS Box Alignment

CSS Box Alignment主要是用来控制元素在容器中对齐方式的模块。
需要了解：felx布局，grid布局
grid布局详解–术语

CSS Shapes

打破矩形html元素，使元素可以呈现圆形、椭圆；
配合CSS中的clip-path一起使用，这样你可以让文本排版围绕着任何你想要的图形排列。
border-radius只能让外观看起来像一个园，但其实还是一个矩形盒模型，shaoe-outside改变盒模型，使其变为圆形盒模型；
同时circle也接收参数，但必须两种参数都有时才能生效。

1
2
3
circle( 60px at 30% 70% )  // 正确写法
circle( 60px )  // 无效写法
circle( at 30% 70% )  // 无效写法


1
2
3
4
5
.balloon {
    float: left;
    width: 429px;
    shape-outside: circle(50%);
}

CSS Shapes规范还提供了几个其他图形函数：

  • ellipse()：顾名思义，这个函数将创建一个随圆形状。可以配置半径和移动圆心坐标。和circle()函数不一样，ellipse()函数可以接受两个半径，第一个是水平方向半径，第二个是垂直方向半径。因此可以这样ellipse(100px 180px at 10% 20%)创建一个椭圆.
  • polygon()：这个函数功能更强大，能够创建更复杂的形状，比如三角形、六边形以及一些不规则的多边形。使用polygon()并不像使用circle()函数创建一个圆那么简单，但不需要过于担心，可以使用多边形转换器这样的工具可以很直观的创建出不规则的多边形形状.

Conditional CSS

Conditional CSS指的是CSS中的Conditional Rules模块。它提供了三种@rules：

  • @media
  • supports
  • viewport
    针对浏览器支持问题，可以用supports来进行兼容写法
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    @supports (property: value) {
      element {
        property: value;
      }
    }
    @supports(mix-blend-mode: overlay) {
      .artwork img {
        mix-blend-mode: overlay;
      }
    }
    @supports not (mix-blend-mode: overlay) {
      .artwork img {
        opacity: 0.5;
      }
    }

其中property: value是@supports用来判断的条件语块。如果浏览器支持property: value，将会返回true，也就是说浏览器将会渲染element {property:value}; 样式块，如果不支持，则会返回false，将不会渲染这里的样式。当然对于不支持条件语块，还可以通过 not()语块来执行：

支持 and 丨 or 丨 not

1
2
3
4
5
6
7
8
9
10
11
12
13
@supports ((shape-outside: ellipse()) and ((clip-path: ellipse()) or (-webkit-clip-path:ellipse()))) {
  .balloon {
    border: none;
    padding: 0;
    float: right;
    width: 640px;
    min-width: 640px;
    height: 427px;
    shape-outside: ellipse(33% 50% at 460px);
    -webkit-clip-path: ellipse(28% 50% at 460px);
    clip-path: ellipse(28% 50% at 460px);
  }
}

counter计数器

详细讲解
自己实践
CSS Counters其实就是一计数器，早期在CSS中计数器仅存在于ul和ol元素。如果要使用在div这样的元素上，只能通过list-style-image或者是元素的backgroud-image来实现。在CSS2.1的规范中介绍了一种新技术，允许开发人员使用伪类:after、:before或者伪元素::after、::before给任何元素创建自动递增计数器——类似于列表中的项目符号(list-style-type)。更神奇的是，可以给这些计数器设置独特样式，让其在外观上更靓丽著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/css3/css-counters.html © w3cplus.com

1
2
3
4
5
6
7
<ol>
  <li>AAA</li>
  <li>BBB</li>
  <li>CCC</li>
  <li>DDD</li>
  <li>EEE</li>
</ol>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
ol{
  list-style: none;
/* 里面的关键字可以任意更改，只要上下文对应，但不能为CSS预留关键字   */
  counter-reset: aaac;
  
  background: #222;
  color: #fff;
}
li::before{
/*   可以任意链接字符串 */
  content: counter(aaac, lower-alpha) "-" counter(aaac);
  counter-increment: aaac;
  color: red;
  margin-right: 0;
/*   firfox上宽度显示不一致 */
  width:30px;
  display: inline-block;
}

伪元素::first-letter

示例链接
::first-letter(:first-letter)伪元素生效，是需要一定的条件的,并且不支持特殊字符，例如常见的“ ？ ， 。 、等 ” first-letter支持before等伪元素；
字符前面 不能 有图片或者inline-table之类的元素存在
现在已知的：
支持：

  • inline-block;
  • block;
  • list-item;
  • table-caption;
  • table-cell;

不支持：

  • flex;
  • inlien;
  • table;
  • inline-table;
  • table-row;
    1
    2

CSS自定义属性（CSS变量）

CSS处理器中定义变量和JavaScript这些程序语言都不同，它有其独特的方式：
它使用 -- 来进行申明

1
2
3
4
:root {
    --primary: blue;
    --secondary: orange;
}

在调用变量的方式也是不同，CSS调用变量是采用var()函数：

1
2
3
h1{
    color: var(--primary);
}

unicode-range

示例链接
unicode-range的值正如名称所示，是unicode值，就是U+以及后面可以表示各种字符和文字的几个数字或字母，初始值为：U+0-10FFFF，也就是所有字符集.

1
2
3
4
5
6
/* 支持的值 */
unicode-range: U+26;               /* 单个字符编码 */
unicode-range: U+0-7F;
unicode-range: U+0025-00FF;        /* 字符编码区间 */
unicode-range: U+4??;              /* 通配符区间 */
unicode-range: U+0025-00FF, U+4??; /* 多个值 */

  • HTML中字符输出使用&#x配上charCode值；
  • 在JavaScript文件中为防止乱码转义，则是\u配上charCode值;
  • 而在CSS文件中，如CSS伪元素的content属性，直接使用\配上charCode值。
  • unicode-range是U+配上charCode值。

CSS动画路径

Motion Path

  • motion-path
  • motion-offset
  • motion-rptation
  • motion
    不过这几个属性将来会更名为offset-path(对应motion-path)、offset-distance（对应motion-offset）和offset(对应motion)。有关于这方面的介绍，可以看看《CSS Motion Path as of October 2016》

min-content

这个关键词可以给我们获取元素盒子的最大宽度（例如，图片或元素的宽度）

1
2
3
4
figure {
    width: min-content;
    margin: auto;
}

couter计数器

示例
CSS Counters其实就是一计数器，早期在CSS中计数器仅存在于ul和ol元素。如果要使用在div这样的元素上，只能通过list-style-image或者是元素的backgroud-image来实现。在CSS2.1的规范中介绍了一种新技术，允许开发人员使用伪类:after、:before或者伪元素::after、::before给任何元素创建自动递增计数器——类似于列表中的项目符号(list-style-type)。更神奇的是，可以给这些计数器设置独特样式，让其在外观上更靓丽。

其他一些新特性

  • CSS混合模式
  • CSS滤镜
    例如：
  • background-blend-mode
  • -mix-blend-mode
  • filter
    CSS的element()函数，可以让你轻易克隆HTML中的任何一个元素