color

也許你天天都在寫color: #xxx，但是沈条，你是否還記得什么是color？你是不是第一反應(yīng)：字體顏色诅炉。

如果是蜡歹，很遺憾，color就是被你遺忘的CSS涕烧。

如果是月而，你是否曾想過，字體大小叫font-size澈魄，字體粗細(xì)叫font-weight景鼠，字體類型叫font-family……為何，偏偏字體顏色是color，而不是font-color呢铛漓？以及溯香，font縮寫里為什么沒有color的位置？

一切只因color浓恶，不是字體顏色玫坛。

color，更好的叫法應(yīng)該是foreground-color包晰，前景色湿镀。前景色這個(gè)詞，在CSS里伐憾，應(yīng)該很陌生勉痴，基本不會(huì)被人叫出來，而與之相對的是background-color树肃，背景色蒸矛。是的，這才是真正的color胸嘴，與background-color相對的顏色雏掠。

問題就是，什么是前景色劣像？不在背景上的顏色都是前景色乡话。。耳奕。呵呵绑青，有點(diǎn)放屁的感覺。

另外一個(gè)問題吮铭，哪些顏色是前景色时迫？除了background-color，其他都是前景色谓晌。掠拳。。神經(jīng)病啊~~

好吧纸肉，除了background-color溺欧，有如下color是前景色：

1. 字體顏色：并沒有font-color，只能通過color設(shè)定
2. border-color：邊框顏色
3. outline-color：輪廓顏色
4. column-rule-color：列間邊框顏色
5. text-decoration-color：下劃線顏色
6. text-shadow：text-shadow中的顏色
7. box-shadow：box-shadow中的顏色

除了1以外柏肪，這些前景色和color是什么關(guān)系呢姐刁？聰明的你，一定猜得到烦味。是的聂使，默認(rèn)值壁拉。

在沒有設(shè)定以上2~7的color值時(shí)，瀏覽器對這些顏色的計(jì)算值是color柏靶。

舉個(gè)粟子：

http://component.sankuai.com/component/@mtfe/atom-button#~simpl

兩組按鈕

簡單看下其中一個(gè)填充色按鈕和描邊按鈕的CSS代碼：

Types組按鈕樣式

Line Shape組按鈕樣式

對于這個(gè)組件弃理，比如，我想要添加藍(lán)色填充按鈕和藍(lán)色描邊按鈕屎蜓，那我需要為填充按鈕添加border-color和background-color痘昌，為描邊按鈕添加color和border-color，是否有更簡單的方式呢炬转？答案是有辆苔。使用color就可以做到了。

<style>
  .btn {
    font-size: 20px;
    padding: 1em 2em;
    border-radius: 5px;
    position: relative;
    background-color: transparent;
    outline: 0;
    overflow: hidden;
    border: 2px solid;
  }
  .btn.fill::after{
    content: '';
    box-sizing: border-box;
    border-width: 2em;
    border-style: solid;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
  }
  .btn.fill span {
    color: white;
  position: relative;
  z-index: 1;
  }
  button.orange {
    color: #f80;
  }
  .btn.green {
    color: #06c1ae;
  }
  .btn.red {
    color: #ec5300;
  }
  .btn.grey {
    color: #d2d2d2;
  }
</style>
<button class="btn orange fill"><span>按鈕0</span></button>
<button class="btn orange stroke">按鈕1</button>
<button class="btn green fill"><span>按鈕2</span></button>
<button class="btn green stroke">按鈕3</button>
<button class="btn red fill"><span>按鈕4</span></button>
<button class="btn red stroke">按鈕5</button>
<button class="btn grey fill"><span>按鈕6</span></button>
<button class="btn grey stroke">按鈕7</button>

border-style

使用border實(shí)現(xiàn)各類三角形扼劈，應(yīng)該是很多人都知道的小技巧驻啤。那使用border實(shí)現(xiàn)圓形、實(shí)現(xiàn)三橫線【照片4】测僵，在Boostrap里做響應(yīng)式menu時(shí)可以看到）等呢街佑？

簡單的一個(gè)圓形應(yīng)用：

使用border-style實(shí)現(xiàn)波浪

我們看到，上下內(nèi)容之間捍靠，是有一條波浪分隔的，那如何實(shí)現(xiàn)這條波浪呢森逮？

<style>
  .up, .down {
    height: 100px;
    width: 100%;
    position: relative;
    padding:2em;
    box-sizing: border-box;
  }
  .up {
    background-color: #fecd0f;
    color: #666;
  }
  .up::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    border-bottom: 8px dotted white;
  }
</style>
<div style="box-shadow:0 0 4px;width:250px;">
  <div class="up">
    上面的內(nèi)容在這里
  </div>
  <div class="down">
    下面的內(nèi)容在這里
  </div>
</div>

三橫線

使用border-style實(shí)現(xiàn)三橫線

的實(shí)現(xiàn)：

<style>
  .menu {
    display: inline-block;
    border-width: 9px;
    border-bottom-style: double;
    border-top: 3px solid;
    border-color: #fecd0f;
    width: 2em;
    height: 3px;
  }
</style>
<i class="menu"></i>

其他實(shí)現(xiàn)：

選中radio

<style>
  .radio {
    display: inline-block;
    border: 9px double #fecd0f;
    border-radius: 50%;
  }
</style>
<i class="radio"></i>

錨點(diǎn)和:target

錨點(diǎn)榨婆，可以快速將頁面滾動(dòng)至特定位置；:target選擇器可以選中當(dāng)前錨點(diǎn)褒侧。

錨點(diǎn)定位是一種被忽略得很徹底的定位技術(shù)良风，畢竟現(xiàn)在JS大行其道，前端總會(huì)有的沒的都寫幾行JS搞定闷供，甚是方便烟央。并不是說哪種好哪種壞，都沒有錯(cuò)歪脏，“黑貓白貓疑俭，能抓到老鼠就是好貓”。

考慮一種場景婿失，在手機(jī)端钞艇，使用Hybrid技術(shù)或Web頁面，如下圖：

蒙版場景

當(dāng)點(diǎn)擊底部價(jià)格旁邊的“明細(xì)”時(shí)豪硅，會(huì)出現(xiàn)如下蒙層

蒙版

現(xiàn)在哩照，有一個(gè)操作需要考慮：返回。返回有兩種方式：1. 點(diǎn)擊左上角的自定義的返回按鈕懒浮；2. 安卓用戶點(diǎn)擊手機(jī)自帶的返回按鈕飘弧。

當(dāng)用戶返回時(shí)，最好的操作是僅關(guān)閉蒙層，顯示先前的頁面次伶。要實(shí)現(xiàn)這樣的功能蹋岩，方式1會(huì)相對簡單；方式2学少，對于Hybrid里通常會(huì)在JSBridge里直接添加一個(gè)“返回”的監(jiān)測功能剪个，由Bridge去處理。

那問題是版确，真的需要這樣嗎扣囊？或者，如果它僅僅是Web頁面绒疗，沒有Hybrid的JSBridge怎么辦侵歇？

至少目前，JS沒辦法去監(jiān)聽系統(tǒng)級(jí)返回吓蘑，而這時(shí)候惕虑，錨點(diǎn)和:target就可以很好的替我們實(shí)現(xiàn)這個(gè)功能了。

<style>
  #click-target {
    display: inline-block;
    line-height: 3em;
    width: 7em;
    text-align: center;
    background-color: #f80;
    color: white;
    outline: none;
  }
  .my-target {
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
    color: white;
    transform: translateY(100%);
 
  }
  .my-target.width-animate-out {
    transition: transform .2s ease-in-out;
  }
  .my-target:target {
 
    transform: translateY(0);
  }
</style>
<a href="#my-target" id="click-target">點(diǎn)一個(gè)</a>
<div id="my-target" class="my-target width-animate-out">哎呀磨镶，我彈出來了~~</div>

除了target具有“定位”功能外溃蔫，input也是一個(gè)很好的定位Hack。有興趣的可以自行研究琳猫。

錨點(diǎn)當(dāng)然有其問題伟叛，每個(gè)技術(shù)都有其適用場景。比如脐嫂，錨點(diǎn)會(huì)產(chǎn)生歷史記錄统刮，這是一個(gè)最需要考慮的問題了。其他的账千，你們用了就會(huì)發(fā)現(xiàn)侥蒙，這里不細(xì)說。

定時(shí)隱藏

通常匀奏，我們在處理頁面或某個(gè)操作的錯(cuò)誤提醒時(shí)鞭衩，都習(xí)慣性使用toast模式，會(huì)定個(gè)時(shí)攒射，在特定時(shí)間后讓toast消失醋旦。對于前端來講，這是非常熟悉的應(yīng)用場景会放，我們的代碼也經(jīng)常是這樣的：

setTiimeout(function() {
?  // 關(guān)閉嘍
?  thatElement.style.display = 'none'
}, 1000)

拋開你已經(jīng)會(huì)的setTiimeout饲齐，是否可以想想，還有什么方法嗎咧最？在CSS里捂人，同樣存在著定時(shí)功能御雕，只是我們通常會(huì)忽略，或者說我們沒有換個(gè)角度看滥搭。與時(shí)間有關(guān)酸纲，CSS里是動(dòng)畫。

是的瑟匆，只是一個(gè)顯隱闽坡，一個(gè)transition或animation就可以做到了，只需要我們定義transition-delay或者animation-delay愁溜，這就是一個(gè)被我們忽略的定時(shí)疾嗅。實(shí)現(xiàn)及代碼如下：

<style>
  .toast-container {
    position: relative;
    border: 2px dashed #f33;
    border-radius: .5em;
    padding: 2.5em;
    overflow: hidden;
  }
  .toast {
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    text-align: center;
    background: rgba(0, 0, 0, .7);
    color: white;  
    pointer-events: none;
    transition-property: top, opacity, transform;
    transition-duration: .5s, 2s, .2s;
    transition-delay: 0s, 1.5s, 3.5s;
    transition-timing-function: ease-in-out;
    transform: translateY(0);
    opacity: 1;
    padding: .5em 0;
  }
  #toast-trigger:checked ~ .toast {
    top: 0;
    opacity: 0;
    transform: translateY(-100%);
  }
</style>
<div class="toast-container">
  <input type="checkbox" id="toast-trigger" />
  <label for="toast-trigger">Show me toast</label>
  <i class="toast">哈哈哈哈，我就是那個(gè)toast啊</i>
</div>

例子中使用的是transition冕象，同樣的代承，你也可以使用animation去實(shí)現(xiàn)其他的定時(shí)任務(wù)。對于setInterval任何渐扮，我們只需要使用animation-iteration-count: infinite;即可论悴。當(dāng)然，太過復(fù)雜的定時(shí)任務(wù)墓律，還是使用setTimeout/setInterval或requestAnimationFrame會(huì)更好膀估。還是那句話：各種技術(shù)都有其適用場景。

寬高等比縮放

在處理圖片時(shí)只锻，我們有時(shí)候需要保證圖片的寬度和高度保持一定的比例R玖像，當(dāng)屏幕的寬度或者高度變化時(shí)，我們的圖片能夠按比例R進(jìn)行縮放齐饮。比方說：

初始時(shí)，屏幕width = 1000px笤昨，圖片width = 屏幕width * 0.5 = 500px祖驱，height = 圖片width * 0.6 = 300px

縮放屏幕width = 800px，則按上述比例瞒窒，需要圖片：width = 400px捺僻，height = 240px

比較笨的方法是：監(jiān)聽resize => 獲取屏幕寬度 => 計(jì)算出圖片寬高 => style賦值

這樣的方式，不僅笨崇裁，而且匕坯，很耗性能。不管是哪一步拔稳，都是相當(dāng)耗性能的（性能相關(guān)：瀏覽器渲染機(jī)制基礎(chǔ)）

當(dāng)一個(gè)功能有如下情況：

1. 使用JS太耗性能
2. 涉及太多樣式計(jì)算

時(shí)葛峻，你需要考慮是否可以使用CSS解決

放在這個(gè)場景上，既耗性能巴比，又有太多計(jì)算术奖，而且還是尺寸計(jì)算礁遵。監(jiān)聽resize，調(diào)用回調(diào)采记，原本就是一個(gè)前端大忌佣耐。為此，可以想想唧龄，CSS能否解決呢兼砖？答案是肯定的。

這就涉及到另一個(gè)被我們遺忘的CSS了：padding和margin的百分比取值既棺。

padding和margin是個(gè)很有意思的東西讽挟，而在取值上，它們卻給了我們一個(gè)不錯(cuò)的玩法：（由于本例子中援制，我們只使用padding戏挡，以下只說padding）

當(dāng)padding取值為百分比時(shí)，其計(jì)算值相對于包含塊的寬度

這是個(gè)很有趣的計(jì)算規(guī)則晨仑，意味著褐墅，我們的寬高等比縮放就可以完美得解決了。

首先洪己，我們需要一個(gè)元素來定義寬高比：

<div style="width: 50%; padding-top: 30%; height: 0;"></div>

這里妥凳，我們將div的width定義為50%，這就是屏幕width * 0.5答捕；然后逝钥，padding-top: 30%，這就是屏幕width * 0.3拱镐，正好等于圖片width * 0.6艘款。這就是我們要的比例。而height: 0只是為了保證不被污染沃琅。

其次哗咆，我們需要一個(gè)子元素，讓它的寬高為100%益眉，用于存放真正的content晌柬。

<div style="width: 50%; padding-top: 30%; height:0;">
  <div style="width:100%;height:100%;">這里是Content</div>
</div>

很顯然，這樣我們只能得到如下的效果：（以下內(nèi)容比例做了調(diào)整并加了外框郭脂，請不要在意）

等比盒

我們需要調(diào)整一下樣式年碘，保證子元素能確切獲取父元素的寬高，由于我們的父元素沒有height展鸡，只有盒高屿衅，要獲得其盒高，就需要用到position娱颊。因此：

<div style="outline:1px dashed #f88;position:relative;width: 30%; padding-top: 150%; height:0;">
  <div style="outline: 1px solid green;position:absolute;top:0;left:0;width:100%;height:100%;">這里是Content</div>
</div> 

是的傲诵，我們給父元素添加position: relative凯砍，然后讓子元素相對于父元素絕對定位，這樣子元素就能切實(shí)獲取父元素的盒高了拴竹。處理后悟衩， 我們就得到了如下效果：

等比盒最終效果

這樣，我們的寬高等比盒就OK了栓拜。

之前有人問：怎么讓padding的百分比按高度來計(jì)算座泳。這就又涉及到一個(gè)幾乎不會(huì)被人使用的屬性了：writing-mode，這里就不再多說了幕与。

禁用點(diǎn)擊

禁用點(diǎn)擊挑势，指的是對用戶的點(diǎn)擊，不予響應(yīng)啦鸣。在寫React時(shí)潮饱，我們經(jīng)常需要通過某個(gè)條件去判斷是否處理回調(diào)函數(shù)。比如：

<Demo onClick={evt => this.state.disabled ? null : this.demoClicked(evt)} />

這種通過碼方式來判斷诫给，應(yīng)該是很常見的方式香拉，這樣的禁用方式，我喜歡稱之為偽禁用中狂。

實(shí)際上凫碌，我們可以用更簡便的方式來實(shí)現(xiàn)禁用，而且是真禁用胃榕。HTML里盛险，禁用概念在表單元素里是十分常見的，我們會(huì)禁用一個(gè)checkbox勋又，會(huì)禁用一個(gè)button苦掘，但是，我們又往往忘了楔壤，禁用button也就禁用了click事件的響應(yīng)鸟蜡，這是一種真禁用。

對于上述的例子挺邀，我們可以更簡單的：

<button onClick={evt => this.demoClicked(evt)} disabled={this.state.disabled} />

前者我們關(guān)心的是點(diǎn)擊時(shí)候是否禁用了；而后者我們關(guān)心的是點(diǎn)擊是否禁用跳座。從真正意義上講端铛，后者才是合理的，所謂的職責(zé)分離疲眷。事件回調(diào)不應(yīng)該去處理狀態(tài)禾蚕，它只需要去響應(yīng)狀態(tài)，狀態(tài)的維護(hù)交給組件處理狂丝。

表單相關(guān)

表單有很多的小巧運(yùn)用换淆，本文的篇幅已經(jīng)有點(diǎn)長了哗总，就先這樣，下次續(xù)倍试。