CSS3总结系列0 - 快车库

媒体查询

媒体查询包括一种媒体类型(以及通过使用宽高,颜色等媒体特征来限制样式表作用域的表达式).作为新增在CSS3中的特性,可以使得内容个性定制化呈现在不同特定输出设备上面,而不必改变内容本身.

语法

一行代码胜千言:

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- CSS media query within a stylesheet -->
<style>
@media (max-width: 600px) {
    .facet_sidebar {
        display: none;
    }
}
</style>

逻辑操作符

包含and,not,only.

@media tv and (min-width: 700px) and (orientation: landscape) {
    ...
}
//Now the above media query will only apply if the media type is TV, the viewport is 700px or wider, and the display is in landscape.

//Comma-separated lists,其实逗号前后就是或的关系
@media (min-width: 700px), handheld and (orientation: landscape) {
    ...
}

@media not all and (monochrome) {...}
//monochrome黑白,and this expression equivalents to
@media not (all and (monochrome)) {...}

@media not screen and (color), print and (color) {...}
//evaluated like this
@media (not (screen and (color))), print and (color) {...}

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

我突然发现平常接触的媒体特征特别有限:宽高,orientation,device-width,device-height,monochrome...其实还有许许多多媒体特征比如color,color-index,aspect-ratio,device-aspect-ratio,display-mode...带-moz- -webkit-前缀的也有许多.

css计数器

计数器的值可以通过使用counter-set来操控.counter-increment可以通过content属性counter(),counters()方法的使用来显示在页面上.
一行代码胜千言:

<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>

body {
    counter-reset: section;
    //set the section counter to 0.
}

h3::before {
    counter-increment: section;
    //increment the section counter
    content: "Section" counter(section) ": ";
    //Display the counter
}

渐变

CSS渐变是CSS3 Image Module当中<Image>标签的新类型.这样可以避免为了达到同样效果而使用的许多图片,于是可以减少下载时间和带宽.浏览器支持linear-gradient()和radial-gradient().

linear-gradient()

<div class="linear-gradient"></div>

.linear=gradient {
    width: 100px;
    height: 100px;
    //The old syntax, deprecated and prefixed, for old browsers.
    background: -prefix-linear-gradient(left top, blue, white);
    //The new syntax needed for standard-compaliant browsers (Opera 12.1, IE10, Firefox 16, Chrome 26, Safari 16.1), without prefix
    background: linear-gradient(to bototm right, blue, white);
    //you can also give angles,你也可以指定角度:底边为x轴,左边为y轴,逆时针.
    background: linear-gradient(70deg, red, white);
    //you can also specify Color Stops as many as you can and first & last default to be 0% and 100%.
    background: linear-gradient(top, red, blue 80%, white);
    //you can also specify Color Stops without locations averagely.
    background: linear-gradient(to right, red, orange, yellow, green, blue, purple);
    //you can also create gradient transpareny, but some broswers would mistake rgba(0, 0, 0, 0) and rgba(255, 255, 255, 0), so it would be unsafe and you'd better use opaque gradients.
    backround: linear(to top, rgba(255, 255, 255, 0) rgba(255, 255, 255, 1)), url(https://foo.com/bar.img);
}

radial-gradient()

语法上与linear-gradient相似,但是radial-gradient可以指定形状和大小,默认是和容器宽高成比例的椭圆.

Color stops

background: radial-gradient(red 5%, yellow 25%, lime 50%);

size

background: radial-gradient(ellipse closest-side, red, yellow 10%, blue 50%, white);
background: radial-gradient(ellipse farest-corner, black, green 20%, orange 70%, arial);

repeating gradients

repeat-linear-gradient和repeat-radial-gradient可以弥补linear-gradient和radial-gradient条纹状重复特性的缺失.

background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);

变换

通过变化坐标系空间, CSS transforms 在不中断正常文档流的情况下改变了受影响内容的形状和位置. CSS transforms 通过使用一套CSS属性集来对HTML元素并行地应用线性变换.这些变换包括平面和立体上的rotation, skewing, scaling, translation.

transform properties

transform-origin

默认是元素的中心.rotation, scaling, skewing变换需要该参数.

transform

具体变换列表,一个接着一个进行变换.
示例
rotate

<img style="transform: rotate(90deg); transform-origin: bottom left;" src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">

skewing and translating

<div style="transform: skewx(10deg) translatex(150px); transform-origin: botoom left;">
    <iframe src="https://www.google.com/" width="600" height="500"></iframe>
</div>

动画

CSS animate使得动画可以从一个样式配置过渡到另一个样式配置.动画有两部分组成:描述CSS动画的样式,可以描述从0%到100%中间任何时刻样式的关键帧.
好处有:

方便使用简单动画,不依赖JS.
浏览器支持地好,性能好于未经优化的JS动画.渲染引擎使用跳帧技术使得动画变得很和缓.
动画序列控制权交给浏览器使得浏览器有许多方式来优化性能和效率,比如说减少tabs当前运行但不可见动画的刷新频率

动画配置

包括animation-delay,animation-direction,animation-duration,animation-iteration-count,animation-name,animation-play-state,animation-timing-function,animation-fill-mode.
示例:

p {
    animation-duration: 3s;
    animation-name: slidein;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframs slidein {
    //0%
    from {
        margin-left: 100%;
        // <p> element should set in a container and give "overflow: hidden;" to it.
        width: 300%;
    }
    75% {
        font-size: 300%;
        margin-left: 25%;
        width: 150%;
    }
    //100%
    to {
        margin-left: 0%;
        width: 100%;
    }
}

还可以给动画添加事件监听

AnimationEvent 对象可以用来检测动画开始,结束,循环.
add event listeners

//与之前的动画为例
var e = document.getElementById("watchme");
e.addEventListener("animationstart", listener, false);
e.addEventListener("animationend", listener, false);
e.addEventListener("animationiteration", listener, false);

//start the animation
e.className = "slidein";

receive the events

function listener(e) {
    var l = document.createElment("li"); 
    switch(e.type) {
        case "animationstart" :
        l.innerHTML = "Started: elapsed time is: " + e.elapsedTime;
        break;
        case "animationend":
        l.innerHTML = "End: elapsed time is: " + e.elapsedTime;
        break;
        case "animationiteration":
        l.innerHTML = "Iteration: elapsed time is: " + e.elapsedTime;
        break; 
    }
    document.getElementById("output").appendChild("l");
}