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 -->

4128
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -28,7 +28,7 @@
"node-sass": "^4.9.3",
"nodemon": "^1.18.4",
"normalize.css": "^8.0.0",
"parcel-bundler": "^1.10.3",
"parcel-bundler": "^1.11.0",
"prettier": "^1.14.3",
"pretty": "^2.0.0",
"prismjs": "^1.11.0",

13
scripts/build.js
View File

@ -95,7 +95,16 @@ for (const snippetFile of fs.readdirSync(SNIPPETS_PATH)) {
const featUsageShares = (snippetData.match(/https?:\/\/caniuse\.com\/#feat=.*/g) || []).map(
feat => {
const featData = caniuseDb.data[feat.match(/#feat=(.*)/)[1]]
return featData ? Number(featData.usage_perc_y + featData.usage_perc_a) : 100
// caniuse doesn't count "untracked" users, which makes the overall share appear much lower
// than it probably is. Most of these untracked browsers probably support these features.
// Currently it's around 5.3% untracked, so we'll use 4% as probably supporting the feature.
// Also the npm package appears to be show higher usage % than the main website, this shows
// about 0.2% lower than the main website when selecting "tracked users" (as of Feb 2019).
const UNTRACKED_PERCENT = 4
const usage = featData
? Number(featData.usage_perc_y + featData.usage_perc_a) + UNTRACKED_PERCENT
: 100
return Math.min(100, usage)
}
)
const browserSupportHeading = snippetEl.querySelector('h4:last-of-type')
@ -103,7 +112,7 @@ for (const snippetFile of fs.readdirSync(SNIPPETS_PATH)) {
createElement(`
<div>
<div class="snippet__browser-support">
${featUsageShares.length ? Math.min(...featUsageShares).toPrecision(3) : '99+'}%
${featUsageShares.length ? Math.min(...featUsageShares).toPrecision(3) : 100}%
</div>
</div>
`)

2
snippets/bouncing-loader.md
View File

@ -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 -->

2
snippets/box-sizing-reset.md
View File

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

2
snippets/button-border-animation.md
View File

@ -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 -->

2
snippets/calc.md
View File

@ -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 -->

2
snippets/circle.md
View File

@ -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 -->

2
snippets/constant-width-to-height-ratio.md
View File

@ -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 -->

2
snippets/counter.md
View File

@ -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 -->

2
snippets/custom-variables.md
View File

@ -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 -->

1
snippets/disable-selection.md
View File

@ -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

2
snippets/display-table-centering.md
View File

@ -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 -->

2
snippets/easing-variables.md
View File

@ -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 -->

2
snippets/etched-text.md
View File

@ -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 -->

2
snippets/fit-image-in-container.md
View File

@ -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 -->

2
snippets/fullscreen.md
View File

@ -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

2
snippets/grid-centering.md
View File

@ -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 -->

2
snippets/hover-shadow-box-animation.md
View File

@ -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

2
snippets/hover-underline-animation.md
View File

@ -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

2
snippets/not-selector.md
View File

@ -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 -->

2
snippets/offscreen.md
View File

@ -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

2
snippets/overflow-scroll-gradient.md
View File

@ -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 -->

2
snippets/popout-menu.md
View File

@ -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 -->

2
snippets/pretty-text-underline.md
View File

@ -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

2
snippets/shape-separator.md
View File

@ -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 -->

2
snippets/sibling-fade.md
View File

@ -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

2
snippets/system-font-stack.md
View File

@ -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 -->

2
snippets/transform-centering.md
View File

@ -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 -->

2
snippets/triangle.md
View File

@ -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 -->

2
snippets/truncate-text-multiline.md
View File

@ -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 -->

2
snippets/zebra-striped-list.md
View File

@ -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 -->