前言
何爲技巧,意指表現在文學、工藝、體育等方面的巧妙技能。代碼作爲一門現代高級工藝,推動着人類科學技術的發展,同時猶如文字一樣承託着人類文化的進步。
每寫好一篇文章,都會使用大量的寫作技巧。烘托、渲染、懸念、鋪墊、照應、伏筆、聯想、想象、抑揚結合、點面結合、動靜結合、敘議結合、情景交融、首尾呼應、襯托對比、白描細描、比喻象徵、借古諷今、卒章顯志、承上啓下、開門見山、動靜相襯、虛實相生、實寫虛寫、託物寓意、詠物抒情
等,這些應該都是我們從小到大寫文章而接觸到的寫作技巧。
作爲程序猿的我們,寫代碼同樣也需要大量的寫作技巧。一份良好的代碼能讓人耳目一新,讓人容易理解,讓人舒服自然,同時也讓自己成就感滿滿(哈哈,這個纔是重點)。因此,我整理下三年來自己使用到的一些CSS開發技巧,希望能讓你寫出耳目一新、容易理解、舒服自然的代碼。
目錄
既然寫文章有這麼多的寫作技巧,那麼我也需要對CSS開發技巧整理一下,起個易記的名字。
- Layout Skill:佈局技巧
- Behavior Skill:行爲技巧
- Color Skill:色彩技巧
- Figure Skill:圖形技巧
- Component Skill:組件技巧
備註
- 代碼只作演示用途,不會詳細說明語法
- 部分技巧示例代碼過長,使用
CodePen
進行保存,點擊在線演示即可查看 - 兼容項點擊鏈接即可查看當前屬性的瀏覽器兼容數據,自行根據項目兼容需求考慮是否使用
- 以下代碼全部基於CSS進行書寫,沒有任何JS代碼,沒有特殊說明的情況下所有屬性和方法都是CSS類型
- 一部分技巧是自己探討出來的,另一部分技巧是參考各位前端大神們的,都是一個互相學習的工程,大家一起進步
Layout Skill
使用vw定製rem自適應佈局
/* 基於UI width=750px DPR=2的頁面 */
html {
font-size: calc(100vw / 7.5);
}
使用:nth-child()選擇指定元素
- 要點:通過
:nth-child()
篩選指定的元素設置樣式 - 場景:表格着色、邊界元素排版(首元素、尾元素、左右兩邊元素)
- 兼容::nth-child())
- 代碼:在線演示
使用writing-mode排版豎文
- 要點:通過
writing-mode
調整文本排版方向 - 場景:豎行文字、文言文、詩詞
- 兼容:writing-mode
- 代碼:在線演示
使用text-align-last對齊兩端文本
- 要點:通過
text-align-last:justify
設置文本兩端對齊 - 場景:未知字數中文對齊
- 兼容:text-align-last
- 代碼:在線演示
使用:not()去除無用屬性
使用object-fit規定圖像尺寸
- 要點:通過
object-fit
使圖像脫離background-size
的約束,使用<img>
來標記圖像背景尺寸 - 場景:圖片尺寸自適應
- 兼容:object-fit
- 代碼:在線演示
使用overflow-x排版橫向列表
- 要點:通過
flexbox
或inline-block
的形式橫向排列元素,對父元素設置overflow-x:auto
橫向滾動查看 - 場景:橫向滾動列表、元素過多但位置有限的導航欄
- 兼容:overflow-x
- 代碼:在線演示
使用text-overflow控制文本溢出
- 要點:通過
text-overflow:ellipsis
對溢出的文本在末端添加...
- 場景:單行文字溢出、多行文字溢出
- 兼容:text-overflow、line-clamp、box-orient
- 代碼:在線演示
使用transform描繪1px邊框
使用transform翻轉內容
使用letter-spacing排版倒序文本
- 要點:通過
letter-spacing
設置負值字體間距將文本倒序 - 場景:文言文、詩詞
- 兼容:letter-spacing
- 代碼:在線演示
使用margin-left排版左重右輕列表
Behavior Skill
使用overflow-scrolling支持彈性滾動
- 要點:iOS頁面
非body元素
的滾動操作會非常卡(Android不會出現此情況),通過overflow-scrolling:touch
調用Safari原生滾動來支持彈性滾動,增加頁面滾動的流暢度 - 場景:iOS頁面滾動
- 兼容:iOS自帶
-webkit-overflow-scrolling
body {
-webkit-overflow-scrolling: touch;
}
.elem {
overflow: auto;
}
使用transform啓動GPU硬件加速
- 要點:有時執行動畫可能會導致頁面卡頓,可在特定元素中使用硬件加速來避免這個問題
- 場景:動畫元素(絕對定位、同級中超過6個以上使用動畫)
- 兼容:transform
.elem {
transform: translate3d(0, 0, 0); /* translateZ(0)亦可 */
}
使用attr()抓取data-*
使用:valid和:invalid校驗表單
使用pointer-events禁用事件觸發
- 要點:通過
pointer-events:none
禁用事件觸發(默認事件、冒泡事件、鼠標事件、鍵盤事件等),相當於<button>
的disabled
- 場景:限時點擊按鈕(發送驗證碼倒計時)、事件冒泡禁用(多個元素重疊且自帶事件、a標籤跳轉)
- 兼容:pointer-events
- 代碼:在線演示
使用+或~美化選項框
使用:focus-within分發冒泡響應
- 要點:表單控件觸發
focus
和blur
事件後往父元素進行冒泡,在父元素上通過:focus-within
捕獲該冒泡事件來設置樣式 - 場景:登錄註冊彈框、表單校驗、離屏導航、導航切換
- 兼容::focus-within、:placeholder-shown
- 代碼:在線演示
使用:hover描繪鼠標跟隨
使用max-height切換自動高度
- 要點:通過
max-height
定義收起的最小高度和展開的最大高度,設置兩者間的過渡切換 - 場景:隱藏式子導航欄、懸浮式摺疊面板
- 兼容:max-height
- 代碼:在線演示
使用transform模擬視差滾動
- 要點:通過
background-attachment:fixed
或transform
讓多層背景以不同的速度移動,形成立體的運動效果 - 場景:頁面滾動、視差滾動文字陰影、視差滾動文字虛影
- 兼容:background-attachment、transform
- 代碼:在線演示
使用animation-delay保留動畫起始幀
- 要點:通過
transform-delay
或animation-delay
設置負值時延保留動畫起始幀,讓動畫進入頁面不用等待即可運行 - 場景:開場動畫
- 兼容:transform、animation
- 代碼:在線演示
使用resize拉伸分欄
Color Skill
使用color改變邊框顏色
- 要點:
border
沒有定義border-color
時,設置color
後,border-color
會被定義成color
- 場景:邊框顏色與文字顏色相同
- 兼容:color
.elem {
border: 1px solid;
color: #f66;
}
使用filter開啓悼念模式
使用::selection改變文本選擇顏色
- 要點:通過
::selection
根據主題顏色自定義文本選擇顏色 - 場景:主題化
- 兼容:::selection
- 代碼:在線演示
使用linear-gradient控制背景漸變
使用linear-gradient控制文本漸變
- 要點:通過
linear-gradient
設置背景漸變色,配合background-clip:text
對背景進行文本裁剪,添加濾鏡動畫 - 場景:主題化、特色標題
- 兼容:gradient、background-clip、filter、animation、text-fill-color
- 代碼:在線演示
使用caret-color改變光標顏色
- 要點:通過
caret-color
根據主題顏色自定義光標顏色 - 場景:主題化
- 兼容:caret-color
- 代碼:在線演示
使用::scrollbar改變滾動條樣式
- 要點:通過
scrollbar
的scrollbar-track
和scrollbar-thumb
等屬性來自定義滾動條樣式 - 場景:主題化、頁面滾動
- 兼容:::scrollbar
- 代碼:在線演示
使用filter模擬Instagram濾鏡
Figure Skill
使用div描繪各種圖形
使用mask雕刻鏤空背景
- 要點:通過
mask
爲圖像背景生成蒙層提供遮罩效果 - 場景:高斯模糊蒙層、票劵(電影票、購物卡)、遮罩動畫
- 兼容:mask、perspective、transform-style、animation
- 代碼:在線演示
使用linear-gradient描繪波浪線
使用linear-gradient描繪綵帶
使用conic-gradient描繪餅圖
使用linear-gradient描繪方格背景
使用box-shadow描繪單側投影
- 要點:通過
box-shadow
生成投影,且模糊半徑和負的擴張半徑一致,使投影偏向一側 - 場景:容器投影、背景補間動畫1、背景補間動畫2、立體投影、文字立體投影、文字漸變立體投影、長投影、霓虹燈、燈光陰影
- 兼容:box-shadow、filter、text-shadow
- 代碼:在線演示
使用filter描繪頭像彩色陰影
使用box-shadow裁剪圖像
- 要點:通過
box-shadow
模擬蒙層實現中間鏤空 - 場景:圖片裁剪、新手引導、背景鏤空、投射定位
- 兼容:box-shadow
- 代碼:在線演示
使用outline描繪內邊框
Component Skill
迭代計數器
下劃線跟隨導航欄
氣泡背景牆
滾動指示器
故障文本
換色器
- 要點:通過拾色器改變圖像色相的換色器
- 場景:圖片色彩變換
- 兼容:mix-blend-mode
- 代碼:在線演示
狀態懸浮球
粘粘球
商城票券
倒影加載條
- 要點:帶有漸變倒影的加載條
- 場景:加載提示
- 兼容:box-reflect、animation
- 代碼:在線演示
三維立方體
- 要點:三維建模的立方體
- 場景:三維建模
- 兼容:transform、perspective、transform-style、animation
- 代碼:在線演示
動態邊框
標籤頁
- 要點:可切換內容的標籤頁
- 場景:內容切換
- 兼容:scroll-behavior
- 代碼:在線演示
標籤導航欄
摺疊面板
星級評分
加載指示器
自適應相冊
- 要點:自適應照片數量的相冊
- 場景:九宮格相冊、微信相冊、圖集
- 兼容::only-child、:first-child、:nth-child())、:nth-last-child())、~
- 代碼:在線演示
圓角進度條
螺紋進度條
立體按鈕
- 要點:點擊呈現按下狀態的按鈕
- 場景:按鈕點擊
- 兼容:box-shadow
- 代碼:在線演示
混沌加載圈
蛇形邊框
自動打字
結語
寫到最後總結得差不多了,後續如果我想起還有哪些CSS開發技巧遺漏的,會繼續在這篇文章上補全,同時也希望各位朋友對文章裏的要點進行補充或者提出自己的見解。歡迎在下方進行評論或補充喔,喜歡的點個贊或收個藏,保證你在開發時用得上。
最後送大家一個鍵盤!
(_=>[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x<y?2:' 667699'[x=["Bs","Tab","Caps","Enter"][p++]||'Shift',p])}\\|`,m+=y+(x+' ').slice(0,w)+y+y,n+=y+b+y+y,l+=' __'+b)[73]&&(k.push(l,m,n,o),l='',m=n=o=y),m=n=o=y='|',p=l=k=[])&&k.join`
`)()
專欄文章
《靈活運用》系列
- 靈活運用JS開發技巧 強烈推薦收藏👍
《必備工具》系列
- Cmder&iTerm美化你的終端 強烈推薦收藏👍
《隨筆》系列
- 前端性能優化指南 強烈推薦收藏👍
- 詳細判斷瀏覽器運行環境 強烈推薦收藏👍
- H5與App的通訊方式 強烈推薦收藏👍
- 1.5萬字概括ES6全部特性 強烈推薦收藏👍
關注公衆號Uzero
,更多前端小乾貨等着你喔!我是JowayYoung
,喜歡分享前端技術和生活紀事,學習與生活不落下,每天進步一點點,與大家相伴成長