我喜歡寫一些哲學性的文章——關於程式碼、工作等等的思考。我也喜歡深入探討技術細節。但我知道你們更喜歡我列出的那些鮮為人知的酷炫功能清單😄
我最近怎麼樣？這週我既要準備一個會議，又要解決性能問題，還要努力為即將到來的假期做好準備 😉
還有一件好事發生。我喜歡寫作——不只是技術文章，而是所有類型的寫作。去年夏天我的生活發生了很大的變化，為了保持理智，我開始寫一篇科幻小說，並把它投稿到波蘭科幻基金會的比賽。雖然沒得獎，但我的故事也算走得挺遠──在179篇投稿中排到了第13名左右。考慮到這是我第一次嘗試這種類型的寫作……結果已經很不錯了😄
說到科幻——那種就在我們眼前發生的科幻😉 今天我整理了一系列瀏覽器已經可以實現的功能，說實話，不久前我都沒想過這些。其中許多功能還不太為人所知，但許多現代瀏覽器已經支援這些功能了。祝你玩得開心！
-
“我稍後再執行它” →
requestIdleCallback
起初我覺得這個API沒什麼用。它基本上就是讓你在沒什麼事發生的時候執行一些程式碼。好吧……挺酷的……但我為什麼要用它呢？
事實證明，它的應用場景非常廣泛。例如，收集使用者在頁面上的行為資料——這絕對不是你在渲染 200 個元件時應該做的事情😅。或載入不太重要的資料、預處理某些內容、在背景產生影像。
說實話，可能有多少開發者，就有多少應用程式場景。
function trackUserScrolling() {
console.log("User scrolled. This changes everything.");
}
if ("requestIdleCallback" in window) {
requestIdleCallback(trackUserScrolling);
} else {
setTimeout(trackUserScrolling, 0);
}支援：現代瀏覽器（Safari 瀏覽器歷史上一直不支持，因此備用方案仍然是個好主意）
-
“為什麼我的輸入沒有高亮顯示？？？” →
:focus-within
要為獲得焦點的元素設定樣式很容易。但如果你想為父級 div 設定樣式呢？例如，把它變成粉紅色，加上一些花朵 😉 你可以寫 40 行 JavaScript 程式碼…或直接使用:focus-within 。
運作正常。無需監聽。沒有漏洞。沒有痛苦。
.form-field {
border: 1px solid #ccc;
padding: 12px;
}
.form-field:focus-within {
border-color: hotpink;
}<div class="form-field">
<input placeholder="Type something meaningful..." />
</div>支持：基本上所有重要的地方
-
“讓我們顯示離線模式” →
navigator.onLine
你開發過 PWA 嗎？我開發過，而永恆的難題就是當使用者斷網時該怎麼辦（例如他們在野外或剛走進電梯😄）。你可以寫一堆複雜的 if 語句，或是直接監聽offline和online 。 offline時，你可以把資料儲存在 IndexedDB 中，等用戶重新上線後再把資料傳送到伺服器。
window.addEventListener("offline", () => {
alert("You are offline. Time to panic.");
});
window.addEventListener("online", () => {
alert("You're back. Panic cancelled.");
});支援：廣泛支援（但“在線”≠“您的後端執行正常”😅）
-
“流暢的動畫，但要帶點詛咒效果” →
requestAnimationFrame
我們都見過這種情況：
setInterval(() => {
element.style.left = Math.random() * 100 + "px";
}, 16);你可能已經感覺到這不是個好主意了😉 它會卡頓。幸好我們有requestAnimationFrame ，它與瀏覽器的重繪週期同步，所以效果還算流暢。
function animate() {
element.style.transform = `translateX(${Date.now() % 300}px)`;
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);支援：無所不在
-
“這張卡片應該適應…但僅限此處” → 容器查詢
這個功能感覺有點不公平。我現在職涯的這個階段，幾乎不再寫 CSS 了（當然，偶爾寫寫 CSS 的情況除外，例如我在這裡描述的：在 2026 年學習 CSS 是否浪費時間？ ）。
但曾經有一段時間，我寫了很多這類程式碼。哇——我多麼希望當初能把媒體查詢應用到特定元素而不是整個視口。現在我們終於可以了。元件有了自我感知能力，我們可以去喝杯咖啡了。
.card-wrapper {
container-type: inline-size;
}
.card {
display: grid;
}
@container (min-width: 400px) {
.card {
grid-template-columns: 1fr 2fr;
}
}支援：現代瀏覽器（如有需要，請新增備用方案）
-
“隨機ID，能出什麼問題呢？” →
crypto.getRandomValues
const id = Math.random().toString(36).slice(2);這就是漏洞的由來。它看起來像是速賣通上「夠好」的加密演算法，而且一開始運作正常……直到出現問題。首先，這取決於引擎的實現——我們並不真正了解其底層運作機制。某些模式是完全有可能出現的，而使用足夠多的 ID 時，你實際上就是在自找重複。
幸運的是，我們現在有了一個簡單的原生解決方案。它並非萬能靈藥，但crypto.getRandomValues相當可靠——熵值更高，沒有奇怪的模式，並且顯著降低了衝突的機率。瀏覽器只是正確地處理了它。
const bytes = new Uint8Array(8);
crypto.getRandomValues(bytes);
const id = Array.from(bytes)
.map(b => b.toString(16).padStart(2, "0"))
.join("");
console.log("Secure-ish ID:", id);支持：廣泛支持
-
“我們需要一個模態框” →
<dialog>
瀏覽器終於響應號召，提供模態框，這真是太好了😄 再也不用為了打開用戶喜愛的對話框而安裝 12KB 的庫了。而且這個模態框預設就是可存取的，簡直是雙贏。
<dialog id="modal">
<p>Are you sure you want to deploy on Friday?</p>
<button onclick="modal.close()">Cancel</button>
<button onclick="alert('Good luck 😬')">Deploy</button>
</dialog>
<button onclick="modal.showModal()">Open modal</button>支援：現代瀏覽器
-
“語音輸入會很酷…” → 語音 API
你是不是因為需要語音辨識功能而安裝了 transformers.js？別擔心－瀏覽器本身就支援語音辨識。至少 Chromium 瀏覽器支援 😄 所以，如果你能「鼓勵」用戶使用 Chrome、Edge 或類似的瀏覽器，那就萬事大吉了。就我個人而言，在生產環境中使用還是要謹慎，但如果是演示的話？何樂而不為呢？
const SpeechRecognition =
window.SpeechRecognition || window.webkitSpeechRecognition;
if (SpeechRecognition) {
const recognition = new SpeechRecognition();
recognition.onresult = e => {
console.log("You said:", e.results[0][0].transcript);
};
recognition.start();
}支持：主要為 Chrum
-
“這段 CSS 會不會崩潰？” →
@supports
這裡有一個現代的解決方案，可以解決經典的「在我機器上執行正常」的問題——至少在 CSS 中是這樣 😉 你無需猜測某個元素是否會破壞佈局。只需將其包裹在@supports中即可。不過這裡有個小問題——雖然 @supports 非常好用，但它並非無處不在，所以諷刺的是……我們可能會用@supports來代替 `@supports 。
.card {
background: white;
}
@supports (backdrop-filter: blur(10px)) {
.card {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.6);
}
}支持：非常好
⚠️ 但別誤會我的意思
庫很棒，有時候你確實需要它們。但有時候…你安裝的依賴項，瀏覽器幾年前就已經解決了。在安裝任何東西之前，先問問自己（或谷歌一下）：「瀏覽器在這方面是不是已經比我更聰明了？」有時候答案是肯定的。而這……完全沒問題😄
原文出處：https://dev.to/sylwia-lask/9-things-youre-overengineering-the-browser-already-solved-them-o99
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
