Sitelet https://github.com/AllThingsSmitty/css-protips/commit/740478098ced0f80614c7e199c5071160afc2b1d
Skip to content

Commit 7404780

Browse files
AllThingsSmittyAllThingsSmitty
authored
Merge pull request #228 from AllThingsSmitty/feature_update
Minor edit
2 parents 10a63b2 + 40015d0 commit 7404780

15 files changed

Lines changed: 342 additions & 806 deletions

File tree

‎translations/de-DE/README.md‎

Lines changed: 15 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,14 @@
1-
<p align="center">
2-
<img src="../../assets/img/bulb.svg" width="200" alt="light bulb icon">
3-
</p>
4-
51
# CSS Profi-Tipps [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)
62

73
Eine Sammlung an Tipps, um deine CSS-Fähigkeiten zu professionalisieren.
84

95
> Für andere großartige Listen schaue dir [@sindresorhus](https://github.com/sindresorhus/)s kuratierte Liste von ["awesome" Listen](https://github.com/sindresorhus/awesome/) an.
106
11-
127
## Inhaltsverzeichnis
138

14-
* [Profi-Tipps](#profi-tipps)
15-
* [Unterstützung](#unterstützung)
16-
* [Mitarbeitsrichtlinien](../../CONTRIBUTING.md)
17-
9+
- [Profi-Tipps](#profi-tipps)
10+
- [Unterstützung](#unterstützung)
11+
- [Mitarbeitsrichtlinien](../../CONTRIBUTING.md)
1812

1913
## Profi-Tipps
2014

@@ -44,7 +38,6 @@ Eine Sammlung an Tipps, um deine CSS-Fähigkeiten zu professionalisieren.
4438
1. [Benutze `Pointer`-Events um Mausereignisse zu kontrollieren](#benutze-pointer-events-um-mausereignisse-zu-kontrollieren)
4539
1. [Stellen Sie bei Zeilenumbrüchen, die als Abstand verwendet werden, `display: none` ein](#stellen-sie-bei-zeilenumbrüchen,-die-als-abstand-verwendet-werden-display-none-ein)
4640

47-
4841
### Benutze ein CSS-Reset
4942

5043
CSS Resets helfen dabei eine Gestaltungskonsistenz zwischen verschiedenen Browsern herzustellen, indem sie für einen sauberen Zustand zwischen den einzelnen Elementen sorgen. Du kannst eine CSS Resetsammlung wie [Normalize](http://necolas.github.io/normalize.css/), usw. benutzen, oder einen etwas einfacheren Ansatz wählen:
@@ -67,7 +60,6 @@ Nun werden Elemente von ihren Margins und Paddings befreit und `box-sizing` läs
6760

6861
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
6962

70-
7163
### Übernehme `box-sizing`
7264

7365
Übernehme `box-sizing` von `html`:
@@ -90,7 +82,6 @@ Dies macht es einfacher das `box-sizing` über Plugins oder andere Komponenten z
9082

9183
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
9284

93-
9485
### Benutze `unset`, anstatt alle Eigenschaften zurückzusetzen
9586

9687
Wenn du die Eigenschaften eines Elements zurücksetzt, ist es nicht notwendig jede einzelne Eigenschaft individuell zurückzusetzen:
@@ -116,7 +107,6 @@ button {
116107

117108
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
118109

119-
120110
### Benutze `:not()` um Rahmen an die Navigation zu setzen oder zu entfernen
121111

122112
Anstatt den Rahmen zu ergänzen&hellip;
@@ -151,7 +141,6 @@ Sicher, du kannst `.nav li + li` verwenden, aber mit `:not()` ist die Absicht se
151141

152142
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
153143

154-
155144
### Check If Font Is Installed Locally](#check-if-font-is-installed-locally)
156145

157146
### Kontroller, om skrifttypen er installeret lokalt
@@ -164,10 +153,8 @@ Du kan kontrollere, om en skrifttype er installeret lokalt, før du henter den e
164153
src:
165154
/* Full name */
166155
local("Dank Mono"),
167-
/* Postscript name */
168-
local("Dank-Mono"),
169-
/* Otherwise, download it! */
170-
url("//...a.server/fonts/DankMono.woff");
156+
/* Postscript name */ local("Dank-Mono"),
157+
/* Otherwise, download it! */ url("//...a.server/fonts/DankMono.woff");
171158
}
172159

173160
code {
@@ -179,7 +166,6 @@ Hat tip til Adam Argyle for at dele denne protip og [demoen](https://codepen.io/
179166

180167
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
181168

182-
183169
### Ergänze `line-height` an `body`
184170

185171
Du brauchst kein `line-height` an jedes `<p>`, `<h*>`, usw separat zu schreiben. Ergänze es stattdessen an `body`:
@@ -196,7 +182,6 @@ Auf diese Weise können Textelemente dies einfach von `body` übernehmen.
196182

197183
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
198184

199-
200185
### Setze `:focus` für Form-Elemente
201186

202187
Sehende Tastaturbenutzer_innen 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:
@@ -209,18 +194,17 @@ select:focus,
209194
textarea:focus {
210195
box-shadow: none;
211196
outline: #000 dotted 2px;
212-
outline-offset: .05em;
197+
outline-offset: 0.05em;
213198
}
214199
```
215200

216201
#### [Demo](https://codepen.io/AllThingsSmitty/pen/ePzoOP/)
217202

218203
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
219204

220-
221205
### Zentriere alles vertikal
222206

223-
Nein, das ist keine Hexerei &ndash; du kannst wirklich alle Elemente vertikal zentrieren.
207+
Nein, das ist keine Hexerei &ndash; du kannst wirklich alle Elemente vertikal zentrieren.
224208
Das machst du mit Flexbox&hellip;
225209

226210
```css
@@ -256,7 +240,6 @@ Möchtest du etwas anderes zentrieren? Vertikal, horizontal&hellip; alles, jeder
256240

257241
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
258242

259-
260243
### Kommaseparierte Liste
261244

262245
Lasse Listenpunkte wie eine echte kommaseparierte Liste aussehen:
@@ -273,7 +256,6 @@ Benutze die `:not()`-Pseudoklasse, um nach dem letzten Listenpunkt kein Komma an
273256

274257
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
275258

276-
277259
### Selektiere Items mit einem negativen `nth-child`
278260

279261
Benutze ein negatives `nth-child` im CSS um Items von 1 bis n auszuwählen.
@@ -284,7 +266,7 @@ li {
284266
}
285267

286268
/* wähle die Listenpunkte 1 bis 3 und zeige sie an */
287-
li:nth-child(-n+3) {
269+
li:nth-child(-n + 3) {
288270
display: block;
289271
}
290272
```
@@ -293,7 +275,7 @@ Anderweitig, da du nun ein bisschen über die [Benutzung von `:not()`](#benutze-
293275

294276
```css
295277
/* wähle alle Listenpunkte außer die ersten 3 und zeige sie an */
296-
li:not(:nth-child(-n+3)) {
278+
li:not(:nth-child(-n + 3)) {
297279
display: block;
298280
}
299281
```
@@ -302,7 +284,6 @@ li:not(:nth-child(-n+3)) {
302284

303285
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
304286

305-
306287
### Benutze SVG für Symbole
307288

308289
Es gibt keinen Grund SVG für Symbole nicht zu verwenden:
@@ -325,7 +306,6 @@ SVG skaliert für alle verschiedenen Auflösungen sehr gut und wird von allen Br
325306

326307
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
327308

328-
329309
### Benutze den "lobotomisierte Eule"-Selektor
330310

331311
Er hat zwar einen seltsamen Namen aber der Universal-Selektor (`*`) mit dem angrenzenden Geschwister-Selektor (`+`) kann starke CSS-Möglichkeiten darbieten:
@@ -338,13 +318,12 @@ Er hat zwar einen seltsamen Namen aber der Universal-Selektor (`*`) mit dem angr
338318

339319
In diesem Beispiel bekommen alle Elemente im Fluss des Dokuments, die anderen Elementen folgen, `margin-top: 1.5em`.
340320

341-
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*.
321+
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_.
342322

343323
#### [Demo](http://codepen.io/AllThingsSmitty/pen/grRvWq)
344324

345325
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
346326

347-
348327
### Benutze `max-height` für reine CSS-Galerien
349328

350329
Implementiere reine CSS Galerien über `max-height` in Verbindung mit `overflow: hidden`:
@@ -366,7 +345,6 @@ Das Element dehnt sich beim Überfahren zum Wert von `max-height` aus und die Ga
366345

367346
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
368347

369-
370348
### Setze Tabellenzellen auf die gleiche Weite
371349

372350
Tabellen können ein ganz schönes Problem sein. Versuche `table-layout: fixed`, um die Tabellenzellen auf die gleiche Größe zu setzen:
@@ -383,7 +361,6 @@ Schmerzfreie Tabellen-Layouts.
383361

384362
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
385363

386-
387364
### Benutze Flexbox, um von Margin-Hacks wegzukommen
388365

389366
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:
@@ -403,7 +380,6 @@ Nun erscheinen Spaltenabstände immer gleichmäßig.
403380

404381
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
405382

406-
407383
### Benutze den Attribut-Selektor mit leeren Verlinkungen
408384

409385
Zeige Verlinkungen an, wenn das `<a>`-Element keinen Textwert beinhaltet, das `href`-Attribut jedoch eine Verlinkung hat:
@@ -420,7 +396,6 @@ Das ist äußerst praktisch.
420396

421397
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
422398

423-
424399
### Gestalte "Standard"-Verlinkungen
425400

426401
Ergänze eine Darstellung für die von Browsern voreingestellte Verlinkung:
@@ -436,7 +411,6 @@ Nun werden Verlinkungen, die über ein CMS eingesetzt wurden &ndash; welche übe
436411

437412
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
438413

439-
440414
### Boxen mit zugehörigem Größenverhältnis
441415

442416
Um eine Box mit zugehörigem Größenverhältnis zu erstellen, brauchst du nur eine Padding-top/-bottom-Eigenschaft zu bezeichnen:
@@ -464,7 +438,6 @@ Das Anwenden eines Wertes von 20% auf die Padding-Eigenschaft erzeugt eine Box m
464438

465439
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
466440

467-
468441
### Gestalte defekte Bilder
469442

470443
Erzeuge mit einem kleinen bisschen CSS ästhetisch ansprechendere defekte Bilder:
@@ -502,7 +475,6 @@ Lerne mehr über das Gestalten dieses Modells in [Ire Aderinokun](https://github
502475

503476
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
504477

505-
506478
### Benutze `rem` für globales Ändern der Größe; Benutze `em` für lokale Größenveränderungen
507479

508480
Nachdem du die grundlegende Schriftgröße (`html { font-size: 100%; }`) festgelegt hast, setze die Schriftgrößen für Textelemente auf `em`:
@@ -525,15 +497,14 @@ article {
525497
}
526498

527499
aside .module {
528-
font-size: .9rem;
500+
font-size: 0.9rem;
529501
}
530502
```
531503

532504
Nun sollte jedes Modul gegliedert, einfacher zu gestalten, wartbarer und flexibler sein.
533505

534506
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
535507

536-
537508
### Verstecke automatisch abspielende Videos, die nicht auf stumm gesetzt sind
538509

539510
Das ist ein großartiger Trick für ein speziell angefertigtes Stylesheet. Vermeide es die Benutzer_innen mit den Geräuschen eines automatisch startenden Videos zu überfordern. Zeige das Video nicht, wenn die Töne nicht auf stumm geschaltet sind:
@@ -548,14 +519,13 @@ Erneut nutzen wir die [`:not()`](#benutze-not-um-rahmen-an-die-navigation-zu-set
548519

549520
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
550521

551-
552522
### Benutze `:root` für flexible Schrift
553523

554-
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:
524+
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:
555525

556526
```css
557527
:root {
558-
font-size: calc(1vw + 1vh + .5vmin);
528+
font-size: calc(1vw + 1vh + 0.5vmin);
559529
}
560530
```
561531

@@ -571,7 +541,6 @@ body {
571541

572542
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
573543

574-
575544
### Setze `font-size` auf Formular-Elemente für eine bessere mobile Erfahrung
576545

577546
Um mobile Browser (iOS Safari, usw.) am Hereinzoomen in das HTML-Formular zu hindern sobald ein `<select>`-Dropdown betätigt wird, ergänze `font-size` zu der Regel des Selektors:
@@ -589,14 +558,13 @@ textarea {
589558

590559
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
591560

592-
593561
### Benutze `Pointer`-Events um Mausereignisse zu kontrollieren
594562

595563
[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 beispielsweise das standardgemäß eingestellte Pointer-Event &ndash; beispielsweise bei einer Button-Schaltfläche &ndash; abzuschalten:
596564

597565
```css
598566
button:disabled {
599-
opacity: .5;
567+
opacity: 0.5;
600568
pointer-events: none;
601569
}
602570
```
@@ -605,7 +573,6 @@ So einfach ist das.
605573

606574
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
607575

608-
609576
### Stellen Sie bei Zeilenumbrüchen, die als Abstand verwendet werden, `display: none` ein
610577

611578
Wie [Harry Roberts hervorhob](https://twitter.com/csswizardry/status/1170835532584235008), kann dies dazu beitragen, dass CMS-Benutzer keine zusätzlichen Zeilenumbrüche als Abstand verwenden:
@@ -618,7 +585,6 @@ br + br {
618585

619586
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
620587

621-
622588
## Unterstützung
623589

624-
Aktuelle Versionen von Chrome, Firefox, Safari, und Edge.
590+
Aktuelle Versionen von Chrome, Firefox, Safari, und Edge.

0 commit comments

Comments
 (0)