Skip to content

Merging back #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 13 commits into from
Jun 27, 2016
Merged

Merging back #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
52dccb6
Merge pull request #48 from edmundojr/master
AllThingsSmitty May 28, 2016
86f3073
Russian translation
Jun 9, 2016
d34837d
Merge pull request #49 from triplepointfive/russian_translation
AllThingsSmitty Jun 9, 2016
d59a514
Added form element font-size tip 🚀
AllThingsSmitty Jun 17, 2016
0eaa2a3
Added form element font-size tip 🙌🏼
AllThingsSmitty Jun 17, 2016
f6d918d
Fixed Russian translation for the last tip
fremdev Jun 25, 2016
6235a8b
Fix markdown issues
mitogh Jun 26, 2016
1158535
Update spanish transalations
mitogh Jun 26, 2016
3b73e65
Update spanish translations to improve grammar
mitogh Jun 26, 2016
896b405
Update index with the correct link to the headlines
mitogh Jun 26, 2016
0ac1a8b
Merge pull request #53 from mitogh/update-spanish-translations
AllThingsSmitty Jun 27, 2016
2efba98
Merge pull request #51 from fremdev/rus-translation-fix
AllThingsSmitty Jun 27, 2016
93f7747
Removed translation links 💁🏼
AllThingsSmitty Jun 27, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 20 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ A collection of tips to help take your CSS skills pro.
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)


### Use `:not()` to Apply/Unapply Borders on Navigation
Expand Down Expand Up @@ -453,6 +454,24 @@ body {
<sup>[back to table of contents](#table-of-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;
}
```

:dancer:

<sup>[back to table of contents](#table-of-contents)</sup>


## Support

Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11.
Expand All @@ -463,5 +482,5 @@ Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11.
* [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)
* [Português do Brasil](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pt-BR)
* [русский](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ru-RU)
* [Русский](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ru-RU)
* [简体中文](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-CN)
134 changes: 77 additions & 57 deletions translations/es-ES/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,72 +13,73 @@ Una colección de consejos para ayudar a llevar su pro habilidades CSS.
## Tabla de contenido

* [Consejos Profesionales](#protips)
* [Apoyo](#apoyo)
* [Pautas de contribución](../../CONTRIBUTING.md)
* [Soporte](#soporte)
* [Pautas para contribuir](../../CONTRIBUTING.md)


<div id="protips"></div>
## Consejos Profesionales

1. [Use `:not()` para Aplicar / Cancelar la aplicación de las fronteras para la Navegación](#use-not-to-applyunapply-borders-on-navigation)
1. [Use `:not()` para Aplicar / Cancelar la aplicación de las bordes para la Navegación](#use-not-to-applyunapply-borders-on-navigation)
1. [Añadir `line-height` a `body`](#add-line-height-to-body)
1. [Cualquier cosa verticalmente-Centro](#vertically-center-anything)
1. [Listas separadas por comas](#comma-separated-links)
1. [Listas separadas por comas](#listas-separadas-por-comas)
1. [Seleccionar elementos Usando negativo `nth-child`](#select-items-using-negative-nth-child)
1. [Utilizar SVG para iconos](#use-svg-for-icons)
1. [Utilice la herramienta de selección "lobotomizó búho"](#use-the-lobotomized-owl-selector)
1. [Use `max-height` característica de Sliders puro CSS](#use-max-height-for-pure-css-sliders)
1. [Heredar `box-sizing`](#inherit-box-sizing)
1. [Celdas de la tabla de igual ancho](#equal-width-table-cells)
1. [Deshacerse del margen Hacks Con Flexbox](#get-rid-of-margin-hacks-with-flexbox)
1. [Selectores de atributo con el uso Enlaces vacíos](#use-attribute-selectors-with-empty-links)
1. [Enlaces de estilo "por defecto"](#style-default-links)
1. [Consistente ritmo vertical](#consistent-vertical-rhythm)
1. [Cajas Relación intrínsecas](#intrinsic-ratio-boxes)
1. [Imágenes rotas Estilo](#style-broken-images)
1. [Use `rem` para Global Dimensionamiento; Use `em` para el dimensionamiento local](#use-rem-for-global-sizing-use-em-for-local-sizing)
1. [Esconder Reproducción automática los vídeos que no estén anulados](#hide-autoplay-videos-that-arent-muted)
1. [Utilizar `:root` para el tipo flexible](#use-root-for-flexible-type)
1. [Utilizar SVG para iconos](#utilizar-svg-para-iconos)
1. [Utilice la herramienta de selección "lobotomizó búho"](#utilice-la-herramienta-de-selección-lobotomizó-búho)
1. [Use `max-height` característica de Sliders puro CSS](#use-max-height-para-un-sliders-de-puro-css)
1. [Heredar `box-sizing`](#heredar-box-sizing)
1. [Celdas de la tabla de igual ancho](#celdas-de-la-tabla-con-igual-ancho)
1. [Deshacerse del margen Hacks Con Flexbox](#deshacerse-de-los-hacks-de-margen-con-flexbox)
1. [Selectores de atributo con el uso Enlaces vacíos](#utilizar-selectores-de-atributo-con-enlaces-vacíos)
1. [Enlaces de estilo "por defecto"](#estilos-por-defcto-para-los-enlaces)
1. [Consistente ritmo vertical](#consistente-ritmo-vertical)
1. [Cajas Relación intrínsecas](#cajas-relación-intrínsecas)
1. [Imágenes rotas Estilo](#imágenes-rotas-estilo)
1. [Use `rem` para Global Dimensionamiento; Use `em` para el dimensionamiento local](#use-rem-para-global-dimensionamiento-use-em-para-el-dimensionamiento-local)
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)
1. [Utilizar `:root` para el tipo flexible](#utilizar-root-para-el-tipo-flexible)
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)


<div id="use-not-to-applyunapply-borders-on-navigation"></div>
### Use `:not()` para Aplicar / Cancelar la aplicación de las fronteras para la Navegación
### Use `:not()` para Aplicar / Cancelar los bordes de la navegación

En lugar de poner en la frontera...
En lugar de poner en el borde...

```css
/* add border */
/* Agregar el borde */
.nav li {
border-right: 1px solid #666;
}
```

...Y luego sacarlo del último elemento...
...Y luego quitarlo del último elemento...

```css
/* remove border */
/* quitar el borde */
.nav li:last-child {
border-right: none;
}
```

...Utilizar el `:not()` pseudo-clase que sólo se aplican a los elementos que desea:
...Utiliza la pseudo-clase `:not()` que sólo se aplican a los elementos que desea:

```css
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
```

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.
```
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.

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


<div id="add-line-height-to-body"></ div>
### Añadir `line-height` a `body`
<div id="add-line-height-to-body"></div>
### Añadir `line-height` a el `body`

No es necesario añadir `line-height` característica a cada` <p> `,` <h *> `, _et al_. separadamente. En su lugar, añadirlo a `body`:
No es necesario añadir `line-height` a cada` <p> `,` <h *> `, _et al_. por separado. En su lugar, agregalo a el `body`:

```css
body {
Expand All @@ -92,9 +93,9 @@ De esta manera los elementos textuales pueden heredar de `body` fácilmente.


<div id="vertically-center-anything"></div>
### Cualquier cosa verticalmente-Centro
### Centrar cualquier verticalmente

No, no es magia negro, que realmente puede centrar verticalmente elementos:
No, no es magia negra, realmente puedes centrar verticalmente elementos:

```css
html, body {
Expand All @@ -111,27 +112,27 @@ body {
}
```

¿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.
¿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.

**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.
**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.

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


<div id="comma-separated-links"></div>
### Listas separadas por comas

Hacen elementos de la lista se ven como una lista de bienes, separados 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 el `:not()` pseudo-clase por lo que no se añade una coma al último elemento.
Utilice la pseudo-clase `:not()` para agregar una coma al último elemento.

**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.
**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.

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

Expand All @@ -146,7 +147,7 @@ li {
display: none;
}

/* select items 1 through 3 and display them */
/* seleccionar los elementos de 1 hasta 3 y muestralos */
li:nth-child(-n+3) {
display: block;
}
Expand All @@ -155,7 +156,7 @@ li:nth-child(-n+3) {
O bien, como ya se ha aprendido un poco sobre [el uso de `:not()`](# uso no-a-applyunapply-fronteras-on-navegación), trate de:

```css
/* select items 1 through 3 and display them */
/* seleccionar los elementos de 1 hasta 3 y muestralos */
li:not(:nth-child(-n+3)) {
display: none;
}
Expand All @@ -179,7 +180,7 @@ No hay ninguna razón para no usar SVG para los iconos:

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.

**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:
**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:

```css
.no-svg .icon-only:after {
Expand All @@ -193,7 +194,7 @@ SVG funciona bien para todos los tipos de resolución y es compatible con todos
<div id="use-the-lobotomized-owl-selector"></div>
### Utilice la herramienta de selección "lobotomizó búho"

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:
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:

```css
* + * {
Expand All @@ -209,9 +210,9 @@ Para más información sobre el selector "buho lobotomized", lee [post de Heydon


<div id="use-max-height-for-pure-css-sliders"></div>
### Use `max-height` característica de Sliders puro CSS
### Use `max-height` para un Sliders de puro CSS

Implementar controles deslizantes CSS sólo para el uso de `max-height` característica con rebosadero oculto:
Implementar un slider solo de CSS utilizando solo `max-height` con el overflow oculto.

```css
.slider {
Expand All @@ -226,15 +227,15 @@ Implementar controles deslizantes CSS sólo para el uso de `max-height` caracter
}
```

El elemento se expande para el valor `max-height` característica en vuelo estacionario y la corredera se muestra como resultado de la abundancia.
El elemento se expande hasta el valor de `max-height` en hover y el slider muestra el contenido del overflow.

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


<div id="inherit-box-sizing"></div>
### Heredar `box-sizing`

Let `box-sizing` ser heredada de `html`:
Herdar `box-sizing` de `html`:

```css
html {
Expand All @@ -252,25 +253,25 @@ Esto hace que sea más fácil cambiar `box-sizing` en plugins u otros componente


<div id="equal-width-table-cells"></div>
### Celdas de la tabla de igual ancho
### Celdas de la tabla con igual ancho

Las tablas pueden ser un dolor de trabajar con lo que trate de usar `table-layout: fixed` para mantener las células en el mismo ancho:
Las tablas pueden ser un dolor de trabajar con lo que se trate de usar `table-layout: fixed` para mantener las celdas con el mismo ancho:

```css
.calendar {
  table-layout: fixed;
}
```

Disposiciones de la tabla sin dolor.
Diseño de tablas sin dolor.

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


<div id="get-rid-of-margin-hacks-with-flexbox"></div>
### Deshacerse del margen Hacks Con Flexbox
### Deshacerse de los hacks de margen con Flexbox

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:
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:

```css
.list {
Expand All @@ -289,7 +290,7 @@ Ahora canaletas de columna siempre aparecen uniformemente espaciadas.


<div id="use-attribute-selectors-with-empty-links"></div>
### Selectores de atributo con el uso Enlaces vacíos
### Utilizar selectores de atributo con enlaces vacíos

Mostrar vínculos cuando el elemento `<a>` no tiene un valor de texto, pero el atributo `href` tiene un enlace:

Expand All @@ -305,17 +306,17 @@ Eso es bastante conveniente.


<div id="style-default-links"></div>
### Enlaces de estilo "por defecto"
### Estilos "por defcto" para los enlaces.

Añadir un estilo de enlaces "por defecto":
Añadir un estilo a los enlaces "por defecto":

```css
a[href^="http"]:empty::before {
content: attr(href);
}
```

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.
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](#table-of-contents)</sup>

Expand Down Expand Up @@ -349,7 +350,7 @@ Para crear un cuadro con una relación intrínseca, todo lo que tiene que hacer
}

.container div {
border: 2px dashed #ddd;
border: 2px dashed #ddd;
height: 100%;
left: 0;
position: absolute;
Expand Down Expand Up @@ -453,7 +454,7 @@ Una vez más, nos estamos tomando ventaja de usar el [`:not()`](#use-not-to-appl
<div id="use-root-for-flexible-type"></div>
### Utilizar `:root` para el tipo 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`:
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 {
Expand All @@ -472,6 +473,25 @@ body {
<sup>[volver al índice de contenidos](#table-of-contents)</sup>


## Apoyo
<div id="set-font-size-on-form-elements-for-a-better-mobile-experience"></div>
### Ajuste `font-size` en el Formulario Elementos para una mejor experiencia móvil

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:

```css
input[type="text"],
input[type="number"],
select,
textarea {
font-size: 16px;
}
```

:dancer:

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


## Soporte

Las versiones actuales de Chrome, Firefox, Safari, Opera, Edge y IE11.
Las versiones actuales de Chrome, Firefox, Safari, Opera, Edge y IE11.
Loading