三年重構老司機二刷《css secrets》覺得有些東西還是應該記錄下來,本文內容來自書籍《css secrets》中文名叫《css揭秘》,做筆記的過程中我會根據自己的過往經驗加上自己的理解和看法,用通俗的表達對一些知識點進行解釋。本書的物件是有一定css開發經驗的人,如果你是新手,閱讀起來可能有點吃力,同時,筆記也是針對我個人的查漏補缺,有些知識點並不會記錄進去。
h1
@supports
(text-shadow
: 0 0 .3em gray)
}
檢測某個樣式屬性是否被支援
var root = document.documentelement;
// function
testproperty
(property)
root.classlist.
add(
'no-'
+ property.
tolowercase()
);return
false
;}
檢測某個具體的屬性值是否支援
它賦給對應的屬性,然後再檢查瀏覽器是不是還儲存著這個值很顯然,這個過程會改變元素的樣式,因此我們需要乙個隱藏元素:
function
testvalue
(id, value, property)
root.classlist.
add(
'no-'
+ id)
;return
false
;}
瀏覽器css字首
將標準屬性寫在最後總是明智的,但是也不需要將所有瀏覽器的字首的寫上,因為有些瀏覽器可能沒實現,有些瀏覽器一開始就用標準的寫法實現,所以人工很難維護,我們可以借助一些自動化工具。
自動化工具:autoprefixer、預處理器的mixin、js執行出相容結果再處理的-prefix-free
-webkit- (谷歌, safari, 新版opera瀏覽器等)
-moz- (火狐瀏覽器)
-o- (舊版opera瀏覽器等)
-ms- (ie瀏覽器 和 edge瀏覽器)
儘量減少**重複
相互關係用**表示
**易維護 vs. **量少
currentcolor,一直被解析為color
hr
繼承
input, select, button
a
建立提示框的時候,你可能希望它的小箭頭能夠自動繼承背景和邊框的樣式
.callout
.callout::before
相信你的眼睛,而不是數字
人的眼睛並不是一台完美的輸入裝置。
數值上垂直居中,但視覺上稍微偏下了
我們傾向於把圓形感知得比其實際尺寸更小一些
字母的形狀在兩端都比較整齊,而頂部和底部則往往參差不齊,從而導致你的眼睛把這些參差不齊的空缺部分感知為多出來的內邊距。因此,如果我們希望四邊的內邊距看起來是基本一致的,就需要減少頂部和底部的內邊距。
關於響應式網頁設計
使用百分比長度來取代固定長度。或者其他類似相對單位如vw/vh/vmin/vmax
使用 max-width 而不是width,可以適應小螢幕,不需要**查詢
給替換元素(img,object,video,iframe,input,textarea,select)設定max-width:100%
background-size: cover
背景完整地鋪滿乙個容器
讓視口的寬度來決定列的數量
合理使用簡寫
簡寫前
注:background-position
方向或數值後面的 「/」 表示background-size
屬性大小。
簡寫後
這樣簡寫將有利於維護修改。
我應該使用預處理器嗎
目前常見預處理器有 stylus、sass、less等
還有類似postcss,myth等強大先進的工具,如果使用得當,它們在大型專案中可以讓**更加靈活。
但是使用預處理器有一些很常見的弊端。
css 的檔案體積和複雜度可能會失控。這裡大概說的是層級巢狀濫用,這是非常常見的失控,我們甚至忘了怎麼寫出優秀的css樣式。
除錯難度會增加,好在有了sourcemap,不過我遇到的情況是有時候對映不準確。不管是使用sass還是postcss我都遇到了。
一定的延時,編譯需要時間
以上好像都不是什麼好的藉口來拒絕使用預編譯器,當然不是拒絕,我自己每天都用。因為我們希望看到的是css原生支援這些東西,而不是通過預編譯器,當然現在比如變數,計算函式等大部分瀏覽器已經支援了,我們希望環境越來越好,我們的css更加靈活方便。
end.
CSS secrets 讀書筆記(1)
開頭先寫點別的,今天終於離開了生活了一年的國家。心裡有點對未來的期待,終於不是個學生了。出國一年,獲得的收穫可能就是終於想通了以後想幹什麼吧,人總要有一項技術傍身,進可成名立萬,退可養家餬口。今天登機前終於有一家投了簡歷的公司聯絡我了,也算乙個好訊息。前幾天發現了一本寫css很好的書,叫做css s...
《CSS Secrets》讀書筆記(3)
三年重構老司機二刷 css secrets 覺得有些東西還是應該記錄下來,本文內容來自書籍 css secrets 中文名叫 css揭秘 做筆記的過程中我會根據自己的過往經驗加上自己的理解和看法,用通俗的表達對一些知識點進行解釋。本書的物件是有一定css開發經驗的人,如果你是新手,閱讀起來可能有點吃...
讀書筆記 1
從我第一次看到windows就對它那花花綠綠的外表所吸引,大學兩年過來,時間又讓我從另乙個角度重新認識的了這些美麗的。本學期開始圖形程式設計的學習,探索windows圖形系統,並對gdi api,directdraw api進行學習。之所以寫部落格,第 一 是想勉勵自己不斷學習,讓大家監督 第 二 ...