有時候我會在一頁式網頁上設計一些互動式元件，需要在上部網頁進行一些操作才能解開下面的操作關卡，我都是用disabled或是製作一個透明區塊阻擋用戶去按關卡，時常為了這些 "鎖" 花許多時間，近期Firefox開始支援 inert了，我要輕鬆拉！

用 inert 讓網頁設計更有溫度！打造絕讚的 CX 體驗

嘿嘿！今天要跟大家分享一個超讚的 HTML 屬性 - inert！這個低調但強大的功能可以大幅提升網頁設計的互動體驗。身為前端工程師的你，絕對不能錯過這個寶藏功能！

什麼是 inert？老實說超簡單！

inert 這個字的英文原意是「惰性的、不活躍的」，放在網頁設計中也是相同概念。當我們對某個 HTML 元素設置 inert 屬性時，這個元素就會變得「無法互動」- 就像被施了定身術一樣！

html
<div inert>
  我現在不能動啦！裡面的按鈕、連結、表單通通都不能用！
</div>

為什麼要用 inert？看完這些使用場景你就懂了！

1. Modal 彈窗體驗優化

還記得以前做 Modal 時，總要寫一堆 JavaScript 來防止背景捲動或互動嗎？現在只要一個 inert 屬性就搞定啦！

javascript
// Modal 開啟時
document.querySelector('#main-content').inert = true;

// Modal 關閉時
document.querySelector('#main-content').inert = false;

2. 分步驟表單的完美解決方案

做網頁設計時遇到多步驟表單，總是要絞盡腦汁想怎麼防止用戶亂點擊？用 inert 就對啦！

html
<div class="step-1">
  <!-- 目前步驟 -->
</div>
<div class="step-2" inert>
  <!-- 尚未解鎖的步驟 -->
</div>

3. 載入中狀態的優雅處理

當網頁在載入資料時，我們可以優雅地禁用整個區塊：

javascript
const contentArea = document.querySelector('.content');

async function loadData() {
  contentArea.inert = true;  // 載入前禁用
  try {
    await fetchData();
  } finally {
    contentArea.inert = false;  // 載入完成後啟用
  }
}

inert 對網頁設計的無障礙支援有多強？

說到網頁設計的無障礙支援，inert 簡直是超級助手！來看看它的強大之處：

功能面向
傳統做法
使用 inert
鍵盤導航
需要手動處理 tabindex
自動處理！
螢幕閱讀器
需要額外 ARIA 設定
自動被忽略！
滑鼠點擊
需要額外 JavaScript
自動禁用！
維護成本
較高
超級低！

實戰應用：打造絕佳的用戶體驗

來分享幾個實際網頁設計中的使用案例：

1. 智慧型側邊選單

javascript
const sidebar = document.querySelector('.sidebar');
const mainContent = document.querySelector('.main-content');

function openSidebar() {
  sidebar.classList.add('active');
  mainContent.inert = true;  // 側邊選單開啟時，主內容區變為不可互動
}

2. 圖片輪播的進階體驗

javascript
function showSlide(index) {
  slides.forEach((slide, i) => {
    slide.inert = (i !== index);  // 只有當前投影片可以互動
  });
}

3. 遊戲化介面

javascript
function lockLevel(levelElement) {
  levelElement.inert = true;
  levelElement.classList.add('locked');
}

效能與相容性

欸！等等，你可能會擔心效能問題。但別擔心，inert 的效能影響微乎其微，因為它是原生 HTML 屬性！目前主流瀏覽器支援度：

• Chrome 102+ ：完全支援
• Firefox 103+：完全支援
• Safari 15.4+：完全支援
• Edge：完全支援

網頁設計師必學的 inert 小技巧

1. 動態控制時機：

javascript
// 建議在 requestAnimationFrame 中更新
requestAnimationFrame(() => {
  element.inert = shouldBeInert;
});

2. 搭配 CSS 樣式：

css
[inert] {
  opacity: 0.5;
  transition: opacity 0.3s;
  pointer-events: none;
}

3. 配合其他互動元素：

html
<div class="feature-box" inert="true">
  <button class="activate-btn">啟用功能</button>
  <div class="feature-content">
    <!-- 需要被保護的內容 -->
  </div>
</div>

inert 屬性真的是網頁設計中的一顆明珠！它不只讓我們的程式碼更簡潔，更重要的是能夠大幅提升使用者體驗。無論是做動態互動、無障礙支援，還是優化使用者介面，inert 都能幫上大忙。

最後提醒大家，在現代網頁設計中，優秀的 CX（客戶體驗）已經成為標配，而 inert 正是打造絕佳體驗的好幫手！它不只讓你的程式碼更乾淨，更讓使用者用起來更安心、更順手。

快來試試看吧！相信你一定會愛上這個功能的！如果你也有什麼 inert 的使用心得，歡迎在我們社群留言分享喔！

#前端開發 #網頁設計 #使用者體驗 #WebDevelopment