Right now this only appears to work in the Firefox Developer Edition. display: contents
is supposed to display the contents of an element but not the element itself. When working properly you will see nothing but an unstyled H1
element (except for styling it can inherit from its parent DIV
), but not the DIV
itself (meaning that, in this instance, if display: contents
is not working you will see the green border around the one DIV
in the code). See comments in the CodePen for more information.
Test of CSS “display: contents”
In Uncategorized on February 9, 2015 at 6:21 pmCSS3 filter Property Test
In Uncategorized on January 28, 2015 at 2:40 pmThis is a test of the CSS Level 4 filter
property. It works in my current versions of Firefox, Chrome and Safari. This property allows you to apply Photoshop-like filters on images or any element in the DOM.
If it is working in your browser you will see various changes to the original image (which is shown unaltered at the beginning as a point of reference).
More information at SitePoint and Mozilla Developer Network.
Test of the CSS :matches pseudoclass
In Uncategorized on November 13, 2014 at 11:31 pmThis is a test of the CSS Level 4 :matches
pseudoclass, which seems to be implemented in current browsers as -moz-any
, -webkit-any
, and -blink-any
. It works in my current versions of Firefox, Chrome and Safari. The equivalent code for Opera and IE doesn’t seem to work at the moment, but if you know of a way to get them to work please leave a comment here.
If it is working in your browser the link text will appear green (whether visited or unvisited) and have a yellow background when it is hovered over, receives focus or is in the process of being clicked on.