《css揭祕》學習筆記（一）

第0章 關於本書
1、檢測屬性

function testproperty(property){
  var root = document.documentElement;
  if(property in root.style){
    root.classList.add(property.toLowerCase());
    return true;
  }
  root.class classList.add('no' + property.toLowerCase());
  return false;
}

2、檢測值

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編碼技巧
儘量減少程式碼重複
在實踐中，程式碼可維護性的最大要素是儘量減少改動時要編輯的地方。

舉例說明

padding:6px 12px;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: 4px;
box-shadow: 0 1px 5px gray;
color: white;
text-shadow:0 -1px 1px #335166;
font-size:20px;
line-height:30px;

以上的程式碼有什麼問題呢？

如果需要改變字號，那麼同時需要調整行高。【當某些值相互依賴時，應該把它們的相互關係用程式碼表達出來】
如果將父級的字號加大，則不得不修改每一處使用絕對值作為字型尺寸的樣式。
需要確定哪些效果是應該跟著變大變小，哪些效果是保持不變的
產生主色調的亮色和暗色變體，其實可以使用將半透明的黑色或白色疊加在主色調上。

background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);

//作者建議使用HSLA而不是RGBA來產生半透明的白色。因為它的字元長度更短，重複率更低。

經過修改後的程式碼如下：

padding: .3em .8em;
border: 1px solid rgba(0,0,0,.1);
background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
border-radius: .2em
box-shadow: 0 .05em .25em rgba(0,0,0,.5);
color: white;
text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
font-size: 125%;
line-height:1.5;

關於使用rem還是em還是百分比，需要根據具體情況來決定。
【插播筆試題】
Q：line-height:1.5 與line-height:150%的差別？

line-height:1.5 是根據自身元素的font-size進行計算。
line-height:150% 是根據父元素繼承而來的font-size進行計算。
Q：rem,em,px的差別

rem css3新增單位。rem為元素設定字型大小時，相對的只是HTML根元素。【IE8以下不支援】
em 相對於父元素的字型大小。
px 畫素px是相對於顯示器螢幕解析度而言的
繼續回到css編碼技巧。

有時候，程式碼易維護和程式碼量少不可兼得。

例如，為元素新增一個10px寬的邊框，但左側不加邊框
border-width: 10px 10px 10px 0;
但若以後需要改動邊框的寬度，需要同時改3個地方。那麼以下這種方式可能更好。

border-width: 10px;
border-left: 0;
currentColor【IE9+支援】

例如，我們想讓所有的水平分割線元素自動與文字顏色保持一致，只需要這樣寫。
hr { background: currentColor;}
border和box-shadow預設的顏色就是當前的文字顏色，也就是類似currentColor。currentColor本身就是很多顏色屬性的初始值，例如border-color、outline-color、text-shadow和box-shadow的顏色。【iOS Safari瀏覽器下(iOS8)下，currentColor有一些bug，例如偽元素hover時候，background:currentColor的背景色不會跟著變化。關於currentColor其他資訊可檢視張鑫旭部落格，currentColor-CSS3超級好用CSS關鍵字。
繼承 inherit

例如，在建立提示框時，可能希望小箭頭能自動繼承背景和邊框的樣式。就可以這樣做。 .

callout:before {
   //其他程式碼
   background: inherit;
   border: inherit;
}

相信你的眼睛，而不是數字
視覺上的錯覺在任何形式的視覺設計中都普遍存在。如果希望四邊的內邊距看起來基本一致，需要減少頂部和底部的內邊距。
關於響應式網頁設計
作者提出了一些建議，可能可以避免不必要的媒體查詢
使用百分比長度來取代固定長度，如果做不到，嘗試使用與視口相關的單位(vw,vh,vmin,vmax)，它們的值解析為視口寬度與高度的百分比。
當需要在較大解析度得到固定寬度時，使用max-width
不要忘記為替換元素（例如img,object,video,iframe等）設定一個max-width，值為100%
假設背景圖片需要完整的鋪滿一個容器，可以使用background-size:cover。【在移動網頁中通過css把一張大圖縮小顯示往往不太明智】
當圖片或其他元素以行列式進行佈局，讓視口的寬度來決定列的數量。可以使用彈性盒佈局(Flexbox)或者display:inline-box加上文字折行行為。
在使用多列文字時，指定column-width而不是column-count，這樣可以在較小的螢幕上自動顯示為單列布局。【儘量實現彈性可伸縮的佈局，並在媒體查詢的各個斷點區間內製定相應尺寸】
合理使用縮寫
如果要明確地去覆蓋某個具體展開式屬性並保留其他相關樣式，則需要用展開式屬性。

第二章背景與邊框
1、半透明邊框
opacity
RGBA/HSLA
解決方案：

background-clip：padding-box/*預設值是border-box（背景會被元素的邊框的外沿框裁切掉）,內邊距的外延把背景裁切掉*/

2、多重邊框
box-shadow:利用，實現多邊框，只能設定實線

background:yellowgreen;
box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px rbga(0,0,0,.6);

outline：兩層邊框，邊框不一定會貼合border-radius產生的圓角

background:yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;

3、靈活的背景定位
css2.1只能定點陣圖片在容器左上角的位置。
css3background-position指定背景圖片距離任意角的偏移量，只要在偏移量前指定關鍵字

background:url(code-priate.svg) no-repeat #58a;
background-position:right 20px bottom 10px;
background:url(code-priate.svg)no-repeat bottom right #58a;/*回退方案*/
background-position:right 20px bottom 10px;

偏移量與容器內邊距一致時，設定

padding:10px;
background:url(code-priate.svg)no-repeat #58a 
           bottom right ;
background-origin:content-box;/*預設是以padding-box為準,在這裡改成content-box*/
calc()方案
background:url(code-priate.svg) no-repeat;
background-position:calc(100% - 20px) calc(100% - 10px);

4、邊框內圓角
難題：容器內側有圓角，邊框或者描邊的四個角在外部仍然保持直角。
通常兩個元素可以實現，內外兩個div
只用一個元素

background:tan; /*一個元素實現外邊框直角，內邊框圓角，描邊不會跟著容器走*/
border-radius:.8rem;
padding:1rem;
box-shadow:0 0 0 .6rem #655;
outline:.6rem solid #655

5、條紋背景
水平條紋

background:linear-gradient(#fb3 50%,#58a 50%);
background-size:100% 30px;

不等寬度的條紋

background:linear-gradient(#fb3 30%,#58a 30%);
background-size:100% 30px;

易於dry的程式碼，根據css3規範：如果某個色標的位置值比整個列表中在它之前的色標的位置都要小，則該色標的位置值會被設定為他前面所有色標位置值的最大值。只需修改前面的值：

background:linear-gradient(#fb3 30%,#58a 0);
background-size:100% 30px;

即後面的0會被修改為30%
三種顏色的水平條紋

background:linear-gradient(#fb3 33.3%,#58a 0, #58a 66.6%, yellowgreen 0);
background-size:100% 45px;

垂直條紋
開頭加一個引數，預設是to bottom，而且需要把background-size的兩個值顛倒。

background:linear-gradient(to right,/*或者90deg*/
           #fb3 50%,#58a 0);
background-size:30px 100%;

斜條紋

background:linear-gradient(45deg,
           #fb3 25%, #58a 0,#58a 50%, #fb3 0, #fb3 75%, #58a 0);
background-size:30px 30px;

這樣建立出來的條紋要細一些，因為勾股定理，如果想要15px,需要將background-size設定為43；
更好的斜向條紋

background:repeating-linear-gradient(45deg,#fb3 #58a 30px);

以下可以得到和上面斜條紋一樣的形狀，不需要考慮勾股定理了

background:repeating-linear-gradient(45deg,
           #fb3, #fb3 15px, #58a 0, #58a 30px);

靈活的同色繫條紋

background : #58a;
background-image: repeating-linear-gradient(30deg,
                  hsla(0,0%,100%,.1),
                  hsla(0,0%,100%,.1), 15px;
                  transparent 0, transparent 30px);

6、複雜的背景圖案
網格

background:white;
background-image:linear-gradient(90deg,
                  rgba(200,0,0,.5) 50% transparent 0),
                 linear-gradient(
                  rgba(200,0,0,.5) 50% transparent 0),
background-size: 30px 30px;

希望網格中格子大小可以調整，但是網格線條的粗細同時保持固定，使用長度而不是百分比作為色標：

background:58a;
background-image:linear-gradient(white 1px, transparent 0),
                 linear-gradient(90deg, white 1px, transparent 0),
background-size: 30px 30px;

兩幅不同顏色，不同線寬打的網格圖案疊加---藍圖網格。

background:58a;
background-image:linear-gradient(white 2px, transparent 0),
                 linear-gradient(90deg, white 2px, transparent 0),
                 linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0),
                 linear-gradient(90deg,hsla(0,0%,100%,.3) 1px,transparent 0),
background-size: 75px 75px 75px 75px,
                 15px 15px 15px 15px;

波點
不適用的波點

background:#655;
background-image:radial-gradient(tan 30%, transparent 0);
background-szie:30px 30px;

真正的波點：

background:#655;
background-image:radial-gradient(tan 30%, transparent 0)
                  radial-gradient(tan 30%, transparent 0);
background-szie:30px 30px;
background-position:0 0 15px 15px;

棋盤

background:#eee;
background-image:radial-gradient(45deg, #bbb 25%, transparent 0),
                  radial-gradient(45deg, transparent 75%, #bbb 0),
                  radial-gradient(45deg, #bbb 25%, transparent 0),
                  radial-gradient(45deg, transparent 75%, #bbb 0);
background-position:0 0 15px 15px,
                    15px 15px,30px 30px;
background-szie:30px 30px;

使用svg實現

<svg xmlns="http://www.w3.org/2000/svg"
  width="100" height="100" fill-opacity=".25">
  <rect x="50" width="50" height="50"/>
  <rect y="50" width="50" height="50"/>
</svg>

css程式碼處理為多行：在行末打上反斜槓（“\”） 換行。
7、偽隨機背景

background:hsl(20%, 40%, 90%);
background-image:
      linear-gradient(90deg, #fb3 11px, transparent 0),
      linear-gradient(90deg, #ab4 23px, transparent 0),
      linear-gradient(90deg, #655 41px, transparent 0),
background-szie:41px 100%, 61px 100%, 83px 100%;

8、連續的影象邊框

padding: 1rem;
border: 1rem solid transparent;
background: liner-gradient(white, white),
            url(store-art.jpg);
background-size: cover;
background-clip: padding-box, border-box;
background-origin: border-box;

簡寫為

padding: 1rem;
border: 1rem solid transparent;
background: liner-gradient(white, white) padding-box,
            url(store-art.jpg) border-box 0 /cover;

老式信封

padding: 1rem;
border: 1rem solid transparent;
background: liner-gradient(white, white) padding-box,
            repeating-linear-gradient(45deg, red 0, red 12.5%,
            transparent 0 , transparent 25%,
            #58a 0, #58a 37.5%,
            transparent 0, transparent 50%)
            0 / 5rem 5rem;