XRAY Bookmarklet:檢視網頁元素的Box Model資訊

XRAY Bookmarklet

XRAY是一款可安裝於Safari、Firefox、Camino和Mozilla的bookmarklet(書籤小程式,IE版本尚在開發中),使用者可以用它來檢視網頁中各項(X)HTML元素的Box Model資訊。

只要在原始網頁中,將灰色的「XRAY」連結拖曳到瀏覽器的書籤工具列,便安裝完成了。之後點一下Xray書籤即可進入檢視模式,網頁中會出現一個黑色半透明的視窗,此後只要在網頁的任意元素上面點一下,其box model資訊(元素、id、class名稱、hierarchy關係、position、margin、padding等值)便可在該視窗中一覽無遺。

雖然上次介紹過Web Developer Toolbar裡面也有這個功能,但是XRAY的顯示介面除了較精美外,還很貼心地在黑色半透明視窗的右上角作了一個「關閉」的按鈕,讓使用者不必重新整理頁面即可離開此檢視模式。缺點則是不像WDT會以紅色框線預示選取範圍,遇到較複雜的box model,常要點個幾次才能正確找到自己要看的元素。[via Zeldman.com]

相關套件:
CSSViewer
Aardvark

13styles:CSS多層選單產生器

13styles.com可以讓使用者在線上製作純CSS+XHTML的多層選單(精確地說是主要與次要兩層),理論上共有13種樣式,不過目前只有4種可以選擇。
| 繼續閱讀…

CSS Tweak:線上CSS瘦身服務

CSS Tweak ~ Web Based CSS Tweaker

Andy Peatling所製作的CSS Tweak網站,提供CSS檔案瘦身服務。使用的方法很簡單,只要將CSS上傳或張貼到網站上以後,針對個人需求勾選要調整的項目,便可以開始執行。
| 繼續閱讀…

你是哪個等級的CSS開發人員?

Friendly Bit在今年1月有篇有趣的文章,標題為:Levels of CSS Knowledge,作者Emil Stenström將CSS的知識分為下列7個等級,並且描述了各等級的開發人員對網路產生的影響。我將內文簡譯如下: | 繼續閱讀…

CSS技巧:使用兩張圖片作為網頁背景

Quick CSS Tip- Backgrounds – Yesterdayishere.com

如果你有使用兩張圖片作為網頁背景的需要,那麼不妨看看Yesterdayishere的這個範例網頁(如上圖)。
| 繼續閱讀…

Pages: 1 2 »