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
Copy file name to clipboardExpand all lines: README.md
+20-1Lines changed: 20 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -38,6 +38,7 @@ A collection of tips to help take your CSS skills pro.
38
38
1.[Use `rem` for Global Sizing; Use `em` for Local Sizing](#use-rem-for-global-sizing-use-em-for-local-sizing)
39
39
1.[Hide Autoplay Videos That Aren't Muted](#hide-autoplay-videos-that-arent-muted)
40
40
1.[Use `:root` for Flexible Type](#use-root-for-flexible-type)
41
+
1.[Set `font-size` on Form Elements for a Better Mobile Experience](#set-font-size-on-form-elements-for-a-better-mobile-experience)
41
42
42
43
43
44
### Use `:not()` to Apply/Unapply Borders on Navigation
@@ -453,6 +454,24 @@ body {
453
454
<sup>[back to table of contents](#table-of-contents)</sup>
454
455
455
456
457
+
### Set `font-size` on Form Elements for a Better Mobile Experience
458
+
459
+
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:
460
+
461
+
```css
462
+
input[type="text"],
463
+
input[type="number"],
464
+
select,
465
+
textarea {
466
+
font-size: 16px;
467
+
}
468
+
```
469
+
470
+
:dancer:
471
+
472
+
<sup>[back to table of contents](#table-of-contents)</sup>
473
+
474
+
456
475
## Support
457
476
458
477
Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11.
@@ -463,5 +482,5 @@ Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11.
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
46
47
47
-
En lugar de poner en la frontera...
48
+
En lugar de poner en el borde...
48
49
49
50
```css
50
-
/*add border*/
51
+
/*Agregar el borde*/
51
52
.navli {
52
53
border-right: 1pxsolid#666;
53
54
}
54
55
```
55
56
56
-
...Y luego sacarlo del último elemento...
57
+
...Y luego quitarlo del último elemento...
57
58
58
59
```css
59
-
/*remove border*/
60
+
/*quitar el borde*/
60
61
.navli:last-child {
61
62
border-right: none;
62
63
}
63
64
```
64
65
65
-
...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:
66
67
67
68
```css
68
69
.navli:not(:last-child) {
69
70
border-right: 1pxsolid#666;
70
71
}
71
-
```
72
72
73
-
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.
74
75
75
76
<sup>[volver al índice de contenidos](#table-of-contents)</sup>
76
77
77
78
78
-
<divid="add-line-height-to-body"></div>
79
-
### Añadir `line-height` a `body`
79
+
<divid="add-line-height-to-body"></div>
80
+
### Añadir `line-height` a el `body`
80
81
81
-
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`:
82
83
83
84
```css
84
85
body {
@@ -92,9 +93,9 @@ De esta manera los elementos textuales pueden heredar de `body` fácilmente.
92
93
93
94
94
95
<divid="vertically-center-anything"></div>
95
-
### Cualquier cosa verticalmente-Centro
96
+
### Centrar cualquier verticalmente
96
97
97
-
No, no es magia negro, que realmente puede centrar verticalmente elementos:
98
+
No, no es magia negra, realmente puedes centrar verticalmente elementos:
98
99
99
100
```css
100
101
html, body {
@@ -111,27 +112,27 @@ body {
111
112
}
112
113
```
113
114
114
-
¿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.
115
116
116
-
**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.
117
118
118
119
<sup>[volver al índice de contenidos](#table-of-contents)</sup>
119
120
120
121
121
122
<divid="comma-separated-links"></div>
122
123
### Listas separadas por comas
123
124
124
-
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:
125
126
126
127
```css
127
128
ul>li:not(:last-child)::after {
128
129
content: ",";
129
130
}
130
131
```
131
132
132
-
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.
133
134
134
-
**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.
135
136
136
137
<sup>[volver al índice de contenidos](#table-of-contents)</sup>
137
138
@@ -146,7 +147,7 @@ li {
146
147
display: none;
147
148
}
148
149
149
-
/*select items 1 through 3 and display them*/
150
+
/*seleccionar los elementos de 1 hasta 3 y muestralos*/
150
151
li:nth-child(-n+3) {
151
152
display: block;
152
153
}
@@ -155,7 +156,7 @@ li:nth-child(-n+3) {
155
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:
156
157
157
158
```css
158
-
/*select items 1 through 3 and display them*/
159
+
/*seleccionar los elementos de 1 hasta 3 y muestralos*/
159
160
li:not(:nth-child(-n+3)) {
160
161
display: none;
161
162
}
@@ -179,7 +180,7 @@ No hay ninguna razón para no usar SVG para los iconos:
179
180
180
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.
181
182
182
-
**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:
183
184
184
185
```css
185
186
.no-svg.icon-only:after {
@@ -193,7 +194,7 @@ SVG funciona bien para todos los tipos de resolución y es compatible con todos
193
194
<divid="use-the-lobotomized-owl-selector"></div>
194
195
### Utilice la herramienta de selección "lobotomizó búho"
195
196
196
-
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:
197
198
198
199
```css
199
200
*+* {
@@ -209,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 `enésimo-`, `` primera y última `hacks-child` mediante el uso de la propiedad` espacio between` de Flexbox:
274
+
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:
274
275
275
276
```css
276
277
.list {
@@ -289,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
293
294
294
295
Mostrar vínculos cuando el elemento `<a>` no tiene un valor de texto, pero el atributo `href` tiene un enlace:
295
296
@@ -305,17 +306,17 @@ Eso es bastante conveniente.
305
306
306
307
307
308
<divid="style-default-links"></div>
308
-
### Enlaces de estilo "por defecto"
309
+
### Estilos "por defcto" para los enlaces.
309
310
310
-
Añadir un estilo de enlaces "por defecto":
311
+
Añadir un estilo a los enlaces "por defecto":
311
312
312
313
```css
313
314
a[href^="http"]:empty::before {
314
315
content: attr(href);
315
316
}
316
317
```
317
318
318
-
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.
319
320
320
321
<sup>[volver al índice de contenidos](#table-of-contents)</sup>
321
322
@@ -349,7 +350,7 @@ Para crear un cuadro con una relación intrínseca, todo lo que tiene que hacer
349
350
}
350
351
351
352
.containerdiv {
352
-
border: 2pxdashed#ddd;
353
+
border: 2pxdashed#ddd;
353
354
height: 100%;
354
355
left: 0;
355
356
position: absolute;
@@ -453,7 +454,7 @@ Una vez más, nos estamos tomando ventaja de usar el [`:not()`](#use-not-to-appl
453
454
<divid="use-root-for-flexible-type"></div>
454
455
### Utilizar `:root` para el tipo flexible
455
456
456
-
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`:
457
+
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`:
457
458
458
459
```css
459
460
:root {
@@ -472,6 +473,25 @@ body {
472
473
<sup>[volver al índice de contenidos](#table-of-contents)</sup>
### Ajuste `font-size` en el Formulario Elementos para una mejor experiencia móvil
478
+
479
+
Para evitar los navegadores móviles (iOS Safari, _et al_.) De hacer zoom sobre los elementos de formulario HTML cuando un `<select>` desplegable se toca, agrega `font-size` a la regla de selección:
480
+
481
+
```css
482
+
input[type="text"],
483
+
input[type="number"],
484
+
select,
485
+
textarea {
486
+
font-size: 16px;
487
+
}
488
+
```
489
+
490
+
:dancer:
491
+
492
+
<sup>[volver al índice de contenidos](#table-of-contents)</sup>
493
+
494
+
495
+
## Soporte
476
496
477
-
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