CSS tools: Difference between revisions

From LemonWiki共筆
Jump to navigation Jump to search
(10 intermediate revisions by the same user not shown)
Line 1: Line 1:
網頁設計樣式表({{Acronym| def=串接樣式表(Cascading Style Sheets) | acronym = CSS}})工具
網頁設計樣式表({{Acronym| def=串接樣式表(Cascading Style Sheets) | acronym = CSS}})工具
== 檢查 CSS 與瀏覽器支援度 ==
* {{Gd}} [http://www.caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc] "Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers."
* [http://blog.miniasp.com/post/2013/07/14/HTML5-CSS3-JavaScript-JS-compatibility-resouces.aspx The Will Will Web | 前端工程研究:HTML/CSS/JavaScript 相容性檢查資源整理]
* 如果要測試: [[Check Browser Compatibility]]


== 網頁設計樣式表(CSS)工具 ==
== 網頁設計樣式表(CSS)工具 ==
Line 147: Line 152:
* [https://www.google.com/design/spec/style/color.html Color - Style - Google design guidelines] "Color in material design"
* [https://www.google.com/design/spec/style/color.html Color - Style - Google design guidelines] "Color in material design"
* [https://coolors.co/ Coolors - The super fast color schemes generator!] {{access | date = 2016-02-29}}
* [https://coolors.co/ Coolors - The super fast color schemes generator!] {{access | date = 2016-02-29}}
* [http://colormind.io/ Colormind - the smart color palette generator] {{access | date = 2017-03-27}}
* [https://picular.co/ Picular] 教學: [https://free.com.tw/picular/ Picular 色彩界的 Google!以關鍵字搜尋各種顏色靈感] {{access | date = 2018-09-14}}


色碼換算
色碼換算
Line 152: Line 159:


=== 量尺工具 ===
=== 量尺工具 ===
* {{Gd}} [https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn/related?hl=zh-TW Page Ruler] for {{Chrome}}
* [https://chrome.google.com/webstore/detail/page-ruler-redux/giejhjebcalaheckengmchjekofhhmal Page Ruler Redux] for {{Chrome}} or {{Edge}}
* [http://www.kevinfreitas.net/extensions/measureit/ MeasureIt]: "Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels." Quoted from official website. {{Fx}} or [https://chrome.google.com/webstore/detail/measureit/pokhcahijjfkdccinalifdifljglhclm Chrome Web Store - MeasureIt] for {{Chrome}}
* [https://chrome.google.com/webstore/detail/measureit/keoagpbljgpdoldcmfpgicnpijmfompi MeasureIt!] for {{Chrome}} or {{Edge}}
 


=== CSS 檔案壓縮 ===
=== CSS 檔案壓縮 ===
Line 171: Line 177:
* Google chrome 網站開發的相關套件 [https://chrome.google.com/webstore?hl=zh-TW&category=ext%2F11-web-development 擴充功能 › 開發人員工具 - Chrome 線上應用程式商店]
* Google chrome 網站開發的相關套件 [https://chrome.google.com/webstore?hl=zh-TW&category=ext%2F11-web-development 擴充功能 › 開發人員工具 - Chrome 線上應用程式商店]
* [[Javascript debug]]
* [[Javascript debug]]
* 填充版面工具: [http://net.tutsplus.com/articles/web-roundups/the-top-8-placeholders-for-web-designers/ The Top 8 Placeholder Services for Web Designers | Nettuts+]
* 填充版面工具: [[Random content generator‎‎]] e.g. [http://net.tutsplus.com/articles/web-roundups/the-top-8-placeholders-for-web-designers/ The Top 8 Placeholder Services for Web Designers | Nettuts+]
* [https://www.favicon-generator.org/ Favicon & App Icon Generator]


----
----

Revision as of 22:21, 1 October 2020

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

檢查 CSS 與瀏覽器支援度

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

  • Good.gif 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 上傳照片到這個群組,讓大家一起幫你看是哪一套字型

問題精靈

線上預覽

挑選顏色

取色器

色票

色碼換算

量尺工具

CSS 檔案壓縮

與編輯工具整合

其他工具


further reading


Web site design and development process