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");
}