# 【CSS】特殊屬性工具網站

要查詢這些 CSS 特殊屬性、瀏覽器前綴（Vendor Prefixes）以及相容性，以下這幾個網站是前端工程師必備的「軍火庫」：

<div aria-busy="false" aria-live="polite" id="bkmrk-"><div aria-busy="false" aria-live="polite">---

</div></div>### 1. Can I Use (最權威的相容性查詢)

這是全球開發者最常用的網站。只要輸入屬性名稱（例如 `scrollbar-width`），它就會用紅綠格子告訴你哪些瀏覽器支援、從哪個版本開始支援。

<div aria-busy="false" aria-live="polite" id="bkmrk-%E7%89%B9%E9%BB%9E%EF%BC%9A-%E6%8F%90%E4%BE%9B%E7%B2%BE%E7%A2%BA%E7%9A%84%E5%B8%82%E4%BD%94%E7%8E%87%E6%95%B8%E6%93%9A%EF%BC%8C%E8%AE%93%E4%BD%A0%E6%B1%BA%E5%AE%9A%E6%98%AF"><div aria-busy="false" aria-live="polite">- **特點：** 提供精確的市佔率數據，讓你決定是否需要寫備用方案（Fallback）。
- **網址：** [caniuse.com](https://caniuse.com/)

---

</div></div>### 2. MDN Web Docs (開發者的百科全書)

由 Mozilla 維護，是學習 Web 技術最完整的地方。除了教你怎麼用，它還會列出所有非標準的屬性（Non-standard）。

<div aria-busy="false" aria-live="polite" id="bkmrk-%E7%89%B9%E9%BB%9E%EF%BC%9A-%E5%A6%82%E6%9E%9C%E4%B8%80%E5%80%8B%E5%B1%AC%E6%80%A7%E5%89%8D%E9%9D%A2%E6%9C%89%E3%80%8C%E5%B0%8F%E9%BB%83%E8%89%B2%E9%A9%9A%E5%98%86%E8%99%9F"><div aria-busy="false" aria-live="polite">- **特點：** 如果一個屬性前面有「小黃色驚嘆號」或「燒瓶圖示」，就代表它是實驗性或非標準的屬性。
- **網址：** [developer.mozilla.org](https://developer.mozilla.org/)

---

</div></div>### 3. Autoprefixer (自動補全前綴的工具)

雖然不是查詢網站，但它是現代開發（如 Vite, Webpack, Next.js）背後的核心。你只需要寫標準的 CSS，它會自動幫你補上 `-webkit-`、`-ms-` 等前綴。

<div aria-busy="false" aria-live="polite" id="bkmrk-%E7%B7%9A%E4%B8%8A%E6%B8%AC%E8%A9%A6%E7%89%88%EF%BC%9A-autoprefixer-"><div aria-busy="false" aria-live="polite">- **線上測試版：** [Autoprefixer Online](https://autoprefixer.github.io/)
- **用法：** 你可以把你寫的 CSS 貼左邊，它會自動在右邊產出相容性最高的版本。

---

</div></div>### 4. CSS-Tricks (實戰攻略站)

這是一個著名的部落格，專門針對各種「難搞」的 CSS 問題寫深入淺出的文章。

<div aria-busy="false" aria-live="polite" id="bkmrk-%E7%89%B9%E9%BB%9E%EF%BC%9A-%E9%97%9C%E6%96%BC%E6%8D%B2%E8%BB%B8%EF%BC%88scrollbar%EF%BC%89%E7%9A%84"><div aria-busy="false" aria-live="polite">- **特點：** 關於捲軸（Scrollbar）的自定義，他們有一篇非常有名的攻略文：[The Current State of Styling Scrollbars](https://css-tricks.com/the-current-state-of-styling-scrollbars/)。
- **網址：** [css-tricks.com](https://css-tricks.com/)

---

</div></div>### 總結建議

<div aria-busy="false" aria-live="polite" id="bkmrk-%E6%9F%A5%E8%83%BD%E4%B8%8D%E8%83%BD%E7%94%A8%EF%BC%9A-%E5%8E%BB-can-i-use%E3%80%82-"><div aria-busy="false" aria-live="polite">- **查能不能用：** 去 **Can I Use**。
- **查怎麼寫、原理是什麼：** 去 **MDN**。
- **懶得自己寫前綴：** 設定好你的開發環境（如 Tailwind 或 PostCSS），讓 **Autoprefixer** 幫你處理。

</div></div>順帶一提，如果你是用 **VS Code** 開發，建議安裝一個叫 **"Can I Use"** 的擴充功能，這樣你在寫 CSS 時直接選取文字就能快速查詢，非常方便！