CSS tools: Difference between revisions

From LemonWiki共筆
Jump to navigation Jump to search
mNo edit summary
 
(94 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}})工具
* {{Gd}}[http://litmusapp.com/labs CSSVista] for Windows XP/Vista v0.15 (freeware; 須安裝 [http://www.microsoft.com/downloads/details.aspx?familyid=0856eacb-4362-4b0d-8edd-aab15c5e04f5 .Net Framework v2.0+])
** 按滑鼠一下，選取網頁元素(<span style="cursor:help; Border-bottom-style:dotted; Border-bottom-width:thin;" class="acronym" title="Document Object Model">DOM</span> inspector)，即可顯示網頁元素屬性: ?
** 可針對遠端網頁預覽CSS修改的效果
** 可預覽螢幕解析度800x600 & 1024x768 不同效果
** 分割視窗同時顯示 [[MozillaFirefox|Firefox]] v1.7 ({{Fx}}) 與 Internet explorer({{IE}}) v6 瀏覽畫面


== 檢查 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)工具 ==
* {{Gd}} [http://www.getfirebug.com/ Firebug] v1.5.4 for {{Fx}} ([http://www.makeuseof.com/tag/install-firebug-for-browsers-other-than-firefox/ How To Install Firebug In Browsers Other Than Firefox | MakeUseOf.com])
* {{Gd}} [http://www.getfirebug.com/ Firebug] v1.5.4 for {{Fx}} ([http://www.makeuseof.com/tag/install-firebug-for-browsers-other-than-firefox/ How To Install Firebug In Browsers Other Than Firefox | MakeUseOf.com])
** 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
** 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
** 可針對遠端網頁預覽CSS修改的效果
** 可針對遠端網頁預覽CSS修改的效果
** 可追蹤網頁各元素下載所需的時間
** 可追蹤網頁各元素下載所需的時間
** 其他: 可觀察網頁間傳送的標頭(header)、POST 等變數 (Firebug選單 -> 網路 -> 選取正在瀏覽的網址)


* [http://getfirebug.com/firebuglite Firebug Lite] for {{IE}}, {{Fx}}, {{Chrome}}([https://chrome.google.com/extensions/detail/bmagokdooijbeehmkpknfglimnifench Firebug Lite for Google Chrome]), {{Opera}} or {{Safari}}
 
* {{Gd}} [http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535 Internet Explorer Developer Toolbar](開發者工具) v.1.00.2188.0 for Windows {{IE}}
** 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
** 可針對遠端網頁預覽CSS修改的效果
** 提供驗證工具(validator)
** 可結合[http://www.xenocode.com/Browsers/ IE6 ~ IE8模擬應用程式]''($)''，並均可使用該開發者工具
 
 
* [http://getfirebug.com/firebuglite Firebug Lite] bookmarklet for {{IE}}, {{Fx}}, {{Chrome}}([https://chrome.google.com/extensions/detail/bmagokdooijbeehmkpknfglimnifench Firebug Lite for Google Chrome]), {{Opera}} or {{Safari}}
** 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
** 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
** 可針對遠端網頁預覽CSS修改的效果
** 可針對遠端網頁預覽CSS修改的效果
Line 21: Line 30:
** '''無法'''針對遠端網頁預覽CSS修改的效果
** '''無法'''針對遠端網頁預覽CSS修改的效果
** '''無法''' 追蹤網頁各元素下載所需的時間
** '''無法''' 追蹤網頁各元素下載所需的時間
* Google chrome瀏覽器 v.13.x 內建工具: 滑鼠點右鍵，選擇「檢查元素」
** 將滑鼠移動到要顯示的網頁元素，就會顯示CSS屬性
** '''無法'''針對遠端網頁預覽CSS修改的效果
** 可追蹤網頁各元素下載所需的時間 (切換到 Network 標籤)


* [http://www.opera.com/dragonfly/ Opera Dragonfly] (Opera選單 --> 頁面 --> 研發工具: Opera Dragonfly) {{Opera}}
* [http://www.opera.com/dragonfly/ Opera Dragonfly] (Opera選單 --> 頁面 --> 研發工具: Opera Dragonfly) {{Opera}}
Line 45: Line 59:
** 相關文章: [http://jerome.anyday.com.tw/archives/85  排序 CSS 的利器 - TopStyle | 走過的、學過的、看過的]
** 相關文章: [http://jerome.anyday.com.tw/archives/85  排序 CSS 的利器 - TopStyle | 走過的、學過的、看過的]


* [https://csspeeper.com/ CSSPeeper - Smart CSS viewer tailored for Designers][https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk]
** 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: 可
** 無法針對遠端網頁預覽CSS修改的效果


* [http://www.microsoft.com/downloads/details.aspx?FamilyId=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en Internet Explorer Developer Toolbar](開發者工具) v.1.00.2188.0 for Windows {{IE}}
 
** 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
* ''discontinued'' [http://litmusapp.com/labs CSSVista] for Windows XP/Vista v0.15 (freeware; 須安裝 [http://www.microsoft.com/downloads/details.aspx?familyid=0856eacb-4362-4b0d-8edd-aab15c5e04f5 .Net Framework v2.0+])
** 按滑鼠一下，選取網頁元素(<span style="cursor:help; Border-bottom-style:dotted; Border-bottom-width:thin;" class="acronym" title="Document Object Model">DOM</span> inspector)，即可顯示網頁元素屬性: ?
** 可針對遠端網頁預覽CSS修改的效果
** 可針對遠端網頁預覽CSS修改的效果
** 提供驗證工具(validator)
** 可預覽螢幕解析度800x600 & 1024x768 不同效果
** {{Gd}} 可結合[http://www.xenocode.com/Browsers/ IE6 ~ IE8模擬應用程式]，並均可使用該開發者工具
** 分割視窗同時顯示 [[MozillaFirefox|Firefox]] v1.7 ({{Fx}}) 與 Internet explorer({{IE}}) v6 瀏覽畫面
 
== CSS 線上編輯 即時預覽 ==
* [http://cssdesk.com/ CSSDesk] {{access | date=2013-02-11}}
* [http://dabblet.com/ dabblet.com] {{access | date = 2012-08-22}}
* more online sandboxes on [[Testing#browser_issue]]
 
== 網頁製作相關工具 ==
=== 開發人員工具 ===
* 網頁主控台 for {{Fx}} v.10 內建工具
** 選單位置位於: 工具 -> 網頁開發者 -> 網頁主控台 、 或者直接按快速鍵 {{kbd | key=Control}}+{{kbd | key=Shift}}+{{kbd | key=K}}
** [https://developer.mozilla.org/en/Using_the_Web_Console Using the Web Console - MDN]
* 開發人員工具 for {{Chrome}} 內建工具
** 選單位置位於: 工具 -> 開發人員工具、 或者直接按快速鍵 {{kbd | key=Control}}+{{kbd | key=Shift}}+{{kbd | key=I}}
** 教學: [http://www.dotblogs.com.tw/hatelove/archive/2012/03/01/introducing-chrome-web-developer-tool.aspx  使用Chrome的Web Developer Tool偵錯 - In 91- 點部落]
* [https://addons.mozilla.org/zh-TW/firefox/addon/1815/ Console²] {{Fx}} "可依據類型 (Errors, Warnings, Messages)、程式語言 (JavaScript, CSS, XML)、與使用情境 (context，意指 Chrome, Content) 來篩選要顯示的錯誤訊息"
 
=== view source codes of html ===
* [https://chrome.google.com/webstore/detail/quick-source-viewer/cfmcghennfbpmhemnnfjhkdmnbidpanb/related Quick source viewer] for {{Chrome}}
* [https://addons.mozilla.org/en-US/firefox/addon/dafizilla-viewsourcewith/ Dafizilla ViewSourceWith] for {{Fx}} - "(a)to view page source with external applications (b)open CSS and JS files present on page" Quoted from official website {{access | date = 2011-02-28}}
* [http://zigrat.com/getthebookmarklet.html View Source Chart bookmarklet] for {{Chrome}}, {{Opera}}, {{Safari}}
** alternative:  [https://addons.mozilla.org/en-US/firefox/addon/655 View Source Chart] for {{Fx}} ; [http://billfriedrich.tripod.com/index.html?Web View Rendered Source] for {{IE}}
 
=== 不同螢幕解析度檢視網頁 ===
: [[Image:Owl icon.jpg]] {{exclaim}} 以下服務模擬不同螢幕解析度，跟 [https://en.wikipedia.org/wiki/Mobile_device_detection Mobile device detection] 會判斷裝置送出的 Header 資訊不同，因此跟實際裝置的測試狀況會不同。
 
* {{Gd}} [https://chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh Window Resizer] for {{chrome}}
* [http://lab.maltewassermann.com/viewport-resizer/ Responsive design testing tool – Viewport Resizer – Device simulation tool] 提供瀏覽器按鈕(bookmarklet). {{exclaim}} It follows [http://content-security-policy.com/ Content Security Policy]. That's means it's not wok on facebook & gmail. {{access | date = 2015-07-16}}
* [http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535 Internet Explorer Developer Toolbar](開發者工具) for Windows {{IE}}
** 選單位置: 工具 -> 重新調整大小
* [https://chrome.google.com/webstore/detail/idhfcdbheobinplaamokffboaccidbal Resolution Test] for {{chrome}}
* [http://mattkersley.com/responsive/ Responsive Design Testing] {{exclaim}} Not work for HTTPS e.g. [https://www.facebook.com/ Facebook] or [https://tw.discount.yahoo.net/index.php?group=all&_co=pSDA&_co2=pSDA Yahoo奇摩] {{access | date = 2015-07-16}}
* [http://whatismyscreenresolution.net/multi-screen-test Test your website at different screen resolutions: Multi Screen Test] Not work for HTTPS e.g. [https://tw.yahoo.com/ Yahoo奇摩] {{access | date = 2016-04-26}}
 
相關頁面:
* [[Mobile friendliness tool | 行動裝置相容性測試]]
* [[Research_surveys#全球瀏覽器、作業系統、螢幕解析度、搜尋引擎市占率統計表 | 全球瀏覽器、作業系統、螢幕解析度、搜尋引擎市占率統計表]]
* [[User_agent#Chcek_Browser_Compatibility | Chcek Browser Compatibility]]
* 從手錶到桌電，各種數位裝置尺寸一覽表。[http://www.google.com/design/tool/devices/ Device Metrics - Google Design] {{access | date = 2015-05-30}}
 
=== 分析網頁連線下載速度 ===
[[Web_Ping#分析網頁連線下載速度 | 分析網頁連線下載速度]]
 
=== 觀察網頁回應標頭(HTTP Headers) ===
* {{Gd}} [http://getfirebug.com/ Firebug] for {{Fx}}: Menu -> Net
* [http://livehttpheaders.mozdev.org/ LiveHTTPHeaders]  for {{Fx}}
 
相關頁面: [[User agent]]、[[HTTP request and response data tool]]
 
=== 字型/字體工具 ===
自動辨識字型 automatic identification
* {{Gd}} [https://chrome.google.com/webstore/detail/fontface-ninja/eljapbgkmlngdpckoiiibecpemleclhh Fontface Ninja] for {{Chrome}}
* [https://chrome.google.com/webstore/detail/ipooogmmnpmfmhbhlahhjkjiiamjllal What's the font?] for {{Chrome}} 選擇網頁一段文字，檢視使用的字型
* [http://www.typesample.com/ Type Sample] 提供瀏覽器按鈕 (bookmarklet) 和 {{Chrome}} 擴充套件，顯示選取文字的字型和大小。教學：[http://free.com.tw/type-sample/ Type Sample 輕鬆查詢、辨識網頁使用的字體名稱和大小（Chrome 擴充功能）] {{access | date = 2014-12-27}}
* [https://www.myfonts.com/WhatTheFont/ WhatTheFont! « MyFonts]  上傳包含文字的圖檔，提供最接近的字型的建議。文字個數 (100 component limit) 不能超過 100 個。 {{exclaim}} 不支援中文字形的辨識。 {{access | date = 2015-02-27}}
* ''$'' [https://www.facebook.com/photo.php?fbid=1196742607025006&set=gm.646826238805588&type=3&permPage=1 Adobe Photoshop 2015.5 多了一個可以自動辨識字型的新功能！可以從別人的設計圖稿中找出自己的電腦或是雲端 Typekit 是否有符合的字型可以用（只有英文） ... ...][https://helpx.adobe.com/photoshop/how-to/get-great-fonts-design.html#new_ways_to_identify_and_pick_a_font] {{FB}}
群眾智慧
* [https://www.myfonts.com/WhatTheFont/forum/ WhatTheFont Forum] 張貼圖片到論壇，詢問字型是什麼  {{exclaim}} 英文為主
* [https://www.facebook.com/groups/enjoyfonts/ 字嗨] {{FB}} 上傳照片到這個群組，讓大家一起幫你看是哪一套字型
 
問題精靈
* [http://www.identifont.com/index.html Identifont - Identify fonts by appearance, find fonts by name] 透過逐步詢問字型的特徵，例如有無[https://zh.wikipedia.org/zh-tw/%E8%A1%AC%E7%BA%BF%E4%BD%93 襯線(serif)] 等問題，篩選出是哪一套字型 {{access | date = 2015-02-27}}
 
線上預覽
* [http://www.zhaozi.cn/html/fonts/ 字体-找字网,您的字体管家!] 輸入中文或英文字，再點選「演示效果」按鈕。 {{access | date = 2015-03-08}}
 
=== 挑選顏色 ===
取色器
* {{Gd}} [https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg/related ColorPick Eyedropper] for {{Chrome}}
* [http://www.iosart.com/firefox/colorzilla/ ColorZilla Extension for Firefox and Mozilla] {{Fx}} or [https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp Chrome Web Store - ColorZilla] {{Chrome}}
* [http://0123456789.tw/?p=2996 MAC OSX 已內建取色器DigitalColor Meter APP] for {{Mac}}
 
色票
* [http://colorhunt.co/ Color Hunt] {{Gd}} 使用者可以投票色票 {{access | date = 2016-02-29}}
* 漸層參考色票 [http://uigradients.com/ uiGradients]
* 同一顏色的漸層色票 [http://paletton.com/ Paletton - The Color Scheme Designer] 右下方的 example 可以預覽在網站套用的效果  {{access | date = 2016-03-04}}
* [http://gradient.quasi.ink/ Unique gradient generator] 教學: [https://free.com.tw/unique-gradient-generator/ Unique Gradient Generator 美麗的網頁毛玻璃模糊背景產生器]
* [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}}
* [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}}
* [https://hexcolor.co/css-color-extractor/ CSS Color Extractor - Online CSS Color Checker Tool] 輸入 CSS 網址，會擷取色票、顏色被使用幾次
* [https://atmos.style/color-generator Color generator | Find harmonious colors for UI | Atmos] 提供中性、成功、警告、危險、資訊、主要、次要等用途的隨機顏色。可以選定某個顏色後，再隨機產生其他輔助顏色。
* [https://hexcolor.co/palette-generator Hex Colors]（hexcolor.co）是一個提供各種免費顏色工具的網站，非常適合專業設計師和顏色愛好者。它具有顏色選擇器、調色板生成器和漸層產生器等功能。用戶可以探索帶有十六進制代碼的各種顏色名稱，生成顏色漸層的 CSS，檢查顏色對比以確保可用性 (accessibility)，甚至從圖片中節取出顏色調色板。該網站還提供了關於各種顏色模型和配色的資訊，例如互補色和相似色，使其成為顏色選擇和設計靈感的全面資源。
 
色碼換算
* [http://www.javascripter.net/faq/rgbtohex.htm RGB-to-Hex Color Converter] e.g. <div style="background-color:#FFFF00; width: 180px;">rgb(255,255,0)  <-->  #FFFF00</div>
 
=== 量尺工具 ===
* [https://chrome.google.com/webstore/detail/page-ruler-redux/giejhjebcalaheckengmchjekofhhmal Page Ruler Redux] for {{Chrome}} or {{Edge}}
* [https://chrome.google.com/webstore/detail/measure-it/jocbgkoackihphodedlefohapackjmna/related?hl=en Measure-it] for {{Chrome}} or {{Edge}}
 
=== CSS 檔案壓縮 ===
* [http://yui.github.io/yuicompressor/ YUI Compressor] CSS minification tool


與編輯工具整合
* [https://www.jetbrains.com/phpstorm/ PhpStorm IDE]: [https://www.jetbrains.com/help/phpstorm/10.0/minifying-css.html Minifying CSS]
* [https://www.sublimetext.com/ Sublime Text]: [https://packagecontrol.io/packages/YUI%20Compressor YUI Compressor - Packages - Package Control] 教學: [http://www.minwt.com/webdesign-dev/html/12146.html 《YUI Compressor》將Yahoo網頁壓縮器搬到Sublime Text|梅問題．教學網]


網頁製作相關擴充套件 for {{Fx}}
=== 其他工具 ===
* [http://karmatics.com/aardvark/ Aardvark Firefox Extension] {{Fx}}
* [http://karmatics.com/aardvark/ Aardvark Firefox Extension] {{Fx}}
* [http://karmatics.com/aardvark/bookmarklet.html Running Aardvark as a bookmarklet] in {{Fx}}, {{IE}} or {{Safari}}  
* [http://karmatics.com/aardvark/bookmarklet.html Running Aardvark as a bookmarklet] in {{Fx}}, {{IE}} or {{Safari}}  
* [http://www.iosart.com/firefox/colorzilla/ ColorZilla Extension for Firefox and Mozilla] {{Fx}}
* [https://addons.mozilla.org/zh-TW/firefox/addon/1815/ Console²] "可依據類型 (Errors, Warnings, Messages)、程式語言 (JavaScript, CSS, XML)、與使用情境 (context，意指 Chrome, Content) 來篩選要顯示的錯誤訊息" {{Fx}}
* [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}}
* [https://addons.mozilla.org/en-US/firefox/addon/655 View Source Chart][http://jennifermadden.com/scripts/ViewRenderedSource.html] (Author's website: [http://jennifermadden.com/ JavaScript Cake Tutorials and Scripts]) {{Fx}}


不同螢幕解析度檢視網頁
* [https://addons.mozilla.org/zh-TW/firefox/addon/user-agent-rg/?src=discovery-learnmore User Agent RG] for {{Fx}}
* [http://viewlike.us/ ViewLike.Us] ViewLikeUs - Check Sites in Various Resolutions!
* Mozill firefox 網站開發的相關套件 [https://addons.mozilla.org/zh-TW/firefox/collections/mozilla/webdeveloper/ Web Developer's Toolbox :: 收藏集] for {{Fx}}
** [http://blog.yalinfo.com/2009/07/viewlikeus.html 教學]
* Google chrome 網站開發的相關套件 [https://chrome.google.com/webstore?hl=zh-TW&category=ext%2F11-web-development 擴充功能 › 開發人員工具 - Chrome 線上應用程式商店]
* [[Javascript debug]]
* 填充版面工具: [[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]
* [https://chrome.google.com/webstore/detail/outline-chrome-extension/gkakhdblgdnbknpibnflepnhcpmpohnm Outline Chrome Extension] for Edge & {{Chrome}} 顯示每個元素的外框線
----
further reading
further reading
* [http://www.w3schools.com/css/css_reference.asp CSS2 Reference]
* [http://www.w3schools.com/css/css_reference.asp CSS2 Reference]
* [http://sixrevisions.com/tools/google-chrome-extensions-for-web-design-students/ Google Chrome Extensions for Web Design Students] for {{Chrome}}
* [http://sixrevisions.com/tools/google-chrome-extensions-for-web-design-students/ Google Chrome Extensions for Web Design Students] for {{Chrome}}
* [http://www.awwwards.com/15-great-chrome-extensions-for-web-designers-and-developers.html 15 Great Chrome Extensions for Web Designers and Developers] for {{Chrome}} {{access | date= 2013-02-04}}
{{Template:Build a website}}




[[Category:WebDesign]]
[[Category:Design]]

Latest revision as of 12:10, 26 December 2023

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

檢查 CSS 與瀏覽器支援度[edit]

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

  • 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 線上編輯 即時預覽[edit]

網頁製作相關工具[edit]

開發人員工具[edit]

  • 網頁主控台 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[edit]

不同螢幕解析度檢視網頁[edit]

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

相關頁面:

分析網頁連線下載速度[edit]

分析網頁連線下載速度

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

相關頁面: User agent、HTTP request and response data tool

字型/字體工具[edit]

自動辨識字型 automatic identification

群眾智慧

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

問題精靈

線上預覽

挑選顏色[edit]

取色器

色票

色碼換算

量尺工具[edit]

CSS 檔案壓縮[edit]

與編輯工具整合

其他工具[edit]

further reading


Web site design and development process

Retrieved from "https://wiki.planetoid.info/index.php?title=CSS_tools&oldid=24151"