Esther H. // version history

EQCSS

CSS/sass

EQCSS起源 與 為何會需要屬於自己的polyfill

How We Built EQCSS & Why You Should Try Building Your Own Polyfills Too

Tom Hodgins’s Needs

  • 根據元件目前寬/高度指定不同樣式
  • 元件持續保持水平/垂直置中
  • 根據元件內文字長度指定不同樣式
  • 根據元件內子元件數量指定不同樣式
  • 以 < 逆向控制父層元件

Maxime’s Answers

  • 依照元件尺寸/文字內容控制樣式
  • 擴展CSS選擇器至父層
  • 擴展CSS正常屬性讓所有元件保持垂直置中

5 Challenges of Building EQCSS

Syntax Challenges

  • 單純使用CSS
  • 具靈活度，增加開發便利性
  • Future-proof（具未來性的，可與其他程式碼共存）

Plugin Challenges

  • 確保檔案大小
  • 原始碼易讀性
  • 結構化插件，獨立IE8

Browser Challenges

  • 不同瀏覽器與版本支援
  • 修正Firefox問題

Module Challenges

  • 插件模式
  • Webpack/Browserify

Documentation Challenges

  • 詞彙
  • 溝通
  • 文件與規範

EQCSS

EQCSS: A CSS Extension for Element Queries & More EQCSS EQCSS spec

Element Queries

Element Queries（元件查詢？）是一種RWD的新觀念，響應條件是依據元件本身而非瀏覽器。不同於 @media ，使用 @element 除了能夠支援瀏覽器尺寸查詢，也能夠針對元件內容與子元件做RWD控制條件。Element Queries重新定義了CSS的範圍概念，帶入了JS的範圍與變數觀念。

How to use

於頁面中導入JS即可。

<script src=EQCSS.js></script>

CSS部分以 EQCSS 格式為主：

<script type="text/eqcss" src=styles.eqcss></script>

或者採用 inline 方式：

<script type="text/eqcss">
  ...
</script>

EQCSS基本格式

@element {selector} and {condition} [ and {condition} ]* { {css} }
  • {selector} 選擇器，元件本身 Ex: "#id" or ".class"
  • {condition} 條件
  • {css} 樣式 Ex: #id div { color: red }