Lesenswert
- CSS-Selektoren und Browser-Support
- Collapsing Margins
- Ultimate guide to CSS pseudo classes and elements
Pseudo Klassen1
- :nth-child(N)
Alle Elemente auf Basis ihrer Position in einer Liste von Kindelementen - :nth-last-child(N)
Alle Elemente in umgekehrter Reihenfolge auf Basis ihrer Position in einer Liste von Kindelementen - :nth-of-type(N)
Alle Elemente auf Basis ihrer Position in einer Liste von Kindelementen des gleichen Typs - :nth-last-of-type(N)
Alle Elemente in umgekehrter Reihenfolge auf Basis ihrer Position in einer Liste von Kindelementen des gleichen Typs - :last-child
Das letzte Kindelement - :first-of-type
Das erste Kindelement eines Typs - :last-of-type
Das letzte Kindelement eines Typs - :only-child
Ein Element welches das einzige Kind ist - :only-of-type
Ein Element welches das einzige Kind eines Typs ist - :root
Das Root-Element der Seite (<html>) - :empty
Alle Elemente ohne Kindelemente - :target
Ein Element welches Teil der URI ist (z.B. www.example.com/index.html#Target) - :enabled
Aktive Formularelemente - :disabled
Inaktive Formularelemente - :checked Pseudo-class
Aktivierte Formularelemente mit Dualstatus (checkbox, radio) - :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;
}