一個頁裡的細節，從重構的角度往看，頁裡的精致度，代碼的可讀性、擴大性，為下流辦事的代碼解釋，交互接心款式的謄寫，代碼的緊縮，圖片的劣化等皆能夠回為細節處置，我的懂得是，適才提到的細節處置是每一個重構工程師皆應當具有的根本技巧，不克不及算是實正意義上的細節，好的細節處置應當是從用戶動身，應當是收自心坎對用戶的一種關心。上面有兩個小例，皆是我們做頁裡經常睹的板塊，假如我們仔細處置一下，大概會讓用戶會倍感知心。
輪播圖
如上圖，輪播圖上切換按鈕(如上圖小圓塊按鈕)是用戶對輪播圖舉行交互的主要進操縱面，主要水平無庸置疑，正在剖析計劃稿的時刻發明，按鈕的可面擊地區太小瞭，隻要22×2!要用戶完成圖片的切換明顯是一件異常苦楚的事，那會給用戶帶去沒有愉悅的心境。是以，我們得念方法讓面擊地區變年夜
大概的辦理方法：
1、發起產物讓視覺計劃師把按鈕改年夜一面。
知會產物後，我們會先用代碼把按鈕調年夜，給出截圖讓視覺計劃師看。
下為3像素，視覺出題目，但面擊地區照樣太小，以下圖：
下為4像素，面擊地區委曲能夠接收，但視覺計劃師認為按鈕太年夜，視覺後果欠安，以下圖：
成果計劃師照樣保持用本來的按鈕年夜小
假如從新計劃按鈕，轉變按鈕的表示情勢呢? 明顯弗成止，視覺計劃師沒有會為瞭一個小修改而隨意馬虎轉變視覺作風，縱然計劃師贊成，改完以後計劃稿要從新給產物考核，經由過程考核以後再給重構，明顯那個辦法的相同本錢戰修改本錢皆太下瞭，性價比沒有下。
2、保存本計劃，經由過程CSS去掌握
輪播圖那類按鈕的構造我們一樣平常會如許寫：
要真現色塊地區是22×2，現實可面地區是22×12，兩個辦法：
1、用配景圖：那個色塊比擬簡略，雜色圓角，款式完整能夠掌握，出有需要用配景圖;
2、用款式掌握：為瞭使可面地區下為12像素，那末感化元素的尺度盒子有以下幾種方法
A、height+padding;
B、height+border;
C、height+真元素(E:after / E:before);
因為配景色會感化到padding地區，斟酌兼容高下端閱讀器，A方法沒有實用，B戰C皆能夠用
我們先看一下B方法—- height+border，CSS代碼以下：
運轉代碼後會發明，IE6戰IE7表現一般，然則Chrome、Firefox、Opera、IE7+的border地區也添補瞭配景色，囧
(Chrome、Firefox、Opera、IE7+)
(IE6、IE7)
我們再看一下C方法—-height+真元素(E:after / E:before)，CSS代碼以下：
那回Chrome、Firefox、Opera、IE7+表現一般瞭，然則IE6戰IE7其實不支撐真元素E:after戰E:before，色塊消逝瞭：
(Chrome、Firefox、Opera、IE7+)
(IE6、IE7)
是以，我們隻好用B方法(height+border)對IE6 戰IE7 做hack處置瞭，終極代碼以下：
到此，輪播圖按鈕的可面擊地區由本來的22×2增長到瞭22×12，是本來的6倍，如許用戶便可以很輕易天完成圖片的切換，舒心的操縱。
線上後果：/download_channel.html
導航
站面導航，一樣平常都邑有3態的計劃：常態，Hover態，選中態。為瞭雅觀，許多產物皆愛好把鏈接實線框往失落：
因而我們正在a標簽減一個CSS款式outline:none，把面擊實線框往失落。然則IE6戰IE7沒有支撐那個屬性，為瞭兼容IE6戰IE7，正在a標簽減上hidefocus=true屬性，乃至有很多同窗大概會減上對用戶異常沒有友愛的onfocus=this.blur() 。
onfocus=this.blur()戰hidefocus=true皆能夠真現往失落IE6、IE7的面擊實線，然則前者會使鏈接散焦觸收時掉往核心，核心從新回到文檔的最開端。爾後者是IE的公有屬性，沒有會使鏈接散焦觸收時掉往核心
為何我們要誇大鏈接的散焦?斟酌到視障人士會用到讀屏硬件，讀屏硬件會讀出得到散焦的標簽裡內容，而onfocus=this.blur()中止瞭視障用戶的Tab鍵途徑，致使Tab光標沒法散焦頁裡的下一個掌握器(鏈接、表單域、object等)。
有興致的同窗能夠瀏覽一下淘寶UED的：《瞽者站少切齒腐心的onfocus=this.blur()》
下圖為該文章中往除實線框辦法比較圖
實在，正如《瞽者站少切齒腐心的onfocus=this.blur()》做者所寫，實線框的存正在有它的公道性，本人也很認同。假定有如許的一個景象：您到某個站面查材料，當您發明適合的材料，剛念挪動鼠標往翻開鏈接的時刻，發明鼠標壞瞭，但您念正在換鼠標之前把材料瀏覽完，因而您會按Tab鍵往探求該鏈接的核心，這時候候，實線框便會贊助您很快找到該鏈接，高興完成材料瀏覽。
固然那個景象產生的幾率微不足道，但弗成否定這類以工資本的計劃動身面是好的，是公道的。我們轉頭看往實線框的需供，把實線框往失落的做法明顯違反實線框的計劃初志，而兼容IE6戰IE7的處置辦法也沒有相符構造、款式、行動相分別的本則，是以我們得念一個既能知足現實需供，又能服從實線框的計劃企圖，而且沒有影響頁裡構造的辦法。如今線上的處置辦法是：
1、 給導航的a標簽減一個a:focus的真類款式，使之取Hover款式一樣，表現Tab的選中狀況
2、IE6、IE7沒有支撐a:focus真類，則保存本鏈接實線框，沒有做hidefocus=true處置，文雅升級，包管Tab可選
線上頁裡導航：/
(Chrome、Firefox、Opera、IE7+)
*註：Opera的Tab鍵默許隻選中Form元素，要用Ctrl+高低偏向鍵能力選中鏈接
(IE6、IE7)
用Opera的同窗能夠看到，當鏈接得到核心時，鏈接邊框款式照樣存正在，以下圖：
可睹CSS的outline:none並出有使Opera的鏈接框往失落。
辦理的辦法是自界說一個outline款式，然後讓邊框通明就好瞭，是以能夠如許處置：
E:focus{ outline:1px solid transparent}
現附上此辦法的Demo：
Demo：/demos/dq_home_demo/home_20121224.html
大概通俗用戶沒有會用到Tab選中鏈接如許的操縱，但我們不克不及是以而沒有照料特別用戶群，而像導航此類正在網站比擬主要地位上的鏈接，更應當賜與照料。
對付重構工程師，那些小的技巧處置其實不須要太下的真現本錢，做沒有做處置皆能夠下粗度復原計劃稿，視覺計劃師沒有會請求我們把輪播圖按鈕面擊地區變年夜一面，產物也沒有會讓我們為導航鏈接減上Tab選中款式，隻不外有一個題目我們要問一下本身，頁裡究竟是為誰而做?念清晰後，信任我們會更關懷用戶體驗，更留意細節的處置，也便沒有會為多減幾止代碼覺得貧苦或出有需要，正在我們力所能及的規模下，多幾止代碼就可以為用戶帶去更多，為何沒有往做呢?
記得曾帶我的徒弟對我道過，重構工程師不該該知足100%復原計劃稿，更應當往尋求101%復原度，多出的1%便是對頁裡細節的把控，也能夠道是重構工程師的主不雅能動性。那個1%正在100%中所占比例其實不起眼，但假如處置得好，可使頁裡更隱級數。