+ +

`, ``, usw separat zu schreiben. Ergänze es stattdessen an `body`: + +```css +body { + line-height: 1.5; +} +``` + +Auf diese Weise können Text-Elemente dies einfach von `body` übernehmen. + +#### [Demo](http://codepen.io/AllThingsSmitty/pen/VjbdYd) + +<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup> + + +### Setze `:focus` für Form-Elemente + +Sehende Tastaturbenutzer sind auf die Fokussierung angewiesen, um unterscheiden zu können wohin Tastaturevents auf der Seite gehen. Gestalte den Fokus für Formular-Elemente klar ersichtlich und konsistenter als die voreingestellte Browserimplementation: + +```css +a:focus, +button:focus, +input:focus, +select:focus, +textarea:focus { + box-shadow: none; + outline: #000 dotted 2px; + outline-offset: .05em; +} +``` + +#### [Demo](https://codepen.io/AllThingsSmitty/pen/ePzoOP/) + +<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup> + + +### Zentriere alles vertikal + +Nein, das ist keine Hexerei, du kannst wirklich alle Elemente vertikal zentrieren. +Das machst du mit Flexbox… + +```css +html, +body { + height: 100%; + margin: 0; +} + +body { + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-flex; + display: flex; +} +``` + +…und ebenso mit CSS Grid: + +```css +body { + display: grid; + height: 100vh; + margin: 0; + place-items: center center; +} +``` + +Möchtest du etwas anderes zentrieren? Vertikal, horizontal… alles, jederzeit, überall? CSS-Tricks hat [eine schöne Ausarbeitung](https://css-tricks.com/centering-css-complete-guide/) über all dies. + +**Hinweis:** Passe auf das [fehlerhafte Verhalten](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) von Flexbox in IE11 auf. + +#### [Demo](http://codepen.io/AllThingsSmitty/pen/GqmGqZ) + +<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup> + + +### Kommaseparierte Liste + +Lasse Listenpunkte wie eine echte kommaseparierte Liste aussehen: + +```css +ul > li:not(:last-child)::after { + content: ","; +} +``` + +Benutze die `:not()`-Pseudoklasse, um nach dem letzten Listenpunkt kein Komma anzuzeigen. + +**Hinweis:** Dieser Tipp mag hinsichtlich der Zugänglichkeit für Bildschirmvorleseprogramme nicht ideal sein. Auch Kopieren/Einfügen von browsergeneriertem Inhalt funktioniert nicht. Handle deswegen mit Vorsicht. + +<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup> + + +### Selektiere Items mit einem negativen `nth-child` + +Benutze ein negatives `nth-child` im CSS um Items von 1 bis n auszuwählen. + +```css +li { + display: none; +} + +/* wähle die Listenpunkte 1 bis 3 und zeige sie an */ +li:nth-child(-n+3) { + display: block; +} +``` + +Anderweitig, da du nun ein bisschen über die [Benutzung von `:not()`](#benutze-not-um-rahmen-an-die-navigation-zu-setzen-oder-zu-entfernen) gelernt hast, versuche folgendes: + +```css +/* wähle alle Listenpunkte außer die ersten 3 und zeige sie an */ +li:not(:nth-child(-n+3)) { + display: block; +} +``` + +#### [Demo](http://codepen.io/AllThingsSmitty/pen/WxjKZp) + +<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup> + + +### Benutze SVG für Symbole + +Es gibt keinen Grund SVG für Symbole nicht zu verwenden: + +```css +.logo { + background: url("logo.svg"); +} +``` + +SVG skaliert sehr gut für alle verschiedenen Auflösungen und wird von allen Browsern unterstützt [zurück bis zu IE9](http://caniuse.com/#search=svg). Gebe deinen .png, .jpg, or .gif-jif-wasauchimmer-Dateien den Laufpass. + +**Hinweis:** Wenn du nur SVG-Symbole in Button-Schaltflächen für sehende Benutzer_innen verwendest und das SVG nicht geladen wird, kannst du die Zugänglichkeit wie folgt erhalten: + +```css +.no-svg .icon-only::after { + content: attr(aria-label); +} +``` + +<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup> + + +### Benutze den "lobotomisierte Eule"-Selektor + +Er hat zwar einen seltsamen Namen aber der Universal-Selektor (`*`) mit dem angrenzenden Geschwister-Selektor (`+`) kann starke CSS-Möglichkeiten darbieten: + +```css +* + * { + margin-top: 1.5em; +} +``` + +In diesem Beispiel bekommen alle Elemente im Fluss des Dokuments, die anderen Elementen folgen, `margin-top: 1.5em`. + +Für mehr bezüglich des "lobotomisierte Eule"-Selektors lese [Heydon Pickerings Eintrag](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) auf *A List Apart*. + +#### [Demo](http://codepen.io/AllThingsSmitty/pen/grRvWq) + +<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup> + + +### Benutze `max-height` für reine CSS-Galerien + +Implementiere reine CSS-Galerien über `max-height` in Verbindung mit `overflow: hidden`: + +```css +.slider { + max-height: 200px; + overflow-y: hidden; + width: 300px; +} + +.slider:hover { + max-height: 600px; + overflow-y: scroll; +} +``` + +Das Element dehnt sich beim Überfahren zum Wert von `max-height` aus und die Galerie wird als das Ergebnis des Overflows dargestellt. + +<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup> + + +### Setze Tabellenzellen auf die gleiche Weite + +Tabellen können ein ganz schönes Problem sein. Versuche `table-layout: fixed`, um die Tabellenzellen auf die gleiche Größe zu setzen: + +```css +.calendar { + table-layout: fixed; +} +``` + +Schmerzfreie Tabellen-Layouts. + +#### [Demo](http://codepen.io/AllThingsSmitty/pen/jALALm) + +<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup> + + +### Benutze Flexbox, um von Margin-Hacks wegzukommen + +Wenn du mit Spaltenabständen arbeitest, kannst du dich von `nth-`, `first-` und `last-child`-Hacks verabschieden, indem du die Flexbox-Eigenschaft `space-between` verwendest: + +```css +.list { + display: flex; + justify-content: space-between; +} + +.list .person { + flex-basis: 23%; +} +``` + +Nun erscheinen Spaltenabstände immer gleichmäßig. + +<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup> + + +### Benutze den Attribut-Selektor mit leeren Verlinkungen + +Zeige Verlinkungen an, wenn das ``-Element keinen Textwert beinhaltet, das `href`-Attribut jedoch eine Verlinkung hat: + +```css +a[href^="http"]:empty::before { + content: attr(href); +} +``` + +Das ist äußerst praktisch. + +#### [Demo](http://codepen.io/AllThingsSmitty/pen/zBzXRx) + +<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup> + + +### Gestalte "Standard"-Verlinkungen + +Ergänze eine Darstellung für die von Browsern voreingestellte Verlinkung: + +```css +a[href]:not([class]) { + color: #008000; + text-decoration: underline; +} +``` + +Nun werden Verlinkungen, die über ein CMS eingesetzt wurden – welche überlicherweise kein `class`-Attribut haben – unterscheidbar sein, ohne die Kaskade im Allgemeinen zu beeinflussen. + +<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup> + + +### Konsistenter, vertikaler Rhythmus + +Benutze den universellen Selektor (`*`) innerhalb eines Elements um einen einheitlichen, vertikalen Rhythmus zu erstellen: + +```css +.intro > * { + margin-bottom: 1.25rem; +} +``` + +Ein übereinstimmender, vertikaler Rhythmus stellt eine visuelle Ästhetik her, die Inhalte weitaus lesbarer macht. + +<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup> + + +### Boxen mit zugehörigem Größenverhältnis + +Um eine Box mit zugehörigem Größenverhältnis zu erstellen, brauchst du nur eine Padding-top/-bottom-Eigenschaft zu bezeichnen: + +```css +.container { + height: 0; + padding-bottom: 20%; + position: relative; +} + +.container div { + border: 2px dashed #ddd; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; +} +``` +Das Anwenden von 20% auf die Padding-Eigenschaft erzeugt eine Box mit der gleichen Höhe in Bezug auf 20% ihrer Breite. Ungeachtet der Weite des Ansichtsfensters, wird das Kind-Div sein Seitenverhältnis beibehalten (100% / 20% = 5:1). + +#### [Demo](http://codepen.io/AllThingsSmitty/pen/jALZvE) + +<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup> + + +### Gestalte defekte Bilder + +Erzeuge mit einem kleinen bisschen CSS ästhetisch ansprechendere defekte Bilder: + +```css +img { + display: block; + font-family: Helvetica, Arial, sans-serif; + font-weight: 300; + height: auto; + line-height: 2; + position: relative; + text-align: center; + width: 100%; +} +``` + +Nun ergänze Regeln für Pseudo-Elemente, die eine Nachricht für die Benutzer_innen darstellen, sowie eine URL-Referenz des defekten Bildes: +Now add pseudo-elements rules to display a user message and URL reference of the broken image: + +```css +img::before { + content: "Entschuldige bitte, das Bild ist leider defekt :("; + display: block; + margin-bottom: 10px; +} + +img::after { + content: "(url: " attr(src) ")"; + display: block; + font-size: 12px; +} +``` + +Lerne mehr über das Gestalten dieses Modells in [Ire Aderinokun](https://github.com/ireade/)s [ursprünglichen Beitrag](http://bitsofco.de/styling-broken-images/). + +<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup> + + +### Benutze `rem` für globales Ändern der Größe; Benutze `em` für lokale Größenveränderungen + +Nachdem du die grundlegende Schriftgröße (`html { font-size: 100%; }`) festgelegt hast, setze die Schriftgrößen für Textelemente auf `em`: + +```css +h2 { + font-size: 2em; +} + +p { + font-size: 1em; +} +``` + +Dann setze die Schriftgröße für Module auf `rem`: + +```css +article { + font-size: 1.25rem; +} + +aside .module { + font-size: .9rem; +} +``` + +Nun sollte jedes Modul gegliedert, einfacher zu gestalten, wartbarer und flexibler sein. + +<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup> + + +### Verstecke automatisch abspielende Videos, die nicht auf stumm gesetzt sind + +Das ist ein großartiger Trick für ein speziell angefertigtes Stylesheet. Vermeide es die Benutzer_in mit den Geräuschen eines automatisch startenden Videos zu überfordern. Zeige das Video nicht, wenn die Töne nicht auf Stumm geschaltet sind: + +```css +video[autoplay]:not([muted]) { + display: none; +} +``` + +Erneut nutzen wir die [`:not()`](#benutze-not-um-rahmen-an-die-navigation-zu-setzen-oder-zu-entfernen)-Pseudoklasse zu unserem Vorteil. + +<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup> + + +### Benutze `:root` für flexible Schrift + +Die Größe der Schriftart innerhalb eines _responsive_ Layouts sollte mit jedem Ansichtsfenster veränderbar sein. Du kannst die Schriftgröße basierend auf der Höhe und Weite des Fensters berechnen, indem du `:root` verwendest: + +```css +:root { + font-size: calc(1vw + 1vh + .5vmin); +} +``` + +Nun kannst du die `root em`-Einheit verwenden, die auf den errechneten Werten von `:root` basiert: + +```css +body { + font: 1rem/1.6 sans-serif; +} +``` + +#### [Demo](http://codepen.io/AllThingsSmitty/pen/XKgOkR) + +<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup> + + +### Setze `font-size` auf Formular-Elemente für eine bessere mobile Erfahrung + +Um mobile Browser (iOS Safari, usw.) am Hereinzoomen in das HTML-Formular zu hindern sobald ein ``-Dropdown betätigt wird, ergänze `font-size` zu der Regel des Selektors: + +```css +input[type="text"], +input[type="number"], +select, +textarea { + font-size: 16px; +} +``` + +:dancer: + +<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup> + + +### Benutze `Pointer`-Events um Mausereignisse zu kontrollieren + +[Pointer-Events](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) erlauben es dir zu spezifizieren wie die Maus mit dem Element interagiert, sobald sie es berührt. Um das standardgemäß eingestellte Pointer-Event – beispielsweise bei einer Button-Schaltfläche – abzuschalten: + +```css +.button-disabled { + opacity: .5; + pointer-events: none; +} +``` + +So einfach ist das. + +^{[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)} + + +## Unterstützung + +Aktuelle Versionen von Chrome, Firefox, Safari, Opera, Edge und IE11. + + +^{[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)} + + +## Übersetzungen + +* [简体中文](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-CN) +* [正體中文](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-TW) +* [Deutsch](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/de-DE) +* [Español](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/es-ES) +* [Français](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/fr-FR) +* [ગુજરાતી](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/gu-IND) +* [Italiano](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/it-IT) +* [日本語](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ja-JP) +* [한국어](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ko-KR) +* [Polskie](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pl-PL) +* [Português do Brasil](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pt-BR) +* [Português do Europe](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pt-PT) +* [Русский](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ru-RU) + +^{[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)}