CSS Selector Level 4

[CSS] Selector Level 4 搶先看

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

overflow

[CSS] Anchor and css property overflow issue

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

Media Query

[CSS] 彈性化的 Media Query

好像是該來交點作業,不然部落格都快壞掉了(甚至熊熊想不起來 Octporess 要怎麼 deploy 到 Heroku 上 原先是想說要先寫一點 Media Query Level 4 的介紹,不過因為還沒有玩膩所以就先不要寫了(欸,由於寫文章的時候剛好是自己生日,所以,就先祝自己生日快樂。 然後我們聊一下彈性的 Media Query。 前言 導讀, [http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/](The EMs have

Media Query

[CSS3] 深入 @viewport 與 @media queries

說在最前面,這是要詳細交代這兩件事情的關係,不過由於目前 CSS Device Adaptation 還在草稿(W3C Working Draft)階段,所以以後或許還是會有變化。 這是很悶的詳細解釋文,所以理論上可以跳過。 @viewport and @media 還是一個重點, @media depends on @viewport size. 但是由於 @viewport 這件事情,雖然他有許多設定可以用,但是預設值是相當討厭的。以目前的規範來看, <viewport-length> = auto

Media Query

[CSS] 淺談 @viewport 與 @media

由於最近剛好遇到這件事情,索性整理一下。一般來說 viewport 大多數人會想到 Media Query 這件事情,但是,我覺得還是有必要澄清一下。其實 viewport 跟 Media Query 並沒有太大或是絕對的相依關係,只是由於裝置與一些規則應用上的關係,讓人覺得這兩件事情好像是可以擺在一起看的。 實際上不是。 何謂 viewport 根據 w3c 對於 CSS Device Adaptation 的解釋,他大致上是在做這些事情, 根據裝置的顯示區域來展示文件 放大或縮小文件,來符合或設定上給予裝置的可視區域 允許設定或初始化縮放的級別,

SASS

[Hello 2012] 2011 終極一發,3SSS 試閱本搶先看

迎接倒數的最後一發,我說過明年要試著寫一本書,所以,我打從 PHPConf 結束之後就一直在計畫著。既然我覺得 CSS 這樣的東西這麼難以被接受,那麼,是不是應該試著讓他能夠更容易一點的被接受。所以,我就寫了需要一點門檻的東西(被揍飛)。 龍哥跟我說,對於程式設計師來說,讀起來可能不會覺得很吃力,但是可能對於 CSS 不甚了解的人,或是視覺設計師來說,這些東西有點過份生硬。不過,我覺得這真的是一個很困難的地方,要把經驗訴諸於文字其實挺困難的。就像是你要視覺設計師告訴你那是什麼感覺是一樣的道理。 就像是 NZMA 跟我說,就像你叫我解釋什麼叫做呼吸,經驗累積大概就類似這種感覺吧。 所以,我在撰寫這一系列的行文的時候,

TOC

[CSS 年終特賣] 讓 CSS 自動幫你數數

先來一下國語正音班。 數數,第一個字唸數,三聲數,第二個字唸數,四聲數。 最近因為在做 TOC 所以就把這個陳年的東西拿出來講一下,順便趁著是芥末日之前把一些筆記寫一寫,不然現在不寫,就只能明年才寫得完了(這個哏你要用幾次)。 我們在撰寫很長篇的文章的時候,常常需要主標題,副標題這一類的東西。但是最麻煩的地方在於,我如果中途一時興起多開了一個標題,那麼接下來的標題順序就悲劇了。 1. 我是第一章 a. 我是第 1.1 章 2. 我是第二章 a. 我是第 2.1 章

SASS

[SASS note.] CSS 逆向工程 part 2

有了一點概念之後,接下來看的地方是嵌套(Nested)的部份。為什麼不講一些比較特殊的地方?因為那些不過就是一些花招而已(無誤),樣式的基本撰寫才是核心所在。而嵌套的作法由於會影響到 CSS 的樣式權重的關係,所以必須要特別留意撰寫的方式。 首先我們知道,可以用兩種方式來嵌套樣式: @import 可以從外部引入 sass 檔案,也可以做樣式內部嵌套(Nexted @import) @extend 直接引用已設定的樣式規則。 照慣例,範例先上,菜待會再說。 我們這邊需要兩個檔案,一個叫做 _import.sass,另一個叫做 _extend.sass,

SASS

[SASS note.] CSS 逆向工程 part 1

工欲善其事,必先利其器!如果你對 CSS 的基礎還不甚了解,請先把基礎打好再來(認真(無誤)。關於什麼叫做 SASS 的,請上網 Google 或是參考我之前寫的文章,或是參考我的投影片(請用 Chrome 開啟)。 首先,對於已經開發的 CSS 樣式表,我們本來就可以使用 sass 的工具,將他從 css 轉換成 sass 檔案格式,這一點都沒有難度(你要換成 scss

Compass

[CSS note.] SASS - Say a sexy styling(刪除線)

SASS 全名是 Syntactically Awesome Stylesheets,當然不是我說得那個(媽媽有說,認真就輸了(揍飛),也許有人會說,踏碼的有一個 CSS 就已經很難搞了,現在來搞一個 SASS 來自作孽幹麼?或者是,這一切一定都是你們這些 programmer 在自 HIGH 用的啦,一切都是阿共啊A陰謀啦~之類的。BUT! 人生最厲害的就是這個 BUT!(這梗你要用幾次啦! 俗話說得好,好的老師帶你上天堂,不好的老師讓你住套房,好的工具帶你上天堂,沒有工具讓你住病房!

Chat

[CSS tech] 在 CSS/XHTML 關於輸出的心得

其實我是農夫(喂),所以工程師的事情我不太會也是很合理的!當完兵之後,懵懂不經事就學人家出社會,結果現在出來跑該還得都還沒還,不過這不是重點(疑)!在這個行業待了幾個年頭,不難會發現台灣的中小企業都跟農會一樣(喂喂),只給你一種肥料,就覺得稻米會長的很好,然後等到收成的時候,又因為他是老大,所以可以 隨便喊價 以量制價,產的比較好,單價就壓低,產的爛,就稍微提高一點點。 還好我小時候都吃自家的米,沒吃到農會的爛米(喂喂喂),不過當兵那陣子吃了一年半載的爛米,難怪會那麼癡肥(疑)。反正,吃米不知道米價這件事情,其實大家都習以為常了。然後就開始惡性循環,一開始的時候,

CSS

[CSS tech.] CSS 3 2D Transforms, Transition 動態效果筆記

IE 退散!往後面站,往後面站,往後面站... 在 CSS3 的規範裡面,新增了對於動態效果的設定。關於這方面的資訊,可以參考 W3C 的文件,相信比看我在這邊廢話要來的好很多(肯定的)。在基於 Webkit 的瀏覽器核心底下(我是使用 Chrome) ,這些效果都能夠正常的顯示,不過,總覺得用太多並不是件好事,似乎很吃系統資源的樣子,在我測試幾次之後,還差點讓 Chrome 掛點(我在 Windows 7 系統下測試)。 CSS

CSS

[CSS tech.] Blueprint CSS part 2

其實在許久之前,我有 寫過一篇 關於 Blueprint CSS 的介紹了,但是我覺得還是有些地方稍嫌不足。特別是今天為了要找一些東西,又繼續看了 Blueprint CSS,覺得上次那一篇時在是寫的不夠,所以就來補充一下。 特別提一下這個,Blueprint CSS How To Customizing Typography Baselines,他是介紹怎麼樣修改在 Blueprint CSS 中的 Typography 基準,請務必要看看。 首先還是回到 Grid 這個設定上面,你可以從

CSS

[Layout tech.] Web Design note with XHTML/CSS final

在 噗浪 上看到 ericsk (的 噗浪) 所寫的按鈕,我覺得應該來寫 part 5 了。至於為什麼是按鈕,那就先來看看 ericsk 所寫的按鈕: 很單純的 Click Me 也許沒什麼稀奇的,再來看看這個: 它還是 Click Me 也沒什麼稀奇的,只是字越來越大而以。那麼,不知道各位會怎麼製作這樣的按鈕?當然,用圖片是最快的做法,不過,這四個按鈕你需要用多少張圖片呢?12 張?

CSS

[Layout tech.] Web Design note with XHTML/CSS part 4

在這之前,已經沒有要拜讀的東西了,不過有幾點明確認知請大家注意: 在這之前,已經沒有要拜讀的東西了,不過有幾點明確認知請大家注意: IE6+7 sucks! 本文作者是三尛咖! 本文秉持著"先研究不傷眼睛,再講究效果" 若有不適者請勿繼續閱讀(疑?)。 update, 請愛用 DTD。 到了這般地步,我想應該已經沒有甚麼特殊技能了。畢竟 CSS Styling 所需要的其實不是鑽研它能做些甚麼,而是你必須要知道你想要做些甚麼,而 CSS Styling 能否能滿足你的需求,如此而已。所以,也別把 CSS

CSS

[Layout tech.] Web Design note with XHTML/CSS part 3

這次要講的重點是: 再看視覺格式物件(Visual formatting model)中的 display 屬性 列表與清單物件 不用 TABLE 的表格 很好很強大的特殊屬性:counter 首先,在閱讀這篇文章之前,請明確認知以下兩件事情: IE6+7 sucks! 本文作者是三尛咖! 有以上明確的認知之後,我們繼續(疑?)。 視覺格式物件當然不只限於 display 而已,但是定位(position)與浮動(float)在 上一篇