David's public fiddles
-
The flex property must include % sign for zero flex-basis preceding flex factors
The flex property consists of <flex-grow> || <flex-shrink> || <flex-basis>. The order of these properties may be changed; if flex-basis is placed first, and has a zero value, the percentage sign must be included or else the declaration is invalid (div.b in this case).
-
Comparison of display:inline-* properties - width, height, and text alignment
Demonstration of the similarities with a common height and width, and italicized text is center-aligned.
-
MathML testing
No-Library (pure JS), HTML, CSS, JavaScript
-
Math functions clamp to valid values when given invalid values
Values outside the allowed range of dimensions such as <length> will cause the declaration to be invalid. However, when using math functions such as calc(), invalid values are clamped to the nearest valid value and are considered valid. This is demonstrated here using a negative <length> for the padding property.
-
8msfeqkg
No-Library (pure JS), HTML, CSS, JavaScript
-
jQuery addClass example
Change class name on click in jQuery
-
Testing support of calc-sum comparison functions in media queries
Shown here is a demonstration of 3 calc-sum comparison functions and whether or not they are supported by the current browser.
-
font-family Can Literally be Strong of Valid Tokens
Since the <font-family> is the final parameter when using <font> shorthand, literally any valid token can be placed after the <font-size> / <line-height> is encountered.
-
Repeat periods are not parsed
Two examples of repeat periods - in different locations of a declaration - is demonstrated. In each case, the style is not applied because parsing breaks.
-
The Utility of Being Able to Insert CSS Comments Almost Anywhere
Here is an example of how having the flexibility to place comments nearly anywhere within a CSS declaration enables comments to be placed meaningfully for maximum readability. This can be helpful within an Agile team context.
-
Multiple semicolons can be placed at allowed locations within declaration block
Shown here is a demonstration of how multiple semicolons can be placed (a) between declarations (b) preceding any declarations (c) within a declaration as only content (d) at end of stylesheet without breaking stylesheet parsing.
-
Opacity is Clamped When Outside Range
CSS styling which shows how an opacity which is greater than the highest value of an <alpha-value> will be clamped to the nearest valid value. In this case, the computed value of the div is 1.
-
Quotes may not be necessary
If no escapable characters (such as whitespace) are present, surrounding strings with quotes may not be necessary depending on the browser.
-
Compare and contrast: valid and invalid use of calc() in media queries
This JSFiddle demonstrates that calc() functions in media queries are valid UNLESS (a) "mixed" units are used or (b) percentages are used.
-
cross-fade() does not work in latest versions of Chrome
caniuse.com lists versions of Chrome as early as 29, and 43, 49, 52, and 54+
-
Repeat hash symbols are not parsed
Two examples of repeat hash symbols - in different locations of a declaration - is demonstrated. In each case, the style is not applied because parsing breaks.
-
Properties which don't support negative <time> values will break animations with negative time values
A negative time will break the animation for a property which doesn't support negative time values. In this case, the animation-duration property does not support negative time values (as seen for the red <div>).
-
A properly formatted <time> requires a time unit
A properly formatted <time> requires a <number> immediately followed by a time unit, either s (for seconds), ms (for milliseconds), or a mixture of units as made possible by calc() (3rd <div>). In this example, the last <div> lacks a time unit, so the animation does not run.
-
Selectors that are out of scope will no longer be applied
A <label> is an inline element by default. The properties height and width require a block (or not inline) style. At large screen widths, the window is larger than 300px, and the display:block property is within "in-scope". However, at smaller widths (reduce your window size), the label is no longer display:block because the rule is not "in scope".
-
Deprecated gradients will not overwrite fallback values
In this example, the linear-gradient() function for the second <div> follows the modern (2018) syntax, and overwrites the fallback (background is red). The first <div> does overwrite the fallback too, but the syntax has been deprecated and may not render properly in every browser.