響應式Web設計:HTML5和CSS3實戰(第2版)
第六章 CSS3 高級技術
6.1 CSS3 文字陰影特效
- 基本語法：
.element{
text-shadow: 1px 1px 1px #ccc;
}
- 縮寫值的規則是“右偏移量，下偏移量，模糊距離（陰影從有到無的漸變距離），色值”
- 想把陰影向左上方偏移，可以使用負值
.element{
text-shadow: -2px -3px 0px #ccc;
}
/* 去除陰影效果，可以用text-shadow: none; */
6.1.1 省略blur值
- 如果不設置模糊距離，瀏覽器會自動取前兩個值作為偏移量
.element{
text-shadow: 1px 1px #ccc;
}
6.1.2 多文字陰影
- 可以添加多個陰影效果，以逗號分隔，而且css可以忽略空白，可以如下書寫增加可讀性
.element{
text-shadow:
2px 3px #ccc, /* right and down */
-3px -3px #999; /* left and up */
}
6.2 盒陰影
- 默認的box-shadow是設置在元素外部的
- 可以設置inset來容許元素內部使用box-shadow
6.2.1 內陰影
- inset關鍵字
.element {
box-shadow: inset 0 0 30px #999;
}
6.2.2 多重陰影
- 也是用逗號分隔
- 會按照從底部到頂部（從最后一個到第一個）的順序被添加
- 即，代碼中越接近頂層的效果在瀏覽器中展示的時候也越接近“頂層”
.element{
box-shadow:
inset 0 0 30px #ccc, /* up */
inset 0 0 30px #999; /* down */
}
6.2.3 陰影尺寸（偏移）
- 可以讓你在各個方向上縮小陰影效果
- 原理是：模糊距離被負的陰影尺寸抵消了
6.3 背景漸變
6.3.1 線性漸變語法
- 默認從頂部開始
- 最簡單的是：
.element{
background: linear-gradient(red, blue);
}
- 確認漸變方向
- 漸變將從你設定的反方向開始，當沒有設置方向時，漸變默認從頂部到底部
- 下邊代碼的漸變方向設定為頂部右側，即底部左側開始，紅色變為藍色
.element{
background: linear-gradient(to top right, red, blue);
/*或者數學比較好，用角度*/
background: linear-gradient(45deg, red, blue);
}
- 如果容器不是正方形，是一個矩形，那么45deg指的是右上角的頂點，而不是真真切切的45度
- 也可以讓漸變從不可見區域開始
.element{
background: linear-gradient(red -50%, blue);
}
- 色標
- 使用色標定義復雜的漸變效果
- 建議不要混用單位
- 可以在一個漸變效果中添加多個色標
- 色標用逗號進行分隔
- 第一部分是顏色
- 第二部分是顏色的位置
- 色標用逗號進行分隔
.element{
background: linear-gradient(#f90 0, #f90 2%, #555 2%, #eee 50%, #555 98%, #f90 100%);
}
- 兼容舊瀏覽器
- 兼容不支持背景漸變效果的瀏覽器，只需要在之前定義一個背景顏色就可以
- 目的是老舊瀏覽器至少會渲染一個背景
.thing{
background: red;
background: linear-gradient(45deg, red, blue);
}
6.3.2 徑向漸變背景
- 效果一般是從一個中心發散成為圓形或者橢圓的漸變效果
.thing{
background: radial-gradient(12em circle at bottom, red, orange, yellow);
}
6.3.3 為響應式而生的關鍵字
- 按照比例設置漸變效果大小比按照固定像素設置更有用
- 線上漸變效果生成器：http://www.colorzilla.com/gradient-editor/
6.4 重復漸變
- background: repeating-radial-gradient(black, 0px, orange 5px, red 10px);
- 標記色標之間的距離可以用像素值，也可以用百分比
- 為了展示最佳效果，建議用同一種計量單位
6.5 漸變背景制作圖案的使用場景
- 漸變圖案在小視口中比較好看
- 視口較大時，純色背景更好一些
6.6 多張背景圖片
- CSS3中可以在一個元素上堆疊多個背景圖片
- css中先出現的圖片會被安置在越靠近用戶的位置
.element{
/*img01離用戶最近*/
background:
url('../img01.jpg'),
url('../img02.jpg'),
url('../img03.jpg') left bottom, black;
}
6.6.1 背景大小
- 使用 background-size 為每個圖片設置大小
- 可以使用百分比，像素或者以下關鍵詞
- auto 讓圖片保持原有大小
- cover 保持圖片比例，拓展至覆蓋整個元素
- contain 保持圖片比例，拓展圖片讓其最長邊保持在元素內部
6.6.2 背景位置
- background-position: top 50px right 100px, 40px 40px, top center;
- 上面代碼表示為三張圖片各自設置位置
- 背景位置默認在左上角
6.6.3 背景屬性的縮寫
- 首先不建議使用縮寫
- 建議順序
- 多重背景圖片
- 聲明背景大小
- 然后聲明背景位置
- 最后聲明背景重復與否
6.7 高分辨率背景圖
- 不同視口下加載不同分辨率的圖像
.bg{
background-image: url('bg.jpg');
}
@media (min-resolution: 1.5dppx) {
.bg {
background-image: url('bg@1_5x.jpg');
}
}
6.8 CSS濾鏡
- 可以用濾鏡中的drop-shadow創建三角形陰影
- drop-shadow語法和box-shadow相似
.filter{
filter: drop-shadow(8px 8px 6px #333);
}
- 常見filter
- blur(3px) 模糊
- grayscale(.8) 灰度
- invert(.9) 反轉
- opacity(.2) 透明度
- 濾鏡屬于渲染前必須進行的計算工作，所以對性能影響很大
- 因此慎重使用濾鏡效果
- 選擇器對性能的影響可以忽略不計
第八章 CSS3過渡、變形和動畫
- 過渡——transition
- 變形——transform
- 動畫——animation
8.1什么是CSS3過渡以及如何使用它
- 當元素的CSS狀態改變時，過渡是最簡單的創造視覺效果的方式。
- 如：我們在給超鏈接設置樣式的時候，一般都會設置一個懸停狀態的效果
- transition: box-shadow 1s;
- 在box-shadow上，將會耗時1秒，從現存狀態切換到懸停狀態。
8.1.1 過渡的簡寫語法
- 傾向使用縮寫版，
- 這樣我只要定義過渡的時長和需要過渡的屬性即可。
- transition: all 1s ease 0s;
- 第一個和時間相關的值會被應用給transition-duration
- 第二個則會被應用到transition-delay上
8.1.2 在不同時間段內過渡不同屬性
- 多個屬性過渡時，這些屬性不必步調一致
.style {
/* ...（其他樣式）... */
transition-property: border, color, text-shadow;
transition-duration: 2s, 3s, 8s;
}
8.1.3 過渡調速函數
- 貝塞爾曲線，本質上是緩動函數
- ease（默認）、linear、ease-in、ease-out、ease-in-out和cubic-bezier
8.2 CSS的2D變形
- 過渡是從一種狀態平滑轉換到另一種狀態
- 變形則定義了元素將會變成什么樣子
- 想象一下《變形金剛》里的擎天柱，他通過變形來變成一部卡車。而在機器人與卡車之間的階段，我們稱之為過渡（從一個狀態過渡到另一個狀態）。
- 變形是在文檔流外發生的
- 一個變形的元素不會影響它附近未變形的元素的位置。
8.2.1 scale
- 因為變形在文檔流之外，所以如下設置的樣式變形，并不會導致同類位置的變動
.scale:hover {
transform: scale(1.4);
}
8.2.2 translate
- translate會告知瀏覽器按照一定的度量值移動元素，可以使用像素或者百分比
- 第一個值是X軸上偏移的距離
- 第二個是Y軸上偏移的距離
- 正值會讓元素向右或者向下移動，負值則會讓元素向左或者向上移動。
.translate:hover {
transform: translate(-20px, -20px);
}
+ 如果你只傳入一個值，它會被應用到X軸上。
+ 如果你想指定一個軸進行移動，可以使用translateX或者translateY。
- 解決絕對居中
.inner {
position: absolute;
width: 200px;
background-color: #999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
8.2.3 rotate
- rotate允許你旋轉一個元素
- 括號中的值只能以度為單位（如90deg）。正值時會進行順時針旋轉，而負值則會逆時針旋轉。
.rotate:hover {
transform: rotate(30deg);
}
8.2.4 skew
- skew（斜切）會讓元素在一個或者兩個軸上變形偏斜。
- 第一個值是X軸上的斜切（本例中是40度）
- 第二個值是Y軸上的斜切（本例中是12度）
- 忽略第二個值意味著僅有的值只會應用在X軸上（水平方向）。
.skew:hover {
transform: skew(40deg, 12deg);
}
8.2.5 matrix
- matrix（矩陣）變形的語法超級復雜
.matrix:hover {
transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989);
}
- 傻瓜式的矩陣變形工具
8.2.6 transform-origin屬性
- 在CSS里，默認的變形原點（瀏覽器中作為變形中心的點）是在正中心：
- 元素X軸的50%和Y軸的50%處
- 這和SVG默認的左上角（或者0 0）是不同的。
- 使用transform-origin，我們可以修改變形原點
.matrix:hover {
transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989);
transform-origin: 270px 20px;
}
8.3 CSS3的3D變形
- 使用perspective屬性來設置用戶視點到3D場景的距離。
- 結構:
<div class="flipper">
<span class="flipper-object flipper-vertical">
<span class="panel front">The Front</span>
<span class="panel back">The Back</span>
</span>
</div>
- 樣式：
.flipper {
perspective: 400px;
position: relative;
}
/* 我們將父元素設置為相對定位，從而創造一個上下文來放置flipper-object。 */
.flipper-object {
position: absolute;
transition: transform 1s;
transform-style: preserve-3d;
}
- 使用backface-visibility屬性把它設置為hidden來隱藏元素的背面
8.4 CSS3動畫效果
- 相較于3D變形，CSS3動畫的支持度更高。
- 將在元素翻轉后為其添加脈沖動畫效果。
- 這里只定義了一個簡單的關鍵幀選擇器：100%。
- 也可以設置多個關鍵幀選擇器（推薦你使用百分比）。你可以把它們想象成時間軸上的點。
- 這里只定義了一個簡單的關鍵幀選擇器：100%。
@keyframes pulse {
100% {
text-shadow: 0 0 5px #bbb;
box-shadow: 0 0 3px 4px #bbb;
}
}
- 最好使用一個能代表動畫效果的名字，因為一個關鍵幀聲明可以在項目中多處復用。
- 使用：
.flipper:hover .flipper-horizontal {
transform: rotateY(180deg);
animation: pulse 1s 1s infinite alternate both;
}
- animation-fill-mode屬性
- animation-fill-mode: forwards;
- 這指使元素保留動畫結束時的值。
第九章 表單
9.1-2 理解HTML5表單中的元素
- 每一個輸入元素都有一個對應的label元素
- 然后一并被包裹在div元素中（我們也可以把用label把input包裹起來）。
<fieldset>
<legend>About the offending film (part 1 of 3)</legend>
<div>
<label for="film">The film in question?</label>
<input id="film" name="film" type="text" placeholder="e.g. King
Kong" required>
</div>
9.2.1 placeholder
- 為占位符文本添加樣式
- 可以使用:placeholder-shown偽類選擇器來為placeholder屬性添加樣式
- 要用前綴添加工具來兼容各種版本
input:placeholder-shown {
color: #333;
}
9.2.2 required
- 用于多種類型的輸入元素來確保表單域中必須輸入值
- range、color、button和hidden類型的輸入元素不能使用required，
- 這幾種輸入類型幾乎都有默認值。
9.2.3 autofocus
- 可以讓表單在加載完成時即有一個表單域被默認選中
- 如果多個表單域都添加了autofocus屬性，在不同的瀏覽器上表現是不一致的
- 在Safari上，最后一個添加autofocus的表單域會被選中，
- 在Firefox和Chrome上會選中第一個添加autofocus屬性的元素。
- 帶有autofocus的表單域，則會阻止空格鍵的默認行為
9.2.4 autocomplete
- 禁用自動補全功能的表單項
<div>
<label for="tel">Telephone</label>
<input id="tel" name="tel" type="tel" placeholder="1-234-546758" autocomplete="off" required>
</div>
- 也可以給整個表單（不是fieldset）設置屬性來禁用自動補全功能
<form id="redemption" method="post" autocomplete="off">
9.2.5 list及對應的datalist元素
- 可以在用戶開始在輸入框中輸入值的時候，顯示一組備選值
- list屬性中的值（awards）同時也是datalist元素的id
- 這樣就可以讓datalist與輸入框關聯起來
<div>
<label for="awardWon">Award Won</label>
<input id="awardWon" name="awardWon" type="text" list="awards">
<datalist id="awards">
<select>
<option value="Best Picture"></option>
<option value="Best Director"></option>
<option value="Best Adapted Screenplay"></option>
<option value="Best Original Screenplay"></option>
</select>
</datalist>
</div>
9.3 HTML5的新輸入類型
9.3.1 email
- 當與required組合使用時，如果提交一個不符合格式的地址，瀏覽器會生成警告信息
<div>
<label for="email">Your Email address</label>
<input id="email" name="email" type="email" placeholder="dwight.schultz@gmail.com" required>
</div>
- 許多觸摸屏設備（如安卓、iPhone等）會根據輸入類型改變鍵盤模式
9.3.2 number
- 如果你輸入的不是數字
- Chrome和Firefox會在表單提交的時候在表單域上彈出一個警告框
- 而Safari則相反，它什么都不會做，并且讓其順利提交。
- IE11則會在輸入框失焦的時候快速清除其中的內容。
<div>
<label for="yearOfCrime">Year Of Crime</label>
<input id="yearOfCrime" name="yearOfCrime" type="number" min="1929" max="2015" required>
</div>
9.3.3 url
<div>
<label for="web">Your Web address</label>
<input id="web" name="web" type="url" placeholder="www.mysite.com">
</div>
9.3.4 tel
- IE11、Chrome和Firefox等現代瀏覽器上，tel類型都設計為數字類型格式
- 它的表現和普通文本輸入框一樣。
- 當輸入無效值，它們都 沒有 在輸入框失焦或表單提交時提供任何合理的警告信息。
<div>
<label for="tel">Telephone</label>
<input id="tel" name="tel" type="tel" placeholder="1-234-546758" autocomplete="off" required>
</div>
9.3.5 search
- 移動設備上經常會提供一個更富有針對性的鍵盤
<div>
<label for="search">Search the site...</label>
<input id="search" name="search" type="search" placeholder="Wyatt Earp">
</div>
9.3.6 pattern
- 讓輸入域只接受某種特定格式的輸入
<div>
<label for="name">Your Name (first and last)</label>
<input id="name" name="name" pattern="([a-zA-Z]{3,30}\s*)+[a-zA- Z]{3,30}" placeholder="Dwight Schultz" required>
</div>
9.3.7 color
- 讓輸入域接受顏色輸入
<div>
<label for="color">Your favorite color</label>
<input id="color" name="color" type="color">
</div>
9.3.8 日期和時間輸入類型
- date
<input id="date" type="date" name="date">
- month
<input id="month" type="month" name="month">
- week
<input id="week" type="week" name="week">
- time
<input id="time" type="time" name="time">
9.3.9 范圍值
- range輸入類型會生成一個滑動條
<input type="range" min="1" max="10" value="5">
- 一大問題是它從來不給用戶顯示當前的輸入值
- 可以通過JavaScript實現。我們將上例中的代碼稍作修改
- 獲取滑動條當前的輸入值，將其顯示在id為range的元素（span標簽）中
<input id="howYouRateIt" name="howYouRateIt" type="range" min="1" max="10" value="5" onchange="showValue(this.value)">
<span id="range">5</span>
<script>
function showValue(newValue)
{
document.getElementById("range").innerHTML=newValue;
}
</script>
9.4 如何給不支持新特性的瀏覽器打補丁
- 在一些老式瀏覽器或不支持的瀏覽器上使用這些新特性
- 可以考慮使用Webshims Lib (http://afarkas.github.io/webshim/demos )
- Webshims最便捷的地方就是按需打補丁
- 如果在原生支持HTML5新特性的瀏覽器上查看網頁，則僅會給網頁加入一丁點兒的冗余代碼。
- 而對于老版本瀏覽器，雖然它們需要加載更多的代碼
- 可以考慮使用Webshims Lib (http://afarkas.github.io/webshim/demos )
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script>
<script>
// 引入你需要的功能
webshim.polyfill('forms');
</script>
9.5使用CSS美化HTML5表單
9.5.1 顯示必填項
- 僅通過CSS就告訴用戶此輸入域為必填項
input:required {
/* 樣式*/
}
- 來標記被聚焦的必填項
input:focus:required {
/* 樣式*/
}
- 當鼠標懸停于item上時，如果item-general-sibling是與其擁有共同父元素并且位于它后方的兄弟元素，那么樣式會被應用到item-general-sibling上
input:focus:required {
/* 樣式*/
}
- 當鼠標懸停于item上時，如果item-general-sibling是與其擁有共同父元素并且位于它后方的兄弟元素，那么樣式會被應用到item-general-sibling上
.item:hover ~ .item-general-sibling {} {
/* 樣式*/
}
- 當鼠標懸停在元素上時，如果item-adjacent-sibling是緊跟item的兄弟元素，那么樣式會被應用到item-adjacent-sibling上。
.item:hover + .item-adjacent-sibling {} {
/* 樣式*/
}
- 為相關的label元素添加樣式（重要）
<div class="form-Input_Wrapper">
<label for="film">The film in question?</label>
<input id="film" name="film" type="text" placeholder="e.g. King Kong" required/>
</div>
input: required + label: after {
content: "*";
font - size: 2.1em;
position: relative;
top: 6 px;
display: inline - flex;
margin-left: .2 ch;
transition: color, 1s;
}
input: required: invalid + label: after {
color: red;
}
input: required: valid + label: after {
color: green;
}
9.5.2 創造一個背景填充效果
- 我們不能在兩個背景圖片間添加過渡效果（因為瀏覽器要將聲明光柵化為圖片）
- 然而，我們可以在相關屬性的值中間添加過渡效果
- 如background-position和background-size
- 使用上面的辦法來創造一個填充效果，告知用戶input或者textarea被聚焦。
input: not([type = "range"]), textarea {
min-height: 30 px;
padding: 2 px;
font-size: 17 px;
border: 1 px solid# ebebeb;
outline: none;
transition: transform .4s, box-shadow .4s, background-position .2s;
background: radial-gradient(400 px circle, #fff 99 % , transparent 99 % ), #f1f1f1;
background-position: -400 px 90 px, 0 0;
background-repeat: no-repeat, no-repeat;
border-radius: 0;
position: relative;
}
input: not([type = "range"]): focus, textarea: focus {
background-position: 0 0, 0 0;
}
- 解析
- 在第一個規則里，我們生成了一個白色徑向漸變，但是它被放置在視線外。
- 定義在其后側的背景顏色（緊跟在radial-gradient后的HEX值）并沒有被偏移，所以它能提供一個默認的顏色。
- 當輸入域被聚焦時，radial-gradient上的背景位置會設定為默認。
- 因為我們給背景圖片設置了過渡，所以可以在兩者之間看到漂亮的過渡效果。
- 最終我們實現了在用戶輸入時，輸入域被填充為不同的顏色。
第十章 實現響應式Web設計
10.1 盡快讓設計在瀏覽器和真實設備上運行起來
- 讓設計決定斷點
- 總是從最小的屏幕尺寸開始設計，漸漸地使視口尺寸增大
- 這樣你就能知道在哪個地方加入斷點。
- 首先為最小的視口編寫CSS，然后在媒體查詢中修改其在較大視口下的表現。
- 總是從最小的屏幕尺寸開始設計，漸漸地使視口尺寸增大
.rule {
/* 小型視口樣式*/
}
@media(min - width: 40e m) {
.rule {
/* 中型視口樣式*/
}
}
@media(min - width: 70e m) {
.rule {
/* 大型視口樣式*/
}
}
10.2 在真實設備上觀察和使用設計
- 早測試，常測試！
- 使用像BrowserSync這樣的工具來同步你的工作 （ https://browsersync.io/ ）
- 配置完成后，當你保存你的工作時，諸如CSS等的變化就會被注入到瀏覽器上，而無需你不斷地刷新屏幕。
- 它還能通過WIFI將在不同設備上的瀏覽器刷新。
- 這節省了拿起每個測試設備點擊刷新的時間。
- 它甚至能同步滾動和點擊
10.3 擁抱漸進增強
- 應該編寫能夠精確描述你的內容的HTML5標記
- 基于文本和內容的網站
- 正確使用main、header、footer、article、section和aside等元素
- 構建Web應用或者圖形化UI組件
- 需要思考一下如何提煉成有效的標記
- 在HTML上的優化越多
- 你在CSS和JavaScript上為老式瀏覽器所做的優化就越少
- 基于文本和內容的網站
10.4 確定需要支持的瀏覽器
- 有的時候根據項目需要，你要從更為高級的瀏覽器開始編寫
- 如，在你的項目中JavaScript是必需的
10.4.1 等價的功能，而不是等價的外觀
- 網站在每個瀏覽器上的外觀和工作方式一樣是不現實也是不可取的
- “支持老式瀏覽器”并不意味著“在老式瀏覽器上看起來一模一樣”。
10.4.2 選擇要支持的瀏覽器
- 如果這是個新項目，并且沒有統計數據
- 我通常會遵循“前兩個版本”策略
- 即是指當前的瀏覽器版本和之前的兩個瀏覽器版本。
- 如果IE12是目前的瀏覽器版本，那么你就要兼容IE10和IE11（前兩個版本）。
- 我通常會遵循“前兩個版本”策略
10.5 分層的用戶體驗
- 基本體驗是站點的最小可行版本
- 增強體驗則是包括所有功能并且最為美觀的版本
- 然后通過Modernizr，我們可以根據瀏覽器的兼容性優化體驗。
- 實現體驗分層
- Modernizr為基于瀏覽器兼容性的優化提供了最為穩健的方式
- 當編寫CSS的時候，“基礎”版本代碼由以下內容組成
- 沒有被媒體查詢包裹的代碼
- 沒有被Modernizr添加選擇器的代碼
10.6將CSS斷點與JavaScript聯系起來
- JavaScript總是返回寬度的像素值而不是REM值
@media(min-width: 20rem) {
body::after {
content: "Splus";
font-size: 0;
}
}
@media(min-width: 47.5rem) {
body::after {
content: "Mplus";
font-size: 0;
}
}
@media(min-width: 62.5rem) {
body::after {
content: "Lplus";
font-size: 0;
}
}
- 在每一個我們想和JavaScript溝通的斷點處，我們使用了after偽元素
- 你也可以使用before偽元素
- 將其內容設置為斷點的名稱
- 在JavaScript中，我們可以閱讀這個值
- 我們將這個值賦給一個變量
var size = window.getComputedStyle(document.body,':after').
getPropertyValue('content');
- 下面是一個簡單的自我調用函數（自我調用意味著它在瀏覽器解析它的時候馬上被調用）
- 來根據視口大小彈出不同的信息
;(function alertSize() {
if (size.indexOf("Splus") != -1) {
alert('I will run functions for small screens');
}
if (size.indexOf("Mplus") != -1) {
alert('At medium sizes, a different function could run');
}
if (size.indexOf("Lplus") != -1) {
alert('Large screen here, different functions if needed');
}
})();
10.7 避免在生產中使用CSS框架
- 最為有名的兩個是Bootstrap（http://getbootstrap.com/ ）和Foundation（http://foundation.zurb.com/ ）
- 在快速制作原型方面有巨大的優勢
- 例如，把交互方式展現給客戶看
- 在生產中應該避免使用它們
- 首先，從技術上看，添加一個框架會為你的項目帶來過多的冗余代碼。
- 其次，從美學的角度上看，因為這種框架十分普及，所以你的項目會和無數個其他項目看起來一模一樣。
- 最后，如果你只是在你的項目里復制粘貼代碼，然后調整至符合你的需求，那么你就不可能充分理解它們的原理。
10.8 盡可能使用最簡單的代碼
- 需要為列表中的第五個元素添加不同的樣式
- 并且你能操作標記，那就不要像下面這樣使用nth-child選擇器：
.list-item:nth-child(5) {
/* 樣式*/
}
- 直接在標記上添加HTML類是更為明智的做法
<li class="list-item specific-class">Item</li>
- 然后使用類來添加樣式：
- 不僅更易懂，而且支持度也更高（舊版本的IE瀏覽器并不支持nth-child選擇器）
.specific-class {
/* 樣式*/
}
10.9 根據視口隱藏、展示和加載內容
- 響應式Web設計中有一個常用的準則：
- 如果你在小屏幕上不加載某一部分，那么在大屏幕上也不應該加載。
- 意味著在每一個視口下用戶都應該能達到同樣的目的（購買產品、閱讀文章、完成交互）
- 隨著屏幕的尺寸越來越大，我們也沒有必要去增加額外的部分（窗口小部件、廣告、鏈接等）來填充空白。
- 將復雜的可視化工作交給CSS
- JavaScript可以實現單獨使用CSS無法實現的交互效果
- 如果可能的話，在涉及視覺效果的時候，我們仍然應該將工作交給CSS來完成,這意味著:
- 不要單獨使用JavaScript實現菜單移入、移出、打開、關閉的動畫效果
- jQuery的show和hide
- 不要單獨使用JavaScript實現菜單移入、移出、打開、關閉的動畫效果
- 相反，應該使用JavaScript在相關的部分上做簡單的類變換，然后讓類去觸發CSS展示相關的動畫效果。
- 如果你在小屏幕上不加載某一部分，那么在大屏幕上也不應該加載。
10.10 驗證器和代碼檢測工具
- 官方： https://validator.w3.org/
- 更好的方法是為你的HTML、CSS和JavaScript安裝和配置檢測工具
10.11 性能
- 基礎條例：
- (1) 減少你的資源數（例如，不要加載15個JavaScript文件，而應該將它們拼成一個）。
- (2) 減小你的頁面大小（如果你能壓縮圖片，那么請壓縮）。
- (3) 延遲加載非必需資源（如果你可以將CSS和JavaScript的加載延遲到頁面加載完成后，就可以大幅縮短初始化時間）。
- (4) 保證頁面盡快可用（通常是上述所有步驟的副產物）。
- 有很多工具可以度量和優化性能
- 我最喜歡的是https://www.webpagetest.org/
- 會顯示出一份完整的頁面分析
- 還會按照幻燈片的方式顯示出頁面的加載過程，讓你知道如何改進頁面加載速度
- 我最喜歡的是https://www.webpagetest.org/
