Showing preview only (272K chars total). Download the full file or copy to clipboard to get everything.
Repository: AllThingsSmitty/css-protips
Branch: master
Commit: e95123993037
Files: 19
Total size: 261.9 KB
Directory structure:
gitextract_nmqogxqr/
├── CODE-OF-CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
└── 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
================================================
FILE CONTENTS
================================================
================================================
FILE: CODE-OF-CONDUCT.md
================================================
# Contributor Code of Conduct
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.
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.
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery
* Personal attacks
* Trolling or insulting/derogatory comments
* Public or private harassment
* Publishing other's private information, such as physical or electronic addresses, without explicit permission
* Other unethical or unprofessional conduct
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.
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.
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community.
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.
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/).
================================================
FILE: CONTRIBUTING.md
================================================
# Contribution Guidelines
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.
## Contents
- [Adding to This List](#adding-to-this-list)
- [Updating Your Pull Request](#updating-your-pull-request)
## Adding to This List
Please ensure your pull request adheres to the following guidelines:
- Search open and closed PRs to avoid duplicate suggestions.
- 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.
- 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.
- Use [title-case](https://titlecaseconverter.com/).
- Code formatting should follow standard [CSSLint](http://www.csslint.net) default settings, including:
- Indent with two spaces
- Use shorthand, e.g., `margin: 10px 10px 0.5rem;`
- Use double quotes, e.g., `background: url("logo.svg");`
- Use leading zeros with numberic values, e.g., `padding: 0.75rem;`
- Sort properties alphabetically
- **Avoid letting your code formatter format other section of the README file.**
- Make sure your text editor is set to remove trailing whitespace.
- Check your spelling and grammar.
- The PR should have a useful title.
Thank you for your suggestions!
## Updating Your Pull Request
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.
================================================
FILE: LICENSE
================================================
CC0 1.0 Universal
Statement of Purpose
The laws of most jurisdictions throughout the world automatically confer
exclusive Copyright and Related Rights (defined below) upon the creator and
subsequent owner(s) (each and all, an "owner") of an original work of
authorship and/or a database (each, a "Work").
Certain owners wish to permanently relinquish those rights to a Work for the
purpose of contributing to a commons of creative, cultural and scientific
works ("Commons") that the public can reliably and without fear of later
claims of infringement build upon, modify, incorporate in other works, reuse
and redistribute as freely as possible in any form whatsoever and for any
purposes, including without limitation commercial purposes. These owners may
contribute to the Commons to promote the ideal of a free culture and the
further production of creative, cultural and scientific works, or to gain
reputation or greater distribution for their Work in part through the use and
efforts of others.
For these and/or other purposes and motivations, and without any expectation
of additional consideration or compensation, the person associating CC0 with a
Work (the "Affirmer"), to the extent that he or she is an owner of Copyright
and Related Rights in the Work, voluntarily elects to apply CC0 to the Work
and publicly distribute the Work under its terms, with knowledge of his or her
Copyright and Related Rights in the Work and the meaning and intended legal
effect of CC0 on those rights.
1. Copyright and Related Rights. A Work made available under CC0 may be
protected by copyright and related or neighboring rights ("Copyright and
Related Rights"). Copyright and Related Rights include, but are not limited
to, the following:
i. the right to reproduce, adapt, distribute, perform, display, communicate,
and translate a Work;
ii. moral rights retained by the original author(s) and/or performer(s);
iii. publicity and privacy rights pertaining to a person's image or likeness
depicted in a Work;
iv. rights protecting against unfair competition in regards to a Work,
subject to the limitations in paragraph 4(a), below;
v. rights protecting the extraction, dissemination, use and reuse of data in
a Work;
vi. database rights (such as those arising under Directive 96/9/EC of the
European Parliament and of the Council of 11 March 1996 on the legal
protection of databases, and under any national implementation thereof,
including any amended or successor version of such directive); and
vii. other similar, equivalent or corresponding rights throughout the world
based on applicable law or treaty, and any national implementations thereof.
2. Waiver. To the greatest extent permitted by, but not in contravention of,
applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and
unconditionally waives, abandons, and surrenders all of Affirmer's Copyright
and Related Rights and associated claims and causes of action, whether now
known or unknown (including existing as well as future claims and causes of
action), in the Work (i) in all territories worldwide, (ii) for the maximum
duration provided by applicable law or treaty (including future time
extensions), (iii) in any current or future medium and for any number of
copies, and (iv) for any purpose whatsoever, including without limitation
commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes
the Waiver for the benefit of each member of the public at large and to the
detriment of Affirmer's heirs and successors, fully intending that such Waiver
shall not be subject to revocation, rescission, cancellation, termination, or
any other legal or equitable action to disrupt the quiet enjoyment of the Work
by the public as contemplated by Affirmer's express Statement of Purpose.
3. Public License Fallback. Should any part of the Waiver for any reason be
judged legally invalid or ineffective under applicable law, then the Waiver
shall be preserved to the maximum extent permitted taking into account
Affirmer's express Statement of Purpose. In addition, to the extent the Waiver
is so judged Affirmer hereby grants to each affected person a royalty-free,
non transferable, non sublicensable, non exclusive, irrevocable and
unconditional license to exercise Affirmer's Copyright and Related Rights in
the Work (i) in all territories worldwide, (ii) for the maximum duration
provided by applicable law or treaty (including future time extensions), (iii)
in any current or future medium and for any number of copies, and (iv) for any
purpose whatsoever, including without limitation commercial, advertising or
promotional purposes (the "License"). The License shall be deemed effective as
of the date CC0 was applied by Affirmer to the Work. Should any part of the
License for any reason be judged legally invalid or ineffective under
applicable law, such partial invalidity or ineffectiveness shall not
invalidate the remainder of the License, and in such case Affirmer hereby
affirms that he or she will not (i) exercise any of his or her remaining
Copyright and Related Rights in the Work or (ii) assert any associated claims
and causes of action with respect to the Work, in either case contrary to
Affirmer's express Statement of Purpose.
4. Limitations and Disclaimers.
a. No trademark or patent rights held by Affirmer are waived, abandoned,
surrendered, licensed or otherwise affected by this document.
b. Affirmer offers the Work as-is and makes no representations or warranties
of any kind concerning the Work, express, implied, statutory or otherwise,
including without limitation warranties of title, merchantability, fitness
for a particular purpose, non infringement, or the absence of latent or
other defects, accuracy, or the present or absence of errors, whether or not
discoverable, all to the greatest extent permissible under applicable law.
c. Affirmer disclaims responsibility for clearing rights of other persons
that may apply to the Work or any use thereof, including without limitation
any person's Copyright and Related Rights in the Work. Further, Affirmer
disclaims responsibility for obtaining any necessary consents, permissions
or other rights required for any use of the Work.
d. Affirmer understands and acknowledges that Creative Commons is not a
party to this document and has no duty or obligation with respect to this
CC0 or use of the Work.
For more information, please see
<http://creativecommons.org/publicdomain/zero/1.0/>
================================================
FILE: README.md
================================================
<div align="center">
<img src="./assets/img/bulb.svg" width="200" alt="light bulb icon">
</div>
# CSS Protips [](https://awesome.re)
A collection of tips to help take your CSS skills pro.
> [!TIP]
> For other great lists check out [@sindresorhus](https://github.com/sindresorhus/)'s curated list of [awesome lists](https://github.com/sindresorhus/awesome/).
## Contents
- [Protips](#protips)
- [Support](#support)
- [Translations](#translations)
- [Contribution Guidelines](CONTRIBUTING.md)
## Protips
1. [Use a CSS Reset](#use-a-css-reset)
1. [Inherit `box-sizing`](#inherit-box-sizing)
1. [Use `unset` Instead of Resetting All Properties](#use-unset-instead-of-resetting-all-properties)
1. [Use `:not()` to Apply/Unapply Borders on Navigation](#use-not-to-applyunapply-borders-on-navigation)
1. [Check if Font Is Installed Locally](#check-if-font-is-installed-locally)
1. [Add `line-height` to `body`](#add-line-height-to-body)
1. [Set `:focus` for Form Elements](#set-focus-for-form-elements)
1. [Vertically-Center Anything](#vertically-center-anything)
1. [Use `aspect-ratio` Instead of Height/Width](#use-aspect-ratio-instead-of-heightwidth)
1. [Comma-Separated Lists](#comma-separated-lists)
1. [Select Items Using Negative `nth-child`](#select-items-using-negative-nth-child)
1. [Use SVG for Icons](#use-svg-for-icons)
1. [Use the "Lobotomized Owl" Selector](#use-the-lobotomized-owl-selector)
1. [Use `max-height` for Pure CSS Sliders](#use-max-height-for-pure-css-sliders)
1. [Equal-Width Table Cells](#equal-width-table-cells)
1. [Get Rid of Margin Hacks With Flexbox](#get-rid-of-margin-hacks-with-flexbox)
1. [Use Attribute Selectors with Empty Links](#use-attribute-selectors-with-empty-links)
1. [Control Specificity Better With `:is()`](#control-specificity-better-with-is)
1. [Style "Default" Links](#style-default-links)
1. [Intrinsic Ratio Boxes](#intrinsic-ratio-boxes)
1. [Style Broken Images](#style-broken-images)
1. [Use `rem` for Global Sizing; Use `em` for Local Sizing](#use-rem-for-global-sizing-use-em-for-local-sizing)
1. [Hide Autoplay Videos That Aren't Muted](#hide-autoplay-videos-that-arent-muted)
1. [Use `:root` for Flexible Type](#use-root-for-flexible-type)
1. [Set `font-size` on Form Elements for a Better Mobile Experience](#set-font-size-on-form-elements-for-a-better-mobile-experience)
1. [Use Pointer Events to Control Mouse Events](#use-pointer-events-to-control-mouse-events)
1. [Set `display: none` on Line Breaks Used as Spacing](#set-display-none-on-line-breaks-used-as-spacing)
1. [Use `:empty` to Hide Empty HTML Elements](#use-empty-to-hide-empty-html-elements)
1. [Use `margin-inline` instead of `margin`](#use-margin-inline-instead-of-margin)
### Use a CSS Reset
CSS resets help enforce style consistency across different browsers with a clean slate for styling elements. There are plenty of reset patterns to find, or you can use a more simplified reset approach:
```css
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
```
Now elements will be stripped of margins and padding, and `box-sizing` lets you manage layouts with the CSS box model.
#### [Demo](https://codepen.io/AllThingsSmitty/pen/kkrkLL)
> [!TIP]
> If you follow the [Inherit `box-sizing`](#inherit-box-sizing) tip below you might opt to not include the `box-sizing` property in your CSS reset.
<sup>[Back to top](#contents)</sup>
### Inherit `box-sizing`
Let `box-sizing` be inherited from `html`:
```css
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
```
This makes it easier to change `box-sizing` in plugins or other components that leverage other behavior.
#### [Demo](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)
<sup>[Back to top](#contents)</sup>
### Use `unset` Instead of Resetting All Properties
When resetting an element's properties, it's not necessary to reset each individual property:
```css
button {
background: none;
border: none;
color: inherit;
font: inherit;
outline: none;
padding: 0;
}
```
You can specify all of an element's properties using the `all` shorthand. Setting the value to `unset` changes an element's properties to their initial values:
```css
button {
all: unset;
}
```
<sup>[Back to top](#contents)</sup>
### Use `:not()` to Apply/Unapply Borders on Navigation
Instead of putting on the border...
```css
/* add border */
.nav li {
border-right: 1px solid #666;
}
```
...and then taking it off the last element...
```css
/* remove border */
.nav li:last-child {
border-right: none;
}
```
...use the `:not()` pseudo-class to only apply to the elements you want:
```css
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
```
Here, the CSS selector is read as a human would describe it.
#### [Demo](https://codepen.io/AllThingsSmitty/pen/LkymvO)
<sup>[Back to top](#contents)</sup>
### Check if Font Is Installed Locally
You can check if a font is installed locally before fetching it remotely, which is a good performance tip, too.
```css
@font-face {
font-family: "Dank Mono";
src:
/* Full name */ local("Dank Mono"), /* Postscript name */ local("Dank Mono"),
/* Otherwise, download it! */ url("//...a.server/fonts/DankMono.woff");
}
code {
font-family: "Dank Mono", system-ui-monospace;
}
```
H/T to Adam Argyle for sharing this protip and [demo](https://codepen.io/argyleink/pen/VwYJpgR).
<sup>[Back to top](#contents)</sup>
### Add `line-height` to `body`
You don't need to add `line-height` to each `<p>`, `<h*>`, _et al_. separately. Instead, add it to `body`:
```css
body {
line-height: 1.5;
}
```
This way textual elements can inherit from `body` easily.
#### [Demo](https://codepen.io/AllThingsSmitty/pen/VjbdYd)
<sup>[Back to top](#contents)</sup>
### Set `:focus` for Form Elements
Sighted keyboard users rely on focus to determine where keyboard events go in the page. Make focus for form elements stand out and consistent than a browser's default implementation:
```css
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
box-shadow: none;
outline: #000 dotted 2px;
outline-offset: 0.05em;
}
```
#### [Demo](https://codepen.io/AllThingsSmitty/pen/ePzoOP/)
<sup>[Back to top](#contents)</sup>
### Vertically-Center Anything
No, it's not black magic, you really can center elements vertically. You can do this with flexbox...
```css
html,
body {
height: 100%;
}
body {
align-items: center;
display: flex;
justify-content: center;
}
```
...and also with CSS Grid:
```css
body {
display: grid;
height: 100vh;
place-items: center;
}
```
> [!TIP]
> Want to center something else? Vertically, horizontally...anything, anytime, anywhere? CSS-Tricks has [a nice write-up](https://css-tricks.com/centering-css-complete-guide/) on doing all of that.
#### [Demo](https://codepen.io/AllThingsSmitty/pen/GqmGqZ)
<sup>[Back to top](#contents)</sup>
### Use `aspect-ratio` Instead of Height/Width
The `aspect-ratio` property allows you to easily size elements and maintain consistent width-to-height ratio. This is incredibly useful in responsive web design to prevent layout shift. Use `object-fit` with it to prevent disrupting the layout if the height/width values of images changes.
```css
img {
aspect-ratio: 16 / 9; /* width / height */
object-fit: cover;
}
```
Learn more about the `aspect-ratio` property in this [web.dev post](https://web.dev/articles/aspect-ratio).
#### [Demo](https://codepen.io/AllThingsSmitty/pen/MWxwoNx/)
<sup>[Back to top](#contents)</sup>
### Comma-Separated Lists
Make list items look like a real, comma-separated list:
```css
ul > li:not(:last-child)::after {
content: ",";
}
```
Use the `:not()` pseudo-class and no comma will be added to the last item.
> [!NOTE]
> This tip may not be ideal for accessibility, specifically screen readers. And copy/paste from the browser doesn't work with CSS-generated content. Proceed with caution.
<sup>[Back to top](#contents)</sup>
### Select Items Using Negative `nth-child`
Use negative `nth-child` in CSS to select items 1 through n.
```css
li {
display: none;
}
/* select items 1 through 3 and display them */
li:nth-child(-n + 3) {
display: block;
}
```
Or, since you've already learned a little about [using `:not()`](#use-not-to-applyunapply-borders-on-navigation), try:
```css
/* select all items except the first 3 and display them */
li:not(:nth-child(-n + 3)) {
display: block;
}
```
#### [Demo](https://codepen.io/AllThingsSmitty/pen/WxjKZp)
<sup>[Back to top](#contents)</sup>
### Use SVG for Icons
There's no reason not to use SVG for icons:
```css
.logo {
background: url("logo.svg");
}
```
SVG scales well for all resolution types and is supported in all browsers [back to IE9](http://caniuse.com/#search=svg). Ditch your .png, .jpg, or .gif-jif-whatev files.
> [!NOTE]
> If you have SVG icon-only buttons for sighted users and the SVG fails to load, this will help maintain accessibility:
```css
.no-svg .icon-only::after {
content: attr(aria-label);
}
```
<sup>[Back to top](#contents)</sup>
### Use the "Lobotomized Owl" Selector
It may have a strange name but using the universal selector (`*`) with the adjacent sibling selector (`+`) can provide a powerful CSS capability:
```css
* + * {
margin-top: 1.5em;
}
```
In this example, all elements in the flow of the document that follow other elements will receive `margin-top: 1.5em`.
> [!TIP]
> For more on the "lobotomized owl" selector, read [Heydon Pickering's post](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) on _A List Apart_.
#### [Demo](https://codepen.io/AllThingsSmitty/pen/grRvWq)
<sup>[Back to top](#contents)</sup>
### Use `max-height` for Pure CSS Sliders
Implement CSS-only sliders using `max-height` with overflow hidden:
```css
.slider {
max-height: 200px;
overflow-y: hidden;
width: 300px;
}
.slider:hover {
max-height: 600px;
overflow-y: scroll;
}
```
The element expands to the `max-height` value on hover and the slider displays as a result of the overflow.
<sup>[Back to top](#contents)</sup>
### Equal-Width Table Cells
Tables can be a pain to work with. Try using `table-layout: fixed` to keep cells at equal width:
```css
.calendar {
table-layout: fixed;
}
```
Pain-free table layouts.
#### [Demo](https://codepen.io/AllThingsSmitty/pen/jALALm)
<sup>[Back to top](#contents)</sup>
### Get Rid of Margin Hacks With Flexbox
When working with column gutters you can get rid of `nth-`, `first-`, and `last-child` hacks by using flexbox's `space-between` property:
```css
.list {
display: flex;
justify-content: space-between;
}
.list .person {
flex-basis: 23%;
}
```
Now column gutters always appear evenly-spaced.
<sup>[Back to top](#contents)</sup>
### Use Attribute Selectors with Empty Links
Display links when the `<a>` element has no text value but the `href` attribute has a link:
```css
a[href^="http"]:empty::before {
content: attr(href);
}
```
That's really convenient.
#### [Demo](https://codepen.io/AllThingsSmitty/pen/zBzXRx)
> [!NOTE]
> This tip may not be ideal for accessibility, specifically screen readers. And copy/paste from the browser doesn't work with CSS-generated content. Proceed with caution.
<sup>[Back to top](#contents)</sup>
### Control Specificity Better with `:is()`
The `:is()` pseudo-class is used to target multiple selectors at once, reducing redundancy and enhancing code readability. This is incredibly useful for writing large selectors in a more compact form.
```css
:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) {
color: green;
}
```
The above ruleset is equivalent to the following number selector rules...
```css
section h1,
section h2,
section h3,
section h4,
section h5,
section h6,
article h1,
article h2,
article h3,
article h4,
article h5,
article h6,
aside h1,
aside h2,
aside h3,
aside h4,
aside h5,
aside h6,
nav h1,
nav h2,
nav h3,
nav h4,
nav h5,
nav h6 {
color: green;
}
```
#### [Demo](https://codepen.io/AllThingsSmitty/pen/rNRVxdx)
<sup>[Back to top](#contents)</sup>
### Style "Default" Links
Add a style for "default" links:
```css
a[href]:not([class]) {
color: #008000;
text-decoration: underline;
}
```
Now links that are inserted via a CMS, which don't usually have a `class` attribute, will have a distinction without generically affecting the cascade.
<sup>[Back to top](#contents)</sup>
### Intrinsic Ratio Boxes
To create a box with an intrinsic ratio, all you need to do is apply top or bottom padding to a div:
```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%;
}
```
Using 20% for padding makes the height of the box equal to 20% of its width. No matter the width of the viewport, the child div will keep its aspect ratio (100% / 20% = 5:1).
#### [Demo](https://codepen.io/AllThingsSmitty/pen/jALZvE)
<sup>[Back to top](#contents)</sup>
### Style Broken Images
Make broken images more aesthetically-pleasing with a little bit of CSS:
```css
img {
display: block;
font-family: sans-serif;
font-weight: 300;
height: auto;
line-height: 2;
position: relative;
text-align: center;
width: 100%;
}
```
Now add pseudo-elements rules to display a user message and URL reference of the broken image:
```css
img::before {
content: "We're sorry, the image below is broken :(";
display: block;
margin-bottom: 10px;
}
img::after {
content: "(url: " attr(src) ")";
display: block;
font-size: 12px;
}
```
> [!TIP]
> Learn more about styling for this pattern in [Ire Aderinokun's post](http://bitsofco.de/styling-broken-images/).
<sup>[Back to top](#contents)</sup>
### Use `rem` for Global Sizing; Use `em` for Local Sizing
After setting the base font size at the root (`html { font-size: 100%; }`), set the font size for textual elements to `em`:
```css
h2 {
font-size: 2em;
}
p {
font-size: 1em;
}
```
Then set the font-size for modules to `rem`:
```css
article {
font-size: 1.25rem;
}
aside .module {
font-size: 0.9rem;
}
```
Now each module becomes compartmentalized and easier to style, more maintainable, and flexible.
<sup>[Back to top](#contents)</sup>
### Hide Autoplay Videos That Aren't Muted
This is a great trick for a custom user stylesheet. Avoid overloading a user with sound from a video that autoplays when the page is loaded. If the sound isn't muted, don't show the video:
```css
video[autoplay]:not([muted]) {
display: none;
}
```
Once again, we're taking advantage of using the [`:not()`](#use-not-to-applyunapply-borders-on-navigation) pseudo-class.
<sup>[Back to top](#contents)</sup>
### Use `:root` for Flexible Type
The type font size in a responsive layout should be able to adjust with each viewport. You can calculate the font size based on the viewport height and width using `:root`:
```css
:root {
font-size: calc(1vw + 1vh + 0.5vmin);
}
```
Now you can utilize the `root em` unit based on the value calculated by `:root`:
```css
body {
font: 1rem/1.6 sans-serif;
}
```
#### [Demo](https://codepen.io/AllThingsSmitty/pen/XKgOkR)
<sup>[Back to top](#contents)</sup>
### Set `font-size` on Form Elements for a Better Mobile Experience
To avoid mobile browsers (iOS Safari, _et al_.) from zooming in on HTML form elements when a `<select>` drop-down is tapped, add `font-size` to the selector rule:
```css
input[type="text"],
input[type="number"],
select,
textarea {
font-size: 16px;
}
```
<sup>[Back to top](#contents)</sup>
### Use Pointer Events to Control Mouse Events
[Pointer events](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) allow you to specify how the mouse interacts with the element it's touching. To disable the default pointer event on a button, for instance:
```css
button:disabled {
opacity: 0.5;
pointer-events: none;
}
```
It's that simple.
<sup>[Back to top](#contents)</sup>
### Set `display: none` on Line Breaks Used as Spacing
As [Harry Roberts pointed out](https://twitter.com/csswizardry/status/1170835532584235008), this can help prevent CMS users from using extra line breaks for spacing:
```css
br + br {
display: none;
}
```
<sup>[Back to top](#contents)</sup>
### Use `:empty` to Hide Empty HTML Elements
If you have HTML elements that are empty, i.e., the content has yet to be set either by a CMS or dynamically injected (e.g., `<p class="error-message"></p>`) and it's creating unwanted space on your layout, use the `:empty` pseudo-class to hide the element on the layout.
```css
:empty {
display: none;
}
```
> [!NOTE]
> Keep in mind that elements with whitespace aren't considered empty, e.g., `<p class="error-message"> </p>`.
<sup>[Back to top](#contents)</sup>
## Support
Current versions of Chrome, Firefox, Safari, and Edge.
<sup>[Back to top](#contents)</sup>
### Use `margin-inline` instead of `margin`
`margin-inline` defines the inline start and end margins of an element. So instead of using `margin-left` and `margin-right` we can use the inline property to define both.
```css
.div {
margin-inline: auto;
}
```
The same can be done for `margin-block` with defines the block start and end margins, i.e., `margin-top` and `margin-bottom`.
```css
.div {
margin-block: auto;
}
```
#### [Demo](https://codepen.io/AllThingsSmitty/pen/PwoOQGB)
<sup>[Back to top](#contents)</sup>
## Translations
> [!NOTE]
> I've had less time available to maintain the growing list of translated tips; adding a new tip requires including it with over a dozen translations. For that reason, translated README files are likely to not include all the tips listed on the main README file.
- [简体中文](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/gr-GR)
- [ગુજરાતી](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)
- [Tiếng Việt](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/vn-VN)
<sup>[Back to top](#contents)</sup>
================================================
FILE: translations/de-DE/README.md
================================================
<p align="center">
<img src="../../assets/img/bulb.svg" width="200" alt="light bulb icon">
</p>
# CSS Profi-Tipps [](https://github.com/sindresorhus/awesome)
Eine Sammlung an Tipps, um deine CSS-Fähigkeiten zu professionalisieren.
> 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.
## Inhaltsverzeichnis
* [Profi-Tipps](#profi-tipps)
* [Unterstützung](#unterstützung)
* [Mitarbeitsrichtlinien](../../CONTRIBUTING.md)
## Profi-Tipps
1. [Benutze ein CSS-Reset](#benutze-ein-css-reset)
1. [Übernehme `box-sizing`](#Übernehme-box-sizing)
1. [Benutze `unset`, anstatt alle Eigenschaften zurückzusetzen](#benutze-unset-anstatt-alle-eigenschaften-zurückzusetzen)
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)
1. [Kontroller, om skrifttypen er installeret lokalt](#Kontroller-om-skrifttypen-er-installeret-lokalt)
1. [Ergänze `line-height` an `body`](#ergänze-line-height-an-body)
1. [Setze `:focus` für Form-Elemente](#setze-focus-für-form-elemente)
1. [Zentriere alles vertikal](#zentriere-alles-vertikal)
1. [Kommaseparierte Liste](#kommaseparierte-liste)
1. [Selektiere Items mit einem negativen `nth-child`](#selektiere-items-mit-einem-negativen-nth-child)
1. [Benutze SVG für Symbole](#benutze-svg-für-symbole)
1. [Benutze den "lobotomisierte Eule"-Selektor](#benutze-den-lobotomisierte-eule-selektor)
1. [Benutze `max-height` für reine CSS-Galerien](#benutze-max-height-für-reine-css-galerien)
1. [Setze Tabellenzellen auf die gleiche Weite](#setze-tabellenzellen-auf-die-gleiche-weite)
1. [Benutze Flexbox, um von Margin-Hacks wegzukommen](#benutze-flexbox-um-von-margin-hacks-wegzukommen)
1. [Benutze den Attribut-Selektor mit leeren Verlinkungen](#benutze-den-attribut-selektor-mit-leeren-verlinkungen)
1. [Gestalte "Standard"-Verlinkungen](#gestalte-standard-verlinkungen)
1. [Boxen mit zugehörigem Größenverhältnis](#boxen-mit-zugehörigem-größenverhältnis)
1. [Gestalte defekte Bilder](#gestalte-defekte-bilder)
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)
1. [Verstecke automatisch abspielende Videos, die nicht auf stumm gesetzt sind](#verstecke-automatisch-abspielende-videos-die-nicht-auf-stumm-gesetzt-sind)
1. [Benutze `:root` für flexible Schrift](#benutze-root-für-flexible-schrift)
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)
1. [Benutze `Pointer`-Events um Mausereignisse zu kontrollieren](#benutze-pointer-events-um-mausereignisse-zu-kontrollieren)
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)
### Benutze ein CSS-Reset
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:
```css
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
```
Nun werden Elemente von ihren Margins und Paddings befreit und `box-sizing` lässt dich das CSS Box-Modell handhaben.
#### [Demo](http://codepen.io/AllThingsSmitty/pen/kkrkLL)
**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.
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
### Übernehme `box-sizing`
Übernehme `box-sizing` von `html`:
```css
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
```
Dies macht es einfacher das `box-sizing` über Plugins oder andere Komponenten zu verändern.
#### [Demo](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
### Benutze `unset`, anstatt alle Eigenschaften zurückzusetzen
Wenn du die Eigenschaften eines Elements zurücksetzt, ist es nicht notwendig jede einzelne Eigenschaft individuell zurückzusetzen:
```css
button {
background: none;
border: none;
color: inherit;
font: inherit;
outline: none;
padding: 0;
}
```
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:
```css
button {
all: unset;
}
```
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
### Benutze `:not()` um Rahmen an die Navigation zu setzen oder zu entfernen
Anstatt den Rahmen zu ergänzen…
```css
/* füge den Rahmen hinzu */
.nav li {
border-right: 1px solid #666;
}
```
…um ihn dann beim letzten Element wieder zu entfernen…
```css
/* entferne den Rahmen */
.nav li:last-child {
border-right: none;
}
```
…benutze die `:not()`-Pseudoklasse um nur die Elemente zu gestalten, die du willst:
```css
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
```
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.
#### [Demo](http://codepen.io/AllThingsSmitty/pen/LkymvO)
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
### Check If Font Is Installed Locally](#check-if-font-is-installed-locally)
### Kontroller, om skrifttypen er installeret lokalt
Du kan kontrollere, om en skrifttype er installeret lokalt, før du henter den eksternt, hvilket også er et godt ydelsestip.
```css
@font-face {
font-family: "Dank Mono";
src:
/* Full name */
local("Dank Mono"),
/* Postscript name */
local("Dank-Mono"),
/* Otherwise, download it! */
url("//...a.server/fonts/DankMono.woff");
}
code {
font-family: "Dank Mono", system-ui-monospace;
}
```
Hat tip til Adam Argyle for at dele denne protip og [demoen](https://codepen.io/argyleink/pen/VwYJpgR).
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
### Ergänze `line-height` an `body`
Du brauchst kein `line-height` an jedes `<p>`, `<h*>`, usw separat zu schreiben. Ergänze es stattdessen an `body`:
```css
body {
line-height: 1.5;
}
```
Auf diese Weise können Textelemente 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_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:
```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.
#### [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 für alle verschiedenen Auflösungen sehr gut und wird von allen Browsern [zurück bis zu IE9](http://caniuse.com/#search=svg) unterstützt. 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 `<a>`-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>
### 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 eines Wertes 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: 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:
```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_innen 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 `<select>`-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 beispielsweise das standardgemäß eingestellte Pointer-Event – beispielsweise bei einer Button-Schaltfläche – abzuschalten:
```css
button:disabled {
opacity: .5;
pointer-events: none;
}
```
So einfach ist das.
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
### Stellen Sie bei Zeilenumbrüchen, die als Abstand verwendet werden, `display: none` ein
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:
```css
br + br {
display: none;
}
```
<sup>[zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis)</sup>
## Unterstützung
Aktuelle Versionen von Chrome, Firefox, Safari, und Edge.
================================================
FILE: translations/es-ES/README.md
================================================
<p align="center">
<img src="../../assets/img/bulb.svg" alt="light bulb icon">
</p>
# Consejos Profesionales para CSS [](https://github.com/sindresorhus/awesome)
Una colección de consejos para ayudarte a mejorar tus conocimientos profesionales de CSS.
> Para ver otras listas geniales, echa un vistazo a la lista curada por [@sindresorhus](https://github.com/sindresorhus/) de [listas Awesome](https://github.com/sindresorhus/awesome/).
## Tabla de contenido
* [Consejos Profesionales](#consejos-profesionales)
* [Soporte](#soporte)
* [Pautas para contribuir](../../CONTRIBUTING.md)
## Consejos Profesionales
1. [Utilizar un CSS Reset](#utilizar-un-css-reset)
1. [Heredar `box-sizing`](#heredar-box-sizing)
1. [Utilice `unset` en lugar de restablecer todas las propiedades](#utilice-unset-en-lugar-de-restablecer-todas-las-propiedades)
1. [Usar `:not()` para Aplicar o Cancelar la aplicación de bordes en la navegación](#usar-not-para-aplicar-o-cancelar-la-aplicación-de-bordes-en-la-navegación)
1. [Compruebe si la fuente está instalada localmente](#compruebe-si-la-fuente-está-instalada-localmente)
1. [Añadir `line-height` al `body`](#añadir-line-height-al-body)
1. [Establecer `:focus` para elementos de formulario](#establecer-focus-para-elementos-de-formulario)
1. [Centrar cualquier cosa verticalmente](#centrar-cualquier-cosa-verticalmente)
1. [Listas separadas por comas](#listas-separadas-por-comas)
1. [Seleccionar elementos usando `nth-child` negativo](#seleccionar-elementos-usando-nth-child-negativo)
1. [Utilizar SVG para los íconos](#utilizar-svg-para-los-íconos)
1. [Utilizar la herramienta de selección "Búho lobotomizado"](#utilizar-la-herramienta-de-selección-búho-lobotomizado)
1. [Usar `max-height` para Sliders con CSS puro](#usar-max-height-para-sliders-con-css-puro)
1. [Celdas de tabla de igual ancho](#celdas-de-tabla-de-igual-ancho)
1. [Deshacerse de hacks para los márgenes en Flexbox](#deshacerse-de-hacks-para-los-márgenes-en-flexbox)
1. [Utilizar atributos como selectores en enlaces vacíos](#utilizar-atributos-como-selectores-en-enlaces-vacíos)
1. [Estilizar enlaces por defecto](#estilizar-enlaces-por-defecto)
1. [Ritmo vertical consistente](#ritmo-vertical-consistente)
1. [Cajas con proporciones intrínsecas](#cajas-con-proporciones-intrínsecas)
1. [Estilizar enlaces rotos a imágenes](#estilizar-enlaces-rotos-a-imágenes)
1. [Usar `rem` para tamaños globales; Usar `em` para tamaños locales](#usar-rem-para-tamaños-globales-usar-em-para-tamaños-locales)
1. [Esconder videos con reproducción automática que no estén silenciados](#esconder-videos-con-reproducción-automática-que-no-estén-silenciados)
1. [Utilizar `:root` para una tipografía flexible](#utilizar-root-para-una-tipografía-flexible)
1. [Definir `font-size` en los elementos de formulario para una mejor experiencia móvil](#definir-font-size-en-los-elementos-de-formulario-para-una-mejor-experiencia-móvil)
1. [Usar eventos de puntero para controlar eventos de mouse](#usar-eventos-de-puntero-para-controlar-eventos-de-mouse)
1. [Establezca `display: none` en Saltos de línea utilizados como espaciado](#establezca-display-none-en-saltos-de-línea-utilizados-como-espaciado)
### Utilizar un CSS Reset
Los CSS Resets ayudan a hacer cumplir la coherencia de estilo en los diferentes navegadores, como una hoja en blanco para los elementos de estilo. Puedes utilizar una biblioteca CSS Reset como [Normalize](http://necolas.github.io/normalize.css/), y otros, o puedes utilizar un enfoque más simplificado para el reset:
```css
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
```
Ahora los elementos están despojados de márgenes y paddings, y `box-sizing` te permite administrar el diseño con el modelo de caja de CSS.
#### [Demo](http://codepen.io/AllThingsSmitty/pen/kkrkLL)
**Nota:** Si sigues el consejo de más abajo [Heredar `box-sizing`](#inherit-box-sizing) puedes optar por no incluir la propiedad `box-sizing` en tu CSS reset.
<sup>[volver al índice de contenidos](#tabla-de-contenido)</sup>
### Heredar `box-sizing`
Heredar `box-sizing` de `html`:
```css
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
```
Esto hace que sea más fácil cambiar `box-sizing` en plugins u otros componentes que aprovechan otros comportamientos.
#### [Demo](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)
<sup>[volver al índice de contenidos](#tabla-de-contenido)</sup>
### Utilice `unset` en lugar de restablecer todas las propiedades
Al restablecer las propiedades de un elemento, no es necesario restablecer cada propiedad individual:
```css
button {
background: none;
border: none;
color: inherit;
font: inherit;
outline: none;
padding: 0;
}
```
Puede especificar todas las propiedades de un elemento usando la declaraciones cortas `all`. Establecer el valor a `unset` cambia las propiedades de un elemento a sus valores iniciales:
```css
button {
all: unset;
}
```
<sup>[volver al índice de contenidos](#tabla-de-contenido)</sup>
### Usar `:not()` para Aplicar o Cancelar la aplicación de bordes en la navegación
En lugar de poner en el borde...
```css
/* Agrega estilo al borde */
.nav li {
border-right: 1px solid #666;
}
```
... para luego quitarlo del último elemento...
```css
/* quitar estilo al borde */
.nav li:last-child {
border-right: none;
}
```
... utiliza la pseudo-clase `:not()` para sólo aplicar el estilo a los elementos que deseas:
```css
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
```
El selector CSS define los bordes de la forma en que un ser humano lo describiría.
#### [Demo](http://codepen.io/AllThingsSmitty/pen/LkymvO)
<sup>[volver al índice de contenidos](#tabla-de-contenido)</sup>
### Compruebe si la fuente está instalada localmente
Puede verificar si una fuente está instalada localmente antes de buscarla de forma remota, lo que también es un buen consejo de rendimiento.
```css
@font-face {
font-family: "Dank Mono";
src:
/* Full name */
local("Dank Mono"),
/* Postscript name */
local("Dank-Mono"),
/* Otherwise, download it! */
url("//...a.server/fonts/DankMono.woff");
}
code {
font-family: "Dank Mono", system-ui-monospace;
}
```
Felicitaciones a Adam Argyle por compartir este protip y [demo](https://codepen.io/argyleink/pen/VwYJpgR).
<sup>[volver al índice de contenidos](#tabla-de-contenido)</sup>
### Añadir `line-height` al `body`
No es necesario añadir `line-height` a cada` <p> `,` <h *> `, _et al_. por separado. En su lugar, agregalo al `body`:
```css
body {
line-height: 1.5;
}
```
De esta manera los elementos de texto pueden heredarlo fácilmente de `body`.
#### [Demo](http://codepen.io/AllThingsSmitty/pen/VjbdYd)
<sup>[volver al índice de contenidos](#tabla-de-contenido)</sup>
### Establecer `:focus` para elementos de formulario
Los usuarios de teclado videntes confían en el enfoque para determinar dónde van los eventos del teclado en la página. Haga que el enfoque de los elementos de formulario se destaque y sea coherente con la implementación predeterminada de un navegador:
```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>[volver al índice de contenidos](#tabla-de-contenido)</sup>
### Centrar cualquier cosa verticalmente
No, no es magia negra, realmente puedes centrar elementos verticalmente:
```css
html,
body {
height: 100%;
margin: 0;
}
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
```
...y también con CSS Grid:
```css
body {
display: grid;
height: 100vh;
margin: 0;
place-items: center center;
}
```
¿Quieres centrar algo más? Vertical, horizontal… cualquier cosa, en cualquier momento y en cualquier lugar? CSS-Tricks tiene [un bonito artículo](https://css-tricks.com/centering-css-complete-guide/) para hacer todo eso.
#### [Demo](http://codepen.io/AllThingsSmitty/pen/GqmGqZ)
<sup>[volver al índice de contenidos](#tabla-de-contenido)</sup>
### Listas separadas por comas
Hacer que los elementos de la lista se vean de forma real, separados por comas:
```css
ul > li:not(:last-child)::after {
content: ",";
}
```
Utilice la pseudo-clase `:not()` para agregar una coma al último elemento.
**Nota:** Este consejo puede no ser ideal para la accesibilidad, específicamente para lectores de pantalla. Y copiar / pegar desde el navegador no funciona con el contenido generado por CSS. Procede con precaución.
<sup>[volver al índice de contenidos](#tabla-de-contenido)</sup>
### Seleccionar elementos usando `nth-child` negativo
Utiliza `nth-child` negativo en CSS para seleccionar los numerales de 1 a n.
```css
li {
display: none;
}
/* seleccionar los elementos de 1 hasta 3 y muestralos */
li:nth-child(-n+3) {
display: block;
}
```
O bien, como ya has aprendido un poco sobre [el uso de `:not()`](# uso no-a-applyunapply-fronteras-on-navegación), trata de:
```css
/* seleccionar todos los elementos excepto los 3 primeros y mostrarlos */
li:not(:nth-child(-n+3)) {
display: none;
}
```
Bueno, éso ha sido bastante fácil.
#### [Demo](http://codepen.io/AllThingsSmitty/pen/WxjKZp)
<sup>[volver al índice de contenidos](#tabla-de-contenido)</sup>
### Utilizar SVG para los íconos
No hay ninguna razón para no usar SVG para los íconos:
```css
.logo {
background: url("logo.svg");
}
```
SVG funciona bien para todos los tipos de resoluciones y es compatible con todos los navegadores [hasta IE9](http://caniuse.com/#search=svg). Así que olvidate de tus archivos .png, .jpg o .gif-jif-loquesea.
**Nota:** Si tienes botones de íconos con SVG para usuarios no videntes y el SVG falla al cargar, esto te ayudará a mantener la accesibilidad:
```css
.no-svg .icon-only::after {
content: attr(aria-label);
}}
```
<sup>[volver al índice de contenidos](#tabla-de-contenido)</sup>
### Utilizar la herramienta de selección "Búho lobotomizado"
Puede que tenga un nombre extraño, pero utilizando el selector universal (`*`) con el selector de hermanos adyacentes (`+`) puedes proporcionar una potente capacidad de CSS:
```css
* + * {
margin-top: 1.5em;
}
```
En este ejemplo, todos los elementos del flujo del documento que siguen otros elementos recibirán `margin-top: 1.5em`.
Para más información sobre el selector "búho lobotomizado", lee el [post de Heydon Pickering](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) en *A List Apart*.
#### [Demo](http://codepen.io/AllThingsSmitty/pen/grRvWq)
<sup>[volver al índice de contenidos](#tabla-de-contenido)</sup>
### Usar `max-height` para Sliders con CSS puro
Implementar un slider con CSS puro utilizando `max-height` con overflow hidden.
```css
.slider {
max-height: 200px;
overflow-y: hidden;
width: 300px;
}
.slider:hover {
max-height: 600px;
overflow-y: scroll;
}
```
El elemento se expande hasta el valor de `max-height` en hover y el slider se muestra como resultado del desbordamiento (overflow).
<sup>[volver al índice de contenidos](#tabla-de-contenido)</sup>
### Celdas de tabla de igual ancho
Las tablas pueden ser dolorosas para trabajar, por lo que se trate de usar `table-layout: fixed` para mantener las celdas con el mismo ancho:
```css
.calendar {
table-layout: fixed;
}
```
Diseño de tablas sin dolor.
#### [Demo](http://codepen.io/AllThingsSmitty/pen/jALALm)
<sup>[volver al índice de contenidos](#tabla-de-contenido)</sup>
### Deshacerse de hacks para los márgenes en Flexbox
Cuando trabajas con el espaciado entre columnas puedes deshacerte de los hacks con `nth-`, `first-` y `last-child` mediante el uso de la propiedad `space-between` de Flexbox:
```css
.list {
display: flex;
justify-content: space-between;
}
.list .person {
flex-basis: 23%;
}
```
Ahora las columnas aparecen siempre espaciadas uniformemente.
<sup>[volver al índice de contenidos](#tabla-de-contenido)</sup>
### Utilizar atributos como selectores en enlaces vacíos
Mostrar vínculos cuando el elemento `<a>` no tiene un valor de texto, pero el atributo `href` tiene un enlace:
```css
a[href^="http"]:empty::before {
content: attr(href);
}
```
Eso es bastante conveniente.
#### [Demo](http://codepen.io/AllThingsSmitty/pen/zBzXRx)
<sup>[volver al índice de contenidos](#tabla-de-contenido)</sup>
### Estilizar enlaces por defecto
Añadir un estilo a los enlaces "por defecto":
```css
a[href]:not([class]) {
color: #008000;
text-decoration: underline;
}
```
Ahora los enlaces que se insertan a través de un CMS, que por lo general no tienen un atributo `class`, tendrán una distinción sin afectar de forma genérica la cascada.
<sup>[volver al índice de contenidos](#tabla-de-contenido)</sup>
### Ritmo vertical consistente
Utilice un selector universal (`*`) dentro de un elemento para crear un ritmo vertical consistente:
```ss
.intro> * {
margin-bottom: 1.25rem;
}
```
Un ritmo vertical consistente proporciona una estética visual que hace que el contenido sea mucho más legible.
<sup>[volver al índice de contenidos](#tabla-de-contenido)</sup>
### Cajas con proporciones intrínsecas
Para crear un cuadro con una proporción intrínseca, todo lo que tiene que hacer es aplicar un padding superior o inferior a un div:
```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%;
}
```
Usando un 20% de padding hace que la altura de la caja sea igual al 20% de su anchura. No importa el ancho de la ventana, el div hijo va a mantener su relación de aspecto (100% / 20% = 5: 1).
#### [Demo](http://codepen.io/AllThingsSmitty/pen/jALZvE)
<sup>[volver al índice de contenidos](#tabla-de-contenido)</sup>
### Estilizar enlaces rotos a imágenes
Haz que las imágenes rotas sean estéticamente más agradables con un poco de CSS:
```css
img {
display: block;
font-family: sans-serif;
font-weight: 300;
height: auto;
line-height: 2;
position: relative;
text-align: center;
width: 100%;
}
```
Ahora añade propiedades desde los pseudo-elementos para mostrar un mensaje al usuario y una referencia de dirección URL de la imagen rota:
```css
img::before {
content: "We're sorry, the image below is broken :(";
display: block;
margin-bottom: 10px;
}
img::after {
content: "(url: " attr(src) ")";
display: block;
font-size: 12px;
}
```
Aprende más sobre el estilo de este patrón en [post original](http://bitsofco.de/styling-broken-images/) de [Iré Aderinokun](https://github.com/ireade/).
<sup>[volver al índice de contenidos](#tabla-de-contenido)</sup>
### Usar `rem` para tamaños globales; Usar `em` para tamaños locales
Después de definir el tamaño de la fuente base en la raíz (`html { font-size: 100%; }`), ajusta el tamaño de fuente para los elementos textuales con `em`:
```css
h2 {
font-size: 2em;
}
p {
font-size: 1 em;
}
```
A continuación, establezca el tamaño de fuente para los módulos con `rem`:
```css
article {
font-size: 1.25rem;
}
aside .module {
font-size: .9rem;
}
```
Ahora cada módulo se vuelve compartimentado y más fácil de estilizar, más fácil de mantener, y más flexible.
<sup>[volver al índice de contenidos](#tabla-de-contenido)</sup>
### Esconder videos con reproducción automática que no estén silenciados
Este es un gran truco para una hoja de estilo de usuario personalizada. Evita la sobrecarga de un usuario con el sonido de un vídeo que se reproduce automáticamente cuando se carga la página. Si el sonido no está silenciado, no se muestra el video:
```css
video[autoplay]:not([muted]) {
display: none;
}
```
Una vez más, estamos tomando ventaja de usar la pseudo-clase [`:not()`](#use-not-to-applyunapply-borders-on-navigation).
<sup>[volver al índice de contenidos](#tabla-de-contenido)</sup>
### Utilizar `:root` para una tipografía flexible
El tamaño de tipo de letra en un diseño que responde debe ser capaz de ajustar con cada ventana. Se puede calcular el tamaño de la fuente basada en la altura y la anchura de la ventana gráfica usando `:root`:
```css
:root {
font-size: calc(1vw + 1vh + .5vmin);
}
```
Ahora se puede utilizar la unidad de `root em` basado en el valor calculado por `:root`:
```css
body {
font: 1rem/1.6 sans-serif;
}
```
<sup>[volver al índice de contenidos](#tabla-de-contenido)</sup>
### Definir `font-size` en los elementos de formulario para una mejor experiencia móvil
Para evitar que los navegadores móviles (iOS Safari, _et al_.) hagan zoom sobre los elementos de un formulario HTML cuando un `<select>` desplegable es pulsado, agrega `font-size` a la regla del selector:
```css
input[type="text"],
input[type="number"],
select,
textarea {
font-size: 16px;
}
```
:dancer:
<sup>[volver al índice de contenidos](#tabla-de-contenido)</sup>
### Usar eventos de puntero para controlar eventos de mouse
[Eventos del puntero](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) le permiten especificar cómo el mouse interactúa con el elemento que está tocando. Para deshabilitar el evento de puntero predeterminado en un botón, por ejemplo:
```css
button:disabled {
opacity: .5;
pointer-events: none;
}
```
Es así de simple.
<sup>[volver al índice de contenidos](#tabla-de-contenido)</sup>
### Establezca `display: none` en Saltos de línea utilizados como espaciado
Como señaló [Harry Roberts] (https://twitter.com/csswizardry/status/1170835532584235008), esto puede ayudar a evitar que los usuarios de CMS usen saltos de línea adicionales para el espaciado:
```css
br + br {
display: none;
}
```
<sup>[volver al índice de contenidos](#tabla-de-contenido)</sup>
## Soporte
Las versiones actuales de Chrome, Firefox, Safari y Edge.
================================================
FILE: translations/fr-FR/README.md
================================================
<p align="center">
<img src="../../assets/img/bulb.svg" alt="light bulb icon">
</p>
# Conseils d’expert en CSS [](https://github.com/sindresorhus/awesome)
Une collection de conseils pour vous aider à mener vos compétences CSS au niveau pro.
> Pour d'autres listes géniales, consultez la liste organisée par [@sindresorhus](https://github.com/sindresorhus/) des [listes impressionnantes](https://github.com/sindresorhus/awesome/).
## Table des matières
* [Conseils d’expert](#conseils-dexpert)
* [Prise en charge par les navigateurs](#prise-en-charge-par-les-navigateurs)
* [Directives pour les contributions](../../CONTRIBUTING.md)
## Conseils d’expert
1. [Utilisez un Reset CSS](#utilisez-un-reset-css)
1. [Hériter de `box-sizing`](#hériter-de-box-sizing)
1. [Utilisez `unset` au Lieu de Réinitialiser Toutes les Propriétés](#utilisez-unset-au-lieu-de-réinitialiser-toutes-les-propriétés)
1. [Utiliser `:not()` pour Appliquer / ne pas Appliquer des Bordures à la Barre de Navigation](#utiliser-not-pour-appliquer--ne-pas-appliquer-des-bordures-à-la-barre-de-navigation)
1. [Vérifiez si la police est installée localement](#vérifiez-si-la-police-est-installée-localement)
1. [Ajouter `line-height` à `body`](#ajouter-line-height-à-body)
1. [Définissez `: focus` pour les Éléments de Formulaire](#définissez-focus-pour-les-éléments-de-formulaire)
1. [Tout Centrer Verticalement](#tout-centrer-verticalement)
1. [Listes Séparées par des Virgules](#listes-séparées-par-des-virgules)
1. [Sélectionner des Éléments en Utilisant un `nth-child` Négatif](#sélectionner-des-éléments-en-utilisant-un-nth-child-négatif)
1. [Utiliser SVG pour les Icônes](#utiliser-svg-pour-les-icônes)
1. [Utilisez le Sélecteur "chouette lobotomisée"](#utilisez-le-sélecteur-chouette-lobotomisée)
1. [Utilisez `max-height` pour des Sliders en CSS Pur](#utilisez-max-height-pour-des-sliders-en-css-pur)
1. [Cellules de Tableau à Largeur Égale](#cellules-de-tableau-à-largeur-égale)
1. [Se Débarrasser des Hacks de Marge Avec Flexbox](#se-débarrasser-des-hacks-de-marge-avec-flexbox)
1. [Utiliser des Sélecteurs d'Attribut avec des Liens Vides](#utiliser-des-sélecteurs-dattribut-avec-des-liens-vides)
1. [Style "Par Défaut" des Liens](#style-par-défaut-des-liens)
1. [Ratio de Boîtes Intrinsèque](#ratio-de-boîtes-intrinsèque)
1. [Styliser des Images Cassées](#styliser-des-images-cassées)
1. [Utilisez `rem` pour le Dimensionnement Global; Utilisez `em` pour le Dimensionnement Local](#utilisez-rem-pour-le-dimensionnement-global-utilisez-em-pour-le-dimensionnement-local)
1. [Masquer les Vidéos Lancées Automatiquement qui ne sont pas Mises en Sourdine](#masquer-les-vidéos-lancées-automatiquement-qui-ne-sont-pas-mises-en-sourdine)
1. [Utilisez `:root` pour le Type Flexible](#utilisez-root-pour-le-type-flexible)
1. [Réglez `font-size` sur les Éléments de Formulaire pour une Meilleure Expérience Mobile](#réglez-font-size-sur-les-éléments-de-formulaire-pour-une-meilleure-expérience-mobile)
1. [Utiliser les Événements de Pointeur pour Contrôler les Événements de la Souris](#utiliser-les-événements-de-pointeur-pour-contrôler-les-événements-de-la-souris)
1. [Définit `display: none` sur les sauts de ligne utilisés comme espacement](#définit-display-none-sur-les-sauts-de-ligne-utilisés-comme-espacement)
### Utilisez un Reset CSS
La réinitialisation CSS aide à faire respecter une cohérence de style entre les différents navigateurs en faisant table rase pour les éléments de style. Vous pouvez utiliser la bibliothèque de réinitialisation CSS comme [Normalize](http://necolas.github.io/normalize.css/), et al, ou vous pouvez utiliser une approche de réinitialisation plus simplifiée :
```css
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
```
Maintenant, les éléments seront dépouillés des marges et de zones de remplissage, et `box-sizing` vous permet de gérer la mise en page avec le modèle de boîte CSS.
#### [Démo](http://codepen.io/AllThingsSmitty/pen/kkrkLL)
**Remarque:** Si vous suivez le conseil [Hériter `box-sizing`](#inherit-box-sizing) ci-dessous vous pouvez choisir de ne pas inclure la propriété box-sizing dans votre reset CSS.
<sup>[retour à la table des matières](#table-des-matières)</sup>
### Hériter de `box-sizing`
Laisser `box-sizing` être héritée de `html`:
```css
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
```
Cela rend plus facile le fait de changer `box-sizing` dans des plugins ou autres composants qui exploitent d'autres comportements.
#### [Démo](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)
<sup>[retour à la table des matières](#table-des-matières)</sup>
### Utilisez `unset` au Lieu de Réinitialiser Toutes les Propriétés
Lors de la réinitialisation des propriétés d'un élément, il n'est pas nécessaire de réinitialiser chaque propriété individuelle :
```css
button {
background: none;
border: none;
color: inherit;
font: inherit;
outline: none;
padding: 0;
}
```
Vous pouvez spécifier toutes les propriétés d'un élément en utilisant le raccourci `all`. Définir la valeur sur `unset` change les propriétés d'un élément à leurs valeurs initiales :
```css
button {
all: unset;
}
```
<sup>[retour à la table des matières](#table-des-matières)</sup>
### Utiliser `:not()` pour Appliquer / ne pas Appliquer des Bordures à la Barre de Navigation
Au lieu de mettre à l'encadrement...
```css
/* add border */
.nav li {
border-right: 1px solid #666;
}
```
... puis l'enlever du dernier élément...
```css
/* remove border */
.nav li:last-child {
border-right: none;
}
```
...Utiliser la pseudo-classe `:not()` pour appliquer uniquement aux éléments que vous voulez :
```css
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
```
Le sélecteur CSS définit la frontière comme un humain la décrirait.
#### [Démo](http://codepen.io/AllThingsSmitty/pen/LkymvO)
<sup>[retour à la table des matières](#table-des-matières)</sup>
### Vérifiez si la police est installée localement
Vous pouvez vérifier si une police est installée localement avant de la récupérer à distance, ce qui est également une bonne astuce de performance.
```css
@font-face {
font-family: "Dank Mono";
src:
/* Full name */
local("Dank Mono"),
/* Postscript name */
local("Dank-Mono"),
/* Otherwise, download it! */
url("//...a.server/fonts/DankMono.woff");
}
code {
font-family: "Dank Mono", system-ui-monospace;
}
```
Pointe du chapeau à Adam Argyle pour avoir partagé ce protip et cette [démo](https://codepen.io/argyleink/pen/VwYJpgR).
<sup>[retour à la table des matières](#table-des-matières)</sup>
### Ajouter `line-height` à `body`
Vous n'avez pas besoin d'ajouter `line-height` à chaque `<p>`, `<h*>`, _et al_. séparément. Au lieu de cela, ajoutez-le à `body`:
```css
body {
line-height: 1.5;
}
```
De cette façon, les éléments textuels peuvent hériter de `body` facilement.
#### [Démo](http://codepen.io/AllThingsSmitty/pen/VjbdYd)
<sup>[retour à la table des matières](#table-des-matières)</sup>
### Définissez `:focus` pour les éléments de formulaire
Les personnes voyantes utilisant le clavier se fient au focus pour déterminer où vont les événements de clavier sur la page. Mettez en évidence les éléments de formulaire, de façon cohérente par rapport à la mise en œuvre par défaut du navigateur :
```css
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
box-shadow: none;
outline: #000 dotted 2px;
outline-offset: .05em;
}
```
#### [Démo](https://codepen.io/AllThingsSmitty/pen/ePzoOP/)
<sup>[retour à la table des matières](#table-des-matières)</sup>
### Tout Centrer Verticalement
Non, ce n'est pas de la magie noire, vous pouvez vraiment centrer des éléments verticalement. Vous pouvez le faire avec 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;
}
```
...et aussi avec CSS Grid :
```css
body {
display: grid;
height: 100vh;
margin: 0;
place-items: center center;
}
```
Vous voulez centrer autre chose ? Verticalement, horizontalement... quoi que ce soit, à tout moment, en tout lieu ? CSS-Tricks a [un article sympa](https://css-tricks.com/centering-css-complete-guide/) sur comment faire tout cela.
#### [Démo](http://codepen.io/AllThingsSmitty/pen/GqmGqZ)
<sup>[retour à la table des matières](#table-des-matières)</sup>
### Listes Séparées par des Virgules
Faites que les liste d'éléments ressemblent de vraies listes, séparées par des virgules :
```css
ul > li:not(:last-child)::after {
content: ",";
}
```
Utilisez la pseudo-classe `:not()` et aucune virgule ne sera ajoutée au dernier élément.
**Remarque:** Il est possible que cette astuce ne soit pas idéale pour l'accessibilité, en particulier pour les lecteurs d'écran. Et copier / coller à partir du navigateur ne fonctionne pas avec le contenu généré par CSS. Procéder avec prudence.
<sup>[retour à la table des matières](#table-des-matières)</sup>
### Sélectionner des Éléments en Utilisant un `nth-child` Négatif
Utilisez un `nth-child` négatif en CSS pour sélectionner des éléments de 1 à n.
```css
li {
display: none;
}
/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
display: block;
}
```
Ou, puisque vous avez déjà appris un peu [en utilisant `:not()`](#use-not-to-applyunapply-borders-on-navigation), essayez :
```css
/* select all items except the first 3 and display them */
li:not(:nth-child(-n+3)) {
display: none;
}
```
#### [Démo](http://codepen.io/AllThingsSmitty/pen/WxjKZp)
<sup>[retour à la table des matières](#table-des-matières)</sup>
### Utiliser SVG pour les Icônes
Il n'y a aucune raison de ne pas utiliser SVG pour les icônes :
```css
.logo {
background: url("logo.svg");
}
```
Le SVG permet de bien mettre à l'échelle et ce pour tous types de résolution, de plus il est pris en charge dans tous les navigateurs depuis [retour au IE9](http://caniuse.com/#search=svg). Donc laissez tombé vos fichiers .png, .jpg ou .gif-JIF-etc.
**Remarque:** Si vous avez seulement des boutons sous forme d'icônes SVG pour les utilisateurs voyants et que le SVG ne parvient pas à charger, cela vous aidera à maintenir l'accessibilité :
```css
.no-svg .icon-only::after {
content: attr(aria-label);
}
```
<sup>[retour à la table des matières](#table-des-matières)</sup>
### Utilisez le Sélecteur "Chouette Lobotomisée"
Il a peut être un nom étrange, mais utiliser le sélecteur universel (`*`) avec le sélecteur de frère adjacent (`+`) peut fournir une capacité de CSS puissante :
```css
* + * {
margin-top: 1.5em;
}
```
Dans cet exemple, tous les éléments dans le flux du document qui suivent d'autres éléments recevront `margin-top: 1.5em`.
Pour en savoir plus sur le sélecteur "chouette lobotomisée", lire [la publication de Heydon Pickering](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) sur *A List Apart*.
#### [Démo](http://codepen.io/AllThingsSmitty/pen/XKgOkR)
<sup>[retour à la table des matières](#table-des-matières)</sup>
### Utilisez `max-height` pour des Sliders en CSS Pur
Mettre en œuvre des sliders en CSS uniquement en utilisant `max-height` avec débordement caché :
```css
.slider {
max-height: 200px;
overflow-y: hidden;
width: 300px;
}
.slider:hover {
max-height: 600px;
overflow-y: scroll;
}
```
L'élément s'étends jusqu'à la valeur `max-height` au survol et le slider s'affiche à la suite du débordement.
<sup>[retour à la table des matières](#table-des-matières)</sup>
### Cellules de Tableau à Largeur Égale
Il peut être pénible de travailler avec des tableaux. Essayez d'utiliser `table-layout: fixed` pour maintenir les cellules à largeur égale :
```css
.calendar {
table-layout: fixed;
}
```
Des tableaux sans douleurs.
#### [Démo](http://codepen.io/AllThingsSmitty/pen/jALALm)
<sup>[retour à la table des matières](#table-des-matières)</sup>
### Se Débarrasser des Hacks de Marge Avec Flexbox
Lorsque vous travaillez sur les gouttières des colonnes, vous pouvez vous débarrasser de `nth`, `first-` et `last-child` en utilisant la propriété flexbox `space-between` :
```css
.list {
display: flex;
justify-content: space-between;
}
.list .person {
flex-basis: 23%;
}
```
Maintenant les gouttières de vos colonnes apparaissent toujours uniformément espacées.
<sup>[retour à la table des matières](#table-des-matières)</sup>
### Utiliser des Sélecteurs d'Attribut avec des Liens Vides
Affichez des liens lorsque l'élément `<a>` n'a pas de valeur de texte mais que l'attribut `href` a un lien :
```css
a[href^="http"]:empty::before {
content: attr(href);
}
```
C'est assez pratique.
#### [Démo](http://codepen.io/AllThingsSmitty/pen/zBzXRx)
<sup>[retour à la table des matières](#table-des-matières)</sup>
### Style "Par Défaut" des Liens
Ajouter un style pour les liens " par défaut" :
```css
a[href]:not([class]) {
color: #008000;
text-decoration: underline;
}
```
Maintenant, les liens qui sont insérés via un CMS, qui ne disposent généralement pas d'un attribut `class`, auront une distinction sans affecter de manière générique la cascade.
<sup>[retour à la table des matières](#table-des-matières)</sup>
### Ratio de Boîtes Intrinsèque
Pour créer une boîte avec une proportion intrinsèque, tout ce que vous devez faire est d'appliquer une zone de remplissage en haut ou en bas de à un div :
```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%;
}
```
En utilisant 20% pour le rembourrage, cela rend la hauteur de la boîte égale à 20% de sa largeur. Peu importe la largeur de la fenêtre d'affichage, la div enfant gardera son ratio d'aspect (100% / 20% = 5: 1).
#### [Démo](http://codepen.io/AllThingsSmitty/pen/jALZvE)
<sup>[retour à la table des matières](#table-des-matières)</sup>
### Styliser des Images Cassées
Faire des images cassées esthétiquement plus agréables avec un peu de CSS :
```css
img {
display: block;
font-family: sans-serif;
font-weight: 300;
height: auto;
line-height: 2;
position: relative;
text-align: center;
width: 100%;
}
```
Maintenant, ajoutez les règles pseudo-éléments pour afficher un message d'utilisateur et une référence URL de l'image brisée :
```css
img::before {
content: "We're sorry, the image below is broken :(";
display: block;
margin-bottom: 10px;
}
img::after {
content: "(url: " attr(src) ")";
display: block;
font-size: 12px;
}
```
En savoir plus sur la styliser de ce patron dans [Ire Aderinokun](https://github.com/ireade/)' [message original](http://bitsofco.de/styling-broken-images/).
<sup>[retour à la table des matières](#table-des-matières)</sup>
### Utilisez `rem` pour le Dimensionnement Global; Utilisez `em` pour le Dimensionnement Local
Après avoir défini la taille de la police de base à la racine (`html { font-size: 100%; }`), définir la taille de la police pour les éléments textuels à `em` :
```css
h2 {
font-size: 2em;
}
p {
font-size: 1em;
}
```
Définissez ensuite la taille de police pour les modules à `rem`:
```css
article {
font-size: 1.25rem;
}
aside .module {
font-size: .9rem;
}
```
Maintenant, chaque module devient compartimentée et plus faciles à styliser, plus maintenable, et flexible.
<sup>[retour à la table des matières](#table-des-matières)</sup>
### Masquer les Vidéos Lancées Automatiquement qui ne sont pas Mises en Sourdine
Ceci est une super astuce pour une feuille de style personnalisée par l'utilisateur. Évitez de surcharger un utilisateur avec le son d'une vidéo lue Automatiquement lorsque la page est chargée. Si le son n'est pas coupé, ne pas montrer la vidéo :
```css
video[autoplay]:not([muted]) {
display: none;
}
```
Encore une fois, nous trions parti de l'utilisation de la pseudo-classe [`:not()`](#use-not-to-applyunapply-borders-on-navigation).
<sup>[retour à la table des matières](#table-des-matières)</sup>
### Utilisez `:root` pour le Type Flexible
La taille type de police dans une mise en page responsive devrait être en mesure de s'ajuster à chaque fenêtre d'affichage. Vous pouvez calculer la taille de la police basée sur la hauteur de la fenêtre et la largeur en utilisant `: root`:
```css
:root {
font-size: calc(1vw + 1vh + .5vmin);
}
```
#### [Démo](http://codepen.io/AllThingsSmitty/pen/XKgOkR)
Maintenant, vous pouvez utiliser l'unitée de `root em` basée sur la valeur calculée par`: root`:
```css
body {
font: 1rem/1.6 sans-serif;
}
```
<sup>[retour à la table des matières](#table-des-matières)</sup>
### Réglez `font-size` sur les Éléments de Formulaire pour une Meilleure Expérience Mobile
Pour éviter aux navigateurs mobiles (iOS Safari, _et al_.) de zoomer sur des éléments de formulaire HTML quand un menu déroulant `<select>` est touché, ajoutez `font-size` à la règle de sélection :
```css
input[type="text"],
input[type="number"],
select,
textarea {
font-size: 16px;
}
```
:dancer:
<sup>[retour à la table des matières](#table-des-matières)</sup>
### Utiliser les Événements de Pointeur pour Contrôler les Événements de la Souris
[Les événements de pointeur](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) vous permettent de spécifier comment la souris interagit avec l'élément qu'elle touche. Pour désactiver l'événement de pointeur par défaut sur un bouton, par exemple :
```css
button:disabled {
opacity: .5;
pointer-events: none;
}
```
C'est aussi simple que cela.
<sup>[retour à la table des matières](#table-des-matières)</sup>
### Définit `display: none` sur les sauts de ligne utilisés comme espacement
Comme [Harry Roberts l'a souligné](https://twitter.com/csswizardry/status/1170835532584235008), cela peut aider à empêcher les utilisateurs du système de gestion de contenu d'utiliser des sauts de ligne supplémentaires pour l'espacement:
```css
br + br {
display: none;
}
```
<sup>[retour à la table des matières](#table-des-matières)</sup>
## Prise en charge par les navigateurs
Les versions actuelles de Chrome, Firefox, Safari, et Edge.
================================================
FILE: translations/gr-GR/README.md
================================================
<p align="center">
<img src="../../assets/img/bulb.svg" width="200" alt="light bulb icon">
</p>
# Εξελιγμένες συμβουλές για CSS [](https://github.com/sindresorhus/awesome)
Μια συλλογή από συμβουλές για να φτάσατε τις CSS ικανότητές σας σε επαγγελματικό επίπεδο
> Για άλλες ωραίες λίστες με συμβουλές δείτε την λίστα του [@sindresorhus](https://github.com/sindresorhus/) με [τέλειες λίστες](https://github.com/sindresorhus/awesome/).
## Πίνακας περιεχομένων
* [Προχωρημένες Συμβουλές](#προχωρημένες-συμβουλές)
* [Υποστήριξη](#υποστήριξη)
* [Μεταφράσεις](../../CONTRIBUTING.md)
## Προχωρημένες Συμβουλές
1. [Χρήση μίας CSS επαναφοράς](#χρήση-μίας-CSS-επαναφοράς)
1. [Κληρονόμιση του 'box-sizing'](#κληρονόμιση-του-box-sizing)
1. [Χρήση `unset` Αντί Για Επαναφορά Όλων Των Ιδιοτήτων](#χρήση-unset-αντί-για-επαναφορά-όλων-των-ιδιοτήτων)
1. [Χρήση `:not()` για Εφαρμόσεις/Βγάλεις τα Πλαίσια κατά την Περιήγηση](#χρήση-not-για-εφαρμόσειςβγάλεις-τα-πλαίσια-κατά-την-περιήγηση)
1. [Überprüfen Sie, ob die Schriftart lokal installiert ist](#Überprüfen-sie-ob-die-schriftart-lokal-installiert-ist)
1. [Προσθήκη `line-height` στο `body`](#προσθήκη-line-height-στο-body)
1. [Θέσε `:focus` για Στοιχεία της Φόρμας](#θέσε-focus-για-στοιχεία-της-φόρμας)
1. [Κάθετο-Κεντράρισμα Όλων](#κάθετο-κεντράρισμα-όλων)
1. [Λίστες που Χωρίζονται-με-Κόμμα](#λίστες-που-χωρίζονται-με-κόμμα)
1. [Επίλογη Αντικειμένων με Χρήση Αρνητικού `nth-child`](#επίλογη-αντικειμένων-με-χρήση-αρνητικού-nth-child)
1. [Χρήση SVG για Εικονίδια](#χρήση-SVG-για-εικονίδια)
1. [Χρήση της "Λοβοτομημένης Κουκουβάγιας" για Διαλέκτη](#χρήση-της-λοβοτομημένης-κουκουβάγιας-για-διαλέκτη)
1. [Χρήση `max-height` για Αγνούς CSS Ολισθητές](#χρήση-max-height-για-αγνούς-CSS-ολισθητές)
1. [Ίσου-Πλάτους Κελία Πίνακα](#ίσου-πλάτους-κελία-πίνακα)
1. [Απέβαλλε τα Hacks των Περιθωρίων Με Flexbox](#απέβαλλε-τα-hacks-των-περιθωρίων-με-flexbox)
1. [Χρήση Επιλογής Χαρακτηριστικών με Κένα Links](#χρήση-επιλογής-χαρακτηριστικών-με-κένα-links)
1. [Δώσε στυλ στα "Προκαθορισμένα" Links](#δώσε-στυλ-στα-προκαθορισμένα-links)
1. [Εσωτερικά Κουτία Αναλογιών](#εσωτερικά-κουτία-αναλογιών)
1. [Εικόνες με Χαλασμένο Στυλ](#εικόνες-με-χαλασμένο-στυλ)
1. [Χρήση `rem` για Προσαρμογή Μεγέθους Παντού; Χρήση `em` για Τοπική Προσαρμογή Μεγέθους](#χρήση-rem-για-προσαρμογή-μεγέθους-παντού-χρήση-em-για-τοπική-προσαρμογή-μεγέθους)
1. [Απόκριψη Βίντεο με Αυτόματη Αναπαραγωγή Που Δεν Είναι σε Σίγαση](#απόκριψη-βίντεο-με-αυτόματη-αναπαραγωγή-που-δεν-είναι-σε-σίγαση)
1. [Χρήση `:root` για Ευέλικτη Γραφή](#χρήση-root-για-ευέλικτη-γραφή)
1. [Ανάθεση `font-size` στα Στοιχεία της Φόρμας για Καλύτερη Εμπειρία από Κινητό](#ανάθεση-font-size-στα-στοιχεία-της-φόρμας-για-καλύτερη-εμπειρία-από-κινητό)
1. [Χρήση Γεγονότων Δείκτη για Έλεγχο Γεγονότων του Ποντικιού](#χρήση-γεγονότων-δείκτη-για-έλεγχο-γεγονότων-του-ποντικιού)
1. [Ανάθεση `display: none` στο Τέλος των Γραμμών που Χρησιμοποιείται σαν Κενό](#ανάθεση-display-none-στο-τέλος-των-γραμμών-που-χρησιμοποιείται-σαν-κενό)
### Χρήση μίας CSS επαναφοράς
Η επαναφορά του CSS βοηθάει στο στυλ αλλά καί στην σταθερότητα ανάμεσα σε διαφορετικόυς περιηγητές αναζήτησης με καθαρό πίνακα για στυλιστικά στοιχεία.Μπορείτε να χρησιμοποιήσετε μια βιβλιοθήκη CSS επαναφοράς ετσι [Normalize](http://necolas.github.io/normalize.css/), _και αλλα._, η μπορείτε να χρησιμοποιήσετε μια πιο απλοποιημένη προσέγγιση επαναφοράς:
```css
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
```
Τωρα τα στοιχεία θα βγουν από τα περιθώρια και από την επένδυση, και το `box-sizing` σε αφήνει να διαχειριστείς τις διατάξεις με το CSS box model.
#### [Demo](http://codepen.io/AllThingsSmitty/pen/kkrkLL)
**Σημείωση:** Αν ακολουθήσετε την [Κληρονόμιση του 'box-sizing'](#κληρονόμιση-του-box-sizing) σαν tip θα πρέπει να μην συμπεριληφθεί το 'box-sizing' στην CSS επαναφορά.
<sup>[πίσω στον πίνακα περιεχομένων](#πίνακας-περιεχομένων)</sup>
### Κληρονόμιση του 'box-sizing'
Ας κληρονομιθεί το `box-sizing` από `html`:
```css
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
```
Αυτό κάνει πιο εύκολο να αλλάξει το `box-sizing` σε πρόσθετα η σε άλλα συστατικά που μοχλεύουν άλλη συμπεριφορά.
#### [Démo](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)
<sup>[πίσω στον πίνακα περιεχομένων](#πίνακας-περιεχομένων)</sup>
### Χρήση `unset` Αντί Για Επαναφορά Όλων Των Ιδιοτήτων
Όταν επαναφέρεις τις ιδιότητες ενός στοιχείου δεν είναι απαραίτητο να επαναφέρεις τις ιδιότητες κάθε ξεχωριστού στοιχείου:
```css
button {
background: none;
border: none;
color: inherit;
font: inherit;
outline: none;
padding: 0;
}
```
Μπορείς να καθορίσεις όλες τις ιδιότητες ενός στοιχείου χρησιμοποιόντας το `all` στενογραφημένο. Αν θέσεις την τιμή σε `unset` άλλαζει τις ιδιότητες ενός στοιχείου στις αρχικές:
```css
button {
all: unset;
}
```
<sup>[πίσω στον πίνακα περιεχομένων](#πίνακας-περιεχομένων)</sup>
### Χρήση `:not()` για Εφαρμόσεις/Βγάλεις τα Πλαίσια κατά την Περιήγηση
Αντί να θέσεις το περιθώριο...
```css
/* add border */
.nav li {
border-right: 1px solid #666;
}
```
...και μετά να το βγάλεις από το τελευταίο στοιχείο...
```css
/* remove border */
.nav li:last-child {
border-right: none;
}
```
...χρησιμοποίησε το `:not()` μια ψευδοκλάση που εφαρμόζεται μόνο στα στοιχεία που θες:
```css
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
```
Εδώ, ο CSS επιλέκτης διαβάστηκε όπως αν το περιέγραφε ένας άνθρωπος.
#### [Demo](http://codepen.io/AllThingsSmitty/pen/LkymvO)
<sup>[πίσω στον πίνακα περιεχομένων](#πίνακας-περιεχομένων)</sup>
### Überprüfen Sie, ob die Schriftart lokal installiert ist
Sie können überprüfen, ob eine Schriftart lokal installiert ist, bevor Sie sie remote abrufen. Dies ist auch ein guter Leistungstipp.
```css
@font-face {
font-family: "Dank Mono";
src:
/* Full name */
local("Dank Mono"),
/* Postscript name */
local("Dank-Mono"),
/* Otherwise, download it! */
url("//...a.server/fonts/DankMono.woff");
}
code {
font-family: "Dank Mono", system-ui-monospace;
}
```
Hutspitze an Adam Argyle für das Teilen dieses Protips und dieser [Demo](https://codepen.io/argyleink/pen/VwYJpgR).
<sup>[πίσω στον πίνακα περιεχομένων](#πίνακας-περιεχομένων)</sup>
### Προσθήκη `line-height` στο `body`
Δεν χρειάζεται να προσθέσεις `line-height`σε κάθε `<p>`, `<h*>`, _et al_. ξεχωριστά. Αντ'αυτού, πρόσθεσέ το `body`:
```css
body {
line-height: 1.5;
}
```
Με αυτόν τον τρόπο τα στοιχεία κειμένου μπορούν να κληρονομήσουν από το `body` έυκολα.
#### [Demo](http://codepen.io/AllThingsSmitty/pen/VjbdYd)
<sup>[πίσω στον πίνακα περιεχομένων](#πίνακας-περιεχομένων)</sup>
### Θέσε `:focus` για Στοιχεία της Φόρμας
Όσοι χρήστες έχουν όραση και χρησιμοποιούν πληκτρολογιο μπορούν να βασιστούν στην συγκέντωση για να αποφασίσουν
που πηγαίνουν τα γεγονότα του πληκτρολογίου στην σελίδα.Κάντε τα στοίχεια συγκέντρωσης να ξεχωρίζουν και σταθερά
σε μια προκαθορισμένη εφαρμογή του browser:
```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>[πίσω στον πίνακα περιεχομένων](#πίνακας-περιεχομένων)</sup>
### Κάθετο-Κεντράρισμα Όλων
Όχι δεν είναι μαύρη μαγεία, μπορείτε όντως να κεντράρετε τα στοιχεία κάθετα. Μπορείτε να το κάνετε αυτό με 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;
}
```
...και επίσης με CSS Grid:
```css
body {
display: grid;
height: 100vh;
margin: 0;
place-items: center center;
}
```
Θέλετε να κεντραρίσετε κάτι άλλο? Vertically, Κάθετα, οριζόντια...όπως θέλετε,όποτε θέλετε, παντού? Το CSS-Tricks έχει [a nice write-up](https://css-tricks.com/centering-css-complete-guide/) on doing all of that.
#### [Demo](http://codepen.io/AllThingsSmitty/pen/GqmGqZ)
<sup>[πίσω στον πίνακα περιεχομένων](#πίνακας-περιεχομένων)</sup>
### Λίστες που Χωρίζονται-με-Κόμμα
Κάντε τα αντικείμενα λίστας να φαίνονται σαν πραγματικές, χωρισμένες-με-κόμμα λίστες:
```css
ul > li:not(:last-child)::after {
content: ",";
}
```
Χρησιμοποιείστε την `:not()` ψευδοκλάση και κανένα κόμμα δεν θα προσθεθεί στο τελευταίο αντικείμενο.
**Σημείωση:** Αυτο το tip μπορεί να μην είναι ιδανικό για προσβασιμότητα, ειδικά για αυτούς που διαβάζουν απο οθόνη. Και το copy/paste από τον browser δεν δουλεύει με περιεχόμενο CSS-generated.Συνεχίστε με προσοχή.
<sup>[πίσω στον πίνακα περιεχομένων](#πίνακας-περιεχομένων)</sup>
### Επίλογη Αντικειμένων με Χρήση Αρνητικού `nth-child`
Χρηιμοποιείστε το αρνητικό `nth-child` στην CSS για να επιλέξετε 1 αντικείμενο από τα n.
```css
li {
display: none;
}
/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
display: block;
}
```
Η, αφού ήδη μάθατε να σχετικά με το [using `:not()`](#use-not-to-applyunapply-borders-on-navigation), δοκιμάστε:
```css
/* select all items except the first 3 and display them */
li:not(:nth-child(-n+3)) {
display: block;
}
```
#### [Demo](http://codepen.io/AllThingsSmitty/pen/WxjKZp)
<sup>[πίσω στον πίνακα περιεχομένων](#πίνακας-περιεχομένων)</sup>
### Χρήση SVG για Εικονίδια
Δεν υπάρχει λόγος να μην χρησιμοποιήσετε SVG για εικονίδια:
```css
.logo {
background: url("logo.svg");
}
```
το SVG κλιμακώνεται ωραία με για όλους τους τύπους ανάλυσης και υποστηρίζεται από όλους του περιηγητές [back to IE9](http://caniuse.com/#search=svg). Ρίξτε τα .png, .jpg, or .gif-jif-whatev αρχεία σας.
**Σημείωση:** Αν έχετε μόνο SVG εικονίδια για κουμπιά για τους χρήστες με όραση και το SVG αποτύχει να φορτωθεί, αυτό θα βοηθήσει να διατηρηθεί η προσβασιμότητα:
```css
.no-svg .icon-only::after {
content: attr(aria-label);
}
```
<sup>[πίσω στον πίνακα περιεχομένων](#πίνακας-περιεχομένων)</sup>
### Χρήση της "Λοβοτομημένης Κουκουβάγιας" για Διαλέκτη
Μπορεί να έχει περίεργο όνομα αλλά το να χρησιμοποιείς τον καθολικό επιλέκτη (`*`) μαζί με τον παρακείμενο επιλέκτη (`+`) μπορεί να παρέχει μια ισχυρή CSS δυνατότητα:
```css
* + * {
margin-top: 1.5em;
}
```
Σε αυτό το παράδειγμα, όλα τα στοιχεία στην ροή του αρχείου που ακολουθεί άλλα στοιχεία θα παραλάβει `margin-top: 1.5em`.
Για περισσότερα πάνω στον επιλέκτη της "Λοβοτομημένης Κουκουβάγιας", διαβάστε [Heydon Pickering's post](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) πάνω στο *A List Apart*.
#### [Demo](http://codepen.io/AllThingsSmitty/pen/grRvWq)
<sup>[πίσω στον πίνακα περιεχομένων](#πίνακας-περιεχομένων)</sup>
### Χρήση `max-height` για Αγνούς CSS Ολισθητές
Εφαρμογή σε CSS-only διαφάνεις με χρήση `max-height` με την υπερχύλιση κρυμμένη:
```css
.slider {
max-height: 200px;
overflow-y: hidden;
width: 300px;
}
.slider:hover {
max-height: 600px;
overflow-y: scroll;
}
```
Το στοιχείο επεκτείνεται στην `max-height` τιμή σε περίπτωση αιώρησης του δέικτη από πάνω και οι η διαφάνεια προβάλλει σας αποτέλεμα υπερχύλισης.
<sup>[πίσω στον πίνακα περιεχομένων](#πίνακας-περιεχομένων)</sup>
### Ίσου-Πλάτους Κελία Πίνακα
Οι πίνακες μπορεί να είναι δύσκολοι να δουλέψει κανείς. Προσπαθήστε να χρησιμοποιήσετε το `table-layout: fixed` για να διατηρίσετε τα κελία με ίδιο πλάτος:
```css
.calendar {
table-layout: fixed;
}
```
Χωρίς-κόπο διατάξεις πινάκων.
#### [Demo](http://codepen.io/AllThingsSmitty/pen/jALALm)
<sup>[πίσω στον πίνακα περιεχομένων](#πίνακας-περιεχομένων)</sup>
### Απέβαλλε τα Hacks των Περιθωρίων Με Flexbox
Οτάν δουλέυεις με αυλάκια στήλης μπορείς να ξεφορτοθείς το `nth-`, `first-`, και `last-child` hacks με την χρήση της ιδιότητας του flexbox `space-between` :
```css
.list {
display: flex;
justify-content: space-between;
}
.list .person {
flex-basis: 23%;
}
```
Τώρα τα αυλάκια των στηλών φαίνονται ίσα κατανεμημένα.
<sup>[πίσω στον πίνακα περιεχομένων](#πίνακας-περιεχομένων)</sup>
### Χρήση Επιλογής Χαρακτηριστικών με Κένα Links
Εμφανίστε τα links όταν το `<a>` στοιχείο δεν έχει τιμή αλλά το `href` πεδίο εχει ενα link:
```css
a[href^="http"]:empty::before {
content: attr(href);
}
```
Αυτό είναι πολύ βολικό.
#### [Demo](http://codepen.io/AllThingsSmitty/pen/zBzXRx)
<sup>[πίσω στον πίνακα περιεχομένων](#πίνακας-περιεχομένων)</sup>
### Δώσε στυλ στα "Προκαθορισμένα" Links
Προσθέστε στυλ στα "προκαθορισμένα" links:
```css
a[href]:not([class]) {
color: #008000;
text-decoration: underline;
}
```
Τωρα τα link που εισχωρήθηκαν μεσω CMS, που συνήθς δεν έχουν πεδίο `class` , θα διαφοροποιούνται χωρίς να επηρεάζουν την γενική αλληλουχία.
<sup>[πίσω στον πίνακα περιεχομένων](#πίνακας-περιεχομένων)</sup>
### Εσωτερικά Κουτία Αναλογιών
Για να φτιάξετε ενα κουτί με εσωτερική αναλογία, το μόνο που πρέπει να κάνετε είναι να εφαρμόσετε ενα top η bottom γέμισμα σε ένα div:
```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%;
}
```
Το να χρησιμοποιείς το 20% του γεμίσματος κάνει το ύψος του κουτιού ίσο με 20% απο το πλάτος του. Άσχετα με το πλάτος της θέας, το παιδί div θα κρατήσει την κλίμακά του (100% / 20% = 5:1).
#### [Demo](http://codepen.io/AllThingsSmitty/pen/jALZvE)
<sup>[πίσω στον πίνακα περιεχομένων](#πίνακας-περιεχομένων)</sup>
### Εικόνες με Χαλασμένο Στυλ
Κάντε τις χαλασμένες εικόνες πιο αισθητικά όμορφες με λίγο CSS:
```css
img {
display: block;
font-family: sans-serif;
font-weight: 300;
height: auto;
line-height: 2;
position: relative;
text-align: center;
width: 100%;
}
```
Τώρα προσθέστε ψευδόστοιχείων κανόνες για να εμφανίσετε ένα μύνημα χρήστη και μια αναφορά σε URL από την χαλασμένη εικόνα:
```css
img::before {
content: "We're sorry, the image below is broken :(";
display: block;
margin-bottom: 10px;
}
img::after {
content: "(url: " attr(src) ")";
display: block;
font-size: 12px;
}
```
Μάθετε περισσότερα σχετικά με το στυλ για αυτό το μοτίβο στού [Ire Aderinokun](https://github.com/ireade/)'s [αρχικό ποστ](http://bitsofco.de/styling-broken-images/).
<sup>[πίσω στον πίνακα περιεχομένων](#πίνακας-περιεχομένων)</sup>
### Χρήση `rem` για Προσαρμογή Μεγέθους Παντού; Χρήση `em` για Τοπική Προσαρμογή Μεγέθους
Αφού θέσετε το βασικό μέγεθος γραμματοσειράς στο root (`html { font-size: 100%; }`), θέστε το μέγεθος γραμματοσειράς για στοιχεία κειμένου σε `em`:
```css
h2 {
font-size: 2em;
}
p {
font-size: 1em;
}
```
Έπειτα θέστε το μέγεθος γραμματοσειράς για τις ενότητες σε `rem`:
```css
article {
font-size: 1.25rem;
}
aside .module {
font-size: .9rem;
}
```
Τώρα κάθε ενότητα διαχωρίζεται και είναι ευκολότερο να της δώσεις στυλ, πιο συντιρίσιμη, και ευπροσάρμοστη.
<sup>[πίσω στον πίνακα περιεχομένων](#πίνακας-περιεχομένων)</sup>
### Απόκριψη Βίντεο με Αυτόματη Αναπαραγωγή Που Δεν Είναι σε Σίγαση
Αυτό είναι ένα ωραίο κόλπο για έναν στυλ συνιθισμένου χρήστη. Αποφυγή κατακλυσμού χρήστη με ήχους από ενα βίντεο το οποίο παίζει αυτόματα όταν φορτωθεί η σελίδα. Αν ο ήχος δεν είναι σε σίγαση, μήν δείχνεις το βίντεο:
```css
video[autoplay]:not([muted]) {
display: none;
}
```
Για άλλη μία φορά,εκμεταλλευόμαστε την χρήση της [`:not()`](#χρήση-not-για-εφαρμόσεις-βγάλεις-τα-πλαίσια-κατά-την-περιήγηση) ψευδοκλάσης.
<sup>[πίσω στον πίνακα περιεχομένων](#πίνακας-περιεχομένων)</sup>
### Χρήση `:root` για Ευέλικτη Γραφή
Ο τύπος της γραμματοσειράς σε μια αποκρίσιμη διαρρύθμιση θα πρέπει να είναι ικάνος να προσαρμόζεται με κάθε θέαση. Μπορείτε να υπολογίσετε το μέγεθος γραμματοσειράς με βάση το ύψος και το πλάτος της θέασης χρησιμοποιόντας το `:root`:
```css
:root {
font-size: calc(1vw + 1vh + .5vmin);
}
```
Τώρα μπορείτε να χρησιμοποιήσετε την `root em` μονάδα βασισμένη στην τιμή που υπολογίστηκε από το `:root`:
```css
body {
font: 1rem/1.6 sans-serif;
}
```
#### [Demo](http://codepen.io/AllThingsSmitty/pen/XKgOkR)
<sup>[πίσω στον πίνακα περιεχομένων](#πίνακας-περιεχομένων)</sup>
### Ανάθεση `font-size` στα Στοιχεία της Φόρμας για Καλύτερη Εμπειρία από Κινητό
Για να αποτρέψετε τους περιηγητές των κινητών (iOS Safari, _et al_.) απο το να μεγεθύνουν στα στοιχεία της HTML φόρμας όταν ένα `<select>` αναπτυσόμενο μενού επιλεχθέι στην οθόνη, προσθέστο το `font-size` στον κανόνα του επιλέκτη:
```css
input[type="text"],
input[type="number"],
select,
textarea {
font-size: 16px;
}
```
:dancer:
<sup>[πίσω στον πίνακα περιεχομένων](#πίνακας-περιεχομένων)</sup>
### Χρήση Γεγονότων Δείκτη για Έλεγχο Γεγονότων του Ποντικιού
[Γεγονότα ποντικού](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) σου επιτρέπουν να καθορίσεις πώς το ποντίκι αλληλεπιδρά με ένα στοιχείο που ακουμπάει. Για να απενεργοποιήσετε το προκαθορισμένο γεγονός ποντικιου πάνω σε ένα κουμπί, για παράδειγμα:
```css
button:disabled {
opacity: .5;
pointer-events: none;
}
```
Είναι τόσο απλό.
<sup>[πίσω στον πίνακα περιεχομένων](#πίνακας-περιεχομένων)</sup>
### Ανάθεση `display: none` στο Τέλος των Γραμμών που Χρησιμοποιείται σαν Κενό
Καθώς ο [Harry Roberts επισήμανε](https://twitter.com/csswizardry/status/1170835532584235008), αυτό μπορει να βοηθήσει τους CMS χρήστες να αποφύγουν την χρήση παραπάνω νέων γραμμών αντί για κένο :
```css
br + br {
display: none;
}
```
<sup>[πίσω στον πίνακα περιεχομένων](#πίνακας-περιεχομένων)</sup>
## Υποστήριξη
Οι τωρινές εκδόσεις των Chrome, Firefox, Safari, καθώς και Edge.
<sup>[πίσω στον πίνακα περιεχομένων](#πίνακας-περιεχομένων)</sup>
================================================
FILE: translations/gu-IND/README.md
================================================
<p align="center">
<img src="../../assets/img/bulb.svg" width="200" alt="light bulb icon">
</p>
# CSS પ્રોપ્સ [](https://github.com/sindresorhus/awesome)
તમારા CSS કુશળતાને ધ્યાનમાં રાખવામાં સહાય માટે ટિપ્સનો સંગ્રહ.
> અન્ય મહાન યાદીઓ માટે તપાસો [@sindresorhus](https://github.com/sindresorhus/)'s ની યાદી [અદ્ભુત યાદીઓ](https://github.com/sindresorhus/awesome/).
## વિષયસુચીકોષ્ટક
અરજી / અનપ્પેલી કરવા માટે
* [પ્રોપ્સ](#પ્રોપ્સ)
* [આધાર](#આધાર)
* [ફાળો માર્ગદર્શિકા](../../CONTRIBUTING.md)
## પ્રોપ્સ
1. [એક સીએસએસ રીસેટ વાપરો](#વાપરવ-a-css-રીસેટ)
1. [વારસો `box-sizing`](#વારસો-box-sizing)F
1. [બધા ગુણધર્મોને ફરીથી સેટ કરવાને બદલે 'અનસેટ' નો ઉપયોગ કરો](#બધા-ગુણધર્મોને-ફરીથી-સેટ-કરવાને-બદલે-અનસેટ-નો-ઉપયોગ-કરો)
1. [વાપરવ `:not()` અરજી / અનપ્પેલી કરવા માટે નેવિગેશન પર બોર્ડર્સ](#વાપરવ-not-અરજી--અનપ્પેલી-કરવા-માટે-નેવિગેશન-પર-બોર્ડર્સ)
1. [સ્થાનિક રીતે ફોન્ટ ઇન્સ્ટોલ કરેલું છે કે નહીં તે તપાસો](#સ્થાનિક-રીતે-ફોન્ટ-ઇન્સ્ટોલ-કરેલું-છે-કે-નહીં-તે-તપાસો)
1. [ઉમેરો `line-height` તરફ `body`](#ઉમેર-line-height-તરફ-body)
1. [ફોર્મ તત્વો માટે 'ધ્યાન કેન્દ્રિત કરો' સેટ કરો](#ફોર્મ-તત્વો-માટે-ધ્યાન-કેન્દ્રિત-કરો-સેટ-કરો)
1. [વર્ટિકલ-કેન્દ્ર કંઈપણ](#ઊભું-કેન્દ્ર-કંઈપણ)
1. [કોમા-વિભાજિત સૂચિ](#કોમા-વિભાજિત-સૂચિ)
1. [નકારાત્મક મદદથી વસ્તુઓ પસંદ કરો `nth-child`](#નકારાત્મક-મદદથી-વસ્તુઓ-પસંદ-કરો-nth-child)
1. [ચિહ્નો માટે SVG નો ઉપયોગ કરો](#વાપરવુ-માટે-svg-નો-ઉપયોગ-કરો)
1. [આ વાપરો "Lobotomized Owl" પસંદગીકાર](#આ-વાપરો-lobotomized-owl-પસંદગીકાર)
1. [વાપરવ `max-height` શુદ્ધ માટે CSS સ્લાઇડર્સનો](#વાપરવ-max-height-શુદ્ધ-માટે-css-સ્લાઇડર્સનો)
1. [સમાન-પહોળાઈ કોષ્ટક કોષ](#સમાન-પહોળાઈ-કોષ્ટક-કોષ)
1. [છુટકારો મેળવવા માર્જિન હેક્સ સાથે Flexbox](#છુટકારો-મેળવવા-માર્જિન-હેક્સ-સાથે-flexbox)
1. [વાપરવ એટ્રીબ્યુટ પસંદગીકારો સાથે ખાલી કડીઓ](#વાપરવ-એટ્રીબ્યુટ-પસંદગીકારો-સાથે-ખાલી-કડીઓ)
1. [પ્રકાર "Default" કડીઓ](#પ્રકાર-default-કડીઓ)
1. [આંતરિક ગુણોત્તર બૉક્સીસ](#આંતરિક-ગુણોત્તર-બૉક્સીસ)
1. [પ્રકાર તૂટેલી છબીઓ](#પ્રકાર-તૂટેલી-છબીઓ)
1. [વાપરવ `rem` માટે વૈશ્વિક કદ બદલવાનું; વાપરવ `em` માટે સ્થાનિક કદ બદલવાનું](#વાપરવ-rem-માટે-વૈશ્વિક-કદ-બદલવાનું-વાપરવ-em-માટે-સ્થાનિક-કદ-બદલવાનું)
1. [છુપાવો ઑટોપ્લે વિડિઓઝ તે નથ ચૂપ](#છુપાવો-ઑટોપ્લે-વિડિઓઝ-તે-નથ-ચૂપ)
1. [વાપરવ `:root` માટે Flexible Type](#વાપરવ-root-માટે-flexible-type)
1. [સેટ `font-size` on ફોર્મ તત્વો માટે a બેટર મોબાઇલ અનુભવ](#સેટ-font-size-on-ફોર્મ-તત્વો-માટે-a-બેટર-મોબાઇલ-અનુભવ)
1. [માઉસ ઇવેન્ટ્સ નિયંત્રણ કરવા માટે પોઇન્ટર ઇવેન્ટ્સનો ઉપયોગ કરો](#માઉસ-ઇવેન્ટ્સ-નિયંત્રણ-કરવા-માટે-પોઇન્ટર-ઇવેન્ટ્સનો-ઉપયોગ-કરો)
1. [અંતર `display: none` તરીકે વપરાયેલ લાઇન બ્રેક્સ પર સેટ કરો](#અંતર-display-none-તરીકે-વપરાયેલ-લાઇન-બ્રેક્સ-પર-સેટ-કરો)
### વાપરવ a CSS રીસેટ
સીએસએસ રીસેટ્સ સ્ટાઇલ ઘટકો માટે સ્વચ્છ સ્લેટ સાથે વિવિધ બ્રાઉઝર્સમાં સ્ટાઇલ સુસંગતતાને અમલમાં મૂકવા માટે મદદ કરે છે. તમે જેમ કે CSS રીસેટ લાઇબ્રેરીનો ઉપયોગ કરી શકો છો [Normalize](http://necolas.github.io/normalize.css/), _et al._, અથવા તમે વધુ સરળ રીસેટ અભિગમનો ઉપયોગ કરી શકો છો:
```css
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
```
હવે તત્વો માર્જિન અને પેડિંગની છીનવી લેવામાં આવશે, અને `box-sizing` તમે સીએસએસ બોક્સ મોડેલ સાથે લેઆઉટ મેનેજ કરી શકો છો.
#### [પ્રદર્શન](http://codepen.io/AllThingsSmitty/pen/kkrkLL)
**નોટ:** જો તમે અનુસરશો તો [Inherit `box-sizing`](#inherit-box-sizing) નીચે ટીપ તમે નીચેની શામેલ ન કરવાનું પસંદ કરી શકો છો `box-sizing` મિલકત માં તમારા CSS રીસેટ .
<sup>[સામગ્રીઓના કોષ્ટકમાં પાછા](#પ્રોપ્સ)</sup>
### વારસો `box-sizing`
પરવાનગી આપો `box-sizing` માંથી વારસામાં આવશે `html`:
```css
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
```
આનાથી ફેરફાર કરવાનું સરળ બને છે `box-sizing` પ્લગઇન્સ અથવા અન્ય ઘટકોમાં લીવરેજ કે અન્ય વર્તન.
#### [પ્રદર્શન](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)
<sup>[સામગ્રીઓના કોષ્ટકમાં પાછા](#પ્રોપ્સ)</sup>
### બધા ગુણધર્મોને ફરીથી સેટ કરવાને બદલે 'અનસેટ' નો ઉપયોગ કરો
તત્વના ગુણધર્મોને ફરીથી સેટ કરતી વખતે, પ્રત્યેક વ્યક્તિગત સંપત્તિને ફરીથી સેટ કરવું જરૂરી નથી:
```css
button {
background: none;
border: none;
color: inherit;
font: inherit;
outline: none;
padding: 0;
}
```
તમે 'બધા' લઘુલિપિનો ઉપયોગ કરીને એક તત્વની તમામ ગુણધર્મોને સ્પષ્ટ કરી શકો છો. `અનસેટ` માટે મૂલ્યને સેટ કરવાથી એક ઘટકના ગુણધર્મોને તેમની પ્રારંભિક મૂલ્યોમાં બદલાય છે:
```css
button {
all: unset;
}
```
**નોંધ:** આઇ 11 માં `all` અને` અનસેટ` શોર્ટહેન્ડ સપોર્ટેડ નથી.
<sup>[સામગ્રીઓના કોષ્ટકમાં પાછા](#પ્રોપ્સ)</sup>
### વાપરવ `:not()` અરજી / અનપ્પેલી કરવા માટે નેવિગેશન પર બોર્ડર્સ
તેના બદલે નો મૂકવા સરહદ પર...
```css
/* add border */
.nav li {
border-right: 1px solid #666;
}
```
...અને પછી તે છેલ્લા તત્વ બોલ લેવા...
```css
/* remove border */
.nav li:last-child {
border-right: none;
}
```
...વાપરવ `:not()` pseudo-class ફક્ત તમે ઇચ્છો તે તત્વો પર જ લાગુ કરો:
```css
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
```
CSS પસંદગીકાર સીમાને વ્યાખ્યાયિત કરે છે કે જે રીતે મનુષ્ય તેનું વર્ણન કરશે.
#### [પ્રદર્શન](http://codepen.io/AllThingsSmitty/pen/LkymvO)
<sup>[સામગ્રીઓના કોષ્ટકમાં પાછા](#પ્રોપ્સ)</sup>
### સ્થાનિક રીતે ફોન્ટ ઇન્સ્ટોલ કરેલું છે કે નહીં તે તપાસો
તમે તપાસ કરી શકો છો કે ફોન્ટ તેને દૂરસ્થ રીતે લાવવા પહેલાં સ્થાનિક રૂપે ઇન્સ્ટોલ કરેલું છે કે નહીં, તે પણ એક સારા પ્રદર્શનની મદદ છે.
```css
@font-face {
font-family: "Dank Mono";
src:
/* Full name */
local("Dank Mono"),
/* Postscript name */
local("Dank-Mono"),
/* Otherwise, download it! */
url("//...a.server/fonts/DankMono.woff");
}
code {
font-family: "Dank Mono", system-ui-monospace;
}
```
આ પ્રોટીપ અને ડેમો શેર કરવા માટે એડમ આર્ગીલેને ટોપીની [મદદ](https://codepen.io/argyleink/pen/VwYJpgR).
<sup>[સામગ્રીઓના કોષ્ટકમાં પાછા](#પ્રોપ્સ)</sup>
### ઉમેર `line-height` તરફ `body`
તમારે ઉમેરવાની જરૂર નથી `line-height` to દરેક `<p>`, `<h*>`, _et al_. અલગ. તેની જગ્યાએ, તેને ઉમેરવા `body`:
```css
body {
line-height: 1.5;
}
```
આ માર્ગ textual તત્વો શકવું બોલાવે થી `body` સરળતાથી.
#### [પ્રદર્શન](http://codepen.io/AllThingsSmitty/pen/VjbdYd)
<sup>[સામગ્રીઓના કોષ્ટકમાં પાછા](#પ્રોપ્સ)</sup>
### ફોર્મ તત્વો માટે 'ધ્યાન કેન્દ્રિત કરો' સેટ કરો
દૃશ્યમાન કીબોર્ડ વપરાશકર્તાઓ પૃષ્ઠમાં કીબોર્ડ ઇવેન્ટ્સ ક્યાં જાય છે તે નિર્ધારિત કરવા પર ધ્યાન કેન્દ્રિત કરે છે. ફોર્મ ઘટકો માટે ધ્યાન કેન્દ્રિત કરો અને બ્રાઉઝરનું ડિફૉલ્ટ અમલીકરણ પછી સુસંગત રહો:
```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>[સામગ્રીઓના કોષ્ટકમાં પાછા](#પ્રોપ્સ)</sup>
### ઊભું કેન્દ્ર કંઈપણ
ના, તે કાળા જાદુ નથી, તમે ખરેખર ઊભી તત્વોને કેન્દ્રિત કરી શકો છો:
```css
html,
body {
height: 100%;
margin: 0;
}
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
``
...અને CSS ગ્રીડ સાથે પણ:
```css
body {
display: grid;
height: 100vh;
margin: 0;
place-items: center center;
}
````
કેન્દ્ર માંગો છો કંઈક બીજું? વર્ટિકલ, આડા...કંઈપણ, કોઈપણ સમયે, ગમે ત્યાં? CSS-Tricks has [a nice write-up](https://css-tricks.com/centering-css-complete-guide/) on કરવાનું બધા કે.
#### [પ્રદર્શન](http://codepen.io/AllThingsSmitty/pen/GqmGqZ)
<sup>[સામગ્રીઓના કોષ્ટકમાં પાછા](#પ્રોપ્સ)</sup>
### કોમા-વિભાજિત સૂચિ
સૂચિ આઇટમ્સ વાસ્તવિક, અલ્પવિરામથી વિભાજીત સૂચિની જેમ દેખાય છે તે બનાવો:
```css
ul > li:not(:last-child)::after {
content: ",";
}
```
વાપરવ આ `:not()` pseudo-class તેથી છેલ્લી વસ્તુમાં કોઈ અલ્પવિરામ ઉમેરવામાં આવી નથી.
**નોટ:** આ ટિપ સુલભતા માટે આદર્શ નથી, ખાસ કરીને સ્ક્રીન વાચકો. અને બ્રાઉઝરમાંથી કૉપિ / પેસ્ટ CSS- જનરેટેડ સામગ્રી સાથે કામ કરતું નથી. સાવધાની સાથે આગળ વધો.
<sup>[સામગ્રીઓના કોષ્ટકમાં પાછા](#પ્રોપ્સ)</sup>
### નકારાત્મક મદદથી વસ્તુઓ પસંદ કરો `nth-child`
વાપરવ નકારાત્મક `nth-child` વસ્તુઓ પસંદ કરવા માટે CSS માં 1 દ્વારા n.
```css
li {
display: none;
}
/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
display: block;
}
```
અથવા, કારણ કે તમે પહેલેથી જ વિશે થોડું શીખ્યા છે [using `:not()`](#use-not-to-applyunapply-borders-on-navigation), પ્રયત્ન કરો:
```css
/* select all items except the first 3 and display them */
li:not(:nth-child(-n+3)) {
display: none;
}
```
વેલ તે ખૂબ સરળ હતું.
#### [પ્રદર્શન](http://codepen.io/AllThingsSmitty/pen/WxjKZp)
<sup>[સામગ્રીઓના કોષ્ટકમાં પાછા](#પ્રોપ્સ)</sup>
### વાપરવુ માટે SVG નો ઉપયોગ કરો
ચિહ્નો માટે એસવીજીનો ઉપયોગ ન કરવા માટે કોઈ કારણ નથી
```css
.logo {
background: url("logo.svg");
}
```
The SVG scale is good for all resolution types and it is supported in all browsers [back to IE9](http://caniuse.com/#search=svg). તેથી છુટકારો મેળવવા .png, .jpg, or .gif-jif-whatev ફાઈલો.
**નોટ:** જો તમારી પાસે SVG આઇકોન-માત્ર બટનો છે અને જોવામાં આવેલાં વપરાશકર્તાઓ માટે SVG લોડ કરવામાં નિષ્ફળ જાય, તો તે એક્સેસીબિલીટી જાળવી રાખવામાં મદદ કરશે.:
```css
.no-svg .icon-only::after {
content: attr(aria-label);
}
```
<sup>[સામગ્રીઓના કોષ્ટકમાં પાછ](#કોષ્ટક-સામગ્રીઓ)</sup>
### આ વાપરો "Lobotomized Owl" પસંદગીકાર
તેમાં વિચિત્ર નામ હોઈ શકે છે પરંતુ સાર્વત્રિક પસંદગીકારનો ઉપયોગ કરી શકો છો (`*`) અડીન બહેન સિલેક્ટર સાથે (`+`) શક્તિશાળી CSS ક્ષમતા પ્રદાન કરી શકે છે:
```css
* + * {
margin-top: 1.5em;
}
```
આ ઉદાહરણમાં, અન્ય ઘટકોને અનુસરતા દસ્તાવેજના પ્રવાહમાંના બધા તત્વો પ્રાપ્ત થશે `margin-top: 1.5em`.
વધુ માટે "lobotomized owl" પસંદગીકાર, વાંચવું [Heydon Pickering's post](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) on *A List Apart*.
#### [પ્રદર્શન](http://codepen.io/AllThingsSmitty/pen/grRvWq)
<sup>[સામગ્રીઓના કોષ્ટકમાં પાછા](#પ્રોપ્સ)</sup>
### વાપરવ `max-height` શુદ્ધ માટે CSS સ્લાઇડર્સન
ફક્ત ઉપયોગ કરીને CSS- ફક્ત સ્લાઇડર્સનો અમલ કરો `max-height` ઓવરફ્લો છુપાયેલ સાથે:
```css
.slider {
max-height: 200px;
overflow-y: hidden;
width: 300px;
}
.slider:hover {
max-height: 600px;
overflow-y: scroll;
}
```
આ તત્વ વિસ્તરે છે `max-height` Value on hover and slider display as a result of overflow.
<sup>[સામગ્રીઓના કોષ્ટકમાં પાછા](#પ્રોપ્સ)</sup>
### સમાન-પહોળાઈ કોષ્ટક કોષ
કોષ્ટકો સાથે કામ કરવા માટે પીડા હોઈ શકે છે જેથી આનો ઉપયોગ કરીને પ્રયાસ કરો `table-layout: fixed` કોષો સમાન પહોળાઈ પર રાખો:
```css
.calendar {
table-layout: fixed;
}
```
પેઇન-મુક્ત કોષ્ટક લેઆઉટ.
#### [પ્રદર્શન](http://codepen.io/AllThingsSmitty/pen/jALALm)
<sup>[સામગ્રીઓના કોષ્ટકમાં પાછા](#પ્રોપ્સ)</sup>
### છુટકારો મેળવવા માર્જિન હેક્સ સાથે Flexbox
સ્તંભ ગટર સાથે કામ કરતી વખતે તમે છુટકારો મેળવી શકો છો `nth-`, `first-`, અને `last-child` હેક્સ દ્વારા ઉપયોગ કરીને flexbox's `space-between` મિલકત:
```css
.list {
display: flex;
justify-content: space-between;
}
.list .person {
flex-basis: 23%;
}
```
હવે સ્તંભ ગટર હંમેશા સરખે ભાગે-અંતરે દેખાય છે.
<sup>[સામગ્રીઓના કોષ્ટકમાં પાછા](#પ્રોપ્સ)</sup>
### વાપરવ એટ્રીબ્યુટ પસંદગીકારો સાથે ખાલી કડીઓ
લિંક્સ દર્શાવો જ્યારે `<a>` તત્વ કોઈ લખાણ કિંમત નથી પરંતુ `href` લક્ષણ એક લિંક છે:
```css
a[href^="http"]:empty::before {
content: attr(href);
}
```
તે ખૂબ અનુકૂળ છે
#### [પ્રદર્શન](http://codepen.io/AllThingsSmitty/pen/zBzXRx)
<sup>[સામગ્રીઓના કોષ્ટકમાં પાછા](#પ્રોપ્સ)</sup>
### પ્રકાર "Default" કડીઓ
માટે એક શૈલી ઉમેરો "default" લિંક્સ:
```css
a[href]:not([class]) {
color: #008000;
text-decoration: underline;
}
```
હવે લિંક્સ કે જે CMS દ્વારા દાખલ કરવામાં આવે છે, જે સામાન્ય રીતે એક નથી `class` એટ્રિબ્યુટ, સામાન્ય રીતે કાસ્કેડને અસર કરતા વગર ભેદ રાખશે.
<sup>[સામગ્રીઓના કોષ્ટકમાં પાછા](#પ્રોપ્સ)</sup>
### આંતરિક ગુણોત્તર બૉક્સીસ
સ્વભાવિક રેશિયો સાથે બૉક્સ બનાવવા માટે, તમારે ફક્ત ટોચ અથવા તળિયે ગાદીને DIV પર લાગુ કરવાની જરૂર છે:
```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%;
}
```
પેડિંગ માટે 20% નો ઉપયોગ કરીને તેના પહોળાઈના 20% જેટલા બૉક્સની ઊંચાઇને બનાવે છે. કોઈ વ્યૂપોર્ટની પહોળાઇ, બાળક ડિવ તેના પાસા રેશિયો રાખશે (100% / 20% = 5:1).
#### [પ્રદર્શન](http://codepen.io/AllThingsSmitty/pen/jALZvE)
<sup>[સામગ્રીઓના કોષ્ટકમાં પાછા](#પ્રોપ્સ)</sup>
### પ્રકાર તૂટેલી છબીઓ
તૂટેલી તસવીરો CSS ના થોડુંક સાથે વધુ સૌંદર્યલક્ષી-આનંદી બનાવો:
```css
img {
display: block;
font-family: sans-serif;
font-weight: 300;
height: auto;
line-height: 2;
position: relative;
text-align: center;
width: 100%;
}
```
હવે ઉમેરો pseudo-elements તૂટેલી છબીના વપરાશકર્તા સંદેશ અને URL સંદર્ભને પ્રદર્શિત કરવાના નિયમો:
```css
img::before {
content: "We're sorry, the image below is broken :(";
display: block;
margin-bottom: 10px;
}
img::after {
content: "(url: " attr(src) ")";
display: block;
font-size: 12px;
}
```
આ પેટર્ન માટે સ્ટાઇલ વિશે વધુ જાણો [Ire Aderinokun](https://github.com/ireade/)'s [original post](http://bitsofco.de/styling-broken-images/).
<sup>[સામગ્રીઓના કોષ્ટકમાં પાછા](#પ્રોપ્સ)</sup>
### વાપરવ `rem` માટે વૈશ્વિક કદ બદલવાનું; વાપરવ `em` માટે સ્થાનિક કદ બદલવાનું
રુટ પર મૂળ ફોન્ટ માપ સુયોજિત કર્યા પછી (`html { font-size: 100%; }`), શાબ્દિક તત્વો માટે ફૉન્ટનું કદ સેટ કરો `em`:
```css
h2 {
font-size: 2em;
}
p {
font-size: 1em;
}
```
પછી મોડ્યુલો માટે ફૉન્ટ-કદ સેટ કરો to `rem`:
```css
article {
font-size: 1.25rem;
}
aside .module {
font-size: .9rem;
}
```
હવે દરેક મોડ્યુલ શ્રેણીબદ્ધ અને સરળ, વધુ નિભાવવા યોગ્ય અને લવચીક બની જાય છે.
<sup>[સામગ્રીઓના કોષ્ટકમાં પાછા](#પ્રોપ્સ)</sup>
### છુપાવો ઑટોપ્લે વિડિઓઝ તે નથ ચૂપ
આ વૈવિધ્યપૂર્ણ વપરાશકર્તા સ્ટાઇલશીટ માટે એક મહાન યુક્તિ છે. એક વપરાશકર્તા દ્વારા અવાજ સાથે ઓવરલોડિંગ કરવાનું ટાળો, જે જ્યારે પૃષ્ઠ લોડ થાય ત્યારે ઑટોપ્લે કરે છે. જો અવાજ મૌન નથી, તો વિડિઓ બતાવશો નહીં:
```css
video[autoplay]:not([muted]) {
display: none;
}
```
ફરી એક વાર, અમે આનો ઉપયોગ કરીને લાભ લઈ રહ્યાં છીએ [`:not()`](#use-not-to-applyunapply-borders-on-navigation) pseudo-class.
<sup>[સામગ્રીઓના કોષ્ટકમાં પાછા](#પ્રોપ્સ)</sup>
### વાપરવ `:root` માટે Flexible Type
એક પ્રતિસાદિત લેઆઉટમાં ટાઇપ ફૉન્ટનું કદ દરેક વ્યૂપોર્ટ સાથે વ્યવસ્થિત થવું જોઈએ. તમે ઉપયોગ કરીને વ્યૂપોર્ટની ઊંચાઈ અને પહોળાઈના આધારે ફોન્ટ કદની ગણતરી કરી શકો છો `:root`:
```css
:root {
font-size: calc(1vw + 1vh + .5vmin);
}
```
હવે તમે આ ઉપયોગ શ `root em` દ્વારા ગણવામાં આવેલ કિંમત પર આધારિત એકમ `:root`:
```css
body {
font: 1rem/1.6 sans-serif;
}
```
#### [પ્રદર્શન](http://codepen.io/AllThingsSmitty/pen/XKgOkR)
<sup>[સામગ્રીઓના કોષ્ટકમાં પાછા](#પ્રોપ્સ)</sup>
### સેટ `font-size` on ફોર્મ તત્વો માટે a બેટર મોબાઇલ અનુભવ
મોબાઇલ બ્રાઉઝર્સને ટાળવા માટે (iOS Safari, _et al_.) થી ઝુમિંગ HTML ફોર્મ એલિમેન્ટ્સ પર જ્યારે એક `<select>` ડ્રોપ ડાઉન ટેપ થયેલ છે, ઉમેરો `font-size` to the selector rule:
```css
input[type="text"],
input[type="number"],
select,
textarea {
font-size: 16px;
}
```
:dancer:
<sup>[સામગ્રીઓના કોષ્ટકમાં પાછા](#પ્રોપ્સ)</sup>
### માઉસ ઇવેન્ટ્સ નિયંત્રણ કરવા માટે પોઇન્ટર ઇવેન્ટ્સનો ઉપયોગ કરો
[પોઇન્ટર ઇવેન્ટ્સ](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) તમને સ્પષ્ટ કરવા માટે પરવાનગી આપે છે કે માઉસ કેવી રીતે તૃપ્તિ સાથે સંપર્ક કરે છે. બટનો પર ડિફૉલ્ટ પોઇન્ટર ઇવેન્ટને અક્ષમ કરવા માટે, ઉદાહરણ તરીકે:
```css
button:disabled {
opacity: .5;
pointer-events: none;
}
```
તે સરળ છે.
<sup>[સામગ્રીઓના કોષ્ટકમાં પાછા](#પ્રોપ્સ)</sup>
### અંતર `display: none` તરીકે વપરાયેલ લાઇન બ્રેક્સ પર સેટ કરો
[હેરી રોબર્ટ્સે નિર્દેશ કર્યો](https://twitter.com/csswizardry/status/1170835532584235008), આ સીએમએસ વપરાશકર્તાઓને અંતર માટે વધારાના લાઇન બ્રેકનો ઉપયોગ કરવાથી અટકાવી શકે છે:
```css
br + br {
display: none;
}
```
<sup>[સામગ્રીઓના કોષ્ટકમાં પાછા](#પ્રોપ્સ)</sup>
## આધાર
વર્તમાન આવૃત્તિઓ of Chrome, Firefox, Safari, અને Edge.
<sup>[સામગ્રીઓના કોષ્ટકમાં પાછા](#પ્રોપ્સ)</sup>
================================================
FILE: translations/it-IT/README.md
================================================
<p align="center">
<img src="../../assets/img/bulb.svg" alt="light bulb icon">
</p>
# CSS suggerimenti per esperti [](https://github.com/sindresorhus/awesome)
Una collezione di dritte per aiutarti a migliorare le tue capacità con CSS.
> Per altre fantastiche liste di questo tipo guarda la [lista di fantastiche liste](https://github.com/sindresorhus/awesome/) curata da [@sindresorhus](https://github.com/sindresorhus/).
## Sommario
* [Suggerimenti per esperti](#suggerimenti-per-esperti)
* [Supporto](#supporto)
* [Linee guida per contribuire](../../CONTRIBUTING.md)
## Suggerimenti per esperti
1. [Utilizzare un reset CSS](#utilizzare-un-reset-css)
1. [Eredita il `box-sizing`](#eredita-il-box-sizing)
1. [Usa `unset` invece di Reimposta tutte le proprietà](#usa-unset-invece-di-reimposta-tutte-le-proprietà)
1. [Usa `:not()` per applicare/rimuovere-i-bordi-su-elementi-di-navigazione](#usa-not-per-applicarerimuovere-i-bordi-su-elementi-di-navigazione)
1. [Controlla se il font è installato localmente](#controlla-se-il-font-è-installato-localmente)
1. [Aggiungi `line-height` al `body`](#aggiungi-line-height-al-body)
1. [Imposta `:focus` per gli elementi del modulo](#imposta-focus-per-gli-elementi-del-modulo)
1. [Centra verticalmente qualsiasi cosa](#centra-verticalmente-qualsiasi-cosa)
1. [Liste separate da virgola](#liste-separate-da-virgola)
1. [Seleziona un elemento usando gli `nth-child` negativi](#seleziona-un-elemento-usando-gli-nth-child-negativi)
1. [Usa SVG per le icone](#usa-svg-per-le-icone)
1. [Usa il selettore detto "Lobotomized Owl"](#usa-il-selettore-detto-"lobotomized-owl")
1. [Usa `max-height` per slider fatti solo con CSS](#usa-max-height-per-slider-fatti-solo-con-css)
1. [Celle di tabella con larghezza uguale](#celle-di-tabella-con-larghezza-uguale)
1. [Sbarazzati degli hack sui margini grazie a Flexbox](#sbarazzati-degli-hack-sui-margini-grazie-a-flexbox)
1. [Usa il selettore d'attributo con i link senza testo](#usa-il-selettore-d'attributo-con-i-link-senza-testo)
1. [Styling dei link di "Default"](#styling-dei-link-di-"default")
1. [Box con proporzioni intrinseche](#box-con-proporzioni-intrinseche)
1. [Styling delle immagini non scaricate](#styling-delle-immagini-non-scaricate)
1. [Usa `rem` per le grandezze globali; usa `em` per le dimensioni locali](#usa-rem-per-le-grandezze-globali;-usa-em-per-le-dimensioni-locali)
1. [Nascondi i video in riproduzione automatica che non sono silenziati](#nascondi-i-video-in-riproduzione-automatica-che-non-sono-silenziati)
1. [Usa `:root` per caratteri flessibili](#usa-:root-per-caratteri-flessibili)
1. [Imposta il `font-size` sugli elementi dei form per una migliore esperienza da mobile](#imposta-il-font-size-sugli-elementi-dei-form-per-una-migliore-esperienza-da-mobile)
1. [Utilizzare gli eventi puntatore per controllare gli eventi del mouse](#utilizzare-gli-eventi-puntatore-per-controllare-gli-eventi-del-mouse)
1. [Imposta `display: none` su Line Breaks usati come Spaziatura](#imposta-display:-none-su-line-breaks-usati-come-spaziatura)
### Utilizzare un reset CSS
reset CSS aiutare a far rispettare lo stile coerenza tra diversi browser da zero per gli elementi stilistici. È possibile utilizzare libreria di reset CSS come [Normalize](http://necolas.github.io/normalize.css/), et al, oppure è possibile utilizzare un approccio più semplificato di ripristino.:
```css
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
```
Ora elementi saranno spogliati di margini e padding, e `box-sizing` consente di gestire i layout con il box model CSS.
#### [Dimostrazione](http://codepen.io/AllThingsSmitty/pen/kkrkLL)
**Nota:** Se si segue la punta [Eredita il `box-sizing`](#inherit-box-sizing) in basso si potrebbe optare di non includere la proprietà box-sizing nel ripristino CSS.
<sup>[torna al sommario](#sommario)</sup>
### Eredita il `box-sizing`
Eredita il `box-sizing` dall'elemento `html`:
```css
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
```
In questo modo diventa più facile cambiare `box-sizing` in plugin o altri componenti che ne sfruttano un altro.
#### [Dimostrazione](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)
<sup>[torna al sommario](#sommario)</sup>
### Usa `unset` invece di Reimposta tutte le proprietà
Quando si ripristinano le proprietà di un elemento, non è necessario reimpostare ogni singola proprietà:
```css
button {
background: none;
border: none;
color: inherit;
font: inherit;
outline: none;
padding: 0;
}
```
Puoi specificare tutte le proprietà di un elemento usando la stenografia `all`. L'impostazione del valore su `unset` modifica le proprietà di un elemento ai valori iniziali:
```css
button {
all: unset;
}
```
<sup>[torna al sommario](#sommario)</sup>
### Usa `:not()` per applicare/rimuovere i bordi su elementi di navigazione
Invece di impostare il bordo...
```css
/* aggiunge il bordo */
.nav li {
border-right: 1px solid #666;
}
```
...e poi rimuoverlo dall'ultimo elemento...
```css
/* rimuove il bordo */
.nav li:last-child {
border-right: none;
}
```
...usa la pseudo classe `:not()` per applicarlo solo agli elementi che vuoi:
```css
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
```
Il selettore CSS definisce il confine nel modo in cui un essere umano lo descrive.
#### [Dimostrazione](http://codepen.io/AllThingsSmitty/pen/LkymvO)
<sup>[torna al sommario](#sommario)</sup>
### Controlla se il font è installato localmente
Puoi verificare se un font è installato localmente prima di recuperarlo da remoto, il che è anche un buon suggerimento per le prestazioni.
```css
@font-face {
font-family: "Dank Mono";
src:
/* Full name */
local("Dank Mono"),
/* Postscript name */
local("Dank-Mono"),
/* Otherwise, download it! */
url("//...a.server/fonts/DankMono.woff");
}
code {
font-family: "Dank Mono", system-ui-monospace;
}
```
Punta del cappello ad Adam Argyle per aver condiviso questo prototipo e questa [dimostrazione](https://codepen.io/argyleink/pen/VwYJpgR).
<sup>[torna al sommario](#sommario)</sup>
### Aggiungi `line-height` al `body`
Non è necessario aggiungere `line-height` a ogni `<p> `,`<h *>`, _et al_. separatamente. Invece, aggiungilo a `body`:
```css
body {
line-height: 1.5;
}
```
In questo modo gli elementi di testo possono ereditare facilmente da `body`.
#### [Dimostrazione](http://codepen.io/AllThingsSmitty/pen/VjbdYd)
<sup>[torna al sommario](#sommario)</sup>
### Imposta `:focus` per gli elementi del modulo
Gli utenti con tastiera a vista si affidano alla messa a fuoco per determinare dove vanno gli eventi della tastiera nella pagina. Fai attenzione agli elementi del modulo che si distinguono e coerenti rispetto all'implementazione predefinita del browser:
```css
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
box-shadow: none;
outline: #000 dotted 2px;
outline-offset: .05em;
}
```
#### [Dimostrazione](https://codepen.io/AllThingsSmitty/pen/ePzoOP/)
<sup>[torna al sommario](#sommario)</sup>
### Centra verticalmente qualsiasi cosa
No, non è magia nera. Puoi veramente centrare gli elementi verticalmente:
```css
html,
body {
height: 100%;
margin: 0;
}
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
```
...e anche con CSS Grid:
```css
body {
display: grid;
height: 100vh;
margin: 0;
place-items: center center;
}
```
Vuoi centrare qualcos'altro? In verticale, in orizzontale... qualsiasi cosa, in qualsiasi momento ovunque? Su CSS-Tricks trovi [un ottimo articolo](https://css-tricks.com/centering-css-complete-guide/) a riguardo.
#### [Dimostrazione](http://codepen.io/AllThingsSmitty/pen/GqmGqZ)
<sup>[torna al sommario](#sommario)</sup>
### Liste separate da virgola
Visualizza gli elementi di una lista come fossero una vera lista con le virgole:
```css
ul > li:not(:last-child)::after {
content: ",";
}
```
Usa la pseudo classe `:not()` in modo da non aggiungere la virgola all'ultimo elemento.
**Nota bene:** può non essere l'ideale per garantire l'accessibilità, nello specifico per gli screen reader. Inoltre il copia/incolla dal browser non funziona con il contenuto generato mediante CSS. Procedi con attenzione.
<sup>[torna al sommario](#sommario)</sup>
### Seleziona un elemento usando gli `nth-child` negativi
Usa gli `nth-child` negativi di CSS per selezionare gli elementi da 1 a n.
```css
li {
display: none;
}
/* seleziona gli elementi da 1 a 3 e li mostra */
li:nth-child(-n+3) {
display: block;
}
```
Oppure, dato che hai già imparato un po' di cose circa l'[uso di `:not()`](#use-not-to-applyunapply-borders-on-navigation), prova:
```css
/* selezionare tutti gli elementi tranne i primi 3 e visualizzarli */
li:not(:nth-child(-n+3)) {
display: none;
}
```
Beh... era abbastanza facile.
#### [Dimostrazione](http://codepen.io/AllThingsSmitty/pen/WxjKZp)
<sup>[torna al sommario](#sommario)</sup>
### Usa SVG per le icone
Non c'è ragione per non usare SVG per le icone:
```css
.logo {
background: url("logo.svg");
}
```
SVG scala molto bene a tutti i tipi di risoluzione ed è supportata in tutti i browser [fino a IE9](http://caniuse.com/#search=svg). Perciò butta i tuoi file .png, .jpg o .gif-jif-qualsiasicosa.
**Nota bene:** se usi bottoni con esclusivamente grafica SVG e le icone SVG non vengono caricate, questo ti aiuterà a preservare l'accessibilità:
```css
.no-svg .icon-only::after {
content: attr(aria-label);
}
```
<sup>[torna al sommario](#sommario)</sup>
### Usa il selettore detto "Lobotomized Owl"
Sebbene il suo nome sia un po' strano, l'uso del selettore universale (`*`) insieme al selettore del fratello adiacente (`+`) può fornire una potenzialità CSS molto potente:
```css
* + * {
margin-top: 1.5em;
}
```
In questo esempio, tutti gli elementi nel flusso del documento che seguono altri elementi riceveranno la proprietà `margin-top: 1.5em`.
Per saperne di più sul selettore detto "lobotomized owl", leggi [l'articolo di Heydon Pickering](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) su *A List Apart*.
#### [Dimostrazione](http://codepen.io/AllThingsSmitty/pen/grRvWq)
<sup>[torna al sommario](#sommario)</sup>
### Usa `max-height` per slider fatti solo con CSS
Realizza slider fatti solo con CSS usando `max-height` con overflow hidden:
```css
.slider {
max-height: 200px;
overflow-y: hidden;
width: 300px;
}
.slider:hover {
max-height: 600px;
overflow-y: scroll;
}
```
L'elemento si espande al valore `max-height` all'hover e lo slider diventa visibile come risultato dell'overflow.
<sup>[torna al sommario](#sommario)</sup>
### Celle di tabella con larghezza uguale
Lavorare con le tabelle può dare il tormento, perciò prova a usare `table-layout: fixed` per avere celle di larghezza uguale:
```css
.calendar {
table-layout: fixed;
}
```
Layout con le tabelle e senza tormento.
#### [Dimostrazione](http://codepen.io/AllThingsSmitty/pen/jALALm)
<sup>[torna al sommario](#sommario)</sup>
### Sbarazzati degli hack sui margini grazie a Flexbox
Quando lavori con gli spazi tra colonne puoi sbarazzarti di `nth-`, `first-` e `last-child` usando la proprietà `space-between` di flexbox:
```css
.list {
display: flex;
justify-content: space-between;
}
.list .person {
flex-basis: 23%;
}
```
Ora le colonne avranno sempre una spaziatura uniforme.
<sup>[torna al sommario](#sommario)</sup>
### Usa il selettore d'attributo con i link senza testo
Quando l'elemento `<a>` non ha testo al suo interno ma l'attributo `href` ha un link, lo mostra:
```css
a[href^="http"]:empty::before {
content: attr(href);
}
```
Decisamente comodo.
#### [Dimostrazione](http://codepen.io/AllThingsSmitty/pen/zBzXRx)
<sup>[torna al sommario](#sommario)</sup>
### Styling dei link di "Default"
Aggiunge uno stile per i link "default":
```css
a[href]:not([class]) {
color: #008000;
text-decoration: underline;
}
```
Ora i link inseriti mediante un CMS, che solitamente non hanno un attributo `class`, saranno distinti senza intaccare tutti gli altri in cascata.
<sup>[torna al sommario](#sommario)</sup>
### Box con proporzioni intrinseche
Per creare un contenitore con proporzioni intrinseche tutto ciò che devi fare è applicare a un div del `padding` superiore o inferiore:
```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%;
}
```
Uare un `padding` del 20% rende l'altezza del contenitore pari al 20% della sua larghezza. Non importa quale sia la larghezza della finestra, il div figlio manterrà le proporzioni stabilite (100% / 20% = 5:1).
#### [Dimostrazione](http://codepen.io/AllThingsSmitty/pen/jALZvE)
<sup>[torna al sommario](#sommario)</sup>
### Styling delle immagini non scaricate
Rendi le immagini non scaricate più piacevoli esteticamente con un po' di CSS:
```css
img {
display: block;
font-family: sans-serif;
font-weight: 300;
height: auto;
line-height: 2;
position: relative;
text-align: center;
width: 100%;
}
```
Ora aggiungi le regole per gli pseudo elementi al fine di mostrare un messaggio e un riferimento URL dell'immagine non scaricata:
```css
img::before {
content: "Siamo spiacenti, l'immagine non è stata scaricata. :(";
display: block;
margin-bottom: 10px;
}
img::after {
content: "(url: " attr(src) ")";
display: block;
font-size: 12px;
}
```
Ulteriori informazioni sullo styling secondo questo pattern nell'[articolo](http://bitsofco.de/styling-broken-images/) di [Ire Aderinokun](https://github.com/ireade/).
<sup>[torna al sommario](#sommario)</sup>
### Usa `rem` per le grandezze globali; usa `em` per le dimensioni locali
Dopo avere impostato la dimensione di base del font sull'elemento root (`html { font-size: 100%; }`), imposta la dimensione del font per gli elementi testuali con `em`:
```css
h2 {
font-size: 2em;
}
p {
font-size: 1em;
}
```
Poi imposta il font-size per i moduli con `rem`:
```css
article {
font-size: 1.25rem;
}
aside .module {
font-size: .9rem;
}
```
A questo punto ogni modulo diventa compartimentalizzato, più facile da modellare, più manutenibile e più flessibile.
<sup>[torna al sommario](#sommario)</sup>
### Nascondi i video in riproduzione automatica che non sono silenziati
Questo è un fantastico trucchetto per un foglio di stile personalizzato per un utente. Evita di sovraccaricare un utente col suono di un video che parte in riproduzione automatica quando la pagina viene caricata. Se il suono non è disabilitato non mostrare il video:
```css
video[autoplay]:not([muted]) {
display: none;
}
```
Ancora una volta stiamo sfruttando la pseudo classe [`:not()`](#use-not-to-applyunapply-borders-on-navigation).
<sup>[torna al sommario](#sommario)</sup>
### Usa `:root` per caratteri flessibili
In un layout responsive la grandezza del carattere dovrebbe essere in grado di adattarsi a ogni risoluzione. Puoi calcolare la dimensione del font basandoti sull'altezza e sulla larghezza della finestra usando `:root`:
```css
:root {
font-size: calc(1vw + 1vh + .5vmin);
}
```
Adesso puoi usare l'unità basata su `root em` sul valore calcolato da `:root`:
```css
body {
font: 1rem/1.6 sans-serif;
}
```
#### [Dimostrazione](http://codepen.io/AllThingsSmitty/pen/XKgOkR)
<sup>[torna al sommario](#sommario)</sup>
### Imposta il `font-size` sugli elementi dei form per una migliore esperienza da mobile
Per evitare lo zoom sugli elementi dei form dai browser mobile (iOS Safari, _et al_.) quando si tocca una `<select>`, aggiungi `font-size` alle regole del selettore:
```css
input[type="text"],
input[type="number"],
select,
textarea {
font-size: 16px;
}
```
:dancer:
<sup>[torna al sommario](#sommario)</sup>
### Utilizzare gli eventi puntatore per controllare gli eventi del mouse
[Eventi puntatore](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) consentono di specificare come il mouse interagisce con l'elemento che sta toccando. Per disabilitare l'evento puntatore predefinito su un pulsante, ad esempio:
```css
button:disabled {
opacity: .5;
pointer-events: none;
}
```
È così semplice.
<sup>[torna al sommario](#sommario)</sup>
### Imposta `display: none` su Line Breaks usati come Spaziatura
Come [Harry Roberts ha sottolineato](https://twitter.com/csswizardry/status/1170835532584235008), questo può aiutare a impedire agli utenti CMS di utilizzare interruzioni di riga aggiuntive per la spaziatura:
```css
br + br {
display: none;
}
```
<sup>[torna al sommario](#sommario)</sup>
## Supporto
Le attuali versioni di Chrome, Firefox, Safari, ed Edge.
================================================
FILE: translations/ja-JP/README.md
================================================
<p align="center">
<img src="../../assets/img/bulb.svg" alt="light bulb icon">
</p>
# CSSの便利な小技・テクニックのまとめ [](https://github.com/sindresorhus/awesome)
CSSのプロのスキルになるようにアドバイスのリストを紹介します。
> 他のリストのため： [Awesome リスト](https://github.com/sindresorhus/awesome/) の [@sindresorhus](https://github.com/sindresorhus/) をチェックSしてください。.
<div id="table-of-contents"></div>
## 目次
* [プロチップス](#protips)
* [サポート](#soutien)
* [参考](#references)
* [コントリビュート](../../CONTRIBUTING.md)
<div id="protips"></div>
## プロチップス
1. [CSSのリセットを使用します](#use-a-css-reset)
1. [box-sizingをコンポーネントごとに変更](#inherit-box-sizing)
1. [すべてのプロパティをリセットする代わりに `unset`を使う](#use-unset-instead-of-resetting-all-properties)
1. [`:not()` を使用 / ボーダーを削除](#use-not-to-applyunapply-borders-on-navigation)
1. [フォントがローカルにインストールされているかどうかを確認します](#check-if-font-is-installed-locally)
1. [`body`に`line-height`を加える](#add-line-height-to-body)
1. [フォーム要素に `：focus`を設定する](#set-focus-for-form-elements)
1. [天地の中央に配置](#vertically-center-anything)
1. [リストをカンマ区切りにする](#comma-separated-lists)
1. [ネガティブな「:nth-child」を使用してアイテムを選択](#select-items-using-negative-nth-child)
1. [SVGのアイコン](#use-svg-for-icons)
1. [Owlを使用](#use-the-lobotomized-owl-selector)
1. [CSSで実装されたスライダーにはmax-heightを使う](#use-max-height-for-pure-css-sliders)
1. [テーブルのセルの幅を均等にする](#equal-width-table-cells)
1. [Flexboxのマージンハックを取り除く](#get-rid-of-margin-hacks-with-flexbox)
1. [リンクにテキストが無い時はURLを表示](#use-attribute-selectors-with-empty-links)
1. [デフォルトのリンクをスタイル](#style-default-links)
1. [内在比率のボックス](#intrinsic-ratio-boxes)
1. [リンク切れの画像要素をスタイル](#style-broken-images)
1. [グローバルのサイズ指定に「rem」、ローカルに「em」を使用](#use-rem-for-global-sizing-use-em-for-local-sizing)
1. [動画の自動再生を隠す](#hide-autoplay-videos-that-arent-muted)
1. [フレクシブルタイプの`:root`を使用](#use-root-for-flexible-type)
1. [スマホ向け、フォーム要素のフォントサイズの設定](#set-font-size-on-form-elements-for-a-better-mobile-experience)
1. [ポインターイベントを使用してマウスイベントを制御する](#use-pointer-events-to-control-mouse-events)
1. [間隔として使用される改行に「display：none」を設定します](#set-display-none-on-line-breaks-being-used-as-spacing)
<div id="use-a-css-reset"></div>
### CSSのリセットを使用します
CSSのリセットはスタイリング要素のための白紙の状態で異なるブラウザ間でスタイルの一貫性を強化するのに役立ちます。あなたは[Normalize](http://necolas.github.io/normalize.css/)、_et al._のようにCSSのリセットライブラリを使用するか、より簡略化リセットアプローチを使用することができます。
```css
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
```
今の要素は、マージンやパディングを剥奪し、`box-sizing`は、CSSボックスモデルとレイアウトを管理することができますされます。
#### [デモ](http://codepen.io/AllThingsSmitty/pen/kkrkLL)
**注意：**あなたがあなたのCSSのリセットで[Inherit `box-sizing`](#inherit-box-sizing) プロパティが含まれていないことを選択する可能性があります下に`box-sizing`ヒントに従っている場合。
<sup>[目次へ戻る](#table-of-contents)</sup>
<div id="inherit-box-sizing"></div>
### `box-sizing`をコンポーネントごとに変更
`box-sizing`はhtml要素で指定し、継承して利用すると、コンポーネントで変える時に簡単です。
```css
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
```
これでプラグインかその他のコンポーネントに `box-sizing` を変更しやすくなります。
#### [デモ](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)
<sup>[目次へ戻る](#table-of-contents)</sup>
<div id="use-unset-instead-of-resetting-all-properties"></div>
### すべてのプロパティをリセットする代わりに `unset`を使う
要素のプロパティをリセットするときは、個々のプロパティをリセットする必要はありません。
```css
button {
background: none;
border: none;
color: inherit;
font: inherit;
outline: none;
padding: 0;
}
```
要素のプロパティのすべてを `all`省略形で指定することができます。 値を `unset`に設定すると、要素のプロパティが初期値に変更されます：
```css
button {
all: unset;
}
```
<sup>[目次へ戻る](#table-of-contents)</sup>
<div id="use-not-to-applyunapply-borders-on-navigation"></div>
### `:not()`を使用して、リスト要素で実装したナビゲーションの最後のアイテムだけに区切り線を削除します。
ボーダーを書いて。。。
```css
/* add border */
.nav li {
border-right: 1px solid #666;
}
```
ラストチャイルドで非表示するより
```css
/* remove border */
.nav li:last-child {
border-right: none;
}
```
`:not()`を使用するとシンプルなコードで指定できます。
```css
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
```
CSSセレクターは、境界線を人間が表現する方法で定義します。
#### [デモ](http://codepen.io/AllThingsSmitty/pen/LkymvO)
<sup>[目次へ戻る](#table-of-contents)</sup>
<div id="check-if-font-is-installed-locally"></div>
### フォントがローカルにインストールされているかどうかを確認します
フォントをリモートでフェッチする前に、フォントがローカルにインストールされているかどうかを確認できます。これもパフォーマンスのヒントになります。
```css
@font-face {
font-family: "Dank Mono";
src:
/* Full name */
local("Dank Mono"),
/* Postscript name */
local("Dank-Mono"),
/* Otherwise, download it! */
url("//...a.server/fonts/DankMono.woff");
}
code {
font-family: "Dank Mono", system-ui-monospace;
}
```
このプロチップと[デモ](https://codepen.io/argyleink/pen/VwYJpgR)を共有してくれたAdam Argyleへの帽子のヒント.
<sup>[目次へ戻る](#table-of-contents)</sup>
<div id="add-line-height-to-body"></div>
### `body` に`line-height`を加える
`body`要素で`line-height`を指定することで`p`, `h*`などにその値が継承されるため、それぞれに`line-height`を指定する必要がなくなります。
```css
body {
line-height: 1.5;
}
```
#### [デモ](http://codepen.io/AllThingsSmitty/pen/VjbdYd)
<sup>[目次へ戻る](#table-of-contents)</sup>
<div id="set-focus-for-form-elements"></div>
### フォーム要素に `：focus`を設定する
視認されたキーボードユーザーは、キーボードイベントがページ内のどこに移動するかを決定するためにフォーカスを当てています。 フォーム要素のフォーカスを目立たせ、ブラウザのデフォルトの実装と一貫性を持たせる：
```css
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
box-shadow: none;
outline: #000 dotted 2px;
outline-offset: .05em;
}
```
#### [デモ](https://codepen.io/AllThingsSmitty/pen/ePzoOP/)
<sup>[目次へ戻る](#table-of-contents)</sup>
<div id="vertically-center-anything"></div>
### 天地の中央に配置
なんでも天地の中央に配置できます！！
```css
html,
body {
height: 100%;
margin: 0;
}
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
```
...CSSグリッド:
```css
body {
display: grid;
height: 100vh;
margin: 0;
place-items: center center;
}
```
なんでも中央に揃いたいですか？ CSS-Tricks の[セントリングガイド](https://css-tricks.com/centering-css-complete-guide/) をチェックしてください。
#### [デモ](http://codepen.io/AllThingsSmitty/pen/GqmGqZ)
<sup>[目次へ戻る](#table-of-contents)</sup>
<div id="comma-separated-lists"></div>
### リストをカンマ区切りにする
リストの各アイテムをカンマ区切りにします。
```css
ul > li:not(:last-child)::after {
content: ",";
}
```
`:not()` を使えば最後のエレメントにカンマ追加されないようにします。
**備考:** アクセシビリティによくないので気をつけてをお使いください。
<sup>[目次へ戻る](#table-of-contents)</sup>
<div id="select-items-using-negative-nth-child"></div>
### ネガティブな `:nth-child` を使用してアイテムを選択
`nth-child`にはネガティブな値も指定できます。
```css
li {
display: none;
}
/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
display: block;
}
```
また [`:not()`](#use-not-to-applyunapply-borders-on-navigation) を使用してこちらをのコードを書いてみてください：
```css
/* select all items except the first 3 and display them */
li:not(:nth-child(-n+3)) {
display: none;
}
```
簡単でしょう〜！
#### [デモ](http://codepen.io/AllThingsSmitty/pen/WxjKZp)
<sup>[目次へ戻る](#table-of-contents)</sup>
<div id="use-svg-for-icons"></div>
### SVGのアイコン
アイコンとしてSVGを使えない理由がないです！
```css
.logo {
background: url("logo.svg");
}
```
SVGは [IE9](http://caniuse.com/#search=svg)以降のすべてのブラウザでサポートされています。
**備考:** ボタンがSVGだけで作られている場合、SVGがローディングされなかったらアクセシビリティのためこちらのコードを書いて見てください:
```css
.no-svg .icon-only::after {
content: attr(aria-label);
}
```
<sup>[目次へ戻る](#table-of-contents)</sup>
<div id="use-the-lobotomized-owl-selector"></div>
### Owlを使用
変な名前ですが(`*`) と (`+`) を使用するとパワフルCSSセレクターになります！
```css
* + * {
margin-top: 1.5em;
}
```
全てのページの要素にある要素が`margin-top: 1.5em`をもらいます。
Owlについて詳しくはこちら：*List Apart* の[ヘイドンピケリングの記事](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls)
#### [デモ](http://codepen.io/AllThingsSmitty/pen/XKgOkR)
<sup>[目次へ戻る](#table-of-contents)</sup>
<div id="use-max-height-for-pure-css-sliders"></div>
### CSSで実装されたスライダーには`max-height`を使う
CSSで実装されたスライダーは、`max-height`を`overflow: hidden;`と一緒に使ってください。
```css
.slider {
max-height: 200px;
overflow-y: hidden;
width: 300px;
}
.slider:hover {
max-height: 600px;
overflow-y: scroll;
}
```
ホバーの時`max-height`の要素を拡張オバーフローの結果でスライダーが表示されます。
<sup>[目次へ戻る](#table-of-contents)</sup>
<div id="equal-width-table-cells"></div>
### テーブルのセルの幅を均等にする
テーブルの各セルの幅を均等にするには、`table-layout: fixed;`を使うと簡単にできます。
```css
.calendar {
table-layout: fixed;
}
```
簡単にテーブルレイアウトを作れます。
#### [デモ](http://codepen.io/AllThingsSmitty/pen/jALALm)
<sup>[目次へ戻る](#table-of-contents)</sup>
<div id="get-rid-of-margin-hacks-with-flexbox"></div>
### Flexboxのマージンハックを取り除く
`flexbox`でカラムの溝をつくる時、`nth-`, `first-`, `last-child`などのハックで最後の溝を取り除くことができますが、それは`flexbox`の`space-between`プロパティを使うだけで解決します。
```css
.list {
display: flex;
justify-content: space-between;
}
.list .person {
flex-basis: 23%;
}
```
columnのスペースが揃えている。
<sup>[目次へ戻る](#table-of-contents)</sup>
<div id="use-attribute-selectors-with-empty-links"></div>
### リンクにテキストが無い時はURLを表示
リンクの`href`属性にはURLがあり、リンクのテキストがない場合に、下記のCSSを使用すると、リンク先のURLを表示します。
```css
a[href^="http"]:empty::before {
content: attr(href);
}
```
便利ですよー！
#### [デモ](http://codepen.io/AllThingsSmitty/pen/zBzXRx)
<sup>[目次へ戻る](#table-of-contents)</sup>
<div id="style-default-links"></div>
### `:not`を使ってデフォルトのリンクをスタイル
デフォルトのリンクのスタイルを追加：
```css
a[href]:not([class]) {
color: #008000;
text-decoration: underline;
}
```
CMSで挿入される通常class属性を持たないリンクに`:not`を使ってスタイルを定義します。
<sup>[目次へ戻る](#table-of-contents)</sup>
<div id="intrinsic-ratio-boxes"></div>
### 内在比率のボックス
ボックスを内在比率で作成するには、ボックスの上部か下部に`div`の詰め物を適用します。
```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%;
}
```
paddingに20%を使っているのは、そのボックスの高さを幅の20%と等しくします。ビューポートの幅に関わらず、子のdiv要素のアスペクト比は「100%:20%(5:1)」を保持します。
#### [デモ](http://codepen.io/AllThingsSmitty/pen/jALZvE)
<sup>[目次へ戻る](#table-of-contents)</sup>
<div id="style-broken-images"></div>
### リンク切れの画像要素をスタイル
よりよいユーザエクスペリエンスを提供するために、リンク切れの画像要素にスタイルを定義します。もちろんリンク切れがないのがベストですが、絶対に存在しない訳ではありません。
```css
img {
display: block;
font-family: sans-serif;
font-weight: 300;
height: auto;
line-height: 2;
position: relative;
text-align: center;
width: 100%;
}
```
疑似要素を使い、ユーザーの役に立つ情報を加えることもできます。
```css
img::before {
content: "We're sorry, the image below is broken :(";
display: block;
margin-bottom: 10px;
}
img::after {
content: "(url: " attr(src) ")";
display: block;
font-size: 12px;
}
```
このようなスタイリングに興味があればこちらに参考してください：[イレ アデリノクン](https://github.com/ireade/)' [リンク切れの画像についての記事](http://bitsofco.de/styling-broken-images/).
<sup>[目次へ戻る](#table-of-contents)</sup>
<div id="use-rem-for-global-sizing-use-em-for-local-sizing"></div>
### グローバルのサイズ指定に`rem`、ローカルに`em`を使用
ベースのフォントサイズを`html{font-size: 16px;}`にルート指定し、テキスト要素を`em`で指定します。
```css
h2 {
font-size: 2em;
}
p {
font-size: 1em;
}
```
モジュールのフォントサイズは`rem`で指定します。
```css
article {
font-size: 1.25rem;
}
aside .module {
font-size: .9rem;
}
```
モジュールごとに分けるとスタイルするのが簡単で、メンテナンス性もアップします。
<sup>[目次へ戻る](#table-of-contents)</sup>
<div id="hide-autoplay-videos-that-arent-muted"></div>
### 動画の自動再生を隠す
これはカスタマイズされたユーザースタイルシートのための素晴らしいテクニックです。ページがロードされた時、動画が自動再生されて音がでてしまうユーザーの負担を軽減します。もし無音にできないなら、動画を使わないでください。
```css
video[autoplay]:not([muted]) {
display: none;
}
```
こちらも [`:not()`](#use-not-to-applyunapply-borders-on-navigation)を使用できます！
<sup>[目次へ戻る](#table-of-contents)</sup>
<div id="use-root-for-flexible-type"></div>
### フレクシブルタイプの`:root`を使用
レスポンシブ対応時に、フォントのサイズをビューポートごとに適応することができます。`:root`を使い、ビューポートの高さと幅に基づいてフォントのサイズを定義することができます。
```css
:root {
font-size: calc(1vw + 1vh + .5vmin);
}
```
#### [デモ](http://codepen.io/AllThingsSmitty/pen/XKgOkR)
`:root`で定義した値に基づいて、それぞれのタグや要素に`em`を使って利用します。
```css
body {
font: 1rem/1.6 sans-serif;
}
```
<sup>[目次へ戻る](#table-of-contents)</sup>
<div id="set-font-size-on-form-elements-for-a-better-mobile-experience"></div>
### スマホ向け、フォーム要素のフォントサイズの設定
スマホでセレクト要素のドロップダウンをタップした時に、iOS Safariでフォーム要素にズームインするのを回避するために、フォントサイズを加えます。
```css
input[type="text"],
input[type="number"],
select,
textarea {
font-size: 16px;
}
```
:dancer:
<sup>[目次へ戻る](#table-of-contents)</sup>
<div id="use-pointer-events-to-control-mouse-events"></div>
### ポインターイベントを使用してマウスイベントを制御する
[Pointer events](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events)では、マウスがタッチしている要素とどのように対話するかを指定することができます。 ボタン上のデフォルトポインタイベントを無効にするには、次のようにします。
```css
button:disabled {
opacity: .5;
pointer-events: none;
}
```
それは簡単です。
<sup>[目次へ戻る](#table-of-contents)</sup>
<div id="set-display-none-on-line-breaks-being-used-as-spacing"></div>
### 間隔として使用される改行に `display：none` を設定します
[ハリー・ロバーツが指摘したように](https://twitter.com/csswizardry/status/1170835532584235008)、これはCMSユーザーがスペースのために余分な改行を使用するのを防ぐのに役立ちます：
```css
br + br {
display: none;
}
```
<sup>[目次へ戻る](#table-of-contents)</sup>
<div id="support"></div>
## サポート
現在のChrome, Firefox, Safari, のバージョンとEdge.
================================================
FILE: translations/ko-KR/readme.md
================================================
<p align="center">
<img src="../../assets/img/bulb.svg" width="200" alt="light bulb icon">
</p>
# CSS 프로팁 [](https://github.com/sindresorhus/awesome)
CSS스킬을 프로처럼 만들어주는 팁 모음
> 또 다른 꼭 확인해 볼 만한 [@sindresorhus](https://github.com/sindresorhus/)의 큐레이트 리스트 [awesome lists](https://github.com/sindresorhus/awesome/).
<div id="table-of-contents"></div>
## 목차
* [프로팁](#프로팁)
* [지원](#지원)
* [컨트리뷰션 가이드라인](../../CONTRIBUTING.md)
<div id="protips"></div>
## 프로팁
1. [CSS Reset을 사용](#use-a-css-reset)
1. [`box-sizing`을 컴포넌트마다 변경](#inherit-box-sizing)
1. [모든 프로퍼티를 리셋하는 대신에 `unset`를 쓴다](#use-unset-instead-of-resetting-all-properties)
1. [`:not()` 를 사용하여 보더를 삭제](#use-not-to-applyunapply-borders-on-navigation)
1. [글꼴이 로컬로 설치되어 있는지 확인](#check-if-font-is-installed-locally)
1. [`body`에 `line-height` 넣기](#add-line-height-to-body)
1. [폼 요소에`: focus`를 설정하기](#set-focus-for-form-elements)
1. [전부 수직 정렬 만들기](#vertically-center-anything)
1. [리스트를 콤마로 나누기](#comma-separated-lists)
1. [Negative `nth-child`를 사용하여 아이템 나누기](#select-items-using-negative-nth-child)
1. [SVG를 아이콘으로 사용하기](#use-svg-for-icons)
1. ["Lobotomized Owl" Selector 사용하기](#use-the-lobotomized-owl-selector)
1. [CSS로 구현된 슬라이더에 `max-height` 사용하기](#use-max-height-for-pure-css-sliders)
1. [테이블 셀의 너비 균등하게 하기](#equal-width-table-cells)
1. [Flexbox의 Margin Hack 제거](#get-rid-of-margin-hacks-with-flexbox)
1. [링크에 텍스트가 없을 때의 url 표시](#use-attribute-selectors-with-empty-links)
1. ["Default" 링크 스타일](#style-default-links)
1. [내재 비율의 박스](#intrinsic-ratio-boxes)
1. [깨진 링크의 이미지 스타일](#style-broken-images)
1. [글로벌 사이즈 지정에 `rem`; 로컬 사이즈 지정에 `em`](#use-rem-for-global-sizing-use-em-for-local-sizing)
1. [동영상 자동재생 감추기](#hide-autoplay-videos-that-arent-muted)
1. [Flexible Type의 `:root` 사용하기](#use-root-for-flexible-type)
1. [모바일 환경을 위한 `font-size` 요소 설정](#set-font-size-on-form-elements-for-a-better-mobile-experience)
1. [포인터 이벤트를 사용한 마우스 이벤트 제어](#use-pointer-events-to-control-mouse-events)
1. [간격으로 사용되는 줄 바꿈에서 `display: none` 을 설정하십시오.](#set-display-none-on-line-breaks-being-used-as-spacing)
<div id="use-a-css-reset"></div>
### CSS Reset을 사용
CSS reset은 스타일 요소들을 통해 백지 상태에서 다른 브라우저간의 스타일의 일관성을 강화하는데 도움을 줍니다. 또한 [Normalize](http://necolas.github.io/normalize.css/), _et al._, 와 같은 CSS 리셋 라이브러리를 통해 더 쉽게 reset 형태를 취할 수 있습니다.
```css
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
```
이제 요소는 마진과 패딩을 배제하고, `box-sizing`은 CSS 박스 모델을 통해 관리됩니다.
#### [데모](http://codepen.io/AllThingsSmitty/pen/kkrkLL)
**Note:** 당신이 아래의 [`box-sizing`을 컴포넌트마다 변경](#inherit-box-sizing) 팁을 따를 경우 `box-sizing` 프로퍼티를 선택하지 않을 수 있습니다.
<sup>[목차로 돌아가기](#table-of-contents)</sup>
<div id="inherit-box-sizing"></div>
### `box-sizing`을 컴포넌트마다 변경
`html`에서 `box-sizing`을 계승하게 합니다:
```css
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
```
이것은 다른 플러그인과 컴포넌트에서 `box-sizing`을 변경하는 것을 용이하게 합니다.
#### [데모](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)
<sup>[목차로 돌아가기](#table-of-contents)</sup>
<div id="use-unset-instead-of-resetting-all-properties"></div>
### 모든 프로퍼티를 리셋하는 대신에 `unset`를 쓴다
요소들을 리셋할 경우, 각각의 속성을 리셋할 필요가 없습니다.
```css
button {
background: none;
border: none;
color: inherit;
font: inherit;
outline: none;
padding: 0;
}
```
요소의 속성 `all` 생략형을 통해 지정하고 `unset`을 통해 모든 요소를 초기값으로 설정할 수 있습니다.
```css
button {
all: unset;
}
```
<sup>[목차로 돌아가기](#table-of-contents)</sup>
<div id="use-not-to-applyunapply-borders-on-navigation"></div>
### `:not()` 를 사용하여 보더를 삭제
Border를 넣거나...
```css
/* 보더 추가 */
.nav li {
border-right: 1px solid #666;
}
```
...마지막 요소를 없애기 보다는...
```css
/* 보더 삭제 */
.nav li:last-child {
border-right: none;
}
```
...`:not()`을 사용하여 코드를 간단히 지정할 수 있습니다.
```css
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
```
CSS 선택자는 사람이 설명하는 방식 그대로 경계를 정의합니다.
#### [데모](http://codepen.io/AllThingsSmitty/pen/LkymvO)
<sup>[목차로 돌아가기](#table-of-contents)</sup>
<div id="check-if-font-is-installed-locally"></div>
### 글꼴이 로컬로 설치되어 있는지 확인
글꼴을 원격으로 가져 오기 전에 글꼴이 로컬에 설치되어 있는지 확인할 수 있으며 이는 좋은 성능 팁입니다.
```css
@font-face {
font-family: "Dank Mono";
src:
/* 풀네임 */
local("Dank Mono"),
/* 포스트 스크립트명 */
local("Dank-Mono"),
/* 아니면 다운로드도 가능! */
url("//...a.server/fonts/DankMono.woff");
}
code {
font-family: "Dank Mono", system-ui-monospace;
}
```
이 팁과 [데모](https://codepen.io/argyleink/pen/VwYJpgR)를 공유 한 Adam Argyle의 모자 팁.
<sup>[목차로 돌아가기](#table-of-contents)</sup>
<div id="add-line-height-to-body"></div>
### `body`에 `line-height` 넣기
`body`요소에서`line-height`를 지정할 때 `p`,`h*`, _et al_ 등에 그 값이 계승되기 때문에 각각`line-height`을 지정할 필요가 없습니다.
```css
body {
line-height: 1.5;
}
```
이 방법으로 텍스트 요소가 `body`의 속성을 쉽게 계승할 수 있습니다.
#### [데모](http://codepen.io/AllThingsSmitty/pen/VjbdYd)
<sup>[목차로 돌아가기](#table-of-contents)</sup>
<div id="set-focus-for-form-elements"></div>
### 폼 요소에`: focus`를 설정하기
키보드 사용자는 포커스를 사용하여 키보드 이벤트의 위치를 결정합니다. 폼 요소에 집중할 수 있게 해주며, 브라우저의 기본 구현을 일관성있게 만듭니다.
```css
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
box-shadow: none;
outline: #000 dotted 2px;
outline-offset: .05em;
}
```
#### [데모](https://codepen.io/AllThingsSmitty/pen/ePzoOP/)
<sup>[목차로 돌아가기](#table-of-contents)</sup>
<div id="vertically-center-anything"></div>
### 전부 Vertically-Center로 만들기
농담이 아니라, 진짜 전부 중앙으로 배치가 가능합니다.
```css
html,
body {
height: 100%;
margin: 0;
}
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
```
무언가를 중앙으로 배치하고 싶으신가요? 가로로, 세로로 ...뭐든지, 어떤 때라도, 어디서든? CSS-Tricks의 [가이드](https://css-tricks.com/centering-css-complete-guide/)를 통해 그 모든 것을 해보세요!
#### [데모](http://codepen.io/AllThingsSmitty/pen/GqmGqZ)
<sup>[목차로 돌아가기](#table-of-contents)</sup>
<div id="comma-separated-lists"></div>
### 리스트를 콤마로 나누기
Make list items look like a real, comma-separated list:
리스트 아이템을 콤마를 통해 나눕니다.
```css
ul > li:not(:last-child)::after {
content: ",";
}
```
`:not()` 을 사용할 때 리스트의 마지막 아이템에는 콤마를 사용하지 않도록 합니다.
**Note:** 이 팁의 경우 접근성이 떨어질 수 있습니다. 특히, 스크린 사용자에게는요. 또한 브라우저에서의 복사/붙여넣기는 CSS를 통해 생성한 콘텐츠에서는 사용 불가능하므로 주의해 주세요.
<sup>[목차로 돌아가기](#table-of-contents)</sup>
<div id="select-items-using-negative-nth-child"></div>
### Negative `nth-child`를 사용하여 아이템 나누기
Negative `nth-child`를 사용하여 n분의 1로 아이템을 나눌 수 있습니다.
```css
li {
display: none;
}
/* 1에서 3까지의 선택하고 보여주기 */
li:nth-child(-n+3) {
display: block;
}
```
[`:not()`](#use-not-to-applyunapply-borders-on-navigation), 를 사용해 봅시다.
```css
/* 처음 3개를 제외한 모든 아이템 보여주기 */
li:not(:nth-child(-n+3)) {
display: none;
}
```
#### [데모](http://codepen.io/AllThingsSmitty/pen/WxjKZp)
<sup>[목차로 돌아가기](#table-of-contents)</sup>
<div id="use-svg-for-icons"></div>
### SVG를 아이콘으로 사용하기
SVG를 아이콘으로 사용할 이유는 없지만:
```css
.logo {
background: url("logo.svg");
}
```
SVG는 [IE9](http://caniuse.com/#search=svg) 이후부터 지원되고 있습니다.
**Note:** 버튼이 SVG로 만들어진 경우, 접근성을 높이기 위해 이 방법을 사용해 보세요.
```css
.no-svg .icon-only::after {
content: attr(aria-label);
}
```
<sup>[목차로 돌아가기](#table-of-contents)</sup>
### "Lobotomized Owl" Selector 사용하기
이상한 이름이지만 (`*`)와 (`+`)와 함께 사용하면 강력한 CSS의 가능성을 제공합니다.
```css
* + * {
margin-top: 1.5em;
}
```
이 예시에서는, 모든 요소가 `margin-top: 1.5em`를 따릅니다.
"lobotomized owl" selector에 대해 더 알고싶으시다면 *A List Apart* [Heydon Pickering's post](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls)의 이 문서를 읽어보세요.
#### [데모](http://codepen.io/AllThingsSmitty/pen/grRvWq)
<sup>[목차로 돌아가기](#table-of-contents)</sup>
<div id="use-max-height-for-pure-css-sliders"></div>
### CSS로 구현된 슬라이더에 `max-height` 사용하기
CSS에서 구현된 슬라이더는`max-height`을`overflow:hidden;`와 함께 사용하세요.
```css
.slider {
max-height: 200px;
overflow-y: hidden;
width: 300px;
}
.slider:hover {
max-height: 600px;
overflow-y: scroll;
}
```
The element expands to the `max-height` value on hover and the slider displays as a result of the overflow
hover시 `max-height`를 요소를 확장 오버플로우의 결과로 슬라이더에 표시됩니다.
<sup>[목차로 돌아가기](#table-of-contents)</sup>
<div id="equal-width-table-cells"></div>
### 테이블 셀의 너비 균등하게 하기
테이블의 각 셀의 너비를 균등하려면`table-layout:fixed;`를 사용해 간단히 할 수 있습니다.
```css
.calendar {
table-layout: fixed;
}
```
고통 없는 테이블 디스플레이를 가능하게 합니다
#### [데모](http://codepen.io/AllThingsSmitty/pen/jALALm)
<sup>[목차로 돌아가기](#table-of-contents)</sup>
<div id="get-rid-of-margin-hacks-with-flexbox"></div>
### Flexbox의 Margin Hack 제거
column gutter을 사용할 때 flexbox의 `space-between` 요소를 사용하여 `nth-`, `first-`, `last-child`를 사용하지 않게 해줍니다.
```css
.list {
display: flex;
justify-content: space-between;
}
.list .person {
flex-basis: 23%;
}
```
column gutter는 이제 이벤트 공간에 표시됩니다.
<sup>[목차로 돌아가기](#table-of-contents)</sup>
<div id="use-attribute-selectors-with-empty-links"></div>
### 링크에 텍스트가 없을 때의 url 표시
링크의`href`속성에 링크의 텍스트 값이 없을 경우, 아래의 CSS를 사용하면 링크처의 URL을 표시합니다.
```css
a[href^="http"]:empty::before {
content: attr(href);
}
```
상당이 편리한 기능입니다.
#### [데모](http://codepen.io/AllThingsSmitty/pen/zBzXRx)
<sup>[목차로 돌아가기](#table-of-contents)</sup>
<div id="style-default-links"></div>
### "Default" 링크 스타일
"default" 링크에 스타일 추가하기:
```css
a[href]:not([class]) {
color: #008000;
text-decoration: underline;
}
```
이것은 보통 class속성이 없는 링크에`:not`을 사용하여 CMS로 삽입됩니다. 상속(cascade)문제 없이 차별화 할 수 있습니다.
<sup>[목차로 돌아가기](#table-of-contents)</sup>
<div id="intrinsic-ratio-boxes"></div>
### 내재 비율의 박스
당신이 top, bottom 패딩을 지정하는 것 만으로 내제된 비율의 박스를 생성합니다.
```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%;
}
```
20%를 패딩으로 사용하면 높이를 너비의 20%와 동일하게 합니다.뷰 포트의 너비와 상관 없이, 자식의 div는 이 비율 (100% / 20% = 5:1)를 유지합니다.
#### [데모](http://codepen.io/AllThingsSmitty/pen/jALZvE)
<sup>[목차로 돌아가기](#table-of-contents)</sup>
<div id="style-broken-images"></div>
### 깨진 링크의 이미지 스타일
CSS를 통해 링크가 깨진 이미지를 사용자 친화적으로 만듭니다.
```css
img {
display: block;
font-family: sans-serif;
font-weight: 300;
height: auto;
line-height: 2;
position: relative;
text-align: center;
width: 100%;
}
```
또는 다음 방법을 통해 사용자에게 깨진 링크에 대한 메세지를 전달하는 것도 가능합니다.
```css
img::before {
content: "죄송하지만 이 이미지에 문제가 있습니다 :(";
display: block;
margin-bottom: 10px;
}
img::after {
content: "(url: " attr(src) ")";
display: block;
font-size: 12px;
}
```
이 스탕일링 패턴을 다음 링크에서 배울 수 있습니다.[Ire Aderinokun](https://github.com/ireade/)'s [original post](http://bitsofco.de/styling-broken-images/).
<sup>[목차로 돌아가기](#table-of-contents)</sup>
<div id="use-rem-for-global-sizing-use-em-for-local-sizing"></div>
### 글로벌 사이즈 지정에 `rem`; 로컬 사이즈 지정에 `em`
베이스 폰트 크기를 (`html { font-size: 100%; }`)를 통해 지정하고, 텍스트 요소를 `em`에서 지정합니다.
```css
h2 {
font-size: 2em;
}
p {
font-size: 1em;
}
```
`rem`을 통해 모듈의 폰트 사이즈를 지정해 봅시다:
```css
article {
font-size: 1.25rem;
}
aside .module {
font-size: .9rem;
}
```
이제 각 모듈별로 관리하면 관리가 쉽고 스탕일링이 간편해 집니다.
<sup>[목차로 돌아가기](#table-of-contents)</sup>
<div id="hide-autoplay-videos-that-arent-muted"></div>
### 동영상 자동재생 감추기
이것은 스타일 시트의 커스텀에서 유용한 트릭입니다. 유저가 페이지가 로드될 때 소리가 자동 재생될 때 겪는 부담을 줄여줍니다. 만약 소리를 끌 수 없다면, 차라리 동영상을 보여주지 마세요.
```css
video[autoplay]:not([muted]) {
display: none;
}
```
다시한 한 번[`:not()`](#use-not-to-applyunapply-borders-on-navigation)을 사용하는 것의 편리함을 보여줍니다.
<sup>[목차로 돌아가기](#table-of-contents)</sup>
<div id="use-root-for-flexible-type"></div>
### Flexible Type의 `:root` 사용하기
`:root`를 사용하여 반응형 레이아웃의 타입 폰트 사이즈를 뷰 포트마다 적용할 수 있게 합니다. 뷰 포트의 높이와 너비를 바탕으로 폰트 크기를 정의할 수 있습니다.
```css
:root {
font-size: calc(1vw + 1vh + .5vmin);
}
```
`:root`를 정의된 값을 바탕으로 `root em`을 사용할 수 있습니다.
```css
body {
font: 1rem/1.6 sans-serif;
}
```
#### [데모](http://codepen.io/AllThingsSmitty/pen/XKgOkR)
<sup>[목차로 돌아가기](#table-of-contents)</sup>
<div id= "set-font-size-on-form-elements-for-a-better-mobile-experiences"></div>
### 모바일 환경을 위한 `font-size` 요소 설정
iOS Safari, _et al_ 과 같은 모바일 브라우저에서 `<select>`드롭다운을 탭 할 때 HTML 폼 요소가 줌 인 되는 것을 피하기 위해 `font-size` 의 선택자 룰을 추가한다.
```css
input[type="text"],
input[type="number"],
select,
textarea {
font-size: 16px;
}
```
:dancer:
<sup>[목차로 돌아가기](#table-of-contents)</sup>
<div id="use-pointer-events-to-control-mouse-events"></div>
### 포인터 이벤트를 사용한 마우스 이벤트 제어
[포인터 이벤트](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events)는 터치 시 마우스 동작을 특정할 수 있도록 도와줍니다. 버튼의 디폴트 포인터를 무효화 하려면 다음 방법을 따릅니다.
```css
button:disabled {
opacity: .5;
pointer-events: none;
}
```
아주 간단한 방법이죠?
<sup>[목차로 돌아가기](#table-of-contents)</sup>
<div id="set-display-none-on-line-breaks-being-used-as-spacing"></div>
### 간격으로 사용되는 줄 바꿈에서 `display: none` 을 설정하십시오.
[Harry Roberts가 지적한대로](https://twitter.com/csswizardry/status/1170835532584235008) CMS 사용자가 추가 줄 바꿈을 사용하여 간격을 두지 못하게 할 수 있습니다.
```css
br + br {
display: none;
}
```
<sup>[목차로 돌아가기](#table-of-contents)</sup>
<div id="support"></div>
## 지원
최신 버전의 Chrome, Firefox, Safari, Edge에서 지원됩니다..
<sup>[목차로 돌아가기](#table-of-contents)</sup>
================================================
FILE: translations/pl-PL/README.md
================================================
<p align="center">
<img src="../../assets/img/bulb.svg" width="200" alt="light bulb icon">
</p>
# Wskazówki CSS [](https://github.com/sindresorhus/awesome)
Zbiór porad, które pomogą Ci rozwinąć zawansowane umiejętności CSS.
> Sprawdż takze inne wspaniałe listy [@sindresorhus](https://github.com/sindresorhus/) z [zaufanych list](https://github.com/sindresorhus/awesome/).
## Powrót do spisu treści
* [Wskazówki](#Wskazowki)
* [Wsparcie](#Wsparcie)
* [Wskazówki dotyczące kontrybucji do tego projektu](../../CONTRIBUTING.md)
## Wskazówki
1. [Użyj resetowania CSS](#użyj-resetowania-css)
1. [Dziedziczenie `box-sizing`](#dziedziczenie-box-sizing)
1. [Użyj `unset` zamiast resetowania wszystkich ustawień](#użyj-unset-zamiast-resetowania-wszystkich-ustawień)
1. [Użyj `:not()` aby dodać/usunąć obramownie nawigacji](#użyj-not-aby-dodaćusunąć-obramownie-nawigacji)
1. [Sprawdź, czy czcionka jest zainstalowana lokalnie](#sprawdź,-czy-czcionka-jest-zainstalowana-lokalnie)
1. [Dodaj `line-height` do `body`](#dodaj-line-height-do-body)
1. [Ustaw `:focus` dla elementów formularza](#ustaw-:focus-dla-form-elements)
1. [Przesuń cokolwiek pionowo](#przesuwanie-w-pionie)
1. [Listy rozdziele przecinkami](#listy-podzielone-przecinkami)
1. [Wybierz elementy za pomocą negatywnego `nth-child`](#wybierz-przedmioty-za-pomocą-nth-child)
1. [Użyj SVG dla ikon ](#użyj-svg-dla-ikon)
1. [Użyj selektora "Lobotomized Owl"](#użyj-selektora-lobotomized-owl)
1. [Użyj `max-height` dla suwaków Pure CSS](#użyjmax-height-dla-suwaków-pure-csss)
1. [Komórki tabeli o równej-szerokości](#równoważne-komórki-tabeli)
1. [Pozbądź się marginesów za pomocą Flexbox](#pozbądź-się-marginesów-za-pomocą-flexbox)
1. [Użyj selektorów atrybutów z pustymi linkami](#użyj-selektorów-atrybutów-z-pustymi-linkami)
1. [Stylizuj domyślne linki](#stylizuj-domyślne-linki)
1. [Wewnętrzne proporcje bloków](#wewnętrzne-proporcje-bloków)
1. [Wystylizuj uszkodzone obrazy](#wystylizuj-uszkodzone-obrazy)
1. [Użyj `rem` dla ustawień globalnych rozmiarow i `em` do ustawień localnych](#użyj-rem-dla-ustawień-globalnych-rozmiarow-i-em-do-ustawień-localnych)
1. [Ukryj filmy z autoodtwarzaniem, które nie są wyciszone](#ukryj-filmy-z-autoodtwarzaniem-które-nie-są-wyciszone)
1. [Użyj `:root` dla elastycznych typów](#użyj-`:root`-dla-elastycznych-typów)
1. [Ustaw rozmiar czcionki w elementach formularza](#ustaw-rozmiar-czcionki-w-elementach-formularza)
1. [Użyj zdarzeń wskaźnika do sterowania zdarzeniami myszy](#użyj-zdarzeń-wskaźnika-do-sterowania-zdarzeniami-myszy)
1. [Ustaw `display: none` na Podziały linii używane jako odstępy](#ustaw-display-none-na-podziały-linii-używane-jako-odstępy)
### Użyj resetowania CSS
Reset ustawień CSS umośliwia wymuszenie spójność stylu w różnych przeglądarkach z czystym konturem dla elementów stylizacyjnych. Możesz wykorzystać jedną bibliotek resetującej ustawienia CSS np. [Normalize](http://necolas.github.io/normalize.css/) lub użyć uproszczonego sposobu resetowania:
```css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
```
Elementy zostaną pozbawione marginesów i dopełnienia, a `box-sizing` pozwala zarządzać układami za pomocą modelu pudełkowego CSS (CSS box model).
#### [Demonstracja](http://codepen.io/AllThingsSmitty/pen/kkrkLL)
**Uwaga:** Jeżeli zdecydujesz sie na wykorzystanie powyżej opisanej wskazówki dotyczącej [Dziedziczenia `box-sizing`](#inherit-box-sizing) możesz zrezygnować z dodania `box-sizing` w zresetowanych ustawieniach CSS.
<sup>[powrót do spisu treści](#powrót-do-spisu-treści )</sup>
### Dziedziczenie `box-sizing`
Niech `box-sizing` zostanie odziedziczony z `html`:
```css
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
```
Ułatwia to łatwiejszą zmianę `box-sizing` w wtyczkach lub innych komponentach, które wpływaja na inne zachowania.
#### [Demonstracja](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)
<sup>[powrót do spisu treści](#powrót-do-spisu-treści)</sup>
### Użyj `unset` zamiast resetowania wszystkich ustawień
Podczas resetowania ustawień elementu nie jest konieczne resetowanie pojedyńczych ustawień:
```css
button {
background: none;
border: none;
color: inherit;
font: inherit;
outline: none;
padding: 0;
}
```
Możesz sprecyzować wszystkie właściwości elementu, używając skrótu `all`. Używając `unset` możemy zresetować ustawienia elementu do wartości początkowych:
```css
button {
all: unset;
}
```
<sup>[powrót do spisu treści](#powrót-do-spisu-treści)</sup>
### Użyj `:not()`, aby dodać/usunąć obramownie nawigacji
Zamiast dodać obramowanie...
```css
/* add border */
.nav li {
border-right: 1px solid #666;
}
```
...a później usunąć ja z ostatniego elementu...
```css
/* usuń obramowanie */
.nav li:last-child {
border-right: none;
}
```
...użyj `:not()` pseudo-klasy, aby dodać obramowanie do wybranych elementów:
```css
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
```
Selektor CSS definiuje granicę w sposób opisany przez człowieka.
#### [Demonstracja](http://codepen.io/AllThingsSmitty/pen/LkymvO)
<sup>[powrót do spisu treści](#powrót-do-spisu-treści)</sup>
### Sprawdź, czy czcionka jest zainstalowana lokalnie
Możesz sprawdzić, czy czcionka jest zainstalowana lokalnie, przed jej zdalnym pobraniem, co również jest dobrą wskazówką dotyczącą wydajności.
```css
@font-face {
font-family: "Dank Mono";
src:
/* Full name */
local("Dank Mono"),
/* Postscript name */
local("Dank-Mono"),
/* Otherwise, download it! */
url("//...a.server/fonts/DankMono.woff");
}
code {
font-family: "Dank Mono", system-ui-monospace;
}
```
Czapka dla Adama Argyle'a za podzielenie się tym prototypem i [demonstracją](https://codepen.io/argyleink/pen/VwYJpgR).
<sup>[powrót do spisu treści](#powrót-do-spisu-treści)</sup>
### Dodaj `line-height` do `body`
Nie musisz dodawać `wysokości linii` do każdego `<p>`, `<h*>`, _et al_. osobno. Zamiast tego dodaj go do `body`:
```css
body {
line-height: 1.5;
}
```
W ten sposób elementy tekstowe mogą łatwo odziedziczyć ustawienia z `body`.
#### [Demonstracja](http://codepen.io/AllThingsSmitty/pen/VjbdYd)
<sup>[powrót do spisu treści](#Powrót-do-spisu-treści)</sup>
### Ustaw `:focus` dla elementów formularza
Obserwowani użytkownicy klawiatury polegają na fokucie, aby określić, gdzie na stronie pojawiają się zdarzenia na klawiaturze. Skoncentruj się na elementach formy, które będą spójne, a następnie domyślna implementacja przeglądarki:
```css
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
box-shadow: none;
outline: #000 dotted 2px;
outline-offset: .05em;
}
```
#### [Demonstracja](https://codepen.io/AllThingsSmitty/pen/ePzoOP/)
<sup>[Powrót do spisu treści](#Powrót-do-spisu-treści)</sup>
### Przesuwanie w pionie
Nie, to nie jest czarna magia, naprawdę możesz wyśrodkować elementy w pionie:
```css
html,
body {
height: 100%;
margin: 0;
}
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
```
a także używając CSS Grid:
```css
body {
display: grid;
height: 100vh;
margin: 0;
place-items: center center;
}
```
Chcesz coś przenieść? Pionowo, poziomo... zawsze i wszędzie? Na CSS-Tricks znajdziesz [ciekawy artykuł](https://css-tricks.com/centering-css-complete-guide/) z dobrymi instrukcje na ten temat.
#### [Demonstracja](http://codepen.io/AllThingsSmitty/pen/GqmGqZ)
<sup>[Powrót do spisu treści](#Powrót-do-spisu-treści)</sup>
### Listy podzielone przecinkami
Elementy listy mogą wyglądać jak prawdziwa, oddzielona przecinkami lista:
```css
ul > li:not(:last-child)::after {
content: ",";
}
```
Użyj `:not()` pseudo-klasy, aby przecinek nie zostal dodany do ostatniego elementu.
**Uwaga:** Ta wskazówka może nie być idealna dla ułatwień dostępu, w szczególności na ekranach czytników. Kopiowanie / wklejanie z przeglądarki nie działa z treścią generowaną przez CSS. Postępuj ostrożnie.
<sup>[Powrót do spisu treści](#Powrót-do-spisu-treści)</sup>
### Wybierz przedmioty za pomocą `nth-child`
Wybierz przedmioty nieparzyste za pomocą negatywnego `nth-child` w CSS, aby wybrać elementy od 1 do n.
```css
li {
display: none;
}
/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
display: block;
}
```
Lub, skoro już nauczyłeś się trochę o użyciu [`:not()`](#use-not-to-applyunapply-borders-on-navigation),wypróbuj:
```css
/* select all items except the first 3 and display them */
li:not(:nth-child(-n+3)) {
display: none;
}
```
To było całkiem łatwe.
#### [Demonstracja](http://codepen.io/AllThingsSmitty/pen/WxjKZp)
<sup>[Powrót do spisu treści](#Powrót-do-spisu-treści)</sup>
### Użyj SVG dla ikon
Nie ma powodu, aby nie używać SVG jako ikon:
```css
.logo {
background: url("logo.svg");
}
```
SVG skaluje się dobrze dla wszystkich typów rozdzielczości i jest obsługiwany we wszystkich przeglądarkach [wróć do IE9](http://caniuse.com/#search=svg). Więc porzuć swoje pliki .png, .jpg lub .gif-jif-whatev.
**Uwaga:** Jeśli masz przyciski tylko ikony SVG dla widzących użytkowników, a SVG nie załaduje się, pomoże to w utrzymaniu dostępności:
```css
.no-svg .icon-only::after {
content: attr(aria-label);
}
```
<sup>[Powrót do spisu treści](#Powrót-do-spisu-treści)</sup>
### Użyj selektora "Lobotomized Owl"
Być może "Lobotomized Owl" to dziwna nazwa dla selektora, ale użycie uniwersalnego (`*`) selektora z sąsiednim selektorem rodzeństwa (`+`) może udostepnić potężne możliwości CSS:
```css
* + * {
margin-top: 1.5em;
}
```
W tym przykładzie wszystkie elementy, które śledzą inne elementy, otrzymają `margin-top: 1.5em`.
Dowiedź sie wiecej na temat selektora "lobotomized owl" czytajac [artykul Heydon'a Pickering](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) *A List Apart*.
#### [Demonstracja](http://codepen.io/AllThingsSmitty/pen/grRvWq)
<sup>[Powrót do spisu treści](#Powrót-do-spisu-treści)</sup>
### Użyj`max-height` (atrybutu maksymalnej wysokości) dla suwaków Pure CSS
Zaimplementuj suwaki CSS używając `max-height` z ukrytym przepełnieniem:
```css
.slider {
max-height: 200px;
overflow-y: hidden;
width: 300px;
}
.slider:hover {
max-height: 600px;
overflow-y: scroll;
}
```
Element rozwija się do `max-height` po najechaniu kursorem, a suwak wyświetla się w wyniku przepełnienia.
<sup>[Powrót do spisu treści](#Powrót-do-spisu-treści)</sup>
### Komórki tabeli o równej-szerokości
Tworzenie tabel może być uciążliwe. Spróbuj użyć `table-layout: fixed`, aby upewnić sie, że komórki mają jednakową szerokość:
```css
.calendar {
table-layout: fixed;
}
```
Widzisz jakie to proste! :)
#### [Demonstracja](http://codepen.io/AllThingsSmitty/pen/jALALm)
<sup>[Powrót do spisu treści](#Powrót-do-spisu-treści)</sup>
### Pozbądź się marginesów za pomocą Flexbox
Podczas pracy z rynnami kolumnowymi (column gutters) możesz pozbyć się `nth-`, `first-`, i `last-child` za pomocą właściwości`space-between`:
```css
.list {
display: flex;
justify-content: space-between;
}
.list .person {
flex-basis: 23%;
}
```
Teraz rynny kolumnowe zawsze są rozmieszczone równomiernie.
<sup>[Powrót do spisu treści](#Powrót-do-spisu-treści)</sup>
### Użyj selektorów atrybutów z pustymi linkami
Wyświetl linki, gdy element `<a>` nie ma wartości tekstowej, ale atrybut `href` posiada link:
```css
a[href^="http"]:empty::before {
content: attr(href);
}
```
To całkiem wygodne.
#### [Demonstracja](http://codepen.io/AllThingsSmitty/pen/zBzXRx)
<sup>[Powrót do spisu treści](#Powrót-do-spisu-treści)</sup>
### Stylizuj "domyślne" linki
Dodaj styl dla "domyślnych" linków:
```css
a[href]:not([class]) {
color: #008000;
text-decoration: underline;
}
```
Linki wstawiane za pośrednictwem CMS, które zwykle nie mają atrybutu class, będą wyróżnione bez wpływu na kaskadę.
<sup>[Powrót do spisu treści](#Powrót-do-spisu-treści)</sup>
### Wewnętrzne proporcje bloków
Aby utworzyć pola, które posiada wewnętrzne proporcje, wystarczy zastosować górny lub dolny margines do elementu div:
```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%;
}
```
Użycie 20% wypełnienia (padding) sprawia, że wysokość bloku jest równa 20% jego szerokości. Bez względu na szerokość okna roboczego (viewport), element div zachowa swój współczynnik proporcji (100% / 20% = 5:1).
#### [Demonstracja](http://codepen.io/AllThingsSmitty/pen/jALZvE)
<sup>[powrót do spisu treści](#powrót-do-spisu-treści )</sup>
### Wystylizuj uszkodzone obrazy
Spraw, aby uszkodzone obrazy były bardziej estetyczne z użyciem odrobiny CSS:
```css
img {
display: block;
font-family: sans-serif;
font-weight: 300;
height: auto;
line-height: 2;
position: relative;
text-align: center;
width: 100%;
}
```
Następnie dodaj reguły pseudoelementów, aby wyświetlić komunikat użytkownika i adres URL uszkodzonego obrazu:
```css
img::before {
content: "We're sorry, the image below is broken :(";
display: block;
margin-bottom: 10px;
}
img::after {
content: "(url: " attr(src) ")";
display: block;
font-size: 12px;
}
```
Dowiedz się więcej o stylizacji używając tego wzoru w oryginalnym [originalny artykule](http://bitsofco.de/styling-broken-images/) [Ire Aderinokun](https://github.com/ireade/).
<sup>[powrót do spisu treści](#powrót-do-spisu-treści )</sup>
### Użyj `rem` dla ustawień globalnych rozmiarow i `em` do ustawień localnych
Po ustawieniu podstawowego rozmiaru czcionki w katalogu głównym (`html { font-size: 100%; }`), ustaw rozmiar czcionki dla elementów tekstowych na `em`:
```css
h2 {
font-size: 2em;
}
p {
font-size: 1em;
}
```
Następnie ustaw rozmiar czcionki dla modułów na rem`:
```css
article {
font-size: 1.25rem;
}
aside .module {
font-size: .9rem;
}
```
Teraz każdy moduł jest podzielony na sekcje. Sprawia to żę stylizacja i utrzymanie kodu jest łątwiejsze.
<sup>[powrót do spisu treści](#powrót-do-spisu-treści )</sup>
### Ukryj filmy z autoodtwarzaniem, które nie są wyciszone
To świetna sztuczka dla niestandardowego arkusza stylów użytkownika. Unikaj przeciążania użytkownika dźwiękiem z filmu, który odtwarza się automatycznie po wczytaniu strony. Jeśli dźwięk nie jest wyciszony, nie pokazuj widea:
```css
video[autoplay]:not([muted]) {
display: none;
}
```
Po raz kolejny wykorzystujemy pseudo-klasę [`:not()`](#use-not-to-applyunapply-borders-on-navigation)
<sup>[Powrót do spisu treści](#Powrót-do-spisu-treści</sup>
### Użyj `:root` dla elastycznych typów
Rozmiar czcionki typowej w elastyczny układzie (responsive layout) powinien być dostosowywany dla każdego ekranu. Możesz obliczyć rozmiar czcionki na podstawie wysokości i szerokości okna roboczego używając `:root`:
```css
:root {
font-size: calc(1vw + 1vh + .5vmin);
}
```
Następnie możesz użyć jednostki`root em` na podstawie wartości obliczonej przez `:root`:
```css
body {
font: 1rem/1.6 sans-serif;
}
```
#### [Demonstracja](http://codepen.io/AllThingsSmitty/pen/XKgOkR)
<sup>[powrót do spisu treści](#powrót-do-spisu-treści )</sup>
### Ustaw rozmiar czcionki w elementach formularza
Aby uniknąć korzystania z przeglądarek komórkowych (iOS Safari etc.) podczas powiększania elementów formularzy HTML, po dotknięciu menu rozwijanego `<select>` dnależy dodać `font-size` do reguły selektora:
```css
input[type="text"],
input[type="number"],
select,
textarea {
font-size: 16px;
}
```
:dancer:
<sup>[Powrót do spisu treści](#Powrót-do-spisu-treści)</sup>
### Użyj zdarzeń wskaźnika do sterowania zdarzeniami myszy
[Pointer events](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) umożliwiają określenie sposobu interakcji myszy z elementem, na które kilka. Aby wyłączyć domyślne zdarzenie wskaźnika na przycisku, na przykład:
```css
button:disabled {
opacity: .5;
pointer-events: none;
}
```
To takie proste.
<sup>[Powrót do spisu treści](#Powrót-do-spisu-treści)</sup>
### Ustaw `display: none` na Podziały linii używane jako odstępy
Jak zauważył [Harry Roberts](https://twitter.com/csswizardry/status/1170835532584235008), może to pomóc zapobiec korzystaniu przez użytkowników CMS z dodatkowych podziałów linii dla odstępów:
```css
br + br {
display: none;
}
```
<sup>[Powrót do spisu treści](#Powrót-do-spisu-treści)</sup>
## Wsparcie
Wersje aktualne Chrome, Firefox, Safari, e Edge.
<sup>[Powrót do spisu treści](#Powrót-do-spisu-treści)</sup>
================================================
FILE: translations/pt-BR/README.md
================================================
<div align="center">
<img src="../../assets/img/bulb.svg" width="200" alt="light bulb icon">
</div>
# CSS Protips [](https://github.com/sindresorhus/awesome)
Uma coleção de dicas para aumentar suas habilidades no CSS.
> Dê uma olhada em mais algumas [listas fantásticas](https://github.com/sindresorhus/awesome/) mantidas por [@sindresorhus](https://github.com/sindresorhus/).
## Índice
* [Protips](#protips)
* [Suporte](#suporte)
* [Guia de Contribuições](../../CONTRIBUTING.md)
## Protips
1. [Use um Reset CSS](#use-um-reset-css)
1. [Herde o `box-sizing`](#herde-o-box-sizing)
1. [Use `unset` em vez de redefinir todas as propriedades](#use-unset-em-vez-de-redefinir-todas-as-propriedades)
1. [Use `:not()` para Aplicar/Remover Bordas](#use-not-para-aplicarremover-bordas)
1. [Verifique se a fonte está instalada localmente](#verifique-se-a-fonte-está-instalada-localmente)
1. [Defina o `line-height` no `body`](#defina-o-line-height-no-body)
1. [Definir `:focus` para elementos de formulário](#definir-focus-para-elementos-de-formulário)
1. [Alinhe Elementos Verticalmente](#alinhe-elementos-verticalmente)
1. [Use `aspect-ratio` ao invés de Height/Width](#use-aspect-ratio-ao-invés-de-heightwidth)
1. [Listas Separadas por Vírgula](#listas-separadas-por-vírgula)
1. [Selecione Itens Usando `nth-child` Negativo](#selecione-itens-usando-nth-child-negativo)
1. [Ícones SVG](#Ícones-svg)
1. [Use o Seletor "Lobotomized Owl"](#use-o-seletor-lobotomized-owl)
1. [Sliders em CSS com `max-height`](#sliders-em-css-com-max-height)
1. [Tabelas com Células de Tamanho Igual](#tabelas-com-células-de-tamanho-igual)
1. [Esqueça as "Margin Hacks", use Flexbox](#esqueça-as-margin-hacks-use-flexbox)
1. [Use Seletores de Atributo em Links Vazios](#use-seletores-de-atributo-em-links-vazios)
1. [Controle Melhor a Especificidade Com `:is()`](#controle-melhor-a-especificidade-com-is)
1. [Estilize Links "Default"](#estilize-links-default)
1. [Div com Proporção de Tela Fixa](#div-com-proporção-de-tela-fixa)
1. [Estilize Imagens Quebradas](#estilize-imagens-quebradas)
1. [Use `rem` para Definir Tamanhos Globais; Use `em` para Definir Tamanhos Locais](#use-rem-para-definir-tamanhos-globais-use-em-para-definir-tamanhos-locais)
1. [Esconda Vídeos em Autoplay Que Não Estejam no Mudo](#esconda-vídeos-em-autoplay-que-não-estejam-no-mudo)
1. [Use `:root` para uma Tipografia Flexível](#use-root-para-uma-tipografia-flexível)
1. [Defina `font-size` em Elementos de Formulário para uma Melhor Experiência Mobile](#defina-font-size-em-elementos-de-formulário-para-uma-melhor-experiência-mobile)
1. [Use eventos de ponteiro para controlar eventos do mouse](#use-eventos-de-ponteiro-para-controlar-eventos-do-mouse)
1. [Definir `display: none` em quebras de linha usadas como espaçamento](#definir-display-none-em-quebras-de-linha-usadas-como-espaçamento)
1. [Use `:empty` para Esconder Eelementos HTML Vazios](#use-empty-para-esconder-elementos-html-vazios)
### Use um Reset CSS
Resetar o CSS vai te ajudar a manter a consistência de estilo em diferentes navegadores com um ponto de partida limpo para elementos de estilo. Você pode usar a biblioteca de reset CSS como [Normalize](http://necolas.github.io/normalize.css/), ou se preferir, usar uma abordagem mais simplificada.:
```css
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
```
Agora os elementos estarão sem margens, preenchimento e `box-sizing`. Te permitindo gerenciar o layout com o seu CSS.
#### [Exemplo](http://codepen.io/AllThingsSmitty/pen/kkrkLL)
**Nota:** Se você seguir a dica [Herde o box-sizing](#herde-o-box-sizing) abaixo você pode optar por não incluir a propriedade `box-sizing` em sua redefinição de CSS.
<sup>[voltar ao índice](#Índice)</sup>
### Herde o `box-sizing`
Faça com que o `box-sizing` seja herdado do `html`:
```css
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
```
Assim fica fácil de alterar o `box-sizing` em plugins ou outros componentes que tenham um comportamento diferente.
#### [Exemplo](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)
<sup>[voltar ao índice](#Índice)</sup>
### Use `unset` em vez de redefinir todas as propriedades
Ao redefinir as propriedades de um elemento, não é necessário redefinir cada propriedade individual:
```css
button {
background: none;
border: none;
color: inherit;
font: inherit;
outline: none;
padding: 0;
}
```
Você pode especificar todas as propriedades de um elemento usando a abreviação `all`. Definir o valor como `unset` altera as propriedades de um elemento para seus valores iniciais:
```css
button {
all: unset;
}
```
<sup>[voltar ao índice](#Índice)</sup>
### Use `:not()` para Aplicar/Remover Bordas
Ao invés de colocar a borda…
```css
/* adiciona a borda */
.nav li {
border-right: 1px solid #666;
}
```
…para então remover no último elemento…
```css
/* remove a borda */
.nav li:last-child {
border-right: none;
}
```
…utilize a _pseudo-classe_ `:not()` para aplicar a borda apenas nos elementos corretos:
```css
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
```
O seletor CSS define a borda da maneira que um humano a descreveria.
#### [Exemplo](http://codepen.io/AllThingsSmitty/pen/LkymvO)
<sup>[voltar ao índice](#Índice)</sup>
### Verifique se a fonte está instalada localmente
Você pode verificar se uma fonte está instalada localmente antes de buscá-la remotamente, o que também é uma boa dica de desempenho.
```css
@font-face {
font-family: "Dank Mono";
src:
/* Full name */
local("Dank Mono"),
/* Postscript name */
local("Dank-Mono"),
/* Otherwise, download it! */
url("//...a.server/fonts/DankMono.woff");
}
code {
font-family: "Dank Mono", system-ui-monospace;
}
```
Dica de chapéu para Adam Argyle por compartilhar este protip e [exemplo](https://codepen.io/argyleink/pen/VwYJpgR).
<sup>[voltar ao índice](#Índice)</sup>
### Defina o `line-height` no `body`
Você não precisa adicionar o `line-height` para cada `<p>`, `<h*>`, _et al_. separadamente. Apenas adicione ao `body`:
```css
body {
line-height: 1.5;
}
```
Dessa maneira elementos de texto vão herdar o `line-height` do `body`.
#### [Exemplo](http://codepen.io/AllThingsSmitty/pen/VjbdYd)
<sup>[voltar ao índice](#Índice)</sup>
### Definir `:focus` para elementos de formulário
Os usuários de teclado com visão dependem do foco para determinar onde os eventos de teclado vão na página. Faça com que os elementos do formulário se foquem e sejam consistentes com a implementação padrão do navegador:
```css
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
box-shadow: none;
outline: #000 dotted 2px;
outline-offset: .05em;
}
```
#### [Exemplo](https://codepen.io/AllThingsSmitty/pen/ePzoOP/)
<sup>[voltar ao índice](#Índice)</sup>
### Alinhe Elementos Verticalmente
Que bruxaria é essa? Não é bruxaria! Você realmente pode centralizar elementos verticalmente:
```css
html,
body {
height: 100%;
margin: 0;
}
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
```
...e também com CSS Grid:
```css
body {
display: grid;
height: 100vh;
margin: 0;
place-items: center center;
}
```
Isso não resolveu seu problema? O site CSS-Tricks tem [um guia completo](https://css-tricks.com/centering-css-complete-guide/) de como centralizar elementos com CSS.
#### [Exemplo](http://codepen.io/AllThingsSmitty/pen/GqmGqZ)
<sup>[voltar ao índice](#Índice)</sup>
### Use `aspect-ratio` ao Invés de Height/Width
A propriedade `aspect-ratio` permite que você dimensione elementos facilmente e mantem a proporção largura-altura (width-to-height) consistênte. Isso é incrivelmente útil em web design responsivo para prevenir alterações no layout. Use `object-fit` com isso para prevenir quebras no layout se os valores de altura/largura das images mudar.
```css
img {
aspect-ratio: 16 / 9; /* width / height */
object-fit: cover;
}
```
Aprenda mais sobre a propriedade `aspect-ratio` neste [web.dev post](https://web.dev/articles/aspect-ratio).
#### [Demo](https://codepen.io/AllThingsSmitty/pen/MWxwoNx/)
> [!NOTA]
> `aspect-ratio` e `object-fit` não são suportados em IE11.
<sup>[voltar ao índice](#Índice)</sup>
### Listas Separadas por Vírgula
Transforme listas normais em listas separadas por vírgula:
```css
ul > li:not(:last-child)::after {
content: ",";
}
```
Utilize a _pseudo-classe_ `:not()` para evitar que a vírgula seja adicionada depois do último item.
**Aviso:** Se considerarmos acessibilidade essa dica pode não ser ideal, especialmente para usuários de leitores de tela. Além disso, copiar e/ou colar não funcionam em conteúdo criado com CSS. Proceda com cautela.
<sup>[voltar ao índice](#Índice)</sup>
### Selecione Itens Usando `nth-child` Negativo
Utilize `nth-child` negativo no CSS para selecionar itens de 1 a n.
```css
li {
display: none;
}
/* mostrar itens de 1 a 3 */
li:nth-child(-n+3) {
display: block;
}
```
Já que você aprendeu um pouquinho sobre como usar a _pseudo-classe_ [using `:not()`](#use-not-to-applyunapply-borders-on-navigation), você pode tentar:
```css
/* selecione todos os itens, exceto os primeiros 3 e exiba-os */
li:not(:nth-child(-n+3)) {
display: none;
}
```
Mais fácil que isso só dois disso.
#### [Exemplo](http://codepen.io/AllThingsSmitty/pen/WxjKZp)
<sup>[voltar ao índice](#Índice)</sup>
### Ícones SVG
Não tem porque você não usar ícones em SVG:
```css
.logo {
background: url("logo.svg");
}
```
A vantagem do SVG é que o ícone fica bom em qualquer resolução, além de ter suporte amplo em todos os browsers [desde o IE9](http://caniuse.com/#search=svg). Agora você pode se desfazer dos seus arquivos .png, .jpg, ou ainda .gif-jif-qissomano.
**Aviso:** Se você tem botões feitos apenas com ícones SVG, a dica a seguir o ajudará a manter a acessibilidade:
```css
.no-svg .icon-only::after {
content: attr(aria-label);
}
```
<sup>[voltar ao índice](#Índice)</sup>
### Use o Seletor "Lobotomized Owl"
O nome é super estranho (coruja lobotomizada), mas o uso do seletor universal (`*`) com o seletor adjacente (`+`) pode ser muito útil:
```css
* + * {
margin-top: 1.5em;
}
```
Nesse exemplo, todos os elementos acompanhados de outros elementos recebem `margin-top: 1.5em`.
Para mais exemplos utilizando o seletor "lobotomized owl", leia [o artigo escrito por Heydon Pickering](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) no site *A List Apart*.
#### [Exemplo](http://codepen.io/AllThingsSmitty/pen/grRvWq)
<sup>[voltar ao índice](#Índice)</sup>
### Sliders em CSS com `max-height`
Crie _sliders_ usando apenas CSS com `max-height` e `overflow-y: hidden`:
```css
.slider {
max-height: 200px;
overflow-y: hidden;
width: 300px;
}
.slider:hover {
max-height: 600px;
overflow-y: scroll;
}
```
O elemento se expandirá ao valor definido no `max-height` no _hover_ e você terá um _slider_ devido ao uso do overflow.
<sup>[voltar ao índice](#Índice)</sup>
### Tabelas com Células de Tamanho Igual
Não tem nada mais chato do que trabalhar com tabelas, mas você pode usar `table-layout: fixed` para manter as células do mesmo tamanho:
```css
.calendar {
table-layout: fixed;
}
```
Tabelas sem dor de cabeça.
#### [Exemplo](http://codepen.io/AllThingsSmitty/pen/jALALm)
<sup>[voltar ao índice](#Índice)</sup>
### Esqueça as "Margin Hacks", use Flexbox
Quando definir o espaçamento entre as colunas, você pode deixar os seletores `nth-`, `first-`, e `last-child` de lado e usar a propriedade `space-between` do flexbox:
```css
.list {
display: flex;
justify-content: space-between;
}
.list .person {
flex-basis: 23%;
}
```
Assim as colunas ficam espaçadas uniformemente.
<sup>[voltar ao índice](#Índice)</sup>
### Use Seletores de Atributo em Links Vazios
Mostre links para tags `<a>` vazias que possuem o atributo `href`:
```css
a[href^="http"]:empty::before {
content: attr(href);
}
```
Mão na roda.
#### [Exemplo](http://codepen.io/AllThingsSmitty/pen/zBzXRx)
<sup>[voltar ao índice](#Índice)</sup>
### Controle Melhor a Especificidade Com `:is()`
A pseudoclasse `:is()` é usada para marca vários seletores de uma só vez, reduzindo a redundância e melhorando a legibilidade do código. Isso é extremamente útil para escrever seletores grandes de uma forma mais compacta.
```css
:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) {
color: green;
}
```
O conjunto de regras acima é equivalente às seguintes regras do seletor de números...
```css
section h1, section h2, section h3, section h4, section h5, section h6,
article h1, article h2, article h3, article h4, article h5, article h6,
aside h1, aside h2, aside h3, aside h4, aside h5, aside h6,
nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 {
color: green;
}
```
#### [Demo](https://codepen.io/AllThingsSmitty/pen/rNRVxdx)
> [!NOTA]
> A pseudoclasse `:is()` não é suportada em IE11.
<sup>[voltar ao índice](#Índice)</sup>
### Estilize Links "Default"
Defina estilos para links "default":
```css
a[href]:not([class]) {
color: #008000;
text-decoration: underline;
}
```
Dessa forma, links que são inseridos por CMS – que normalmente não possuem o atributo `class` – vão ser estilizados sem comprometer outros links.
<sup>[voltar ao índice](#Índice)</sup>
### Div com Proporção de Tela Fixa
Para criar uma div com proporção de tela fixa, tudo que você precisa fazer é adicionar `padding` (`top` ou `bottom`) a div pai:
```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%;
}
```
Se você usar 20% no `padding` a altura da div vai ser igual a 20% de sua largura. Independente da largura do _viewport_, a div filho vai sempre manter a proporção de tela (100% / 20% = 5:1).
#### [Exemplo](http://codepen.io/AllThingsSmitty/pen/jALZvE)
<sup>[voltar ao índice](#Índice)</sup>
### Estilize Imagens Quebradas
Faça com que imagens quebradas fiquem esteticamente mais agradáveis com um pouquinho de CSS:
```css
img {
display: block;
font-family: sans-serif;
font-weight: 300;
height: auto;
line-height: 2;
position: relative;
text-align: center;
width: 100%;
}
```
Agora adicione regras com _pseudo-elementos_ para mostrar uma mensagem e a URL da imagem quebrada:
```css
img::before {
content: "Desculpe, a imagem abaixo não pode ser carregada :(";
display: block;
margin-bottom: 10px;
}
img::after {
content: "(url: " attr(src) ")";
display: block;
font-size: 12px;
}
```
Leia mais sobre como estilizar imagens quebradas no [artigo original](http://bitsofco.de/styling-broken-images/) por [Ire Aderinokun](https://github.com/ireade/).
<sup>[voltar ao índice](#Índice)</sup>
### Use `rem` para Definir Tamanhos Globais; Use `em` para Definir Tamanhos Locais
Depois de definir o tamanho de fonte base na raíz (`html { font-size: 100%; }`), defina o tamanho de fonte para elementos de texto utilizando `em`:
```css
h2 {
font-size: 2em;
}
p {
font-size: 1em;
}
```
Então defina o tamanho da fonte de módulos utilizando `rem`:
```css
article {
font-size: 1.25rem;
}
aside .module {
font-size: .9rem;
}
```
Assim fica mais fácil de estilizar e manter cada módulo, além de ser flexível.
<sup>[voltar ao índice](#Índice)</sup>
### Esconda Vídeos em Autoplay Que Não Estejam no Mudo
Ótima dica para uma _stylesheet_ personalizada. Evite sobrecarregar o usuário com som de vídeos em autoplay. Se o som não estiver no mudo, esconda o vídeo:
```css
video[autoplay]:not([muted]) {
display: none;
}
```
E aqui mais uma entre as muitas vantagens de usar a _pseudo-classe_ [`:not()`](#use-not-to-applyunapply-borders-on-navigation).
<sup>[voltar ao índice](#Índice)</sup>
### Use `:root` para uma Tipografia Flexível
O tamanho de fonte de um site _responsivo_ deveria ser ajustável de acordo com cada _viewport_. Você pode calcular o tamanho da fonte baseado na largura e na altura do _viewport_ usando `:root`:
```css
:root {
font-size: calc(1vw + 1vh + .5vmin);
}
```
Assim você pode utilizar a unidade de medida `root em` baseada no valor calculado por `:root`:
```css
body {
font: 1rem/1.6 sans-serif;
}
```
#### [Exemplo](http://codepen.io/AllThingsSmitty/pen/XKgOkR)
<sup>[voltar ao índice](#Índice)</sup>
### Defina `font-size` em Elementos de Formulário para uma Melhor Experiência Mobile
Para evitar zoom indesejado em elementos de formulários de navegadores mobile (iOS Safari, _et al_) quando um `<select>` é selecionado, adicione `font-size` no seletor:
```css
input[type="text"],
input[type="number"],
select,
textarea {
font-size: 16px;
}
```
:dancer:
<sup>[voltar ao índice](#Índice)</sup>
### Use eventos de ponteiro para controlar eventos do mouse
[Eventos de ponteiro](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) permitem que você especifique como o mouse interage com o elemento que está tocando. Para desativar o evento de ponteiro padrão em um botão, por exemplo:
```css
button:disabled {
opacity: .5;
pointer-events: none;
}
```
É simples assim.
<sup>[voltar ao índice](#Índice)</sup>
### Definir `display: none` em quebras de linha usadas como espaçamento
Como [Harry Roberts apontou](https://twitter.com/csswizardry/status/1170835532584235008), isso pode ajudar a impedir que os usuários do CMS usem quebras de linha extras para espaçamento:
```css
br + br {
display: none;
}
```
<sup>[voltar ao índice](#Índice)</sup>
### Use `:empty` para Esconder Elementos HTML Vazios
Se você tem elementos HTML vazios, ou seja, o conteúdo ainda tem que ser definido ou pela CMS ou injetado dinamicamente (e.g., `<p class="error-message"></p>`) e está criando espaços indesejáveis no seu layout, use a pseudoclasse `:empty` para esconder os elementos no layout.
```css
:empty {
display: none;
}
```
> [!NOTA]
> Lembre-se que os elementos com espaços em branco não são considerados vazios, e.g., `<p class="error-message"> </p>`.
<sup>[voltar ao índice](#Índice)</sup>
## Suporte
Versões atuais do Chrome, Firefox, Safari, e Edge.
<sup>[voltar ao índice](#Índice)</sup>
================================================
FILE: translations/pt-PT/README.md
================================================
<p align="center">
<img src="../../assets/img/bulb.svg" alt="light bulb icon">
</p>
# CSS Protips [](https://github.com/sindresorhus/awesome)
Uma coleção de dicas para aumentar as tuas habilidades no CSS.
> Dá uma olhada em outras [listas fantásticas](https://github.com/sindresorhus/awesome/) mantidas por [@sindresorhus](https://github.com/sindresorhus/).
## Índice
* [Protips](#protips)
* [Suporte](#suporte)
* [Contribuições](../../CONTRIBUTING.md)
## Protips
1. [Usa um Reset CSS](#usa-um-reset-css)
1. [Herda o `box-sizing`](#herda-o-box-sizing)
1. [Use `unset` em vez de redefinir todas as propriedades](#use-unset-em-vez-de-redefinir-todas-as-propriedades)
1. [Usa `:not()` para Aplicar/Remover Bordas](#usa-not-para-aplicarremover-bordas)
1. [Verifique se a fonte está instalada localmente](#verifique-se-a-fonte-está-instalada-localmente)
1. [Define o `line-height` no `body`](#define-o-line-height-no-body)
1. [Alinha Elementos Verticalmente](#alinha-elementos-verticalmente)
1. [Definir `:focus` para elementos de formulário](#definir-focus-para-elementos-de-formulário)
1. [Listas Separadas por Vírgula](#listas-separadas-por-vírgula)
1. [Seleciona Itens Usando `nth-child` Negativo](#seleciona-itens-usando-nth-child-negativo)
1. [Ícones SVG](#Ícones-svg)
1. [Usa o Seletor "Lobotomized Owl"](#usa-o-seletor-lobotomized-owl)
1. [Sliders em CSS com `max-height`](#sliders-em-css-com-max-height)
1. [Tabelas com Células de Tamanho Igual](#tabelas-com-células-de-tamanho-igual)
1. [Esquece as "Margin Hacks", use Flexbox](#esquece-as-margin-hacks-usa-a-flexbox)
1. [Usa Seletores de Atributo em Links Vazios](#usa-seletores-de-atributo-em-links-vazios)
1. [Estiliza Links "Default"](#estiliza-links-default)
1. [Div com Proporção de Tela Fixa](#div-com-proporção-de-tela-fixa)
1. [Estiliza Imagens Quebradas](#estiliza-imagens-quebradas)
1. [
gitextract_nmqogxqr/
├── CODE-OF-CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
└── 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
Condensed preview — 19 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (281K chars).
[
{
"path": "CODE-OF-CONDUCT.md",
"chars": 2347,
"preview": "# Contributor Code of Conduct\n\nAs contributors and maintainers of this project, and in the interest of fostering an open"
},
{
"path": "CONTRIBUTING.md",
"chars": 1829,
"preview": "# Contribution Guidelines\n\nPlease note that this project is released with a [Contributor Code of Conduct](CODE-OF-CONDUC"
},
{
"path": "LICENSE",
"chars": 6554,
"preview": "CC0 1.0 Universal\n\nStatement of Purpose\n\nThe laws of most jurisdictions throughout the world automatically confer\nexclus"
},
{
"path": "README.md",
"chars": 19276,
"preview": "<div align=\"center\">\n <img src=\"./assets/img/bulb.svg\" width=\"200\" alt=\"light bulb icon\">\n</div>\n\n# CSS Protips [![Awes"
},
{
"path": "translations/de-DE/README.md",
"chars": 18011,
"preview": "<p align=\"center\">\n <img src=\"../../assets/img/bulb.svg\" width=\"200\" alt=\"light bulb icon\">\n</p>\n\n# CSS Profi-Tipps [!["
},
{
"path": "translations/es-ES/README.md",
"chars": 18089,
"preview": "<p align=\"center\">\n <img src=\"../../assets/img/bulb.svg\" alt=\"light bulb icon\">\n</p>\n\n# Consejos Profesionales para CSS"
},
{
"path": "translations/fr-FR/README.md",
"chars": 18434,
"preview": "<p align=\"center\">\n <img src=\"../../assets/img/bulb.svg\" alt=\"light bulb icon\">\n</p>\n\n# Conseils d’expert en CSS [![Awe"
},
{
"path": "translations/gr-GR/README.md",
"chars": 17740,
"preview": "<p align=\"center\">\n <img src=\"../../assets/img/bulb.svg\" width=\"200\" alt=\"light bulb icon\">\n</p>\n\n# Εξελιγμένες συμβουλ"
},
{
"path": "translations/gu-IND/README.md",
"chars": 15670,
"preview": "<p align=\"center\">\n <img src=\"../../assets/img/bulb.svg\" width=\"200\" alt=\"light bulb icon\">\n</p>\n\n# CSS પ્રોપ્સ [![Awes"
},
{
"path": "translations/it-IT/README.md",
"chars": 17006,
"preview": "<p align=\"center\">\n <img src=\"../../assets/img/bulb.svg\" alt=\"light bulb icon\">\n</p>\n\n# CSS suggerimenti per esperti [!"
},
{
"path": "translations/ja-JP/README.md",
"chars": 12833,
"preview": "<p align=\"center\">\n <img src=\"../../assets/img/bulb.svg\" alt=\"light bulb icon\">\n</p>\n\n# CSSの便利な小技・テクニックのまとめ [![Awesome]"
},
{
"path": "translations/ko-KR/readme.md",
"chars": 13101,
"preview": "<p align=\"center\">\n <img src=\"../../assets/img/bulb.svg\" width=\"200\" alt=\"light bulb icon\">\n</p>\n\n# CSS 프로팁 [![Awesome]"
},
{
"path": "translations/pl-PL/README.md",
"chars": 16733,
"preview": "<p align=\"center\">\n <img src=\"../../assets/img/bulb.svg\" width=\"200\" alt=\"light bulb icon\">\n</p>\n\n# Wskazówki CSS [![Aw"
},
{
"path": "translations/pt-BR/README.md",
"chars": 18439,
"preview": "<div align=\"center\">\n <img src=\"../../assets/img/bulb.svg\" width=\"200\" alt=\"light bulb icon\">\n</div>\n\n# CSS Protips [!["
},
{
"path": "translations/pt-PT/README.md",
"chars": 16002,
"preview": "<p align=\"center\">\n <img src=\"../../assets/img/bulb.svg\" alt=\"light bulb icon\">\n</p>\n\n# CSS Protips [![Awesome](https:/"
},
{
"path": "translations/ru-RU/README.md",
"chars": 19370,
"preview": "<p align=\"center\">\n <img src=\"../../assets/img/bulb.svg\" alt=\"light bulb icon\">\n</p>\n\n# Советы профессионалов CSS [![Aw"
},
{
"path": "translations/vn-VN/README.md",
"chars": 16089,
"preview": "<p align=\"center\">\n <img src=\"../../assets/img/bulb.svg\" width=\"200\" alt=\"light bulb icon\">\n</p>\n\n# CSS Protips [![Awes"
},
{
"path": "translations/zh-CN/README.md",
"chars": 9897,
"preview": "<p align=\"center\">\n <img src=\"../../assets/img/bulb.svg\" alt=\"light bulb icon\">\n</p>\n\n# CSS 专业技巧 [![Awesome](https://cd"
},
{
"path": "translations/zh-TW/README.md",
"chars": 10766,
"preview": "<p align=\"center\">\n <img src=\"../../assets/img/bulb.svg\" alt=\"light bulb icon\">\n</p>\n\n# CSS 專家密技 [![Awesome](https://cd"
}
]
About this extraction
This page contains the full source code of the AllThingsSmitty/css-protips GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 19 files (261.9 KB), approximately 87.4k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.