Skip to content

Commit

Permalink
Convert /css/c-f folder to Markdown (es) (#9409)
Browse files Browse the repository at this point in the history
* css/c-f html cleanup

* css/c-f rename html to md

* css/c-f h2m replace

* css/c-f linting with 8181 .markdownlint-cli2.jsonc

* css/c-f drop the url title attributes

* fix files/es/web/css/computed_value/index.md

* Fix removing languages macro

* Apply suggestions from code review

* Apply suggestions from code review
  • Loading branch information
Graywolf9 committed Oct 20, 2022
1 parent 5cb4a62 commit 8015a61
Show file tree
Hide file tree
Showing 192 changed files with 19,411 additions and 24,220 deletions.
2 changes: 1 addition & 1 deletion files/es/web/css/angle/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ Aun cuando todas las unidades representan lo mismo para el valor `0`, la unidad
| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ |
| ![Angle180.png](/@api/deki/files/5706/=Angle180.png) | Ángulo llano: ` 180deg = 200grad = 0.5turn`` ``≈`` 3.1416rad ` |
| ![AngleMinus90.png](/@api/deki/files/5707/=AngleMinus90.png) | Ángulo recto (hacia la izquierda): `-90deg = -100grad = -0.25turn` ` ≈`` -1.5708rad ` |
| ![Angle0.png](/@api/deki/files/5708/=Angle0.png) | Ángulo nulo: ` 0deg = 0grad = 0turn`` ``=`` 0rad` <br><br> Nota: `0` no es un valor de ángulo válido. |
| ![Angle0.png](/@api/deki/files/5708/=Angle0.png) | Ángulo nulo: `0deg = 0grad = 0turn`` ``=`` 0rad` <br><br> Nota: `0` no es un valor de ángulo válido. |

## Especificaciones

Expand Down
1 change: 0 additions & 1 deletion files/es/web/css/background-image/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -133,4 +133,3 @@ div {
- {{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}}
- {{cssxref("image/paint", "paint()")}}
- {{cssxref("url", "url()")}}

134 changes: 0 additions & 134 deletions files/es/web/css/calc/index.html

This file was deleted.

119 changes: 119 additions & 0 deletions files/es/web/css/calc/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
---
title: calc
slug: Web/CSS/calc
translation_of: Web/CSS/calc()
original_slug: Web/CSS/calc()
---
{{CSSRef}}{{SeeCompatTable}}

## Sumario

La función CSS `calc()` puede ser usada en cualquier sitio donde {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;angle&gt;")}}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;number&gt;")}}, o {{cssxref("&lt;integer&gt;")}} sea requerido. `Con calc()` puedes realizar cálculos para determinar valores de propiedades CSS.

Es posible anidar llamadas a `calc()` dentro de otras llamadas `calc()`.

## Sintaxis

```
calc(expresión)
```

### Values

- expresión
- : Una expresión matemática cuyo resultado es usado como valor para la propiedad sobre la cual se aplica.

### Expresiones

La expresión puede ser una combinación de los siguientes operadores:

- **+**
- : Suma
- **-**
- : Resta
- **\***
- : Multiplicación. Al menos uno de los argumentos debe ser un {{cssxref("&lt;number&gt;")}}.
- **/**
- : División. El divisor debe ser un {{cssxref("&lt;number&gt;")}}.

Los operandos en la expresión pueden ser valores tanto positivos como negativos. Puedes usar diferentes unidades para cada valor si lo deseas. Es recomendable el uso de paréntesis para añadir legibilidad a la expresión o para forzar precedencia en las operaciones en caso necesario.

> **Nota:** La división por cero dará lugar a un error generado por el analizador de HTML del navegador.
> **Nota:** las operaciones + y - siempre deben estar separadas de sus operandos mediante espacios en blanco. La expresión `calc(50% -8px)` será tomada como un operando de porcentaje seguido de otro operando de signo negativo (una expresión inválida, dado que no hay operador en medio), mientras que la expresión `calc(50% - 8px)` es un porcentaje seguido de una operación de resta.
> Los operadores `* y` `/` no requieren espacio en blanco, pero es recomendable añadirlo por consistencia.
## Ejemplos

### Añadir un margen a un objeto en pantalla

`calc()` hace más fácil añadir márgenes a un objeto en determinadas circunstancias. En este ejemplo, CSS crea un espacio horizontal de color amarillo que llena el ancho de la ventana con un hueco de 40 pixels en ambos lados:

```css
.banner {
position: absolute;
left: 40px;
width: 90%; /* salvaguarda para navegadores que no reconocen calc() */
width: calc(100% - 80px);
border: solid black 1px;
box-shadow: 1px 2px;
background-color: yellow;
padding: 6px;
text-align: center;
}
```

```html
<div class="banner">This is a banner!</div>
```

{{ EmbedLiveSample('Positioning_an_object_on_screen_with_a_margin', '100%', '60') }}

### Entradas de formulario que se ajustan automáticamente al ancho de su contenedor

Otro caso de uso para`calc()` es asegurar que los campos de un formulario llenan el espacio disponible sin pasarse de los límites de su contenedor mientras mantienen el margen apropiado.

Echémosle un vistazo al CSS:

```css
input {
padding: 2px;
display: block;
width: 98%; /* salvaguarda para navegadores que no reconocen calc() */
width: calc(100% - 1em);
}

#formbox {
width: 130px; /* salvaguarda para navegadores que no reconocen calc() */
width: calc(100% / 6);
border: 1px solid black;
padding: 4px;
}
```

El formulario usa 1/6 del ancho disponible. Para asegurar que los campos de entrada tienen el tamaño adecuado, usamos `calc()` de nuevo para establecer el ancho que deberían tener (el de su contenedor) menos 1em. Para probar esto, usaremos el siguiente HTML:

```html
<form>
<div id="formbox">
<label>Type something:</label>
<input type="text">
</div>
</form>
```

{{ EmbedLiveSample('Automatically_sizing_form_fields_to_fit_their_container', '100%', '80') }}

## Especificaciones

| Especificación | Estado | Comentario |
| ------------------------------------------------------------------------ | -------------------------------- | ---------- |
| {{SpecName('CSS3 Values', '#calc-notation', 'calc()')}} | {{Spec2('CSS3 Values')}} | |

## Compatibilidad en navegadores

{{Compat("css.types.calc")}}

## Ver también

- [Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog](https://hacks.mozilla.org/2010/06/css3-calc/)
89 changes: 0 additions & 89 deletions files/es/web/css/caret-color/index.html

This file was deleted.

Loading

0 comments on commit 8015a61

Please sign in to comment.