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%中间任什么时候刻样式的关键帧.
好处有:

1. 方便使用简单动画,不依赖JS.

2. 浏览器支持地好,性能好于未经优化的JS动画.渲染引擎使用跳帧技术使得动画变得很和缓.

3. 动画序列控制权交给浏览器使得浏览器有许多方式来优化性能和效率,好比说减小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");
}