David's public fiddles
-
Not all CSS properties can be animated
In this case, the font-family property cannot be animated (in div A), so nothing happens. In contrast, font-size can be animated, so font-size changes for div B.
-
@keyframes rules with invalid identifiers will break
The identifier for an @keyframes rule must be a valid CSS identifier and not match a reserved CSS keyword, otherwise the animation will not work.
-
@keyframes rules with identifiers which match reserved keywords will break
The identifier for an @keyframes rule must be a valid CSS identifier and not match a reserved CSS keyword, otherwise the animation will not work.
-
@keyframes rules require an identifier
The syntax for @keyframes requires a valid identifier immediately following the @keyframes, otherwise the rule will not animate anything.
-
Example of an invalid fallback for var()
When a custom-variable (in this case, --qqq) is not found in the var() function, a fallback may be used. However, if the fallback is not valid (as for #aaa here), then there will be no applied style.
-
The :focus pseudoclass requires focusable elements or a tabindex attribute on the target element
By default, input elements such as <input> and <textarea> can receive and be styled in response to a focus event. By default, an element such as a <div> cannot unless a tabindex attribute is set.
-
Quotes are recommended but not required around font family names
The W3C recommends placing quotes around font family names which contain escapable characters (such as spaces). However, these quotes are not necessary (see second <p> tag).
-
Repeat properties in declaration block - the last supported declaration determines the style
Within a declaration block, it is valid to repeat properties and in some cases is useful (e.g., to have a fallback if a property is not supported).
-
Display inline elements must be set to 'block' to set certain styles
Inline elements, such as <a> and <span>, are incompatible with certain properties, such as 'height' and 'width', unless the element'sdisplay is set to a non-inline display such as 'block' or 'inline-block'. See the second <div>. I created a YouTube video for this - https://www.youtube.com/watch?v=wWgdiERZ4sw
-
An example of overengineering a selector
Overengineering selectors will not only cause markup bloat, but will also potentially increase the maintenance required for your CSS. For use with the CSSBurner Blog.
-
Pseudoclass recognition for excluding attribute selector filters
In this example, since only radio buttons and checkboxes can be :checked, adding attribute selector filters as in the first div children is a waste of markup.
-
The ease of use of the ::selection pseudoclass
A demonstration of how easy it is to use and modify the styles of the ::selection pseudoclass compared to Javascript solutions. For use with the CSSBurner Blog.
-
Numbering non-list elements using CSS and jQuery
An attempt to show the ease of numbering non-list elements (in this case, a set of <p> elements) using CSS compared to using jQuery.
-
Using the selector list argument for :not()
On supporting browsers, there is no need to chain :not() pseudoclasses together to exclude multiple selectors. Instead, the selector list can be grouped using commas. As of March 2018, only Safari supports this.
-
Example of avoiding the use of the !important cascade
The !important rule should only be applied if absolutely necessary. Here is an example of how to rewrite selectors to avoid its use.
-
Using the calc() function to avoid writing Javascript
The calc() function enables the user to mix units of e.g. <length> to empower the user with some of the very basic functionality of Javascript, in this case calculating width.
-
Use of a complex selector in place of a simple selector
Complex selectors will require more thought to create, but with LARGE applications of repetitive blocks of HTML, they can help dramatically reduce DOM size and increase page load speed by styling elements that have id and class attributes removed.
-
Using the subsequent sibling selector to minimize CSS markup
The subsequent sibling selector is underutilized according to CSSBurner statistical analysis. Used properly is can reduce CSS markup (for use with CSSBurner Blog).
-
Using selector grouping to combine blocks of identical CSS
Grouping identical blocks simply requires selectors to be separated by a comma. This will save dozens or hundreds of kilobytes of redundancy in most stylesheets.
-
Using the :not() pseudoclass to reduce CSS markup
A comparison of how much CSS markup is saved when using :not() vs more traditional grouping