教學

教學
==

這個頁面提供了許多關於網路相關技術的說明及學習文件。無論你是正在打基礎的新手或有經驗的老手，相信在這個頁面你都能找到許多有用的資源。這些開發資源是由具有前瞻思維的公司及擁抱開放標準的開發者所提供，允許任何人翻譯它並以 Creative Commons 的條款釋出。

Web 完全新手
--------

Web 新手上路

本系列文章簡介 web 開發 (web development) 是怎麼一回事。你將會設置所需要的工具、製作一個簡易的網頁，然後發表你的程式碼。

HTML 教學
-------

### 初級

HTML 入門

此單元，為了孰悉重要的概念和語法，思考將 HTML 轉為文字, 如何建立超連鏈接, 以及如何使用 HTML 架構建立網站做好準備。

**MDN HTML 元素引用 (en-US)**

HTML 元素綜合參考。以及在不同瀏覽器的支援程度。

**使用 HTML 建立一個簡易網站 (The Blog Starter)**

適用於 HTML 初學者的指南，其中包含常見的標籤( tag ), 其中包括利用編碼範例步驟，一步步指導建立一個基本網頁。

**初學者 HTML 指南 (Website Setup)**

此指南將指導你如何使用 HTML 和 HTML5 標籤 (tags) 建立基礎網站。 簡易的步驟教學，以及包含可用於提升編碼技巧的圖像和資源。

**HTML 挑戰(Wikiversity)**

使用這些挑戰來磨練你的 HTML 技能 (例如 : "Should I use an <h2> element or a <strong> element?"), 注意這些含有意義的標籤。

### 中級

多媒體及崁入

此單元探討包含如何使用 HTML 崁入多媒體於網頁之中，包括使用不同方式讓崁入圖片，影片，聲音檔，甚至是其他整個網頁。

HTML 表格

將資料以可理解的方式使用表格呈現在網頁上 accessible 方法可能是一個挑戰。本文涵蓋基礎的表格標記，以及更複雜的功能，例如實現說明標題及概述。

### 高級

HTML 表單

表單是網際網路一個非常重要的部分 - 這些涵蓋了網站互動所需的大部分功能，例如 : 註冊、登入、發送回饋，購買產品等。本文將幫助你開始創建客戶回饋表單。

**給程式創作者快速載入 HTML 網頁的提示 (en-US)**

優化網頁，為使用者提供響應式網站，減少 web 服務器和 Internet 連線的負擔。

CSS 教學
------

### 初級

CSS 基本概念

CSS（層疊樣式表）是用於設置網頁樣式的編碼。 CSS Basics 將帶領你了解入門所需的內容。 我們將回答以下問題，例如：如何將文字設為黑色或紅色？ 如何讓我的內容顯示在螢幕上的這些地方？ 如何用背景圖片和顏色布置我的網頁？

介紹 CSS

本單元深入介紹 CSS 應用，包括選擇器和屬性，編寫 CSS 規則，將 CSS 應用於 HTML，如何指定 CSS 中的長度，顏色和其他單位，並列和繼承，框框模組基本知識和 CSS 除錯。

樣式框 (en-US)

接下來，我們來看看樣式框，這是建立網頁的基本步驟之一。 在本單元中，我們回顧一下框框模組，通過設置邊框和邊距，自定義背景顏色，圖像和其它以及酷炫的功能（如陰影和框上的濾鏡）來查看樣式框佈局。

樣式文本

在此，我們看看文本樣式基礎，包括設置字體，粗體和斜體，線條和字母間距以及陰影和其他文本功能。 我們通過查看將自定義字體應用於頁面以及樣式列表和鏈接來完善模組。

**常見的 CSS 問題 (en-US)**

初學者的常見問題及解答。

### 中級

CSS 布局

此時，我們已看過 CSS 基礎知識，如何設置文本樣式，以及如何設置和操作內容所在的框框。 現在是時候看看如何將框框放在彼此之間相對位置上的正確位置。 我們已經涵蓋了必要的先決條件，因此現在可以深入了解 CSS 佈局，查看不同的顯示設置，包含浮動和定位的傳統佈局方法，以及 Flexbox 等新的佈局工具。

**CSS 參考 (en-US)**

完整參考 CSS，詳細介紹 Firefox 和其他瀏覽器的支援度。

**流變格線框架 (A List Apart)**

在瀏流器視窗大小調整的同時，能夠流暢地調整內容大小的設計佈局，同時使用字體排版格線。

**CSS 挑戰 (Wikiversity)**

提高你的 CSS 技能，並了解需多加練習的地方。

### 高級

**Using CSS transforms (en-US)**

Apply rotation, skewing, scaling, and translation using CSS.

**CSS transitions (en-US)**

CSS transitions, part of the draft CSS3 specification, provide a way to animate changes to CSS properties, instead of having the changes take effect instantly.

**Quick Guide to Implement Web Fonts with @font-face (HTML5 Rocks)**

The @font-face feature from CSS3 allows you to use custom typefaces on the web in an accessible, manipulatable, and scalable way.

**Starting to Write CSS (David Walsh)**

An introduction to tools and methodologies to write more succinct, maintainable, and scalable CSS.

Canvas tutorial

Learn how to draw graphics using scripting using the canvas element.

**HTML5 Doctor**

Articles about using HTML5 right now.

JavaScript 教學
-------------

### 初級

JavaScript first steps

In our first JavaScript module, we first answer some fundamental questions such as "what is JavaScript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing JavaScript. After that, we discuss some key JavaScript features in detail, such as variables, strings, numbers and arrays.

JavaScript building blocks

In this module, we continue our coverage of all JavaScript's key fundamental features, turning our attention to commonly-encountered types of code block such as conditional statements, loops, functions, and events. You've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly.

Getting started with JavaScript

What is JavaScript and how can it help you?

**Codecademy (Codecademy)**

Codecademy is a easy way to learn how to code JavaScript. It's interactive and you can do it with your friends.

### 中級

Introducing JavaScript objects

In JavaScript, most things are objects, from core JavaScript features like strings and arrays to the browser APIs built on top of JavaScript. You can even create your own objects to encapsulate related functions and variables into efficient packages. The object-oriented nature of JavaScript is important to understand if you want to go further with your knowledge of the language and write more efficient code, therefore we've provided this module to help you. Here we teach object theory and syntax in detail, look at how to create your own objects, and explain what JSON data is and how to work with it.

Client-side web APIs

When writing client-side JavaScript for web sites or applications, you won't go very far before you start to use APIs — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other web sites or services. In this module we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work.

**A re-Introduction to JavaScript (en-US)**

A recap of the JavaScript programming language aimed at intermediate-level developers.

**Eloquent JavaScript**

A comprehensive guide to intermediate and advanced JavaScript methodologies.

**Speaking JavaScript (Dr. Axel Rauschmayer)**

For programmers who want to learn JavaScript quickly and properly, and for JavaScript programmers who want to deepen their skills and/or look up specific topics.

**Essential JavaScript Design Patterns (Addy Osmani)**

An introduction to essential JavaScript design patterns.

### 高級

JavaScript Guide

A comprehensive, regularly updated guide to JavaScript for all levels of learning from beginner to advanced.

**You Don't Know JS (Kyle Simpson)**

A series of books diving deep into the core mechanisms of the JavaScript language.

**JavaScript Garden**

Documentation of the most quirky parts of JavaScript.

**Exploring ES6 (Dr. Axel Rauschmayer)**

Reliable and in-depth information on ECMAScript 2015.

**Javascipt Patterns**

A JavaScript pattern and antipattern collection that covers function patterns, jQuery patterns, jQuery plugin patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, DOM.

**How browsers work**

A detailed research article describing different modern browsers, their engines, page rendering etc.

JavaScript Videos (GitHub)

A collection of JavaScript videos to watch.

### Extension Development

WebExtensions

WebExtensions is a cross-browser system for developing browser add-ons. To a large extent the system is compatible with the extension API supported by Google Chrome and Opera. Extensions written for these browsers will in most cases run in Firefox or Microsoft Edge with just a few changes. The API is also fully compatible with multiprocess Firefox.


Web 開發者指引

Web 開發者指引
=========

這些文章提供了如何幫助你使用特定技術和 APIs 的資訊。

**備註：** 很抱歉。這個頁面在我們完成內容遷移之前會很混亂。

JavaScript

JavaScript 是用來創造網頁應用程式的腳本化語言.

參見
--

* Web Developer Reference


製作 OpenSearch 搜尋模組

製作 OpenSearch 搜尋模組
==================

OpenSearch 描述語法敘述了搜尋引擎，以便網站用戶透過瀏覽器或其他用戶端程式使用之。OpenSearch 支援最新版的 Firefox、Internet Explorer、Safari、Chrome.

Firefox 還支援搜尋建議與 `<SearchForm>` 元素……等 OpenSearch 標準內尚未包含的功能。這篇文章會聚焦在如何撰寫可支援 Firefox 特殊功能、且和 OpenSearch 格式相容的搜尋套件。

OpenSearch 描述檔能從網頁安裝搜尋模組中描述的方式安裝。

OpenSearch 描述檔
--------------

這個描述搜尋引擎的 XML 檔其實很簡單，參考下面的基本樣板，以斜體標示的部分則依需求修改即可。

```xml
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
 xmlns:moz="http://www.mozilla.org/2006/browser/search/">
  <ShortName>SNK</ShortName>
  <Description>Search engine full name and summary</Description>
  <InputEncoding>UTF-8</InputEncoding>
  <Image width="16" height="16" type="image/x-icon">data:image/x-icon;base64,AAABAAEAEBAAA ...</Image>
  <Url type="text/html" template="searchURL">
    <Param name="key name" value="{searchTerms}"/>
    ...
    <Param name="key name" value="parameter value"/>
  </Url>
  <Url type="application/x-suggestions+json" template="suggestionURL"/>
  <moz:SearchForm>http://example.com/search</moz:SearchForm>
</OpenSearchDescription>
```

ShortName

搜尋引擎簡稱。**Restrictions:** The value must contain 16 or fewer characters of plain text. The value must not contain HTML or other markup.

Description

搜尋引擎的簡要描述。**Restrictions:** The value must contain 1024 or fewer characters of plain text. The value must not contain HTML or other markup.

InputEncoding

搜尋引擎資料輸入時的編碼方式，例如說：`<InputEncoding>UTF-8</InputEncoding>`。

Image

URI to an icon representative of the search engine. When possible, search engines should offer a 16×16 image of type "image/x-icon" and a 64×64 image of type `image/jpeg` or `image/png`. The URI may also use the `data:` URI scheme (en-US). You can generate a `data:` URI from an icon file at The `data:` URI kitchen.

```xml
<Image height="16" width="16" type="image/x-icon">https://example.com/favicon.ico</Image>
<!-- or -->
<Image height="16" width="16">data:image/x-icon;base64,AAABAAEAEBAAA ... DAAA=</Image>
```

Firefox caches the icon as a base64 `data:` URI (search plug-ins are stored in the profile's "searchplugins" folder). `http:` URIs are changed to `data:` URIs when this is done.

**備註：** For icons loaded remotely (i.e. from `https://` URIs as opposed to `data:` URIs), Firefox will reject icons larger than 10 kilobytes in size.

![Search suggestions from Google displayed in Firefox's search box](/zh-TW/docs/Web/OpenSearch/searchsuggestionsample.png)

**Url**

描述搜尋用的 URL。以 `template` 屬性指定其搜尋 URL。Firefox 支援以下型態的 URL：

* `type="text/html"`，即是搜尋用的 URL。
* `type="application/x-suggestions+json"`，用以取回「搜尋建議」的 URL。
* `type="application/x-moz-keywordsearch"` specifies the URL used when a keyword search is entered in the location bar. This is supported only in Firefox.

這些型態的 URL 都可以使用 `{searchTerms}` 字串來決定要關鍵字於 URL 中的位置，其他可用的參數請參考 OpenSearch 1.1 參數規格。

在支援「搜尋建議」的模組中，搜尋的 URL 應可取回一組以 JSON 格式編寫的數據，提供這類服務的詳細方法請見讓搜尋模組支援搜尋建議。

Param

隨搜尋要求一併送出的參數，每組皆有參數名稱及其值。指定參數時可放入 `{searchTerms}` 字串來取得使用者輸入的搜尋關鍵字。

moz:SearchForm

搜尋網站的網址，提供 Firefox 使用者不搜尋、直接連到搜尋網站的方法。

**備註：** 由於此元素非 OpenSearch 標準規格而是 Firefox 獨有，故加上「`moz:`」名稱空間，已確保不支援的用戶端能直接跳過此元素。

自動測知搜尋模組
--------

提供搜尋模組的網站能以「自動測知」的方式，讓 Firefox 使用者輕易安裝搜尋模組，增加使用率。

只要在網頁的 `<head>` 區段內加上下一行就可以支援自動測知功能：

```html
<link
 rel="search"
 type="application/opensearchdescription+xml"
 title="searchTitle"
 href="pluginURL" />
```

如上所示地修改上面的**粗體字** :

**searchTitle**

這是搜尋引擎的名稱，例如「Search MDC」或「雅虎搜尋」等。這個名稱應該與引擎名稱一樣。

**pluginURL**

瀏覽器可以下載的搜尋引擎 XML 檔案位置。

如果網站擁有多種搜尋模組，也可以讓它們全部支援自動測知。例如：

```html
<link
 rel="search"
 type="application/opensearchdescription+xml"
 title="MySite: By Author"
 href="http://example.com/mysiteauthor.xml" />

<link
 rel="search"
 type="application/opensearchdescription+xml"
 title="MySite: By Title"
 href="http://example.com/mysitetitle.xml" />
```

這樣，網站就能提供以作者或以標題，作為搜尋獨立實體的模組。

讓 OpenSearch 套件自動更新
-------------------

 只要在 `Url` 元素添加額外的
 `application/opensearchdescription+xml` type 屬性，OpenSearch 套件就可以自動更新。`rel` 屬性需要是 `self`、要自動更新的 template 則需要是屬於 OpenSearch 文件的 URL。

例如說：

```xml
<Url type="application/opensearchdescription+xml"
 rel="self"
 template="http://example.com/mysearchdescription.xml" />
```

**備註：** 目前的 addons.mozilla.org（AMO）不支援自動更新 OpenSearch 套件。如果要把搜尋套件放到 AMO，請不要用上自動更新的功能。

除錯技巧
----

如果搜尋套件 XML 發生錯誤，you could run into errors when adding a discovered plugin。如果錯誤訊息沒有用，以下技巧能幫忙找出問題。

* 供應伺服器 OpenSearch 套件服務的伺服器必須使用 `Content-Type: application/opensearchdescription+xml`。
* 確認搜尋套件 XML 的格式正確。你可以直接用 Firefox 載入該檔案。template URL 的 & 符號需要像 `&` 這樣跳脫，標籤也要用正斜線或 end tag 關閉。
* `xmlns` 屬性很重要，少了它就會出現「Firefox could not download the search plugin」的錯誤訊息。
* 你**必須**包含 `text/html` URL：搜尋套件只包含 Atom 或 RSS URL 類型（雖然它有效，但 Firefox 不支援）都可能發生「could not download the search plugin」錯誤。
* 遠端擷取的小圖標（favicon）不能大於 10KB（請參見 Firefox bug 361923）。

In addition, the search plugin service provides a logging mechanism that may be of use to plugin developers. Use `about:config` to set the pref '`browser.search.log`' to `true`. Logging information will appear in Firefox's Error Console (Tools 〉 Error Console) when search plugins are added.

參考
--

* OpenSearch Documentation, OpenSearch Documentation about the Url and Param element
* imdb.com has a working osd.xml
* `data:` URI scheme
* OpenSearch Plugin Generator
* Ready2Search - create OpenSearch plugins. Customized Search through Ready2Search


漸進式網路應用程式

漸進式網路應用程式
=========

漸進式網路應用程式（Progressive web app）使用當代 web API，並以漸進增強策略，建立跨平台 web 應用程式。 這些程式提供了能讓用戶體驗，逼近於原生程式的功能。這套文件將講述你需要知道的一切。

PWA 優勢
------

PWA 應該要可探索、可安裝、可連結、可獨立於網路、可漸進、可接合、響應式、以及安全（discoverable, installable, linkable, network independent, progressive, re-engageable, responsive, safe）。需要有關這方面的理解，請參閱漸進式網路應用程式的優勢 (en-US)。如果需要實作細節，請參考以下章節表列的教學。

PWA 核心教學
--------

以下教學將以簡單例子告訴你，在實作 PWA 時所需要的東西，並講述一切如何運行。

1. 漸進式網路應用程式簡介 (en-US)
2. 漸進式網路應用程式架構 (en-US)
3. 使用 Service worker 讓 PWA 能離線工作 (en-US)
4. 如何令 PWA 可安裝 (en-US)
5. 如何使用 Notifications 與 Push 令 PWA 可重連線 (en-US)
6. 漸進式載入 (en-US)
技術教學
----

* 用戶端儲存 (en-US)：展示如何與何時使用 web storage、IndexedDB、service worker 的長篇教學。
* 使用 service worker (en-US)：涵蓋 Service Worker API 的深入教學
* 使用 IndexedDB：詳細解釋 IndexedDB 的基礎。
* 使用 Web Storage API (en-US)：讓 Web storage API 變得簡單。
* Instant Loading Web Apps with An Application Shell Architecture：使用 App Shell 程式模式加快 app 的載入速度。
* 使用 Push API (en-US)：了解 Web Push API 所需的一切。
* 使用 Notifications API：web notification 簡介。
* 構建響應式設計 (en-US)：了解當今 app 佈局的關鍵——響應式設計——的基本。
* 行動優先 (en-US)：建立響應式設計很常見，預設以行動裝置的佈局優先、接著設計更寬廣的佈局，是相當合理的。
* Add to home screen guide (en-US) — learn how your apps can take advantage of Add to home screen (A2HS).
工具
--

* localForage：讓用戶端儲存變簡單的輕量化 JavaScript 函式庫。預設上使用 IndexedDB，必要時則改用 SQL/Web 儲存。
* ServiceWorkerWare — an *Express-like* microframework for easy Service Worker development.
* oghliner — not only a template but a tool for deploying Offline Web Apps to GitHub Pages.
* sw-precache — a node module to generate service worker code that will precache specific resources.
* workbox — spiritual successor to sw-precache with more advanced caching strategies and easy precaching.
* upup — a tiny script that makes sure your site is always there for your users.
* The service worker cookbook — A series of excellent service worker/push recipes, showing how to implement an offline app, but also much more.
參見
--

* Google Developers 的 Progressive web apps
* Alex Russell 寫的 Progressive Web Apps: Escaping Tabs Without Losing Our Soul
* Progressive Web Apps Check List
* Google 的 The Lighthouse Tool
* Tools for building progressive web apps with Angular
* React PWA Guide Kit
* Offline-capable Pokédex web site
* Hacker News readers as Progressive Web Apps


MathML

MathML
======

**Mathematical Markup Language (MathML)** 是一種基於 XML (en-US) 的延伸，可以用來描述數學符號以及保留數學式結構和內容。在這裡你可以找到參考文件, 範例以及工具。你可以從 slides for the innovation fairs at Mozilla Summit 2013 做個快速的大致瀏覽。

MathML references
-----------------

MathML element reference (en-US)

關於每一個 MathML element 的細節及其在桌面環境和瀏覽器的支援情形。

MathML attribute reference (en-US)

關於可改變 MathML element 外觀及行為的 MathML attributes。

MathML examples (en-US)

MathML 的範例。透過這些範例你能更明白 MathML 是如何運作的。

Authoring MathML (en-US)

這裡提供一些關於 MathML 的建議以及小提示，包括適當的編輯器以及如何將他們和你的網頁內容整合。

Getting help from the community
-------------------------------

* IRC channel
* Wiki used by Mozilla contributors
* W3C Math Home
* www-math w3.org mail archive
Tools
-----

* W3C Validator
* FireMath Firefox add-on
* Mathzilla Firefox add-on collection
* LaTeXML - 將 LaTeX 文件編譯為 HTML+MathML 網頁
* Web Equation - 將手寫的數學式轉換成 MathML 或 LaTeX
* MathJax - 使數學式的展現能跨瀏覽器的 JavaScript display engine
Related Topics
--------------

* CSS
* HTML
* SVG
Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


JavaScript

JavaScript
==========

**JavaScript** (簡稱 **JS**) 是具有一級函數 (First-class functions) 的輕量級、直譯式或即時編譯（JIT-compiled）的程式語言。它因為用作網頁的腳本語言而大為知名，但也用於許多非瀏覽器的環境，像是 node.js、Apache CouchDB。JavaScript 是一個基於原型的 (Prototype-based (en-US))、多範型的、動態語言，支援物件導向、指令式以及宣告式 (如函數式程式設計) 風格。

本章節主要說明 JavaScript，不涉及網頁特有項目或主機環境。有關網頁特有的 APIs ，請參考 Web API 和 DOM。

JavaScript 所採用的標準是 ECMAScript Language Specification（ECMA-262），自 2012 年起，所有現代的瀏覽器均已全面支援 ECMAScript 5.1。較老舊的瀏覽器最少也會支援 ECMAScript 3。ECMA International 於 2015 年 6 月 17 日發布第六版的 ECMAScript，其正式名稱是 ECMAScript 2015，原先被稱作 ECMAScript 6 或 ES6。從那時起， ECMAScript 標準的發布週期是一年，本文件參考了最新的草稿版本，也就是目前的 ECMAScript 2017。

別搞混了 JavaScript 和 Java 程式語言。雖然 "Java" 和 "JavaScript" 都是 Oracle 公司在美國和其他國家的商標或註冊商標，但兩個語言有著非常不同的語法、語意和用途。

教學
--

透過指南和教學來學習編寫 JavaScript。

### 給完全新手

如果你想學習 JavaScript 但過去沒有 JavaScript 或程式設計經驗，請前往 JavaScrip-動態的用戶端指令。該處完整單元如下：

JavaScript 入門

說明一些基本問題像是「什麼是 JavaScript？」、「它看來像什麼？」、「它能做什麼？」，也討論 JavaScript 的主要特色，例如變數、字串、數值以及陣列。

JavaScript 組成元素

繼續我們對 JavaScript 主要基本特色的說明，焦點轉向經常碰到的程式碼區塊類型，像是條件式陳述、迴圈、函數以及事件。

介紹 JavaScript 物件

如果你想加深對 JavaScript 語言的認識並撰寫更有效率的程式，理解 JavaScript 的物件導向特質是件重要的事。

### JavaScript 指南

JavaScript 指南

更為詳細的 JavaScript 語言指南，供過去有 JavaScript 或其他語言的程式設計經驗的人看。

### 中階

客戶端 web APIs

在為網站或應用程序編寫客戶端 JavaScript 時，你將很快遇到應用程式介面（API）。 API 是應用程式介面，用於操作運行站點的瀏覽器和操作系統的不同方面，或操縱來自其他網站或服務的資料。 在本單元中，我們將探討 API 是什麼，以及如何使用你在開發工作中經常遇到的一些最常見的 API。

重新介紹 JavaScript

為了那些*以為*他們懂 JavaScript 的人寫的簡介。

JavaScript 資料結構

簡介在 JavaScript 可用的資料結構。

相等值比較和相等度

JavaScript 提供了三種不同的數值比較方式：嚴謹的相等用 `===`，寬鬆的相等用 `==，`以及 `Object.is()` (en-US) 方法。

閉包（Closure)

閉包（Closure）是函式以及該宣告函式所包含的作用域環境（lexical environment）的組合。

### 進階

繼承與原型鍊

對於原型繼承的常見的迷思和誤解。

嚴謹模式

嚴謹模式會禁止你使用未初始化過的變數。這樣的限制源自於 ECMAScript 5 的規範，為了提高效率和簡化偵錯。

JavaScript 型別陣列

JavaScript 類型陣列提供一個存取二進制資料的機制。

記憶體管理

JavaScript 的記憶體生命週期和垃圾回收機制。

併行模組和事件循環

JavaScript 具有基於「事件循環」的併行模組。

參考
--

瀏覽完整的 JavaScript 參考文件。

標準內建物件

瞭解標準內建物件： `Array`、 `Boolean`、 `Date`、 `Error` (en-US)、 `Function` (en-US)、 `JSON`、 `Math`、 `Number`、 `Object` (en-US)、 `RegExp` (en-US)、 `String`、 `Map`、 `Set`、 `WeakMap` (en-US)、 `WeakSet` (en-US) 等等。

表式法與運算子

瞭解更多 JavaScript 運算子的行為：`instanceof` (en-US)、 `typeof`、 `new`、 `this`、運算子優先序等等。

敘述和宣告 (en-US)

瞭解 `do-while`、`for-in`、 `for-of` (en-US)、 `try-catch`、`let`、 `var`、 `const`、 `if-else`、 `switch` 和其他 JavaScript 敘述和關鍵字的運作方式。

函數 (en-US)

瞭解如何運用函數來開發你的應用程式。

工具與資源
-----

有用的工具和資源幫助你更好的撰寫及除錯 **JavaScript** 程式碼。

Firefox 開發工具

網頁主控台 (Web Console)、JavaScript 效能分析器(JavaScript Profiler)、除錯器 (Debugger) 等等。

JavaScript Shell

JavaScript Shell 讓你更快的測試片段的 JavaScript。

TogetherJSPaste

合作更簡單了。藉著在你的網站增加 TogetherJS，你的用戶們能在網站上互助 in real time！

Stack Overflow

Stack Overflow 上有關 JavaScript 的問題。

JSFiddle

編輯 JavaScript、CSS、HTML 並取得及時結果。可以使用外部資源和與在線上與你的夥伴協作。


Web APIs

Web APIs
========

### A

當你使用 JavaScript 為網站寫程式碼時，有很多很棒的 API 可以使用。

以下清單列出所有能夠用在你開發網路程式或網站時的介面（即是物件的類型）。

* `AbortController`
* `AbortSignal` (en-US)
* `AbsoluteOrientationSensor` (en-US)
* `AbstractRange` (en-US)
* `Accelerometer` (en-US)
實驗性質
* `AesCbcParams` (en-US)
* `AesCtrParams` (en-US)
* `AesGcmParams` (en-US)
* `AesKeyGenParams` (en-US)
* `AmbientLightSensor` (en-US)
實驗性質
* `AnalyserNode` (en-US)
* `ANGLE_instanced_arrays` (en-US)
* `Animation` (en-US)
* `AnimationEffect` (en-US)
* `AnimationEvent`
* `AnimationPlaybackEvent` (en-US)
* `AnimationTimeline` (en-US)
* `Attr` (en-US)
* `AudioBuffer` (en-US)
* `AudioBufferSourceNode` (en-US)
* `AudioContext` (en-US)
* `AudioData` (en-US)
實驗性質
* `AudioDecoder` (en-US)
實驗性質
* `AudioDestinationNode` (en-US)
* `AudioEncoder` (en-US)
實驗性質
* `AudioListener` (en-US)
* `AudioNode` (en-US)
* `AudioParam` (en-US)
* `AudioParamDescriptor` (en-US)
* `AudioParamMap` (en-US)
* `AudioProcessingEvent` (en-US)
已棄用
* `AudioScheduledSourceNode` (en-US)
* `AudioSinkInfo` (en-US)
實驗性質
* `AudioTrack` (en-US)
* `AudioTrackList` (en-US)
* `AudioWorklet` (en-US)
* `AudioWorkletGlobalScope` (en-US)
* `AudioWorkletNode` (en-US)
* `AudioWorkletProcessor` (en-US)
* `AuthenticatorAssertionResponse` (en-US)
* `AuthenticatorAttestationResponse` (en-US)
* `AuthenticatorResponse` (en-US)

### B

* `BackgroundFetchEvent` (en-US)
實驗性質
* `BackgroundFetchManager` (en-US)
實驗性質
* `BackgroundFetchRecord` (en-US)
實驗性質
* `BackgroundFetchRegistration` (en-US)
實驗性質
* `BackgroundFetchUpdateUIEvent` (en-US)
實驗性質
* `BarcodeDetector` (en-US)
實驗性質
* `BarProp` (en-US)
* `BaseAudioContext` (en-US)
* `BatteryManager` (en-US)
* `BeforeInstallPromptEvent` (en-US)
實驗性質

非標準
* `BeforeUnloadEvent` (en-US)
* `BiquadFilterNode` (en-US)
* `Blob`
* `BlobEvent` (en-US)
* `Bluetooth` (en-US)
實驗性質
* `BluetoothCharacteristicProperties` (en-US)
實驗性質
* `BluetoothDevice` (en-US)
實驗性質
* `BluetoothRemoteGATTCharacteristic` (en-US)
實驗性質
* `BluetoothRemoteGATTDescriptor` (en-US)
實驗性質
* `BluetoothRemoteGATTServer` (en-US)
實驗性質
* `BluetoothRemoteGATTService` (en-US)
實驗性質
* `BluetoothUUID` (en-US)
* `BroadcastChannel` (en-US)
* `ByteLengthQueuingStrategy` (en-US)

### C

* `Cache` (en-US)
* `CacheStorage` (en-US)
* `CanMakePaymentEvent` (en-US)
實驗性質
* `CanvasCaptureMediaStreamTrack` (en-US)
* `CanvasGradient` (en-US)
* `CanvasPattern` (en-US)
* `CanvasRenderingContext2D` (en-US)
* `CaptureController` (en-US)
實驗性質
* `CaretPosition` (en-US)
實驗性質
* `CDATASection` (en-US)
* `ChannelMergerNode` (en-US)
* `ChannelSplitterNode` (en-US)
* `CharacterBoundsUpdateEvent` (en-US)
實驗性質
* `CharacterData` (en-US)
* `Client` (en-US)
* `Clients` (en-US)
* `Clipboard` (en-US)
* `ClipboardEvent`
* `ClipboardItem` (en-US)
* `CloseEvent`
* `Comment` (en-US)
* `CompositionEvent` (en-US)
* `CompressionStream` (en-US)
* `console` (en-US)
* `ConstantSourceNode` (en-US)
* `ContactAddress` (en-US)
實驗性質
* `ContactsManager` (en-US)
實驗性質
* `ContentIndex` (en-US)
實驗性質
* `ContentIndexEvent` (en-US)
實驗性質
* `ContentVisibilityAutoStateChangeEvent` (en-US)
實驗性質
* `ConvolverNode` (en-US)
* `CookieChangeEvent` (en-US)
實驗性質
* `CookieStore` (en-US)
實驗性質
* `CookieStoreManager` (en-US)
實驗性質
* `CountQueuingStrategy` (en-US)
* `Credential` (en-US)
* `CredentialsContainer` (en-US)
* `Crypto` (en-US)
* `CryptoKey` (en-US)
* `CryptoKeyPair` (en-US)
* `CSPViolationReportBody` (en-US)
* `CSS` (en-US)
* `CSSAnimation` (en-US)
* `CSSConditionRule` (en-US)
* `CSSContainerRule` (en-US)
* `CSSCounterStyleRule` (en-US)
* `CSSFontFaceRule` (en-US)
* `CSSFontFeatureValuesRule` (en-US)
* `CSSFontPaletteValuesRule` (en-US)
* `CSSGroupingRule` (en-US)
* `CSSImageValue` (en-US)
* `CSSImportRule` (en-US)
* `CSSKeyframeRule` (en-US)
* `CSSKeyframesRule` (en-US)
* `CSSKeywordValue` (en-US)
* `CSSLayerBlockRule` (en-US)
* `CSSLayerStatementRule` (en-US)
* `CSSMathInvert` (en-US)
* `CSSMathMax` (en-US)
* `CSSMathMin` (en-US)
* `CSSMathNegate` (en-US)
* `CSSMathProduct` (en-US)
* `CSSMathSum` (en-US)
* `CSSMathValue` (en-US)
* `CSSMatrixComponent` (en-US)
* `CSSMediaRule` (en-US)
* `CSSNamespaceRule` (en-US)
* `CSSNumericArray` (en-US)
* `CSSNumericValue` (en-US)
* `CSSPageRule` (en-US)
* `CSSPerspective` (en-US)
* `CSSPositionValue` (en-US)
非標準

已棄用
* `CSSPrimitiveValue` (en-US)
已棄用
* `CSSPropertyRule` (en-US)
* `CSSPseudoElement` (en-US)
實驗性質
* `CSSRotate` (en-US)
* `CSSRule` (en-US)
* `CSSRuleList` (en-US)
* `CSSScale` (en-US)
* `CSSScopeRule` (en-US)
實驗性質
* `CSSSkew` (en-US)
* `CSSSkewX` (en-US)
* `CSSSkewY` (en-US)
* `CSSStartingStyleRule` (en-US)
實驗性質
* `CSSStyleDeclaration` (en-US)
* `CSSStyleRule` (en-US)
* `CSSStyleSheet` (en-US)
* `CSSStyleValue` (en-US)
* `CSSSupportsRule` (en-US)
* `CSSTransformComponent` (en-US)
* `CSSTransformValue` (en-US)
* `CSSTransition` (en-US)
* `CSSTranslate` (en-US)
* `CSSUnitValue` (en-US)
* `CSSUnparsedValue` (en-US)
* `CSSValue` (en-US)
已棄用
* `CSSValueList` (en-US)
已棄用
* `CSSVariableReferenceValue` (en-US)
* `CustomElementRegistry` (en-US)
* `CustomEvent`
* `CustomStateSet` (en-US)
實驗性質

### D

* `DataTransfer` (en-US)
* `DataTransferItem` (en-US)
* `DataTransferItemList` (en-US)
* `DecompressionStream` (en-US)
* `DedicatedWorkerGlobalScope` (en-US)
* `DelayNode` (en-US)
* `DeprecationReportBody` (en-US)
實驗性質
* `DeviceMotionEvent` (en-US)
* `DeviceMotionEventAcceleration` (en-US)
* `DeviceMotionEventRotationRate` (en-US)
* `DeviceOrientationEvent` (en-US)
* `DirectoryEntrySync` (en-US)
非標準

已棄用
* `DirectoryReaderSync` (en-US)
非標準

已棄用
* `Document` (en-US)
* `DocumentFragment`
* `DocumentPictureInPicture` (en-US)
實驗性質
* `DocumentPictureInPictureEvent` (en-US)
實驗性質
* `DocumentTimeline` (en-US)
* `DocumentType` (en-US)
* `DOMError` (en-US)
已棄用
* `DOMException` (en-US)
* `DOMHighResTimeStamp` (en-US)
* `DOMImplementation` (en-US)
* `DOMMatrix` (WebKitCSSMatrix) (en-US)
* `DOMMatrixReadOnly` (en-US)
* `DOMParser`
* `DOMPoint` (en-US)
* `DOMPointReadOnly` (en-US)
* `DOMQuad` (en-US)
* `DOMRect` (en-US)
* `DOMRectReadOnly` (en-US)
* `DOMStringList` (en-US)
* `DOMStringMap` (en-US)
* `DOMTokenList`
* `DragEvent`
* `DynamicsCompressorNode` (en-US)

### E

* `EcdhKeyDeriveParams` (en-US)
* `EcdsaParams` (en-US)
* `EcKeyGenParams` (en-US)
* `EcKeyImportParams` (en-US)
* `EditContext` (en-US)
實驗性質
* `Element` (en-US)
* `ElementInternals` (en-US)
* `EncodedAudioChunk` (en-US)
實驗性質
* `EncodedVideoChunk` (en-US)
* `ErrorEvent`
* `Event`
* `EventCounts` (en-US)
* `EventSource` (en-US)
* `EventTarget`
* `ExtendableCookieChangeEvent` (en-US)
* `ExtendableEvent` (en-US)
* `ExtendableMessageEvent` (en-US)
* `EyeDropper` (en-US)
實驗性質

### F

* `FeaturePolicy` (en-US)
實驗性質
* `FederatedCredential` (en-US)
實驗性質
* `FetchEvent` (en-US)
* `File`
* `FileEntrySync` (en-US)
非標準

已棄用
* `FileList`
* `FileReader`
* `FileReaderSync` (en-US)
* `FileSystem`
* `FileSystemDirectoryEntry` (en-US)
* `FileSystemDirectoryHandle` (en-US)
* `FileSystemDirectoryReader` (en-US)
* `FileSystemEntry` (en-US)
* `FileSystemFileEntry` (en-US)
* `FileSystemFileHandle` (en-US)
* `FileSystemHandle` (en-US)
* `FileSystemSync` (en-US)
非標準

已棄用
* `FileSystemSyncAccessHandle` (en-US)
* `FileSystemWritableFileStream` (en-US)
* `FocusEvent` (en-US)
* `FontData` (en-US)
實驗性質
* `FontFace` (en-US)
* `FontFaceSet` (en-US)
* `FontFaceSetLoadEvent` (en-US)
* `FormData`
* `FormDataEvent` (en-US)
* `FragmentDirective` (en-US)
實驗性質

### G

* `GainNode`
* `Gamepad` (en-US)
* `GamepadButton` (en-US)
* `GamepadEvent` (en-US)
* `GamepadHapticActuator` (en-US)
* `GamepadPose` (en-US)
實驗性質
* `Geolocation`
* `GeolocationCoordinates`
* `GeolocationPosition`
* `GeolocationPositionError`
* `GestureEvent` (en-US)
非標準
* `GPU` (en-US)
實驗性質
* `GPUAdapter` (en-US)
實驗性質
* `GPUAdapterInfo` (en-US)
實驗性質
* `GPUBindGroup` (en-US)
實驗性質
* `GPUBindGroupLayout` (en-US)
實驗性質
* `GPUBuffer` (en-US)
實驗性質
* `GPUCanvasContext` (en-US)
實驗性質
* `GPUCommandBuffer` (en-US)
實驗性質
* `GPUCommandEncoder` (en-US)
實驗性質
* `GPUCompilationInfo` (en-US)
實驗性質
* `GPUCompilationMessage` (en-US)
實驗性質
* `GPUComputePassEncoder` (en-US)
實驗性質
* `GPUComputePipeline` (en-US)
實驗性質
* `GPUDevice` (en-US)
實驗性質
* `GPUDeviceLostInfo` (en-US)
實驗性質
* `GPUError` (en-US)
實驗性質
* `GPUExternalTexture` (en-US)
實驗性質
* `GPUInternalError` (en-US)
實驗性質
* `GPUOutOfMemoryError` (en-US)
實驗性質
* `GPUPipelineError` (en-US)
實驗性質
* `GPUPipelineLayout` (en-US)
實驗性質
* `GPUQuerySet` (en-US)
實驗性質
* `GPUQueue` (en-US)
實驗性質
* `GPURenderBundle` (en-US)
實驗性質
* `GPURenderBundleEncoder` (en-US)
實驗性質
* `GPURenderPassEncoder` (en-US)
實驗性質
* `GPURenderPipeline` (en-US)
實驗性質
* `GPUSampler` (en-US)
實驗性質
* `GPUShaderModule` (en-US)
實驗性質
* `GPUSupportedFeatures` (en-US)
實驗性質
* `GPUSupportedLimits` (en-US)
實驗性質
* `GPUTexture` (en-US)
實驗性質
* `GPUTextureView` (en-US)
實驗性質
* `GPUUncapturedErrorEvent` (en-US)
實驗性質
* `GPUValidationError` (en-US)
實驗性質
* `GravitySensor` (en-US)
* `Gyroscope` (en-US)

### H

* `HashChangeEvent` (en-US)
* `Headers` (en-US)
* `HID` (en-US)
實驗性質
* `HIDConnectionEvent` (en-US)
實驗性質
* `HIDDevice` (en-US)
實驗性質
* `HIDInputReportEvent` (en-US)
實驗性質
* `Highlight` (en-US)
* `HighlightRegistry` (en-US)
* `History`
* `HkdfParams` (en-US)
* `HmacImportParams` (en-US)
* `HmacKeyGenParams` (en-US)
* `HMDVRDevice` (en-US)
非標準

已棄用
* `HTMLAllCollection` (en-US)
* `HTMLAnchorElement` (en-US)
* `HTMLAreaElement` (en-US)
* `HTMLAudioElement` (en-US)
* `HTMLBaseElement` (en-US)
* `HTMLBodyElement` (en-US)
* `HTMLBRElement` (en-US)
* `HTMLButtonElement` (en-US)
* `HTMLCanvasElement` (en-US)
* `HTMLCollection` (en-US)
* `HTMLDataElement` (en-US)
* `HTMLDataListElement` (en-US)
* `HTMLDetailsElement` (en-US)
* `HTMLDialogElement` (en-US)
* `HTMLDivElement` (en-US)
* `HTMLDListElement` (en-US)
* `HTMLDocument`
* `HTMLElement` (en-US)
* `HTMLEmbedElement` (en-US)
* `HTMLFieldSetElement` (en-US)
* `HTMLFontElement` (en-US)
已棄用
* `HTMLFormControlsCollection` (en-US)
* `HTMLFormElement` (en-US)
* `HTMLFrameSetElement` (en-US)
已棄用
* `HTMLHeadElement` (en-US)
* `HTMLHeadingElement` (en-US)
* `HTMLHRElement` (en-US)
* `HTMLHtmlElement` (en-US)
* `HTMLIFrameElement` (en-US)
* `HTMLImageElement` (en-US)
* `HTMLInputElement` (en-US)
* `HTMLLabelElement` (en-US)
* `HTMLLegendElement` (en-US)
* `HTMLLIElement` (en-US)
* `HTMLLinkElement` (en-US)
* `HTMLMapElement` (en-US)
* `HTMLMarqueeElement` (en-US)
已棄用
* `HTMLMediaElement` (en-US)
* `HTMLMenuElement` (en-US)
* `HTMLMenuItemElement` (en-US)
非標準

已棄用
* `HTMLMetaElement` (en-US)
* `HTMLMeterElement` (en-US)
* `HTMLModElement` (en-US)
* `HTMLObjectElement` (en-US)
* `HTMLOListElement` (en-US)
* `HTMLOptGroupElement` (en-US)
* `HTMLOptionElement` (en-US)
* `HTMLOptionsCollection` (en-US)
* `HTMLOutputElement` (en-US)
* `HTMLParagraphElement` (en-US)
* `HTMLParamElement` (en-US)
已棄用
* `HTMLPictureElement` (en-US)
* `HTMLPreElement` (en-US)
* `HTMLProgressElement` (en-US)
* `HTMLQuoteElement` (en-US)
* `HTMLScriptElement` (en-US)
* `HTMLSelectElement` (en-US)
* `HTMLSlotElement` (en-US)
* `HTMLSourceElement` (en-US)
* `HTMLSpanElement` (en-US)
* `HTMLStyleElement` (en-US)
* `HTMLTableCaptionElement` (en-US)
* `HTMLTableCellElement` (en-US)
* `HTMLTableColElement` (en-US)
* `HTMLTableElement` (en-US)
* `HTMLTableRowElement` (en-US)
* `HTMLTableSectionElement` (en-US)
* `HTMLTemplateElement` (en-US)
* `HTMLTextAreaElement` (en-US)
* `HTMLTimeElement` (en-US)
* `HTMLTitleElement` (en-US)
* `HTMLTrackElement` (en-US)
* `HTMLUListElement` (en-US)
* `HTMLUnknownElement` (en-US)
* `HTMLVideoElement` (en-US)

### I

* `IDBCursor` (en-US)
* `IDBCursorWithValue` (en-US)
* `IDBDatabase` (en-US)
* `IDBFactory` (en-US)
* `IDBIndex` (en-US)
* `IDBKeyRange` (en-US)
* `IDBLocaleAwareKeyRange` (en-US)
實驗性質

非標準
* `IDBObjectStore` (en-US)
* `IDBOpenDBRequest` (en-US)
* `IDBRequest` (en-US)
* `IDBTransaction` (en-US)
* `IDBVersionChangeEvent` (en-US)
* `IdentityCredential` (en-US)
實驗性質
* `IdentityProvider` (en-US)
實驗性質
* `IdleDeadline` (en-US)
* `IdleDetector` (en-US)
實驗性質
* `IIRFilterNode` (en-US)
* `ImageBitmap` (en-US)
* `ImageBitmapRenderingContext` (en-US)
* `ImageCapture` (en-US)
實驗性質
* `ImageData` (en-US)
* `ImageDecoder` (en-US)
實驗性質
* `ImageTrack` (en-US)
實驗性質
* `ImageTrackList` (en-US)
實驗性質
* `Ink` (en-US)
實驗性質
* `InkPresenter` (en-US)
實驗性質
* `InputDeviceCapabilities` (en-US)
實驗性質
* `InputDeviceInfo` (en-US)
* `InputEvent` (en-US)
* `InstallEvent` (en-US)
非標準

已棄用
* `IntersectionObserver` (en-US)
* `IntersectionObserverEntry` (en-US)
* `InterventionReportBody` (en-US)
實驗性質

### K

* `Keyboard` (en-US)
實驗性質
* `KeyboardEvent`
* `KeyboardLayoutMap` (en-US)
實驗性質
* `KeyframeEffect` (en-US)

### L

* `LargestContentfulPaint` (en-US)
* `LaunchParams` (en-US)
實驗性質
* `LaunchQueue` (en-US)
實驗性質
* `LayoutShift` (en-US)
實驗性質
* `LayoutShiftAttribution` (en-US)
實驗性質
* `LinearAccelerationSensor` (en-US)
* `Location` (en-US)
* `Lock` (en-US)
* `LockManager` (en-US)

### M

* `Magnetometer` (en-US)
實驗性質
* `MathMLElement` (en-US)
* `MediaCapabilities` (en-US)
* `MediaDeviceInfo` (en-US)
* `MediaDevices`
* `MediaElementAudioSourceNode` (en-US)
* `MediaEncryptedEvent` (en-US)
* `MediaError` (en-US)
* `MediaKeyMessageEvent` (en-US)
* `MediaKeys` (en-US)
* `MediaKeySession` (en-US)
* `MediaKeyStatusMap` (en-US)
* `MediaKeySystemAccess` (en-US)
* `MediaList` (en-US)
* `MediaMetadata` (en-US)
* `MediaQueryList`
* `MediaQueryListEvent` (en-US)
* `MediaRecorder` (en-US)
* `MediaRecorderErrorEvent` (en-US)
非標準

已棄用
* `MediaSession` (en-US)
* `MediaSource`
* `MediaSourceHandle` (en-US)
實驗性質
* `MediaStream` (en-US)
* `MediaStreamAudioDestinationNode` (en-US)
* `MediaStreamAudioSourceNode` (en-US)
* `MediaStreamEvent` (en-US)
非標準

已棄用
* `MediaStreamTrack` (en-US)
* `MediaStreamTrackAudioSourceNode` (en-US)
* `MediaStreamTrackEvent` (en-US)
* `MediaStreamTrackGenerator` (en-US)
實驗性質

非標準
* `MediaStreamTrackProcessor` (en-US)
實驗性質
* `MediaTrackConstraints` (en-US)
* `MediaTrackSettings` (en-US)
* `MediaTrackSupportedConstraints` (en-US)
* `MerchantValidationEvent` (en-US)
已棄用
* `MessageChannel` (en-US)
* `MessageEvent`
* `MessagePort` (en-US)
* `Metadata` (en-US)
實驗性質

非標準
* `MIDIAccess` (en-US)
* `MIDIConnectionEvent` (en-US)
* `MIDIInput` (en-US)
* `MIDIInputMap` (en-US)
* `MIDIMessageEvent` (en-US)
* `MIDIOutput` (en-US)
* `MIDIOutputMap` (en-US)
* `MIDIPort` (en-US)
* `MimeType` (en-US)
已棄用
* `MimeTypeArray` (en-US)
已棄用
* `MouseEvent` (en-US)
* `MouseScrollEvent` (en-US)
非標準

已棄用
* `MutationEvent` (en-US)
已棄用
* `MutationObserver`
* `MutationRecord` (en-US)

### N

* `NamedNodeMap`
* `NavigateEvent` (en-US)
實驗性質
* `Navigation` (en-US)
實驗性質
* `NavigationCurrentEntryChangeEvent` (en-US)
實驗性質
* `NavigationDestination` (en-US)
實驗性質
* `NavigationHistoryEntry` (en-US)
實驗性質
* `NavigationPreloadManager` (en-US)
* `NavigationTransition` (en-US)
實驗性質
* `Navigator` (en-US)
* `NavigatorUAData` (en-US)
實驗性質
* `NDEFMessage` (en-US)
實驗性質
* `NDEFReader` (en-US)
實驗性質
* `NDEFReadingEvent` (en-US)
實驗性質
* `NDEFRecord` (en-US)
實驗性質
* `NetworkInformation` (en-US)
實驗性質
* `Node` (en-US)
* `NodeIterator` (en-US)
* `NodeList`
* `Notification`
* `NotificationEvent` (en-US)

### O

* `OES_draw_buffers_indexed` (en-US)
* `OfflineAudioCompletionEvent` (en-US)
* `OfflineAudioContext` (en-US)
* `OffscreenCanvas` (en-US)
* `OffscreenCanvasRenderingContext2D` (en-US)
* `OrientationSensor` (en-US)
* `OscillatorNode` (en-US)
* `OTPCredential` (en-US)
實驗性質
* `OverconstrainedError` (en-US)

### P

* `PageTransitionEvent` (en-US)
* `PaintWorkletGlobalScope` (en-US)
實驗性質
* `PannerNode` (en-US)
* `PasswordCredential` (en-US)
實驗性質
* `Path2D` (en-US)
* `PaymentAddress` (en-US)
非標準

已棄用
* `PaymentManager` (en-US)
實驗性質
* `PaymentMethodChangeEvent` (en-US)
* `PaymentRequest`
* `PaymentRequestEvent` (en-US)
實驗性質
* `PaymentRequestUpdateEvent` (en-US)
* `PaymentResponse` (en-US)
* `Pbkdf2Params` (en-US)
* `Performance` (en-US)
* `PerformanceElementTiming` (en-US)
實驗性質
* `PerformanceEntry` (en-US)
* `PerformanceEventTiming` (en-US)
* `PerformanceLongTaskTiming` (en-US)
實驗性質
* `PerformanceMark` (en-US)
* `PerformanceMeasure` (en-US)
* `PerformanceNavigation` (en-US)
已棄用
* `PerformanceNavigationTiming` (en-US)
* `PerformanceObserver` (en-US)
* `PerformanceObserverEntryList` (en-US)
* `PerformancePaintTiming` (en-US)
* `PerformanceResourceTiming` (en-US)
* `PerformanceServerTiming` (en-US)
* `PerformanceTiming` (en-US)
已棄用
* `PeriodicSyncEvent` (en-US)
實驗性質
* `PeriodicSyncManager` (en-US)
實驗性質
* `PeriodicWave` (en-US)
* `Permissions` (en-US)
* `PermissionStatus` (en-US)
* `PictureInPictureEvent` (en-US)
* `PictureInPictureWindow` (en-US)
* `Plugin` (en-US)
已棄用
* `PluginArray` (en-US)
已棄用
* `Point` (en-US)
非標準

已棄用
* `PointerEvent` (en-US)
* `PopStateEvent` (en-US)
* `PositionSensorVRDevice` (en-US)
非標準

已棄用
* `Presentation` (en-US)
實驗性質
* `PresentationAvailability` (en-US)
實驗性質
* `PresentationConnection` (en-US)
實驗性質
* `PresentationConnectionAvailableEvent` (en-US)
實驗性質
* `PresentationConnectionCloseEvent` (en-US)
實驗性質
* `PresentationConnectionList` (en-US)
實驗性質
* `PresentationReceiver` (en-US)
實驗性質
* `PresentationRequest` (en-US)
實驗性質
* `ProcessingInstruction` (en-US)
* `ProgressEvent` (en-US)
* `PromiseRejectionEvent` (en-US)
* `PublicKeyCredential` (en-US)
* `PushEvent` (en-US)
* `PushManager` (en-US)
* `PushMessageData` (en-US)
* `PushSubscription` (en-US)
* `PushSubscriptionOptions` (en-US)

### R

* `RadioNodeList` (en-US)
* `Range` (en-US)
* `ReadableByteStreamController` (en-US)
* `ReadableStream` (en-US)
* `ReadableStreamBYOBReader` (en-US)
* `ReadableStreamBYOBRequest` (en-US)
* `ReadableStreamDefaultController` (en-US)
* `ReadableStreamDefaultReader` (en-US)
* `RelativeOrientationSensor` (en-US)
* `RemotePlayback` (en-US)
* `Report` (en-US)
* `ReportBody` (en-US)
* `ReportingObserver` (en-US)
* `Request` (en-US)
* `ResizeObserver` (en-US)
* `ResizeObserverEntry` (en-US)
* `ResizeObserverSize` (en-US)
* `Response`
* `RsaHashedImportParams` (en-US)
* `RsaHashedKeyGenParams` (en-US)
* `RsaOaepParams` (en-US)
* `RsaPssParams` (en-US)
* `RTCAudioSourceStats` (en-US)
* `RTCCertificate` (en-US)
* `RTCCertificateStats` (en-US)
* `RTCDataChannel` (en-US)
* `RTCDataChannelEvent` (en-US)
* `RTCDtlsTransport` (en-US)
* `RTCDTMFSender` (en-US)
* `RTCDTMFToneChangeEvent` (en-US)
* `RTCEncodedAudioFrame` (en-US)
* `RTCEncodedVideoFrame` (en-US)
* `RTCError` (en-US)
* `RTCErrorEvent` (en-US)
* `RTCIceCandidate` (en-US)
* `RTCIceCandidatePair` (en-US)
* `RTCIceCandidatePairStats` (en-US)
* `RTCIceCandidateStats` (en-US)
* `RTCIceParameters` (en-US)
* `RTCIceTransport` (en-US)
* `RTCIdentityAssertion` (en-US)
實驗性質
* `RTCInboundRtpStreamStats` (en-US)
* `RTCOutboundRtpStreamStats` (en-US)
* `RTCPeerConnection` (en-US)
* `RTCPeerConnectionIceErrorEvent` (en-US)
* `RTCPeerConnectionIceEvent` (en-US)
* `RTCPeerConnectionStats` (en-US)
* `RTCRemoteOutboundRtpStreamStats` (en-US)
* `RTCRtpCodecParameters` (en-US)
* `RTCRtpReceiver` (en-US)
* `RTCRtpScriptTransform` (en-US)
* `RTCRtpScriptTransformer` (en-US)
* `RTCRtpSender` (en-US)
* `RTCRtpStreamStats` (en-US)
* `RTCRtpTransceiver` (en-US)
* `RTCSctpTransport` (en-US)
* `RTCSessionDescription` (en-US)
* `RTCStatsReport` (en-US)
* `RTCTrackEvent` (en-US)
* `RTCTransformEvent` (en-US)
* `RTCTransportStats` (en-US)

### S

* `Sanitizer` (en-US)
實驗性質
* `Scheduler` (en-US)
* `Scheduling` (en-US)
實驗性質
* `Screen` (en-US)
* `ScreenDetailed` (en-US)
實驗性質
* `ScreenDetails` (en-US)
實驗性質
* `ScreenOrientation` (en-US)
* `ScriptProcessorNode` (en-US)
已棄用
* `ScrollTimeline` (en-US)
實驗性質
* `SecurePaymentConfirmationRequest` (en-US)
* `SecurityPolicyViolationEvent` (en-US)
* `Selection` (en-US)
* `Sensor` (en-US)
* `SensorErrorEvent` (en-US)
* `Serial` (en-US)
實驗性質
* `SerialPort` (en-US)
實驗性質
* `ServiceWorker` (en-US)
* `ServiceWorkerContainer` (en-US)
* `ServiceWorkerGlobalScope` (en-US)
* `ServiceWorkerRegistration` (en-US)
* `ShadowRoot` (en-US)
* `SharedStorage` (en-US)
實驗性質
* `SharedStorageOperation` (en-US)
實驗性質
* `SharedStorageRunOperation` (en-US)
實驗性質
* `SharedStorageSelectURLOperation` (en-US)
實驗性質
* `SharedStorageWorklet` (en-US)
實驗性質
* `SharedStorageWorkletGlobalScope` (en-US)
實驗性質
* `SharedWorker` (en-US)
* `SharedWorkerGlobalScope` (en-US)
* `SourceBuffer` (en-US)
* `SourceBufferList` (en-US)
* `SpeechGrammar` (en-US)
實驗性質
* `SpeechGrammarList` (en-US)
實驗性質
* `SpeechRecognition` (en-US)
* `SpeechRecognitionAlternative` (en-US)
* `SpeechRecognitionErrorEvent` (en-US)
* `SpeechRecognitionEvent` (en-US)
* `SpeechRecognitionResult` (en-US)
* `SpeechRecognitionResultList` (en-US)
* `SpeechSynthesis` (en-US)
* `SpeechSynthesisErrorEvent` (en-US)
* `SpeechSynthesisEvent` (en-US)
* `SpeechSynthesisUtterance` (en-US)
* `SpeechSynthesisVoice` (en-US)
* `StaticRange` (en-US)
* `StereoPannerNode` (en-US)
* `Storage`
* `StorageEvent` (en-US)
* `StorageManager` (en-US)
* `StylePropertyMap` (en-US)
* `StylePropertyMapReadOnly` (en-US)
* `StyleSheet` (en-US)
* `StyleSheetList` (en-US)
* `SubmitEvent` (en-US)
* `SubtleCrypto` (en-US)
* `SVGAElement` (en-US)
* `SVGAngle` (en-US)
* `SVGAnimateColorElement` (en-US)
已棄用
* `SVGAnimatedAngle` (en-US)
* `SVGAnimatedBoolean` (en-US)
* `SVGAnimatedEnumeration` (en-US)
* `SVGAnimatedInteger` (en-US)
* `SVGAnimatedLength` (en-US)
* `SVGAnimatedLengthList` (en-US)
* `SVGAnimatedNumber` (en-US)
* `SVGAnimatedNumberList` (en-US)
* `SVGAnimatedPreserveAspectRatio` (en-US)
* `SVGAnimatedRect` (en-US)
* `SVGAnimatedString` (en-US)
* `SVGAnimatedTransformList` (en-US)
* `SVGAnimateElement` (en-US)
* `SVGAnimateMotionElement` (en-US)
* `SVGAnimateTransformElement` (en-US)
* `SVGAnimationElement` (en-US)
* `SVGCircleElement` (en-US)
* `SVGClipPathElement` (en-US)
* `SVGComponentTransferFunctionElement` (en-US)
* `SVGCursorElement` (en-US)
已棄用
* `SVGDefsElement` (en-US)
* `SVGDescElement` (en-US)
* `SVGElement` (en-US)
* `SVGEllipseElement` (en-US)
* `SVGEvent` (en-US)
* `SVGFEBlendElement` (en-US)
* `SVGFEColorMatrixElement` (en-US)
* `SVGFEComponentTransferElement` (en-US)
* `SVGFECompositeElement` (en-US)
* `SVGFEConvolveMatrixElement` (en-US)
* `SVGFEDiffuseLightingElement` (en-US)
* `SVGFEDisplacementMapElement` (en-US)
* `SVGFEDistantLightElement` (en-US)
* `SVGFEDropShadowElement` (en-US)
* `SVGFEFloodElement` (en-US)
* `SVGFEFuncAElement` (en-US)
* `SVGFEFuncBElement` (en-US)
* `SVGFEFuncGElement` (en-US)
* `SVGFEFuncRElement` (en-US)
* `SVGFEGaussianBlurElement` (en-US)
* `SVGFEImageElement` (en-US)
* `SVGFEMergeElement` (en-US)
* `SVGFEMergeNodeElement` (en-US)
* `SVGFEMorphologyElement` (en-US)
* `SVGFEOffsetElement` (en-US)
* `SVGFEPointLightElement` (en-US)
* `SVGFESpecularLightingElement` (en-US)
* `SVGFESpotLightElement` (en-US)
* `SVGFETileElement` (en-US)
* `SVGFETurbulenceElement` (en-US)
* `SVGFilterElement` (en-US)
* `SVGFontElement` (en-US)
已棄用
* `SVGFontFaceElement` (en-US)
已棄用
* `SVGFontFaceFormatElement` (en-US)
已棄用
* `SVGFontFaceNameElement` (en-US)
已棄用
* `SVGFontFaceSrcElement` (en-US)
已棄用
* `SVGFontFaceUriElement` (en-US)
已棄用
* `SVGForeignObjectElement` (en-US)
* `SVGGElement` (en-US)
* `SVGGeometryElement` (en-US)
* `SVGGlyphElement` (en-US)
已棄用
* `SVGGlyphRefElement` (en-US)
已棄用
* `SVGGradientElement` (en-US)
* `SVGGraphicsElement` (en-US)
* `SVGHKernElement` (en-US)
已棄用
* `SVGImageElement` (en-US)
* `SVGLength` (en-US)
* `SVGLengthList` (en-US)
* `SVGLinearGradientElement` (en-US)
* `SVGLineElement` (en-US)
* `SVGMarkerElement` (en-US)
* `SVGMaskElement` (en-US)
* `SVGMetadataElement` (en-US)
* `SVGMissingGlyphElement` (en-US)
已棄用
* `SVGMPathElement` (en-US)
* `SVGNumber` (en-US)
* `SVGNumberList` (en-US)
* `SVGPathElement` (en-US)
* `SVGPatternElement` (en-US)
* `SVGPoint` (en-US)
已棄用
* `SVGPointList` (en-US)
* `SVGPolygonElement` (en-US)
* `SVGPolylineElement` (en-US)
* `SVGPreserveAspectRatio` (en-US)
* `SVGRadialGradientElement` (en-US)
* `SVGRect` (en-US)
* `SVGRectElement` (en-US)
* `SVGRenderingIntent` (en-US)
已棄用
* `SVGScriptElement` (en-US)
* `SVGSetElement` (en-US)
* `SVGStopElement` (en-US)
* `SVGStringList` (en-US)
* `SVGStyleElement` (en-US)
* `SVGSVGElement` (en-US)
* `SVGSwitchElement` (en-US)
* `SVGSymbolElement` (en-US)
* `SVGTextContentElement` (en-US)
* `SVGTextElement` (en-US)
* `SVGTextPathElement` (en-US)
* `SVGTextPositioningElement` (en-US)
* `SVGTitleElement` (en-US)
* `SVGTransform` (en-US)
* `SVGTransformList` (en-US)
* `SVGTRefElement` (en-US)
已棄用
* `SVGTSpanElement` (en-US)
* `SVGUnitTypes` (en-US)
* `SVGUseElement` (en-US)
* `SVGViewElement` (en-US)
* `SVGVKernElement` (en-US)
已棄用
* `SyncEvent` (en-US)
實驗性質
* `SyncManager` (en-US)
實驗性質

### T

* `TaskAttributionTiming` (en-US)
實驗性質
* `TaskController` (en-US)
* `TaskPriorityChangeEvent` (en-US)
* `TaskSignal` (en-US)
* `Text` (en-US)
* `TextDecoder` (en-US)
* `TextDecoderStream` (en-US)
* `TextEncoder` (en-US)
* `TextEncoderStream` (en-US)
* `TextFormat` (en-US)
實驗性質
* `TextFormatUpdateEvent` (en-US)
實驗性質
* `TextMetrics` (en-US)
* `TextTrack` (en-US)
* `TextTrackCue` (en-US)
* `TextTrackCueList` (en-US)
* `TextTrackList` (en-US)
* `TextUpdateEvent` (en-US)
實驗性質
* `TimeEvent` (en-US)
* `TimeRanges` (en-US)
* `ToggleEvent` (en-US)
* `Touch` (en-US)
* `TouchEvent` (en-US)
* `TouchList`
* `TrackEvent` (en-US)
* `TransformStream` (en-US)
* `TransformStreamDefaultController` (en-US)
* `TransitionEvent` (en-US)
* `TreeWalker` (en-US)
* `TrustedHTML` (en-US)
* `TrustedScript` (en-US)
* `TrustedScriptURL` (en-US)
* `TrustedTypePolicy` (en-US)
* `TrustedTypePolicyFactory` (en-US)

### U

* `UIEvent`
* `URL` (en-US)
* `URLPattern` (en-US)
實驗性質
* `URLSearchParams` (en-US)
* `USB` (en-US)
實驗性質
* `USBAlternateInterface` (en-US)
實驗性質
* `USBConfiguration` (en-US)
實驗性質
* `USBConnectionEvent` (en-US)
實驗性質
* `USBDevice` (en-US)
實驗性質
* `USBEndpoint` (en-US)
實驗性質
* `USBInterface` (en-US)
實驗性質
* `USBInTransferResult` (en-US)
實驗性質
* `USBIsochronousInTransferPacket` (en-US)
實驗性質
* `USBIsochronousInTransferResult` (en-US)
實驗性質
* `USBIsochronousOutTransferPacket` (en-US)
實驗性質
* `USBIsochronousOutTransferResult` (en-US)
實驗性質
* `USBOutTransferResult` (en-US)
實驗性質
* `UserActivation` (en-US)

### V

* `ValidityState` (en-US)
* `VideoColorSpace` (en-US)
* `VideoDecoder` (en-US)
* `VideoEncoder` (en-US)
* `VideoFrame` (en-US)
* `VideoPlaybackQuality` (en-US)
* `VideoTrack` (en-US)
* `VideoTrackList` (en-US)
* `ViewTimeline` (en-US)
實驗性質
* `ViewTransition` (en-US)
實驗性質
* `VirtualKeyboard` (en-US)
實驗性質
* `VisibilityStateEntry` (en-US)
實驗性質
* `VisualViewport` (en-US)
* `VRDisplay` (en-US)
非標準

已棄用
* `VRDisplayCapabilities` (en-US)
非標準

已棄用
* `VRDisplayEvent` (en-US)
非標準

已棄用
* `VREyeParameters` (en-US)
非標準

已棄用
* `VRFieldOfView` (en-US)
非標準

已棄用
* `VRFrameData` (en-US)
非標準

已棄用
* `VRLayerInit` (en-US)
已棄用
* `VRPose` (en-US)
非標準

已棄用
* `VRStageParameters` (en-US)
非標準

已棄用
* `VTTCue` (en-US)
* `VTTRegion` (en-US)

### W

* `WakeLock` (en-US)
* `WakeLockSentinel` (en-US)
* `WaveShaperNode` (en-US)
* `WebGL2RenderingContext` (en-US)
* `WebGLActiveInfo` (en-US)
* `WebGLBuffer` (en-US)
* `WebGLContextEvent` (en-US)
* `WebGLFramebuffer` (en-US)
* `WebGLObject` (en-US)
* `WebGLProgram` (en-US)
* `WebGLQuery` (en-US)
* `WebGLRenderbuffer` (en-US)
* `WebGLRenderingContext` (en-US)
* `WebGLSampler` (en-US)
* `WebGLShader` (en-US)
* `WebGLShaderPrecisionFormat` (en-US)
* `WebGLSync` (en-US)
* `WebGLTexture` (en-US)
* `WebGLTransformFeedback` (en-US)
* `WebGLUniformLocation` (en-US)
* `WebGLVertexArrayObject` (en-US)
* `WebSocket`
* `WebTransport` (en-US)
* `WebTransportBidirectionalStream` (en-US)
* `WebTransportDatagramDuplexStream` (en-US)
* `WebTransportError` (en-US)
* `WebTransportReceiveStream` (en-US)
實驗性質
* `WebTransportSendStream` (en-US)
實驗性質
* `WGSLLanguageFeatures` (en-US)
實驗性質
* `WheelEvent`
* `Window` (en-US)
* `WindowClient` (en-US)
* `WindowControlsOverlay` (en-US)
實驗性質
* `WindowControlsOverlayGeometryChangeEvent` (en-US)
實驗性質
* `WindowSharedStorage` (en-US)
實驗性質
* `Worker` (en-US)
* `WorkerGlobalScope` (en-US)
* `WorkerLocation` (en-US)
* `WorkerNavigator` (en-US)
* `Worklet` (en-US)
* `WorkletGlobalScope` (en-US)
* `WorkletSharedStorage` (en-US)
實驗性質
* `WritableStream` (en-US)
* `WritableStreamDefaultController` (en-US)
* `WritableStreamDefaultWriter` (en-US)

### X

* `XMLDocument` (en-US)
* `XMLHttpRequest`
* `XMLHttpRequestEventTarget` (en-US)
* `XMLHttpRequestUpload` (en-US)
* `XMLSerializer` (en-US)
* `XPathEvaluator` (en-US)
* `XPathException` (en-US)
* `XPathExpression` (en-US)
* `XPathNSResolver` (en-US)
* `XPathResult` (en-US)
* `XRAnchor` (en-US)
實驗性質
* `XRAnchorSet` (en-US)
實驗性質
* `XRBoundedReferenceSpace` (en-US)
實驗性質
* `XRCompositionLayer` (en-US)
實驗性質
* `XRCPUDepthInformation` (en-US)
實驗性質
* `XRCubeLayer` (en-US)
實驗性質
* `XRCylinderLayer` (en-US)
實驗性質
* `XRDepthInformation` (en-US)
實驗性質
* `XREquirectLayer` (en-US)
實驗性質
* `XRFrame` (en-US)
實驗性質
* `XRHand` (en-US)
* `XRHitTestResult` (en-US)
實驗性質
* `XRHitTestSource` (en-US)
實驗性質
* `XRInputSource` (en-US)
* `XRInputSourceArray` (en-US)
實驗性質
* `XRInputSourceEvent` (en-US)
* `XRInputSourcesChangeEvent` (en-US)
* `XRJointPose` (en-US)
* `XRJointSpace` (en-US)
* `XRLayer` (en-US)
實驗性質
* `XRLayerEvent` (en-US)
實驗性質
* `XRLightEstimate` (en-US)
實驗性質
* `XRLightProbe` (en-US)
實驗性質
* `XRMediaBinding` (en-US)
實驗性質
* `XRPose` (en-US)
* `XRProjectionLayer` (en-US)
實驗性質
* `XRQuadLayer` (en-US)
實驗性質
* `XRRay` (en-US)
實驗性質
* `XRReferenceSpace` (en-US)
* `XRReferenceSpaceEvent` (en-US)
* `XRRenderState` (en-US)
實驗性質
* `XRRigidTransform` (en-US)
* `XRSession` (en-US)
實驗性質
* `XRSessionEvent` (en-US)
* `XRSpace` (en-US)
* `XRSubImage` (en-US)
實驗性質
* `XRSystem` (en-US)
實驗性質
* `XRTransientInputHitTestResult` (en-US)
實驗性質
* `XRTransientInputHitTestSource` (en-US)
實驗性質
* `XRView` (en-US)
實驗性質
* `XRViewerPose` (en-US)
* `XRViewport` (en-US)
* `XRWebGLBinding` (en-US)
實驗性質
* `XRWebGLDepthInformation` (en-US)
實驗性質
* `XRWebGLLayer` (en-US)
實驗性質
* `XRWebGLSubImage` (en-US)
實驗性質
* `XSLTProcessor` (en-US)


Demos of open web technologies

Demos of open web technologies
==============================

Mozilla 支援豐富、廣泛且扣人心弦的網路公開技術，並且我們鼓勵使用他們。這個頁面提供一些展示這些有趣技術的連結，包含那些曾經在 Demo Studio 有人氣的，但現在已經落伍了的技術。如果你知道有關於新的網路公開技術，不錯的展示或是應用程式，請將連結加到下方適合的區塊中。

2D 繪圖
-----

### Canvas

* An interactive blob using javascript and canvas (fun)
* Blob's demos
* Canvas3D & Flickr
* Playing with Canvas
* Using the Canvas Html element5
* RayCaster
* MSX Emulator
* processing.js
* 3D on 2D Canvas
* miniPaint - Image editor (source code)
### SVG

* Bubblemenu (visual effects and interaction)
* HTML transformations using `foreignObject` (visual effects and transforms)
* Phonetics Guide (interactive)
* 3D objects demo (interactive)
* Blobular (interactive)
* Video embedded in SVG (or use the local download)
* Summer HTML image map creator (source code)
* SVG/CSS demo firefox developer edition design by Rober Villar from Software RVG (source code) (debug mode)
### 影片

* Video 3D Animation "mozilla constantly evolving" Designed by Rober Villar ,SoftwareRVG developer.
* Video 3D animation "Floating Dance" . Designed by Rober Villar , developer from SoftwareRVGdesignS.
* Streaming Anime, Movie Trailer and Interview
* Billy's Browser Firefox Flick
* Virtual Barber Shop
* Transformers Movie Trailer
* A Scanner Darkly Movie Trailer (with built in controls)
* Events firing and volume control
* Dragable and sizable videos
3D 繪圖
-----

### WebGL

* Web Audio Fireworks
* IoQuake3 (source code)
* Escher puzzle (source code)
* Kai 'Opua (source code)
### 虛擬實境 ( Virtual Reality )

* The Polar Sea (source code)
* Sechelt fly-through (source code)
CSS
---

* CSS floating logo " mozilla " developed by Rober Villar , from Software RVG. (debug mode)
* CSS floating logo " mozilla " developed by Rober Villar , from Software RVG. (source code)
* Paperfold
* CSS Blockout
* Rubik's cube
* Pure CSS Slides
* Planetarium (source code)
### 轉換 ( Transformations )

* Impress.js (source code)
遊戲
--

* IoQuake3 (source code)
* Kai 'Opua (source code)
HTML
----

* Zen Photon Garden (source code)
Web APIs
--------

### 提示工具的 API

* HTML5 Notifications (source code)
### 網路 API

* Web Audio Fireworks
* oscope.js - JavaScript oscilloscope
* HTML5 Web Audio Showcase (source code)
* HTML5 Audio Visualizer (source code)
* Graphical Filter Editor and Visualizer (source code)
### 檔案的 API

* Slide My Text - presentation from plain text files
### Web Workers

* Web Worker Fractals
* 圖片編輯器
* Coral generator
* Raytracer
* HotCold Touch Typing


Web media technologies

Web media technologies
======================

這些年來，網頁來表達，創作及運用視訊及音訊以至其他媒介的能力不斷上升。今時今日存在了 大量可供運用的 API 及 HTML 元件，DOM 介面，及其他不止於 發揮傳統效果，還能與其他網頁層面的技術產生協同效應和真實地令人深刻銘記 的特效。本文列出不同的 APIs 和連結其詳細資料的超連結，希望你能認為這些資訊能幫你盡快純熟這些技術。

References
----------

### HTML

這些文章包括 HTML 特效，供ＨＴＭＬ媒體開發者參考。

`<audio>` (en-US)

`<audio>` 元件，這是用來在網頁裡播放音效。此元件能 不被看見地運用來 作為一個 供更多其他繁雜的媒介放置的 位置。當然，也能放置一些可看見的控制器予用家來控制是否重播這些音訊。

`<video>` (en-US)

`<video>` 元件，這是一個為了視訊內容在網頁裡播放的端點(endpoint)．它能被簡單地只用作表現視訊，或者用作一個位置來放置即時視訊內容(streamed video).`<video>也能被用作一個途徑來連結媒介APIs和其他HTML及DOM技術,當中包括` `<canvas>` (這是作 frame grabbing(?) 和其管控).

### APIs

Media Capture and Streams API

這是一個參考資料，關於串流，記錄，管控媒體資料，無論是本地的，透過網路的。這些包括本地的攝錄機及來捕流視訊，音效或圖像的麥克風。

Web Audio API

你可以藉由此 API 產出、篩選及操作即時的聲音或是預先錄製好的材料，然後將音效送至`<audio>`元件、影音串流或是儲存起來。

WebRTC (en-US)

WebRTC (網頁即時通訊)能夠即時地串流影音，也能夠透過網際網路將兩個人的訊息資料互相傳遞，而不需要任何媒介。

指南
--

網頁傳播媒體的概述

支援影音撥放，操作與紀錄的網頁科技與 API 的概論。如果你不知道該使用哪一個 API，請從這裡開始。

Other topics
------------

Related topics which may be of interest, since they can be used in tandem with media APIs in interesting ways.

The Canvas API

The Canvas API lets you draw into an `<canvas>`, manipulating and changing the contents of an image. This can be used with media in many ways, including by setting a `<canvas>` element as the destination for video playback or camera capture so that you can capture and manipulate video frames.

WebGL (en-US)

WebGL provides an OpenGL ES compatible API on top of the existing Canvas API, making it possible to do powerful 3D graphics on the Web. Through a canvas, this can be used to add 3D imagery to media content.


:first-of-type - CSS

:first-of-type
==============

在 CSS 虛擬類別（pseudo-class）中，**`:first-of-type`** 代表本節點為兄弟節點中第一個此類型節點。

```css
/\* 選取第一個出現在父節點下的<p>，不考慮其在所有子節點中的位置。 \*/
p:first-of-type {
  color: red;
}
```

**備註：** 在初始定義中，被選取的節點必須擁有父節點。從選取器層級 4（Selectors Level 4）開始已經不再有這個限制了。

語法
--

Error: could not find syntax for this item範例
--

### 例一：選取第一段文章

來考慮以下 HTML:

```html
<h2>Heading</h2>

<p>Paragraph</p>

<p>Paragraph</p>
```

及 CSS:

```css
p:first-of-type {
  color: red;
}
```

會有這樣的效果 － 只有第一段文章變為紅色，因為它是 body 中第一個文章節點：

### 例二：預定通用選擇器（Assumed universal selector）

這個範例展示了當沒有指定一般選擇器（simple selector）時，通用選擇器是如何被預判。

首先來看 HTML：

```html
<div>
  <span>This `span` is first!</span>
  <span>But this `span` isn't.</span>
  <span>This <em>nested `em` is</em>!</span>
  <span>And so is this <span>nested `span`</span>!</span>
  <b>This `b` qualifies!</b>
  <span>This final `span` does not.</span>
</div>
```

接著是 CSS：

```css
div :first-of-type {
  background-color: lime;
}
```

會有這樣的效果:

特定規格
----

| Specification |
| --- |
| Selectors Level 4 # first-of-type-pseudo |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

參見
--

* `:first-child`
* `:last-of-type` (en-US)
* `:nth-of-type` (en-US)


元素選擇器 - CSS

元素選擇器
=====

 \*\*CSS 元素選擇器 （也稱 型態選擇器）\*\*依照 Node 節點名稱選取匹配的 Element 元素。換句話說，此選擇器選取在 Document 文件內所有指定該型態的元素。

```css
/\* 全部的 <a> 元素。\*/
a {
  color: red;
}
```

語法
--
```

element { style properties }
```

範例
--

### CSS

```css
span {
  background-color: skyblue;
}
```

### HTML

```html
<span>Here's a span with some text.</span>
<p>Here's a p with some text.</p>
<span>Here's a span with more text.</span>
```

### Result

規範
--

| Specification |
| --- |
| Selectors Level 4 # type-selectors |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


後裔選擇器 - CSS

後裔選擇器
=====

簡介
--

`␣` 組合符號 (代表空白, 或更精準地說，代表一或多個空白字元) 結合了兩種選擇器，選擇了只有當第二個選擇器的目標為第一個選擇器目標的後裔時的元素，後裔選擇器跟子選擇器相似，但是不要求披對的元素要是嚴格是父子關係。

語法
--
```

selector1 selector2 { style properties }
```

範例
--

```css
span {
  background-color: white;
}
div span {
  background-color: DodgerBlue;
}
```

```html
<div>
  <span
 >Span 1.
    <span>Span 2.</span>
  </span>
</div>
<span>Span 3.</span>
```

Specifications
--------------

| Specification |
| --- |
| Selectors Level 4 # descendant-combinators |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


transition-timing-function - CSS

transition-timing-function
==========================

**`transition-timing-function`** CSS 屬性用於表示各個被動畫特效影響的屬性的區間值計算方式。

嘗試一下
----

本質上，這個屬性讓你使用加速度曲線來表示動畫變換的速度。

而每個可以動畫化的屬性使用一個 `<timing-function>` (en-US) 作為加速度曲線。

你也許有許多時間函數，而你可以透過使用 `transition-property` (en-US) 屬性來個別設置。如果有前述清單的數量超過時間函數的數量，則會使用預設值 `ease`；如果少於那多餘的時間函數會被忽略，在這兩種情況，CSS 宣告總會有效。

語法
--

```css
/\* Keyword \*/
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

/\* 函數 \*/
transition-timing-function: steps(4, end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
transition-timing-function: frames(10);

/\* 多個函數 \*/
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);

/\* 全域值 \*/
transition-timing-function: inherit;
transition-timing-function: initial;
transition-timing-function: unset;

/\* 包含 transition-property \*/
transition-property: width, height;
transition-timing-function: ease-in, ease-out; // ease-in to width and ease-out to height
```

### 值

`<timing-function>`

每個 `<timing-function>` (en-US) 連結到對應的動畫化屬性，請參考 `transition-property` (en-US)。

### 公式語法
```

transition-timing-function =
  <easing-function># (en-US)

<easing-function> =
  linear                          | (en-US)
  <linear-easing-function>        | (en-US)
  <cubic-bezier-easing-function>  | (en-US)
  <step-easing-function>

<linear-easing-function> =
  linear( <linear-stop-list> )

<cubic-bezier-easing-function> =
  ease                                                | (en-US)
  ease-in                                             | (en-US)
  ease-out                                            | (en-US)
  ease-in-out                                         | (en-US)
  cubic-bezier( <number [0,1]> (en-US) , <number> (en-US) , <number [0,1]> (en-US) , <number> (en-US) )

<step-easing-function> =
  step-start                             | (en-US)
  step-end                               | (en-US)
  steps( <integer> (en-US) , <step-position>? (en-US) )

<linear-stop-list> =
  [ (en-US) <linear-stop> ] (en-US)# (en-US)

<step-position> =
  jump-start  | (en-US)
  jump-end    | (en-US)
  jump-none   | (en-US)
  jump-both   | (en-US)
  start       | (en-US)
  end

<linear-stop> =
  <number> (en-US)               && (en-US)
  <linear-stop-length>? (en-US)

<linear-stop-length> =
  <percentage> (en-US){1,2} (en-US)

```

範例
--

### `transition-timing-function: ease`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: ease;
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-timing-function: ease;
}
.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: ease;
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-timing-function: ease;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

### `transition-timing-function: ease-in`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: ease-in;
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-timing-function: ease-in;
}
.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: ease-in;
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-timing-function: ease-in;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

### `transition-timing-function: ease-out`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: ease-out;
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-timing-function: ease-out;
}
.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: ease-out;
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-timing-function: ease-out;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

### `transition-timing-function: ease-in-out`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
}
.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

### `transition-timing-function: linear`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: linear;
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-timing-function: linear;
}
.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: linear;
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-timing-function: linear;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

### `transition-timing-function: step-start`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: step-start;
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-timing-function: step-start;
}
.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: step-start;
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-timing-function: step-start;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

### `transition-timing-function: step-end`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: step-end;
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-timing-function: step-end;
}
.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: step-end;
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-timing-function: step-end;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

### `transition-timing-function: steps(4, end)`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: steps(4, end);
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-timing-function: steps(4, end);
}
.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: steps(4, end);
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-timing-function: steps(4, end);
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

規格
--

| Specification |
| --- |
| CSS Transitions # transition-timing-function-property |

|  |  |
| --- | --- |
| 預設值 (en-US) | `ease` |
| Applies to | all elements, `::before` (en-US) and `::after` (en-US) pseudo-elements |
| 繼承與否 | no |
| Computed value (en-US) | as specified |
| Animation type | Not animatable |

相容性
---

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

看更多
---

* 使用 CSS transitions (en-US)
* `TransitionEvent` (en-US)


特性簡寫 - CSS

特性簡寫
====

定義
--

*特性簡寫，是一種可以同時設定許多其他 CSS 屬性值的 CSS 屬性。* 使用特性簡寫，網頁開發者可以寫出更簡潔、且通常更具可讀性的樣式表，省時又省力。

CSS 規範中定義，特性簡寫用來組合作用於相同主題的常見性質。舉例來說，CSS `background` (en-US) 這個性質是個特性簡寫，可同時定義 `background-color`, `background-image` (en-US), `background-repeat` (en-US), 和 `background-position` (en-US) 等屬性。同樣的，最常用的字體相關屬性，可以使用 `font` (en-US) 來定義；圍繞在方塊周圍的邊界，則可簡單地以 `margin` (en-US) 簡寫來定義。

需謹慎之處
-----

即便特性簡寫非常易於使用，仍有幾個需要銘記在心的情況：

1. 未指明的值會被設為預設值。這聽起來真的很怪，但他的確會**覆寫**先前的設定值。比如：

```css
background-color: red;
background: url(images/bg.gif) no-repeat top right;
```

不會將背景設為紅色，而是使用 `background-color` 的預設值 `transparent`，由於較後面的規則為優先。
2. 只有獨立的屬性可以被繼承。就如同遺失的值會被預設值取代一樣，不可能讓缺漏的值再去繼承個別屬性。關鍵字 `inherit` 可以用於屬性，但只能整體繼承，而不能用於個別值上。意思是，如果要繼承某個特定的值，就必須使用完整的語句，搭配 `inherit` 關鍵字`。`
3. 簡寫屬性試著不強迫使用特定順序，在那些屬性有許多不同類型的值的狀況下的確很方便。但是在許多屬性具有類似值時就沒這麼簡單了，此時會以以下規則處理：
    1. 關於區塊的簡寫性質，諸如 `border-style` (en-US), `margin` (en-US) 或 `padding` (en-US)，就會使用連貫的１～４個值來定義下列這些邊：

    | border1.png | *單值語法：*`border-width: 1em` — 這個唯一的值定義所有四邊 |
    | --- | --- |
    | border2.png | *雙值語法：*`border-width: 1em 2em` — 第一個值代表垂直部分，也就是上和下邊；第二個值則是指水平部分，也就是左右邊。 |
    | border3.png | *三值語法：*`border-width: 1em 2em 3em` — 第一個值代表上邊，第二個值代表兩旁的邊，而第三個值代表下邊。 |
    | border4.png | *四值語法：*`border-width: 1em 2em 3em 4em` — 這四個值分別代表上、右、下、左邊，順時針的方向由上開始排列（可以以 trouble 來記憶，即英文首文字的縮寫 TRBL） |
    2. 與之相似地，關於區塊角落的屬性，像是 `border-radius` (en-US)，也會使用連貫的１～４個值來代表四個角落：

    | corner1.png | *單值語法：*`border-radius: 1em` — 這唯一的值代表了所有角落。 |
    | --- | --- |
    | corner2.png | *雙值語法：*`border-radius: 1em 2em` — 第一個值代表左上和右下，第二個值則是右上及左下角。 |
    | corner3.png | *三值語法：*`border-radius: 1em 2em 3em` — 第一個值代表左上，第二個值代表右上及左下，第三個值則是右下的角落。 |
    | corner4.png | *四值語法：*`border-radius: 1em 2em 3em 4em` — 這四個值分別代表左上、右上、右下、左下，由左上開始的順時針排序。 |
背景屬性
----

背景會有下列這些屬性:

```css
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;
```

可以簡寫為一句宣告：

```css
background: #000 url(images/bg.gif) no-repeat top right;
```

（寫成簡化屬性的效果，完全等同於上方未簡化的屬性，外加 `background-attachment: scroll` 及其他 CSS3 中額外增加的屬性。)

字體屬性
----

下列的宣告:

```css
font-style: italic;
font-weight: bold;
font-size: 0.8em;
line-height: 1.2;
font-family: Arial, sans-serif;
```

可以簡寫成這樣：

```css
font:
  italic bold 0.8em/1.2 Arial,
  sans-serif;
```

簡化定義的效果完全等同於未簡化前的屬性效果，加上 `font-variant: normal`、`font-size-adjust: none` (CSS2.0 / CSS3) 及 `font-stretch: normal` (CSS3) 等屬性。

邊框屬性
----

邊框的寬度、顏色、樣式可以簡寫成一句宣告。舉例來說：

```css
border-width: 1px;
border-style: solid;
border-color: #000;
```

可以寫成：

```css
border: 1px solid #000;
```

邊界與內距屬性
-------

margin 和 padding 的簡化版本大致相同。下列的 CSS 宣告:

```css
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
```

等同於下面的宣告（注意值的排序是順時鐘的順序：上，右，下，左 (TRBL，可以「trouble」這個單字的諧音來記憶）

```css
margin: 10px 5px 10px 5px;
```

相關連結
----

* CSS Reference (en-US)
* Shorthand properties: `background` (en-US), `font` (en-US), `margin` (en-US), `border` (en-US), `border-top` (en-US), `border-right` (en-US), `border-bottom` (en-US), `border-left` (en-US), `border-width` (en-US), `border-color`, `border-style` (en-US), `transition`, `transform`, `padding` (en-US), `list-style` (en-US), `border-radius` (en-US).


:first-child - CSS

:first-child
============

`:first-child`是CSS當中的一種偽類別（pseudo-class），代表任何身為長子的元素（親元素的第一個子元素）。

語法
--

Error: could not find syntax for this item範例
--

### 範例 1

#### HTML 內文

```html
<div>
  <span>This span is limed!</span>
  <span>This span is not. :(</span>
</div>
```

#### CSS 內文

```css
span:first-child {
  background-color: lime;
}
```

呈現效果如下：

### 範例 2 - 使用 UL

#### HTML 內文

```html
<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
</ul>
```

#### CSS 內文

```css
li {
  color: red;
}
li:first-child {
  color: green;
}
```

呈現效果如下：

規格
--

| Specification |
| --- |
| Selectors Level 4 # first-child-pseudo |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

參見
--

* `:last-child` (en-US)
* `:nth-child` (en-US)
* `:last-of-type` (en-US)


border-right-color - CSS

border-right-color
==================

**`border-right-color`** 是一種 CSS 屬性，用來設定元件右側邊框 (en-US)的顏色。也可由含括此屬性功能的簡寫屬性 `border-color` 或 `border-right` (en-US) 設定該屬性值。

嘗試一下
----

語法
--

```css
/\* <color> values \*/
border-right-color: red;
border-right-color: #ffbb00;
border-right-color: rgb(255, 0, 0);
border-right-color: hsla(100%, 50%, 25%, 0.75);
border-right-color: currentcolor;
border-right-color: transparent;

/\* Global values \*/
border-right-color: inherit;
border-right-color: initial;
border-right-color: revert;
border-right-color: revert-layer;
border-right-color: unset;
```

`border-right-color`只能宣告一個屬性值。

### 屬性值

`<color>` (en-US)

定義右側邊框色彩。

Formal definition 標準定義
----------------------

|  |  |
| --- | --- |
| 預設值 (en-US) | `currentcolor` |
| Applies to | all elements. It also applies to `::first-letter`. |
| 繼承與否 | no |
| Computed value (en-US) | computed color |
| Animation type | a color |

Formal syntax 語法規則
------------------
```

border-right-color =
  <color> (en-US)     | (en-US)
  <image-1D>

<image-1D> =
  <stripes()>

<stripes()> =
  stripes( <color-stripe># (en-US) )

<color-stripe> =
  <color> (en-US)                            && (en-US)
  [ (en-US) <length-percentage> | (en-US) <flex> (en-US) ] (en-US)? (en-US)

<length-percentage> =
  <length> (en-US)      | (en-US)
  <percentage> (en-US)

```

範例
--

### 簡易邊框範例

#### HTML

```html
<div class="mybox">
  <p>
    這是一個帶有框線的方框。 請注意某側框線顏色已設為
    <span class="redtext">紅色</span>。
  </p>
</div>
```

#### CSS

```css
.mybox {
  border: solid 0.3em gold;
  border-right-color: red;
  width: auto;
}

.redtext {
  color: red;
}
```

#### 成果

規範
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-color |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

參見
--

* 與框線相關的簡寫屬性：`border` (en-US)、`border-right` (en-US)、`border-color`。
* 與顏色相關的其他框線屬性：`border-left-color`、`border-bottom-color`、`border-top-color`。
* 與同側框線相關的其他屬性：`border-right-style` (en-US)、`border-right-width` (en-US)。


ruby-position - CSS

ruby-position
=============

**實驗性質:** **這是一個實驗中的功能 (en-US)**
此功能在某些瀏覽器尚在開發中，請參考兼容表格以得到不同瀏覽器用的前輟。

CSS 的 **`ruby-position`** 屬性定義了 ruby 元素與該基礎元素（base element）相關聯的位置。它能在元素上方（`over`）、下方（`under`）、兩個字符之間、抑或右方（`inter-character`）。

```css
/\* 關鍵字值 \*/
ruby-position: over;
ruby-position: under;
ruby-position: inter-character;

/\* 全域值 \*/
ruby-position: inherit;
ruby-position: initial;
ruby-position: unset;
```

|  |  |
| --- | --- |
| 預設值 (en-US) | `alternate` |
| Applies to | ruby annotations containers |
| 繼承與否 | yes |
| Computed value (en-US) | as specified |
| Animation type | discrete |

語法
--

### 屬性值

`over`

![Over example](/zh-TW/docs/Web/CSS/ruby-position/screen_shot_2015-03-04_at_13.02.20.png)如果文件以橫式排列，該關鍵字會指引旁註標記（ruby）出現在主文的上方。如果文件以直式排列，則會出現在主文的右方。

`under`

![Under example](/zh-TW/docs/Web/CSS/ruby-position/screen_shot_2015-03-04_at_13.02.07.png)如果文件以橫式排列，該關鍵字會指引旁註標記出現在在主文的下方。如果文件以直式排列，則會出現在主文的左方。

`inter-character`

該關鍵字會指引旁註標記出現在在主文的兩個字符的中間。

### 正式語法
```

ruby-position =
  [ (en-US) alternate || (en-US) [ (en-US) over | (en-US) under ] (en-US) ] (en-US)  | (en-US)
  inter-character

```

示例
--

HTML 會因為 `ruby-position` 的值不同，而作出不同的渲染：

```html
<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>
```

### 旁註標記定位到主文上方

```html
<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>
```

```css
ruby {
  ruby-position: over;
}
```

它會給出如下結果：

### 旁註標記定位到主文下方

```html
<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>
```

```css
ruby {
  ruby-position: under;
}
```

它會給出如下結果：

規範
--

| Specification |
| --- |
| CSS Ruby Annotation Layout Module Level 1 # rubypos |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

參見
--

* HTML 的旁註標記元素：`<ruby>`、`<rt>` (en-US)、`<rp>` (en-US)、`<rtc>` (en-US)。
* CSS 的旁註標記屬性：`ruby-align` (en-US)、`ruby-merge`。


@font-face - CSS

@font-face
==========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

* Learn more
* See full compatibility
* Report feedback
摘要
--

The `@font-face` CSS at-rule (en-US) allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, `@font-face` eliminates the need to depend on the limited number of fonts users have installed on their computers. The `@font-face` at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule (en-US).

**實驗性質:** **這是一個實驗中的功能 (en-US)**
此功能在某些瀏覽器尚在開發中，請參考兼容表格以得到不同瀏覽器用的前輟。

語法
--
```

@font-face {
  [font-family: <family-name>;]?
  [src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?
  [unicode-range: <urange>#;]?
  [font-variant: <font-variant>;]?
  [font-feature-settings: normal|<feature-tag-value>#;]?
  [font-stretch: <font-stretch>;]?
  [font-weight: <weight>];
  [font-style: <style>];
}
```

### 參數值

`<family-name>`

Specifies a font name that will be used as font face value for font properties.

`<uri>`

URL for the remote font file location, or the name of a font on the user's computer in the form `local("Font Name")`.

`<font-variant>`

A `font-variant` (en-US) value.

`<font-stretch>`

A `font-stretch` (en-US) value.

`<weight>`

A font weight (en-US) value.

`<style>`

A font style (en-US) value.

You can specify a font on the user's local computer by name using the `local()` syntax. If that font isn't found, other sources will be tried until one is found.

範例
--

這個範例指定一個可供下載的字型，並套用至 document 的整個 body。

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Web Font Sample</title>
    <style media="screen, print">
 @font-face {
 font-family: "Bitstream Vera Serif Bold";
 src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
 }

 body {
 font-family: "Bitstream Vera Serif Bold", serif;
 }
 </style>
  </head>
  <body>
    This is Bitstream Vera Serif Bold.
  </body>
</html>
```

這個範例會套用使用者本地的 "Helvetica Neue Bold" 字型，只有當使用者未安裝該字型（兩種名稱都試過了），才會下載 "MgOpenModernaBold.ttf" 字型：

```css
@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
    url(MgOpenModernaBold.ttf);
  font-weight: bold;
}
```

注意事項
----

* In Gecko, web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless HTTP access controls (en-US) are used to relax this restriction.

**備註：** Because there are no defined MIME types for TrueType, OpenType, and Web Open File Format (WOFF) fonts, the MIME type of the file specified is not considered.
* When Gecko displays a page that uses web fonts, it initially displays text using the best CSS fallback font available on the user's computer while it waits for the web font to finish downloading. As each web font finishes downloading, Gecko updates the text that uses that font. This allows the user to read the text on the page more quickly.
規格文件
----

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-face-rule |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

詳見
--

* About WOFF (en-US)
* FontSquirrel @font-face generator
* Beautiful fonts with @font-face
* Open Font Library
* Microsoft Developer Network (MSDN) @font-face reference
* When can I use WOFF?
* When can I use SVG Fonts?


height - CSS

height
======

概要
--

**`高度(height)`** 的 CSS 屬性指定了元素內容區域的高度。content area (en-US) 在元素的留白(padding)、邊框(border) 與 邊界(margin) 內。

`min-height` (en-US) 與 `max-height` (en-US) 的特性比 `height` 更重要。

|  |  |
| --- | --- |
| 預設值 (en-US) | `auto` |
| Applies to | all elements but non-replaced inline elements, table columns, and column groups |
| 繼承與否 | no |
| Percentages | The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to `auto`. A percentage height on the root element is relative to the initial containing block. |
| Computed value (en-US) | a percentage or `auto` or the absolute length |
| Animation type | a length, percentage or calc(); |

語法
--

```css
/\* Keyword value \*/
height: auto;

/\* <length> values \*/
height: 120px;
height: 10em;

/\* <percentage> value \*/
height: 75%;

/\* Global values \*/
height: inherit;
height: initial;
height: unset;
```

### 值

`<length>`

查看 `<length>` (en-US) 可用的單位。

`<percentage>`

`<percentage>` (en-US) 相對於元素的塊狀高度。如果沒有指定塊狀元素的高度，預設值為 `auto。`用在 root 元素 (e.g. `<html>`) 上是相對於初始塊狀元素（即顯示器的尺寸）。

`border-box`
實驗性質

If present, the preceding `<length>` (en-US) or `<percentage>` (en-US) is applied to the element's border box.

`content-box`
實驗性質

`<length>` (en-US) 或 `<percentage>` (en-US) 是應用於元素的 content box.

`auto`

瀏覽器將計算並選擇指定元素的高度。

fill
實驗性質

Use the `fill-available` inline size or `fill-available` block size, as appropriate to the writing mode.

`max-content`
實驗性質

The intrinsic preferred height.

`min-content`
實驗性質

The intrinsic minimum height.

`available`
實驗性質

The containing block height minus vertical margin, border and padding.

`fit-content`
實驗性質

The larger of:

* the intrinsic minimum height
* the smaller of the intrinsic preferred height and the available height

### 正式語法
```

height =
  auto                                      | (en-US)
  <length-percentage [0,∞]>                 | (en-US)
  min-content                               | (en-US)
  max-content                               | (en-US)
  fit-content( <length-percentage [0,∞]> )

<length-percentage> =
  <length> (en-US)      | (en-US)
  <percentage> (en-US)

```

範例
--

### HTML

```html
<div id="red">
  <span>I'm 50 pixels tall.</span>
</div>
<div id="green">
  <span>I'm 25 pixels tall.</span>
</div>
<div id="parent">
  <div id="child">
    <span>I'm half the height of my parent.</span>
  </div>
</div>
```

### CSS

```css
div {
  width: 250px;
  margin-bottom: 5px;
  border: 3px solid #999999;
}

#red {
  height: 50px;
}

#green {
  height: 25px;
}

#parent {
  height: 100px;
}

#child {
  height: 50%;
  width: 75%;
}
```

規格
--

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # preferred-size-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

瀏覽器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* box model (en-US), `width`, `box-sizing`, `min-height` (en-US), `max-height` (en-US)


border-top-color - CSS

border-top-color
================

**`border-top-color`** 是一種 CSS 屬性，用來設定元件上側邊框 (en-US)的顏色。也可由含括此屬性功能的簡寫屬性 `border-color` 或 `border-top` (en-US) 設定該屬性值。

嘗試一下
----

語法
--

```css
/\* <color> values \*/
border-top-color: red;
border-top-color: #ffbb00;
border-top-color: rgb(255, 0, 0);
border-top-color: hsla(100%, 50%, 25%, 0.75);
border-top-color: currentcolor;
border-top-color: transparent;

/\* Global values \*/
border-top-color: inherit;
border-top-color: initial;
border-top-color: revert;
border-top-color: revert-layer;
border-top-color: unset;
```

`border-top-color`只能宣告一個屬性值。

### 屬性值

`<color>` (en-US)

定義上側邊框色彩。

Formal definition 標準定義
----------------------

|  |  |
| --- | --- |
| 預設值 (en-US) | `currentcolor` |
| Applies to | all elements. It also applies to `::first-letter`. |
| 繼承與否 | no |
| Computed value (en-US) | computed color |
| Animation type | a color |

Formal syntax 語法規則
------------------
```

border-top-color =
  <color> (en-US)     | (en-US)
  <image-1D>

<image-1D> =
  <stripes()>

<stripes()> =
  stripes( <color-stripe># (en-US) )

<color-stripe> =
  <color> (en-US)                            && (en-US)
  [ (en-US) <length-percentage> | (en-US) <flex> (en-US) ] (en-US)? (en-US)

<length-percentage> =
  <length> (en-US)      | (en-US)
  <percentage> (en-US)

```

範例
--

### 簡易邊框範例

#### HTML

```html
<div class="mybox">
  <p>
    這是一個帶有框線的方框。 請注意某側框線顏色已設為
    <span class="redtext">紅色</span>。
  </p>
</div>
```

#### CSS

```css
.mybox {
  border: solid 0.3em gold;
  border-top-color: red;
  width: auto;
}

.redtext {
  color: red;
}
```

#### 成果

規範
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-color |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

參見
--

* 與框線相關的簡寫屬性：`border` (en-US)、`border-top` (en-US)、`border-color`。
* 與顏色相關的其他框線屬性：`border-right-color`、`border-bottom-color`、`border-left-color`。
* 與同側框線相關的其他屬性：`border-top-style` (en-US)、`border-top-width` (en-US)。


繼承 - CSS

繼承
==

摘要
--

每個 CSS property definition (en-US) 都寫道是否這個屬性預設有繼承: ("Inherited: Yes") 或是 預設沒有繼承: ("Inherited: no"). 這個設定將會在沒有位屬性標註值時發生.

繼承屬性
----

When no value for an **inherited property** has been specified on an element, the element gets the computed value (en-US) of that property on its parent element. Only the root element of the document gets the initial value (en-US) given in the property's summary.

A typical example of an inherited property is the `color` (en-US) property. Given the style rules:

```css
p {
  color: green;
}
```

HTML:

```html
<p>This paragraph has <em>emphasized text</em> in it.</p>
```

the words "emphasized text" will appear green, since the `em` element has inherited the value of the `color` (en-US) property from the `p` element. It does *not* get the initial value of the property (which is the color that is used for the root element when the page specifies no color).

非繼承屬性
-----

When no value for an **non-inherited property** (sometimes called a **reset property** in Mozilla code) has been specified on an element, the element gets the initial value (en-US) of that property (as specified in the property's summary).

A typical example of a non-inherited property is the `border` (en-US) property. Given the style rules:

```css
p {
  border: medium solid;
}
```

HTML:

```html
<p>This paragraph has <em>emphasized text</em> in it.</p>
```

the words "emphasized text" will not have a border (since the initial value of `border-style` (en-US) is `none`).

註
-

`inherit` (en-US) 關鍵字允許作者準確地去標註. 這個在繼承和非繼承屬性都是有效的.

參見
--

* CSS Reference (en-US)
* CSS 重要概念：
    + CSS 語法
    + @ 規則 (en-US)
    + 註釋 (en-US)
    + 優先級 (en-US)
    + 繼承
    + 盒模型 (en-US)
    + 佈局模式 (en-US)
    + 視覺格式化模型 (en-US)
    + 外邊距合併
    + 值
        - 初始值 (en-US)
        - 計算值 (en-US)
        - 解析值 (en-US)
        - 指定值 (en-US)
        - 應用值 (en-US)
        - 實際值 (en-US)
    + 特性值定義語法 (en-US)
    + 特性簡寫
    + 可置換元素
* `inherit` (en-US)


transition - CSS

transition
==========

**`transition`** CSS 屬性是 `transition-property` (en-US), `transition-duration`, `transition-timing-function`, and `transition-delay` (en-US)的 特性簡寫。

嘗試一下
----

Transitions 讓你可以定義元件在兩個狀態之間切換的轉場效果。兩個不同狀態可以使用虛擬類別 定義，像是`:hover` (en-US) 或 `:active` (en-US) 亦或是 使用 JavaScript 設定的狀態變化。

語法
--

```css
/\* Apply to 1 property \*/
/\* property name | duration \*/
transition: margin-right 4s;

/\* property name | duration | delay \*/
transition: margin-right 4s 1s;

/\* property name | duration | timing function \*/
transition: margin-right 4s ease-in-out;

/\* property name | duration | timing function | delay \*/
transition: margin-right 4s ease-in-out 1s;

/\* Apply to 2 properties \*/
transition:
  margin-right 4s,
  color 1s;

/\* Apply to all changed properties \*/
transition: all 0.5s ease-out;

/\* Global values \*/
transition: inherit;
transition: initial;
transition: unset;
```

`transition` 屬性可以包含一個或多個轉場設定，每一項設定都以逗點分開。

每一項設定都描述著每一項屬性所對應的轉場效果(或是`all` 及 `none`這兩個特殊值) 。其包含了：

* 無或一個對應的屬性名稱。可以是：
    + 關鍵字 `none`
    + 關鍵字 `all`
    + 以`<custom-ident>` (en-US)命名的 CSS 屬性。
* 無或一個`<single-transition-timing-function>` (en-US) 表示所使用的漸變函式。
* 無、一個或兩個`<time>` (en-US) 值。第一個值會被指派給`transition-duration`, 而第二個則被指派給`transition-delay` (en-US)。

當每個轉場設定不等長時，請參見 當 property values list 之間不等長時... 。簡而言之，多餘的描述(超過實際被執行的數量)會直接被忽略。

### 標準語法
```

transition =
  <single-transition># (en-US)

<single-transition> =
  [ (en-US) none | (en-US) <single-transition-property> ] (en-US)  || (en-US)
  <time> (en-US)                                   || (en-US)
  <easing-function>                        || (en-US)
  <time> (en-US)

<single-transition-property> =
  all             | (en-US)
  <custom-ident> (en-US)

<easing-function> =
  linear                          | (en-US)
  <linear-easing-function>        | (en-US)
  <cubic-bezier-easing-function>  | (en-US)
  <step-easing-function>

<linear-easing-function> =
  linear( <linear-stop-list> )

<cubic-bezier-easing-function> =
  ease                                                | (en-US)
  ease-in                                             | (en-US)
  ease-out                                            | (en-US)
  ease-in-out                                         | (en-US)
  cubic-bezier( <number [0,1]> (en-US) , <number> (en-US) , <number [0,1]> (en-US) , <number> (en-US) )

<step-easing-function> =
  step-start                             | (en-US)
  step-end                               | (en-US)
  steps( <integer> (en-US) , <step-position>? (en-US) )

<linear-stop-list> =
  [ (en-US) <linear-stop> ] (en-US)# (en-US)

<step-position> =
  jump-start  | (en-US)
  jump-end    | (en-US)
  jump-none   | (en-US)
  jump-both   | (en-US)
  start       | (en-US)
  end

<linear-stop> =
  <number> (en-US)               && (en-US)
  <linear-stop-length>? (en-US)

<linear-stop-length> =
  <percentage> (en-US){1,2} (en-US)

```

範例
--

CSS 轉場 有更多範例。

規範
--

| Specification |
| --- |
| CSS Transitions # transition-shorthand-property |

|  |  |
| --- | --- |
| 預設值 (en-US) | as each of the properties of the shorthand:* `transition-delay` (en-US): `0s`
* `transition-duration`: `0s`
* `transition-property` (en-US): all
* `transition-timing-function`: `ease`
* `transition-behavior` (en-US): `normal`
 |
| Applies to | all elements, `::before` (en-US) and `::after` (en-US) pseudo-elements |
| 繼承與否 | no |
| Computed value (en-US) | as each of the properties of the shorthand:* `transition-delay` (en-US): as specified
* `transition-duration`: as specified
* `transition-property` (en-US): as specified
* `transition-timing-function`: as specified
* `transition-behavior` (en-US): as specified
 |
| Animation type | Not animatable |

瀏覽器支援情況
-------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

更多資訊
----

* CSS 轉場
* `TransitionEvent` (en-US)


CSS 彈性盒子排版 - CSS

CSS 彈性盒子排版
==========

**CSS 彈性盒子排版**（CSS Flexible Box Layout）是 CSS 的模組。它為了最佳化 CSS 盒子模型的使用者介面設計而來、並把項目都配置在一個維度之內。在彈性盒子排版中，彈性容器的子項目們可以伸展到任何方向、並讓他們的尺寸更加「彈性」、或者持續增大，以填補未使用的空間，抑或縮小，以避免父元素溢出。子項目橫向或縱向對齊都很容易操作。

基本範例
----

下例的容器已經設為 `display: flex`、意味著三個子元素變成了彈性項目（flex item）。`justify-content` 值也設成了 `space-between` 以便將項目均勻地分佈在主軸上。每個物品之間放置相等數量的空間，左右項目與彈性容器（flex container）的邊緣齊平。你可能也發現到各項目在切軸（cross axis）上伸展。那是因為 `align-items` 的值是 `stretch`。項目伸展為彈性容器的高度、令它們看起来都如同最高的項目一般高。

參考
--

### CSS 屬性

* `flex` (en-US)
* `flex-basis` (en-US)
* `flex-direction` (en-US)
* `flex-flow` (en-US)
* `flex-grow` (en-US)
* `flex-shrink` (en-US)
* `flex-wrap` (en-US)
* `order` (en-US)
### 對齊屬性

The properties `align-content`, `align-self`, `align-items` and `justify-content` initially appeared in the Flexbox specification, but are now defined in Box Alignment and the Flexbox spec refers to the Box Alignment Specification for up to date definitions. Additional alignment properties are also defined in Box Alignment.

* `justify-content` (en-US)
* `align-content` (en-US)
* `align-items` (en-US)
* `align-self` (en-US)
* `place-content` (en-US)
* `place-items` (en-US)
* `row-gap` (en-US)
* `column-gap` (en-US)
* `gap` (en-US)
### 短詞

* Flexbox (en-US)
* Flex Container (en-US)
* Flex Item (en-US)
* Main Axis (en-US)
* Cross Axis (en-US)
* Flex (en-US)
教學
--

彈性盒子的基本概念

彈性盒子的概述

彈性盒子與其他排版的關係 (en-US)

彈性盒子如何與其他排版和 CSS 規範相關連

在彈性容器內對齊 (en-US)

彈性盒子的 Box Alignment 屬性如何做動。

給彈性項目排序 (en-US)

解釋改變彈性項目順序和方向的不同方法，並講到潛在的問題。

控制彈性項目與主軸的比例 (en-US)

將解釋 flex-grow、flex-shrink、flex-basis 屬性。

掌握彈性項目 wrapping (en-US)

如何使用多行建立彈性容器，並控制這些行中項目的顯示。

彈性盒子的典型用例 (en-US)

彈性盒子常見的設計範式。

彈性盒子的向下相容 (en-US)

彈性盒子的瀏覽器相容性、互操作性問題、支持舊版瀏覽器和規範的版本

規範
--

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1  |

參見
--

Flexbugs

a community-curated list of flexbox browser bugs and workarounds

Cross-browser Flexbox mixins (en-US)

This article provides a set of mixins for those who want to create cross-browser flexbox experiences that even work in older browser that don't support the modern flexbox syntax