CSS Testing Ground

Last reviewed/updated: 16 Aug 2023 | Published: 27 Jul 2014 | Status: Active
Web browser support: Internet Explorer 10+, Edge 12+, Firefox 6+, Chrome 30+, Opera 17+

1. Introduction

A list of CSS coding examples to demonstrate and/or test how CSS works.

1.1. Abbreviations

  • IE = Internet Explorer.
  • ED = Edge Legacy 12 - 18 (EdgeHTML based) and Edge 79+ (Chromium based).
  • FF = Firefox.
  • SF = Safari.
  • CH = Chrome.
  • OP = Opera.

2. Visualize User Agent Or Bootstrap Styles

A visual demonstration of user agent or Bootstrap styles:


3. Visualize Bootstrap Media Query Viewport Breakpoints

A visual demonstration of Bootstrap media query viewport breakpoints:


4. Visualize CSS Style display: inline Compared To display: inline-block

A visual comparison of CSS style display: inline to display: inline-block:


5. Visualize CSS Unit em Compared To rem

A visual comparison of CSS unit em to rem:


6. Do the ol ol, ol ul, ul ol, ul ul Descendant Selectors Style All Levels Of Various List Nesting Combinations?

A test to determine if the ol ol, ol ul, ul ol, ul ul descendant selectors style all levels of various list nesting combinations:


7. Web Browser Support For The HTML placeholder Attribute And The CSS *placeholder Selectors On Textboxes And Textareas: Tests And Results

Tests to determine web browser support for the HTML placeholder attribute and the CSS *placeholder selectors on textboxes and textareas, and the results:


8. Web Browser Support For The New HTML5 Semantic Elements: Tests And Results

Tests to determine web browser support for the new HTML5 semantic elements, and the results:


9. Web Browser Support For The HTML noscript Element As A CSS Type Selector And As A Classed Element: Tests And Results

Tests to determine web browser support for the HTML noscript element as a CSS type selector and as a classed element, and the results:


10. Web Browser Support For Miscellaneous CSS Selectors, Styles, Properties, Values, And Units: Tests And Results

Tests to determine web browser support for miscellaneous CSS selectors, styles, properties, values, and units, and the results:


11. HTML Snippet To Be Styled By Font Not Installed On Computer Operating System Gets font-family Style From User Agent Default Styles Standard/Default Font Setting, Not By Inheritance From body Style Rule

Tests to determine how an HTML snippet styled with a font not installed on the computer operating system gets style: