You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by ha...@apache.org on 2017/10/13 13:04:26 UTC
[31/51] [abbrv] incubator-weex-site git commit: update file structure
and fix responsive styles
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/web-standards.en.md
----------------------------------------------------------------------
diff --git a/_drafts/web-standards.en.md b/_drafts/web-standards.en.md
new file mode 100644
index 0000000..906ff76
--- /dev/null
+++ b/_drafts/web-standards.en.md
@@ -0,0 +1,584 @@
+---
+title: Web standards
+type: references
+order: 8
+version: 2.1
+has_chapter_content: true
+---
+
+# Web standards
+
+## HTML
+
+refs: https://www.advancedwebranking.com/html/ 2016-12-11
+
+### Overview
+
+| percentage | name | supported |
+| ---- | ---- | ---- |
+| 98.1% | `<head>` | - |
+| 97.9% | `<body>` | - |
+| 97.9% | `<html>` | - |
+| 97% | `<title>` | - |
+| 93.9% | `<meta>` | - |
+| 89.9% | `<div>` | ✓ |
+| 89.6% | `<a>` | ✓ |
+| 88.5% | `<script>` | ✓ |
+| 86.5% | `<link>` | - |
+| 86.3% | `<img>` | ✓ |
+| 81.5% | `<p>` | - (can be customized) |
+| 75.6% | `<span>` | - (can be customized) |
+| 73.8% | `<li>` | - (can be customized) |
+| 73.7% | `<ul>` | - (can be customized) |
+| 70.3% | `<br>` | ✕ |
+| 60.4% | `<style>` | ✓ |
+| 55.8% | `<h1>` | - (can be customized) |
+| 52.7% | `<h2>` | - (can be customized) |
+| 48.4% | `<input>` | ✓ |
+| 46.9% | `<form>` | ✕ |
+| 44.3% | `<strong>` | - (can be customized) |
+| 43.1% | `<h3>` | - (can be customized) |
+| 30.9% | `<table>` | ✕ |
+| 30.3% | `<tr>` | ✕ |
+| 30.2% | `<td>` | ✕ |
+
+### Forms
+
+| percentage | name | supported |
+| ---- | ---- | ---- |
+| 49.5% | `<option>` | ✕ |
+| 30.2% | `<input>` | ✓ |
+| 16.6% | > `[type="hidden"]` | - |
+| 8% | > `[type="text"]` | ✓ |
+| 4.2% | > `[type="submit"]` | - |
+| 2% | > `[type="checkbox"]` | - (`<switch>`) |
+| 1.2% | > `[type="email"]` | ✓ |
+| 1.1% | > `[type="radio"]` | ✕ |
+| 0.9% | > `[type="image"]` | - |
+| 0.8% | > `[type="button"]` | - |
+| 0.6% | > `[type="search"]` | ✕ |
+| 0.6% | > `[type="password"]` | ✓ |
+| 0.1% | > `[type="tel"]` | ✓ |
+| 0.1% | > `[type="number"]` | ✓ |
+| 0% | > `[type="reset"]` | - |
+| 0% | > `[type="file"]` | ✕ |
+| 0% | > `[type="date"]` | ✓ |
+| 0% | > `[type="url"]` | ✓ |
+| 0% | > `[type="range"]` | ✕ |
+| 0% | > `[type="color"]` | ✕ |
+| 0% | > `[type="time"]` | ✓ |
+| 0% | > `[type="datetime-local"]` | ✕ |
+| 7.2% | `<label>` | - |
+| 6.1% | `<form>` | - |
+| 3.7% | `<button>` | - (can be customized) |
+| 2.6% | > `[type="button"]` | - |
+| 1.3% | > `[type="submit"]` | - |
+| 0% | > `[type="reset"]` | - |
+| 1.9% | `<select>` | ✕ |
+| 0.7% | `<textarea>` | ✓ |
+| 0.5% | `<fieldset>` | - |
+| 0.1% | `<optgroup>` | ✕ |
+| 0.1% | `<legend>` | - |
+| 0% | `<progress>` | ✕ |
+| 0% | `<datalist>` | - |
+| 0% | `<output>` | - |
+| 0% | `<meter>` | - |
+
+## CSS Properties
+
+refs: https://www.chromestatus.com/metrics/feature/popularity 2016-12-11
+
+| percentage | name | supported |
+| ---- | ---- | ---- |
+| 90.5115% | display | ✕ `flex` only |
+| 89.8243% | margin | ✓ (not support combo) |
+| 88.7012% | width | ✓ |
+| 88.6468% | overflow | ✓ iOS only, `hidden` only for Android |
+| 88.6432% | background-color | ✓ |
+| 88.0803% | height | ✓ |
+| 87.7648% | font-size | ✓ |
+| 87.3837% | padding | ✓ |
+| 87.2721% | color | ✓ |
+| 86.9788% | text-align | ✓ |
+| 86.6841% | position | ✓ `relative` by default, `static` not supported |
+| 86.6039% | font-family | ✓ |
+| 86.5943% | font-weight | ✓ |
+| 85.0072% | opacity | ✓ |
+| 80.6911% | max-width | ✕ |
+| 79.4476% | box-sizing | ✕ `border-box` only |
+| 75.7623% | max-height | ✕ |
+| 74.9939% | webkit-user-select | ✕ |
+| 57.0292% | align-items | ✓ |
+| 56.8182% | justify-content | ✓ `space-around` not supported well in browser |
+| 50.5941% | flex-direction | ✓ |
+| 48.5052% | border | ✓ |
+| 47.5161% | top | ✓ |
+| 46.9136% | background | ✕ |
+| 46.1552% | cursor | ✕ |
+| 46.1443% | margin-left | ✓ |
+| 46.0956% | left | ✓ |
+| 46.0848% | text-decoration | ✓ |
+| 45.9575% | float | ✕ |
+| 45.8391% | border-bottom | ✓ |
+| 45.7639% | padding-left | ✓ |
+| 45.7128% | margin-top | ✓ |
+| 45.7013% | line-height | ✓ |
+| 45.5836% | background-image | ✕ |
+| 45.0837% | z-index | ✕ |
+| 45.0649% | right | ✓ |
+| 45.0516% | margin-bottom | ✓ |
+| 45.0459% | white-space | ✕ |
+| 44.8710% | margin-right | ✓ |
+| 44.8476% | vertical-align | ✕ |
+| 44.6306% | padding-top | ✓ |
+| 44.1466% | border-radius | ✓ |
+| 44.0136% | border-top | ✓ |
+| 43.9815% | padding-bottom | ✓ |
+| 43.9392% | padding-right | ✓ |
+| 43.8539% | visibility | ✕ |
+| 43.4306% | background-position | ✕ |
+| 43.4098% | background-repeat | ✕ |
+| 43.0391% | clear | ✕ |
+| 42.9100% | bottom | ✓ |
+| 42.2092% | content | ✕ |
+| 42.0690% | box-shadow | ✕ |
+| 41.9004% | border-color | ✓ |
+| 41.7341% | outline | ✕ |
+| 41.4297% | border-right | ✓ |
+| 41.2605% | border-left | ✓ |
+| 41.1127% | min-height | ✕ |
+| 41.0736% | font-style | ✓ |
+| 41.0523% | min-width | ✕ |
+| 40.4298% | list-style | ✕ |
+| 39.7341% | font | ✕ |
+| 38.8999% | background-size | ✕ |
+| 38.7811% | border-width | ✓ |
+| 38.7718% | border-collapse | ✕ |
+| 37.8110% | border-style | ✓ |
+| 37.4962% | text-overflow | ✓ must work with `lines` |
+| 37.3471% | text-transform | ✕ |
+| 37.2154% | transition | ✕ |
+| 36.5155% | overflow-y | ✕ |
+| 36.3025% | transform | ✕ |
+| 36.2488% | text-indent | ✕ |
+| 35.5075% | text-shadow | ✕ |
+| 34.7607% | webkit-appearance | ✕ |
+| 34.1925% | list-style-type | ✕ |
+| 34.0238% | border-spacing | ✕ |
+| 33.6664% | word-wrap | ✕ |
+| 31.9961% | overflow-x | ✕ |
+| 31.9922% | zoom | ✕ |
+| 31.2495% | border-bottom-left-radius | ✕ |
+| 31.1306% | pointer-events | ✕ |
+| 31.1229% | border-top-left-radius | ✕ |
+| 30.2131% | border-bottom-color | ✓ |
+| 29.9608% | border-top-color | ✓ |
+| 29.4297% | border-bottom-right-radius | ✕ |
+| 29.2668% | border-top-right-radius | ✕ |
+| 28.6489% | letter-spacing | ✕ |
+| 27.8327% | animation | ✕ |
+| 26.6738% | border-right-width | ✓ |
+| 26.0169% | src | ✕ |
+| 25.2661% | clip | ✕ |
+| 25.2512% | webkit-font-smoothing | ✕ |
+| 25.1971% | border-bottom-width | ✓ |
+| 25.0246% | border-right-color | ✓ |
+| 24.7790% | direction | ✕ |
+| 24.4094% | webkit-tap-highlight-color | ✕ |
+| 23.9751% | border-left-color | ✓ |
+| 23.9321% | border-top-width | ✓ |
+| 23.7902% | fill | ✕ |
+| 23.2617% | border-left-width | ✓ |
+| 22.7278% | table-layout | ✕ |
+| 21.5766% | word-break | ✕ |
+| 20.4319% | background-clip | ✕ |
+| 19.3198% | transform-origin | ✕ |
+| 18.9233% | filter | ✕ |
+| 17.7879% | resize | ✕ |
+| 16.2501% | flex | ✕ |
+| 15.1656% | font-variant | ✕ |
+| 14.9181% | text-rendering | ✕ |
+| 14.7125% | webkit-filter | ✕ |
+| 14.5263% | transition-duration | ✕ |
+| 14.3966% | transition-property | ✕ |
+| 14.2124% | webkit-box-orient | ✕ |
+| 13.5432% | outline-offset | ✕ |
+| 12.9300% | transition-timing-function | ✕ |
+| 12.2788% | unicode-range | ✕ |
+| 12.0880% | word-spacing | ✕ |
+| 11.9124% | quotes | ✕ |
+| 11.6800% | border-bottom-style | ✓ |
+| 11.4263% | webkit-background-clip | ✕ |
+| 11.0070% | flex-grow | ✕ |
+| 10.5925% | backface-visibility | ✕ |
+| 10.4417% | animation-name | ✕ |
+| 10.4302% | stroke | ✕ |
+| 10.4144% | animation-duration | ✕ |
+| 10.2804% | touch-action | ✕ |
+| 9.9663% | list-style-position | ✕ |
+| 9.8662% | order | ✕ |
+| 9.7770% | outline-width | ✕ |
+| 9.7504% | transition-delay | ✕ |
+| 9.4689% | border-top-style | ✓ |
+| 9.3474% | webkit-box-pack | ✕ |
+| 9.3078% | webkit-box-align | ✕ |
+| 9.2375% | page-break-inside | ✕ |
+| 9.1898% | webkit-line-clamp | ✕ |
+| 8.9350% | list-style-image | ✕ |
+| 8.8339% | page-break-after | ✕ |
+| 8.5735% | speak | ✕ |
+| 8.4754% | unicode-bidi | ✕ |
+| 8.4307% | animation-timing-function | ✕ |
+| 8.1464% | webkit-box-flex | ✕ |
+| 8.0048% | orphans | ✕ |
+| 7.9947% | widows | ✕ |
+| 7.6671% | flex-wrap | ✓ not supported well in browser |
+| 7.5756% | animation-fill-mode | ✕ |
+| 7.4163% | animation-delay | ✕ |
+| 7.3284% | border-left-style | ✓ |
+| 7.1586% | outline-color | ✕ |
+| 6.9102% | flex-shrink | ✕ |
+| 6.7754% | perspective | ✕ |
+| 6.7748% | border-right-style | ✓ |
+| 6.4619% | outline-style | ✕ |
+| 6.0382% | animation-iteration-count | ✕ |
+| 5.9838% | background-origin | ✕ |
+| 5.9714% | fill-opacity | ✕ |
+| 5.9357% | will-change | ✕ |
+| 5.3740% | stroke-width | ✕ |
+| 5.3172% | transform-style | ✕ |
+| 5.2608% | overflow-wrap | ✕ |
+| 5.1730% | background-attachment | ✕ |
+| 4.9039% | counter-increment | ✕ |
+| 4.5950% | counter-reset | ✕ |
+| 4.5031% | align-self | ✕ |
+| 4.4109% | webkit-box-ordinal-group | ✕ |
+| 4.4046% | webkit-animation-direction | ✕ |
+| 3.7598% | background-position-x | ✕ |
+| 3.6867% | border-image | ✕ |
+| 3.6601% | background-position-y | ✕ |
+| 3.5749% | webkit-user-drag | ✕ |
+| 3.3376% | flex-basis | ✕ |
+| 3.1840% | align-content | ✕ |
+| 3.1832% | flex-flow | ✕ |
+| 3.1774% | image-rendering | ✕ |
+| 3.0879% | webkit-margin-start | ✕ |
+| 2.9551% | font-stretch | ✕ |
+| 2.8934% | empty-cells | ✕ |
+| 2.7619% | webkit-margin-after | ✕ |
+| 2.7220% | perspective-origin | ✕ |
+| 2.6125% | webkit-margin-end | ✕ |
+| 2.6089% | column-count | ✕ |
+| 2.5880% | webkit-text-fill-color | ✕ |
+| 2.5466% | webkit-box-direction | ✕ |
+| 2.4618% | font-feature-settings | ✕ |
+| 2.3959% | webkit-mask-image | ✕ |
+| 2.3431% | webkit-padding-end | ✕ |
+| 2.2555% | stroke-dasharray | ✕ |
+| 2.1788% | user-select | ✕ |
+| 2.1679% | object-fit | ✕ |
+| 2.0643% | column-gap | ✕ |
+| 2.0459% | text-size-adjust | ✕ |
+| 2.0253% | caption-side | ✕ |
+| 1.9695% | stroke-dashoffset | ✕ |
+| 1.7923% | stroke-linecap | ✕ |
+| 1.7861% | animation-direction | ✕ |
+| 1.7559% | webkit-font-feature-settings | ✕ |
+| 1.7404% | stroke-opacity | ✕ |
+| 1.5926% | stroke-miterlimit | ✕ |
+| 1.5786% | fill-rule | ✕ |
+| 1.4859% | webkit-user-modify | ✕ |
+| 1.3439% | webkit-border-image | ✕ |
+| 1.3091% | animation-play-state | ✕ |
+| 1.2676% | contain | ✕ |
+| 1.2029% | webkit-padding-start | ✕ |
+| 1.1840% | webkit-margin-before | ✕ |
+| 1.1269% | page-break-before | ✕ |
+| 1.1222% | webkit-margin-top-collapse | ✕ |
+| 1.0418% | columns | ✕ |
+| 1.0354% | webkit-mask-size | ✕ |
+| 0.9650% | border-image-slice | ✕ |
+| 0.9425% | stop-color | ✕ |
+| 0.9408% | webkit-mask-repeat | ✕ |
+| 0.9125% | webkit-box-lines | ✕ |
+| 0.8804% | webkit-column-break-inside | ✕ |
+| 0.8752% | size | ✕ |
+| 0.8334% | font-kerning | ✕ |
+| 0.8034% | stroke-linejoin | ✕ |
+| 0.7869% | tab-size | ✕ |
+| 0.7689% | break-inside | ✕ |
+| 0.7589% | webkit-text-stroke-width | ✕ |
+| 0.7353% | column-width | ✕ |
+| 0.6924% | webkit-mask-position | ✕ |
+| 0.6869% | border-image-width | ✕ |
+| 0.6323% | border-image-repeat | ✕ |
+| 0.5994% | border-image-outset | ✕ |
+| 0.5885% | all | ✕ |
+| 0.5859% | webkit-text-stroke-color | ✕ |
+| 0.5435% | webkit-print-color-adjust | ✕ |
+| 0.5420% | webkit-text-stroke | ✕ |
+| 0.5195% | writing-mode | ✕ |
+| 0.4741% | clip-rule | ✕ |
+| 0.4685% | webkit-clip-path | ✕ |
+| 0.4578% | text-anchor | ✕ |
+| 0.4535% | shape-rendering | ✕ |
+| 0.4526% | webkit-column-break-before | ✕ |
+| 0.4494% | clip-path | ✕ |
+| 0.4452% | webkit-mask | ✕ |
+| 0.4393% | mix-blend-mode | ✕ |
+| 0.4166% | text-align-last | ✕ |
+| 0.4033% | column-rule | ✕ |
+| 0.3990% | webkit-mask-box-image | ✕ |
+| 0.3989% | font-variant-ligatures | ✕ |
+| 0.3881% | column-fill | ✕ |
+| 0.3865% | webkit-line-break | ✕ |
+| 0.3857% | border-image-source | ✕ |
+| 0.3528% | stop-opacity | ✕ |
+| 0.3075% | webkit-perspective-origin-y | ✕ |
+| 0.3054% | webkit-perspective-origin-x | ✕ |
+| 0.2994% | webkit-writing-mode | ✕ |
+| 0.2717% | dominant-baseline | ✕ |
+| 0.2634% | column-rule-color | ✕ |
+| 0.2586% | webkit-box-decoration-break | ✕ |
+| 0.2467% | webkit-text-security | ✕ |
+| 0.2374% | webkit-background-origin | ✕ |
+| 0.2146% | font-variant-caps | ✕ |
+| 0.2005% | column-rule-style | ✕ |
+| 0.1976% | shape-outside | ✕ |
+| 0.1971% | webkit-padding-before | ✕ |
+| 0.1896% | break-after | ✕ |
+| 0.1782% | webkit-padding-after | ✕ |
+| 0.1774% | text-orientation | ✕ |
+| 0.1747% | webkit-text-orientation | ✕ |
+| 0.1655% | mask | ✕ |
+| 0.1626% | alignment-baseline | ✕ |
+| 0.1572% | page | ✕ |
+| 0.1530% | webkit-column-break-after | ✕ |
+| 0.1521% | webkit-box-reflect | ✕ |
+| 0.1504% | webkit-text-emphasis-color | ✕ |
+| 0.1499% | object-position | ✕ |
+| 0.1470% | break-before | ✕ |
+| 0.1455% | webkit-margin-collapse | ✕ |
+| 0.1452% | baseline-shift | ✕ |
+| 0.1451% | hyphens | ✕ |
+| 0.1309% | rx | ✕ |
+| 0.1304% | ry | ✕ |
+| 0.1256% | background-blend-mode | ✕ |
+| 0.1136% | font-variant-numeric | ✕ |
+| 0.1135% | background-repeat-x | ✕ |
+| 0.1123% | background-repeat-y | ✕ |
+| 0.1086% | webkit-text-emphasis | ✕ |
+| 0.1058% | webkit-rtl-ordering | ✕ |
+| 0.1040% | column-rule-width | ✕ |
+| 0.1036% | isolation | ✕ |
+| 0.1002% | webkit-highlight | ✕ |
+| 0.0843% | webkit-transform-origin-y | ✕ |
+| 0.0786% | webkit-transform-origin-x | ✕ |
+| 0.0770% | webkit-app-region | ✕ |
+| 0.0685% | column-span | ✕ |
+| 0.0653% | r | ✕ |
+| 0.0611% | y | ✕ |
+| 0.0602% | x | ✕ |
+| 0.0555% | webkit-border-vertical-spacing | ✕ |
+| 0.0545% | webkit-border-horizontal-spacing | ✕ |
+| 0.0542% | webkit-border-start-width | ✕ |
+| 0.0450% | webkit-border-start-color | ✕ |
+| 0.0424% | webkit-border-after-width | ✕ |
+| 0.0424% | webkit-border-before-width | ✕ |
+| 0.0423% | webkit-border-end-width | ✕ |
+| 0.0351% | marker | ✕ |
+| 0.0349% | webkit-border-end-color | ✕ |
+| 0.0347% | webkit-border-after-color | ✕ |
+| 0.0347% | webkit-border-before-color | ✕ |
+| 0.0342% | mask-type | ✕ |
+| 0.0328% | color-interpolation-filters | ✕ |
+| 0.0325% | webkit-border-end | ✕ |
+| 0.0319% | vector-effect | ✕ |
+| 0.0307% | color-rendering | ✕ |
+
+## CSS Units and Values
+
+refs: https://drafts.csswg.org/css-values/ 2016-12-11
+
+### Textual
+
+* pre-defined keywords
+ * CSS-wide keywords
+ * `initial`
+ * `inherit`
+ * `unset`
+* `<custom-ident>`: author-defined identifiers ✓
+* `<string>`: quoted strings (`"xxx"`)
+* `<url>`: resourec locators (`url()`)
+
+### Numeric
+
+* `<integer>` ✓
+* `<number>` ✓
+* `<percentage>`
+
+### Length `<length>`
+
+* relative
+ * font-relative
+ * `em`
+ * `ex`
+ * `ch`
+ * `ic`
+ * `rem` ✓🔧
+ * viewport-percentage
+ * `vw` ✓🔧
+ * `vh` ✓🔧
+ * `vi`
+ * `vb`
+ * `vmin` ✓🔧
+ * `vmax` ✓🔧
+* absolute
+ * `cm` ✓🔧
+ * `mm` ✓🔧
+ * `Q` ✓🔧
+ * `in` ✓🔧
+ * `pc` ✓🔧
+ * `pt` ✓🔧
+ * `px` autofixed to number
+
+### Quantities
+
+* `<angle>`
+ * `deg`
+ * `grad`
+ * `rad`
+ * `turn`
+* `<time>`
+ * `s`
+ * `ms`
+* `<frequency>`
+ * `Hz`
+ * `kHz`
+* `<resolution>`
+ * `dpi`
+ * `dpcm`
+ * `dppx`
+
+### Elsewhere
+
+* `<color>` ✓
+* `<image>`
+* `<position>`
+
+### Functional
+
+* `calc()`
+* `toggle()`
+* `attr()`
+
+## JS APIs
+
+refs: https://www.w3.org/standards/techs/js 2016-12-11
+
+### Completed Work
+
+#### Standards
+
+| last update | spec | supported |
+| ---- | ---- | ---- |
+| 2016-11-17 | Media Source Extensions™ | - (media related) |
+| 2016-11-08 | Geolocation API Specification 2nd Edition | ✕ developing |
+| 2016-10-27 | Pointer Lock | - |
+| 2016-10-18 | Vibration API (Second Edition) | ✕ |
+| 2016-04-19 | Web Storage (Second Edition) | ✓ async `storage` module |
+| 2015-10-22 | Web Notifications | ✕ |
+| 2015-05-19 | HTML5 Web Messaging | ✕ `BroadcastChannel` developing |
+| 2015-02-24 | Pointer Events | - |
+| 2015-02-10 | Vibration API | ✕ |
+| 2015-02-03 | Server-Sent Events | ✕ |
+| 2015-01-08 | Indexed Database API | ✕ |
+| 2014-03-13 | Metadata API for Media Resources 1.0 | - (media related) |
+| 2014-02-11 | Progress Events | ✕ |
+| 2014-01-16 | JSON-LD 1.0 Processing Algorithms and API | - |
+| 2013-12-12 | Performance Timeline | - (perf related) |
+| 2013-12-12 | User Timing | - (perf related) |
+| 2013-10-31 | Widget Interface | - |
+| 2013-10-29 | Page Visibility (Second Edition) | ✕ `onviewappear`/`onviewdisappear` |
+| 2013-10-10 | Touch Events | ✕ |
+| 2013-02-21 | Selectors API Level 1 | - |
+| 2012-12-17 | Navigation Timing | - (perf related) |
+| 2012-12-17 | High Resolution Time | - (perf related) |
+| 2008-12-22 | Element Traversal Specification | - |
+
+### Drafts
+
+#### Proposed Recommendations
+
+| last update | spec | supported |
+| ---- | ---- | ---- |
+| 2016-09-15 | WebIDL Level 1 | - |
+
+#### Candidate Recommendations
+
+| last update | spec | supported |
+| ---- | ---- | ---- |
+| 2016-12-08 | Performance Timeline Level 2 | - (perf related) |
+| 2016-11-22 | Page Visibility Level 2 | ✕ `onviewappear`/`onviewdisappear` |
+| 2016-11-01 | High Resolution Time Level 2 | - (perf related) |
+| 2016-08-18 | DeviceOrientation Event Specification | ✕ |
+| 2016-07-21 | Resource Timing Level 1 | - (perf related) |
+| 2016-07-14 | Presentation API | - |
+| 2016-07-07 | Battery Status API | ✕ |
+| 2016-07-05 | Encrypted Media Extensions | - |
+| 2016-05-19 | Media Capture and Streams | - (media related) |
+| 2014-12-11 | Web Cryptography API | - |
+| 2014-09-09 | HTML Media Capture | - (media related) |
+| 2012-09-20 | The WebSocket API | ✕ |
+
+#### Last Call Drafts
+
+| last update | spec | supported |
+| ---- | ---- | ---- |
+| 2011-12-01 | Geolocation API Specification Level 2 | ✕ |
+
+#### Other Working Drafts
+
+| last update | spec | supported |
+| ---- | ---- | ---- |
+| 2016-12-09 | MediaStream Image Capture | - (media related) |
+| 2016-12-06 | MediaStream Recording | - (media related) |
+| 2016-12-06 | Selection API | ✕ |
+| 2016-12-05 | Input Events | ✕ |
+| 2016-12-02 | Gamepad | - |
+| 2016-11-29 | WebDriver | - |
+| 2016-11-24 | WebRTC 1.0: Real-time Communication Between Browsers | ✕ |
+| 2016-11-22 | Pointer Lock 2.0 | - |
+| 2016-11-07 | Remote Playback API | - (media related) |
+| 2016-11-03 | Resource Timing Level 2 | - (perf related) |
+| 2016-11-02 | Audio Output Devices API | - (media related) |
+| 2016-11-01 | Indexed Database API 2.0 | ✕ |
+| 2016-11-01 | User Timing Level 2 | - (perf related) |
+| 2016-10-31 | The Screen Orientation API | ✕ |
+| 2016-10-31 | High Resolution Time Level 3 | - (perf related) |
+| 2016-10-24 | UI Events KeyboardEvent code Values | - |
+| 2016-10-24 | UI Events KeyboardEvent key Values | - |
+| 2016-10-11 | Service Workers 1 | ✕ |
+| 2016-09-21 | Identifiers for WebRTC's Statistics API | - |
+| 2016-09-13 | Accelerometer Sensor | ✕ |
+| 2016-09-13 | Gyroscope Sensor | ✕ |
+| 2016-09-13 | Magnetometer Sensor | ✕ |
+| 2016-08-30 | Ambient Light Sensor | ✕ |
+| 2016-08-30 | Media Capture from DOM Elements | - (media related) |
+| 2016-08-30 | Generic Sensor API | ✕ |
+| 2016-08-03 | Wake Lock API | ✕ |
+| 2016-07-19 | Proximity Sensor | ✕ |
+| 2016-07-19 | Pointer Events - Level 2 | - |
+| 2016-07-14 | Screen Capture | ✕ |
+| 2016-07-12 | Media Capture Depth Stream Extensions | - (media related) |
+| 2016-05-17 | Cooperative Scheduling of Background Tasks | ✕ |
+| 2016-04-22 | Navigation Timing Level 2 | - (perf related) |
+| 2016-04-03 | Clipboard API and events | ✕ `clipboard` module |
+| 2015-12-15 | Push API | ✕ |
+| 2015-12-08 | Web Audio API | - (media related) |
+| 2015-10-15 | FindText API | - |
+| 2015-09-24 | Web Workers | ✕ |
+| 2015-04-21 | File API | ✕ |
+| 2014-02-20 | Network Service Discovery | ✕ |
+| 2012-03-06 | MediaStream Capture Scenarios | - (media related) |
+| 2011-12-15 | Audio Processing API | - (media related) |
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/web-standards.md
----------------------------------------------------------------------
diff --git a/_drafts/web-standards.md b/_drafts/web-standards.md
new file mode 100644
index 0000000..3125796
--- /dev/null
+++ b/_drafts/web-standards.md
@@ -0,0 +1,585 @@
+---
+title: Web 标准
+type: references
+group: API
+order: 2.7
+version: 2.1
+has_chapter_content: true
+---
+
+# Weex 中的 Web 标准
+
+## HTML
+
+refs: https://www.advancedwebranking.com/html/ 2016-12-11
+
+### Overview
+
+| percentage | name | supported |
+| ---- | ---- | ---- |
+| 98.1% | `<head>` | - |
+| 97.9% | `<body>` | - |
+| 97.9% | `<html>` | - |
+| 97% | `<title>` | - |
+| 93.9% | `<meta>` | - |
+| 89.9% | `<div>` | ✓ |
+| 89.6% | `<a>` | ✓ |
+| 88.5% | `<script>` | ✓ |
+| 86.5% | `<link>` | - |
+| 86.3% | `<img>` | ✓ |
+| 81.5% | `<p>` | - (can be customized) |
+| 75.6% | `<span>` | - (can be customized) |
+| 73.8% | `<li>` | - (can be customized) |
+| 73.7% | `<ul>` | - (can be customized) |
+| 70.3% | `<br>` | ✕ |
+| 60.4% | `<style>` | ✓ |
+| 55.8% | `<h1>` | - (can be customized) |
+| 52.7% | `<h2>` | - (can be customized) |
+| 48.4% | `<input>` | ✓ |
+| 46.9% | `<form>` | ✕ |
+| 44.3% | `<strong>` | - (can be customized) |
+| 43.1% | `<h3>` | - (can be customized) |
+| 30.9% | `<table>` | ✕ |
+| 30.3% | `<tr>` | ✕ |
+| 30.2% | `<td>` | ✕ |
+
+### Forms
+
+| percentage | name | supported |
+| ---- | ---- | ---- |
+| 49.5% | `<option>` | ✕ |
+| 30.2% | `<input>` | ✓ |
+| 16.6% | > `[type="hidden"]` | - |
+| 8% | > `[type="text"]` | ✓ |
+| 4.2% | > `[type="submit"]` | - |
+| 2% | > `[type="checkbox"]` | - (`<switch>`) |
+| 1.2% | > `[type="email"]` | ✓ |
+| 1.1% | > `[type="radio"]` | ✕ |
+| 0.9% | > `[type="image"]` | - |
+| 0.8% | > `[type="button"]` | - |
+| 0.6% | > `[type="search"]` | ✕ |
+| 0.6% | > `[type="password"]` | ✓ |
+| 0.1% | > `[type="tel"]` | ✓ |
+| 0.1% | > `[type="number"]` | ✓ |
+| 0% | > `[type="reset"]` | - |
+| 0% | > `[type="file"]` | ✕ |
+| 0% | > `[type="date"]` | ✓ |
+| 0% | > `[type="url"]` | ✓ |
+| 0% | > `[type="range"]` | ✕ |
+| 0% | > `[type="color"]` | ✕ |
+| 0% | > `[type="time"]` | ✓ |
+| 0% | > `[type="datetime-local"]` | ✕ |
+| 7.2% | `<label>` | - |
+| 6.1% | `<form>` | - |
+| 3.7% | `<button>` | - (can be customized) |
+| 2.6% | > `[type="button"]` | - |
+| 1.3% | > `[type="submit"]` | - |
+| 0% | > `[type="reset"]` | - |
+| 1.9% | `<select>` | ✕ |
+| 0.7% | `<textarea>` | ✓ |
+| 0.5% | `<fieldset>` | - |
+| 0.1% | `<optgroup>` | ✕ |
+| 0.1% | `<legend>` | - |
+| 0% | `<progress>` | ✕ |
+| 0% | `<datalist>` | - |
+| 0% | `<output>` | - |
+| 0% | `<meter>` | - |
+
+## CSS Properties
+
+refs: https://www.chromestatus.com/metrics/feature/popularity 2016-12-11
+
+| percentage | name | supported |
+| ---- | ---- | ---- |
+| 90.5115% | display | ✕ `flex` only |
+| 89.8243% | margin | ✓ (not support combo) |
+| 88.7012% | width | ✓ |
+| 88.6468% | overflow | ✓ iOS only, `hidden` only for Android |
+| 88.6432% | background-color | ✓ |
+| 88.0803% | height | ✓ |
+| 87.7648% | font-size | ✓ |
+| 87.3837% | padding | ✓ |
+| 87.2721% | color | ✓ |
+| 86.9788% | text-align | ✓ |
+| 86.6841% | position | ✓ `relative` by default, `static` not supported |
+| 86.6039% | font-family | ✓ |
+| 86.5943% | font-weight | ✓ |
+| 85.0072% | opacity | ✓ |
+| 80.6911% | max-width | ✕ |
+| 79.4476% | box-sizing | ✕ `border-box` only |
+| 75.7623% | max-height | ✕ |
+| 74.9939% | webkit-user-select | ✕ |
+| 57.0292% | align-items | ✓ |
+| 56.8182% | justify-content | ✓ `space-around` not supported well in browser |
+| 50.5941% | flex-direction | ✓ |
+| 48.5052% | border | ✓ |
+| 47.5161% | top | ✓ |
+| 46.9136% | background | ✕ |
+| 46.1552% | cursor | ✕ |
+| 46.1443% | margin-left | ✓ |
+| 46.0956% | left | ✓ |
+| 46.0848% | text-decoration | ✓ |
+| 45.9575% | float | ✕ |
+| 45.8391% | border-bottom | ✓ |
+| 45.7639% | padding-left | ✓ |
+| 45.7128% | margin-top | ✓ |
+| 45.7013% | line-height | ✓ |
+| 45.5836% | background-image | ✕ |
+| 45.0837% | z-index | ✕ |
+| 45.0649% | right | ✓ |
+| 45.0516% | margin-bottom | ✓ |
+| 45.0459% | white-space | ✕ |
+| 44.8710% | margin-right | ✓ |
+| 44.8476% | vertical-align | ✕ |
+| 44.6306% | padding-top | ✓ |
+| 44.1466% | border-radius | ✓ |
+| 44.0136% | border-top | ✓ |
+| 43.9815% | padding-bottom | ✓ |
+| 43.9392% | padding-right | ✓ |
+| 43.8539% | visibility | ✕ |
+| 43.4306% | background-position | ✕ |
+| 43.4098% | background-repeat | ✕ |
+| 43.0391% | clear | ✕ |
+| 42.9100% | bottom | ✓ |
+| 42.2092% | content | ✕ |
+| 42.0690% | box-shadow | ✕ |
+| 41.9004% | border-color | ✓ |
+| 41.7341% | outline | ✕ |
+| 41.4297% | border-right | ✓ |
+| 41.2605% | border-left | ✓ |
+| 41.1127% | min-height | ✕ |
+| 41.0736% | font-style | ✓ |
+| 41.0523% | min-width | ✕ |
+| 40.4298% | list-style | ✕ |
+| 39.7341% | font | ✕ |
+| 38.8999% | background-size | ✕ |
+| 38.7811% | border-width | ✓ |
+| 38.7718% | border-collapse | ✕ |
+| 37.8110% | border-style | ✓ |
+| 37.4962% | text-overflow | ✓ must work with `lines` |
+| 37.3471% | text-transform | ✕ |
+| 37.2154% | transition | ✕ |
+| 36.5155% | overflow-y | ✕ |
+| 36.3025% | transform | ✕ |
+| 36.2488% | text-indent | ✕ |
+| 35.5075% | text-shadow | ✕ |
+| 34.7607% | webkit-appearance | ✕ |
+| 34.1925% | list-style-type | ✕ |
+| 34.0238% | border-spacing | ✕ |
+| 33.6664% | word-wrap | ✕ |
+| 31.9961% | overflow-x | ✕ |
+| 31.9922% | zoom | ✕ |
+| 31.2495% | border-bottom-left-radius | ✕ |
+| 31.1306% | pointer-events | ✕ |
+| 31.1229% | border-top-left-radius | ✕ |
+| 30.2131% | border-bottom-color | ✓ |
+| 29.9608% | border-top-color | ✓ |
+| 29.4297% | border-bottom-right-radius | ✕ |
+| 29.2668% | border-top-right-radius | ✕ |
+| 28.6489% | letter-spacing | ✕ |
+| 27.8327% | animation | ✕ |
+| 26.6738% | border-right-width | ✓ |
+| 26.0169% | src | ✕ |
+| 25.2661% | clip | ✕ |
+| 25.2512% | webkit-font-smoothing | ✕ |
+| 25.1971% | border-bottom-width | ✓ |
+| 25.0246% | border-right-color | ✓ |
+| 24.7790% | direction | ✕ |
+| 24.4094% | webkit-tap-highlight-color | ✕ |
+| 23.9751% | border-left-color | ✓ |
+| 23.9321% | border-top-width | ✓ |
+| 23.7902% | fill | ✕ |
+| 23.2617% | border-left-width | ✓ |
+| 22.7278% | table-layout | ✕ |
+| 21.5766% | word-break | ✕ |
+| 20.4319% | background-clip | ✕ |
+| 19.3198% | transform-origin | ✕ |
+| 18.9233% | filter | ✕ |
+| 17.7879% | resize | ✕ |
+| 16.2501% | flex | ✕ |
+| 15.1656% | font-variant | ✕ |
+| 14.9181% | text-rendering | ✕ |
+| 14.7125% | webkit-filter | ✕ |
+| 14.5263% | transition-duration | ✕ |
+| 14.3966% | transition-property | ✕ |
+| 14.2124% | webkit-box-orient | ✕ |
+| 13.5432% | outline-offset | ✕ |
+| 12.9300% | transition-timing-function | ✕ |
+| 12.2788% | unicode-range | ✕ |
+| 12.0880% | word-spacing | ✕ |
+| 11.9124% | quotes | ✕ |
+| 11.6800% | border-bottom-style | ✓ |
+| 11.4263% | webkit-background-clip | ✕ |
+| 11.0070% | flex-grow | ✕ |
+| 10.5925% | backface-visibility | ✕ |
+| 10.4417% | animation-name | ✕ |
+| 10.4302% | stroke | ✕ |
+| 10.4144% | animation-duration | ✕ |
+| 10.2804% | touch-action | ✕ |
+| 9.9663% | list-style-position | ✕ |
+| 9.8662% | order | ✕ |
+| 9.7770% | outline-width | ✕ |
+| 9.7504% | transition-delay | ✕ |
+| 9.4689% | border-top-style | ✓ |
+| 9.3474% | webkit-box-pack | ✕ |
+| 9.3078% | webkit-box-align | ✕ |
+| 9.2375% | page-break-inside | ✕ |
+| 9.1898% | webkit-line-clamp | ✕ |
+| 8.9350% | list-style-image | ✕ |
+| 8.8339% | page-break-after | ✕ |
+| 8.5735% | speak | ✕ |
+| 8.4754% | unicode-bidi | ✕ |
+| 8.4307% | animation-timing-function | ✕ |
+| 8.1464% | webkit-box-flex | ✕ |
+| 8.0048% | orphans | ✕ |
+| 7.9947% | widows | ✕ |
+| 7.6671% | flex-wrap | ✓ not supported well in browser |
+| 7.5756% | animation-fill-mode | ✕ |
+| 7.4163% | animation-delay | ✕ |
+| 7.3284% | border-left-style | ✓ |
+| 7.1586% | outline-color | ✕ |
+| 6.9102% | flex-shrink | ✕ |
+| 6.7754% | perspective | ✕ |
+| 6.7748% | border-right-style | ✓ |
+| 6.4619% | outline-style | ✕ |
+| 6.0382% | animation-iteration-count | ✕ |
+| 5.9838% | background-origin | ✕ |
+| 5.9714% | fill-opacity | ✕ |
+| 5.9357% | will-change | ✕ |
+| 5.3740% | stroke-width | ✕ |
+| 5.3172% | transform-style | ✕ |
+| 5.2608% | overflow-wrap | ✕ |
+| 5.1730% | background-attachment | ✕ |
+| 4.9039% | counter-increment | ✕ |
+| 4.5950% | counter-reset | ✕ |
+| 4.5031% | align-self | ✕ |
+| 4.4109% | webkit-box-ordinal-group | ✕ |
+| 4.4046% | webkit-animation-direction | ✕ |
+| 3.7598% | background-position-x | ✕ |
+| 3.6867% | border-image | ✕ |
+| 3.6601% | background-position-y | ✕ |
+| 3.5749% | webkit-user-drag | ✕ |
+| 3.3376% | flex-basis | ✕ |
+| 3.1840% | align-content | ✕ |
+| 3.1832% | flex-flow | ✕ |
+| 3.1774% | image-rendering | ✕ |
+| 3.0879% | webkit-margin-start | ✕ |
+| 2.9551% | font-stretch | ✕ |
+| 2.8934% | empty-cells | ✕ |
+| 2.7619% | webkit-margin-after | ✕ |
+| 2.7220% | perspective-origin | ✕ |
+| 2.6125% | webkit-margin-end | ✕ |
+| 2.6089% | column-count | ✕ |
+| 2.5880% | webkit-text-fill-color | ✕ |
+| 2.5466% | webkit-box-direction | ✕ |
+| 2.4618% | font-feature-settings | ✕ |
+| 2.3959% | webkit-mask-image | ✕ |
+| 2.3431% | webkit-padding-end | ✕ |
+| 2.2555% | stroke-dasharray | ✕ |
+| 2.1788% | user-select | ✕ |
+| 2.1679% | object-fit | ✕ |
+| 2.0643% | column-gap | ✕ |
+| 2.0459% | text-size-adjust | ✕ |
+| 2.0253% | caption-side | ✕ |
+| 1.9695% | stroke-dashoffset | ✕ |
+| 1.7923% | stroke-linecap | ✕ |
+| 1.7861% | animation-direction | ✕ |
+| 1.7559% | webkit-font-feature-settings | ✕ |
+| 1.7404% | stroke-opacity | ✕ |
+| 1.5926% | stroke-miterlimit | ✕ |
+| 1.5786% | fill-rule | ✕ |
+| 1.4859% | webkit-user-modify | ✕ |
+| 1.3439% | webkit-border-image | ✕ |
+| 1.3091% | animation-play-state | ✕ |
+| 1.2676% | contain | ✕ |
+| 1.2029% | webkit-padding-start | ✕ |
+| 1.1840% | webkit-margin-before | ✕ |
+| 1.1269% | page-break-before | ✕ |
+| 1.1222% | webkit-margin-top-collapse | ✕ |
+| 1.0418% | columns | ✕ |
+| 1.0354% | webkit-mask-size | ✕ |
+| 0.9650% | border-image-slice | ✕ |
+| 0.9425% | stop-color | ✕ |
+| 0.9408% | webkit-mask-repeat | ✕ |
+| 0.9125% | webkit-box-lines | ✕ |
+| 0.8804% | webkit-column-break-inside | ✕ |
+| 0.8752% | size | ✕ |
+| 0.8334% | font-kerning | ✕ |
+| 0.8034% | stroke-linejoin | ✕ |
+| 0.7869% | tab-size | ✕ |
+| 0.7689% | break-inside | ✕ |
+| 0.7589% | webkit-text-stroke-width | ✕ |
+| 0.7353% | column-width | ✕ |
+| 0.6924% | webkit-mask-position | ✕ |
+| 0.6869% | border-image-width | ✕ |
+| 0.6323% | border-image-repeat | ✕ |
+| 0.5994% | border-image-outset | ✕ |
+| 0.5885% | all | ✕ |
+| 0.5859% | webkit-text-stroke-color | ✕ |
+| 0.5435% | webkit-print-color-adjust | ✕ |
+| 0.5420% | webkit-text-stroke | ✕ |
+| 0.5195% | writing-mode | ✕ |
+| 0.4741% | clip-rule | ✕ |
+| 0.4685% | webkit-clip-path | ✕ |
+| 0.4578% | text-anchor | ✕ |
+| 0.4535% | shape-rendering | ✕ |
+| 0.4526% | webkit-column-break-before | ✕ |
+| 0.4494% | clip-path | ✕ |
+| 0.4452% | webkit-mask | ✕ |
+| 0.4393% | mix-blend-mode | ✕ |
+| 0.4166% | text-align-last | ✕ |
+| 0.4033% | column-rule | ✕ |
+| 0.3990% | webkit-mask-box-image | ✕ |
+| 0.3989% | font-variant-ligatures | ✕ |
+| 0.3881% | column-fill | ✕ |
+| 0.3865% | webkit-line-break | ✕ |
+| 0.3857% | border-image-source | ✕ |
+| 0.3528% | stop-opacity | ✕ |
+| 0.3075% | webkit-perspective-origin-y | ✕ |
+| 0.3054% | webkit-perspective-origin-x | ✕ |
+| 0.2994% | webkit-writing-mode | ✕ |
+| 0.2717% | dominant-baseline | ✕ |
+| 0.2634% | column-rule-color | ✕ |
+| 0.2586% | webkit-box-decoration-break | ✕ |
+| 0.2467% | webkit-text-security | ✕ |
+| 0.2374% | webkit-background-origin | ✕ |
+| 0.2146% | font-variant-caps | ✕ |
+| 0.2005% | column-rule-style | ✕ |
+| 0.1976% | shape-outside | ✕ |
+| 0.1971% | webkit-padding-before | ✕ |
+| 0.1896% | break-after | ✕ |
+| 0.1782% | webkit-padding-after | ✕ |
+| 0.1774% | text-orientation | ✕ |
+| 0.1747% | webkit-text-orientation | ✕ |
+| 0.1655% | mask | ✕ |
+| 0.1626% | alignment-baseline | ✕ |
+| 0.1572% | page | ✕ |
+| 0.1530% | webkit-column-break-after | ✕ |
+| 0.1521% | webkit-box-reflect | ✕ |
+| 0.1504% | webkit-text-emphasis-color | ✕ |
+| 0.1499% | object-position | ✕ |
+| 0.1470% | break-before | ✕ |
+| 0.1455% | webkit-margin-collapse | ✕ |
+| 0.1452% | baseline-shift | ✕ |
+| 0.1451% | hyphens | ✕ |
+| 0.1309% | rx | ✕ |
+| 0.1304% | ry | ✕ |
+| 0.1256% | background-blend-mode | ✕ |
+| 0.1136% | font-variant-numeric | ✕ |
+| 0.1135% | background-repeat-x | ✕ |
+| 0.1123% | background-repeat-y | ✕ |
+| 0.1086% | webkit-text-emphasis | ✕ |
+| 0.1058% | webkit-rtl-ordering | ✕ |
+| 0.1040% | column-rule-width | ✕ |
+| 0.1036% | isolation | ✕ |
+| 0.1002% | webkit-highlight | ✕ |
+| 0.0843% | webkit-transform-origin-y | ✕ |
+| 0.0786% | webkit-transform-origin-x | ✕ |
+| 0.0770% | webkit-app-region | ✕ |
+| 0.0685% | column-span | ✕ |
+| 0.0653% | r | ✕ |
+| 0.0611% | y | ✕ |
+| 0.0602% | x | ✕ |
+| 0.0555% | webkit-border-vertical-spacing | ✕ |
+| 0.0545% | webkit-border-horizontal-spacing | ✕ |
+| 0.0542% | webkit-border-start-width | ✕ |
+| 0.0450% | webkit-border-start-color | ✕ |
+| 0.0424% | webkit-border-after-width | ✕ |
+| 0.0424% | webkit-border-before-width | ✕ |
+| 0.0423% | webkit-border-end-width | ✕ |
+| 0.0351% | marker | ✕ |
+| 0.0349% | webkit-border-end-color | ✕ |
+| 0.0347% | webkit-border-after-color | ✕ |
+| 0.0347% | webkit-border-before-color | ✕ |
+| 0.0342% | mask-type | ✕ |
+| 0.0328% | color-interpolation-filters | ✕ |
+| 0.0325% | webkit-border-end | ✕ |
+| 0.0319% | vector-effect | ✕ |
+| 0.0307% | color-rendering | ✕ |
+
+## CSS Units and Values
+
+refs: https://drafts.csswg.org/css-values/ 2016-12-11
+
+### Textual
+
+* pre-defined keywords
+ * CSS-wide keywords
+ * `initial`
+ * `inherit`
+ * `unset`
+* `<custom-ident>`: author-defined identifiers ✓
+* `<string>`: quoted strings (`"xxx"`)
+* `<url>`: resourec locators (`url()`)
+
+### Numeric
+
+* `<integer>` ✓
+* `<number>` ✓
+* `<percentage>`
+
+### Length `<length>`
+
+* relative
+ * font-relative
+ * `em`
+ * `ex`
+ * `ch`
+ * `ic`
+ * `rem` ✓🔧
+ * viewport-percentage
+ * `vw` ✓🔧
+ * `vh` ✓🔧
+ * `vi`
+ * `vb`
+ * `vmin` ✓🔧
+ * `vmax` ✓🔧
+* absolute
+ * `cm` ✓🔧
+ * `mm` ✓🔧
+ * `Q` ✓🔧
+ * `in` ✓🔧
+ * `pc` ✓🔧
+ * `pt` ✓🔧
+ * `px` autofixed to number
+
+### Quantities
+
+* `<angle>`
+ * `deg`
+ * `grad`
+ * `rad`
+ * `turn`
+* `<time>`
+ * `s`
+ * `ms`
+* `<frequency>`
+ * `Hz`
+ * `kHz`
+* `<resolution>`
+ * `dpi`
+ * `dpcm`
+ * `dppx`
+
+### Elsewhere
+
+* `<color>` ✓
+* `<image>`
+* `<position>`
+
+### Functional
+
+* `calc()`
+* `toggle()`
+* `attr()`
+
+## JS APIs
+
+refs: https://www.w3.org/standards/techs/js 2016-12-11
+
+### Completed Work
+
+#### Standards
+
+| last update | spec | supported |
+| ---- | ---- | ---- |
+| 2016-11-17 | Media Source Extensions™ | - (media related) |
+| 2016-11-08 | Geolocation API Specification 2nd Edition | ✕ developing |
+| 2016-10-27 | Pointer Lock | - |
+| 2016-10-18 | Vibration API (Second Edition) | ✕ |
+| 2016-04-19 | Web Storage (Second Edition) | ✓ async `storage` module |
+| 2015-10-22 | Web Notifications | ✕ |
+| 2015-05-19 | HTML5 Web Messaging | ✕ `BroadcastChannel` developing |
+| 2015-02-24 | Pointer Events | - |
+| 2015-02-10 | Vibration API | ✕ |
+| 2015-02-03 | Server-Sent Events | ✕ |
+| 2015-01-08 | Indexed Database API | ✕ |
+| 2014-03-13 | Metadata API for Media Resources 1.0 | - (media related) |
+| 2014-02-11 | Progress Events | ✕ |
+| 2014-01-16 | JSON-LD 1.0 Processing Algorithms and API | - |
+| 2013-12-12 | Performance Timeline | - (perf related) |
+| 2013-12-12 | User Timing | - (perf related) |
+| 2013-10-31 | Widget Interface | - |
+| 2013-10-29 | Page Visibility (Second Edition) | ✕ `onviewappear`/`onviewdisappear` |
+| 2013-10-10 | Touch Events | ✕ |
+| 2013-02-21 | Selectors API Level 1 | - |
+| 2012-12-17 | Navigation Timing | - (perf related) |
+| 2012-12-17 | High Resolution Time | - (perf related) |
+| 2008-12-22 | Element Traversal Specification | - |
+
+### Drafts
+
+#### Proposed Recommendations
+
+| last update | spec | supported |
+| ---- | ---- | ---- |
+| 2016-09-15 | WebIDL Level 1 | - |
+
+#### Candidate Recommendations
+
+| last update | spec | supported |
+| ---- | ---- | ---- |
+| 2016-12-08 | Performance Timeline Level 2 | - (perf related) |
+| 2016-11-22 | Page Visibility Level 2 | ✕ `onviewappear`/`onviewdisappear` |
+| 2016-11-01 | High Resolution Time Level 2 | - (perf related) |
+| 2016-08-18 | DeviceOrientation Event Specification | ✕ |
+| 2016-07-21 | Resource Timing Level 1 | - (perf related) |
+| 2016-07-14 | Presentation API | - |
+| 2016-07-07 | Battery Status API | ✕ |
+| 2016-07-05 | Encrypted Media Extensions | - |
+| 2016-05-19 | Media Capture and Streams | - (media related) |
+| 2014-12-11 | Web Cryptography API | - |
+| 2014-09-09 | HTML Media Capture | - (media related) |
+| 2012-09-20 | The WebSocket API | ✕ |
+
+#### Last Call Drafts
+
+| last update | spec | supported |
+| ---- | ---- | ---- |
+| 2011-12-01 | Geolocation API Specification Level 2 | ✕ |
+
+#### Other Working Drafts
+
+| last update | spec | supported |
+| ---- | ---- | ---- |
+| 2016-12-09 | MediaStream Image Capture | - (media related) |
+| 2016-12-06 | MediaStream Recording | - (media related) |
+| 2016-12-06 | Selection API | ✕ |
+| 2016-12-05 | Input Events | ✕ |
+| 2016-12-02 | Gamepad | - |
+| 2016-11-29 | WebDriver | - |
+| 2016-11-24 | WebRTC 1.0: Real-time Communication Between Browsers | ✕ |
+| 2016-11-22 | Pointer Lock 2.0 | - |
+| 2016-11-07 | Remote Playback API | - (media related) |
+| 2016-11-03 | Resource Timing Level 2 | - (perf related) |
+| 2016-11-02 | Audio Output Devices API | - (media related) |
+| 2016-11-01 | Indexed Database API 2.0 | ✕ |
+| 2016-11-01 | User Timing Level 2 | - (perf related) |
+| 2016-10-31 | The Screen Orientation API | ✕ |
+| 2016-10-31 | High Resolution Time Level 3 | - (perf related) |
+| 2016-10-24 | UI Events KeyboardEvent code Values | - |
+| 2016-10-24 | UI Events KeyboardEvent key Values | - |
+| 2016-10-11 | Service Workers 1 | ✕ |
+| 2016-09-21 | Identifiers for WebRTC's Statistics API | - |
+| 2016-09-13 | Accelerometer Sensor | ✕ |
+| 2016-09-13 | Gyroscope Sensor | ✕ |
+| 2016-09-13 | Magnetometer Sensor | ✕ |
+| 2016-08-30 | Ambient Light Sensor | ✕ |
+| 2016-08-30 | Media Capture from DOM Elements | - (media related) |
+| 2016-08-30 | Generic Sensor API | ✕ |
+| 2016-08-03 | Wake Lock API | ✕ |
+| 2016-07-19 | Proximity Sensor | ✕ |
+| 2016-07-19 | Pointer Events - Level 2 | - |
+| 2016-07-14 | Screen Capture | ✕ |
+| 2016-07-12 | Media Capture Depth Stream Extensions | - (media related) |
+| 2016-05-17 | Cooperative Scheduling of Background Tasks | ✕ |
+| 2016-04-22 | Navigation Timing Level 2 | - (perf related) |
+| 2016-04-03 | Clipboard API and events | ✕ `clipboard` module |
+| 2015-12-15 | Push API | ✕ |
+| 2015-12-08 | Web Audio API | - (media related) |
+| 2015-10-15 | FindText API | - |
+| 2015-09-24 | Web Workers | ✕ |
+| 2015-04-21 | File API | ✕ |
+| 2014-02-20 | Network Service Discovery | ✕ |
+| 2012-03-06 | MediaStream Capture Scenarios | - (media related) |
+| 2011-12-15 | Audio Processing API | - (media related) |
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/weex-dom-api.md
----------------------------------------------------------------------
diff --git a/_drafts/weex-dom-api.md b/_drafts/weex-dom-api.md
new file mode 100644
index 0000000..f18efa0
--- /dev/null
+++ b/_drafts/weex-dom-api.md
@@ -0,0 +1,224 @@
+---
+title: Native DOM APIs
+type: references
+group: API
+order: 2.8
+version: 2.1
+has_chapter_content: true
+---
+
+# Native DOM APIs
+
+Weex 在 JS 引擎中，为每个页面都提供了一套 Native DOM APIs，这套接口和 HTML DOM APIs 非常接近，利用这套接口我们可以通过 JavaScript 控制 native 的渲染逻辑。而且 Weex 上层的 Vue 2.0 也是基于这套接口进行适配的。
+
+*绝大多数情况下 JS 框架会把 Native DOM APIs 都封装好，开发者不需要直接对 Native DOM 进行操作。*
+
+* `Document` 类，整个页面文档。
+* `Node` 类，结点的基础类。
+* `Element` 类，元素结点，继承自 `Node`，单个视图单元。
+* `Comment` 类，注释结点，继承自 `Node`，无实际意义，通常用作占位符。
+
+**每个 Weex 页面都有一个 `weex.document` 对象，该对象就是一个 `Document` 类的实例，也是下面所有接口调用的起点。**
+
+接下来详细介绍它们的用法：
+
+## `Document` 类
+
+每个 `Document` 实例在创建的时候都会自动拥有一个 `documentElement` 属性，表示文档结点。该文档结点可以拥有一个 `body`，即文档的主体结点。
+
+**注意事项**: 文档的主体结点只接受 `<div>`、`<list>` 或 `<scroller>` 三种类型的元素结点。
+
+### 构造函数
+
+**`new Document(id: string, url: string?)`**
+
+### 成员方法
+
+**`createElement(tagName: string, props: Object?): Element`**
+
+* 创建一个特定类型 `tagName` 的 `Element` 实例，即一个元素结点。`props` 可以包含 `attr` 对象和 `style` 对象。比如 `createBody('div', {style: {backgroundColor: '#ffffff'}})`。
+
+**`createComment(text: string): Comment`**
+
+* 创建一个 `Comment` 的实例，即一个注释结点，并设置一段文本描述。
+
+**`createBody(tagName: string, props: Object?): Element`**
+
+* 创建文档主体结点，并自动挂载到 `documentElement` 下。
+
+**`fireEvent(el: Element, type: string, e: Object?, domChanges: Object?)`**
+
+* 触发一个特定类型的事件，并附带一个事件对象 `e`。当该事件在产生过程中修改了 DOM 的特性或样式，则第四个参数用来描述这些改变，参数格式和上面 `createElement` 方法的格式相同。
+
+**`destroy()`**
+
+* 销毁当前文档。一旦销毁之后文档将不会再工作。
+
+### 只读成员变量
+
+**`id: string`**
+
+* 每个 `Document` 实例都有一个唯一的 `id`。这同时也是每个 Weex 页面唯一拥有的 `id`。
+
+**`URL: string?`**
+
+* 如果当前 Weex 页面有 JS bundle URL 的话，这里则会返回 这个 URL。
+
+**`body: Element`**
+
+* 文档的主体结点，概念类似 HTML DOM 里的 `document.body`。
+
+**`documentElement: Element`**
+
+* 文档的对应结点，概念类似 HTML DOM 里的 `document.documentElement`。
+* `body` 和 `documentElement` 的关系是：`documentElement` 是 `body` 的父结点。
+
+**`getRef(id): Node`**
+
+* 根据结点 id 获取结点。
+
+## `Node` 类
+
+### 构造函数
+
+**`new Node()`**
+
+### 成员
+
+**`destroy()`**
+
+### 只读成员变量或方法
+
+**`ref: string`**
+
+* 每个 `Node` 实例都有各自的在整个 `Document` 实例中唯一的 `ref` 值。
+
+**`nextSibling: Node?`**
+
+**`previousSibling: Node?`**
+
+**`parentNode: Node?`**
+
+* 上述三个接口和 HTML DOM 的定义吻合。
+
+**`children: Node[]`**
+
+* 该结点拥有的所有子结点的数组。
+
+**`pureChildren: Node[]`**
+
+* 该结点拥有的所有子元素的数组。和 `children` 的区别是，`pureChildren` 只包含了 `Element` 实例而不包含 `Comment` 实例。
+
+## `Element` 类 <small>继承自 `Node`</small>
+
+### 构造函数
+
+**`new Element(type: string, props: Object?)`**
+
+* 创建一个特定类型 `type` 的元素结点，参数 `props` 可以包含 `attr` 对象或 `style` 对象。
+
+### DOM 树操作
+
+**`appendChild(node: Node)`**
+
+**`insertBefore(node: Node, before: Node?)`**
+
+* 上述两个接口类似 HTML DOM。
+
+**`insertAfter(node: Node, after: Node?)`**
+
+* 在一个子结点之前插入新结点 after。
+
+**`removeChild(node: Node, preserved: boolean?)`**
+
+* 删除子结点 `node`，参数 `preserved` 表示立刻从内存中删除还是暂时保留。
+
+**`clear()`**
+
+* 清除所有的子结点。
+
+### DOM 属性本身操作
+
+**`setAttr(key: string, value: string, silent: boolean?)`**
+
+**`setStyle(key: string, value: string, silent: boolean?)`**
+
+* 上述两个接口中，当 `silent` 为真的时候，结点仅更新自己，不会传递命令给客户端渲染层。该参数用来处理用户事件在发生时已经改变结点相关属性的情况下，不会在 Native DOM 也改变之后重复发送命令给客户端。
+
+**`addEvent(type: string, handler: Function)`**
+
+**`removeEvent(type: string)`**
+
+**`fireEvent(type: string, e: any)`**
+
+* 绑定事件、解绑定事件、触发事件。
+
+#### 特定组件类型的组件方法
+
+特殊的：不同组件类型可以拥有自己特有的方法，比如 `<web>` 组件支持 `refresh` 方法，详见各组件的描述，在此情况下，我们会产生特定组件类型的 class，比如 `WebElement`，它继承自 `Element`。
+
+如：
+
+> #### `WebElement` <small>继承自 `Element`</small>
+>
+> 表示在 Weex 页面中嵌入一个 webview
+>
+> **`refresh()`**: 刷新当前 webview
+
+### 只读成员变量或方法
+
+**`ref`, `nextSibling`, `previousSibling`, `parentNode`**
+
+* 继承自 `Node`。
+
+**`nodeType: number`**
+
+* 永远是数字 `1`。
+
+**`type: string`**
+
+* 和构造函数里的 `type` 一致。
+
+**`attr: Object`**
+
+* 当前结点的所有特性的键值对。推荐通过 `setAttr()` 方法进行修改，而不要直接修改这里的对象。
+
+**`style: Object`**
+
+* 当前结点的所有样式的键值对。推荐通过 `setStyle()` 方法进行修改，而不要直接修改这里的对象。
+
+**`event: Object`**
+
+* 当前结点的所有事件绑定。每个事件类型对应一个事件句柄方法。推荐通过 `addEvent()` / `removeEvent()` 方法进行修改，而不要直接修改这里的对象。
+
+**`toJSON(): Object`**
+
+* 返回描述该元素结点的一段 JSON 对象，形如：`{ref: string, type: string, attr: Object, style: Object, event: Array(string), children: Array}`。
+
+## `Comment` 类 <small>继承自 `Node`</small>
+
+### 构造函数
+
+**`new Comment(value: string)`**
+
+### 只读成员变量或方法
+
+**`ref`, `nextSibling`, `previousSibling`, `parentNode`**
+
+* 继承自 `Node`。
+
+**`nodeType: number`**
+
+* 永远是数字 `8`。
+
+**`type: string`**
+
+* 永远是字符串 `'comment'`
+
+**`value: string`**
+
+* 和构造函数里的 `value` 一致。
+
+**`toJSON(): Object`**
+
+* 返回描述该注释结点的一段 JSON 对象，形如：`<!-- value -->`。
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/write-once.en.md
----------------------------------------------------------------------
diff --git a/_drafts/write-once.en.md b/_drafts/write-once.en.md
new file mode 100644
index 0000000..673b302
--- /dev/null
+++ b/_drafts/write-once.en.md
@@ -0,0 +1,23 @@
+---
+title: Write once, Run Everywhere
+type: guide
+order: 4.4
+version: 2.1
+---
+
+# Write Once, Run Everywhere
+
+Weex is a "Write Once, Run Everywhere" solution.
+
+* First, Weex is based on web dev experience, which includes syntax and project management.
+* Second, all components & modules in Weex are discussed by iOS, Android, web developers together to ensure it's common enough to satisfy every platforms.
+* You only need write the same Weex code for each platforms.
+
+We think about it in these aspects below:
+
+1. Today for almost all mobile apps, one app solves the same problem in different platforms. Weex hope to supply a lightweight way to describe your business logic which works well in all platforms you need.
+2. For the differences of all mobile platforms, we are willing to fill the gap in 3 points:
+ 1. Design the same APIs for all platforms to ensure different platforms have the same business logic description.
+ 2. Implement the APIs with different style or behaviors to ensure the implementation and user experience matches different platforms.
+ 3. Platforms obviously differ among each other. We also have some environment variables to help developers in certain situations.
+3. We trust (web) standard is the best for all features in all platforms.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/write-once.md
----------------------------------------------------------------------
diff --git a/_drafts/write-once.md b/_drafts/write-once.md
new file mode 100644
index 0000000..6c0c62d
--- /dev/null
+++ b/_drafts/write-once.md
@@ -0,0 +1,25 @@
+---
+title: 一次撰写，多端运行
+type: wiki
+order: 1.4
+version: 2.1
+---
+
+# 一次撰写，多端运行
+
+Weex 提供了多端一致的技术方案。
+
+* 首先 web 开发体验在各端当中是相同的。包括语法设计和工程链路。
+* 其次，Weex 的组件、模块设计都是 iOS、Android、Web 的开发者共同讨论出来的，有一定的通用性和普遍性。
+* Weex 开发同一份代码，可以在不同的端上分别执行，避免了多端的重复研发成本。
+
+我们这样设计基于以下几点设想：
+
+1. 今天绝大多数的移动应用，虽然要同时出现在不同的移动操作系统平台上，但是要解决的问题和用户的需求是相同或非常接近的。Weex 希望提供的是一个快速直接统一描述业务的通用方式，为业务和产品需求直接服务。
+2. 针对各大操作系统平台差异的现状，我们倾向于通过以下两方面来解决这一问题
+ 1. 把不同端的样式和行为设计并描述成为相同的 API，这样上层的业务逻辑是同一份，但是在不同端上可以做到不一样的展现效果。
+ 2. 通过横向扩展的方式在不同的端上扩展不一样的功能、特性或表现形式。
+ 3. 各端不一致的业务描述也是难免的，我们通过提供更多更丰富的环境变量来帮助开发者在同一套代码里高效适配不同的设备场景。
+3. 我们相信标准和规范的力量
+
+部分功能特性由于 native 特性的关系，会略有不同，我们会在相应的组件、模块、API 文档中做相应的描述和提示。
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/source/cn/development-process.md
----------------------------------------------------------------------
diff --git a/source/cn/development-process.md b/source/cn/development-process.md
new file mode 100644
index 0000000..16006d5
--- /dev/null
+++ b/source/cn/development-process.md
@@ -0,0 +1,6 @@
+---
+title: 开发流程
+type: community
+has_chapter_content: false
+version: 2.1
+---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/source/development-process.md
----------------------------------------------------------------------
diff --git a/source/development-process.md b/source/development-process.md
new file mode 100644
index 0000000..d3d8732
--- /dev/null
+++ b/source/development-process.md
@@ -0,0 +1,6 @@
+---
+title: Development Process
+type: community
+has_chapter_content: false
+version: 2.1
+---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/source/wiki/common-styles.md
----------------------------------------------------------------------
diff --git a/source/wiki/common-styles.md b/source/wiki/common-styles.md
index 8344dce..a2403ce 100644
--- a/source/wiki/common-styles.md
+++ b/source/wiki/common-styles.md
@@ -1,7 +1,7 @@
---
title: Common Style
type: wiki
-group: 样式
+group: Style
order: 3.1
version: 2.1
---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/source/wiki/css-units.md
----------------------------------------------------------------------
diff --git a/source/wiki/css-units.md b/source/wiki/css-units.md
index b533bde..b087e32 100644
--- a/source/wiki/css-units.md
+++ b/source/wiki/css-units.md
@@ -1,7 +1,7 @@
---
title: CSS Units
type: wiki
-group: 样式
+group: Style
order: 3.3
version: 2.1
---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/source/wiki/platform-difference.md
----------------------------------------------------------------------
diff --git a/source/wiki/platform-difference.md b/source/wiki/platform-difference.md
new file mode 100644
index 0000000..3ffc852
--- /dev/null
+++ b/source/wiki/platform-difference.md
@@ -0,0 +1,11 @@
+---
+title: Platform Differences with Web
+type: wiki
+group: Design
+order: 1.4
+version: 2.1
+---
+
+# Platform Differences with Web
+
+Work in progresss.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/source/wiki/platfrom-difference.md
----------------------------------------------------------------------
diff --git a/source/wiki/platfrom-difference.md b/source/wiki/platfrom-difference.md
deleted file mode 100644
index 3ffc852..0000000
--- a/source/wiki/platfrom-difference.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: Platform Differences with Web
-type: wiki
-group: Design
-order: 1.4
-version: 2.1
----
-
-# Platform Differences with Web
-
-Work in progresss.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/themes/weex/languages/cn.yml
----------------------------------------------------------------------
diff --git a/themes/weex/languages/cn.yml b/themes/weex/languages/cn.yml
index 25195c9..d7c7815 100644
--- a/themes/weex/languages/cn.yml
+++ b/themes/weex/languages/cn.yml
@@ -98,6 +98,7 @@ menu:
legacy: 旧语法文档
examples: 实例
contribute: 如何参与贡献
+ developmentProcess: 开发流程
usingWeex: 谁在使用 Weex
playground:
content: Weex Native 运行时实例 & Weex 文件预览工具。
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/themes/weex/languages/en.yml
----------------------------------------------------------------------
diff --git a/themes/weex/languages/en.yml b/themes/weex/languages/en.yml
index 90c6e9c..a50118c 100644
--- a/themes/weex/languages/en.yml
+++ b/themes/weex/languages/en.yml
@@ -98,6 +98,7 @@ menu:
legacy: Old Syntax Doc
examples: Examples
contribute: How to Contribute
+ developmentProcess: Development Process
usingWeex: Who is using Weex?
playground:
content: Weex Native Runtime showcase & Weex we file preview.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/themes/weex/layout/_partial/article.ejs
----------------------------------------------------------------------
diff --git a/themes/weex/layout/_partial/article.ejs b/themes/weex/layout/_partial/article.ejs
index c506af3..9ab4340 100644
--- a/themes/weex/layout/_partial/article.ejs
+++ b/themes/weex/layout/_partial/article.ejs
@@ -4,8 +4,14 @@
<div class="article-entry" itemprop="articleBody">
<%- partial('post/title', {post: post}) %>
<%- page_anchor(post.content) %>
+ <div class="article-tips">
+ <p class="tips-text">
+ <a class="xx" href="">Edit this page on GitHub.</a>
+ </p>
+ </div>
</div>
<% if (page_type === 'article') { %>
<%- partial('_partial/post/nav') %>
<% } %>
+ <%- partial('_partial/footer') %>
</article>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/themes/weex/layout/_partial/footer.ejs
----------------------------------------------------------------------
diff --git a/themes/weex/layout/_partial/footer.ejs b/themes/weex/layout/_partial/footer.ejs
index aaa76ee..093db9d 100644
--- a/themes/weex/layout/_partial/footer.ejs
+++ b/themes/weex/layout/_partial/footer.ejs
@@ -1,13 +1,15 @@
<footer id="footer">
<div class="footer-inner">
<div class="disclaimer">
- <p><img src="//gw.alicdn.com/tfs/TB1pTBZQFXXXXX9XXXXXXXXXXXX-794-280.png" width="120px" alt="Apache Incubator"></p>
+ <a target="_blank" href="https://incubator.apache.org/">
+ <img src="//gw.alicdn.com/tfs/TB1pTBZQFXXXXX9XXXXXXXXXXXX-794-280.png" width="100px" alt="Apache Incubator">
+ </a>
<p>
<span class="title">Disclaimer:</span>
<span>Apache Weex is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</span>
</div>
<p class="copyright">
- <img src="//gw.alicdn.com/tfs/TB1bg8SQFXXXXcHXXXXXXXXXXXX-85-170.png" height="20px" alt="Apache"><span>Copyright(c) 2017 The Apache Software Foundation. Licensed under the </span>
+ <img src="//gw.alicdn.com/tfs/TB1bg8SQFXXXXcHXXXXXXXXXXXX-85-170.png" height="16px" alt="Apache"><span>Copyright(c) 2017 The Apache Software Foundation. Licensed under the </span>
<a target="_blank" href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a>
</p>
</div>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/themes/weex/layout/_partial/header.ejs
----------------------------------------------------------------------
diff --git a/themes/weex/layout/_partial/header.ejs b/themes/weex/layout/_partial/header.ejs
index 1698db4..5087677 100644
--- a/themes/weex/layout/_partial/header.ejs
+++ b/themes/weex/layout/_partial/header.ejs
@@ -27,6 +27,9 @@
<a href="<%= url_for_lang('contributing.html') %>"><%= _p('menu.contribute') %></a>
</li>
<li>
+ <a href="<%= url_for_lang('development-process.html') %>"><%= _p('menu.developmentProcess') %></a>
+ </li>
+ <li>
<a href="<%= url_for_lang('who-is-using-weex.html') %>"><%= _p('menu.usingWeex') %></a>
</li>
</ul>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/themes/weex/layout/layout.ejs
----------------------------------------------------------------------
diff --git a/themes/weex/layout/layout.ejs b/themes/weex/layout/layout.ejs
index b9bae58..17ba619 100644
--- a/themes/weex/layout/layout.ejs
+++ b/themes/weex/layout/layout.ejs
@@ -42,9 +42,10 @@
</script>
<%- partial('_partial/header') %>
<%- partial('_partial/sidebar', {post: page, page_type: page_type}) %>
- <%- body %>
- <%- partial('_partial/footer') %>
- <%- partial('_partial/after-footer') %>
+ <div class="main-content">
+ <%- body %>
+ <%- partial('_partial/after-footer') %>
+ </div>
<%- js('js/reqwest.js') %>
<%- js('js/common.js') %>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/themes/weex/source/css/common.scss
----------------------------------------------------------------------
diff --git a/themes/weex/source/css/common.scss b/themes/weex/source/css/common.scss
index 78045b4..5c29ef2 100644
--- a/themes/weex/source/css/common.scss
+++ b/themes/weex/source/css/common.scss
@@ -22,7 +22,7 @@ body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
// font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei',sans-serif;
// font-size:62.5%;max-height:100%;
- font-size: 16px;
+ font-size: 15px;
line-height: 120%;
color: $text-light-black;
-webkit-tap-highlight-color: transparent;
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/themes/weex/source/css/media-queries.scss
----------------------------------------------------------------------
diff --git a/themes/weex/source/css/media-queries.scss b/themes/weex/source/css/media-queries.scss
index 5c723ca..e9bd9a9 100644
--- a/themes/weex/source/css/media-queries.scss
+++ b/themes/weex/source/css/media-queries.scss
@@ -1,5 +1,33 @@
@import "variable.scss";
+
+@media screen and (max-width: 1100px) {
+ #header {
+ padding: 0 30px;
+
+ .tools > li {
+ margin-left: 10px;
+ }
+ .tools .search-form {
+ width: 120px;
+ }
+
+ .main-nav {
+ li > a {
+ font-size: 1.16em;
+ padding: 0 12px;
+ }
+ }
+
+ }
+
+ .article-wrapper {
+ .doc-nav {
+ // padding:
+ }
+ }
+}
+
@media screen and (max-width: $content-max-width) {
/***********************************************
@@ -21,7 +49,7 @@
}
#sidebar {
- display: block !important;
+ display: flex !important;
transform: translateX(-320px);
transition: all .3s ease;
&.open {
@@ -30,7 +58,7 @@
}
#footer {
- padding: 20px;
+ padding: 10px 20px;
.disclaimer {
display: none;
}
@@ -39,9 +67,8 @@
}
}
.article {
- margin-top: 20px;
.article-entry {
- margin-bottom: 40px;
+ margin: 20px;
}
}
@@ -99,7 +126,7 @@
}
-@media screen and (max-width: 700px) {
+@media screen and (max-width: 600px) {
/***********************************************
* Index
**********************************************/
@@ -114,6 +141,13 @@
}
}
+ .article {
+ .article-entry {
+ margin: 10px;
+ padding: 5px;
+ }
+ }
+
.scene.overlength {
height: auto;
min-height: 100%;
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/themes/weex/source/css/partial/article.scss
----------------------------------------------------------------------
diff --git a/themes/weex/source/css/partial/article.scss b/themes/weex/source/css/partial/article.scss
index 9b6505f..5f8b6a7 100644
--- a/themes/weex/source/css/partial/article.scss
+++ b/themes/weex/source/css/partial/article.scss
@@ -7,7 +7,7 @@
margin-bottom: 3.5em;
h1 {
- font-size: 2.1em;
+ font-size: 2em;
color: $text-black;
margin: 0;
@@ -28,9 +28,9 @@
}
.article {
- max-width: 900px;
- margin-left: 50px;
- margin-top: 40px;
+ display: flex;
+ flex: 1;
+ flex-direction: column;
position: relative;
line-height: 1.6;
overflow-y: auto;
@@ -41,26 +41,30 @@
}
.article-entry {
- margin-bottom: 90px;
+ flex: 1;
+ max-width: 800px;
+ margin-top: 50px;
+ margin-left: 40px;
+ margin-bottom: 60px;
}
h2 {
- font-size: 1.85em;
+ font-size: 1.65em;
margin: 1em 0 .8em;
}
h3 {
- font-size: 1.5em;
+ font-size: 1.35em;
margin: .85em 0 .7em;
}
h4 {
- font-size: 1.2em;
+ font-size: 1.15em;
margin: .75em 0 .55em;
}
h5 {
- font-size: 1.05em;
+ font-size: 1em;
margin: .6em 0 .4em;
}
@@ -96,6 +100,26 @@
}
}
+.article-tips {
+ margin: 60px 0 0;
+ padding: 10px 0;
+ border-top: 1px solid #E6E6E6;
+}
+
+.tips-text {
+ margin: 0;
+ text-align: right;
+ padding-right: 10px;
+ font-size: 13px;
+
+ a, a:link {
+ color: #80d0ff;
+ }
+ a:active, a:hover {
+ color: $logo-color;
+ }
+}
+
#blog .article {
margin-left: 0;
}
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/themes/weex/source/css/partial/footer.scss
----------------------------------------------------------------------
diff --git a/themes/weex/source/css/partial/footer.scss b/themes/weex/source/css/partial/footer.scss
index d56d459..007b565 100644
--- a/themes/weex/source/css/partial/footer.scss
+++ b/themes/weex/source/css/partial/footer.scss
@@ -1,18 +1,16 @@
@import "../variable.scss";
-$footer-bg: #F2F2F2;
-$footer-text-color: #888;
+$footer-bg: #F0F0F0;
+$footer-text-color: #A0A0A0;
#footer {
width: 100%;
- padding: 10px 50px;
- display: flex;
- align-items: center;
- justify-content: center;
+ padding: 10px 40px 15px;
background: $footer-bg;
- font-size: 12px;
+ font-size: 10px;
+ font-weight: 200;
color: $footer-text-color;
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+ box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1);
a { text-decoration: underline; }
p { margin: 0; }
@@ -28,8 +26,8 @@ $footer-text-color: #888;
.copyright {
margin-top: 15px;
- a, a:focus { color: #666; }
- a:active { color: #555; }
+ a, a:focus { color: #999; }
+ a:active { color: #888; }
}
}
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/themes/weex/source/css/partial/header.scss
----------------------------------------------------------------------
diff --git a/themes/weex/source/css/partial/header.scss b/themes/weex/source/css/partial/header.scss
index 3532192..07e87ba 100644
--- a/themes/weex/source/css/partial/header.scss
+++ b/themes/weex/source/css/partial/header.scss
@@ -1,6 +1,5 @@
@import "../variable.scss";
-$header-height: 50px;
$header-bg: #F2F2F2;
$menu-active-bg: #EEE;
@@ -8,9 +7,9 @@ $menu-active-bg: #EEE;
width: 100%;
height: $header-height;
padding: 0 40px;
- position: fixed;
+ position: absolute;
background-color: $header-bg;
- box-shadow: 0 0 1px rgba(0,0,0,0.25);
+ box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
top: 0;
left: 0;
right: 0;
@@ -87,7 +86,7 @@ $menu-active-bg: #EEE;
}
> li {
- margin: 0 3px;
+ margin: 0 1px;
}
}
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/themes/weex/source/css/partial/sidebar.scss
----------------------------------------------------------------------
diff --git a/themes/weex/source/css/partial/sidebar.scss b/themes/weex/source/css/partial/sidebar.scss
index 6e681b1..f2486d4 100644
--- a/themes/weex/source/css/partial/sidebar.scss
+++ b/themes/weex/source/css/partial/sidebar.scss
@@ -2,35 +2,35 @@
#sidebar {
display: none;
- height: 100%;
width: 300px;
position: fixed;
- top: 0;
+ top: $header-height;
+ bottom: 0;
left: 0;
z-index: 999;
- padding: 90px 20px 10px;
+ padding: 20px 0;
background: #fff;
box-shadow: -3px 0 20px rgba(0, 0, 0, .2);
overflow-x: hidden;
overflow-y: auto;
+ flex-direction: column;
+ align-items: center;
-webkit-overflow-scrolling: touch;
.sidebar-menu {
- z-index: 999;
- overflow-y: auto;
-
.btn-close-sidebar {
cursor: pointer;
display: block;
- font-size: 1.5em;
+ font-size: 0.8em;
position: absolute;
- top: 18px;
- left: 18px;
+ top: 10px;
+ right: 10px;
background: transparent;
border: none;
+ color: #BBB;
&:hover {
border: none;
- color: #777;
+ color: #999;
}
}
}
@@ -72,4 +72,4 @@
left: -20px;
right: 0;
}
-}
\ No newline at end of file
+}
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/themes/weex/source/css/partial/summary.scss
----------------------------------------------------------------------
diff --git a/themes/weex/source/css/partial/summary.scss b/themes/weex/source/css/partial/summary.scss
index eddd6b6..ec1b6d9 100644
--- a/themes/weex/source/css/partial/summary.scss
+++ b/themes/weex/source/css/partial/summary.scss
@@ -1,10 +1,9 @@
@import "../variable.scss";
.summary {
- overflow-x: hidden;
- overflow-y: auto;
-webkit-overflow-scrolling: touch;
font-size: 15px;
+ flex: 1;
ul, li , ol {
margin: 0;
@@ -49,13 +48,16 @@
}
.sponsor {
+ flex: 0;
margin-top: 20px;
+ margin-bottom: 20px;
}
.sponsor-poster {
display: block;
- width: 180px;
+ width: 140px;
}
.sponsor-title {
color: #7f8c8d;
- font-size:12px;
+ font-size: 10px;
+ text-align: center;
}
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/themes/weex/source/css/post.scss
----------------------------------------------------------------------
diff --git a/themes/weex/source/css/post.scss b/themes/weex/source/css/post.scss
index b6e4120..d98f21a 100644
--- a/themes/weex/source/css/post.scss
+++ b/themes/weex/source/css/post.scss
@@ -1,10 +1,26 @@
@import "variable.scss";
+body {
+ position: relative;
+}
+
+.main-content {
+ display: flex;
+ position: absolute;
+ width: 100%;
+ top: $header-height;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow-x: hidden;
+ overflow-y: auto;
+ flex-direction: row;
+}
+
.article-wrapper {
display: flex;
width: 100%;
margin: 0 auto;
- margin-top: 60px;
flex-direction: row;
min-height: 80%;
min-height: calc(100% - 160px);
@@ -13,9 +29,9 @@
max-width: 850px;
}
- &.page-layout {
- max-width: 1400px;
- }
+ // &.page-layout {
+ // max-width: 1400px;
+ // }
.article-entry {
padding: 0 1.2em;
@@ -50,11 +66,17 @@
}
.doc-nav {
- padding: 50px 20px;
+ padding-top: 50px;
background: $bg-white;
- width: 300px;
+ width: 22%;
+ max-width: 450px;
+ min-width: 260px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
overflow-x: hidden;
overflow-y: auto;
+ border-right: 1px solid #E8E8E8;
}
.doc-nav-version{
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/themes/weex/source/css/variable.scss
----------------------------------------------------------------------
diff --git a/themes/weex/source/css/variable.scss b/themes/weex/source/css/variable.scss
index a15c636..db47711 100644
--- a/themes/weex/source/css/variable.scss
+++ b/themes/weex/source/css/variable.scss
@@ -18,7 +18,9 @@ $border-blue: $text-blue;
$border-gray: #999ba4;
$article-max-width: 1350px;
-$content-max-width: 900px;
+$content-max-width: 850px;
+
+$header-height: 50px;
/***********************
* Mixin