工具函數(shù)
//獲取和遍歷所有匹配特定css選擇符的DOM元素
function $$(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}
//檢測(cè)css屬性支持情況
function testProperty(property) {
var root = document.getElement;
if (property in root.style) {
root.classList.add(property.toLowerCase());
return root;
}
root.classList.add("no-" + property.toLowerCase());
return false;
}
如果我們想要檢測(cè)某個(gè)具體的屬性值是否支持世分，那就需要把它賦給對(duì)應(yīng)
的屬性成福，然后再檢查瀏覽器是不是還保存著這個(gè)值橡类。很顯然桥滨，這個(gè)過程會(huì)改
變?cè)氐臉邮剑虼宋覀冃枰粋€(gè)隱藏元素
var dummy = document.createElement("p");
dummy.style.backgroundImage = "linear-gradient(red,tan)";
if (dummy.style.backgroundImage) {
root.classList.add("lineargradients");
} else {
root.classList.add("no-lineargradients");
}
//封裝
function testValue(id, value, property) {
var dummy = document.createElement("p");
dummy.style[property] = value;
if (dummy.style[property]) {
root.classList.add(id);
return true;
}
root.classList.add("no-" + id);
return false;
}
CSS 編碼技巧
-
減少代碼重復(fù):代碼可維護(hù)性的最大要素是盡量減少改動(dòng)時(shí)要編輯的部分,當(dāng)某些值相互依賴時(shí)洒放，應(yīng)該把他們的相互關(guān)系用代碼表達(dá)出來
1.代碼易維護(hù)和代碼量少不可兼得border-width: 10px 10px 10px 0; border-width: 10px; border-left-width: 0; 2. 顏色關(guān)鍵字 currentColor 3. 繼承 inherit 可以用在任何 CSS 屬性中蛉鹿，而且它總是綁定到父元素的計(jì)算值 .callout { position: relative; } .callout::before { content: ""; position: absolute; top: -0.4em; left: 1em; padding: 0.35em; background: inherit; border: inherit; border-right: 0; border-bottom: 0; transform: rotate(45deg); } /* 行高是字號(hào)的1.5倍*/ font-size: 20px; line-height: 1.5;
-
每個(gè)媒體查詢都會(huì)增加成本， 盡最大努力實(shí)現(xiàn)彈性可伸縮的布局往湿，并在媒體查詢的各個(gè)斷點(diǎn)區(qū)間內(nèi)指定相應(yīng)的尺寸
避免不必要的媒體查詢的小建議： 1.使用百分比長(zhǎng)度來取代固定長(zhǎng)度 2.當(dāng)你需要在較大分辨率下得到固定寬度時(shí)妖异，使用 max-width 而不是 width 惋戏，因?yàn)樗梢赃m應(yīng)較小的分辨率，而無需使用媒體查詢 3.不要忘記為替換元素（比如 img 他膳、 object 响逢、 video 、 iframe 等）設(shè) 置一個(gè) max-width 棕孙，值為 100% 4.background-size: cover舔亭，但是帶寬并不是無限的，記住在移動(dòng)網(wǎng)頁中這么做往往是不明智的 5.當(dāng)圖片（或其他元素）以行列式進(jìn)行布局時(shí)蟀俊，讓視口的寬度來決定 列的數(shù)量钦铺。彈性盒布局（即 Flexbox）或者 display: inline-block 加上常規(guī)的文本折行行為，都可以實(shí)現(xiàn)這一點(diǎn)肢预。 6.在使用多列文本時(shí)矛洞，指定column-width（列寬）而不是指定column-count（列數(shù)） 這樣它就可以在較小的屏幕上自動(dòng)顯示為單列布局 -
合理使用簡(jiǎn)寫
background: url(tr.png) no-repeat top right / 2em 2em, url(br.png) no-repeat bottom right / 2em 2em, url(bl.png) no-repeat bottom left / 2em 2em; 寫成一個(gè)展開式屬性background: url(tr.png) top right, url(br.png) bottom right, url(bl.png) bottom left; background-size: 2em 2em; background-repeat: no-repeat; -
預(yù)處理語言，如果使用得當(dāng)烫映，它們?cè)诖笮晚?xiàng)目中可以讓代碼更加靈活
1. CSS 的文件體積和復(fù)雜度可能會(huì)失控缚甩。即使是簡(jiǎn)潔明了的源代碼， 在經(jīng)過編譯之后也可能會(huì)變成一頭從天而降的巨獸窑邦。 2. 調(diào)試難度會(huì)增加，因?yàn)槟阍陂_發(fā)工具中看到的 CSS 代碼并不是你寫 的源代碼壕探。不過這個(gè)問題已經(jīng)大大好轉(zhuǎn)了冈钦，因?yàn)橐呀?jīng)有越來越多的 調(diào)試工具開始支持 SourceMap。SourceMap 是一種非忱钋耄酷的新技術(shù)瞧筛， 正是為了解決這個(gè)痛點(diǎn)而生的，它會(huì)告訴瀏覽器哪些編譯生成的 CSS 代碼對(duì)應(yīng)哪些預(yù)處理器 CSS 代碼导盅，精確到行號(hào)较幌。 3. 預(yù)處理器在開發(fā)過程中引入了一定程度的延時(shí)。盡管它們通常很快白翻， 但仍然需要差不多一秒鐘的時(shí)間來把你的源代碼編譯成 CSS乍炉， 4. 抽象都必然會(huì)帶來更高的學(xué)習(xí)成本 5. “所有重大的抽象機(jī)制在某種程度上都存在泄漏的情況÷蒜桑” 預(yù)處理器是由人類寫出來的岛琼，就像所有由人類寫出來的大型程序一樣，它們有它們自己的 bug巢株。 這些 bug 可能會(huì)潛伏很久槐瑞，因?yàn)槲覀兒苌贂?huì)懷疑預(yù)處理器的某個(gè) bug 才是我們CSS 出錯(cuò)的幕后元兇。
背景和邊框
半透明邊框
CSS 中的半透明顏色 rgba() 和 hsla()
H：Hue(色調(diào))阁苞。0(或 360)表示紅色困檩，120 表示綠色祠挫，240 表示藍(lán)色，也可取其他數(shù)值來指定顏色悼沿。取值為：0 - 360
S：Saturation(飽和度)等舔。取值為：0.0% - 100.0%
L：Lightness(亮度)。取值為：0.0% - 100.0%
A：Alpha 透明度显沈。取值 0~1 之間软瞎。
如果不希望背景侵入邊框所在的范圍，我們要做的就是把它的值設(shè)為 padding-box 拉讯，這樣瀏覽器就會(huì)用內(nèi)邊距的外沿來把背景裁切掉涤浇。
background-clip有三個(gè)屬性值，
即border-box魔慷、padding-box只锭、content-box；
border-box 背景被裁剪到邊框盒院尔。
padding-box 背景被裁剪到內(nèi)邊距框蜻展。
content-box 背景被裁剪到內(nèi)容框。
.one {
width: 100px;
height: 100px;
background: red;
border: 15px dashed hsla(214, 50%, 50%, 1);
background-clip: padding-box;
}
background-clip的初始值是 border-box邀摆，意味著背景會(huì)被元素的border-box（邊框的外沿框）裁切掉
.two {
width: 100px;
height: 100px;
background: red;
border: 15px dashed hsla(214, 50%, 50%, 1);
}
多重邊框
box-shadow 方案 : 只能模擬實(shí)線邊框
- 接受第四個(gè)參數(shù)（稱作“擴(kuò)張半徑”）纵顾，通過指定正值或負(fù)值，可以讓投影面積加大或者減小
- 你完全可以用 border 屬性來生成完全一樣的邊框效果栋盹。不過 box-shadow 的好處在于施逾，它支持逗號(hào)分隔語法，我們可以創(chuàng)建任意數(shù)量的投影
.one {
width: 100px;
height: 100px;
background: red;
box-shadow: 0 0 0 10px hsla(214, 50%, 50%, 1);
}
.two {
width: 100px;
height: 100px;
background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 20px deeppink,
0 2px 5px 25px rgba(0, 0, 0, 0.6);
}
outline 方案 : 可以產(chǎn)生虛線邊框效果
outline 它只適用于雙層“邊框”的場(chǎng)景例获。在某些情況下汉额，你可能只需要兩層邊框，那就可以先設(shè)置一層常規(guī)邊框榨汤，再加上 outline（描邊）屬性來產(chǎn)生外層的邊框
.one {
width: 100px;
height: 100px;
background: yellowgreen;
border: 10px solid #655;
outline: 10px solid deeppink;
}
.two {
width: 140px;
height: 140px;
background: yellowgreen;
outline: 2px dashed deeppink;
outline-offset: -10px;
}
注意：通過outline
屬性實(shí)現(xiàn)的“邊框”不會(huì)貼合元素的圓角蠕搜，不過這一行為在未來可能會(huì)發(fā)生變化
.three {
width: 140px;
height: 140px;
background: yellowgreen;
outline: 2px dashed deeppink;
border-radius: 20px;
}
靈活的背景定位
background-position
對(duì)于具有固定尺寸的容器來說，使用 CSS 2.1 來做到這一點(diǎn)是可能的收壕，
但很麻煩：可以基于它自身的尺寸以及我們期望它距離右下角的偏移量妓灌，計(jì)
算出背景圖片距離左上角的偏移量，然后再把計(jì)算結(jié)果設(shè)置給 background-
position,蜜宪，借助現(xiàn)代的 CSS 特性旬渠，我們已經(jīng)擁有了更好的解決方案
.one {
width: 200px;
height: 200px;
background: url("../logo.jpg") no-repeat #58a;
background-size: 50px 50px;
background-position: right bottom;
}
.two {
width: 200px;
height: 200px;
background: url("../logo.jpg") no-repeat #58a;
background-size: 50px 50px;
background-position: right 50px bottom 50px;
}
兼容性的回退方案：在不支持 background-position 擴(kuò)展語法的瀏覽器中，背景圖片會(huì)緊
貼在左上角（背景圖片的默認(rèn)位置)
#app {
width: 200px;
height: 200px;
background: url("../img.jpg") no-repeat bottom right #58a; //回退方案
background-position: right 20px bottom 10px;
}
backgroung-origin
在給背景圖片設(shè)置距離某個(gè)角的偏移量時(shí)端壳，有一種情況極其常見：偏移量與容器的內(nèi)邊距一致告丢。如果采用上面提到的 background-position 的擴(kuò)展語法方案，代碼看起來會(huì)是這樣的
padding: 10px;
background: url(code-pirate.svg) no-repeat #58a;
background-position: right 10px bottom 10px;
上面定義方式的缺點(diǎn)：每次都要改動(dòng)三個(gè)值，所以有一個(gè)更簡(jiǎn)單的辦法可以實(shí)現(xiàn)這個(gè)需求：讓它自動(dòng)地跟著我們?cè)O(shè)定的內(nèi)邊距走岖免，不用另外聲明偏移量的值
默認(rèn)情況下岳颇，background-position 是以 padding box 為準(zhǔn)的，這樣邊框才不會(huì)遮住背景圖片
background-position: top left;
top left 默認(rèn)指的是 padding box 的左上角,這樣邊框才不會(huì)遮住背景圖片
盒模型如下圖
將 backgroung-origin 設(shè)置為content-box,background-position 中使用的邊角關(guān)鍵字將會(huì)以內(nèi)容區(qū)的邊緣作為基準(zhǔn)（也就是說颅湘，此時(shí)背景圖片距離邊角的偏移量就跟內(nèi)邊距保持一致了）：如下代碼
padding: 10px;
background: url("code-pirate.svg") no-repeat #58a bottom right; /* 或 100% 100% */
background-origin: content-box;
案例展示：
.three {
width: 200px;
height: 200px;
padding: 20px;
background: url("../logo.jpg") no-repeat #58a;
background-size: 50px 50px;
background-position: right 20px bottom 20px;
//padding改動(dòng)话侧，background-position的偏移量也要改動(dòng)
}
.four {
width: 200px;
height: 200px;
padding: 20px;
background: url("../logo.jpg") no-repeat #58a;
/* background: url('../logo.jpg') no-repeat #58a right bottom; */
background-size: 50px 50px;
background-position: right bottom;
background-origin: content-box; //設(shè)置為以內(nèi)容區(qū)為基準(zhǔn)，padding不在影響它
}
calc()方案
以左上角偏移的思路來考慮闯参，其實(shí)就是希望它有一個(gè) 100% - 20px 的水平偏移量瞻鹏，以及 100% - 10px 的垂直偏移量
width: 200px;
height: 200px;
background: url("../logo.jpg") no-repeat #58a;
background-size: 50px 50px;
background-position: calc(100% - 20px) calc(100% - 10px); //左上角偏移
邊框內(nèi)圓角
box-shadow, outline, "多重邊框"
一個(gè)容器，只在內(nèi)側(cè)有圓角鹿寨，而邊框或描邊的四個(gè)角在外部,仍然保持直角的形狀
.parent {
width: 200px;
height: 60px;
background: #655;
padding: 0.8em;
}
.child {
font-size: 10px;
background: tan;
border-radius: 10px;
padding: 2em;
text-align: center;
}
這個(gè)方法很好新博，但要求我們使用兩個(gè)元素，如果我們只需要一個(gè)元素呢脚草？
.parent1 {
margin: 100px;
width: 200px;
background: tan;
border-radius: 10px;
padding: 10px;
box-shadow: 0 0 0 10px #655;
outline: 12px solid #655;
}
.parent2 {
margin: 100px;
width: 200px;
background: tan;
border-radius: 10px;
padding: 10px;
box-shadow: 0 0 0 10px #655;
outline: 12px solid red;
}
條紋背景
CSS 線性漸變赫悄，background-size
水平條紋
假設(shè)我們有一條基本的垂直線性漸變，顏色從 #fb3 過渡到 #58a
<style>
.app {
width: 300px;
height: 300px;
}
.one {
background: linear-gradient(#fb3, #58a);
}
.two {
background: linear-gradient(#fb3 30%, #58a 30%);
background-size: 100% 30px;
}
</style>
<div class="app one"></div>
<div class="app two"></div>
如果我們把第二個(gè)色標(biāo)的位置值設(shè)置為 0馏慨，那它的位置就總是會(huì)被瀏覽器調(diào)整為前一個(gè)色標(biāo)的位置值,如果要?jiǎng)?chuàng)建超過兩種顏色的條紋埂淮，也是很容易的
<style>
.app {
width: 300px;
height: 300px;
}
.three {
background: linear-gradient(
rgb(0, 183, 255) 33.3%,
yellow 0,
blue 66.6%,
green 0
);
background-size: 100% 60px;
}
</style>
<div class="app three"></div>
垂直條紋
background: linear-gradient(to right, /* 或 90deg */ #fb3 50%, #58a 0);
background-size: 30px 100%;
