(Muki) 使用 sass 有效控管 z-index 圖層順序

z-index可以讓多個圖層互相重疊,這件事情已經不稀奇了。但假設今天碰到複雜的版面,需要很多個z-index圖層,通常我們會用99,100,101,9999… 這種無限上綱的的寫法。

但其實,這不是一種好的寫法,因為寫到最後你會不知道現在寫到哪個數字?如果是多人寫一份網站,維護也很不容易,說不定最後為了省麻煩,會 99999 不知道 9 到幾位數去 OTL…。為了解決這個問題,我們可以使用 SASS 幫我們有效管理z-index喲!

(Muki) display:table-cell 無法使用 margin & padding 的解法

要是使用 HTML+DIV 排版的人,應該都很清楚table 是用來繪製表格,而非用來排版的這件事情。然而因為 DIV 真的太好用了,現在很多人幾乎都不知道table, tr, td… 該怎麼互相搭配與運用。雖然不清楚是哪些因素影響,但是 W3C 卻在 CSS 的display屬性裡面支援table值,讓我們可以使用 DIV 就做出跟 HTML 的 table 標籤一樣的效果。(該說是 CSS 跟 HTML 互打臉嗎?)


don’t use @import

In Chapter 5 of High Performance Web Sites, I briefly mention that @import has a negative impact on web page performance. I dug into this deeper for my talk at Web 2.0 Expo, creating several test pages and HTTP waterfall charts, all shown below. The bottomline is: use LINK instead of @import if you want stylesheets to download in parallel resulting in a faster page.

(Will 保哥) Sublime Text 3 新手上路:必要的安裝、設定與基本使用教學

Sublime Text 相信是許多前端開發人員人心目中的最愛,然而對一個 Sublime Text 3 的新手來說,有什麼是在第一次使用時一定要了解的事情呢?我整理了幾個重要步驟,幫助大家快速上手,並在文末加上幾個不錯的參考連結,供大家進一步學習這套工具的使用。



Developers today recognize that while it’s great to write your website or application code as a collection of smaller pieces (i.e. components), accomplishing this is not always easy. So let’s look at this topic in detail using Sass.

Bootstrap RWD 使用方法及原理


最近常聽到的就是「請問你對RWD熟悉嗎? 」回應大概就是「我最近有Bootstrap來…」這個現象似乎越來越多,話說使用這個框架大約有一年的時間從v2到現在v3.1,覺得真的進步不少,很 大的原因應該是它涵蓋的範圍很廣而且對RWD的適應能力也寫的很全面。但是很大一個關鍵是,我們要學css,不要學css framework,因為當你理解了css你自然就會理解這個css framework同時也能理解其他的css framework,還有很多很有名的css framework例如老字號960.gs,foundation.zurb,blueprintcss已經近期的Pure,uikit等等,都是幾乎很 相同的東西,它們全部都有RWD的grid,所以基本上Bootstrap并不是唯一可以做RWD的選擇。

(飛肯) CSS4 的 image-set

3.3 Resolution Negotiation: the image-set() notation

Delivering the most appropriate image resolution for a user’s device can be a difficult task. Ideally, images should be in the same resolution as the device they’re being viewed in, which can vary between users. However, other factors can factor into the decision of which image to send; for example, if the user is on a slow mobile connection, they may prefer to receive lower-res images rather than waiting for a large proper-res image to load. The image-set() function allows an author to ignore most of these issues, simply providing multiple resolutions of an image and letting the UA decide which is most appropriate in a given situation.