├── CODE-OF-CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── assets
└── img
│ └── bulb.svg
└── translations
├── de-DE
└── README.md
├── es-ES
└── README.md
├── fr-FR
└── README.md
├── gr-GR
└── README.md
├── gu-IND
└── README.md
├── it-IT
└── README.md
├── ja-JP
└── README.md
├── ko-KR
└── readme.md
├── pl-PL
└── README.md
├── pt-BR
└── README.md
├── pt-PT
└── README.md
├── ru-RU
└── README.md
├── vn-VN
└── README.md
├── zh-CN
└── README.md
└── zh-TW
└── README.md
/CODE-OF-CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Code of Conduct
2 |
3 | As contributors and maintainers of this project, and in the interest of fostering an open and welcoming community, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.
4 |
5 | We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, religion, or nationality.
6 |
7 | Examples of unacceptable behavior by participants include:
8 |
9 | * The use of sexualized language or imagery
10 | * Personal attacks
11 | * Trolling or insulting/derogatory comments
12 | * Public or private harassment
13 | * Publishing other's private information, such as physical or electronic addresses, without explicit permission
14 | * Other unethical or unprofessional conduct
15 |
16 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
17 |
18 | By adopting this Code of Conduct, project maintainers commit themselves to fairly and consistently applying these principles to every aspect of managing this project. Project maintainers who do not follow or enforce the Code of Conduct may be permanently removed from the project team.
19 |
20 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community.
21 |
22 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project maintainer at mjsmithme@gmail.com. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. Maintainers are obligated to maintain confidentiality with regard to the reporter of an incident.
23 |
24 | This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.3.0, available at [http://contributor-covenant.org/version/1/3/0/](http://contributor-covenant.org/version/1/3/0/).
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contribution Guidelines
2 |
3 | Please note that this project is released with a [Contributor Code of Conduct](CODE-OF-CONDUCT.md). By participating in this project you agree to abide by its terms.
4 |
5 | ## Contents
6 |
7 | - [Adding to This List](#adding-to-this-list)
8 | - [Updating Your Pull Request](#updating-your-pull-request)
9 |
10 | ## Adding to This List
11 |
12 | Please ensure your pull request adheres to the following guidelines:
13 |
14 | - Search open and closed PRs to avoid duplicate suggestions.
15 | - Only submit CSS tips that you think would be useful to others. This implies each tip has enough succinct content to describe why it's useful.
16 | - Add your tip at the bottom of the [README](https://github.com/AllThingsSmitty/css-protips/blob/master/README.md) document. Add a link to your tip at the bottom of the table of contents.
17 | - Use [title-case](https://titlecaseconverter.com/).
18 | - Code formatting should follow standard [CSSLint](http://www.csslint.net) default settings, including:
19 | - Indent with two spaces
20 | - Use shorthand, e.g., `margin: 10px 10px 0.5rem;`
21 | - Use double quotes, e.g., `background: url("logo.svg");`
22 | - Use leading zeros with numberic values, e.g., `padding: 0.75rem;`
23 | - Sort properties alphabetically
24 | - **Avoid letting your code formatter format other section of the README file.**
25 | - Make sure your text editor is set to remove trailing whitespace.
26 | - Check your spelling and grammar.
27 | - The PR should have a useful title.
28 |
29 | Thank you for your suggestions!
30 |
31 | ## Updating Your Pull Request
32 |
33 | Sometimes a maintainer will ask you to edit your pull request before it's included. This is normally due to spelling errors or because your PR didn't match the above guidelines. [This write-up](https://github.com/RichardLitt/knowledge/blob/master/github/amending-a-commit-guide.md) covers the different ways you can change a pull request.
34 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | CC0 1.0 Universal
2 |
3 | Statement of Purpose
4 |
5 | The laws of most jurisdictions throughout the world automatically confer
6 | exclusive Copyright and Related Rights (defined below) upon the creator and
7 | subsequent owner(s) (each and all, an "owner") of an original work of
8 | authorship and/or a database (each, a "Work").
9 |
10 | Certain owners wish to permanently relinquish those rights to a Work for the
11 | purpose of contributing to a commons of creative, cultural and scientific
12 | works ("Commons") that the public can reliably and without fear of later
13 | claims of infringement build upon, modify, incorporate in other works, reuse
14 | and redistribute as freely as possible in any form whatsoever and for any
15 | purposes, including without limitation commercial purposes. These owners may
16 | contribute to the Commons to promote the ideal of a free culture and the
17 | further production of creative, cultural and scientific works, or to gain
18 | reputation or greater distribution for their Work in part through the use and
19 | efforts of others.
20 |
21 | For these and/or other purposes and motivations, and without any expectation
22 | of additional consideration or compensation, the person associating CC0 with a
23 | Work (the "Affirmer"), to the extent that he or she is an owner of Copyright
24 | and Related Rights in the Work, voluntarily elects to apply CC0 to the Work
25 | and publicly distribute the Work under its terms, with knowledge of his or her
26 | Copyright and Related Rights in the Work and the meaning and intended legal
27 | effect of CC0 on those rights.
28 |
29 | 1. Copyright and Related Rights. A Work made available under CC0 may be
30 | protected by copyright and related or neighboring rights ("Copyright and
31 | Related Rights"). Copyright and Related Rights include, but are not limited
32 | to, the following:
33 |
34 | i. the right to reproduce, adapt, distribute, perform, display, communicate,
35 | and translate a Work;
36 |
37 | ii. moral rights retained by the original author(s) and/or performer(s);
38 |
39 | iii. publicity and privacy rights pertaining to a person's image or likeness
40 | depicted in a Work;
41 |
42 | iv. rights protecting against unfair competition in regards to a Work,
43 | subject to the limitations in paragraph 4(a), below;
44 |
45 | v. rights protecting the extraction, dissemination, use and reuse of data in
46 | a Work;
47 |
48 | vi. database rights (such as those arising under Directive 96/9/EC of the
49 | European Parliament and of the Council of 11 March 1996 on the legal
50 | protection of databases, and under any national implementation thereof,
51 | including any amended or successor version of such directive); and
52 |
53 | vii. other similar, equivalent or corresponding rights throughout the world
54 | based on applicable law or treaty, and any national implementations thereof.
55 |
56 | 2. Waiver. To the greatest extent permitted by, but not in contravention of,
57 | applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and
58 | unconditionally waives, abandons, and surrenders all of Affirmer's Copyright
59 | and Related Rights and associated claims and causes of action, whether now
60 | known or unknown (including existing as well as future claims and causes of
61 | action), in the Work (i) in all territories worldwide, (ii) for the maximum
62 | duration provided by applicable law or treaty (including future time
63 | extensions), (iii) in any current or future medium and for any number of
64 | copies, and (iv) for any purpose whatsoever, including without limitation
65 | commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes
66 | the Waiver for the benefit of each member of the public at large and to the
67 | detriment of Affirmer's heirs and successors, fully intending that such Waiver
68 | shall not be subject to revocation, rescission, cancellation, termination, or
69 | any other legal or equitable action to disrupt the quiet enjoyment of the Work
70 | by the public as contemplated by Affirmer's express Statement of Purpose.
71 |
72 | 3. Public License Fallback. Should any part of the Waiver for any reason be
73 | judged legally invalid or ineffective under applicable law, then the Waiver
74 | shall be preserved to the maximum extent permitted taking into account
75 | Affirmer's express Statement of Purpose. In addition, to the extent the Waiver
76 | is so judged Affirmer hereby grants to each affected person a royalty-free,
77 | non transferable, non sublicensable, non exclusive, irrevocable and
78 | unconditional license to exercise Affirmer's Copyright and Related Rights in
79 | the Work (i) in all territories worldwide, (ii) for the maximum duration
80 | provided by applicable law or treaty (including future time extensions), (iii)
81 | in any current or future medium and for any number of copies, and (iv) for any
82 | purpose whatsoever, including without limitation commercial, advertising or
83 | promotional purposes (the "License"). The License shall be deemed effective as
84 | of the date CC0 was applied by Affirmer to the Work. Should any part of the
85 | License for any reason be judged legally invalid or ineffective under
86 | applicable law, such partial invalidity or ineffectiveness shall not
87 | invalidate the remainder of the License, and in such case Affirmer hereby
88 | affirms that he or she will not (i) exercise any of his or her remaining
89 | Copyright and Related Rights in the Work or (ii) assert any associated claims
90 | and causes of action with respect to the Work, in either case contrary to
91 | Affirmer's express Statement of Purpose.
92 |
93 | 4. Limitations and Disclaimers.
94 |
95 | a. No trademark or patent rights held by Affirmer are waived, abandoned,
96 | surrendered, licensed or otherwise affected by this document.
97 |
98 | b. Affirmer offers the Work as-is and makes no representations or warranties
99 | of any kind concerning the Work, express, implied, statutory or otherwise,
100 | including without limitation warranties of title, merchantability, fitness
101 | for a particular purpose, non infringement, or the absence of latent or
102 | other defects, accuracy, or the present or absence of errors, whether or not
103 | discoverable, all to the greatest extent permissible under applicable law.
104 |
105 | c. Affirmer disclaims responsibility for clearing rights of other persons
106 | that may apply to the Work or any use thereof, including without limitation
107 | any person's Copyright and Related Rights in the Work. Further, Affirmer
108 | disclaims responsibility for obtaining any necessary consents, permissions
109 | or other rights required for any use of the Work.
110 |
111 | d. Affirmer understands and acknowledges that Creative Commons is not a
112 | party to this document and has no duty or obligation with respect to this
113 | CC0 or use of the Work.
114 |
115 | For more information, please see
116 |
--------------------------------------------------------------------------------
/assets/img/bulb.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/translations/de-DE/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | # CSS Profi-Tipps [](https://github.com/sindresorhus/awesome)
6 |
7 | Eine Sammlung an Tipps, um deine CSS-Fähigkeiten zu professionalisieren.
8 |
9 | > 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.
10 |
11 |
12 | ## Inhaltsverzeichnis
13 |
14 | * [Profi-Tipps](#profi-tipps)
15 | * [Unterstützung](#unterstützung)
16 | * [Mitarbeitsrichtlinien](../../CONTRIBUTING.md)
17 |
18 |
19 | ## Profi-Tipps
20 |
21 | 1. [Benutze ein CSS-Reset](#benutze-ein-css-reset)
22 | 1. [Übernehme `box-sizing`](#Übernehme-box-sizing)
23 | 1. [Benutze `unset`, anstatt alle Eigenschaften zurückzusetzen](#benutze-unset-anstatt-alle-eigenschaften-zurückzusetzen)
24 | 1. [Benutze `:not()` um Rahmen an die Navigation zu setzen oder zu entfernen](#benutze-not-um-rahmen-an-die-navigation-zu-setzen-oder-zu-entfernen)
25 | 1. [Kontroller, om skrifttypen er installeret lokalt](#Kontroller-om-skrifttypen-er-installeret-lokalt)
26 | 1. [Ergänze `line-height` an `body`](#ergänze-line-height-an-body)
27 | 1. [Setze `:focus` für Form-Elemente](#setze-focus-für-form-elemente)
28 | 1. [Zentriere alles vertikal](#zentriere-alles-vertikal)
29 | 1. [Kommaseparierte Liste](#kommaseparierte-liste)
30 | 1. [Selektiere Items mit einem negativen `nth-child`](#selektiere-items-mit-einem-negativen-nth-child)
31 | 1. [Benutze SVG für Symbole](#benutze-svg-für-symbole)
32 | 1. [Benutze den "lobotomisierte Eule"-Selektor](#benutze-den-lobotomisierte-eule-selektor)
33 | 1. [Benutze `max-height` für reine CSS-Galerien](#benutze-max-height-für-reine-css-galerien)
34 | 1. [Setze Tabellenzellen auf die gleiche Weite](#setze-tabellenzellen-auf-die-gleiche-weite)
35 | 1. [Benutze Flexbox, um von Margin-Hacks wegzukommen](#benutze-flexbox-um-von-margin-hacks-wegzukommen)
36 | 1. [Benutze den Attribut-Selektor mit leeren Verlinkungen](#benutze-den-attribut-selektor-mit-leeren-verlinkungen)
37 | 1. [Gestalte "Standard"-Verlinkungen](#gestalte-standard-verlinkungen)
38 | 1. [Boxen mit zugehörigem Größenverhältnis](#boxen-mit-zugehörigem-größenverhältnis)
39 | 1. [Gestalte defekte Bilder](#gestalte-defekte-bilder)
40 | 1. [Benutze `rem` für globales Ändern der Größe; Benutze `em` für lokale Größenveränderungen](#benutze-rem-für-globales-Ändern-der-größe-benutze-em-für-lokale-größenveränderungen)
41 | 1. [Verstecke automatisch abspielende Videos, die nicht auf stumm gesetzt sind](#verstecke-automatisch-abspielende-videos-die-nicht-auf-stumm-gesetzt-sind)
42 | 1. [Benutze `:root` für flexible Schrift](#benutze-root-für-flexible-schrift)
43 | 1. [Setze `font-size` auf Formular-Elemente für eine bessere mobile Erfahrung](#setze-font-size-auf-formular-elemente-für-eine-bessere-mobile-erfahrung)
44 | 1. [Benutze `Pointer`-Events um Mausereignisse zu kontrollieren](#benutze-pointer-events-um-mausereignisse-zu-kontrollieren)
45 | 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)
46 |
47 |
48 | ### Benutze ein CSS-Reset
49 |
50 | 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:
51 |
52 | ```css
53 | *,
54 | *::before,
55 | *::after {
56 | box-sizing: border-box;
57 | margin: 0;
58 | padding: 0;
59 | }
60 | ```
61 |
62 | Nun werden Elemente von ihren Margins und Paddings befreit und `box-sizing` lässt dich das CSS Box-Modell handhaben.
63 |
64 | #### [Demo](http://codepen.io/AllThingsSmitty/pen/kkrkLL)
65 |
66 | **Hinweis:** Wenn du den [Inherit `box-sizing`](#inherit-box-sizing)-Tipp im unten folgenden Punkt befolgst, kannst du dich dafür entscheiden keine `box-sizing`-Eigenschaft in dein CSS Reset aufzunehmen.
67 |
68 | [zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)
69 |
70 |
71 | ### Übernehme `box-sizing`
72 |
73 | Übernehme `box-sizing` von `html`:
74 |
75 | ```css
76 | html {
77 | box-sizing: border-box;
78 | }
79 |
80 | *,
81 | *::before,
82 | *::after {
83 | box-sizing: inherit;
84 | }
85 | ```
86 |
87 | Dies macht es einfacher das `box-sizing` über Plugins oder andere Komponenten zu verändern.
88 |
89 | #### [Demo](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)
90 |
91 | [zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)
92 |
93 |
94 | ### Benutze `unset`, anstatt alle Eigenschaften zurückzusetzen
95 |
96 | Wenn du die Eigenschaften eines Elements zurücksetzt, ist es nicht notwendig jede einzelne Eigenschaft individuell zurückzusetzen:
97 |
98 | ```css
99 | button {
100 | background: none;
101 | border: none;
102 | color: inherit;
103 | font: inherit;
104 | outline: none;
105 | padding: 0;
106 | }
107 | ```
108 |
109 | Du kannst alle Eigenschaften eines Elements spezifizieren, indem du das `all`-Kürzel verwendest. Der Wert `unset` setzt die Eigenschaften eines Elements auf den initialen Wert zurück:
110 |
111 | ```css
112 | button {
113 | all: unset;
114 | }
115 | ```
116 |
117 | [zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)
118 |
119 |
120 | ### Benutze `:not()` um Rahmen an die Navigation zu setzen oder zu entfernen
121 |
122 | Anstatt den Rahmen zu ergänzen…
123 |
124 | ```css
125 | /* füge den Rahmen hinzu */
126 | .nav li {
127 | border-right: 1px solid #666;
128 | }
129 | ```
130 |
131 | …um ihn dann beim letzten Element wieder zu entfernen…
132 |
133 | ```css
134 | /* entferne den Rahmen */
135 | .nav li:last-child {
136 | border-right: none;
137 | }
138 | ```
139 |
140 | …benutze die `:not()`-Pseudoklasse um nur die Elemente zu gestalten, die du willst:
141 |
142 | ```css
143 | .nav li:not(:last-child) {
144 | border-right: 1px solid #666;
145 | }
146 | ```
147 |
148 | Sicher, du kannst `.nav li + li` verwenden, aber mit `:not()` ist die Absicht sehr klar und der CSS Selektor definiert den Rahmen auf die Weise wie ihn auch ein Mensch beschreiben würde.
149 |
150 | #### [Demo](http://codepen.io/AllThingsSmitty/pen/LkymvO)
151 |
152 | [zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)
153 |
154 |
155 | ### Check If Font Is Installed Locally](#check-if-font-is-installed-locally)
156 |
157 | ### Kontroller, om skrifttypen er installeret lokalt
158 |
159 | Du kan kontrollere, om en skrifttype er installeret lokalt, før du henter den eksternt, hvilket også er et godt ydelsestip.
160 |
161 | ```css
162 | @font-face {
163 | font-family: "Dank Mono";
164 | src:
165 | /* Full name */
166 | local("Dank Mono"),
167 | /* Postscript name */
168 | local("Dank-Mono"),
169 | /* Otherwise, download it! */
170 | url("//...a.server/fonts/DankMono.woff");
171 | }
172 |
173 | code {
174 | font-family: "Dank Mono", system-ui-monospace;
175 | }
176 | ```
177 |
178 | Hat tip til Adam Argyle for at dele denne protip og [demoen](https://codepen.io/argyleink/pen/VwYJpgR).
179 |
180 | [zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)
181 |
182 |
183 | ### Ergänze `line-height` an `body`
184 |
185 | Du brauchst kein `line-height` an jedes `
3 |