w3 PlayCSS Review

W3 PlayCSS Review

by sumkittehz.codes, 2023-04-17

W3 Schools has put up a new widget called PlayCSS – it is an interactive demonstration of enumerated-type values defined for CSS properties. We would provide a link to this widget page, but we do not find one, despite some searching. This is the first of the aspects of this ware that makes it seem somewhat unfinished.

Many CSS properties are included in the list of those that can be demonstrated, but not all, and the TryIt^™ examples are missing for many of the enumerated values shown in the demonstration.

The tool seems mostly unfinished. There is no externally-linkable landing page, and if one removes the query portion of the URLs that display the site manually – by backspacing them out, for instance – the page returns 404 or (worse) it shows the widget form, but it is not populated by any property names.

Additionally, there are no links to reference documentation from the tool page. While there is a Try It Yourself button on the page, there are - as mentioned above, quite a few enumerated property values that are demonstrated by the tool, but for which there do not seem to be any (public) examples.

A neat toy for learning CSS and studying the property value effects on element layout, but overall it does not yet function as a useable development tool, but rather as a learning by demonstration applet.

It is unfortunate this functionality is not integrated with the w3schools site and that it is missing some examples. Furthermore, there is at least one mis-direction in the indexing of the dataset; when selecting the Try It Yourself button from the demo for the display property the script re-directs the user to a TryIt example for the direction property.

This is a screen shot of the page that is sent to the browser when the user clicks the Try It Yourself button for the display property.

• This backdrop-filter CSS property example shows the key to floating text using translucent backgrounds:  playcss_backdrop_filter

• The CSS display property does not have a Try It Yourself example on the W3 Schools PlayCSS demo (see the screenshot, above):  playcss_display

  Furthermore, we find that the PlayCSS Demo is actually missing at least one of the values for the display property. As we can see from the CSS Property Reference for the CSS display Property at W3 schools, we find that at least one of the enumerated values for the display property is missing from the PlayCSS Demo for the display property, specificaly, the enumerated value inline-block is not shown in the demo.

  Here is a list of the property values shown for the CSS display Property: 

  		.value1 {display: none;}
  		.value2 {display: inline;}
  		.value3 {display: block;}
  		.value4 {display: inline-block;}
        

  It is impossible to tell from here if there are other missing records in the dataset.