CSS Testing Ground

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:

• Visualize User Agent Or Bootstrap Styles (learnwebcoding.com)

3. Visualize Bootstrap Media Query Viewport Breakpoints

A visual demonstration of Bootstrap media query viewport breakpoints:

• Visualize Bootstrap Media Query Viewport Breakpoints (learnwebcoding.com)

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

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

• Visualize CSS Style display: inline Compared To display: inline-block (learnwebcoding.com)

5. Visualize CSS Unit em Compared To rem

A visual comparison of CSS unit em to rem:

• Visualize CSS Unit em Compared To rem (learnwebcoding.com)

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:

• Do the ol ol, ol ul, ul ol, ul ul Descendant Selectors Style All Levels Of Various List Nesting Combinations? (learnwebcoding.com)

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:

• Web Browser Support For The HTML placeholder Attribute And The CSS *placeholder Selectors On Textboxes And Textareas: Tests And Results (learnwebcoding.com)

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:

• Web Browser Support For The New HTML5 Semantic Elements: Tests And Results (learnwebcoding.com)

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:

• Web Browser Support For The HTML noscript Element As A CSS Type Selector And As A Classed Element: Tests And Results (learnwebcoding.com)

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:

• Web Browser Support For Miscellaneous CSS Selectors, Styles, Properties, Values, And Units: Tests And Results (learnwebcoding.com)

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:

• 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 (learnwebcoding.com)