You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
1.[Cajas Relación intrínsecas](#cajas-relación-intrínsecas)
38
+
1.[Imágenes rotas Estilo](#imágenes-rotas-estilo)
39
+
1.[Use `rem` para Global Dimensionamiento; Use `em` para el dimensionamiento local](#use-rem-para-global-dimensionamiento-use-em-para-el-dimensionamiento-local)
40
+
1.[Esconder Reproducción automática los vídeos que no estén anulados](#esconder-reproducción-automática-los-vídeos-que-no-estén-anulados)
41
+
1.[Utilizar `:root` para el tipo flexible](#utilizar-root-para-el-tipo-flexible)
42
+
1.[Ajuste `font-size` en el Formulario Elementos para una mejor experiencia móvil](#ajuste-font-size-en-el-formulario-elementos-para-una-mejor-experiencia-móvil)
### Use `:not()` para Aplicar / Cancelar la aplicación de las fronteras para la Navegación
46
+
### Use `:not()` para Aplicar / Cancelar los bordes de la navegación
47
47
48
-
En lugar de poner en la frontera...
48
+
En lugar de poner en el borde...
49
49
50
50
```css
51
-
/*add border*/
51
+
/*Agregar el borde*/
52
52
.navli {
53
53
border-right: 1pxsolid#666;
54
54
}
55
55
```
56
56
57
-
...Y luego sacarlo del último elemento...
57
+
...Y luego quitarlo del último elemento...
58
58
59
59
```css
60
-
/*remove border*/
60
+
/*quitar el borde*/
61
61
.navli:last-child {
62
62
border-right: none;
63
63
}
64
64
```
65
65
66
-
...Utilizar el `:not()` pseudo-clase que sólo se aplican a los elementos que desea:
66
+
...Utiliza la pseudo-clase `:not()` que sólo se aplican a los elementos que desea:
67
67
68
68
```css
69
69
.navli:not(:last-child) {
70
70
border-right: 1pxsolid#666;
71
71
}
72
-
```
73
72
74
-
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.
73
+
```
74
+
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 los bordes de la forma en que un ser humano lo describiría.
75
75
76
76
<sup>[volver al índice de contenidos](#table-of-contents)</sup>
77
77
78
78
79
-
<divid="add-line-height-to-body"></div>
80
-
### Añadir `line-height` a `body`
79
+
<divid="add-line-height-to-body"></div>
80
+
### Añadir `line-height` a el `body`
81
81
82
-
No es necesario añadir `line-height`característica a cada` <p> `,` <h *> `, _et al_. separadamente. En su lugar, añadirlo a`body`:
82
+
No es necesario añadir `line-height` a cada` <p> `,` <h *> `, _et al_. por separado. En su lugar, agregalo a el`body`:
83
83
84
84
```css
85
85
body {
@@ -93,9 +93,9 @@ De esta manera los elementos textuales pueden heredar de `body` fácilmente.
93
93
94
94
95
95
<divid="vertically-center-anything"></div>
96
-
### Cualquier cosa verticalmente-Centro
96
+
### Centrar cualquier verticalmente
97
97
98
-
No, no es magia negro, que realmente puede centrar verticalmente elementos:
98
+
No, no es magia negra, realmente puedes centrar verticalmente elementos:
99
99
100
100
```css
101
101
html, body {
@@ -112,27 +112,27 @@ body {
112
112
}
113
113
```
114
114
115
-
¿Quieres centrar algo más? Vertical, horizontal...cualquier cosa, en cualquier momento y en cualquier lugar? CSS-Tricks tiene [un bonito reportaje](https://css-tricks.com/centering-css-complete-guide/)en hacer todo eso.
115
+
¿Quieres centrar algo más? Vertical, horizontal...cualquier cosa, en cualquier momento y en cualquier lugar? CSS-Tricks tiene [un bonito reportaje](https://css-tricks.com/centering-css-complete-guide/)para hacer todo eso.
116
116
117
-
**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.
117
+
**Nota:** ve por algunos [comportamientos erroneos](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) con Flexbox en IE11.
118
118
119
119
<sup>[volver al índice de contenidos](#table-of-contents)</sup>
120
120
121
121
122
122
<divid="comma-separated-links"></div>
123
123
### Listas separadas por comas
124
124
125
-
Hacen elementos de la lista se ven como una lista de bienes, separados por comas:
125
+
Hacer que los elementos de la lista se vean de forma real, separados por comas:
126
126
127
127
```css
128
128
ul>li:not(:last-child)::after {
129
129
content: ",";
130
130
}
131
131
```
132
132
133
-
Utilice el `:not()`pseudo-clase por lo que no se añade una coma al último elemento.
133
+
Utilice la pseudo-clase `:not()`para agregar una coma al último elemento.
134
134
135
-
**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.
135
+
**Nota:** Esta 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. Proceda con precaución.
136
136
137
137
<sup>[volver al índice de contenidos](#table-of-contents)</sup>
138
138
@@ -147,7 +147,7 @@ li {
147
147
display: none;
148
148
}
149
149
150
-
/*select items 1 through 3 and display them*/
150
+
/*seleccionar los elementos de 1 hasta 3 y muestralos*/
151
151
li:nth-child(-n+3) {
152
152
display: block;
153
153
}
@@ -156,7 +156,7 @@ li:nth-child(-n+3) {
156
156
O bien, como ya se ha aprendido un poco sobre [el uso de `:not()`](# uso no-a-applyunapply-fronteras-on-navegación), trate de:
157
157
158
158
```css
159
-
/*select items 1 through 3 and display them*/
159
+
/*seleccionar los elementos de 1 hasta 3 y muestralos*/
160
160
li:not(:nth-child(-n+3)) {
161
161
display: none;
162
162
}
@@ -180,7 +180,7 @@ No hay ninguna razón para no usar SVG para los iconos:
180
180
181
181
SVG funciona bien para todos los tipos de resolución y es compatible con todos los navegadores [volver a IE9](http://caniuse.com/#search=svg). Así que olvide sus archivos .png, .jpg o .gif-jif-whatev.
182
182
183
-
**Nota:** Si usted tiene SVG icono de sólo botones para los usuarios con visión y el SVG no se puede cargar, esto ayudará a mantener la accesibilidad:
183
+
**Nota:** Si usted tiene un icono SVG de sólo botones para los usuarios con visión y el SVG no se puede cargar, esto ayudará a mantener la accesibilidad:
184
184
185
185
```css
186
186
.no-svg.icon-only:after {
@@ -194,7 +194,7 @@ SVG funciona bien para todos los tipos de resolución y es compatible con todos
194
194
<divid="use-the-lobotomized-owl-selector"></div>
195
195
### Utilice la herramienta de selección "lobotomizó búho"
196
196
197
-
Se puede tener un nombre extraño, pero con el mando universales (`*`) con el selector de hermanos adyacentes (`+`) puede proporcionar una potente capacidad de CSS:
197
+
Puede que tenga un nombre extraño, pero utilizando el selector unversal (`*`) con el selector de hermanos adyacentes (`+`) puede proporcionar una potente capacidad de CSS:
198
198
199
199
```css
200
200
*+* {
@@ -210,9 +210,9 @@ Para más información sobre el selector "buho lobotomized", lee [post de Heydon
Cuando se trabaja con las canaletas de columna que puede deshacerse de `nth-`, `first-` y `last-child` mediante el uso de la propiedad `space-between` de Flexbox:
275
275
@@ -290,7 +290,7 @@ Ahora canaletas de columna siempre aparecen uniformemente espaciadas.
### Selectores de atributo con el uso Enlaces vacíos
293
+
### Utilizar selectores de atributo con enlaces vacíos
294
294
295
295
Mostrar vínculos cuando el elemento `<a>` no tiene un valor de texto, pero el atributo `href` tiene un enlace:
296
296
@@ -306,17 +306,17 @@ Eso es bastante conveniente.
306
306
307
307
308
308
<divid="style-default-links"></div>
309
-
### Enlaces de estilo "por defecto"
309
+
### Estilos "por defcto" para los enlaces.
310
310
311
-
Añadir un estilo de enlaces "por defecto":
311
+
Añadir un estilo a los enlaces "por defecto":
312
312
313
313
```css
314
314
a[href^="http"]:empty::before {
315
315
content: attr(href);
316
316
}
317
317
```
318
318
319
-
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.
319
+
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.
320
320
321
321
<sup>[volver al índice de contenidos](#table-of-contents)</sup>
322
322
@@ -350,7 +350,7 @@ Para crear un cuadro con una relación intrínseca, todo lo que tiene que hacer
350
350
}
351
351
352
352
.containerdiv {
353
-
border: 2pxdashed#ddd;
353
+
border: 2pxdashed#ddd;
354
354
height: 100%;
355
355
left: 0;
356
356
position: absolute;
@@ -492,6 +492,6 @@ textarea {
492
492
<sup>[volver al índice de contenidos](#table-of-contents)</sup>
493
493
494
494
495
-
## Apoyo
495
+
## Soporte
496
496
497
-
Las versiones actuales de Chrome, Firefox, Safari, Opera, Edge y IE11.
497
+
Las versiones actuales de Chrome, Firefox, Safari, Opera, Edge y IE11.
0 commit comments