CSS tools: Difference between revisions

Jump to navigation Jump to search

CSS tools (edit)

Revision as of 20:17, 8 January 2025

1,452 bytes added ,  8 January 2025
m
Text replacement - ": Image:Owl icon.jpg " to "{{Tips}} "
m (Text replacement - ": Image:Owl icon.jpg " to "{{Tips}} ")
 
(23 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 53: 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 83: Line 92:


=== 不同螢幕解析度檢視網頁 ===
=== 不同螢幕解析度檢視網頁 ===
: [[Image:Owl icon.jpg]] {{exclaim}} 以下服務模擬不同螢幕解析度，跟 [https://en.wikipedia.org/wiki/Mobile_device_detection Mobile device detection] 會判斷裝置送出的 Header 資訊不同，因此跟實際裝置的測試狀況會不同。
{{Tips}} {{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}} [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}}
** 選單位置: 工具 -> 重新調整大小
** 選單位置: 工具 -> 重新調整大小
* [http://resizemybrowser.com/ resizeMyBrowser]
* [https://chrome.google.com/webstore/detail/idhfcdbheobinplaamokffboaccidbal Resolution Test] for {{chrome}}
* [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://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://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}}
* [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}}


Line 143: Line 148:
* [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}}
* [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)，甚至從圖片中節取出顏色調色板。該網站還提供了關於各種顏色模型和配色的資訊，例如互補色和相似色，使其成為顏色選擇和設計靈感的全面資源。


色碼換算
色碼換算
Line 148: Line 158:


=== 量尺工具 ===
=== 量尺工具 ===
* {{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/measure-it/jocbgkoackihphodedlefohapackjmna/related?hl=en Measure-it] for {{Chrome}} or {{Edge}}
 


=== CSS 檔案壓縮 ===
=== CSS 檔案壓縮 ===
Line 167: Line 176:
* 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]
 
* [https://chrome.google.com/webstore/detail/outline-chrome-extension/gkakhdblgdnbknpibnflepnhcpmpohnm Outline Chrome Extension] for Edge & {{Chrome}} 顯示每個元素的外框線


----
----
Line 179: Line 192:




[[Category:WebDesign]]
[[Category:Design]]
Retrieved from "https://wiki.planetoid.info/index.php/Special:MobileDiff/16917...25328"

Navigation menu