CSS tools

From LemonWiki共筆
Revision as of 10:09, 6 March 2020 by Planetoid (talk | contribs) (→‎量尺工具: remove page ruler)
Jump to navigation Jump to search

網頁設計樣式表(CSS)工具

檢查 CSS 與瀏覽器支援度

網頁設計樣式表(CSS)工具

  • Good! Firebug v1.5.4 for Firefox Browser firefox.png (How To Install Firebug In Browsers Other Than Firefox | MakeUseOf.com)
    • 按滑鼠一下,選取網頁元素,即可顯示網頁元素屬性: ok
    • 可針對遠端網頁預覽CSS修改的效果
    • 可追蹤網頁各元素下載所需的時間
    • 其他: 可觀察網頁間傳送的標頭(header)、POST 等變數 (Firebug選單 -> 網路 -> 選取正在瀏覽的網址)



  • Firebug Lite bookmarklet for IE Browser msie.png , Firefox Browser firefox.png , Chrome Browser chrome.png (Firebug Lite for Google Chrome), Opera Browser opera.png or Safari Browser safari.png
    • 按滑鼠一下,選取網頁元素,即可顯示網頁元素屬性: ok
    • 可針對遠端網頁預覽CSS修改的效果
    • 無法 追蹤網頁各元素下載所需的時間
  • csscan for Chrome Browser chrome.png
    • 將滑鼠移動到要顯示的網頁元素,就會顯示CSS屬性
    • 無法針對遠端網頁預覽CSS修改的效果
    • 無法 追蹤網頁各元素下載所需的時間
  • Google chrome瀏覽器 v.13.x 內建工具: 滑鼠點右鍵,選擇「檢查元素」
    • 將滑鼠移動到要顯示的網頁元素,就會顯示CSS屬性
    • 無法針對遠端網頁預覽CSS修改的效果
    • 可追蹤網頁各元素下載所需的時間 (切換到 Network 標籤)
  • Opera Dragonfly (Opera選單 --> 頁面 --> 研發工具: Opera Dragonfly) Opera Browser opera.png
    • 按滑鼠一下,選取網頁元素,即可顯示網頁元素屬性: ok
    • 可針對遠端網頁預覽CSS修改的效果
    • 可追蹤網頁各元素下載所需的時間
  • Web Developer extension v1.1.4 for Firefox Browser firefox.png
    • 按滑鼠一下,選取網頁元素,即可顯示網頁元素屬性: ok
    • 可針對遠端網頁預覽CSS修改的效果
    • 提供驗證工具(Validator)




  • discontinued CSSVista for Windows XP/Vista v0.15 (freeware; 須安裝 .Net Framework v2.0+)
    • 按滑鼠一下,選取網頁元素(DOM inspector),即可顯示網頁元素屬性: ?
    • 可針對遠端網頁預覽CSS修改的效果
    • 可預覽螢幕解析度800x600 & 1024x768 不同效果
    • 分割視窗同時顯示 Firefox v1.7 (Firefox Browser firefox.png ) 與 Internet explorer(IE Browser msie.png ) v6 瀏覽畫面

CSS 線上編輯 即時預覽

網頁製作相關工具

開發人員工具

  • 網頁主控台 for Firefox Browser firefox.png v.10 內建工具
    • 選單位置位於: 工具 -> 網頁開發者 -> 網頁主控台 、 或者直接按快速鍵 Control+Shift+K
    • Using the Web Console - MDN
  • 開發人員工具 for Chrome Browser chrome.png 內建工具
  • Console² Firefox Browser firefox.png "可依據類型 (Errors, Warnings, Messages)、程式語言 (JavaScript, CSS, XML)、與使用情境 (context,意指 Chrome, Content) 來篩選要顯示的錯誤訊息"

view source codes of html

不同螢幕解析度檢視網頁

Owl icon.jpg Icon exclaim.gif 以下服務模擬不同螢幕解析度,跟 Mobile device detection 會判斷裝置送出的 Header 資訊不同,因此跟實際裝置的測試狀況會不同。

相關頁面:

分析網頁連線下載速度

分析網頁連線下載速度

觀察網頁回應標頭(HTTP Headers)

相關頁面: User agentHTTP request and response data tool

字型/字體工具

自動辨識字型 automatic identification

群眾智慧

  • WhatTheFont Forum 張貼圖片到論壇,詢問字型是什麼 Icon exclaim.gif 英文為主
  • 字嗨 Social-balloon-facebook-icon.png 上傳照片到這個群組,讓大家一起幫你看是哪一套字型

問題精靈

線上預覽

挑選顏色

取色器

色票

色碼換算

量尺工具

  • MeasureIt: "Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels." Quoted from official website. Firefox Browser firefox.png or Chrome Web Store - MeasureIt for Chrome Browser chrome.png

CSS 檔案壓縮

與編輯工具整合

其他工具


further reading


Web site design and development process