# 觀念/技巧/踩雷分享

**目前公司專案都不會需要支援 IE，請放心使用最新技術**

#### 基礎排版＆文字

- 主流是使用 flex & grid 排版，請務必學會
- 使用 h1~h6 時，不要依賴預設的 styling，請務必 style 給好給滿
- 使用「position: absolute」時，一定至少要給「left,right」+「top,bottom」各一種
- 字體大小盡量不要使用 14 和 20 (微軟正黑體會破字)，但為了通用的話，還是使用 2 的倍數為佳
- line-height 1.618 為黃金比例
- RWD 切斷點
* ~413 (非必要)
* 414~767 (或直接 ~767)
* 768~1023 (平板)
* 1024~1279 (或直接 1024~)
* 1280~ (非必要)
- 每個元素都應該要有自己的參考點，而非參考全螢幕（善用 div）
- inline layout 如果有不同元素，比如：文字+按鈕，請務必讓文字的 line-height 和按鈕同高

#### 跨瀏覽器處理
- safari 下的 linear-gradient 不要用 transparent 會變髒髒黑色，要用 rgba(255, 255, 255, 0)
- 手機版加上 -webkit-overflow-scrolling: touch; 會讓滑動比較順 **（2019-10 更新：最新版的 safari 已經預設了這個行為）**
- ios Safari: 點擊按鈕時會有延遲，那是因為為了偵測是否為 dbClick 事件，可以加上 touch-action: manipulation; 會讓在點擊按鈕時，無法啟用dbClick 縮放。
- transition clip-path 在 safari 上需補上 -webkit- (否則不會作用)
- ios 針對 input / textarea 這些會有預設「內陰影＆border-radius」，要拿掉就加上

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0;

- 如果要「隱藏瀏覽器預設 scrollbar」，要記得 firefox 必須使用下面這行才有用（firefox 限定的）

scrollbar-width: none;

#### 踩雷注意
- 有 flex-box 的狀況下，button 盡量設定 display: block，不然他預設是 inline-block，在高度計算上會有問題（似乎是上下會各多 1px，且這個高度不會被算在 height 內）
- canvas 的寬高如果用 css 去 assign 會有失真問題，要真實寬高的話就直接在 canvas tag 上給 width, height
- 要在信件中插入 html 電子報的話，一律只能使用 inline-style，class 類的在用瀏覽器開啟 Gmail 信件瀏覽的狀況下，class 太多會全部被清掉（詳見電子報）
- 圖片 img 在手機版有 3D Touch 時，有 border-radius 的圖片經長按時會自動變方形 => pointer-events: none 可解（讓 event 在 img 外層）
- Safari 會因為效能考量，使用 transform:translate @ css animation 時，並不會於 100% 時完整的移動到終點。
> e.g.`
@keyframes {
0% {
transform: translate(0px, 0px);
}
100% {
transform: translate(0px, 100px);
}
}`
> 這樣可能會讓最後的動畫結果停止於 translate(0px, 99.75px) 而有微小的像素差，要解決問題只能於 transitionend / animationend 時強制多上一層 `transfrom: translate(0, 100px) !important;` 於 css tree 並接受些許的抖動（？
- 手機版全螢幕問題，建議使用 `window.innerHeight` 來計算 vh，不要直接用 100vh，請參考 https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

#### Tips 小技巧分享
- 讓 browser 能使用「hardware acceleration (硬體/GPU 加速)」，可以在 css 上套用「3D 效果」，就能達到加速（假設某些畫面的轉換有些卡頓時）。ex: transform: translateZ(0), perspective,
- 動畫 transition 進場用 ease-out, 離開用 ease-in（更貼近真實世界的物理效果）
- 善用 grid-auto-flow + auto-fit 就能完美對齊左右排版 [參考文章](https://css-tricks.com/cool-little-css-grid-tricks-for-your-blog/?fbclid=IwAR0BmSxEh01E9FO_hs5VAuaCIeOV56rpmpew2tLfCIULT9ENL9lWlzZafpE)

###### tags: `styling`