David's public fiddles
-
The 'only' keyword, unlike 'not', does not need to be followed by a media type or feature
The @media keywords 'only' and 'not' differ in their behavior. Specifically, in contrast to 'not', only can stand alone, without being followed by a media type or feature.
-
Sandbox
No-Library (pure JS), HTML, CSS, JavaScript
-
Simplified Syntax: Comparison of <selector-list> as argument vs chained pseudoclasses for :not()
Using a <selector-list> as an argument for :not() allows more concise and readable CSS markup to be included in stylesheets. However, as of February 2021, browser support is only ~20%.
-
Deprecated Syntax: HTML <=4 Elements Still Have Browser Dependent Support
Although several elements defined in the HTML namespace have been deprecated in HTML4 and 5, they may still have support in some browsers.
-
Optimizations: Keyframes "to" and "0%" are Equivalent
A demonstration of the equivalence of the @keyframes selector keyword "to" with the percentage analog "100%".
-
-moz-prefixed linear-gradient() renders correctly with modern syntax in Firefox
The unprefixed linear-gradient (and repeating-linear-gradient()) functions can use modern syntax ('to' keyword + color-hints per color-stop), and so can the -moz-prefixed functions in Firefox.
-
Mismatched attributes do not break styling
Shown here is an example of how attributes, normally associated with other HTML tags, can still be used for styling. In this case, target=_blank is normally associated with <a>, and type=text normally associated with <input>. They are mismatched here, but styles still render.
-
Using the unset keyword to mimic composition
The unset keyword resets a property to its inherited value, or its initial value if it does not inherit. In this case, a composition of properties (.composite) can serve as the parent, and the addition of classes can selectively remove each of these properties.
-
CSSBurner Can Fix Malformatted Syntax - Semicolon Interpolation
An example of malformatted markup is given. In the markup shown, a required semicolon is missing before the color property. Here, the color property, which immediately follows where the semicolon should be, is broken and does not render properly. CSSBurner can fix malformatted syntax by semicolon interpolation.
-
CSSBurner Can Fix Malformatted Syntax - Colon Interpolation
An example of malformatted markup is given. In the markup shown, a required colon is missing after the height property (height100px). Here, height does not render properly, however, the remaining property-value pairs do render properly. CSSBurner can fix malformatted syntax by colon interpolation.
-
Missing Function Arguments Break Rendering When the Argument is Not Optional
Two div elements are compared and contrasted for the effect of the presence or absence of a function argument. The sepia() function's argument is optional so passing 1 (the default), or not passing anything, has the same effect. In contrast, an angle must be passed for the rotate() function; in the first case, the div IS rotated but in the second case (where an angle is not passed), no rotation is applied. Use Developer Tools to inspect the second div and verify the transform is invalid.
-
Repeated Media Features Do Not Break Rendering
Shown here is an example of how multiple media feature repeats are present in a media query, but rendering still occurs as expected.
-
Custom Elements Can Still Be Styled With CSS
Shown here is an example of how custom XML elements can still be styled with CSS. In this example, a flexbox is created where the flex-items are custom elements with a variety of styles.
-
Legacy Color Function rgba() is Still Supported
The function rgba() is still supported for legacy reasons, however, the function rgb() should be used moving forward. Currently, both functions render identically.
-
Legacy Color Function hsla() is Still Supported
The function hsla() is still supported for legacy reasons, however, the function hsl() should be used moving forward. Currently, both functions render identically.
-
Invalid Characters Will Break Base64 Encoding
Shown here is a demonstration of how a single character, which is not a member of the base64-encloding character set, will break the rendering of a background image. In this case, a $ symbol was added to the base64 encoding for the background-image of the second square/div (with red border). This causes the rendering to break;
-
Identity Transforms Leave Target Unchanged
Shown here is a demonstration of how performing transforms on a target - when using identity values with respect to the operation - leave the target unchanged. Notice how the green div and the red div are identical in shape and orientation, even though the red div has multiple transforms acting on it.
-
Multiple Semicolons Can Terminate a Declaration
Shown here are several examples of how CSS declarations can be terminated with more than 1 semi-colon. The additional semicolons, while completely superfluous, are syntactically valid.
-
@supports selector() - testing support for a pseudoelement
Support for a pseudoelement, specifically ::-webkit-scrollbar-thumb, is demonstrated with the overflow property. This pseudoclass is supported in: 1. Chrome 86 2. Edge 87 3. Opera 72 but not Firefox 82. For additional context, see question on Stack Overflow: https://stackoverflow.com/questions/35000865/css-supports-pseudo-element
-
Calculations less than 0, for properties which do not accept negative values, are valid
Properties such as padding do not accept negative lengths. Inspecting the styles of elements with negative padding shows the property is invalid. However, by using calc() and related functions which generate a calculation, negative calculations will be computed as zero, and the property will be treated as VALID by the browser.