Skip to content

Commit 39c3c29

Browse files
AllThingsSmittyAllThingsSmitty
committed
Added links to ToC 🚠
1 parent be9b3c3 commit 39c3c29

File tree

4 files changed

+159
-1
lines changed

4 files changed

+159
-1
lines changed

‎translations/es-ES/README.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ Una colección de consejos para ayudar a llevar su pro habilidades CSS.
99
> Para otros grandes listas echa un vistazo a [@sindresorhus](https://github.com/sindresorhus/)'s lista curada de [listas impresionantes](https://github.com/sindresorhus/awesome/).
1010
1111

12+
<div id="table-of-contents"></div>
1213
## Tabla de contenido
1314

1415
* [Consejos Profesionales](#protips)
@@ -71,6 +72,8 @@ En lugar de poner en la frontera...
7172

7273
Claro, se puede usar `li.nav + li` o incluso `li.nav: li` primer hijo ~, pero con `:not()` la intención es muy clara y el selector CSS define la frontera entre la forma en que un ser humano lo describiría.
7374

75+
<sup>[volver al índice de contenidos](#table-of-contents)</sup>
76+
7477

7578
<div id="add-line-height-to-body"></ div>
7679
### Añadir `line-height` a `body`
@@ -85,6 +88,8 @@ body {
8588

8689
De esta manera los elementos textuales pueden heredar de `body` fácilmente.
8790

91+
<sup>[volver al índice de contenidos](#table-of-contents)</sup>
92+
8893

8994
<div id="vertically-center-anything"></div>
9095
### Cualquier cosa verticalmente-Centro
@@ -110,6 +115,8 @@ body {
110115

111116
**Nota:** ve por alguna [con errores behavior](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) con Flexbox en IE11.
112117

118+
<sup>[volver al índice de contenidos](#table-of-contents)</sup>
119+
113120

114121
<div id="comma-separated-links"></div>
115122
### Listas separadas por comas
@@ -126,6 +133,8 @@ Utilice el `:not()` pseudo-clase por lo que no se añade una coma al último ele
126133

127134
**Nota:** Esta punta puede no ser ideal para la accesibilidad, la pantalla específicamente lectores. Y copiar / pegar desde el navegador no funciona con el contenido generado por CSS. Proceda con precaución.
128135

136+
<sup>[volver al índice de contenidos](#table-of-contents)</sup>
137+
129138

130139
<div id="select-items-using-negative-nth-child"></div>
131140
### Seleccionar elementos Usando negativo `nth-child`
@@ -154,6 +163,8 @@ li:not(:nth-child(-n+3)) {
154163

155164
Así que era bastante fácil.
156165

166+
<sup>[volver al índice de contenidos](#table-of-contents)</sup>
167+
157168

158169
<div id="use-svg-for-icons"></div>
159170
### Utilizar SVG para iconos
@@ -176,6 +187,8 @@ SVG funciona bien para todos los tipos de resolución y es compatible con todos
176187
}}
177188
```
178189

190+
<sup>[volver al índice de contenidos](#table-of-contents)</sup>
191+
179192

180193
<div id="use-the-lobotomized-owl-selector"></div>
181194
### Utilice la herramienta de selección "lobotomizó búho"
@@ -192,6 +205,8 @@ En este ejemplo, todos los elementos del flujo del documento que siguen otros el
192205

193206
Para más información sobre el selector "buho lobotomized", lee [post de Heydon Pickering](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) en *A List Apart*.
194207

208+
<sup>[volver al índice de contenidos](#table-of-contents)</sup>
209+
195210

196211
<div id="use-max-height-for-pure-css-sliders"></div>
197212
### Use `max-height` característica de Sliders puro CSS
@@ -213,6 +228,8 @@ Implementar controles deslizantes CSS sólo para el uso de `max-height` caracter
213228

214229
El elemento se expande para el valor `max-height` característica en vuelo estacionario y la corredera se muestra como resultado de la abundancia.
215230

231+
<sup>[volver al índice de contenidos](#table-of-contents)</sup>
232+
216233

217234
<div id="inherit-box-sizing"></div>
218235
### Heredar `box-sizing`
@@ -231,6 +248,8 @@ html {
231248

232249
Esto hace que sea más fácil cambiar `box-sizing` en plugins u otros componentes que aprovechan otros comportamientos.
233250

251+
<sup>[volver al índice de contenidos](#table-of-contents)</sup>
252+
234253

235254
<div id="equal-width-table-cells"></div>
236255
### Celdas de la tabla de igual ancho
@@ -245,6 +264,8 @@ Las tablas pueden ser un dolor de trabajar con lo que trate de usar `table-layou
245264

246265
Disposiciones de la tabla sin dolor.
247266

267+
<sup>[volver al índice de contenidos](#table-of-contents)</sup>
268+
248269

249270
<div id="get-rid-of-margin-hacks-with-flexbox"></div>
250271
### Deshacerse del margen Hacks Con Flexbox
@@ -264,6 +285,8 @@ Cuando se trabaja con las canaletas de columna que puede deshacerse de `enésimo
264285

265286
Ahora canaletas de columna siempre aparecen uniformemente espaciadas.
266287

288+
<sup>[volver al índice de contenidos](#table-of-contents)</sup>
289+
267290

268291
<div id="use-attribute-selectors-with-empty-links"></div>
269292
### Selectores de atributo con el uso Enlaces vacíos
@@ -278,6 +301,8 @@ a[href^="http"]:empty::before {
278301

279302
Eso es bastante conveniente.
280303

304+
<sup>[volver al índice de contenidos](#table-of-contents)</sup>
305+
281306

282307
<div id="style-default-links"></div>
283308
### Enlaces de estilo "por defecto"
@@ -292,6 +317,8 @@ a[href^="http"]:empty::before {
292317

293318
Ahora 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.
294319

320+
<sup>[volver al índice de contenidos](#table-of-contents)</sup>
321+
295322

296323
<div id="consistent-vertical-rhythm"></div>
297324
### Consistente ritmo vertical
@@ -306,6 +333,8 @@ Utilice un selector universales (`*`) dentro de un elemento para crear un ritmo
306333

307334
Ritmo vertical consistente proporciona una estética visual que hace que el contenido mucho más legible.
308335

336+
<sup>[volver al índice de contenidos](#table-of-contents)</sup>
337+
309338

310339
<div id="intrinsic-ratio-boxes"></div>
311340
### Cajas Relación intrínsecas
@@ -331,6 +360,8 @@ Para crear un cuadro con una relación intrínseca, todo lo que tiene que hacer
331360

332361
El uso de 20% para el relleno hace que la altura de la caja igual a 20% de su anchura. No importa el ancho de la ventana, el div niño va a mantener su relación de aspecto (100% / 20% = 5: 1).
333362

363+
<sup>[volver al índice de contenidos](#table-of-contents)</sup>
364+
334365

335366
<div id="style-broken-images"></div>
336367
### Imágenes rotas Estilo
@@ -368,6 +399,8 @@ img:after {
368399

369400
Aprender más sobre el estilo de este patrón en [Iré Aderinokun](https://github.com/ireade/)'s [post original](http://bitsofco.de/styling-broken-images/).
370401

402+
<sup>[volver al índice de contenidos](#table-of-contents)</sup>
403+
371404

372405
<div id="use-rem-for-global-sizing-use-em-for-local-sizing"></div>
373406
### Use `rem` para Global Dimensionamiento; Use `em` para el dimensionamiento local
@@ -398,6 +431,8 @@ aside .module {
398431

399432
Ahora cada módulo se divide en compartimientos y más fácil de peinar, más fácil de mantener, y flexible.
400433

434+
<sup>[volver al índice de contenidos](#table-of-contents)</sup>
435+
401436

402437
<div id="hide-autoplay-videos-that-arent-muted"></div>
403438
### Esconder Reproducción automática los vídeos que no estén anulados
@@ -412,6 +447,8 @@ video[autoplay]:not([muted]) {
412447

413448
Una vez más, nos estamos tomando ventaja de usar el [`:not()`](#use-not-to-applyunapply-borders-on-navigation) pseudo-clase.
414449

450+
<sup>[volver al índice de contenidos](#table-of-contents)</sup>
451+
415452

416453
<div id="use-root-for-flexible-type"></div>
417454
### Utilizar `:root` para el tipo flexible
@@ -432,6 +469,8 @@ body {
432469
}
433470
```
434471

472+
<sup>[volver al índice de contenidos](#table-of-contents)</sup>
473+
435474

436475
## Apoyo
437476

‎translations/fr-FR/README.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ Une collection de conseils pour aider à prendre vos compétences CSS pro.
99
> Pour les autres grandes listes vérifier [@sindresorhus](https://github.com/sindresorhus/) de la liste curated des [listes impressionnantes](https://github.com/sindresorhus/awesome/).
1010
1111

12+
<div id="table-of-contents"></div>
1213
## Table des matières
1314

1415
* [Conseils Professionnels](#protips)
@@ -71,6 +72,8 @@ Au lieu de mettre à la frontière...
7172

7273
Bien sûr, vous pouvez utiliser `.nav li + li` ou même `.nav li:first-child ~ li`, mais avec `:not()` l'intention est très claire et le sélecteur CSS définit la frontière comme un être humain serait le décrire.
7374

75+
<sup>[retour à la table des matières](#table-of-contents)</sup>
76+
7477

7578
<div id="add-line-height-to-body"></div>
7679
### Ajouter `line-height` à `body`
@@ -85,6 +88,8 @@ body {
8588

8689
De cette façon, les éléments textuels peuvent hériter de `body` facilement.
8790

91+
<sup>[retour à la table des matières](#table-of-contents)</sup>
92+
8893

8994
<div id="vertically-center-anything"></div>
9095
### Verticalement-Center Tout
@@ -110,6 +115,8 @@ Vous voulez centrer autre chose? Verticalement, horizontalement...quoi que ce so
110115

111116
**Remarque:** Surveillez certains [poussette behavior](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) avec flexBox dans IE11.
112117

118+
<sup>[retour à la table des matières](#table-of-contents)</sup>
119+
113120

114121
<div id="comma-separated-lists"></div>
115122
### Listes séparées par des virgules
@@ -126,6 +133,8 @@ Utilisez le `:not()` pseudo-classe donc pas une virgule est ajoutée au dernier
126133

127134
**Remarque:** Cette astuce peut ne pas être idéal pour l'accessibilité, l'écran spécifiquement lecteurs. Et copier / coller à partir du navigateur ne fonctionne pas avec le contenu généré par CSS. Procéder avec prudence.
128135

136+
<sup>[retour à la table des matières](#table-of-contents)</sup>
137+
129138

130139
<div id="select-items-using-negative-nth-child"></div>
131140
### Sélectionnez éléments à l'aide négative `nth-child`
@@ -154,6 +163,8 @@ li:not(:nth-child(-n+3)) {
154163

155164
Eh bien, ce fut assez facile.
156165

166+
<sup>[retour à la table des matières](#table-of-contents)</sup>
167+
157168

158169
<div id="use-svg-for-icons"></div>
159170
### Utiliser SVG pour Icons
@@ -176,6 +187,8 @@ SVG échelles bien pour tous les types de résolution et est pris en charge dans
176187
}
177188
```
178189

190+
<sup>[retour à la table des matières](#table-of-contents)</sup>
191+
179192

180193
<div id="use-the-lobotomized-owl-selector"></div>
181194
### Utilisez le sélecteur "lobotomisé Owl"
@@ -192,6 +205,8 @@ Dans cet exemple, tous les éléments dans le flux du document qui suivent d'aut
192205
193206
Pour en savoir plus sur la "chouette lobotomisé" sélecteur, lire [le poste de Heydon Pickering](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) sur *A List Apart*.
194207
208+
<sup>[retour à la table des matières](#table-of-contents)</sup>
209+
195210
196211
<div id="use-max-height-for-pure-css-sliders"></div>
197212
### Utilisez `max-height` pour Sliders CSS pur
@@ -213,6 +228,8 @@ Mettre en œuvre des curseurs CSS uniquement en utilisant `max-height` avec trop
213228

214229
L'élément se dilate à la valeur `max-height` sur le vol stationnaire et le curseur se affiche à la suite du débordement.
215230

231+
<sup>[retour à la table des matières](#table-of-contents)</sup>
232+
216233

217234
<div id="inherit-box-sizing"></div>
218235
### Hériter `box-sizing`
@@ -232,6 +249,8 @@ html {
232249

233250
Cela rend plus facile de changer `box-sizing` dans les plugins ou autres composants qui exploitent d'autres comportements.
234251

252+
<sup>[retour à la table des matières](#table-of-contents)</sup>
253+
235254

236255
<div id="equal-width-table-cells"></div>
237256
### Cellules Equal Largeur de table
@@ -246,6 +265,8 @@ Les tableaux peuvent être une douleur à travailler avec donc essayer d'utilise
246265

247266
dispositions de table sans douleur.
248267

268+
<sup>[retour à la table des matières](#table-of-contents)</sup>
269+
249270

250271
<div id="get-rid-of-margin-hacks-with-flexbox"></div>
251272
### Se débarrasser de la marge Hacks Avec Flexbox
@@ -266,6 +287,8 @@ Lorsque vous travaillez avec des gouttières de colonne, vous pouvez vous débar
266287

267288
Maintenant gouttières colonnes apparaissent toujours uniformément espacés.
268289

290+
<sup>[retour à la table des matières](#table-of-contents)</sup>
291+
269292

270293
<div id="use-attribute-selectors-with-empty-links"></div>
271294
### Utilisation des attributs sélecteurs avec des liens vides
@@ -280,6 +303,8 @@ a[href^="http"]:empty::before {
280303

281304
C'est assez pratique.
282305

306+
<sup>[retour à la table des matières](#table-of-contents)</sup>
307+
283308

284309
<div id="style-default-links"></div>
285310
### Style "par défaut" Liens
@@ -295,6 +320,8 @@ a[href]:not([class]) {
295320

296321
Maintenant, les liens qui sont insérés via un CMS, qui ne disposent généralement pas un attribut `class`, auront une distinction sans affecter de manière générique la cascade.
297322

323+
<sup>[retour à la table des matières](#table-of-contents)</sup>
324+
298325

299326
<div id="consistent-vertical-rhythm"></div>
300327
### Conformément Vertical Rhythm
@@ -309,6 +336,8 @@ Utilisez un sélecteur universel (de `*`) dans un élément pour créer un rythm
309336

310337
Rythme vertical conformément offre une esthétique visuelle qui rend le contenu beaucoup plus lisible.
311338

339+
<sup>[retour à la table des matières](#table-of-contents)</sup>
340+
312341

313342
<div id="intrinsic-ratio-boxes"></div>
314343
### Boîtes Ratio Intrinsic
@@ -334,6 +363,8 @@ Pour créer une boîte avec un rapport intrinsèque, tout ce que vous devez fair
334363

335364
En utilisant 20% pour le rembourrage rend la hauteur de la caisse égale à 20% de sa largeur. Peu importe la largeur de la fenêtre, la div enfant gardera son ratio d'aspect (100% / 20% = 5: 1).
336365

366+
<sup>[retour à la table des matières](#table-of-contents)</sup>
367+
337368

338369
<div id="style-broken-images"></div>
339370
### Style de Broken Images
@@ -371,6 +402,8 @@ img:after {
371402

372403
En savoir plus sur le style de ce modèle dans [Ire Aderinokun](https://github.com/ireade/)' [message original](http://bitsofco.de/styling-broken-images/).
373404

405+
<sup>[retour à la table des matières](#table-of-contents)</sup>
406+
374407

375408
<div id="use-rem-for-global-sizing-use-em-for-local-sizing"></div>
376409
### Utilisez `rem` for Global Dimensionnement; Utilisez `em` pour Local Sizing
@@ -401,6 +434,8 @@ aside .module {
401434

402435
Maintenant, chaque module devient compartimentée et plus faciles à coiffer, plus maintenable, et flexible.
403436

437+
<sup>[retour à la table des matières](#table-of-contents)</sup>
438+
404439

405440
<div id="hide-autoplay-videos-that-arent-muted"></div>
406441
### Masquer les vidéos Autoplay qui ne sont pas Muted
@@ -415,6 +450,8 @@ video[autoplay]:not([muted]) {
415450

416451
Encore une fois, nous prenons avantage d'utiliser le [`:not()`](#use-not-to-applyunapply-borders-on-navigation) pseudo-classe.
417452

453+
<sup>[retour à la table des matières](#table-of-contents)</sup>
454+
418455

419456
<div id="use-root-for-flexible-type"></div>
420457
### Utiliser `:root` de type flexible
@@ -435,6 +472,8 @@ body {
435472
}
436473
```
437474

475+
<sup>[retour à la table des matières](#table-of-contents)</sup>
476+
438477

439478
## Soutien
440479

0 commit comments

Comments
 (0)