David's public fiddles
-
Identical selectors - merge their declaration blocks for large file size savings, but only within the same scope
Different scopes for selectors can be created by including them within different @media rules, different @supports rules, or different namespaces (as a few examples). Here, the final instance of the #aaa selector cannot be merged with previous instances because they are in different scopes (different @media rules here).
-
Valid <color> formats
A sample of each of 6 different color formats is presented.
-
Replaced elements can not render ::after or ::before pseudoelement content
Replaced elements include <img> and <input>., but the <ul> and <div> elements are not replaced. In this example, ::before content is seen for the <div> and <ul> but not the other elements.
-
Pseudoclass selectors must be appropriate to the element for which the pseudoelement is an attribute
In this example, both the <div> and the <input> elements have styles for the :checked state. However, the :checked pseudoclass is only applicable to an <input> element here, and so can only be styled for the <input>. Click both the <div> and the checkbox to see the difference in applied styles.
-
Pseudoelement selectors must be appropriate to the element for which the pseudoelement is an attribute
In this example, both the <div> and the <input> elements have a placeholder attribute. However, the pseudoelement is only applicable to an <input> element here, and so can only be styled for the <input>.
-
Non-standard property values are not supported in every browser
For this particular property, "-moz-grabbing", you will see a "grabbing" hand in Firefox but in other browsers you will see the "default" cursor.
-
Non-standard properties are browser specific and are not on a standards track
In this example, -webkit-text-orientation renders the text upright and left-to-right in Chrome. However, Firefox (version=59) does not recognize this property, and renders the text vertically with each character rotated -90 degrees.
-
Support for experimental properties depends on the browser
In this example, the background-position-x property is supported in Internet Explorer 11 but not in Chrome 66 nor Firefox 59.
-
Identical selectors - merge their declaration blocks for large file size savings
Some of the largest file size savings in CSS stylesheets comes from combining the declaration blocks of identical selectors, as shown with the second <div>.
-
Identical declaration blocks can be merged by grouping selectors within a specific @media selector
Identical declaration blocks, within the scope of a particular @media selector, can be combined by simply taking the selectors of the identical blocks, and grouping them as a comma-separated list (as is the case with the "bbb" group)
-
Identical declaration blocks can be merged by grouping selectors
Identical declaration blocks can be combined by simply taking the selectors of the identical blocks, and grouping them as a comma-separated list (as is the case with the "bbb" group)
-
Support for styling the placeholder pseudoelement is browser dependent
Properties such as padding and hover transitions can be applied to the placeholder pseudoelement, but only in certain browsers (e.g. Chrome). Other browsersm such as Firefox, do not support these styles for ::placeholder.
-
Certain CSS properties only accept numeric values within a range
The CSS opacity property is an example of a property which only accepts a <number> within a certain range. Here, only numbers between 0 and 1 are valid.
-
The underscore hack should no longer be used
The "underscore hack" used to be an applicable IE specific hack that now no longer properly styles a property and should be avoided, even in IE.
-
The star hack should no longer be used
The "star hack" used to be an applicable IE specific hack that now no longer properly styles a property and should be avoided, even in IE.
-
Certain CSS properties are only valid for select pseudoelements
The content property is an example of a property which only works in conjunction with certain pseudoclass-containing selectors, such as ::after and ::before. It is improperly applied for the first div and properly applied for the second div.
-
An example of an unknown vs known font-family
An unknown font-family, as for the first <p> tag, will revert to the default font-family for the document.
-
Deprecated functions no longer work in current browsers and must be replaced
CSS functions such as alpha() no longer (at the time of this JSFiddle) work properly and must be replaced. In this example, alpha(opacity=30) is replaced by opacity:.3
-
@supports will break if parentheses are not closed properly
The first @supports rule does not properly close all parentheses, so the inner style is not supplied. However, the parentheses do properly close in the second example, so the style is applied.
-
Condition group rules such as @media must contain complete rule sets
No styles will be applied for declarations within an @media rule (or other conditional group rule) unless the declaration is part of a complete rule set.