CSS Techniques

Last reviewed/updated: 03 Jun 2016 | Published: 22 Oct 2015 | Status: Active
Web browser support: Internet Explorer 10+, Edge 12+, Firefox 6+, Chrome 30+, Opera 17+

1. Introduction

A list of CSS techniques with their purpose, the significant selectors, styles, properties, and values used, and web browser support.

1.1. Abbreviations

  • IE = Internet Explorer.
  • ED = Edge = EdgeHTML rendering engine (ED12+) and/or Edge browser (ED20+).
  • FF = Firefox.
  • SF = Safari.
  • CH = Chrome.
  • OP = Opera.

2. CSS Techniques

CSS Techniques
Technique Purpose Significant Selectors / Styles / Properties / Values Used Web Browser Support
CSS Technique: Style Textboxes And Textareas (learnwebcoding.com)
  • Styles textboxes and textareas identically cross-browser.
  • input[type="text"], textarea, :-ms-input-placeholder, :-moz-placeholder, ::-moz-placeholder, ::-webkit-input-placeholder selectors. border-radius, opacity properties.
  • IE8+, ED12+, FF1.5+, SF3.1+, CH2+, OP9+. Support everything except possibly the older web browsers not supporting; 1.) the CSS border-radius property, 2.) the HTML placeholder attribute, and 3.) the CSS *placeholder selectors.
CSS Technique: Style Selectboxes (learnwebcoding.com)
  • Styles selectboxes nearly identically cross-browser.
  • Technique 1: select selector. overflow: hidden, background: url("dn_pnt_tri_8x4.gif") no-repeat 95%, width: 125% styles. border-radius property.
  • Technique 2: select, ::-ms-expand selectors. display: none, -moz-appearance: none, -webkit-appearance: none, appearance: none, background: url("dn_pnt_tri_8x4.gif") no-repeat 95%, padding: 4px 25px 4px 6px styles. border-radius property.
  • Technique 3: select selector. border-radius property.
  • Technique 1: IE8+, ED12+, FF3+, SF4+, CH28+, OP15+.
  • Technique 2: IE10+, ED12+, FF35+, SF3.1+, CH2+, OP15+.
  • Technique 3: IE8+, ED12+, FF1.5+, SF4+, CH2+, OP10+.
  • Techniques 1, 2, and 3: Support everything except possibly the older web browsers not supporting the CSS border-radius property.
CSS Technique: Style Checkboxes And Radio Buttons (learnwebcoding.com)
  • Styles checkboxes and radio buttons identically cross-browser.
  • Technique 1: background-color: #000 style.
  • Technique 2: color: transparent, color: inherit styles.
  • Techniques 1 and 2: input[type="checkbox"], input[type="radio"], label input[type="checkbox"] ~ span, label input[type="radio"] ~ span, label input[type="checkbox"]:checked ~ span, label input[type="radio"]:checked ~ span selectors.
  • Techniques 1 and 2: IE9+, ED12+, FF4+, SF5+, CH13+, OP11.60+.
CSS Technique: Reveal Fixed Web Page Footer Upon Scrolling (learnwebcoding.com)
  • Fixes footer to bottom of viewport.
  • Positions main in front of footer.
  • Reveals footer upon scrolling down web page.
  • Technique 1: header, main, footer type selectors.
  • Technique 2: div element class selectors.
  • Techniques 1 and 2: position: relative, z-index: 1, position: fixed, bottom: 0, left: 0, right: 0 styles.
  • Technique 1: IE9+, ED12+, FF3+, SF3.1+, CH2+, OP9+.
  • Technique 2: IE7+, ED12+, FF3+, SF3.1+, CH2+, OP9+.

3. Resources And Additional Information