Travis build: 407
This commit is contained in:
30secondsofcode
@ -55,6 +55,3 @@ Note: `1rem` is usually `16px`.
|
||||
#### Browser support
|
||||
|
||||
- https://caniuse.com/#feat=css-animation
|
||||
|
||||
|
||||
|
||||
|
||||
@ -41,6 +41,3 @@ html {
|
||||
#### Browser support
|
||||
|
||||
- https://caniuse.com/#feat=css3-boxsizing
|
||||
|
||||
|
||||
|
||||
|
||||
@ -27,6 +27,3 @@ The function calc() allows to define CSS values with the use of mathematical exp
|
||||
#### Browser support
|
||||
|
||||
- https://caniuse.com/#feat=calc
|
||||
|
||||
|
||||
|
||||
|
||||
@ -26,6 +26,3 @@ Creates a circle shape with pure CSS.
|
||||
#### Browser support
|
||||
|
||||
- https://caniuse.com/#feat=border-radius
|
||||
|
||||
|
||||
|
||||
|
||||
@ -36,6 +36,3 @@ Ensures that an element self-clears its children.
|
||||
#### Browser support
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -33,6 +33,3 @@ Given an element of variable width, it will ensure its height remains proportion
|
||||
- This method also allows content to be placed inside the element normally.
|
||||
|
||||
#### Browser support
|
||||
|
||||
|
||||
|
||||
|
||||
@ -44,6 +44,3 @@ li::before {
|
||||
#### Browser support
|
||||
|
||||
- https://caniuse.com/#feat=css-counters
|
||||
|
||||
|
||||
|
||||
|
||||
@ -52,6 +52,3 @@ 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
|
||||
|
||||
|
||||
|
||||
|
||||
@ -30,6 +30,3 @@ Changes the styling of text selection.
|
||||
in any specification.</span>
|
||||
|
||||
- https://caniuse.com/#feat=css-selection
|
||||
|
||||
|
||||
|
||||
|
||||
@ -35,6 +35,3 @@ CSS variables that contain specific values to be reused throughout a document.
|
||||
#### Browser support
|
||||
|
||||
- https://caniuse.com/#feat=css-variables
|
||||
|
||||
|
||||
|
||||
|
||||
@ -27,6 +27,3 @@ Makes the content unselectable.
|
||||
<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
|
||||
|
||||
|
||||
|
||||
|
||||
@ -44,6 +44,3 @@ Vertically and horizontally centers a child element within its parent element us
|
||||
#### Browser support
|
||||
|
||||
- https://caniuse.com/#search=display%3A%20table
|
||||
|
||||
|
||||
|
||||
|
||||
@ -39,6 +39,3 @@ Creates a donut spinner that can be used to indicate the loading of content.
|
||||
|
||||
- https://caniuse.com/#feat=css-animation
|
||||
- https://caniuse.com/#feat=transforms2d
|
||||
|
||||
|
||||
|
||||
|
||||
@ -48,6 +48,3 @@ 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
|
||||
|
||||
|
||||
|
||||
|
||||
@ -54,12 +54,9 @@ powerful than the built-in `ease`, `ease-in`, `ease-out` and `ease-in-out`.
|
||||
|
||||
#### Explanation
|
||||
|
||||
- The variables are defined globally within the `:root` CSS pseudo-class which matches the root element of a tree representing the document.
|
||||
- The variables are defined globally within the `:root` CSS pseudo-class which matches the root element of a tree representing the document.
|
||||
- In HTML, `:root` represents the `<html>` element and is identical to the selector `html`, except that its specificity is higher.
|
||||
|
||||
#### Browser support
|
||||
|
||||
- https://caniuse.com/#feat=css-variables
|
||||
|
||||
|
||||
|
||||
|
||||
@ -27,6 +27,3 @@ Creates an effect where text appears to be "etched" or engraved into the backgro
|
||||
#### Browser support
|
||||
|
||||
- https://caniuse.com/#feat=css-textshadow
|
||||
|
||||
|
||||
|
||||
|
||||
@ -32,6 +32,3 @@ Evenly distributes child elements within a parent element.
|
||||
<span class="snippet__support-note">⚠️ Needs prefixes for full support.</span>
|
||||
|
||||
- https://caniuse.com/#feat=flexbox
|
||||
|
||||
|
||||
|
||||
|
||||
@ -29,6 +29,3 @@ 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
|
||||
|
||||
|
||||
|
||||
|
||||
@ -41,6 +41,3 @@ form:focus-within {
|
||||
If no link is provided, it defaults to 99+%. -->
|
||||
|
||||
- https://caniuse.com/#feat=css-focus-within
|
||||
|
||||
|
||||
|
||||
|
||||
@ -54,6 +54,3 @@ The :fullscreen CSS pseudo-class represents an element that's displayed when the
|
||||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen
|
||||
- https://caniuse.com/#feat=fullscreen
|
||||
|
||||
|
||||
|
||||
|
||||
@ -37,6 +37,3 @@ p {
|
||||
#### Browser support
|
||||
|
||||
- https://caniuse.com/#feat=inline-block
|
||||
|
||||
|
||||
|
||||
|
||||
@ -28,6 +28,3 @@ Gives text a gradient color.
|
||||
<span class="snippet__support-note">⚠️ Uses non-standard properties.</span>
|
||||
|
||||
- https://caniuse.com/#feat=text-stroke
|
||||
|
||||
|
||||
|
||||
|
||||
@ -27,6 +27,3 @@ Horizontally and vertically centers a child element within a parent element usin
|
||||
#### Browser support
|
||||
|
||||
- https://caniuse.com/#feat=css-grid
|
||||
|
||||
|
||||
|
||||
|
||||
@ -49,6 +49,3 @@ very sharp and crisp.
|
||||
<hr>
|
||||
|
||||
\*Chrome does not support subpixel values on `border`. Safari does not support subpixel values on `box-shadow`. Firefox supports subpixel values on both.
|
||||
|
||||
|
||||
|
||||
|
||||
@ -36,7 +36,9 @@ el.style.setProperty('--max-height', height + 'px')
|
||||
2. `overflow: hidden` prevents the contents of the hidden element from overflowing its container.
|
||||
3. `max-height: 0` specifies that the element has no height initially.
|
||||
4. `.target:hover > .el` specifies that when the parent is hovered over, target a child `.el` within it and use the `--max-height` variable which was defined by JavaScript.
|
||||
|
||||
---
|
||||
|
||||
1. `el.scrollHeight` is the height of the element including overflow, which will change dynamically based on the content of the element.
|
||||
2. `el.style.setProperty(...)` sets the `--max-height` CSS variable which is used to specify the `max-height` of the element the target is hovered over, allowing it to transition smoothly from 0 to auto.
|
||||
|
||||
@ -50,6 +52,3 @@ el.style.setProperty('--max-height', height + 'px')
|
||||
|
||||
- https://caniuse.com/#feat=css-variables
|
||||
- https://caniuse.com/#feat=css-transitions
|
||||
|
||||
|
||||
|
||||
|
||||
@ -41,6 +41,3 @@ Creates a shadow box around the text when it is hovered.
|
||||
|
||||
- https://caniuse.com/#feat=transforms3d
|
||||
- https://caniuse.com/#feat=css-transitions
|
||||
|
||||
|
||||
|
||||
|
||||
@ -52,6 +52,3 @@ Creates an animated underline effect when the text is hovered over.
|
||||
|
||||
- https://caniuse.com/#feat=transforms2d
|
||||
- https://caniuse.com/#feat=css-transitions
|
||||
|
||||
|
||||
|
||||
|
||||
@ -67,6 +67,3 @@ btn.onmousemove = function(e) {
|
||||
<span class="snippet__support-note">⚠️ Requires JavaScript.</span>
|
||||
|
||||
- https://caniuse.com/#feat=css-variables
|
||||
|
||||
|
||||
|
||||
|
||||
@ -41,6 +41,3 @@ li:not(:last-child) {
|
||||
#### Browser support
|
||||
|
||||
- https://caniuse.com/#feat=css-sel3
|
||||
|
||||
|
||||
|
||||
|
||||
@ -39,6 +39,3 @@ 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
|
||||
|
||||
|
||||
|
||||
|
||||
@ -60,6 +60,3 @@ Adds a fading gradient to an overflowing element to better indicate there is mor
|
||||
#### Browser support
|
||||
|
||||
- https://caniuse.com/#feat=css-gradients
|
||||
|
||||
|
||||
|
||||
|
||||
@ -42,6 +42,3 @@ Reveals an interactive popout menu on hover and focus.
|
||||
7. `.reference:focus-within > .popout-menu` ensures that the popout is shown when the focus is _within_ the reference.
|
||||
|
||||
#### Browser support
|
||||
|
||||
|
||||
|
||||
|
||||
@ -40,6 +40,3 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control
|
||||
|
||||
- https://caniuse.com/#feat=css-textshadow
|
||||
- https://caniuse.com/#feat=css-gradients
|
||||
|
||||
|
||||
|
||||
|
||||
@ -31,6 +31,3 @@ Resets all styles to default values with one property. This will not affect `dir
|
||||
<span class="snippet__support-note">⚠️ MS Edge status is under consideration.</span>
|
||||
|
||||
- https://caniuse.com/#feat=css-all
|
||||
|
||||
|
||||
|
||||
|
||||
@ -38,6 +38,3 @@ Uses an SVG shape to separate two different blocks to create more a interesting
|
||||
#### Browser support
|
||||
|
||||
- https://caniuse.com/#feat=svg
|
||||
|
||||
|
||||
|
||||
|
||||
@ -32,6 +32,3 @@ span {
|
||||
|
||||
- https://caniuse.com/#feat=css-sel3
|
||||
- https://caniuse.com/#feat=css-transitions
|
||||
|
||||
|
||||
|
||||
|
||||
@ -32,6 +32,3 @@ Uses the native font of the operating system to get close to a native app feel.
|
||||
10. `sans-serif` is the fallback sans-serif font if none of the other fonts are supported
|
||||
|
||||
#### Browser support
|
||||
|
||||
|
||||
|
||||
|
||||
@ -39,6 +39,3 @@ Vertically and horizontally centers a child element within its parent element us
|
||||
<span class="snippet__support-note">⚠️ Requires prefix for full support.</span>
|
||||
|
||||
- https://caniuse.com/#feat=transforms2d
|
||||
|
||||
|
||||
|
||||
|
||||
@ -26,6 +26,3 @@ Creates a triangle shape with pure CSS.
|
||||
- Experiment with the `px` values to change the proportion of the triangle.
|
||||
|
||||
#### Browser support
|
||||
|
||||
|
||||
|
||||
|
||||
@ -46,6 +46,3 @@ If the text is longer than one line, it will be truncated for `n` lines and end
|
||||
#### Browser support
|
||||
|
||||
- https://caniuse.com/#feat=css-gradients
|
||||
|
||||
|
||||
|
||||
|
||||
@ -30,6 +30,3 @@ 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
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user