Update and run prettier
This commit is contained in:
@ -71,6 +71,6 @@ Note: `1rem` is usually `16px`.
|
||||
|
||||
<span class="snippet__support-note">✅ No caveats.</span>
|
||||
|
||||
* https://caniuse.com/#feat=css-animation
|
||||
- https://caniuse.com/#feat=css-animation
|
||||
|
||||
<!-- tags: animation -->
|
||||
|
||||
@ -32,7 +32,6 @@ html {
|
||||
.content-box {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
#### Demo
|
||||
@ -46,6 +45,6 @@ html {
|
||||
|
||||
<span class="snippet__support-note">✅ No caveats.</span>
|
||||
|
||||
* https://caniuse.com/#feat=css3-boxsizing
|
||||
- https://caniuse.com/#feat=css3-boxsizing
|
||||
|
||||
<!-- tags: layout -->
|
||||
|
||||
@ -32,6 +32,6 @@ values will create an ellipse.
|
||||
|
||||
<span class="snippet__support-note">✅ No caveats.</span>
|
||||
|
||||
* https://caniuse.com/#feat=border-radius
|
||||
- https://caniuse.com/#feat=border-radius
|
||||
|
||||
<!-- tags: visual -->
|
||||
|
||||
@ -52,6 +52,6 @@ You can create a ordered list using any type of HTML.
|
||||
|
||||
<span class="snippet__support-note">✅ No caveats.</span>
|
||||
|
||||
* https://caniuse.com/#feat=css-counters
|
||||
- https://caniuse.com/#feat=css-counters
|
||||
|
||||
<!-- tags: visual, other -->
|
||||
|
||||
@ -54,6 +54,6 @@ There are many other pseudo-elements that you can use to style scrollbars. For m
|
||||
|
||||
<span class="snippet__support-note">⚠️ Scrollbar styling doesn't appear to be on any standards track.</span>
|
||||
|
||||
* https://caniuse.com/#feat=css-scrollbar
|
||||
- https://caniuse.com/#feat=css-scrollbar
|
||||
|
||||
<!-- tags: visual -->
|
||||
|
||||
@ -32,6 +32,6 @@ Changes the styling of text selection.
|
||||
<span class="snippet__support-note">⚠️ Requires prefixes for full support and is not actually
|
||||
in any specification.</span>
|
||||
|
||||
* https://caniuse.com/#feat=css-selection
|
||||
- https://caniuse.com/#feat=css-selection
|
||||
|
||||
<!-- tags: visual -->
|
||||
|
||||
@ -41,6 +41,6 @@ Reuse variables throughout the document using the `var(--variable-name)` functio
|
||||
|
||||
<span class="snippet__support-note">✅ No caveats.</span>
|
||||
|
||||
* https://caniuse.com/#feat=css-variables
|
||||
- https://caniuse.com/#feat=css-variables
|
||||
|
||||
<!-- tags: other -->
|
||||
|
||||
@ -28,6 +28,6 @@ Makes the content unselectable.
|
||||
<span class="snippet__support-note">⚠️ Requires prefixes for full support.</span>
|
||||
<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
|
||||
- https://caniuse.com/#feat=user-select-none
|
||||
|
||||
<!-- tags: interactivity -->
|
||||
|
||||
@ -50,6 +50,6 @@ The outer parent ('.container' in this case) must have a fixed height and width.
|
||||
|
||||
<span class="snippet__support-note">✅ No caveats.</span>
|
||||
|
||||
* https://caniuse.com/#search=display%3A%20table
|
||||
- https://caniuse.com/#search=display%3A%20table
|
||||
|
||||
<!-- tags: layout -->
|
||||
|
||||
@ -41,7 +41,7 @@ serve as the loading indicator for the donut. Use `animation` to rotate the elem
|
||||
|
||||
<span class="snippet__support-note">⚠️ Requires prefixes for full support.</span>
|
||||
|
||||
* https://caniuse.com/#feat=css-animation
|
||||
* https://caniuse.com/#feat=transforms2d
|
||||
- https://caniuse.com/#feat=css-animation
|
||||
- https://caniuse.com/#feat=transforms2d
|
||||
|
||||
<!-- tags: animation -->
|
||||
|
||||
@ -50,6 +50,6 @@ Creates a shadow similar to `box-shadow` but based on the colors of the element
|
||||
|
||||
<span class="snippet__support-note">⚠️ Requires prefixes for full support.</span>
|
||||
|
||||
* https://caniuse.com/#feat=css-filters
|
||||
- https://caniuse.com/#feat=css-filters
|
||||
|
||||
<!-- tags: visual -->
|
||||
|
||||
@ -63,6 +63,6 @@ The variables are defined globally within the `:root` CSS pseudo-class which mat
|
||||
|
||||
<span class="snippet__support-note">✅ No caveats.</span>
|
||||
|
||||
* https://caniuse.com/#feat=css-variables
|
||||
- https://caniuse.com/#feat=css-variables
|
||||
|
||||
<!-- tags: animation -->
|
||||
|
||||
@ -35,6 +35,6 @@ of the background.
|
||||
|
||||
<span class="snippet__support-note">✅ No caveats.</span>
|
||||
|
||||
* https://caniuse.com/#feat=css-textshadow
|
||||
- https://caniuse.com/#feat=css-textshadow
|
||||
|
||||
<!-- tags: visual -->
|
||||
|
||||
@ -34,6 +34,6 @@ Alternatively, use `justify-content: space-around` to distribute the children wi
|
||||
|
||||
<span class="snippet__support-note">⚠️ Needs prefixes for full support.</span>
|
||||
|
||||
* https://caniuse.com/#feat=flexbox
|
||||
- https://caniuse.com/#feat=flexbox
|
||||
|
||||
<!-- tags: layout -->
|
||||
|
||||
@ -33,6 +33,6 @@ Horizontally and vertically centers a child element within a parent element usin
|
||||
|
||||
<span class="snippet__support-note">⚠️ Needs prefixes for full support.</span>
|
||||
|
||||
* https://caniuse.com/#feat=flexbox
|
||||
- https://caniuse.com/#feat=flexbox
|
||||
|
||||
<!-- tags: layout -->
|
||||
|
||||
@ -31,6 +31,6 @@ Gives text a gradient color.
|
||||
|
||||
<span class="snippet__support-note">⚠️ Uses non-standard properties.</span>
|
||||
|
||||
* https://caniuse.com/#feat=text-stroke
|
||||
- https://caniuse.com/#feat=text-stroke
|
||||
|
||||
<!-- tags: visual -->
|
||||
|
||||
@ -47,8 +47,8 @@ very sharp and crisp.
|
||||
|
||||
<span class="snippet__support-note">⚠️ Needs alternate syntax and JavaScript user agent checking for full support.</span>
|
||||
|
||||
* https://caniuse.com/#feat=css-boxshadow
|
||||
* https://caniuse.com/#feat=css-media-resolution
|
||||
- https://caniuse.com/#feat=css-boxshadow
|
||||
- https://caniuse.com/#feat=css-media-resolution
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
@ -59,7 +59,7 @@ el.style.setProperty('--max-height', height + 'px')
|
||||
beneath the element that is transitioning in height.
|
||||
</span>
|
||||
|
||||
* https://caniuse.com/#feat=css-variables
|
||||
* https://caniuse.com/#feat=css-transitions
|
||||
- https://caniuse.com/#feat=css-variables
|
||||
- https://caniuse.com/#feat=css-transitions
|
||||
|
||||
<!-- tags: animation -->
|
||||
|
||||
@ -59,7 +59,7 @@ Creates an animated underline effect when the text is hovered over.
|
||||
|
||||
<span class="snippet__support-note">✅ No caveats.</span>
|
||||
|
||||
* https://caniuse.com/#feat=transforms2d
|
||||
* https://caniuse.com/#feat=css-transitions
|
||||
- https://caniuse.com/#feat=transforms2d
|
||||
- https://caniuse.com/#feat=css-transitions
|
||||
|
||||
<!-- tags: animation -->
|
||||
|
||||
@ -48,6 +48,6 @@ The parent must have a viewport height. `flex-grow: 1` could be applied to the f
|
||||
|
||||
<span class="snippet__support-note">⚠️ Needs prefixes for full support.</span>
|
||||
|
||||
* https://caniuse.com/#feat=flexbox
|
||||
- https://caniuse.com/#feat=flexbox
|
||||
|
||||
<!-- tags: layout -->
|
||||
|
||||
@ -72,6 +72,6 @@ _TODO_
|
||||
<div class="snippet__requires-javascript">Requires JavaScript</div>
|
||||
<span class="snippet__support-note">⚠️ Requires JavaScript.</span>
|
||||
|
||||
* https://caniuse.com/#feat=css-variables
|
||||
- https://caniuse.com/#feat=css-variables
|
||||
|
||||
<!-- tags: visual, interactivity -->
|
||||
|
||||
@ -47,6 +47,6 @@ the `:last-child`.
|
||||
|
||||
<span class="snippet__support-note">✅ No caveats.</span>
|
||||
|
||||
* https://caniuse.com/#feat=css-sel3
|
||||
- https://caniuse.com/#feat=css-sel3
|
||||
|
||||
<!-- tags: visual -->
|
||||
|
||||
@ -44,6 +44,6 @@ A bulletproof way to completely hide an element visually and positionally in the
|
||||
|
||||
(Although `clip` technically has been depreciated, the newer `clip-path` currently has very limited browser support.)
|
||||
|
||||
* https://caniuse.com/#search=clip
|
||||
- https://caniuse.com/#search=clip
|
||||
|
||||
<!-- tags: layout, visual -->
|
||||
|
||||
@ -66,6 +66,6 @@ Adds a fading gradient to an overflowing element to better indicate there is mor
|
||||
|
||||
<span class="snippet__support-note">✅ No caveats.</span>
|
||||
|
||||
* https://caniuse.com/#feat=css-gradients
|
||||
- https://caniuse.com/#feat=css-gradients
|
||||
|
||||
<!-- tags: visual -->
|
||||
|
||||
@ -50,7 +50,7 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control
|
||||
|
||||
<span class="snippet__support-note">✅ No caveats.</span>
|
||||
|
||||
* https://caniuse.com/#feat=css-textshadow
|
||||
* https://caniuse.com/#feat=css-gradients
|
||||
- https://caniuse.com/#feat=css-textshadow
|
||||
- https://caniuse.com/#feat=css-gradients
|
||||
|
||||
<!-- tags: visual -->
|
||||
|
||||
@ -29,6 +29,6 @@ The `all` property allows you to reset all styles (inherited or not) to default
|
||||
|
||||
<span class="snippet__support-note">⚠️ MS Edge status is under consideration.</span>
|
||||
|
||||
* https://caniuse.com/#feat=css-all
|
||||
- https://caniuse.com/#feat=css-all
|
||||
|
||||
<!-- tags: visual -->
|
||||
|
||||
@ -42,6 +42,6 @@ Uses an SVG shape to separate two different blocks to create more a interesting
|
||||
|
||||
<span class="snippet__support-note">✅ No caveats.</span>
|
||||
|
||||
* https://caniuse.com/#feat=svg
|
||||
- https://caniuse.com/#feat=svg
|
||||
|
||||
<!-- tags: visual -->
|
||||
|
||||
@ -40,7 +40,7 @@ span {
|
||||
|
||||
<span class="snippet__support-note">✅ No caveats.</span>
|
||||
|
||||
* https://caniuse.com/#feat=css-sel3
|
||||
* https://caniuse.com/#feat=css-transitions
|
||||
- https://caniuse.com/#feat=css-sel3
|
||||
- https://caniuse.com/#feat=css-transitions
|
||||
|
||||
<!-- tags: interactivity -->
|
||||
|
||||
@ -66,6 +66,6 @@ This effect is styling only the `<label>` element to look like a toggle switch,
|
||||
|
||||
<span class="snippet__support-note">⚠️ Requires prefixes for full support.</span>
|
||||
|
||||
* https://caniuse.com/#feat=transforms2d
|
||||
- https://caniuse.com/#feat=transforms2d
|
||||
|
||||
<!-- tags: visual, interactivity -->
|
||||
|
||||
@ -43,6 +43,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/#search=transform
|
||||
|
||||
<!-- tags: layout -->
|
||||
|
||||
@ -34,6 +34,6 @@ If the text is longer than one line, it will be truncated and end with an ellips
|
||||
|
||||
<span class="snippet__support-note">⚠️ Only works for single line elements.</span>
|
||||
|
||||
* https://caniuse.com/#feat=text-overflow
|
||||
- https://caniuse.com/#feat=text-overflow
|
||||
|
||||
<!-- tags: layout -->
|
||||
|
||||
Reference in New Issue
Block a user