Add Can I use

zxianwei · Dec 18, 2016 · 3b3cf67 · 3b3cf67
1 parent 4b0b9e0
commit 3b3cf67
Show file tree

Hide file tree

Showing 89 changed files with 381 additions and 37 deletions.
diff --git a/_includes/collections/animations.html b/_includes/collections/animations.html
diff --git a/_includes/collections/box-model.html b/_includes/collections/box-model.html
diff --git a/_includes/collections/flexbox.html b/_includes/collections/flexbox.html
diff --git a/_includes/collections/positioning.html b/_includes/collections/positioning.html
diff --git a/_includes/collections/transitions.html b/_includes/collections/transitions.html
diff --git a/_includes/collections/typography.html b/_includes/collections/typography.html
diff --git a/_includes/lists/main-list.html b/_includes/lists/main-list.html
diff --git a/_includes/menu.html b/_includes/menu.html
@@ -89,18 +89,6 @@
   <p class="footer-title">
     <strong>{{site.subtitle}}</strong> <small>Created by <a href="https://twitter.com/jgthms">@jgthms</a></small>
   </p>
-  <div class="footer-facebook">
-    <iframe class="footer-iframe" data-src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fcssreference%2F&width=100&layout=button_count&action=like&size=small&show_faces=false&share=false&height=20&appId=1212191075486670" width="100" height="20" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
-  </div>
-  <div class="footer-github">
-    <iframe class="footer-iframe" data-src="https://ghbtns.com/github-btn.html?user=jgthms&repo=css-reference&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
-  </div>
-  <!-- <p class="footer-share footer-share--contribute">
-    <strong class="footer-share-label">Contribute</strong>
-    <a class="footer-share-button is-github" href="https://github.com/jgthms/css-reference" target="_blank">
-      {% include svg/github.html %}
-    </a>
-  </p> -->
   <p class="footer-share footer-share--social">
     <strong class="footer-share-label">Share</strong>
     <a class="footer-share-button is-twitter"
@@ -120,4 +108,16 @@
     </a>
     <a id="menu-nav-open" class="footer-share-nav">Menu</a>
   </p>
+  <div class="footer-facebook">
+    <iframe class="footer-iframe" data-src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fcssreference%2F&width=100&layout=button_count&action=like&size=small&show_faces=false&share=false&height=20&appId=1212191075486670" width="100" height="20" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
+  </div>
+  <div class="footer-github">
+    <iframe class="footer-iframe" data-src="https://ghbtns.com/github-btn.html?user=jgthms&repo=css-reference&type=star&count=true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe>
+  </div>
+  <!-- <p class="footer-share footer-share--contribute">
+    <strong class="footer-share-label">Contribute</strong>
+    <a class="footer-share-button is-github" href="https://github.com/jgthms/css-reference" target="_blank">
+      {% include svg/github.html %}
+    </a>
+  </p> -->
 </footer>
diff --git a/_layouts/collection.html b/_layouts/collection.html
@@ -30,10 +30,30 @@
     {% include menu.html %}
     <main class="main">
       <header class="heading">
-        <h1 class="heading-title">
-          <strong>{{page.collection_name}}</strong> in CSS
-        </h1>
-        <p class="heading-description">The CSS properties that allow you to {{page.description}}</p>
+        <div class="heading-content">
+          <h1 class="heading-title">
+            <strong>{{page.collection_name}}</strong> in CSS
+          </h1>
+          <p class="heading-description">The CSS properties that allow you to {{page.description}}</p>
+        </div>
+        <p class="heading-share">
+          <strong class="heading-share-label">Share this page</strong>
+          <a class="heading-share-button is-twitter"
+            data-social-network="Twitter"
+            data-social-action="tweet"
+            data-social-target="{{site.url}}{{page.url}}"
+            href="https://twitter.com/intent/tweet?url={{site.url | url_encode}}{{page.url | url_encode}}&text={{page.collection_name | prepend: 'Learn how ' | append: ' works in CSS' | url_encode}}"
+            rel="external nofollow"
+            target="_blank">
+            {% include svg/twitter.html %}
+          </a>
+          <a class="heading-share-button is-facebook"
+            href="http://www.facebook.com/sharer.php?u={{site.url | url_encode}}{{page.url | url_encode}}"
+            rel="external nofollow"
+            target="_blank">
+            {% include svg/facebook.html %}
+          </a>
+        </p>
       </header>
       <section class="list">
         {{content}}

diff --git a/css/website.css b/css/website.css
diff --git a/property/align-content/index.html b/property/align-content/index.html
@@ -6,8 +6,12 @@
 <section id="align-content" class="property">
   <header class="property-header">
     <nav class="property-links">
+        <a class="property-collection" target="_blank" href="{{site.url}}/flexbox/">
+          In collection: <strong>flexbox</strong>
+        </a>
       <a class="property-links-direct" href="{{site.url}}/property/align-content/" data-property-name="align-content" data-tooltip="Single page for this property" target="_blank">Pop out</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="align-content">Share</a>
+        <a target="_blank" href="http://caniuse.com/#feat=flexbox" data-tooltip="See on Can I use..." rel="external">Can I use</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/align-content" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>
     <h2 class="property-name">

diff --git a/property/align-items/index.html b/property/align-items/index.html
@@ -6,8 +6,12 @@
 <section id="align-items" class="property">
   <header class="property-header">
     <nav class="property-links">
+        <a class="property-collection" target="_blank" href="{{site.url}}/flexbox/">
+          In collection: <strong>flexbox</strong>
+        </a>
       <a class="property-links-direct" href="{{site.url}}/property/align-items/" data-property-name="align-items" data-tooltip="Single page for this property" target="_blank">Pop out</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="align-items">Share</a>
+        <a target="_blank" href="http://caniuse.com/#feat=flexbox" data-tooltip="See on Can I use..." rel="external">Can I use</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/align-items" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>
     <h2 class="property-name">

diff --git a/property/align-self/index.html b/property/align-self/index.html
@@ -6,8 +6,12 @@
 <section id="align-self" class="property">
   <header class="property-header">
     <nav class="property-links">
+        <a class="property-collection" target="_blank" href="{{site.url}}/flexbox/">
+          In collection: <strong>flexbox</strong>
+        </a>
       <a class="property-links-direct" href="{{site.url}}/property/align-self/" data-property-name="align-self" data-tooltip="Single page for this property" target="_blank">Pop out</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="align-self">Share</a>
+        <a target="_blank" href="http://caniuse.com/#feat=flexbox" data-tooltip="See on Can I use..." rel="external">Can I use</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/align-self" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>
     <h2 class="property-name">

diff --git a/property/animation-delay/index.html b/property/animation-delay/index.html
@@ -6,8 +6,12 @@
 <section id="animation-delay" class="property">
   <header class="property-header">
     <nav class="property-links">
+        <a class="property-collection" target="_blank" href="{{site.url}}/animations/">
+          In collection: <strong>animations</strong>
+        </a>
       <a class="property-links-direct" href="{{site.url}}/property/animation-delay/" data-property-name="animation-delay" data-tooltip="Single page for this property" target="_blank">Pop out</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="animation-delay">Share</a>
+        <a target="_blank" href="http://caniuse.com/#feat=css-animation" data-tooltip="See on Can I use..." rel="external">Can I use</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation-delay" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>
     <h2 class="property-name">

diff --git a/property/animation-direction/index.html b/property/animation-direction/index.html
@@ -6,8 +6,12 @@
 <section id="animation-direction" class="property">
   <header class="property-header">
     <nav class="property-links">
+        <a class="property-collection" target="_blank" href="{{site.url}}/animations/">
+          In collection: <strong>animations</strong>
+        </a>
       <a class="property-links-direct" href="{{site.url}}/property/animation-direction/" data-property-name="animation-direction" data-tooltip="Single page for this property" target="_blank">Pop out</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="animation-direction">Share</a>
+        <a target="_blank" href="http://caniuse.com/#feat=css-animation" data-tooltip="See on Can I use..." rel="external">Can I use</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation-direction" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>
     <h2 class="property-name">

diff --git a/property/animation-duration/index.html b/property/animation-duration/index.html
@@ -6,8 +6,12 @@
 <section id="animation-duration" class="property">
   <header class="property-header">
     <nav class="property-links">
+        <a class="property-collection" target="_blank" href="{{site.url}}/animations/">
+          In collection: <strong>animations</strong>
+        </a>
       <a class="property-links-direct" href="{{site.url}}/property/animation-duration/" data-property-name="animation-duration" data-tooltip="Single page for this property" target="_blank">Pop out</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="animation-duration">Share</a>
+        <a target="_blank" href="http://caniuse.com/#feat=css-animation" data-tooltip="See on Can I use..." rel="external">Can I use</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation-duration" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>
     <h2 class="property-name">

diff --git a/property/animation-fill-mode/index.html b/property/animation-fill-mode/index.html
@@ -6,8 +6,12 @@
 <section id="animation-fill-mode" class="property">
   <header class="property-header">
     <nav class="property-links">
+        <a class="property-collection" target="_blank" href="{{site.url}}/animations/">
+          In collection: <strong>animations</strong>
+        </a>
       <a class="property-links-direct" href="{{site.url}}/property/animation-fill-mode/" data-property-name="animation-fill-mode" data-tooltip="Single page for this property" target="_blank">Pop out</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="animation-fill-mode">Share</a>
+        <a target="_blank" href="http://caniuse.com/#feat=css-animation" data-tooltip="See on Can I use..." rel="external">Can I use</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation-fill-mode" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>
     <h2 class="property-name">

diff --git a/property/animation-iteration-count/index.html b/property/animation-iteration-count/index.html
@@ -6,8 +6,12 @@
 <section id="animation-iteration-count" class="property">
   <header class="property-header">
     <nav class="property-links">
+        <a class="property-collection" target="_blank" href="{{site.url}}/animations/">
+          In collection: <strong>animations</strong>
+        </a>
       <a class="property-links-direct" href="{{site.url}}/property/animation-iteration-count/" data-property-name="animation-iteration-count" data-tooltip="Single page for this property" target="_blank">Pop out</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="animation-iteration-count">Share</a>
+        <a target="_blank" href="http://caniuse.com/#feat=css-animation" data-tooltip="See on Can I use..." rel="external">Can I use</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation-iteration-count" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>
     <h2 class="property-name">

diff --git a/property/animation-name/index.html b/property/animation-name/index.html
@@ -6,8 +6,12 @@
 <section id="animation-name" class="property">
   <header class="property-header">
     <nav class="property-links">
+        <a class="property-collection" target="_blank" href="{{site.url}}/animations/">
+          In collection: <strong>animations</strong>
+        </a>
       <a class="property-links-direct" href="{{site.url}}/property/animation-name/" data-property-name="animation-name" data-tooltip="Single page for this property" target="_blank">Pop out</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="animation-name">Share</a>
+        <a target="_blank" href="http://caniuse.com/#feat=css-animation" data-tooltip="See on Can I use..." rel="external">Can I use</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation-name" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>
     <h2 class="property-name">

diff --git a/property/animation-play-state/index.html b/property/animation-play-state/index.html
@@ -6,8 +6,12 @@
 <section id="animation-play-state" class="property">
   <header class="property-header">
     <nav class="property-links">
+        <a class="property-collection" target="_blank" href="{{site.url}}/animations/">
+          In collection: <strong>animations</strong>
+        </a>
       <a class="property-links-direct" href="{{site.url}}/property/animation-play-state/" data-property-name="animation-play-state" data-tooltip="Single page for this property" target="_blank">Pop out</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="animation-play-state">Share</a>
+        <a target="_blank" href="http://caniuse.com/#feat=css-animation" data-tooltip="See on Can I use..." rel="external">Can I use</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation-play-state" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>
     <h2 class="property-name">

diff --git a/property/animation-timing-function/index.html b/property/animation-timing-function/index.html
@@ -6,8 +6,12 @@
 <section id="animation-timing-function" class="property">
   <header class="property-header">
     <nav class="property-links">
+        <a class="property-collection" target="_blank" href="{{site.url}}/animations/">
+          In collection: <strong>animations</strong>
+        </a>
       <a class="property-links-direct" href="{{site.url}}/property/animation-timing-function/" data-property-name="animation-timing-function" data-tooltip="Single page for this property" target="_blank">Pop out</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="animation-timing-function">Share</a>
+        <a target="_blank" href="http://caniuse.com/#feat=css-animation" data-tooltip="See on Can I use..." rel="external">Can I use</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation-timing-function" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>
     <h2 class="property-name">

diff --git a/property/animation/index.html b/property/animation/index.html
@@ -6,8 +6,12 @@
 <section id="animation" class="property property--shorthand">
   <header class="property-header">
     <nav class="property-links">
+        <a class="property-collection" target="_blank" href="{{site.url}}/animations/">
+          In collection: <strong>animations</strong>
+        </a>
       <a class="property-links-direct" href="{{site.url}}/property/animation/" data-property-name="animation" data-tooltip="Single page for this property" target="_blank">Pop out</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="animation">Share</a>
+        <a target="_blank" href="http://caniuse.com/#feat=css-animation" data-tooltip="See on Can I use..." rel="external">Can I use</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>
     <h2 class="property-name">

diff --git a/property/background-attachment/index.html b/property/background-attachment/index.html
@@ -8,6 +8,7 @@
     <nav class="property-links">
       <a class="property-links-direct" href="{{site.url}}/property/background-attachment/" data-property-name="background-attachment" data-tooltip="Single page for this property" target="_blank">Pop out</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="background-attachment">Share</a>
+        <a target="_blank" href="http://caniuse.com/#feat=background-attachment" data-tooltip="See on Can I use..." rel="external">Can I use</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/background-attachment" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>
     <h2 class="property-name">

diff --git a/property/border-bottom-width/index.html b/property/border-bottom-width/index.html
@@ -6,6 +6,9 @@
 <section id="border-bottom-width" class="property">
   <header class="property-header">
     <nav class="property-links">
+        <a class="property-collection" target="_blank" href="{{site.url}}/box-model/">
+          In collection: <strong>box-model</strong>
+        </a>
       <a class="property-links-direct" href="{{site.url}}/property/border-bottom-width/" data-property-name="border-bottom-width" data-tooltip="Single page for this property" target="_blank">Pop out</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="border-bottom-width">Share</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/border-bottom-width" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>

diff --git a/property/border-left-width/index.html b/property/border-left-width/index.html
@@ -6,6 +6,9 @@
 <section id="border-left-width" class="property">
   <header class="property-header">
     <nav class="property-links">
+        <a class="property-collection" target="_blank" href="{{site.url}}/box-model/">
+          In collection: <strong>box-model</strong>
+        </a>
       <a class="property-links-direct" href="{{site.url}}/property/border-left-width/" data-property-name="border-left-width" data-tooltip="Single page for this property" target="_blank">Pop out</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="border-left-width">Share</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/border-left-width" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>

diff --git a/property/border-right-width/index.html b/property/border-right-width/index.html
@@ -6,6 +6,9 @@
 <section id="border-right-width" class="property">
   <header class="property-header">
     <nav class="property-links">
+        <a class="property-collection" target="_blank" href="{{site.url}}/box-model/">
+          In collection: <strong>box-model</strong>
+        </a>
       <a class="property-links-direct" href="{{site.url}}/property/border-right-width/" data-property-name="border-right-width" data-tooltip="Single page for this property" target="_blank">Pop out</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="border-right-width">Share</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/border-right-width" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>

diff --git a/property/border-top-width/index.html b/property/border-top-width/index.html
@@ -6,6 +6,9 @@
 <section id="border-top-width" class="property">
   <header class="property-header">
     <nav class="property-links">
+        <a class="property-collection" target="_blank" href="{{site.url}}/box-model/">
+          In collection: <strong>box-model</strong>
+        </a>
       <a class="property-links-direct" href="{{site.url}}/property/border-top-width/" data-property-name="border-top-width" data-tooltip="Single page for this property" target="_blank">Pop out</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="border-top-width">Share</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/border-top-width" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>

diff --git a/property/border-width/index.html b/property/border-width/index.html
@@ -6,6 +6,9 @@
 <section id="border-width" class="property">
   <header class="property-header">
     <nav class="property-links">
+        <a class="property-collection" target="_blank" href="{{site.url}}/box-model/">
+          In collection: <strong>box-model</strong>
+        </a>
       <a class="property-links-direct" href="{{site.url}}/property/border-width/" data-property-name="border-width" data-tooltip="Single page for this property" target="_blank">Pop out</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="border-width">Share</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/border-width" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>