The Front-End Checklist is an exhaustive list of all elements you need to have / to test before launching your site / page HTML to production. 這個 前端檢查清單 是個所有要素你須要有檢驗的全面清單，在啟動你的網站 / 頁面 HTML 到產品之前.
It is based on Front-End developers' years of experience, with the additions coming from some other open-source checklists. 他是基於前端開發的多年經驗,隨著從一些其他開源檢查清單增加.
All items in the Front-End Checklist are required for the majority of the projects, but some elements can be omitted or are not essential (in the case of an administration web app, you may not need RSS feed for example). We choose to use 3 levels of flexibility: 所有項目在這個 前端檢查表 中被要求對於大多數的專案, 但有些元素可以被忽略或不是完全必要的(舉例來說在這一個管理網頁應用程式的例子裡, 你也許不需要 RSS 訂閱). 我們選擇使用彈性的三個等級:
means that the item is recommended but can be omitted in some particular situations.
means that the item is highly recommended and can eventually be omitted in some really particular cases. Some elements, if omitted, can have bad repercussions in terms of performance or SEO.
means that the item can't be omitted by any reason. You may cause a dysfunction in your page or have accessibility or SEO issues. The testing priority needs to be on these elements first.
Some resources possess an emoticon to help you understand which type of content / help you may find on the checklist: 有些資源擁有一個表情符號為了幫助你了解內容的種類 / 為了幫助你可以在這個檢查表上發現:
- 📖: documentation or article
- 📖: 文件 or 文章
- 🛠: online tool / testing tool
- 🛠: 線上工具 / 檢驗工具
- 📹: media or video content
- 📹: 媒體或影片內容
注意: 你可以發現 每件事的一個清單 可以被發現在這個
<head>中的一個 HTML 文件.
- Doctype:
- 文件種類:
<!-- Doctype HTML5 -->
<!-- 文件種類 HTML5 -->
<!doctype html>The next 3 meta tags (Charset, X-UA Compatible and Viewport) need to come first in the head. 接下來的 3 個 meta 標籤 (Charset, X-UA Compatible and Viewport) need to come first in the head.
- Charset:
- Charset:
<!-- Set character encoding for the document -->
<!-- 設定字符編碼給這個文件 -->
<meta charset="utf-8">- X-UA-Compatible:
- X-UA-Compatible:
<!-- Instruct Internet Explorer to use its latest rendering engine -->
<!-- 通知 IE 使用它的最新版渲染引擎 -->
<meta http-equiv="x-ua-compatible" content="ie=edge">- Viewport:
- 視埠:
<!-- Viewport for responsive web design -->
<!-- 視埠為了響應式網頁設計 -->
<meta name="viewport" content="width=device-width, initial-scale=1">- Title:
- 標題:
<!-- Document Title -->
<!-- 文件標題 -->
<title>Page Title less than 65 characters 頁面標題少於 65 字符</title>- Description:
- 描述:
<!-- Meta Description -->
<!-- Meta 描述 -->
<meta name="description" content="Description of the page less than 150 characters 頁面少於 150 字符的描述">- Favicons:
favicon.ico, put it at the root of your site. Normally you won't need to use any markup. However, it's still good practice to link to it using the example below. Today, PNG format is recommended over.icoformat (dimensions: 32x32px). - 網站圖示:
favicon.ico, 放置它在你的網站根目錄. 正常情況下你不必使用任何標記. 然而, 使用下面的示例鏈接到它仍然是好的練習. 今天, PNG 格式被推薦 超過.ico格式 (尺寸: 32x32px).
<!-- Standard favicon -->
<!-- 標準網站圖示 -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- Recommended favicon format -->
<!-- 推薦網站圖示格式 -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">- Apple Touch Icon:
- 蘋果觸碰圖像:
<!-- Apple Touch Icon -->
<!-- 蘋果觸碰圖像 -->
<link rel="apple-touch-icon" href="/custom-icon.png">📖 配置網頁應用程式
- Windows Tiles:
- 視窗瓦片:
<!-- Microsoft Tiles -->
<!-- 微軟瓦片 -->
<meta name="msapplication-config" content="browserconfig.xml" />Minimum required xml markup for the browserconfig.xml file is as follows: browserconfig.xml 檔案的最小所需 xml 標記如下:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="small.png"/>
<square150x150logo src="medium.png"/>
<wide310x150logo src="wide.png"/>
<square310x310logo src="large.png"/>
</tile>
</msapplication>
</browserconfig>- Canonical:
rel="canonical"to avoid duplicate content. - 典範:
rel="canonical"避免複製內容.
<!-- Helps prevent duplicate content issues -->
<!-- 幫助避免重複內容議題 -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">- Language attribute:
langattribute of your website is specified and related to the language of the current page. - Language attribute:
lang屬性被指定以及當前頁面相關語言.
<html lang="en">- Direction tag:
- 方向標籤:
<html dir="rtl">- Alternate language:
- 替代語言:
<link rel="alternate" href="https://es.example.com/" hreflang="es">- Conditional comments:
- 條件註解:
-
RSS feed:
-
RSS 訂閱:
-
CSS Critical:
<style></style>in a single line (minified). -
** CSS 關鍵:**
<style></style>之間在一行中 (縮小的).
- CSS order:
<head>. (Except the case where sometimes JS files are loaded asynchronously on top of your page). - CSS 順序:
<head>中. (除了這個例子有時 JS 檔案被非同步地裝載在你的頁面的頂部).
Facebook OG and Twitter Cards are, for any website, highly recommended. The other social media tags can be considered if you target a particular presence on those and want to ensure the display. Facebook OG 以及 Twitter 卡片 , 對於任何網站, 高度推薦. 其他社交媒體標籤可能被週密考慮過假如你針對特定的存在在那些網站上以及想要確保顯示.
- Facebook Open Graph:
- Facebook 開放圖表:
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
- 📖 一個導覽分享給網站管理者
- 🛠 用這個檢驗你的頁面 Facebook OG 檢驗
- Twitter Card:
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">
- 📖 用卡片入門 — Twitter Developers
- 🛠 用這個檢驗你的頁面 Twitter card validator
- HTML5 Semantic Elements:
- HTML5 語意元素:
📖 HTML 參考
-
Error pages:
-
錯誤頁面:
-
Noopener:
target="_blank", your link should have arel="noopener"attribute to prevent tab nabbing. If you need to support older versions of Firefox, userel="noopener noreferrer". -
Noopener:
target="_blank", 你的鏈結應該有一個rel="noopener"屬性為了避免 tab 突然抓住. 如果你必須支援火狐的舊版本, 使用rel="noopener noreferrer".
- Clean up comments:
- 清理註解:
- W3C compliant:
- W3C 兼容:
🛠 W3C 驗證器
- HTML Lint:
- HTML Lint:
🛠 骯髒的標記
-
Desktop Browsers:
-
桌面板瀏覽器:
-
Mobile Browsers:
-
行動版瀏覽器:
-
Link checker:
-
鏈結檢查:
🛠 W3C 檢查鏈結
- Adblockers test:
- 廣告攔截器檢驗:
- Webfont format:
- 網頁字體格式:
- Webfont size:
- 網頁字體大小:
注意: 看一眼 CSS 指南 以及Sass 指南 跟隨大多數前端開法者. 如果你對 CSS 屬性有疑問, 你可以拜訪 CSS 參考.
- Responsive Web Design:
- 響應式網頁設計:
- CSS Print:
- CSS 列印:
- Preprocessors:
- 預處理器:
- Unique ID:
- 獨一的 ID:
- Reset CSS:
- 重置 CSS:
- 📖 Reset.css
- 📖 Normalize.css
- 📖 Reboot
- JS prefix:
- JS 前綴:
<div id="js-slider" class="my-slider">
<!-- Or -->
<div id="id-used-by-cms" class="js-slider my-slider">- CSS embed or line:
- CSS 嵌入或行內:
- Vendor prefixes:
- 供應商前綴:
- Concatenation:
- 合併:
- Minification:
- 縮小:
- Non-blocking:
- 非阻塞:
- Unused CSS:
- 未使用的 CSS:
- 🛠 UnCSS 線上 🛠
- 🛠 PurifyCSS
- 🛠 Chrome 開發工具覆蓋
- Stylelint:
- Stylelint:
-
Responsive web design:
-
響應式網頁設計:
-
CSS Validator:
-
CSS 驗證器:
- 🛠 CSS 驗證器
- Desktop Browsers:
- 桌面版瀏覽器:
- Mobile Browsers:
- 行動版瀏覽器:
- OS:
- 作業系統:
- Pixel perfect:
- 完美像素:
- Reading direction:
- 閱讀方向:
注意: 為了圖像優化的完整了解, 檢查免費電子書 基本圖像優化 來自 Addy Osmani.
- Optimization:
- 優化:
- 🛠 Imagemin
- 🛠 使用 ImageOptim 免費優化你的圖片.
- 🛠 使用 Kraken.io 對於 png 和 jpg 優化，使用Kraken.io非常棒的替代方法. 在免費計畫上每個文件最多可達 1 mb .
- Picture/Srcset:
- 照片/來源設定:
- Retina:
- 視網膜:
- Sprite:
- 大圖:
- Width and Height:
widthandheightattributes on<img>if the final rendered image size is known (can be omitted for CSS sizing). - 寬度和高度:
width以及height屬性在<img>上 假如最終渲染圖像大小被知道 (can be omitted for CSS sizing). - Alternative text:
<img>have an alternative text which describe the image visually. - 替代文字:
<img>有一個替代文字它直觀地描述了圖像.
- Lazy loading:
- 懶加載:
- JavaScript Inline:
- JavaScript 行內:
- Concatenation:
- 合併:
- Minification:
.minsuffix). - 縮小:
.min後綴).
- JavaScript 安全性:
- Non-blocking:
asyncor deferred usingdeferattribute. - 非阻塞:
async或是延遲地defer屬性.
- Modernizr:
<html>tag. - Modernizr:
<html>標籤中.
- ESLint:
- HTTPS:
- HTTPS:
- HTTP Strict Transport Security (HSTS):
- HTTP 嚴格的運輸安全 (HSTS):
- Cross Site Request Forgery (CSRF):
- 跨站點請求偽造 (CSRF):
- Cross Site Scripting (XSS):
- 跨網站腳本 (XSS):
- Content Type Options
- 內容類型選項
- X-Frame-Options (XFO)
- X-框架-選項 (XFO)
- Content Security Policy
- 內容安全策略
- Weight page:
- 頁面寬度:
- 🛠 網站頁面分析
- 📖 尺寸限制: 使網頁更輕
- 縮小:
- 縮小:
- 🛠 W3C 驗證器
-
Lazy loading:
-
懶加載
-
Cookie size: If you are using cookies be sure each cookie doesn't exceed 4096 bytes and your domain name doesn't have more than 20 cookies.
-
Cookie 大小: 如果你使用 cookies 確定每個 cookie 不超過 4096 位元組以及你的網域名稱沒有多於 20 個 cookies.
- Third party components:
- 第三方組件:
- 📖 以下技術說明
- DNS resolution:
dns-prefetch. - DNS 決議案:
dns-prefetch期間.
<link rel="dns-prefetch" href="https://example.com">- Preconnection:
preconnect. - 預連接:
preconnect期間.
<link rel="preconnect" href="https://example.com">- Prefetching:
prefetch. - 預拿取:
prefetch期間.
<link rel="prefetch" href="image.png">- Preloading:
<body>) in advance usingpreload. - 預加載:
<body>的末尾) 在提前使用preload中.
<link rel="preload" href="app.js">- Google PageSpeed:
- Google 頁面速度:
注意: 你可以觀看播放列表 A11ycasts with Rob Dodson 📹
- Progressive enhancement:
- 漸進增強:
- Color contrast:
- 顏色對比:
- 🛠 對比率
- H1:
- H1:
- Headings:
- 內容標題:
- Role banner:
<header>hasrole="banner". - 旗幟角色:
<header>有role="banner". - Role navigation:
<nav>hasrole="navigation". - 導航角色:
<nav>有role="navigation". - Role main:
<main>hasrole="main". - 主要角色:
<main>hasrole="main".
- Specific HTML5 input types are used:
- 具體 HTML5 輸入類型被使用:
- 📖 行動版輸入類型
- Label:
aria-labelinstead. - Label:
aria-label取代.
- Accessibility standards testing:
- 易用性標準檢測:
- 🛠 Wave 檢測
- Keyboard navigation:
- 鍵盤導航:
- Screen-reader:
- 螢幕-渲染:
- Focus style:
- 焦點樣式:
- Google Analytics:
- Google 分析:
- Headings logic:
- 標題邏輯:
- sitemap.xml:
- sitemap.xml:
- robots.txt:
- robots.txt:
- 🛠 檢驗你的 robots.txt 透過 Google 機器人檢驗工具
- Structured Data:
- 結構化數據:
- 📖 簡介結構化數據 - 搜尋 - Google 開發者
- 🛠 檢測你的頁面用這個 結構化數據檢測工具
- 🛠 完整的詞彙表可用作結構化數據. Schema.org Full Heirarchy
- Sitemap HTML:
- Sitemap HTML:
The Front-End Checklist is also available in other languages. Thanks for all translators and their awesome work! 前端檢查清單也提供其他語言版本. 感謝所有的翻譯和他們棒極了的工作
- 🇯🇵 日本: miya0001/Front-End-Checklist
- 🇪🇸 西班牙: eoasakura/Front-End-Checklist-ES
- 🇨🇳 中國: JohnsenZhou/Front-End-Checklist
- 🇰🇷 南韓: kesuskim/Front-End-Checklist
- 🇧🇷 葡萄牙文: jcezarms/Front-End-Checklist
- 🇻🇳 越南: euclid1990/Front-End-Checklist
- 🇹🇼 台灣: EngineLin/Front-End-Checklist
If you want to show you are following the rules of the Front-End Checklist, put this badge on your README file! 如果您想顯示您遵循前端檢查清單的規定，請將此徽章放在 README 檔案上！
➔
[](https://github.com/thedaviddias/Front-End-Checklist/)Open an issue or a pull request to suggest changes or additions. 打開一個議題或是一個拉請求建議改變或是增加.
The Front-End Checklist repository consists of two branches: The Front-End Checklist 資料庫由兩個分支組成:
This branch consists of the README.md file that is automatically reflected on the Front-End Checklist website.
該分支由 README.md 文件組成被自動反映在 [前端檢查清單] 網站上(http://frontendchecklist.com/) .
This branch will be used to make some significant changes to the structure, content if needed. It is preferable to use the master branch to fix small errors or add a new item. 這個分支將被用來做一些重要的事情改變結構, 內容如果需要. 它是優選使用主分支為了修理小錯誤或是增加新項目.
Check out all the super awesome contributors. 看看所有超級棒的 貢獻者.
If you have any question or suggestion, don't hesitate to use Gitter or Twitter: 如果您有任何問題或建議, 不要猶豫使用 Gitter 或是 Twitter:
