Add browser support tables

_data/browser_support.yml

@@ -6,3 +6,88 @@ shapes:
   - { name: Opera, support: support, version: 24 }
   - { name: iOS, support: support, version: 8 }
   - { name: Android, support: no-support, version: 4.4 }
+
+blend-modes:
+  - { name: Internet Explorer, support: no-support, version: 11 }
+  - { name: Chrome, support: partial-support, version: 37 }
+  - { name: Firefox, support: partial-support, version: 32 }
+  - { name: Safari, support: support, version: 7.1 }
+  - { name: Opera, support: partial-support, version: 24 }
+  - { name: iOS, support: support, version: 8 }
+  - { name: Android, support: no-support, version: 4.4 }
+
+svg:
+  - { name: Internet Explorer, support: support, version: 9 }
+  - { name: Chrome, support: support, version: 31 }
+  - { name: Firefox, support: support, version: 31 }
+  - { name: Safari, support: support, version: 5.1 }
+  - { name: Opera, support: support, version: 24 }
+  - { name: iOS, support: support, version: 7.1 }
+  - { name: Android, support: support, version: 4.4 }
+
+filters:
+  - { name: Internet Explorer, support: no-support, version: 11 }
+  - { name: Chrome, support: support, version: 31 }
+  - { name: Firefox, support: partial-support, version: 31 }
+  - { name: Safari, support: support, version: 6.1 }
+  - { name: Opera, support: support, version: 24 }
+  - { name: iOS, support: support, version: 7.1 }
+  - { name: Android, support: support, version: 4.4 }
+
+regions:
+  - { name: Internet Explorer, support: partial-support, version: 10 }
+  - { name: Chrome, support: no-support, version: 38 }
+  - { name: Firefox, support: no-support, version: 33 }
+  - { name: Safari, support: support, version: 6.1 }
+  - { name: Opera, support: no-support, version: 25 }
+  - { name: iOS, support: support, version: 7.1 }
+  - { name: Android, support: no-support, version: 4.4 }
+
+css-variables:
+  - { name: Internet Explorer, support: no-support, version: 11 }
+  - { name: Chrome, support: no-support, version: 38 }
+  - { name: Firefox, support: support, version: 33 }
+  - { name: Safari, support: no-support, version: 8 }
+  - { name: Opera, support: no-support, version: 25 }
+  - { name: iOS, support: no-support, version: 8.1 }
+  - { name: Android, support: no-support, version: 4.4 }
+
+# Individual properties
+
+# Blend Modes
+background-blend-mode:
+  - { name: Internet Explorer, support: no-support, version: 11 }
+  - { name: Chrome, support: support, version: 37 }
+  - { name: Firefox, support: support, version: 32 }
+  - { name: Safari, support: support, version: 7.1 }
+  - { name: Opera, support: support, version: 24 }
+  - { name: iOS, support: support, version: 8 }
+  - { name: Android, support: no-support, version: 4.4 }
+
+mix-blend-mode:
+  - { name: Internet Explorer, support: no-support, version: 11 }
+  - { name: Chrome, support: no-support, version: 37 }
+  - { name: Firefox, support: support, version: 32 }
+  - { name: Safari, support: support, version: 7.1 }
+  - { name: Opera, support: no-support, version: 24 }
+  - { name: iOS, support: support, version: 8 }
+  - { name: Android, support: no-support, version: 4.4 }
+
+isolation:
+  - { name: Internet Explorer, support: no-support, version: 11 }
+  - { name: Chrome, support: no-support, version: 37 }
+  - { name: Firefox, support: no-support, version: 32 }
+  - { name: Safari, support: support, version: 7.1 } 
+  - { name: Opera, support: no-support, version: 24 }
+  - { name: iOS, support: support, version: 8 }
+  - { name: Android, support: no-support, version: 4.4 }
+
+# Drop Caps (initial-letter)
+initial-letter:
+  - { name: Internet Explorer, support: no-support, version: 11 }
+  - { name: Chrome, support: no-support, version: 37 }
+  - { name: Firefox, support: no-support, version: 32 }
+  - { name: Safari, support: partial-support, version: 7.1 }
+  - { name: Opera, support: no-support, version: 24 }
+  - { name: iOS, support: no-support, version: 8 }
+  - { name: Android, support: no-support, version: 4.4 }

_posts/2014-01-15-pull-quotes.md

@@ -38,7 +38,7 @@ Much of what you need to create pull-quotes on the web today is already in place
   </figcaption>
 </figure>
 
-Besides the list above, there's a new trick available that can help pull quotes blend better with your articles. By using CSS Shapes you can forget about rectangular pull quotes and use any shape you consider appropiate for each article. You can see a [live demo][demo-shapes]{:target="_blank"} of this feature on Adobe's CodePen page.
+Besides the list above, there's a new trick available that can help pull quotes blend better with your articles. By using CSS Shapes you can forget about rectangular pull quotes and use any shape you consider appropriate for each article. You can see a [live demo][demo-shapes]{:target="_blank"} of this feature on Adobe's CodePen page.
 
 Pull quotes integrate well with modern layout modules, such as multicolumn and regions. Using [CSS Regions][regions] you can separate the pull quote content from the article flow and define a separate region chain to display the pull quotes, thus achieving a superior, responsive page layout.
 

_posts/2014-02-01-captions.md

@@ -23,6 +23,9 @@ How about putting a caption on top of an image? That text shouldn’t obscure an
 
 ##When can I use it?
 
+{% assign browser_support = site.data.browser_support.shapes %}
+{% include browser-support.html %}
+
 The examples using CSS Shapes are in Chrome 37+ and in the latest Safari releases. For a view of current and upcoming browser support, check out [caniuse.com](http://caniuse.com/#search=shapes){:target="_blank"}.
 
 ##Where can I learn more?

_posts/2014-03-01-web-extensions.md

@@ -36,6 +36,9 @@ h2 {
 
 ##When can I use it?
 
+{% assign browser_support = site.data.browser_support.css-variables %}
+{% include browser-support.html %}
+
 CSS Custom Properties is now supported in Firefox, and it will be available in WebKit soon. For a view of current and upcoming browser support, check out [caniuse.com](http://caniuse.com/#search=cascading variables){:target="_blank"}.
 
 

_posts/2014-05-01-regions.md

@@ -25,6 +25,9 @@ The Adobe Web Platform team is contributing to the [CSS Regions Module Level 1](
 
 ##When can I use it?
 
+{% assign browser_support = site.data.browser_support.regions %}
+{% include browser-support.html %}
+
 Now in Safari on both OS X and iOS and also in Internet Explorer on Windows. 
 
 For a view of current and upcoming browser support, check out [caniuse.com](http://caniuse.com/#search=regions){:target="_blank"}.

_posts/2014-06-01-svg.md

@@ -196,6 +196,9 @@ At one end of the platform, the Adobe Web Platform team works to [improve the ou
 
 ##When can I use it?
 
+{% assign browser_support = site.data.browser_support.svg %}
+{% include browser-support.html %}
+
 Now in all major browsers. For a view of current and upcoming browser support, check out [caniuse.com](http://caniuse.com/#search=svg){:target="_blank"}.
 
 ##Where can I learn more?

_posts/2014-07-01-filter-effects.md

@@ -37,6 +37,9 @@ It's all encoded in the [Filter Effects Specification](http://www.w3.org/TR/filt
 
 ##When can I use it?
 
+{% assign browser_support = site.data.browser_support.filters %}
+{% include browser-support.html %}
+
 You can use filters now. Just make sure you have a less pretty fallback when they aren't available.
 
 [CSS filters](http://caniuse.com/#feat=css-filters){:target="_blank"} are available -webkit prefixed in Safari and Chrome.

_posts/2014-09-01-blend-modes.md

@@ -28,6 +28,9 @@ The Adobe Web Platform team is working on bringing blend modes to the HTML world
 
 ##When can I use it?
 
+{% assign browser_support = site.data.browser_support.blend-modes %}
+{% include browser-support.html %}
+
 The [background-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode) CSS property is available now in Safari, Firefox, Chrome, and Opera.
 
 The [mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) CSS property is available now in Safari and Firefox. In Chrome and Opera, it is behind an experimental features flag.