From cd614d751ba19dd913b24858a710a51c7a0f0c86 Mon Sep 17 00:00:00 2001 From: Rebecca Hauck Date: Thu, 30 Oct 2014 14:19:14 -0700 Subject: [PATCH 1/2] fixed typo in pull quotes article --- _posts/2014-01-15-pull-quotes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_posts/2014-01-15-pull-quotes.md b/_posts/2014-01-15-pull-quotes.md index d847696..b4c6f3e 100644 --- a/_posts/2014-01-15-pull-quotes.md +++ b/_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 -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. From 9fd70b904ed497232c101e696a26d3a76256406b Mon Sep 17 00:00:00 2001 From: Rebecca Hauck Date: Thu, 30 Oct 2014 14:20:53 -0700 Subject: [PATCH 2/2] added browser support tables to all pages. fixes #155 --- _data/browser_support.yml | 85 +++++++++++++++++++++++++++++ _posts/2014-02-01-captions.md | 3 + _posts/2014-03-01-web-extensions.md | 3 + _posts/2014-05-01-regions.md | 3 + _posts/2014-06-01-svg.md | 3 + _posts/2014-07-01-filter-effects.md | 3 + _posts/2014-09-01-blend-modes.md | 3 + 7 files changed, 103 insertions(+) diff --git a/_data/browser_support.yml b/_data/browser_support.yml index 7d40f43..95da0bc 100644 --- a/_data/browser_support.yml +++ b/_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 } diff --git a/_posts/2014-02-01-captions.md b/_posts/2014-02-01-captions.md index 4d1c492..312864d 100644 --- a/_posts/2014-02-01-captions.md +++ b/_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? diff --git a/_posts/2014-03-01-web-extensions.md b/_posts/2014-03-01-web-extensions.md index 046a3c0..0bab03a 100644 --- a/_posts/2014-03-01-web-extensions.md +++ b/_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"}. diff --git a/_posts/2014-05-01-regions.md b/_posts/2014-05-01-regions.md index ef49dc6..324eee9 100644 --- a/_posts/2014-05-01-regions.md +++ b/_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"}. diff --git a/_posts/2014-06-01-svg.md b/_posts/2014-06-01-svg.md index 35f05b9..b3f372e 100644 --- a/_posts/2014-06-01-svg.md +++ b/_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? diff --git a/_posts/2014-07-01-filter-effects.md b/_posts/2014-07-01-filter-effects.md index e2b7591..3eb4043 100644 --- a/_posts/2014-07-01-filter-effects.md +++ b/_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. diff --git a/_posts/2014-09-01-blend-modes.md b/_posts/2014-09-01-blend-modes.md index d2a10af..6516b43 100644 --- a/_posts/2014-09-01-blend-modes.md +++ b/_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.