變數握手，CSS、JS 樂無窮 by Rplus -- JSDC 2017

--- title: 變數握手，CSS、JS 樂無窮 by Rplus -- JSDC 2017 description: Use CSS and JS Variables together to make web more wonderful --- <h1 class="workspace"> <div class="left">CSS</div> <div class="right">JS</div> <div class="var">Variables</div> </h1> <style> .present .workspace { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(100deg, #e7e7d0 50%, #18182f 0); text-align: center; font-size: 15vmin; font-weight: 900; line-height: 1; color: #fff; } .present .workspace .left, .present .workspace .right { position: absolute; top: 15%; bottom: 0; width: 50%; flex-grow: 1; height: 100%; overflow: hidden; mix-blend-mode: difference; } .present .workspace .var { position: absolute; top: 40%; left: 50%; transform: translateX(-50%); mix-blend-mode: difference; } .present .workspace .left { left: 0; } .present .workspace .right { right: 0; } </style> <br> <br> <div class="intro"> <a href="https://fb.me/rplus.tw"> <img src="https://avatars.githubusercontent.com/rplus" width="120"> </a> <a href="https://twitter.com/RplusTW">@RplusTW</a> </div> Note: Hi 大家好，我是 R+，今天這一場的主題是「變數握手，CSS、JS 樂無窮」雖然 JSDC 本來跟我說，可以講一場 CSS 的主題來打 JS 的臉我其實也是滿想的，但是有些經驗的前端工程師應該都能理解：前端技術三支柱，並不能偏廢純 CSS 雖然很 geek、很生猛；但還是有它的極限在，CSS 它仍然還是該以 style 為主軸雖然有些 CSS 的 selector 可以做到一些互動的效果但網頁的互動邏輯基本上還是以 JS 作為核心所以今天來分享一些 CSS variables 跟 JS 互動的使用經驗我講的也不一定都對~ 有什麼疑問的話非常歡迎大家一起研究討論你可以在 FB 或 Twitter 上找到我，但技術問題能公開問就公開問盡量不要用私訊，這樣我要是解釋地不好也沒法得到其他人的修正若你比較害羞也可以到 Gitter 上 cue 我，連結會附在最後面啊因為 Gitter 挺冷清的，不用太擔心會有很多人看到 XD --- # <a href="https://translate.google.com/?#en/zh-TW/variables">variables</a> `/v'ɛriəbəlz/` <br><br><br> Note: JS 大家都很常用 var, let, const 這邊就不再多加介紹，今天的主題會著重於 CSS variables，我會先介紹一下 CSS variables 的基礎知識 --- ## CSS Custom Properties for Cascading Variables <br> * CSS Custom Properties * CSS Variables <br> <br> > spec: https://www.w3.org/TR/css-variables-1/ --- ## CSS Custom Properties for Cascading Variables > This module introduces <span>cascading</span> variables as a new primitive value type that is accepted by <span>all CSS properties</span>, and custom properties for defining them. <br> Note: 變數不稀奇，像 SASS 之類的工具也都有，但 cascading 則是 CSS variables 更加靈活的關鍵點 "all CSS properties"! 泛用在 2015 就是候選推薦標準了 Candidate Recommendation spec，滿穩定了，大家可以安心用，不用怕 API 大改 --- ## Syntax ```css .boo { --color-red: #c00; color: var(--color-red, #f00); } ``` <pre><code class="scss hljs"> .heart { --color-red: #f00; --color-blue: #00f; --color-♥: var(--color-red, #900); color: var(--color-♥); } </code></pre> <br> <br> Note: 兩個 dash 後接 custom property 引用時使用 var 包起來，後面可以放 fallback 的屬性值前面的 property 跟後面的 value 都非常寬容，一般只要正常的文字都沒問題，當然特殊符號還是有可能炸掉的但 emoji 是 ok 的~ 對特殊語法有興趣的也可以去讀讀 w3c spec，這 spec 算是字數挺少的 spec 了 XD --- #### 常見使用情境 <ul> <li>顏色</li> <li>尺寸</li> <li>文字</li> <li>media query</li> </ul> Note: 對，基本上就是你會去問 UI 設計師的東西大多像是定義用的，可以想像成 spec 給的值這些定義類的用法跟 SASS 裡的變數比較類似就是定義後讓其它元件可以直接跟變數連動省得異動時每個地方都要去改這些不少文章都會優先以這類顏色、大小的明顯變化來示範 CSS variables 的威力但如果跟 media query 混在一起後就會有比較有趣的變化來看一下 --- ```css :root { --base-font-size: 14px; } .h2 { font-size: var(--base-font-size); } @media (min-width: 600px) { :root { --base-font-size: 16px; } } ``` note: 像這一例中，我們分別在全域與 media query 裡使用 CSS variables 可以讓不同視窗寬度下有不同的基礎字級你可能會說，這個就直接在 media query 裡改 `.h2` 的字級就可以了呀 OK，那兩個呢？ --- ```css :root { --base-font-size: 14px; } .h1 { font-size: calc(var(--base-font-size) * 1.5); } .h2 { font-size: var(--base-font-size); } @media (min-width: 600px) { :root { --base-font-size: 16px; } } ``` Note: 若設計師希望在不同寬度下有不同的字級，但相對大小仍維持相同的比例可以觀察到：在愈多元件相依於同一個值的時候，CSS variables 就愈能體現它的便利性只是這邊也需要留意：除非有管理上的需求，盡量在複數元件都相依的才使用，而不是全部都直接改用而與 media query 搭配的這種例子中也是更明確地展示了 CSS variables 中 cascading 繼承的重要性 --- ## cascade with `font-size` ```scss .ooo { width: 5em; height: 5em; font-size: 20px; &.big { font-size: 50px; } .o { width: 1em; height: 1em; transform: translateX(2.5em); } } ``` note: 這邊先將時光往前移一點，在還沒有 CSS Variables 的時候我們如何利用繼承特性，我們比較常見的類似用法是使用 `font-size` 控制元件的尺寸然後再使用 `em` 就可以便利地調整相對尺寸大小例子中在不同 class 下了不同的 `font-size` 即可一起控制整體元件的尺寸控制子元件尺寸也可以用 `%` 處理，但若需要處理 `transform` 的時候，使用 `%` 就會遇到一些問題不過這樣的繼承只限於很少的屬性，`color`、`font-size`… 所以 CSS variables 出來救大家了~ --- ## [瀏覽器支援](http://caniuse.com/#feat=css-variables) * Global: 78.11% * Taiwan: 84.6% <sub><small>(5% IE 11)</small></sub> --- ## 瀏覽器支援 * Firefox v31 <small><sub>( 2014 / 06 )</sub></small> * Chrome v49 <small><sub>( 2016 / 05 )</sub></small> * Safari v9.1 <small><sub>( 2016 / 05 )</sub></small> * iOS v9.3 <small><sub>( 2016 / 05 )</sub></small> * Android WebView <small><sub>gg</sub></small> * IE <small><sub>gg</sub></small> * Edge v15 <small><sub>( 2017 / 04 )</sub></small>、v16<small><sub>( 2017 / 10 )</sub></small> note: Edge v15 is buggy 問一下，你負責的專案需要支援 IE 11 的可以舉個手嗎？想在工作上使用 CSS Variables 的朋友們，趕快問問附近剛沒舉手的還缺不缺同事 XD 開玩笑~ --- ### Fallback with CSS: ```css @supports ((--a: 1)) { :root { --color-red: #f00; } } ``` note: feature detection IE 11 gg again, QQ --- ### Fallback with JS: ```js if (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) { _html.classList.remove('no-css-variables'); } ``` Note: 類似 Modernizr 處理 class 的方式 CSS variables 基礎介紹到這 --- ## 變數握手 <br> <br> <br> <br> <br> <br>  note: 進主題：握手當然，這邊講的不是自己握手，而是要跟別人互動的握手 --- ## 變數握手 <br> <br> <br> <br> <br> <br>  note: cc0 image source: https://pixabay.com/en/paw-hand-friendship-dog-human-548634/ --- ## 1. set ```js // inline-style element.style.setProperty('--a', 2); ``` <br> <br> <br> <br> note: 一般比較常用的是 set 值在 JS 判斷一些環境後，給定特別設定值再由 CSS variables 在 CSS 裡處理好 UI 的邏輯 React v15.6 才有支援在 style 屬性裡， React 舊版要自己手刻 & 用原生寫法手動更新這寫法其實也挺噁心的就是 https://github.com/facebook/react/pull/9302/files#diff-61273f1ad4383d5a3a802ac95031ade4R220 Vue https://github.com/vuejs/vue/commit/4b8eb75c7a5544a1f65ebd679fd89639208d5976 --- ## 2. get ```js // inline-style element.style.getPropertyValue('--a'); // any case window.getComputedStyle(element).getPropertyValue('--a'); ``` <br> <br> <br> <br> note: get 的情境會比較少一點我自己也是滿少用的，只有一次在處理 CSS image sprite 有用到是也滿好玩的有些 CSS variables 是預寫好在外部 CSS 檔案裡，這種情況就要用第二種方式才能拿到值 --- * CSS variables 擅長：（X）與 JS 溝通（O）在 CSS 裡處理相依  <br> <br> -----  <br> 要不如… 直接用 JS 設定 inline style？ note: 恩… 看到這裡，應該會覺得以前直接設定 inline style 在 DOM 上更直覺一些 XD 但像前面提到的， CSS variables 有個很關鍵的點就在於 `cascade`、繼承的特性我們可以統一在親代層設定一次，而不是每一層都設定一次除了減少 DOM 異動次數以外，更重要的是讓相依的值可以真的是相依，而非依 JS 邏輯處理並依序設定後，才"看似"相依實際來看一些例子 --- [Demo 1: parallax layers @ CodePen](https://codepen.io/Rplus/pen/GOZjKM) <a href="https://codepen.io/Rplus/pen/GOZjKM"> <video autoplay muted controls playsinline loop src="https://giant.gfycat.com/UniformLimpIzuthrush.webm"></video> </a> note: 視差效果很夯，但相對不難的實作原理，相信很多人都玩過、或套用過而這效果其實也很適合用 CSS variables 處理今年的 COSCUP 網站首頁也有使用到視差效果 + CSS variables，有興趣可以去參考看看：） --- ```css .l { transform: translate(-50%, -50%) translate( calc((var(--dx) - .5) * var(--df) * 200%), calc((var(--dy) - .5) * var(--df) * 200%) ); } .box { --dx: 1; --dy: .7; --df: 0; } /* default */ ``` ```js const setDxDy = (evt) => { let dx = evt.layerX / boxWidth; let dy = evt.layerY / boxHeight; box.style.setProperty('--dx', dx); box.style.setProperty('--dy', dy); }; ``` note: 從這例子可以看到，我們只需要設定 dx 跟 dy 就好了其它定位通通會經由設定好的 CSS Variables 處理好相依那開發者的工作就會變成：去找出相依的規則來這部份若用以前的寫法就會是去設定每個 layer 的 `transform`，變成要觸發很多次 DOM 異動數量一多，勢必會影響網頁效能當然，也不是說用 CSS Variables 就通通一定效能一級棒數量多的 CSS repaint 也是很容易有效能差而出現 jank 的情況 --- ## CSS condition ```scss // [--x, --y] = [0, 0] // [--x, --y] = [1, 1] transform: translate( calc(0% - 100% * var(--x)), calc(0% - 100% * var(--y)) ); ``` <a href="https://codepen.io/Rplus/pen/BmKZyL"> 變形：<br> <img src="https://i.imgur.com/xK3QsjC.png" width=250> </a> note: 有 CSS variables 後，CSS 也能做到簡單的判斷那通常會稱作 CSS condition 透過 step function 的概念來切換不同的數值 --- ## CSS Variables 真的是 Variables 嗎？ ```js // JS i = i + 1; ``` ```css /* expected syntax for real CSS variables */ .l + .l { --df: calc(.2 + var(--df)); } ``` <br> <br> note: 順便用這例子提一下為什麼正式名稱不是 CSS Variables 並沒有像 JS 變數的特性 XDD 不能用自己再賦值給自己如果真的需要類似的功能，需要另外一組來更新數值它真的比較適合稱作 Custom Properties --- [Demo 2: re-order @ CodePen](https://codepen.io/Rplus/pen/VraKrr) <a href="https://codepen.io/Rplus/pen/VraKrr"> <video autoplay muted controls playsinline loop src="https://giant.gfycat.com/ParallelFragrantIceblueredtopzebra.webm"></video> </a> note: 公司實際使用：大多仍然是色票、系統 UI 尺寸特殊情境：九宮格調整順序比較常見的解法應該是搭配有 virtual DOM framework，直接操作 data array 的順序那 framework 會自己去異動 DOM 的順序但其實也可以使用 CSS variables 來處理在移動過程中，我們其實不太需要操作真正的資料的順序 --- ### CSS `order` solution ![](https://i.imgur.com/dtEYdIX.png) source: https://www.w3.org/TR/css-flexbox-1/#propdef-order note: 先講一下這個處理方案的主要依據是 CSS 的 `order` 屬性， `order` 目前可以使用在 flexbox & grid system 裡，專門負責 item 的排版順序 painting order 只能吃整數值，初始值為 `0`，可以餵進 keyframes 裡 <3 --- ![](https://i.imgur.com/4p8vdbu.png) ![](https://i.imgur.com/o3oiInD.png) note: 想法是讓初始順序變成目標順序，並再加**修正量**以便排在**目標位置** 這邊的修正量是直接取半格，也就是 `5` 實際使用上跟取 `1` 沒什麼不同，只是在四則運算的算式有些些不同而已而正確的目標位置還另外需要移動方向來判斷往前移動的話，order 應該要比該位置的更小、往後的話應該要更大那這移動原理基本上就是這樣的設計 --- ```js // init tiles.forEach((tile, index) => { well.style.setProperty(`--order-${index}`, index * BASE_NUMBER); tile.style.order = `var(--order-${index})`; }); // in key events targetIndex = (targetIndex + operator + 9) % 9; let dir = originIndex > targetIndex ? -1 : 1; well.style.setProperty( `--order-${originIndex}`, (targetIndex + .5 * dir) * BASE_NUMBER ); ``` note: 在第一步驟先初始化所有的 order，並讓各方塊都吃到這個 order CSS variables 在收到 key event 時，計算一下該 **移動到哪一格** 去、還有 **移動方向** 那最終要輸出的就是：目標 order 再加上方向的修正量 (這邊就看前面修正量是怎麼定的 --- <h3 class="ref">Reference:</h3> * [CSS Custom Properties for Cascading Variables Module Level 1](https://www.w3.org/TR/css-variables-1/) * [CSS Variables: Why Should You Care?](https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care) * [CSS Custom Properties (CSS Variables) Sample](https://googlechrome.github.io/samples/css-custom-properties/index.html) * [Using CSS custom properties (variables) - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) * [It’s Time To Start Using CSS Custom Properties](https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/) * [CSS Variables — No, really!](https://medium.com/dev-channel/css-variables-no-really-76f8c91bd34e) 👍 ----- * [Google: CSS variables](https://www.google.com.tw/search?q=css+variables) * [Twitter: CSS variables](https://twitter.com/search?q=css+variables) note: 「CSS Variables — No, really」這篇挺讚的，CSS variables 的常見誤解跟基本用法都講得挺清楚的~ <3 --- ### 工商 <ul class="hihihi"> <li><a href="https://fb.me/rplus.tw">https://fb.me/rplus.tw</a></li> <li><a href="https://twitter.com/RplusTW">https://twitter.com/RplusTW</a></li> <li><a href="https://codepen.io/Rplus/">https://codepen.io/Rplus/</a></li> <li><a href="https://www.facebook.com/HappyCSSer/">https://www.facebook.com/HappyCSSer/</a></li> </ul> <style> .reveal .hihihi { display: flex; margin: 0; padding: 0; list-style: none; } .reveal .hihihi li { width: 25%; margin: 0; padding: 0; } .reveal .hihihi li a { display: block; height: 20vh; color: transparent; background-size: cover; background-repeat: no-repeat; } .reveal .hihihi li:nth-of-type(1) a { background-image: url('https://lh3.googleusercontent.com/VZFTn0SFPQ-aVSbryzbEljt2ElbQJarDQ7PIY_0hLw2Ff2poTDb6LIxIsi6wU96HLKu6pisX1pXymRFL9DcrXIxna49RLA37YqBxigYuffVn4fyF_SMqcktYAg3A-Weh9oqQ1sez_w=w933-h679-no'); background-position: 0% 0%; background-size: auto 120%; } .reveal .hihihi li:nth-of-type(2) a { background-image: url('https://lh3.googleusercontent.com/x1FeYnrvZ_6MhsNNDU6fF2DQHcZULLP1DsY7J9aiK-J7P2_F48ylwaWw0kn_wWx560IAnN_-L6g2m6tzXVpHgzb40hoKFdSm42pVA6yU9Oyml4mYPcOURLvNmXSt3Qm5tVhKfdvlKA=w697-h403-no'); } .reveal .hihihi li:nth-of-type(3) a { background-image: url('https://lh3.googleusercontent.com/fzVpqBEsiPSRCXRgCNo1NnEm76dOhaxX36ojCKut2UV9wXecU-RbO9IjwmM1-sBqs_WjWmss-yuLSXIFWR2YvBFS5wT7tzwnZJsWGL9_I7kvyZpLheouAkYvgEsynP9Di9j8ppJ-lQ=w652-h421-no'); background-size: contain; } .reveal .hihihi li:nth-of-type(4) a { background-image: url('https://lh3.googleusercontent.com/Djl4n7BAATDe1m_4AsUDW3LWHYA9mFfTiyWQg5pFpWNdZkxUje1QsGvCzjQBbWLm485Nli0_NaPEjJyY78Aqec63VyGKiBApvMkMJxkoX5TrZn73t2OVza9QCj5YZyh0O8owwqs6Dg=w886-h654-no'); } </style> ----- * https://www.facebook.com/groups/f2e.tw/ * https://gitter.im/f2etw/developers * https://www.facebook.com/groups/F2ETW.share.HQ/ <style> .container { overflow: hidden; } .present .intro.intro { text-align: right; position: fixed; bottom: 0; right: -2% } .intro.intro a { color: inherit; font-size: smaller; } .intro.intro img { border: unset; vertical-align: middle; margin: 0 0 0 auto; display: block; } .reveal mark { background-color: rgba(255,255,150, .3); } .reveal blockquote { width: 90%; } .reveal pre code { max-height: 90vh; } .reveal .ref + ul li, .reveal .ref + ul a { font-size: smaller; } </style> --- 感謝 ♥ ---- ### 試試身手？ https://codepen.io/Rplus/pen/LONgoq

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.