andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve usage share count (#138)

Browse Source 
* Improve usage share

* Remove 'No caveats' note from all snippets

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

* transform -> transforms2d

* Add missing link for multiline truncate
This commit is contained in:
atomiks
2019-02-18 04:35:48 +11:00
committed by GitHub
parent 0d77e55c37
commit 39b676c125
33 changed files with 1860 additions and 2478 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
index.html
View File

@ -162,10 +162,9 @@
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
93.4%
97.4%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<ul>
<li><a href="https://caniuse.com/#feat=css-animation" target="_blank">https://caniuse.com/#feat=css-animation</a></li>
</ul>
@ -229,10 +228,9 @@
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
95.9%
99.9%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<ul>
<li><a href="https://caniuse.com/#feat=css3-boxsizing" target="_blank">https://caniuse.com/#feat=css3-boxsizing</a></li>
</ul>
@ -319,12 +317,10 @@
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
99+%
100%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<!-- tags: animation -->
<!-- tags: animation -->
<!-- date: 2018-10-30 -->
</div>
@ -374,10 +370,9 @@
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
93.0%
97.0%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<ul>
<li><a href="https://caniuse.com/#feat=calc" target="_blank">https://caniuse.com/#feat=calc</a></li>
</ul>
@ -413,10 +408,9 @@
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
93.7%
97.7%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<ul>
<li><a href="https://caniuse.com/#feat=border-radius" target="_blank">https://caniuse.com/#feat=border-radius</a></li>
</ul>
@ -467,7 +461,7 @@
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
99+%
100%
</div>
</div>
<p><span class="snippet__support-note">⚠️ For this snippet to work properly you need to ensure that there are no non-floating children in the container and that there are no tall floats before the clearfixed container but in the same formatting context (e.g. floated columns).</span></p>
@ -519,12 +513,10 @@
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
99+%
100%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<!-- tags: layout -->
<!-- tags: layout -->
</div>
<div class="snippet">
<h3 id="counter"><span>Counter</span><span class="tags__tag snippet__tag" data-type="visual"><i data-feather="eye"></i>visual</span><span class="tags__tag snippet__tag" data-type="other"><i data-feather="tag"></i>other</span></h3>
@ -593,10 +585,9 @@ li::before {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
95.9%
99.9%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<ul>
<li><a href="https://caniuse.com/#feat=css-counters" target="_blank">https://caniuse.com/#feat=css-counters</a></li>
</ul>
@ -667,7 +658,7 @@ li::before {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
86.7%
90.7%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Scrollbar styling doesn't appear to be on any standards track.</span></p>
@ -707,7 +698,7 @@ li::before {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
82.5%
86.5%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Requires prefixes for full support and is not actually
@ -760,10 +751,9 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
87.6%
91.6%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<ul>
<li><a href="https://caniuse.com/#feat=css-variables" target="_blank">https://caniuse.com/#feat=css-variables</a></li>
</ul>
@ -793,10 +783,11 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
89.2%
93.2%
</div>
</div>
<p><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></p>
<ul>
<li><a href="https://caniuse.com/#feat=user-select-none" target="_blank">https://caniuse.com/#feat=user-select-none</a></li>
@ -858,10 +849,9 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
99+%
100%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<ul>
<li><a href="https://caniuse.com/#search=display%3A%20table" target="_blank">https://caniuse.com/#search=display%3A%20table</a></li>
</ul>
@ -915,7 +905,7 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
93.4%
97.4%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Requires prefixes for full support.</span></p>
@ -987,7 +977,7 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
90.2%
94.2%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Requires prefixes for full support.</span></p>
@ -1081,10 +1071,9 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
87.6%
91.6%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<ul>
<li><a href="https://caniuse.com/#feat=css-variables" target="_blank">https://caniuse.com/#feat=css-variables</a></li>
</ul>
@ -1122,10 +1111,9 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
95.5%
99.5%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<ul>
<li><a href="https://caniuse.com/#feat=css-textshadow" target="_blank">https://caniuse.com/#feat=css-textshadow</a></li>
</ul>
@ -1167,7 +1155,7 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
95.5%
99.5%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Needs prefixes for full support.</span></p>
@ -1222,10 +1210,9 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
91.5%
95.5%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<ul>
<li><a href="https://caniuse.com/#feat=object-fit" target="_blank">https://caniuse.com/#feat=object-fit</a></li>
</ul>
@ -1267,7 +1254,7 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
95.5%
99.5%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Needs prefixes for full support.</span></p>
@ -1320,7 +1307,7 @@ form:focus-within {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
78.9%
82.9%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Not supported in IE11 or the current version of Edge.</span></p>
@ -1408,10 +1395,9 @@ If no link is provided, it defaults to 99+%. -->
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
81.6%
85.6%
</div>
</div>
<p><span class="snippet__support-note">83.38</span></p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen" target="_blank">https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen</a></li>
<li><a href="https://caniuse.com/#feat=fullscreen" target="_blank">https://caniuse.com/#feat=fullscreen</a></li>
@ -1466,7 +1452,7 @@ p {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
95.9%
99.9%
</div>
</div>
<ul>
@ -1505,7 +1491,7 @@ p {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
90.1%
94.1%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Uses non-standard properties.</span></p>
@ -1548,10 +1534,9 @@ p {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
88.3%
92.3%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<ul>
<li><a href="https://caniuse.com/#feat=css-grid" target="_blank">https://caniuse.com/#feat=css-grid</a></li>
</ul>
@ -1608,7 +1593,7 @@ p {
<h4>Browser Support</h4>
<div>
<div class="snippet__browser-support">
93.7%
97.7%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Needs alternate syntax and JavaScript user agent checking for full support.</span></p>
@ -1679,7 +1664,7 @@ el.style.setProperty('--max-height', height + 'px')
<h4>Browser Support</h4>
<div>
<div class="snippet__browser-support">
87.6%
91.6%
</div>
</div>
<p></p>
@ -1748,10 +1733,9 @@ el.style.setProperty('--max-height', height + 'px')
<h4>Browser Support</h4>
<div>
<div class="snippet__browser-support">
93.3%
97.3%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<ul>
<li><a href="https://caniuse.com/#feat=transforms3d" target="_blank">https://caniuse.com/#feat=transforms3d</a></li>
<li><a href="https://caniuse.com/#feat=css-transitions" target="_blank">https://caniuse.com/#feat=css-transitions</a></li>
@ -1830,10 +1814,9 @@ el.style.setProperty('--max-height', height + 'px')
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
93.5%
97.5%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<ul>
<li><a href="https://caniuse.com/#feat=transforms2d" target="_blank">https://caniuse.com/#feat=transforms2d</a></li>
<li><a href="https://caniuse.com/#feat=css-transitions" target="_blank">https://caniuse.com/#feat=css-transitions</a></li>
@ -1896,7 +1879,7 @@ body {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
95.5%
99.5%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Needs prefixes for full support.</span></p>
@ -1994,7 +1977,7 @@ btn.onmousemove = function(e) {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
87.6%
91.6%
</div>
</div>
<p></p>
@ -2058,10 +2041,9 @@ li:not(:last-child) {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
95.9%
99.9%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<ul>
<li><a href="https://caniuse.com/#feat=css-sel3" target="_blank">https://caniuse.com/#feat=css-sel3</a></li>
</ul>
@ -2113,10 +2095,9 @@ li:not(:last-child) {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
99+%
100%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<p>(Although <code>clip</code> technically has been depreciated, the newer <code>clip-path</code> currently has very limited browser support.)</p>
<ul>
<li><a href="https://caniuse.com/#search=clip" target="_blank">https://caniuse.com/#search=clip</a></li>
@ -2214,10 +2195,9 @@ li:not(:last-child) {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
93.5%
97.5%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<ul>
<li><a href="https://caniuse.com/#feat=css-gradients" target="_blank">https://caniuse.com/#feat=css-gradients</a></li>
</ul>
@ -2285,12 +2265,10 @@ li:not(:last-child) {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
99+%
100%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<!-- tags: interactivity -->
<!-- tags: interactivity -->
</div>
<div class="snippet">
<h3 id="pretty-text-underline"><span>Pretty text underline</span><span class="tags__tag snippet__tag" data-type="visual"><i data-feather="eye"></i>visual</span></h3>
@ -2350,10 +2328,9 @@ li:not(:last-child) {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
93.5%
97.5%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<ul>
<li><a href="https://caniuse.com/#feat=css-textshadow" target="_blank">https://caniuse.com/#feat=css-textshadow</a></li>
<li><a href="https://caniuse.com/#feat=css-gradients" target="_blank">https://caniuse.com/#feat=css-gradients</a></li>
@ -2396,7 +2373,7 @@ li:not(:last-child) {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
87.2%
91.2%
</div>
</div>
<p><span class="snippet__support-note">⚠️ MS Edge status is under consideration.</span></p>
@ -2454,10 +2431,9 @@ li:not(:last-child) {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
95.7%
99.7%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<ul>
<li><a href="https://caniuse.com/#feat=svg" target="_blank">https://caniuse.com/#feat=svg</a></li>
</ul>
@ -2502,10 +2478,9 @@ li:not(:last-child) {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
93.5%
97.5%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<ul>
<li><a href="https://caniuse.com/#feat=css-sel3" target="_blank">https://caniuse.com/#feat=css-sel3</a></li>
<li><a href="https://caniuse.com/#feat=css-transitions" target="_blank">https://caniuse.com/#feat=css-transitions</a></li>
@ -2548,12 +2523,10 @@ li:not(:last-child) {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
99+%
100%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<!-- tags: visual -->
<!-- tags: visual -->
</div>
<div class="snippet">
<h3 id="toggle-switch"><span>Toggle switch</span><span class="tags__tag snippet__tag" data-type="visual"><i data-feather="eye"></i>visual</span><span class="tags__tag snippet__tag" data-type="interactivity"><i data-feather="edit-2"></i>interactivity</span></h3>
@ -2639,7 +2612,7 @@ input[type='checkbox']:checked + .switch {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
93.7%
97.7%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Requires prefixes for full support.</span></p>
@ -2701,7 +2674,7 @@ input[type='checkbox']:checked + .switch {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
99+%
100%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Requires prefix for full support.</span></p>
@ -2746,12 +2719,10 @@ input[type='checkbox']:checked + .switch {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
99+%
100%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<!-- tags: visual -->
<!-- tags: visual -->
</div>
<div class="snippet">
<h3 id="truncate-text-multiline"><span>Truncate text multiline</span><span class="tags__tag snippet__tag" data-type="layout"><i data-feather="layout"></i>layout</span></h3>
@ -2821,12 +2792,10 @@ input[type='checkbox']:checked + .switch {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
99+%
100%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<!-- tags: layout -->
<!-- tags: layout -->
</div>
<div class="snippet">
<h3 id="truncate-text"><span>Truncate text</span><span class="tags__tag snippet__tag" data-type="layout"><i data-feather="layout"></i>layout</span></h3>
@ -2864,7 +2833,7 @@ input[type='checkbox']:checked + .switch {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
95.8%
99.8%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Only works for single line elements.</span></p>
@ -2912,10 +2881,9 @@ input[type='checkbox']:checked + .switch {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
95.9%
99.9%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<p><a href="https://caniuse.com/#feat=css-sel3" target="_blank">https://caniuse.com/#feat=css-sel3</a></p>
<!-- tags: visual -->