CSS3中新出现的技术

CSS3中新出现的技术

CSS媒体查询

媒体查询 包含了一个媒体类型和至少一个使用如宽度、高度和颜色等媒体属性来限制样式表范围的表达式。CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的不同大小的设备。即响应式布局。

当媒体查询为真时，相关的样式表或样式规则就会按照正常的级联规则被应用。即使媒体查询返回假，<link>标签上带有媒体查询的样式表 仍将被下载 （只不过不会被应用）。

在不使用 not 或 only 操作符的情况下，媒体类型是可选的，默认为 all 。

媒体查询是大小写不敏感的。包含未知媒体类型的查询通常返回假。

逻辑操作符

操作符 not，and 和 only 可以用来构建复杂的媒体查询。

• and 操作符用来把多个 媒体属性 组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真。
• not 操作符用来对一条媒体查询的结果进行取反。not 关键字仅能应用于整个查询，而不能单独应用于一个独立的查询。
• only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式。

若使用了 not 或 only 操作符，必须明确指定一个媒体类型。

你也可以将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真。相当于 or 操作符。

大多数媒体属性带有“min-”和“max-”前缀，用于表达“小于等于”和“大于等于”。这避免了使用与HTML和XML冲突的“<”和“>”字符。如果你未向媒体属性指定一个值，并且该特性的实际值不为零，则该表达式被解析为真。

媒体属性

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

• orientation 方向
• portrait 竖屏
• landscape 横屏
• resolution 分辨率 指定输出设备的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每厘米（dpcm）的点数来表示。
• tv 电视媒体
• handheld 手持设备
• monochrome 黑白 指定了一个黑白（灰度）设备每个像素的比特数。如果是黑白设备，值为1。
• color 能显示颜色的设备
• min-color 每个颜色单元至少有n个比特
• color-index 指定了输出设备中颜色查询表中的条目数量。
• min-color-index: 256 至少256个索引颜色的设备
• aspect-ratio 宽高比 该值包含两个以“/”分隔的正整数。代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例。
• device-aspect-ratio 设备宽高比
• device-height
• device-width
• grid 判断输出设备是网格设备还是位图设备。如果设备是基于网格的（例如电传打字机终端或只能显示一种字形的电话），该值为1，否则为0。
• height 媒体属性描述了输出设备渲染区域（如可视区域的高度或打印机纸盒的高度）的高度。
• width
• scan 扫描
• progressive 以顺序方式扫描的电视机
• interlace

Mozilla专有的媒体属性 LINK

CSS计数器

本质上CSS计数器是由CSS维护的变量，这些变量可能根据CSS规则增加以跟踪使用次数。这允许你根据文档位置来调整内容表现。 CSS计数器是CSS2.1中自动计数编号部分的实现。

计数器的值通过使用counter-reset 和 counter-increment 操作，在 content 上应用 counter() 或 counters()函数来显示在页面上。

使用CSS计数器之前，必须被重置一个值，默认是0。使用 counter() 函数来给元素增加计数器。

body {
  counter-reset: section;           /* 重置计数器成0 */
}
h3:before {
  counter-increment: section;      /* 增加计数器值 */
  content: "Section " counter(section) ": "; /* 显示计数器 */
}

计数器嵌套

使用 counters() 函数，在不同级别的嵌套计数器之间可以插入字符串。

ol {
  counter-reset: section;                /* 为每个ol元素创建新的计数器实例 */
  list-style-type: none;
}
li:before {
  counter-increment: section;            /* 只增加计数器的当前实例 */
  content: counters(section, ".") " ";   /* 为所有计数器实例增加以“.”分隔的值 */
}

CSS变形

CSS transforms 属性

有两个主要的属性被用来定义 CSS transforms：transform 和 transform-origin

• transform-origin:指定原点的位置。默认值为元素的中心，可以被移动。很多变形需要用到这个属性，比如旋转，缩放和倾斜，他们都需要一个指定的点作为参数。
• transform:指定作用在元素上的变形。取值为空格分隔的一系列变形的列表，他们会像被组合操作请求一样被分别执行。
• rotate 旋转。单位：deg，度
• skewx 倾斜

3D 特有 CSS properties

• 首先你必须设置一个透视点（perspective）。透视值决定了 3D 实现的方式，元素与观察者之间的距离越远，他们就会越小。
• 通过 perspective-origin 属性设置观察者的位置。默认透视值为观察者的中心，但是这并不总是适当的。

CSS 弹性盒 参考链接

当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。对于很多应用来讲，弹性盒改进了块模型，既不使用浮动，也不会在弹性盒容器与其内容之间合并外边距。

许多设计师会发现弹性盒容易上手。弹性盒中的子元素通过在各个方向放置就可以以弹性的尺寸适应父元素的显示区域。由于子元素的显示顺序和它们在代码中 的顺序是独立的，通过使用弹性盒，定位子元素变得更加简单，复杂的布局也能够使用更清晰的代码更简单的实现。独立显示被设定成只针对可见元素，而不是基于代码的声明和导航顺序。

弹性盒布局的定义中，它可以自动调整子元素的高和宽，来很好的填充任何显示设备中的可用显示空间，收缩内容防止内容溢出。

不同于块级元素基于垂直方向布局以及行内元素基于水平方向布局，弹性盒布局的算法是方向无关的。

虽然块级元素布局在页面中工作良好，但是其定义不足以支持那种需要根据用户代理从竖直切换成水平等变化而进行方向切换、大小调整、拉伸、收缩的引用组件。

不同于将要出现的网格布局针对目标为大比例布局，弹性盒布局更适用于应用组件和小比例布局。这两种都是CSS工作组为了能与不同用户代理、不同书写模式和其他弹性需要进行协作而做出的努力。

概念

• 弹性容器：弹性子元素的父元素。 通过设置display 属性的值为flex 或 inline-flex将其定义为弹性容器。
• flex 值表示弹性容器为块级。inline-flex 值表示弹性容器为原子行级元素 。
• 弹性子元素：弹性容器的每一个子元素变为一个弹性子元素。弹性容器直接包含的文本变为匿名的弹性子元素。
• 轴：每个弹性盒布局以两个轴来排列。弹性子元素沿着主轴依次相互排列。侧轴垂直于主轴。
• 属性 flex-direction 定义主轴方向。
• 属性 justify-content 定义了弹性子元素如何在当前线上沿着主轴排列。
• 属性 align-items 定义了弹性子元素如何在当前线上沿着侧轴排列。
• 属性 align-self 覆盖父元素的align-items属性，定义了单独的弹性子元素如何沿着侧轴排列。
• 方向：弹性容器的主轴开始、主轴结束和侧轴开始、侧轴结束边缘代表了弹性子元素排列的起始和结束位置。它们具体取决于由writing-mode（从左到右、从右到左等等）属性建立的向量中的主轴和侧轴位置。
• 属性 order 将元素依次分组，并决定谁先出现。
• 属性 flex-flow 是属性 flex-direction 和 flex-wrap 的简写，用于排列弹性子元素。
• 行：弹性子元素根据 flex-wrap 属性控制的侧轴方向（在这个方向上可以建立垂直的新线），既可以是一行也可以是多行排列。
• 尺寸：弹性子元素宽高可相应地等价于主尺寸和侧尺寸，它们都分别取决于弹性容器的主轴和侧轴。
• min-height 和 min-width 属性的初始值为新增关键字 auto。
• 属性 flex 是 flex-basis，flex-grow 和 flex-shrink 的缩写，代表弹性子元素的伸缩性。

包含在弹性容器内的文本自动成为匿名的弹性子元素。然而，只包含空白的弹性子元素不会被渲染，就好像它被设定为 display:none 一样。

相邻的弹性子元素不会发生外边距合并。使用 auto 的外边距会在垂直和水平方向上带来额外的空间，这种性质可用于对齐或分隔临近的弹性子元素。

为了保证弹性子元素有一个合理的默认最小尺寸，使用 min-width:auto 与 min-height:auto。对于弹性子元素，auto属性计算其最小的宽高不小于其内容的尺寸，保证在渲染时其大小足够容纳内容。

弹性盒子的对齐会进行真正的居中，不像CSS的其他居中方法。这意味着即使弹性容器溢出，子元素仍然保持居中。有些时候这可能有问题，然而即使溢出了页面的 上沿，或左边沿（在从左到右的语言如英语；这个问题在从右到左的语言中发生在右边沿，如阿拉伯文），因为你不能滚动到那里，即使那里有内容！

说起虽然元素的显示顺序与源代码中的顺序无关，这种无关仅对显示效果有效，不包括语音顺序和基于源代码的导航。即使是 order 也不影响语言和导航序列。因此开发者必须小心排列源代码中的元素以免破坏文档的可访问性。

弹性盒子的属性

因为弹性盒子使用一种不同的布局逻辑，一些属性会在弹性容器上无效。

• 多列模块 中的column-*属性对弹性子元素无效。
• float 和 clear 对弹性子元素无效。使用 float 会导致 display 属性计算为 block.
• vertical-align 对弹性子元素的对齐无效。

亲自动手 Try it!

注意不是所有的浏览器都支持不带前缀的属性名。为了在大多数现代浏览器中应用这种特性，每个属性必须写三次： 一次用 -moz 前缀，一次用 -webkit 前缀，一次不使用前缀。

@规则

@规则 是一个CSS 语句，以 '@' (U+0040 COMMERCIAL AT)符号开头,后面紧跟一个标示符, 如果它在声明块外面则以第一个分号';' (U+003B SEMICOLON)结束，否则以第一个声明块结束。

下面是一些 @规则, 由它们的标示符指定, 每种规则都有不同的语法:

• @charset, 定义样式表使用的字符集.
• @import, 告诉 CSS 引擎引入一个外部样式表.
• @namespace, 告诉 CSS 引擎必须考虑XML命名空间。
• 嵌套@规则, 是嵌套语句的子集,不仅可以作为样式表里的一个语句，也可以用在条件规则组里：
• @media, 如果满足媒介查询的条件则条件规则组里的规则生效。
• @page, 描述打印文档时布局的变化.
• @font-face, 描述将下载的外部的字体。
• @keyframes, 描述 CSS 动画的中间步骤 .
• @supports, 如果满足给定条件则条件规则组里的规则生效。
• @document, 如果文档样式表满足给定条件则条件规则组里的规则生效。(推延至 CSS Level 4 规范)

条件规则组

就像属性值那样,每条@规则都有不同的语法. 不过一些@规则可以归为一类： 条件规则组. 这些语句使用相同的语法. 它们都嵌套语句，或者是规则或者是@规则。

它们都表达： 它们所指的条件 (类型不同) 总等效于 true 或者 false，如果为 true 那么它们里面的语句生效。

条件规则组由CSS Conditionals Level 3 定义:

• @media,
• @supports,
• @document. (推迟至 CSS Level 4 规范)

既然条件规则组可以嵌套语句, 那么嵌套层级不定。

LINKS

• MDN
• https://timkadlec.com/2012/04/media-query-asset-downloading-results/