David's public fiddles
-
Use of position: relative to enable visibility of box shadow
No-Library (pure JS), HTML, CSS, JavaScript
-
Demonstration of @scope
The @scope rule enables the author to select for child elements of different ancestors.
-
Lc3f85h7
No-Library (pure JS), HTML, CSS, JavaScript
-
Additive effect of multiple identical filter functions
Here is a demonstration - using opacity() - of how filter functions are additive. That is, given identical filter functions, the net/final filter effect will be an accumulation of the individual filters. Note how calc() can be used to mimic the effect of multiple identical filters.
-
Additive effect of multiple identical filter functions
No-Library (pure JS), HTML, CSS, JavaScript
-
Reversing counter order of a list using reversed()
An example is shown of how reversed() can reverse the counting of an ordered list.
-
2shzq81p
No-Library (pure JS), HTML, CSS, JavaScript
-
qeptbykg
No-Library (pure JS), HTML, CSS, JavaScript
-
Simulation of border opacity using SVG basics shapes
Implemented using stroke-* properties.
-
Demonstration of the combined use of clamp() and a scaling factor on font-size
No-Library (pure JS), HTML, CSS, JavaScript
-
Text alignment using CSS grid
Presented here is an example of how text can be vertically aligned relative to a left aligned image.
-
@supports and @layer are part of cascade
A demo of how the successful and valid use of !important indicate that @supports and @layer declarations are part of the cascade.
-
Example of uncascaded properties within @counter-style
Presented here is an example of how the addition of !important to properties within the uncascaded at-rule @counter-style breaks the styling.
-
Uncascaded properties are invalidated by !important
Here is a demo of which compares 2 divs; one div which attempts to initialize its margin-left with !important, and another animation which attempts to initialize its margin-left without !important. Notice how the !important animation does NOT initialize properly, but the animation without !important DOES.
-
Pseudo element content applies to certain input types
Here is a demo of which input types can support the rendering of pseudocontent; in this case, the ::before pseudoelement was used.
-
2tgvmsec
No-Library (pure JS), HTML, CSS, JavaScript
-
Custom property set to zero can be used in multiple contexts
Here is an example of how <zero> can be used in multiple contexts, as both <length-percentage> and elsewhere as an <angle>.
-
Removal of whitespace before and after @supports conditions
Shown here is a demonstration of how removing the whitespace before each conjunction is valid syntax, whereas removing the whitespace after even one conjunction is invalid syntax.
-
Repeated slectors in selector list have no added effect
No-Library (pure JS), HTML, CSS, JavaScript
-
Browser Support - Experimental Properties
A color-coordinated list of several experimental CSS properties is presented; support is determined using the @supports rule and the property plus its initial value.