CSS tools: Difference between revisions
Jump to navigation
Jump to search
(→其他工具) |
(→量尺工具) |
||
(28 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 55: | Line 58: | ||
** 提供驗證工具(validator) | ** 提供驗證工具(validator) | ||
** 相關文章: [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修改的效果 | |||
Line 85: | Line 92: | ||
=== 不同螢幕解析度檢視網頁 === | === 不同螢幕解析度檢視網頁 === | ||
: [[Image:Owl icon.jpg]] {{exclaim}} 以下服務模擬不同螢幕解析度,跟 [https://en.wikipedia.org/wiki/Mobile_device_detection Mobile device detection] 會判斷裝置送出的 Header 資訊不同,因此跟實際裝置的測試狀況會不同。 | |||
* {{Gd}} [http://quirktools.com/screenfly/ Screenfly by QuirkTools — Test Your Website at Different Screen Resolutions] {{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}} | * {{Gd}} [http://quirktools.com/screenfly/ Screenfly by QuirkTools — Test Your Website at Different Screen Resolutions] {{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}} | ||
* {{Gd}} [https://chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh Window Resizer] for {{chrome}} | * {{Gd}} [https://chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh Window Resizer] for {{chrome}} | ||
* {{Gd}} [http://design.google.com/resizer/ Resizer - Google Design] allowed to switch to different screen resolution {{access | date = 2016-02-28}} | |||
* [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://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}} | * [http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535 Internet Explorer Developer Toolbar](開發者工具) for Windows {{IE}} | ||
Line 94: | Line 104: | ||
* [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://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://viewlike.us/ ViewLike.Us] ViewLikeUs - Check Sites in Various Resolutions! [http://blog.yalinfo.com/2009/07/viewlikeus.html 教學] | * [http://viewlike.us/ ViewLike.Us] ViewLikeUs - Check Sites in Various Resolutions! [http://blog.yalinfo.com/2009/07/viewlikeus.html 教學] | ||
* [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}} | |||
相關頁面: | 相關頁面: | ||
* [[Research_surveys#全球瀏覽器、作業系統、螢幕解析度、搜尋引擎市占率統計表 | 全球瀏覽器、作業系統、螢幕解析度、搜尋引擎市占率統計表]] | * [[Mobile friendliness tool | 行動裝置相容性測試]] | ||
* [[Research_surveys#全球瀏覽器、作業系統、螢幕解析度、搜尋引擎市占率統計表 | 全球瀏覽器、作業系統、螢幕解析度、搜尋引擎市占率統計表]] | |||
* [[User_agent#Chcek_Browser_Compatibility | Chcek Browser Compatibility]] | * [[User_agent#Chcek_Browser_Compatibility | Chcek Browser Compatibility]] | ||
* 從手錶到桌電,各種數位裝置尺寸一覽表。[http://www.google.com/design/tool/devices/ Device Metrics - Google Design] {{access | date = 2015-05-30}} | * 從手錶到桌電,各種數位裝置尺寸一覽表。[http://www.google.com/design/tool/devices/ Device Metrics - Google Design] {{access | date = 2015-05-30}} | ||
Line 115: | Line 127: | ||
* [http://www.typesample.com/ Type Sample] 提供瀏覽器按鈕 (bookmarklet) 和 {{Chrome}} 擴充套件,顯示選取文字的字型和大小。教學:[http://free.com.tw/type-sample/ Type Sample 輕鬆查詢、辨識網頁使用的字體名稱和大小(Chrome 擴充功能)] {{access | date = 2014-12-27}} | * [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.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.myfonts.com/WhatTheFont/forum/ WhatTheFont Forum] 張貼圖片到論壇,詢問字型是什麼 {{exclaim}} 英文為主 | ||
Line 127: | Line 140: | ||
=== 挑選顏色 === | === 挑選顏色 === | ||
取色器 | |||
* {{Gd}} [https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg/related ColorPick Eyedropper] for {{Chrome}} | * {{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://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://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}} | |||
色碼換算 | |||
* [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/measureit/keoagpbljgpdoldcmfpgicnpijmfompi MeasureIt!] 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|梅問題.教學網] | |||
=== 其他工具 === | === 其他工具 === | ||
Line 145: | 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] | |||
---- | ---- | ||
Line 153: | Line 186: | ||
* [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}} | * [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:WebDesign]] |
Revision as of 22:21, 1 October 2020
網頁設計樣式表(CSS)工具
檢查 CSS 與瀏覽器支援度
- Can I use... Support tables for HTML5, CSS3, etc "Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers."
- The Will Will Web | 前端工程研究:HTML/CSS/JavaScript 相容性檢查資源整理
- 如果要測試: Check Browser Compatibility
網頁設計樣式表(CSS)工具
- Firebug v1.5.4 for Firefox (How To Install Firebug In Browsers Other Than Firefox | MakeUseOf.com)
- 按滑鼠一下,選取網頁元素,即可顯示網頁元素屬性: ok
- 可針對遠端網頁預覽CSS修改的效果
- 可追蹤網頁各元素下載所需的時間
- 其他: 可觀察網頁間傳送的標頭(header)、POST 等變數 (Firebug選單 -> 網路 -> 選取正在瀏覽的網址)
- Internet Explorer Developer Toolbar(開發者工具) v.1.00.2188.0 for Windows IE
- 按滑鼠一下,選取網頁元素,即可顯示網頁元素屬性: ok
- 可針對遠端網頁預覽CSS修改的效果
- 提供驗證工具(validator)
- 可結合IE6 ~ IE8模擬應用程式($),並均可使用該開發者工具
- Firebug Lite bookmarklet for IE , Firefox , Chrome (Firebug Lite for Google Chrome), Opera or Safari
- 按滑鼠一下,選取網頁元素,即可顯示網頁元素屬性: ok
- 可針對遠端網頁預覽CSS修改的效果
- 無法 追蹤網頁各元素下載所需的時間
- csscan for Chrome
- 將滑鼠移動到要顯示的網頁元素,就會顯示CSS屬性
- 無法針對遠端網頁預覽CSS修改的效果
- 無法 追蹤網頁各元素下載所需的時間
- Google chrome瀏覽器 v.13.x 內建工具: 滑鼠點右鍵,選擇「檢查元素」
- 將滑鼠移動到要顯示的網頁元素,就會顯示CSS屬性
- 無法針對遠端網頁預覽CSS修改的效果
- 可追蹤網頁各元素下載所需的時間 (切換到 Network 標籤)
- Opera Dragonfly (Opera選單 --> 頁面 --> 研發工具: Opera Dragonfly) Opera
- 按滑鼠一下,選取網頁元素,即可顯示網頁元素屬性: ok
- 可針對遠端網頁預覽CSS修改的效果
- 可追蹤網頁各元素下載所需的時間
- Web Developer extension v1.1.4 for Firefox
- 按滑鼠一下,選取網頁元素,即可顯示網頁元素屬性: ok
- 可針對遠端網頁預覽CSS修改的效果
- 提供驗證工具(Validator)
- DebugBar - IE extension for web developer : DOM inspector, Javascript debugger, HTTP headers viewer, Cookies viewer for IE
- 按滑鼠一下,選取網頁元素,即可顯示網頁元素屬性: ok
- 無法針對遠端網頁預覽CSS修改的效果
- 提供驗證工具(validator)
- TopStyle Lite 3.5 for Windows (trial)
- 按滑鼠一下,選取網頁元素,即可顯示網頁元素屬性: ?
- 無法針對遠端網頁預覽CSS修改的效果?
- 提供驗證工具(validator)
- 相關文章: 排序 CSS 的利器 - TopStyle | 走過的、學過的、看過的
- CSSPeeper - Smart CSS viewer tailored for Designers[1]
- 按滑鼠一下,選取網頁元素,即可顯示網頁元素屬性: 可
- 無法針對遠端網頁預覽CSS修改的效果
- discontinued CSSVista for Windows XP/Vista v0.15 (freeware; 須安裝 .Net Framework v2.0+)
- 按滑鼠一下,選取網頁元素(DOM inspector),即可顯示網頁元素屬性: ?
- 可針對遠端網頁預覽CSS修改的效果
- 可預覽螢幕解析度800x600 & 1024x768 不同效果
- 分割視窗同時顯示 Firefox v1.7 (Firefox ) 與 Internet explorer(IE ) v6 瀏覽畫面
CSS 線上編輯 即時預覽
- CSSDesk [Last visited: 2013-02-11]
- dabblet.com [Last visited: 2012-08-22]
- more online sandboxes on Testing#browser_issue
網頁製作相關工具
開發人員工具
- 網頁主控台 for Firefox v.10 內建工具
- 選單位置位於: 工具 -> 網頁開發者 -> 網頁主控台 、 或者直接按快速鍵 Control+Shift+K
- Using the Web Console - MDN
- 開發人員工具 for Chrome 內建工具
- 選單位置位於: 工具 -> 開發人員工具、 或者直接按快速鍵 Control+Shift+I
- 教學: 使用Chrome的Web Developer Tool偵錯 - In 91- 點部落
- Console² Firefox "可依據類型 (Errors, Warnings, Messages)、程式語言 (JavaScript, CSS, XML)、與使用情境 (context,意指 Chrome, Content) 來篩選要顯示的錯誤訊息"
view source codes of html
- Quick source viewer for Chrome
- Dafizilla ViewSourceWith for Firefox - "(a)to view page source with external applications (b)open CSS and JS files present on page" Quoted from official website [Last visited: 2011-02-28]
- View Source Chart bookmarklet for Chrome , Opera , Safari
- alternative: View Source Chart for Firefox ; View Rendered Source for IE
不同螢幕解析度檢視網頁
- 以下服務模擬不同螢幕解析度,跟 Mobile device detection 會判斷裝置送出的 Header 資訊不同,因此跟實際裝置的測試狀況會不同。
- Screenfly by QuirkTools — Test Your Website at Different Screen Resolutions Not work for HTTPS e.g. Facebook or Yahoo奇摩 [Last visited: 2015-07-16]
- Window Resizer for Chrome
- Resizer - Google Design allowed to switch to different screen resolution [Last visited: 2016-02-28]
- Responsive design testing tool – Viewport Resizer – Device simulation tool 提供瀏覽器按鈕(bookmarklet). It follows Content Security Policy. That's means it's not wok on facebook & gmail. [Last visited: 2015-07-16]
- Internet Explorer Developer Toolbar(開發者工具) for Windows IE
- 選單位置: 工具 -> 重新調整大小
- resizeMyBrowser
- Resolution Test for Chrome
- Responsive Design Testing Not work for HTTPS e.g. Facebook or Yahoo奇摩 [Last visited: 2015-07-16]
- ViewLike.Us ViewLikeUs - Check Sites in Various Resolutions! 教學
- Test your website at different screen resolutions: Multi Screen Test Not work for HTTPS e.g. Yahoo奇摩 [Last visited: 2016-04-26]
相關頁面:
- 行動裝置相容性測試
- 全球瀏覽器、作業系統、螢幕解析度、搜尋引擎市占率統計表
- Chcek Browser Compatibility
- 從手錶到桌電,各種數位裝置尺寸一覽表。Device Metrics - Google Design [Last visited: 2015-05-30]
分析網頁連線下載速度
觀察網頁回應標頭(HTTP Headers)
- Firebug for Firefox : Menu -> Net
- LiveHTTPHeaders for Firefox
相關頁面: User agent、HTTP request and response data tool
字型/字體工具
自動辨識字型 automatic identification
- Fontface Ninja for Chrome
- What's the font? for Chrome 選擇網頁一段文字,檢視使用的字型
- Type Sample 提供瀏覽器按鈕 (bookmarklet) 和 Chrome 擴充套件,顯示選取文字的字型和大小。教學:Type Sample 輕鬆查詢、辨識網頁使用的字體名稱和大小(Chrome 擴充功能) [Last visited: 2014-12-27]
- WhatTheFont! « MyFonts 上傳包含文字的圖檔,提供最接近的字型的建議。文字個數 (100 component limit) 不能超過 100 個。 不支援中文字形的辨識。 [Last visited: 2015-02-27]
- $ Adobe Photoshop 2015.5 多了一個可以自動辨識字型的新功能!可以從別人的設計圖稿中找出自己的電腦或是雲端 Typekit 是否有符合的字型可以用(只有英文) ... ...[2]
群眾智慧
- WhatTheFont Forum 張貼圖片到論壇,詢問字型是什麼 英文為主
- 字嗨 上傳照片到這個群組,讓大家一起幫你看是哪一套字型
問題精靈
- Identifont - Identify fonts by appearance, find fonts by name 透過逐步詢問字型的特徵,例如有無襯線(serif) 等問題,篩選出是哪一套字型 [Last visited: 2015-02-27]
線上預覽
- 字体-找字网,您的字体管家! 輸入中文或英文字,再點選「演示效果」按鈕。 [Last visited: 2015-03-08]
挑選顏色
取色器
- ColorPick Eyedropper for Chrome
- ColorZilla Extension for Firefox and Mozilla Firefox or Chrome Web Store - ColorZilla Chrome
- MAC OSX 已內建取色器DigitalColor Meter APP for Mac
色票
- Color Hunt 使用者可以投票色票 [Last visited: 2016-02-29]
- 漸層參考色票 uiGradients
- 同一顏色的漸層色票 Paletton - The Color Scheme Designer 右下方的 example 可以預覽在網站套用的效果 [Last visited: 2016-03-04]
- Unique gradient generator 教學: Unique Gradient Generator 美麗的網頁毛玻璃模糊背景產生器
- Color - Style - Google design guidelines "Color in material design"
- Coolors - The super fast color schemes generator! [Last visited: 2016-02-29]
- Colormind - the smart color palette generator [Last visited: 2017-03-27]
- Picular 教學: Picular 色彩界的 Google!以關鍵字搜尋各種顏色靈感 [Last visited: 2018-09-14]
色碼換算
- RGB-to-Hex Color Converter e.g. rgb(255,255,0) <--> #FFFF00
量尺工具
- Page Ruler Redux for Chrome or Edge
- MeasureIt! for Chrome or Edge
CSS 檔案壓縮
- YUI Compressor CSS minification tool
與編輯工具整合
- PhpStorm IDE: Minifying CSS
- Sublime Text: YUI Compressor - Packages - Package Control 教學: 《YUI Compressor》將Yahoo網頁壓縮器搬到Sublime Text|梅問題.教學網
其他工具
- Aardvark Firefox Extension Firefox
- Running Aardvark as a bookmarklet in Firefox , IE or Safari
- User Agent RG for Firefox
- Mozill firefox 網站開發的相關套件 Web Developer's Toolbox :: 收藏集 for Firefox
- Google chrome 網站開發的相關套件 擴充功能 › 開發人員工具 - Chrome 線上應用程式商店
- Javascript debug
- 填充版面工具: Random content generator e.g. The Top 8 Placeholder Services for Web Designers | Nettuts+
- Favicon & App Icon Generator
further reading
- CSS2 Reference
- Google Chrome Extensions for Web Design Students for Chrome
- 15 Great Chrome Extensions for Web Designers and Developers for Chrome [Last visited: 2013-02-04]
Web site design and development process
- Information gathering: Research surveys
- Planning: Before you start to build a website, Content development strategy | Register domain name, Choose web hosting | Information architecture | Data model: Data type, Data flow | Documentation: Request For Proposal | Licensing
- Design: CSS tools, Free fonts, Free photos, Emoji & icons
- Testing & delivery: Usability test, check browser compatibility | Web testing | Speed up websites: Web Ping, Software acceptance test plan | Promote your web
- Maintenance: Site backup & restore test, Software update (OS patch or CMS security update)
- Need help? Community, I need inspiration, Web design glossary