\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
",
@@ -287,9 +296,10 @@
},
"meta": {
"hash": "e5544c894ee3cd4ce3352d10331e2f321c6d30b4a0a667434286c6d4951c3b0a",
- "firstSeen": "1567099321",
- "lastUpdated": "1567099321",
- "updateCount": 2
+ "firstSeen": "1567120231",
+ "lastUpdated": "1567120231",
+ "updateCount": 2,
+ "authorCount": 2
}
},
{
@@ -302,7 +312,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\nin any specification.\n\n- https://caniuse.com/#feat=css-selection\n",
- "supportPercentage": 90.1
+ "supportPercentage": 90.77
},
"codeBlocks": {
"html": "
Select some of this text.
",
@@ -316,9 +326,10 @@
},
"meta": {
"hash": "bf835c2f1d038e6b08d221c9fef85933757a80c67de555797c6bc63ff7035ae8",
- "firstSeen": "1567099321",
- "lastUpdated": "1567099321",
- "updateCount": 2
+ "firstSeen": "1567120231",
+ "lastUpdated": "1567120231",
+ "updateCount": 2,
+ "authorCount": 2
}
},
{
@@ -331,7 +342,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. Variables can also be scoped to a selector if defined within the block.\n- Declare a variable with `--variable-name:`.\n- Reuse variables throughout the document using the `var(--variable-name)` function.\n\n",
"browserSupport": {
"text": "\n\n- https://caniuse.com/#feat=css-variables\n",
- "supportPercentage": 96.51
+ "supportPercentage": 97.16
},
"codeBlocks": {
"html": "
CSS is awesome!
",
@@ -345,9 +356,10 @@
},
"meta": {
"hash": "7a0d1c46beceb336265b2ca27a4f3cf25ad332a5cd2e8c0b692a43ce5b329fef",
- "firstSeen": "1567099321",
- "lastUpdated": "1567099321",
- "updateCount": 2
+ "firstSeen": "1567120231",
+ "lastUpdated": "1567120231",
+ "updateCount": 2,
+ "authorCount": 2
}
},
{
@@ -360,7 +372,7 @@
"explanation": "\n\n- `user-select: none` specifies that the text cannot be selected.\n\n",
"browserSupport": {
"text": "\n\n⚠️ Requires prefixes for full support.\n \n⚠️ This is not a secure method to prevent users from copying content.\n\n- https://caniuse.com/#feat=user-select-none\n",
- "supportPercentage": 97.51
+ "supportPercentage": 98.82
},
"codeBlocks": {
"html": "
You can select me.
\n
You can't select me!
",
@@ -374,9 +386,10 @@
},
"meta": {
"hash": "02f6472568975f5897a84f8846d97f8561fc5334ddafac53e73adb52ccda5f29",
- "firstSeen": "1567099321",
- "lastUpdated": "1567099321",
- "updateCount": 2
+ "firstSeen": "1567120231",
+ "lastUpdated": "1567120231",
+ "updateCount": 2,
+ "authorCount": 2
}
},
{
@@ -403,9 +416,10 @@
},
"meta": {
"hash": "83c7806b0be2e50ca34f313912f9cb90682852790e6d0105a635f781212fa5b1",
- "firstSeen": "1567099321",
- "lastUpdated": "1567099321",
- "updateCount": 2
+ "firstSeen": "1567120231",
+ "lastUpdated": "1567120231",
+ "updateCount": 2,
+ "authorCount": 2
}
},
{
@@ -432,9 +446,10 @@
},
"meta": {
"hash": "4e7f5ce479955deb9830ca4a72fc8260c8863aa65d6f67f15e88a3f923c10c3a",
- "firstSeen": "1567099321",
- "lastUpdated": "1567099321",
- "updateCount": 2
+ "firstSeen": "1567120231",
+ "lastUpdated": "1567120231",
+ "updateCount": 2,
+ "authorCount": 2
}
},
{
@@ -464,7 +479,8 @@
"hash": "e7859bc139713ffe59a05904f6175e9578ad111ebe3405d58599846c44801606",
"firstSeen": "1539406050",
"lastUpdated": "1569669005",
- "updateCount": 4
+ "updateCount": 4,
+ "authorCount": 3
}
},
{
@@ -477,7 +493,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⚠️ Requires prefixes for full support.\n\n- https://caniuse.com/#feat=css-filters\n",
- "supportPercentage": 98.46
+ "supportPercentage": 98.67999999999999
},
"codeBlocks": {
"html": "",
@@ -491,9 +507,10 @@
},
"meta": {
"hash": "738fae9ee6d0a9fe84cdbdd632a93f651f8377ec7e9f647e1031207d99b819a5",
- "firstSeen": "1567099321",
- "lastUpdated": "1567099321",
- "updateCount": 2
+ "firstSeen": "1567120231",
+ "lastUpdated": "1567120231",
+ "updateCount": 2,
+ "authorCount": 2
}
},
{
@@ -506,7 +523,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": 96.51
+ "supportPercentage": 97.16
},
"codeBlocks": {
"html": "
Hover
",
@@ -520,9 +537,10 @@
},
"meta": {
"hash": "94ec3c4e6b02374b61367e8cf4edcb9532bb7297673a28acaee0ad3264adfa3d",
- "firstSeen": "1567099321",
- "lastUpdated": "1567099321",
- "updateCount": 2
+ "firstSeen": "1567120231",
+ "lastUpdated": "1567120231",
+ "updateCount": 2,
+ "authorCount": 2
}
},
{
@@ -549,9 +567,10 @@
},
"meta": {
"hash": "68da5c2e7399979db3aeb1022d13b0490fc71d55d068597544954706c7027bef",
- "firstSeen": "1567099321",
- "lastUpdated": "1567099321",
- "updateCount": 2
+ "firstSeen": "1567120231",
+ "lastUpdated": "1567120231",
+ "updateCount": 2,
+ "authorCount": 2
}
},
{
@@ -578,9 +597,10 @@
},
"meta": {
"hash": "86c8c53be49e82365f6d6f54a03b55d9a8888ccc85504fe0480499b0e68c7f5b",
- "firstSeen": "1567099321",
- "lastUpdated": "1567099321",
- "updateCount": 2
+ "firstSeen": "1567120231",
+ "lastUpdated": "1567120231",
+ "updateCount": 2,
+ "authorCount": 2
}
},
{
@@ -593,7 +613,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.5
+ "supportPercentage": 99.61999999999999
},
"codeBlocks": {
"html": "\n",
@@ -608,9 +628,10 @@
},
"meta": {
"hash": "5d09d5e54b7436f047db61223cff15dce2f17f6cffe5e71e0f9061337de3068e",
- "firstSeen": "1567099321",
- "lastUpdated": "1567099321",
- "updateCount": 2
+ "firstSeen": "1567120231",
+ "lastUpdated": "1567120231",
+ "updateCount": 2,
+ "authorCount": 2
}
},
{
@@ -637,9 +658,10 @@
},
"meta": {
"hash": "a2bf8cfa4de368cfb10d013b6bbb87c598e0cccacfe816972da4ac668c6abc1a",
- "firstSeen": "1567099321",
- "lastUpdated": "1567099321",
- "updateCount": 2
+ "firstSeen": "1567120231",
+ "lastUpdated": "1567120231",
+ "updateCount": 2,
+ "authorCount": 2
}
},
{
@@ -652,7 +674,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\n\n- https://caniuse.com/#feat=css-focus-within\n",
- "supportPercentage": 85.39
+ "supportPercentage": 87.59
},
"codeBlocks": {
"html": "
\n \n
",
@@ -667,9 +689,10 @@
},
"meta": {
"hash": "a12b394af0b2df2f7fa6bae2cbbe3a8b01ba74510991dcfe3952b8bd9c0a5a41",
- "firstSeen": "1567099321",
- "lastUpdated": "1567099321",
- "updateCount": 2
+ "firstSeen": "1567120231",
+ "lastUpdated": "1567120231",
+ "updateCount": 2,
+ "authorCount": 2
}
},
{
@@ -682,7 +705,7 @@
"explanation": "\n\n1. `fullscreen` CSS pseudo-class selector is used to select and style an element that is being displayed in fullscreen mode.\n\n",
"browserSupport": {
"text": "\n\n- https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen\n- https://caniuse.com/#feat=fullscreen\n",
- "supportPercentage": 99.11
+ "supportPercentage": 100
},
"codeBlocks": {
"html": "
\n
Click the button below to enter the element into fullscreen mode.
\n
I change color in fullscreen mode!
\n \n \n
",
@@ -696,9 +719,10 @@
},
"meta": {
"hash": "23cab923692f5e3250be38b3c970dc11f3bab34159812aaf979ea09bce441c30",
- "firstSeen": "1567099321",
+ "firstSeen": "1567120231",
"lastUpdated": "1567144393",
- "updateCount": 3
+ "updateCount": 3,
+ "authorCount": 3
}
},
{
@@ -725,9 +749,10 @@
},
"meta": {
"hash": "0515f03b1505eafa21e0d0d7377facbe4aaa9159996906dd4ed2857ee137073a",
- "firstSeen": "1567099321",
- "lastUpdated": "1567099321",
- "updateCount": 2
+ "firstSeen": "1567120231",
+ "lastUpdated": "1567120231",
+ "updateCount": 2,
+ "authorCount": 2
}
},
{
@@ -740,7 +765,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": 98.65
+ "supportPercentage": 99.4
},
"codeBlocks": {
"html": "
",
@@ -783,9 +809,10 @@
},
"meta": {
"hash": "f6fbb076581e63ab9187ca63d8620f88de19d7a78c46f9ded903271461a445bf",
- "firstSeen": "1567099321",
- "lastUpdated": "1567099321",
- "updateCount": 2
+ "firstSeen": "1567120231",
+ "lastUpdated": "1567120231",
+ "updateCount": 2,
+ "authorCount": 2
}
},
{
@@ -812,9 +839,10 @@
},
"meta": {
"hash": "cd26d0cd1831474afdc784b4459b60062243e2d390975e94cd7d51fa776c603f",
- "firstSeen": "1567099321",
- "lastUpdated": "1567099321",
- "updateCount": 2
+ "firstSeen": "1567120231",
+ "lastUpdated": "1567120231",
+ "updateCount": 2,
+ "authorCount": 2
}
},
{
@@ -844,7 +872,8 @@
"hash": "06f323835f89d7e055e932ee67c23a9c5d2edeb7e62c1029c0528238e17a08f8",
"firstSeen": "1570668578",
"lastUpdated": "1574679180",
- "updateCount": 11
+ "updateCount": 11,
+ "authorCount": 7
}
},
{
@@ -857,7 +886,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\n ⚠️ Causes reflow on each animation frame, which will be laggy if there are a large number of elements\n beneath the element that is transitioning in height.\n\n\n- https://caniuse.com/#feat=css-variables\n- https://caniuse.com/#feat=css-transitions\n",
- "supportPercentage": 96.51
+ "supportPercentage": 97.16
},
"codeBlocks": {
"html": "