更好地撰寫部落格

CSS 檢視過渡的入門級指南

Yash Raj Bharti 2025 年 10 月 9 日 閱讀時間 5 分鐘

瞭解如何透過檢視過渡為多頁應用程式帶來流暢的動畫導航。只需一行 CSS，即可實現頁面間的無縫過渡。

MDN 新前端釋出

MDN 團隊 2025 年 8 月 19 日 閱讀時間 2 分鐘

MDN 煥然一新 🎉。瞭解發生了哪些變化、改進了哪些方面以及網站導航變得更加流暢。

從編碼器到解碼器的畫素資料

Polina Gurtovaia 2025 年 8 月 4 日 閱讀時間 18 分鐘

從單個畫素到螢幕上完全解碼的影像，原始畫素資料經過轉換、壓縮並高效傳輸。瞭解那些在不損失可感知質量的情況下縮小影像資訊的技術和最佳化方法。

慶祝 MDN 20 週年

Joe Walker 2025 年 7 月 23 日 閱讀時間 3 分鐘

MDN 20 歲了！讓我們回顧一下我們是如何開始的，MDN 如何成為 Web 開發人員最值得信賴的資源，它對開放 Web 的影響，是的，還有蛋糕。

面向人類和裝置的顏色模型

Polina Gurtovaia 2025 年 5 月 6 日 閱讀時間 17 分鐘

影像為 Web 帶來了更多的色彩和活力。本文描述了影像如何被人和不同裝置表示，並詳細介紹了色彩空間和視覺理論。

h1 元素的預設樣式正在改變

Simon Pieters 2025 年 4 月 11 日 閱讀時間 4 分鐘

瀏覽器開始推出巢狀節標題預設 UA 樣式的更改。本文描述了即將到來的更改，如何識別它是否是您網站上的問題，以及符合規範和結構更好的頁面的提示。

全球隱私控制的影響

Lola Odelola 2025 年 3 月 15 日 閱讀時間 5 分鐘

隨著其第一個工作草案的釋出，全球隱私控制 (GPC) 正在成為一項正式的隱私標準。讓我們看看它對開發人員和使用者意味著什麼。

JavaScript Temporal 即將到來

Brian Smith 2025 年 1 月 24 日 閱讀時間 5 分鐘

一種處理日期和時間的新方法正在新增到 JavaScript 中。讓我們看看 Temporal，它解決了哪些問題，當前的狀況，以及您將在 MDN 上關於它的新文件中找到什麼。

透過最佳化影像載入來修復您網站的最大內容繪製 (Largest Contentful Paint)

DebugBear 2025 年 1 月 13 日 閱讀時間 10 分鐘

學習提高您網站最大內容繪製指標（Core Web Vitals 的一部分）的技術。

MDN 2024 內容專案

Vadim Makeev 2025 年 1 月 8 日 閱讀時間 9 分鐘

讓我們回顧一下 MDN Web Docs 2024 年的內容專案，重點介紹我們的最佳選擇和推薦閱讀，以及 MDN 2025 年的下一步計劃。

MDN 上的新學習體驗

Ruth John 2024 年 12 月 20 日 閱讀時間 4 分鐘

MDN 上新增了一個“學習 Web 開發”部分，它將 MDN 課程與“學習”部分合並。以下是這些更改的背景、新內容以及您未來可以期待看到的內容。

透過每日程式設計挑戰倒計時迎接假期

Sonal Sood 2024 年 12 月 1 日 閱讀時間 2 分鐘

今年 12 月加入 JavaScriptmas，參加每日程式設計挑戰，旨在提升您的技能並帶來節日樂趣。在 Scrimba 上解決挑戰，學習新知識，並有機會贏取激動人心的獎品！

監控和最佳化網站效能

DebugBear 2024 年 11 月 11 日 閱讀時間 12 分鐘

瞭解如何閱讀網路請求瀑布圖、識別常見的網路效能問題以及最佳化頁面渲染。

如何獲得您的第一份開發人員工作

Per Borgen 2024 年 11 月 1 日 閱讀時間 11 分鐘

這裡有六種獲得第一份開發人員工作的有效策略。如果您是自學成才或沒有傳統計算機科學學位進入技術行業，這些策略尤其相關。

介紹新的 MDN 社群頁面

Pranshu Khanna 2024 年 10 月 15 日 閱讀時間 5 分鐘

我們很高興地宣佈新的 MDN 社群頁面，它將成為一個表彰貢獻者和貢獻者參與的中心。

修復您網站的 JavaScript 效能

DebugBear 2024 年 10 月 9 日 閱讀時間 9 分鐘

瞭解與過度使用 JavaScript 相關的鮮為人知的 Web 效能瓶頸，例如長時間任務、大型捆綁包大小和水合問題。

重返校園！透過 MDN 和 Scrimba 加速您的學習

Hermina Condei 2024 年 9 月 12 日 閱讀時間 2 分鐘

對於我們許多人來說，假期已經結束，是時候集中精力了。現在是深入學習 Web 開發的理想時機，您很幸運——MDN 和 Scrimba 在下個月將對精選課程提供 30% 的折扣！

使用 Streams API 高效處理資料

Vultr 2024 年 9 月 6 日 閱讀時間 6 分鐘

本文演示瞭如何在 Web 應用程式中使用 Streams API 即時獲取和轉換文字。透過在資料到達時進行處理，這種方法可以提高效能、響應能力和資源效率。

使用 Intl.Segmenter 在 JavaScript 中進行區域敏感文字分段

Brian Smith 2024 年 9 月 3 日 閱讀時間 5 分鐘

瞭解如何使用 Intl.Segmenter 在 JavaScript 中進行區域敏感文字分段，以簡化本地化、計算不同語言的單詞或句子等。

使用 Git stash 最佳化您的工作流程

GitLab 2024 年 8 月 28 日 閱讀時間 8 分鐘

瞭解如何使用 Git stash 分解大型提交。探索在切換分支時儲存工作的更好方法。

如何跨裝置除錯移動應用程式

LambdaTest 2024 年 8 月 7 日 閱讀時間 8 分鐘

本文探討了移動應用程式除錯是什麼、常用技術以及如何在多個裝置上除錯移動應用程式。

使用 HTML details 元素建立獨佔手風琴

Brian Smith 2024 年 8 月 5 日 閱讀時間 3 分鐘

HTML details 元素的“name”屬性正在獲得更多瀏覽器支援。瞭解此功能如何允許建立獨佔手風琴而無需從頭開始編寫指令碼小部件。

探索 Broadcast Channel API 用於跨標籤頁通訊

Vultr 2024 年 7 月 12 日 閱讀時間 4 分鐘

本文解釋瞭如何使用 Broadcast Channel API 構建同步和相互連線的 Web 應用程式。

MDN 與 Scrimba 合作，提升 Web 開發學習體驗

Hermina Condei 2024 年 7 月 9 日 閱讀時間 6 分鐘

我們選擇 Scrimba 作為 MDN 課程的合作伙伴。這篇博文探討了此次合作的實際意義，以及我們將如何共同提供更好的 Web 教育體驗。

介紹 MDN HTTP 觀察站

Hermina Condei 2024 年 7 月 2 日 閱讀時間 7 分鐘

HTTP 觀察站於 2016 年首次釋出，憑藉其有用的安全審計和教育材料的結合，在 Web 社群中廣受歡迎。快進到 2024 年，我們很高興地宣佈觀察站的新家是 MDN。請繼續閱讀以瞭解更多資訊，並熱烈歡迎 HTTP 觀察站！

使用 Next.js 進行靜態站點生成 (SSG)

Vultr 2024 年 6 月 28 日 閱讀時間 7 分鐘

本指南解釋瞭如何使用 Next.js 中的靜態站點生成來構建具有快速載入時間並專注於效能的可伸縮和安全的 Web 應用程式。

新的 JavaScript Set 方法

Brian Smith 2024 年 6 月 24 日 閱讀時間 5 分鐘

新的 JavaScript Set 方法正在跨瀏覽器推出。瞭解 Set、如何使用這些方法比較不同的 Set、建立具有特定屬性的新 Set 等。

保護 API：Express 速率限制和減速

Vultr 2024 年 5 月 28 日 閱讀時間 6 分鐘

本指南向您介紹了速率限制和減速機制。瞭解如何在 Express 應用程式中應用減速和速率限制機制。

使用 Page Visibility API

Brian Smith 2024 年 5 月 10 日 閱讀時間 6 分鐘

本文探討了頁面可見性是什麼、如何在應用程式中使用 Page Visibility API，並描述瞭如果您圍繞此功能構建功能時應避免的陷阱。

MDN 部落格釋出一週年

MDN 團隊 2024 年 5 月 3 日 閱讀時間 5 分鐘

自 2023 年 5 月以來，我們一直在 MDN 部落格上撰寫有關 Web 開發和 Web 平臺的內容。以下是我們的亮點和熱門文章以及我們的最愛。

在 Vultr 上設定 Service Worker

Vultr 2024 年 4 月 23 日 閱讀時間 6 分鐘

本指南向您介紹了 Service Worker 及其生命週期。瞭解如何在 Vultr 上使用 HTTPS 部署包含 Service Worker 的專案。

Interop 2023：MDN 更新

Brian Smith 2024 年 3 月 27 日 閱讀時間 6 分鐘

Interop 2023 已成功結束，Interop 2024 專案現已正式啟動。瞭解 Interop 是什麼，發現 Interop 2023 在 MDN 上的更新，並瞭解 Web 即將推出的內容。

在 Vultr 上使用 Jest 測試 JavaScript

Vultr 2024 年 3 月 22 日 閱讀時間 7 分鐘

本指南向您介紹了常見的測試型別和測試約定。瞭解如何在 Vultr 上使用 Jest 測試 JavaScript。

使用 CSS color-mix() 函式建立調色盤

Michelle Barker 2024 年 3 月 8 日 閱讀時間 7 分鐘

Web 上的顏色處理變得更加有趣！在本文中，我們將探討如何使用 CSS color-mix() 函式建立調色盤中的變體。

使用 TestGrid 實現傳統測試自動化的現代化

TestGrid 2024 年 2 月 29 日 閱讀時間 12 分鐘

本文反思了使用 Selenium 和 Appium 的傳統測試自動化方法。瞭解如何使用 TestGrid 的統一測試平臺來增強傳統方法，並利用現代無程式碼測試技術。

起飛：MDN 課程啟動

Hermina Condei 2024 年 2 月 27 日 閱讀時間 6 分鐘

期待已久的 MDN 課程現已在 MDN 上線，為行業新手提供了前端開發基本技能和最佳實踐的結構化指南。在本文中瞭解所有關鍵細節。

建立有效的技術文件

Dipika Bhattacharya 2024 年 2 月 13 日 閱讀時間 7 分鐘

本文概述了建立有效技術文件所需的核心元件。學習最佳實踐，使您的文件清晰、一致且結構良好。

在 Vultr 上利用 Bun：Node.js 的卓越替代品

Vultr 2024 年 1 月 17 日 閱讀時間 5 分鐘

本指南解釋了 Bun 作為執行時包管理器和打包器的功能。它還解釋了內建 Bun API 的優點以及如何使用 Bun 的 Vultr 市場應用程式。

CSS 中的邊框影像：Interop 2023 的一個關鍵重點領域

Dipika Bhattacharya 2023 年 12 月 19 日 閱讀時間 10 分鐘

為了與 Interop 2023 強調的跨瀏覽器一致性保持一致，本文將引導您瞭解各種 `border-image` 屬性，您可以控制這些屬性來建立引人入勝的網頁設計。瞭解如何使用自定義圖形來增強您網站的外觀，使其在不同瀏覽器中保持一致。

使用 OpenLLM 和 Vultr Cloud GPU 構建 AI 驅動的應用程式

Vultr 2023 年 12 月 12 日 閱讀時間 7 分鐘

瞭解如何使用 OpenLLM 和 Vultr Cloud GPU 構建 AI 驅動的應用程式。本指南演示瞭如何使用大型語言模型生成 API 響應。它還涵蓋了設定 Nginx 伺服器和實施 SSL 安全性的說明。

2024 年告別第三方 Cookie

Chris Mills 2023 年 12 月 8 日 閱讀時間 8 分鐘

2023 年末傳來了關於 Web 隱私的好訊息，Chrome 宣佈將在 2024 年加入 Firefox 和 Safari 的行列，棄用第三方 Cookie。瞭解有關這些變化的更多詳細資訊，以及它們對 Web 開發人員意味著什麼。

Baseline 在 MDN 上的演變

Vadim Makeev 2023 年 12 月 5 日 閱讀時間 4 分鐘

今天，我們正在更新 Baseline 小部件並引入一個新小部件，同時更新了 Baseline 的定義。

開發人員必備：JavaScript 控制檯方法

Brian Smith 2023 年 11 月 30 日 閱讀時間 6 分鐘

JavaScript 控制檯是 Web 開發必不可少的工具。學習使用控制檯顯示資料和除錯程式碼的新穎有趣方法。

CSS 容器查詢入門

Michelle Barker 2023 年 11 月 16 日 閱讀時間 8 分鐘

CSS 容器查詢是我們 CSS 佈局工具箱中一個強大的新工具。本文將深入探討使用容器查詢構建佈局的實用性。

在 Vultr 上使用 PM2 部署 Node.js 應用程式

Vultr 2023 年 11 月 8 日 閱讀時間 7 分鐘

瞭解如何使用 PM2 在 Vultr 上部署 Node.js 應用程式以建立持久服務。本指南演示瞭如何透過 PM2 叢集模式高效利用資源。它還涵蓋了 Nginx 伺服器設定和 SSL 安全性。

VS Code：初學者提示和技巧

Dipika Bhattacharya 2023 年 11 月 7 日 閱讀時間 8 分鐘

發現使用功能強大的整合開發環境 Visual Studio Code (VS Code) 的基本提示和技巧。瞭解如何利用其整合編輯功能和 Git 支援，並探索一些擴充套件。

即將推出：MDN Observatory 2.0

MDN 團隊 2023 年 10 月 25 日 閱讀時間 2 分鐘

Observatory 2.0 即將作為 Mozilla Developer Network 的一部分推出，名為 MDN Observatory，包含新的安全評分標準和其他激動人心的更新。

使用 GitLab 的條件 CI/CD 流水線最佳化 DevSecOps 工作流程

GitLab 2023 年 10 月 23 日 閱讀時間 8 分鐘

本指南探討了各種型別的 CI/CD 流水線，並幫助您瞭解它們的特定用例。瞭解如何利用規則建立高效的 DevSecOps 工作流程。

Web 可持續性簡介

Michelle Barker 2023 年 10 月 11 日 閱讀時間 8 分鐘

網頁設計師和開發人員可以做些什麼來構建一個更具可持續性的 Web？本文探討了 Web 技術對環境的影響，並研究了我們可以構建更環保網站的一些方法。

從 GitHub 無縫遷移到 GitLab：分步指南

GitLab 2023 年 10 月 5 日 閱讀時間 9 分鐘

考慮從 GitHub 遷移到 GitLab 嗎？本指南揭開了遷移過程的神秘面紗，解決了希望在兩個平臺之間無縫過渡的 DevSecOps 團隊的常見問題。本文提供了一步一步的指導教程，說明如何將資料從 GitHub 遷移到 GitLab。

宣佈 MDN 前端開發人員課程

MDN 團隊 2023 年 8 月 14 日 閱讀時間 5 分鐘

MDN 為有抱負的前端開發人員建立了一門課程，以幫助他們建立有益和成功的職業生涯。瞭解課程內容、適用人群以及其背後的研究。

使用 linear() 函式在 CSS 動畫中建立自定義緩動效果

Michelle Barker 2023 年 8 月 1 日 閱讀時間 10 分鐘

新的 CSS linear() 計時函式可在動畫中實現自定義緩動。透過實際示例，探索 linear() 與用於緩動的其他計時函式相比如何工作。

保護您的 CDN：為什麼要以及如何使用 SRI

Terence Eden 2023 年 7 月 21 日 閱讀時間 4 分鐘

依賴外部資源來構建您的網站總是充滿風險的。瞭解如何透過使用 SRI 保護第三方內容來保護您的網站及其訪問者。

CSS 中的滾動進度動畫

Michelle Barker 2023 年 7 月 14 日 閱讀時間 7 分鐘

滾動驅動動畫即將登陸 CSS！在本文中，我們將介紹幾種型別的動畫，並學習如何將它們連結到容器的滾動進度。

AI Explain 的反思：事後總結

MDN 團隊 2023 年 7 月 11 日 閱讀時間 10 分鐘

我們最近釋出了一個名為 AI Explain 的功能，但目前已將其回滾。在本文中，我們將深入探討 AI Explain 背後的故事：它的開發、釋出以及導致我們暫停的原因。

開發人員必備：如何使用 grep 搜尋程式碼

Brian Smith 2023 年 7 月 3 日 閱讀時間 9 分鐘

grep 是一個強大的工具，用於從終端搜尋程式碼。本文將向您展示如何使用 grep 以及它為何是開發人員的必備工具。

介紹 AI Help (Beta)：您的 Web 開發伴侶

Hermina Condei 2023 年 6 月 27 日 閱讀時間 3 分鐘

我們正在推出由 MDN 和 OpenAI GPT 3.5 提供支援的 AI 助手，以即時回答您的所有 Web 開發問題。

學習如何在 CSS 顏色中使用 HSL 中的色相

Brian Smith 2023 年 6 月 26 日 閱讀時間 7 分鐘

色相是 CSS 中定義顏色的明亮方式。瞭解色相、色輪、如何使用顏色函式以及如何使用色相為您的網站建立充滿活力的調色盤。

介紹 MDN Playground：讓您的程式碼煥發生機！

Florian Dieminger 2023 年 6 月 22 日 閱讀時間 6 分鐘

MDN 正在推出一個程式碼 Playground。使用者可以原型化想法並將所有即時示例擴充套件為互動式體驗。

MDN 文件更新：CSS 選擇器和媒體查詢、WebGPU 和 WebTransport API、漸進式 Web 應用

Dipika Bhattacharya 2023 年 6 月 13 日 閱讀時間 6 分鐘

發現 CSS :lang()、實驗性媒體查詢、使用 WebGPU 操作圖形、使用 WebTransport 進行客戶端-伺服器通訊、ECMAScript 模組支援等等。

如何僅用一個 JavaScript 函式繪製任何規則形狀

Ruth John 2023 年 5 月 26 日 閱讀時間 4 分鐘

學習如何使用 JavaScript 透過一個函式在 HTML 畫布上繪製任何規則形狀，以及如何修改它以繪製多個形狀。

MDN JavaScript 正則表示式的新參考頁面

Brian Smith 2023 年 5 月 23 日 閱讀時間 5 分鐘

檢視 MDN 關於 JavaScript 正則表示式參考頁面的最新更新，包括關於子功能和瀏覽器相容性資訊的新部分。

慶祝全球無障礙宣傳日

Schalk Neethling 2023 年 5 月 18 日 閱讀時間 6 分鐘

為了慶祝 2023 年全球無障礙宣傳日，我們分享了一些工具和指南，以幫助您使 Web 更具無障礙性。

使用 HTML 地標角色改善無障礙性

Schalk Neethling 2023 年 5 月 15 日 閱讀時間 11 分鐘

瞭解 HTML 地標角色是什麼、它們如何改善無障礙性以及如何有效地將它們包含在您的網站上。

介紹 Baseline：穩定 Web 功能的統一檢視

Hermina Condei 2023 年 5 月 10 日 閱讀時間 3 分鐘

MDN 在實施 WebDX 社群小組的努力方面處於領先地位，為開發人員提供了清晰簡單的 Web 平臺基線。

:`not()` 如何連結多個選擇器

Dipika Bhattacharya 2023 年 5 月 5 日 閱讀時間 4 分鐘

瞭解當將多個選擇器作為引數傳遞時，CSS `not()` 偽類如何表現。

CSS 顏色（Level 4）中的新函式、漸變和色相

Brian Smith 2023 年 5 月 3 日 閱讀時間 9 分鐘

瞭解 CSS 顏色模組 Level 4 中的新功能，包括顏色空間、顏色函式、炫酷漸變以及對寬色域顯示的支援。

歡迎來到 MDN 部落格

Ruth John 2023 年 5 月 3 日 閱讀時間 2 分鐘

MDN 部落格作為 MDN Web Docs 的延伸，釋出 Web 開發新聞、教程和見解，幫助您發現、學習和為 Web 創作。