CSS/SASS: Reset

Reset (28.07.2015)

/**
 * @section     reset
 ***********************************************************************
 */

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    outline: none;
}

a:active { /* IE */
    background-color: transparent;
}

iframe,
img {
    display: block; /* ff spacing fix */
    border: 0;
}

input,
textarea {
  outline: none;
}

input[type=text],
input[type=password],
input[type=number],
input[type=color],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime],
input[type=datetime-local],
input[type=search],
input[type=tel],
input[type=url],
input[type=email],
textarea {
  -webkit-appearance: none;
  border-radius: 0;
  display: block; /* webkit spacing fix */
}

textarea {
  overflow: auto;
}

/* Remove webkit styling from button elements */
button,
input[type="button"],
input[type="submit"] {
    -webkit-appearance: none;
    border-radius: 0;
}

button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner { /* ff spacing fix */
    border: 0;
    padding: 0;
}

table {
    border-collapse:collapse;
    border-spacing: 0;
}

tr {
    vertical-align: top;
}

th, td {
    padding: 0;
}

SASS Reset (28.07.2015)

* {
    margin: 0;
    padding: 0;
}

a {
  text-decoration: none;
  outline: none;
}

// IE active fix
a:active {
  background-color: transparent;
}

// ff spacing fix
iframe,
img {
  display: block;
  border: 0;
}

input,
textarea {
  outline: none;
}

input[type=text],
input[type=password],
input[type=number],
input[type=color],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime],
input[type=datetime-local],
input[type=search],
input[type=tel],
input[type=url],
input[type=email],
textarea {
  -webkit-appearance: none;
  border-radius: 0;
  display: block; /* webkit spacing fix */
}

textarea {
  overflow: auto;
}

// Remove webkit styling from button elements
button,
input[type="button"],
input[type="submit"] {
  -webkit-appearance: none;
  border-radius: 0;
}

// ff spacing fix
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
  border: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

tr {
  vertical-align: top;
}

<a>

/* remove dotted selected-outline */
a {
    outline: none;
}

/* remove background-color from active state in IE */
a:active {
    background-color: transparent;
}

Leider ist mit dieser Option die Navigation per Tastatur nicht mehr möglich, da kein optisches Feedback mehr vorhanden ist.

<button>

Firefox erzeugt standardmässig einen zusätzlichen Innenabstand bei <button>-Objekten, was besonders bei layoutlosen Buttons auffällt.

/* remove inner button spacing in ff **/
button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

iOS wendet auf Button-Elemente standartmässig ein eigenes Layout an.

/* Remove webkit styling from button elements */
button,
input[type="button"],
input[type="submit"] {
    -webkit-appearance: none;
    border-radius: 0;
}

<img>

/* Remove bottom spacing in Firefox */
img {
  display: block;
}

<input>

Safari Webkit Style entfernen.

/* disable iPhone styling */
input,
textarea {
  -webkit-appearance: none;
  border-radius: 0;
}

<textarea>

CSS3 erlaubt das festlegen von Vergrösserungs-Eigenschaften für Textboxen (Anwendung auf DIV Element is ebenfalls möglich).

/* set resize options for textarea */
textarea {
  resize: none; /* resize disabled */
  resize: horizontal; /* only horizontal */
  resize: vertical; /* only vertical */
  resize: both;
  resize: inherit;
}

IE zeigt standardmässig eine deaktivierte Scrollbar für Textareas an.

/* display scrollbar only if needed (IE) */
textarea {
  overflow: auto;
}