Improve usage share count (#138)

* Improve usage share

* Remove 'No caveats' note from all snippets

* Fix transform-centering usage: #search -> #feat

* transform -> transforms2d

* Add missing link for multiline truncate

snippets/bouncing-loader.md

@@ -65,8 +65,6 @@ Note: `1rem` is usually `16px`.
 
 #### Browser support
 
-<span class="snippet__support-note">✅ No caveats.</span>
-
 - https://caniuse.com/#feat=css-animation
 
 <!-- tags: animation -->

snippets/box-sizing-reset.md

@@ -43,8 +43,6 @@ html {
 
 #### Browser support
 
-<span class="snippet__support-note">✅ No caveats.</span>
-
 - https://caniuse.com/#feat=css3-boxsizing
 
 <!-- tags: layout -->

snippets/button-border-animation.md

@@ -56,7 +56,5 @@ Use the `:before` and `:after` pseduo-elements as borders that animate on hover.
 
 #### Browser support
 
-<span class="snippet__support-note">✅ No caveats.</span>
-
 <!-- tags: animation -->
 <!-- date: 2018-10-30 -->

snippets/calc.md

@@ -48,8 +48,6 @@ So now it's possible using calc():
 
 #### Browser support
 
-<span class="snippet__support-note">✅ No caveats.</span>
-
 - https://caniuse.com/#feat=calc
 
 <!-- tags: other -->

snippets/circle.md

@@ -30,8 +30,6 @@ values will create an ellipse.
 
 #### Browser support
 
-<span class="snippet__support-note">✅ No caveats.</span>
-
 - https://caniuse.com/#feat=border-radius
 
 <!-- tags: visual -->

snippets/constant-width-to-height-ratio.md

@@ -40,6 +40,4 @@ This method also allows content to be placed inside the element normally.
 
 #### Browser support
 
-<span class="snippet__support-note">✅ No caveats.</span>
-
 <!-- tags: layout -->

snippets/counter.md

@@ -50,8 +50,6 @@ You can create a ordered list using any type of HTML.
 
 #### Browser support
 
-<span class="snippet__support-note">✅ No caveats.</span>
-
 - https://caniuse.com/#feat=css-counters
 
 <!-- tags: visual, other -->

snippets/custom-variables.md

@@ -39,8 +39,6 @@ Reuse variables throughout the document using the `var(--variable-name)` functio
 
 #### Browser support
 
-<span class="snippet__support-note">✅ No caveats.</span>
-
 - https://caniuse.com/#feat=css-variables
 
 <!-- tags: other -->

snippets/disable-selection.md

@@ -26,6 +26,7 @@ Makes the content unselectable.
 #### Browser support
 
 <span class="snippet__support-note">⚠️ Requires prefixes for full support.</span>
+<br>
 <span class="snippet__support-note">⚠️ This is not a secure method to prevent users from copying content.</span>
 
 - https://caniuse.com/#feat=user-select-none

snippets/display-table-centering.md

@@ -46,8 +46,6 @@ The outer parent ('.container' in this case) must have a fixed height and width.
 
 #### Browser support
 
-<span class="snippet__support-note">✅ No caveats.</span>
-
 - https://caniuse.com/#search=display%3A%20table
 
 <!-- tags: layout -->

snippets/easing-variables.md

@@ -61,8 +61,6 @@ The variables are defined globally within the `:root` CSS pseudo-class which mat
 
 #### Browser support
 
-<span class="snippet__support-note">✅ No caveats.</span>
-
 - https://caniuse.com/#feat=css-variables
 
 <!-- tags: animation -->

snippets/etched-text.md

@@ -33,8 +33,6 @@ of the background.
 
 #### Browser support
 
-<span class="snippet__support-note">✅ No caveats.</span>
-
 - https://caniuse.com/#feat=css-textshadow
 
 <!-- tags: visual -->

snippets/fit-image-in-container.md

@@ -40,8 +40,6 @@ Changes the fit and position of an image within its container while preserving i
 
 #### Browser support
 
-<span class="snippet__support-note">✅ No caveats.</span>
-
 - https://caniuse.com/#feat=object-fit
 
 <!-- tags: layout, visual -->

snippets/fullscreen.md

@@ -55,8 +55,6 @@ The :fullscreen CSS pseudo-class represents an element that's displayed when the
 
 #### Browser support
 
-<span class="snippet__support-note">83.38</span>
-
 - https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen
 - https://caniuse.com/#feat=fullscreen
 

snippets/grid-centering.md

@@ -29,8 +29,6 @@ Horizontally and vertically centers a child element within a parent element usin
 
 #### Browser support
 
-<span class="snippet__support-note">✅ No caveats.</span>
-
 - https://caniuse.com/#feat=css-grid
 
 <!-- tags: layout -->

snippets/hover-shadow-box-animation.md

@@ -42,8 +42,6 @@ Creates a shadow box around the text whern it is hovered.
 
 #### Browser Support
 
-<span class="snippet__support-note">✅ No caveats.</span>
-
 - https://caniuse.com/#feat=transforms3d
 - https://caniuse.com/#feat=css-transitions
 

snippets/hover-underline-animation.md

@@ -57,8 +57,6 @@ Creates an animated underline effect when the text is hovered over.
 
 #### Browser support
 
-<span class="snippet__support-note">✅ No caveats.</span>
-
 - https://caniuse.com/#feat=transforms2d
 - https://caniuse.com/#feat=css-transitions
 

snippets/not-selector.md

@@ -44,8 +44,6 @@ the `:last-child`.
 
 #### Browser support
 
-<span class="snippet__support-note">✅ No caveats.</span>
-
 - https://caniuse.com/#feat=css-sel3
 
 <!-- tags: visual -->

snippets/offscreen.md

@@ -39,8 +39,6 @@ A bulletproof way to completely hide an element visually and positionally in the
 
 #### Browser support
 
-<span class="snippet__support-note">✅ No caveats.</span>
-
 (Although `clip` technically has been depreciated, the newer `clip-path` currently has very limited browser support.)
 
 - https://caniuse.com/#search=clip

snippets/overflow-scroll-gradient.md

@@ -64,8 +64,6 @@ Adds a fading gradient to an overflowing element to better indicate there is mor
 
 #### Browser support
 
-<span class="snippet__support-note">✅ No caveats.</span>
-
 - https://caniuse.com/#feat=css-gradients
 
 <!-- tags: visual -->

snippets/popout-menu.md

@@ -46,6 +46,4 @@ Reveals an interactive popout menu on hover and focus.
 
 #### Browser support
 
-<span class="snippet__support-note">✅ No caveats.</span>
-
 <!-- tags: interactivity -->

snippets/pretty-text-underline.md

@@ -48,8 +48,6 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control
 
 #### Browser support
 
-<span class="snippet__support-note">✅ No caveats.</span>
-
 - https://caniuse.com/#feat=css-textshadow
 - https://caniuse.com/#feat=css-gradients
 

snippets/shape-separator.md

@@ -40,8 +40,6 @@ Uses an SVG shape to separate two different blocks to create more a interesting
 
 #### Browser support
 
-<span class="snippet__support-note">✅ No caveats.</span>
-
 - https://caniuse.com/#feat=svg
 
 <!-- tags: visual -->

snippets/sibling-fade.md

@@ -34,8 +34,6 @@ span {
 
 #### Browser support
 
-<span class="snippet__support-note">✅ No caveats.</span>
-
 - https://caniuse.com/#feat=css-sel3
 - https://caniuse.com/#feat=css-transitions
 

snippets/system-font-stack.md

@@ -37,6 +37,4 @@ falls back to the next if it cannot find the font (on the system or defined in C
 
 #### Browser support
 
-<span class="snippet__support-note">✅ No caveats.</span>
-
 <!-- tags: visual -->

snippets/transform-centering.md

@@ -41,6 +41,6 @@ Note: Fixed height and width on parent element is for the demo only.
 
 <span class="snippet__support-note">⚠️ Requires prefix for full support.</span>
 
-- https://caniuse.com/#search=transform
+- https://caniuse.com/#feat=transforms2d
 
 <!-- tags: layout -->

snippets/triangle.md

@@ -34,6 +34,4 @@ Experiment with the `px` values to change the proportion of the triangle.
 
 #### Browser support
 
-<span class="snippet__support-note">✅ No caveats.</span>
-
 <!-- tags: visual -->

snippets/truncate-text-multiline.md

@@ -49,6 +49,6 @@ If the text is longer than one line, it will be truncated for `n` lines and end
 
 #### Browser support
 
-<span class="snippet__support-note">✅ No caveats.</span>
+- https://caniuse.com/#feat=css-gradients
 
 <!-- tags: layout -->

snippets/zebra-striped-list.md

@@ -32,8 +32,6 @@ Note that you can use it to apply different styles to other HTML elements like d
 
 #### Browser support
 
-<span class="snippet__support-note">✅ No caveats.</span>
-
 https://caniuse.com/#feat=css-sel3
 
 <!-- tags: visual -->