diff --git a/snippet_data/snippets.json b/snippet_data/snippets.json index 59fba3963..4be60321c 100644 --- a/snippet_data/snippets.json +++ b/snippet_data/snippets.json @@ -257,7 +257,7 @@ "explanation": "\n\n1. `::-webkit-scrollbar` targets the whole scrollbar element.\n2. `::-webkit-scrollbar-track` targets only the scrollbar track.\n3. `::-webkit-scrollbar-thumb` targets the scrollbar thumb.\n\nThere are many other pseudo-elements that you can use to style scrollbars. For more info, visit the [WebKit Blog](https://webkit.org/blog/363/styling-scrollbars/).\n\n", "browserSupport": { "text": "\n\n⚠️ Scrollbar styling doesn't appear to be on any standards track.\n\n- https://caniuse.com/#feat=css-scrollbar\n", - "supportPercentage": 98.63 + "supportPercentage": 98.91 }, "codeBlocks": { "html": "
\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit.
\n Iure id exercitationem nulla qui repellat laborum vitae,
\n molestias tempora velit natus. Quas, assumenda nisi.
\n Quisquam enim qui iure, consequatur velit sit?\n

\n
", @@ -288,7 +288,7 @@ "explanation": "\n\n- `::selection` defines a pseudo selector on an element to style text within it when selected. Note that if you don't combine any other selector your style will be applied at document root level, to any selectable element.\n\n", "browserSupport": { "text": "\n\n⚠️ Requires prefixes for full support and is not actually in any specification.\n\n- https://caniuse.com/#feat=css-selection\n", - "supportPercentage": 90.77 + "supportPercentage": 89.11 }, "codeBlocks": { "html": "

Select some of this text.

", @@ -319,7 +319,7 @@ "explanation": "\n\n- `user-select: none` specifies that the text cannot be selected.\n\n_Note: This is not a secure method to prevent users from copying content._\n\n", "browserSupport": { "text": "\n\n- https://caniuse.com/#feat=user-select-none\n", - "supportPercentage": 98.82 + "supportPercentage": 99.7 }, "codeBlocks": { "html": "

You can select me.

\n

You can't select me!

", @@ -443,7 +443,7 @@ "explanation": "\n\n1. `position: relative` on the element establishes a Cartesian positioning context for psuedo-elements.\n2. `z-index: 1` establishes a new stacking context.\n3. `::after` defines a pseudo-element.\n4. `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent.\n5. `width: 100%` and `height: 100%` sizes the pseudo-element to fill its parent's dimensions, making it equal in size.\n6. `background: inherit` causes the pseudo-element to inherit the linear gradient specified on the element.\n7. `top: 0.5rem` offsets the pseudo-element down slightly from its parent.\n8. `filter: blur(0.4rem)` will blur the pseudo-element to create the appearance of a shadow underneath.\n9. `opacity: 0.7` makes the pseudo-element partially transparent.\n10. `z-index: -1` positions the pseudo-element behind the parent but in front of the background.\n\n", "browserSupport": { "text": "\n\n- https://caniuse.com/#feat=css-filters\n", - "supportPercentage": 98.67999999999999 + "supportPercentage": 100 }, "codeBlocks": { "html": "
", @@ -474,7 +474,7 @@ "explanation": "\n\n- The variables are defined globally within the `:root` CSS pseudo-class which matches the root element of a tree representing the document.\n- In HTML, `:root` represents the `` element and is identical to the selector `html`, except that its specificity is higher.\n\n", "browserSupport": { "text": "\n\n- https://caniuse.com/#feat=css-variables\n", - "supportPercentage": 97.16 + "supportPercentage": 98.68 }, "codeBlocks": { "html": "
Hover
", @@ -567,7 +567,7 @@ "explanation": "\n\n- `object-fit: contain` fits the entire image within the container while preserving its aspect ratio.\n- `object-fit: cover` fills the container with the image while preserving its aspect ratio.\n- `object-position: [x] [y]` positions the image within the container.\n\n", "browserSupport": { "text": "\n\n- https://caniuse.com/#feat=object-fit\n", - "supportPercentage": 99.61999999999999 + "supportPercentage": 100 }, "codeBlocks": { "html": "\n", @@ -629,7 +629,7 @@ "explanation": "\n\n- The psuedo class `:focus-within` applies styles to a parent element if any child element gets focused. For example, an `input` element inside a `form` element.\n\n", "browserSupport": { "text": "\n\n⚠️ Not supported in IE11 or the current version of Edge.\n\n- https://caniuse.com/#feat=css-focus-within\n", - "supportPercentage": 87.59 + "supportPercentage": 89.86 }, "codeBlocks": { "html": "
\n
\n
\n \n
\n
", @@ -723,7 +723,7 @@ "explanation": "\n\n1. `background: -webkit-linear-gradient(...)` gives the text element a gradient background.\n2. `webkit-text-fill-color: transparent` fills the text with a transparent color.\n3. `webkit-background-clip: text` clips the background with the text, filling the text with the gradient background as the color.\n\n", "browserSupport": { "text": "\n\n⚠️ Uses non-standard properties.\n\n- https://caniuse.com/#feat=text-stroke\n", - "supportPercentage": 99.4 + "supportPercentage": 100 }, "codeBlocks": { "html": "

Gradient text

", @@ -754,7 +754,7 @@ "explanation": "\n\n1. `display: grid` creates a grid layout\n2. `justify-content: center` centers the child horizontally.\n3. `align-items: center` centers the child vertically.\n\n", "browserSupport": { "text": "\n\n- https://caniuse.com/#feat=css-grid\n", - "supportPercentage": 97.91 + "supportPercentage": 99.05 }, "codeBlocks": { "html": "
\n
Centered content.
\n
", @@ -847,7 +847,7 @@ "explanation": "\n\n1. `transition: max-height: 0.5s cubic-bezier(...)` specifies that changes to `max-height` should be transitioned over 0.5 seconds, using an `ease-out-quint` timing function.\n2. `overflow: hidden` prevents the contents of the hidden element from overflowing its container.\n3. `max-height: 0` specifies that the element has no height initially.\n4. `.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.\n\n
\n\n1. `el.scrollHeight` is the height of the element including overflow, which will change dynamically based on the content of the element.\n2. `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.\n\n", "browserSupport": { "text": "\n\n
Requires JavaScript
\n⚠️ Causes reflow on each animation frame, which will be laggy if there are a large number of elements beneath the element that is transitioning in height.\n\n- https://caniuse.com/#feat=css-variables\n- https://caniuse.com/#feat=css-transitions\n", - "supportPercentage": 97.16 + "supportPercentage": 98.68 }, "codeBlocks": { "html": "
\n Hover me to see a height transition.\n
content
\n
", @@ -1033,7 +1033,7 @@ "explanation": "\n\n1. `--x` and `--y` are used to track the position of the mouse on the button.\n2. `--size` is used to keep modify of the gradient's dimensions.\n3. `background: radial-gradient(circle closest-side, pink, transparent);` creates the gradient at the correct postion.\n\n", "browserSupport": { "text": "\n\n- https://caniuse.com/#feat=css-variables\n", - "supportPercentage": 97.16 + "supportPercentage": 98.68 }, "codeBlocks": { "html": "", @@ -1283,7 +1283,7 @@ "explanation": "\n\n- The `all` property allows you to reset all styles (inherited or not) to default values.\n\n", "browserSupport": { "text": "\n\n⚠️ MS Edge status is under consideration.\n\n- https://caniuse.com/#feat=css-all\n", - "supportPercentage": 96.2 + "supportPercentage": 97.45 }, "codeBlocks": { "html": "
\n
Title
\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui\n repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui\n iure, consequatur velit sit?\n

\n
",