CSS

[CSS] Selector Level 4 搶先看

9 min read CSS Selector Level 4CSS
雖然 CSS Selector Level 4 目前還在草稿階段，不過俗話說的好，別讓您的孩子輸在起跑點上，所以趁現在偷跑也是很合理的。 另外，我贊成讓孩子輸在起跑點上。 Selector Level 4 http://dev.w3.org/csswg/selectors4/ 我說過了，他目前還是 Editor's Draft，所以，是不是裡面所有的 Selector 將來都會出現？我不敢保證。在這裡我也不打算全部都拿出來講，不然你就去看原文就好了，也不用看我在這邊練肖喂（台語

[CSS] Anchor and css property overflow issue

2 min read overflowanchorCSS
CSS 這件事情雖然不是頂新的玩意，但是我還是第一次遇到錨點 (Anchor) 跟物件的定位、長度與 overflow 會干擾的情況。 這一切都要從 10 年前說起（欸 萬能的 overflow ？ 其實我本來也以為它是萬能的，直到我膝蓋中了一箭。通常我們用 overflow 來做幾件事情， * 清除 float * 使用或是隱藏捲軸 * 隱藏超出元件的內容 正常來說，使用 overflow 是可以正確的將元素給框在你的父元件裡面，但是有一個問題，如果跟 position 搭配使用，會有一個 overflow:

[CSS] 彈性化的 Media Query

10 min read Media QueryCSS
好像是該來交點作業，不然部落格都快壞掉了（甚至熊熊想不起來 Octporess 要怎麼 deploy 到 Heroku 上 原先是想說要先寫一點 Media Query Level 4 的介紹，不過因為還沒有玩膩所以就先不要寫了（欸，由於寫文章的時候剛好是自己生日，所以，就先祝自己生日快樂。 然後我們聊一下彈性的 Media Query。 -------------------------------------------------------------------------------- 前言 導讀， > The EMs have it! Proportional Media Query

[CSS3] 深入 @viewport 與 @media queries

9 min read Media QueryviewportCSS
說在最前面，這是要詳細交代這兩件事情的關係，不過由於目前 CSS Device Adaptation [http://www.w3.org/csswg/css-device-adapt/] 還在草稿（W3C Working Draft）階段，所以以後或許還是會有變化。 這是很悶的詳細解釋文，所以理論上可以跳過。 @viewport and @media 還是一個重點， > @media depends on @viewport size. 但是由於 @viewport 這件事情，雖然他有許多設定可以用，

[CSS] 淺談 @viewport 與 @media

9 min read Media QueryviewportCSS
由於最近剛好遇到這件事情，索性整理一下。一般來說 viewport 大多數人會想到 Media Query 這件事情，但是，我覺得還是有必要澄清一下。其實 viewport 跟 Media Query 並沒有太大或是絕對的相依關係，只是由於裝置與一些規則應用上的關係，讓人覺得這兩件事情好像是可以擺在一起看的。 實際上不是。 -------------------------------------------------------------------------------- 何謂 viewport 根據 w3c 對於 CSS Device Adaptation [http://www.w3.org/TR/