Lesenswert

 

Pseudo Klassen1

 

  1. :nth-child(N)
    Alle Elemente auf Basis ihrer Position in einer Liste von Kindelementen
  2. :nth-last-child(N)
    Alle Elemente in umgekehrter Reihenfolge auf Basis ihrer Position in einer Liste von Kindelementen
  3. :nth-of-type(N)
    Alle Elemente auf Basis ihrer Position in einer Liste von Kindelementen des gleichen Typs
  4. :nth-last-of-type(N)
    Alle Elemente in umgekehrter Reihenfolge auf Basis ihrer Position in einer Liste von Kindelementen des gleichen Typs
  5. :last-child
    Das letzte Kindelement
  6. :first-of-type
    Das erste Kindelement eines Typs
  7. :last-of-type
    Das letzte Kindelement eines Typs
  8. :only-child
    Ein Element welches das einzige Kind ist
  9. :only-of-type
    Ein Element welches das einzige Kind eines Typs ist
  10. :root
    Das Root-Element der Seite (<html>)
  11. :empty
    Alle Elemente ohne Kindelemente
  12. :target
    Ein Element welches Teil der URI ist (z.B. www.example.com/index.html#Target)
  13. :enabled
    Aktive Formularelemente
  14. :disabled
    Inaktive Formularelemente
  15. :checked Pseudo-class
    Aktivierte Formularelemente mit Dualstatus (checkbox, radio)
  16. :not(S)
    Alle Elemente die nicht dem Selektor entsprechen

 

 

Self-Clearing für Container von gefloateten Elementen

.clearfix::after { /* all modern browsers */
  content: " ";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}

* html .clearfix { /* IE6 */
  height: 1%;
}

*:first-child+html .clearfix { /* IE7 */
  min-height: 1px;
}

 

 

Autokorrektur ausschalten2

Mobile Browser setzten für die Formulareingabe Rechtschreibprüfungen und -formatierungen ein. Diese können über HTML-Attribute augeschaltet werden.

<!-- Disable input modifications -->
<input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />

 

img

Bildelemente können standardmässig keine anderen Objekte überdecken bzw. die Anwendung von z-index wird ignoriert. z.B. eine Kontur, welche mit einem negativen margin versteckt werden soll. Die Position muss in diesem Falls als relative, absolute oder fixed definiert werden.

// make z-index work on img
img {
  position: relative;
  margin-top: -1px;
  z-index: 50;
}

 

Auswahl & Markierungsfarbe

// own selection color for text
::selection {
    background: #009999; /* Safari */
}
::-moz-selection {
    background: #009999; /* Firefox */
}

/* Disable ability to select */
a {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

 

Hintergrund

background-position von Pixel in Prozent umrechnen

[Position in Pixel] / ( [Container] – [Bild] ) * 100

 

Transparenz3

// recommended 
.transparent {
	zoom: 1;
	filter: alpha(opacity=50);
	opacity: 0.5;
}

// extended definition
.transparent {
	/* Required for IE 5, 6, 7 */
	/* ...or something to trigger hasLayout, like zoom: 1; */
	width: 100%; 

	/* Theoretically for IE 8 & 9 (more valid) */	
	/* ...but not required as filter works too */
	/* should come BEFORE filter */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

	/* This works in IE 8 & 9 too */
	/* ... but also 5, 6, 7 */
	filter: alpha(opacity=50);

	/* Older than Firefox 0.9 */
	-moz-opacity:0.5;

	/* Safari 1.x (pre WebKit!) */
	-khtml-opacity: 0.5;

	/* Modern!
	/* Firefox 0.9+, Safari 2?, Chrome any?
	/* Opera 9+, IE 9+ */
	opacity: 0.5;
}

Klick-Verzögerung auf Touch-Geräten entfernen

Bei einigen Elementen kommt es zu einer kurzen Verzögerung bei einem Klick auf Touch-Geräten. Um diese zu deaktivieren kann folgende CSS-Eigenschaft4 definiert werden:

.no-delay-click {
  touch-action: manipulation;
}

 

  1. http://www.sitepoint.com/web-foundations/css3-pseudo-classes/ []
  2. http://davidwalsh.name/disable-autocorrect []
  3. http://css-tricks.com/css-transparency-settings-for-all-broswers/ []
  4. http://caniuse.com/#search=touch-action []

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht.