es: Format /web/css using Prettier (part 2) (#14458)

files/es/web/css/--_star_/index.md

@@ -33,10 +33,16 @@ Las propiedades personalizadas tienen como alcance los elementos en los que se d
 ### HTML
 
 ```html
-<p id="firstParagraph">Este párrafo debe tener un fondo azul y un texto amarillo.</p>
-<p id="secondParagraph">Este párrafo debe tener un fondo amarillo y un texto azul.</p>
+<p id="firstParagraph">
+  Este párrafo debe tener un fondo azul y un texto amarillo.
+</p>
+<p id="secondParagraph">
+  Este párrafo debe tener un fondo amarillo y un texto azul.
+</p>
 <div id="container">
-  <p id="thirdParagraph">Este párrafo debe tener un fondo verde y un texto amarillo.</p>
+  <p id="thirdParagraph">
+    Este párrafo debe tener un fondo verde y un texto amarillo.
+  </p>
 </div>
 ```
 

files/es/web/css/-moz-force-broken-image-icon/index.md

@@ -28,13 +28,13 @@ slug: Web/CSS/-moz-force-broken-image-icon
 ```css
 img {
   -moz-force-broken-image-icon: 1;
-  height:100px;
-  width:100px;
+  height: 100px;
+  width: 100px;
 }
 ```
 
 ```html
-<img src='/enlace/roto/imagen.png' alt='Imagen con enlace roto'>
+<img src="/enlace/roto/imagen.png" alt="Imagen con enlace roto" />
 ```
 
 {{ EmbedLiveSample('Examples','125','125','/files/4619/broken%20image%20link.png') }}

files/es/web/css/-moz-image-rect/index.md

@@ -44,14 +44,14 @@ Para el contenedor:
 
 ```css
 #container {
-  width:267px;
-  height:272px;
-  top:100px;
-  left:100px;
-  position:absolute;
-  font-size:16px;
-  text-shadow:white 0px 0px 6px;
-  text-align:center;
+  width: 267px;
+  height: 272px;
+  top: 100px;
+  left: 100px;
+  position: absolute;
+  font-size: 16px;
+  text-shadow: white 0px 0px 6px;
+  text-align: center;
 }
 ```
 
@@ -60,9 +60,9 @@ posteriormente las cuatro caja se defines las cajas que especifican los segmento
 ```css
 #box1 {
   background-image: -moz-image-rect(url(firefox.png), 0%, 50%, 50%, 0%);
-  width:133px;
-  height:136px;
-  position:absolute;
+  width: 133px;
+  height: 136px;
+  position: absolute;
 }
 ```
 
@@ -71,9 +71,9 @@ Esta es la esquina superior izquierda de la imagen. Define un rectángulo que co
 ```css
 #box2 {
   background-image: -moz-image-rect(url(firefox.png), 0%, 100%, 50%, 50%);
-  width:133px;
-  height:136px;
-  position:absolute;
+  width: 133px;
+  height: 136px;
+  position: absolute;
 }
 ```
 
@@ -84,15 +84,15 @@ Las otras dos siguen un patrón similar:
 ```css
 #box3 {
   background-image: -moz-image-rect(url(firefox.png), 50%, 50%, 100%, 0%);
-  width:133px;
-  height:136px;
-  position:absolute;
+  width: 133px;
+  height: 136px;
+  position: absolute;
 }
 #box4 {
   background-image: -moz-image-rect(url(firefox.png), 50%, 100%, 100%, 50%);
-  width:133px;
-  height:136px;
-  position:absolute;
+  width: 133px;
+  height: 136px;
+  position: absolute;
 }
 ```
 
@@ -117,16 +117,20 @@ Gestiona el evento click cuando el contenedor recibe un click de ratón
 
 ```js
 function rotate() {
-  var prevStyle = window.getComputedStyle(document.getElementById("box4"), null).getPropertyValue("background-image");
+  var prevStyle = window
+    .getComputedStyle(document.getElementById("box4"), null)
+    .getPropertyValue("background-image");
 
   // Una vez hemos guardado la última, empezamos a rotar.
 
-  for (var i=1; i<=4; i++) {
+  for (var i = 1; i <= 4; i++) {
     var curId = "box" + i;
 
     // Permuta las imágenes de fondo.
 
-    var curStyle = window.getComputedStyle(document.getElementById(curId), null).getPropertyValue("background-image");
+    var curStyle = window
+      .getComputedStyle(document.getElementById(curId), null)
+      .getPropertyValue("background-image");
     document.getElementById(curId).style.backgroundImage = prevStyle;
     prevStyle = curStyle;
   }

files/es/web/css/-moz-orient/index.md

@@ -29,16 +29,10 @@ The `-moz-orient` [CSS](/es/docs/Web/CSS) especifica la orientación del element
 ### HTML
 
 ```html
-<p>
-  The following progress meter
-  is horizontal (the default):
-</p>
+<p>The following progress meter is horizontal (the default):</p>
 <progress max="100" value="75"></progress>
 
-<p>
- The following progress meter
- is vertical:
-</p>
+<p>The following progress meter is vertical:</p>
 <progress class="vert" max="100" value="75"></progress>
 ```
 

files/es/web/css/-webkit-mask-attachment/index.md

@@ -26,8 +26,8 @@ Si se ha especificado una {{ Cssxref("-webkit-mask-image") }} , `-webkit-mask-at
 
 ```css
 body {
-    -webkit-mask-image: url('images/mask.png');
-    -webkit-mask-attachment: fixed;
+  -webkit-mask-image: url("images/mask.png");
+  -webkit-mask-attachment: fixed;
 }
 ```
 

files/es/web/css/-webkit-mask-box-image/index.md

@@ -39,6 +39,7 @@ Where:
 - \<gradient>
   - : La función -webkit-gradient que se usará como imagen de máscara.
 - none
+
   - : Para especificar que la caja del borde no va a tener imagen de máscara.
 
 - \<length>
@@ -56,11 +57,11 @@ Where:
 
 ```css
 .exampleone {
-    -webkit-mask-box-image: url('mask.png');
+  -webkit-mask-box-image: url("mask.png");
 }
 
 .exampletwo {
-    -webkit-mask-box-image: url('logo.png') 100 100 0 0 round round;
+  -webkit-mask-box-image: url("logo.png") 100 100 0 0 round round;
 }
 ```
 

files/es/web/css/-webkit-mask-composite/index.md

@@ -55,8 +55,8 @@ Donde:
 
 ```css
 .example {
-    -webkit-mask-image: url(mask1.png), url('mask2.png');
-    -webkit-mask-composite: xor, source-over;
+  -webkit-mask-image: url(mask1.png), url("mask2.png");
+  -webkit-mask-composite: xor, source-over;
 }
 ```
 

files/es/web/css/-webkit-mask-position-x/index.md

@@ -28,7 +28,10 @@ La propiedad CSS `-webkit-mask-position-x` CSS establece la posición horizontal
 -webkit-mask-position-x: -1cm;
 
 /* Múltiples valores */
--webkit-mask-position-x: 50px, 25%, -3em;
+-webkit-mask-position-x:
+  50px,
+  25%,
+  -3em;
 
 /* Valores globales */
 -webkit-mask-position-x: inherit;

files/es/web/css/-webkit-mask-position-y/index.md

@@ -28,7 +28,10 @@ La propiedad CSS `-webkit-mask-position-y` fija la posición inicial vertical de
 -webkit-mask-position-y: -1cm;
 
 /* Valores Múltiples*/
--webkit-mask-position-y: 50px, 25%, -3em;
+-webkit-mask-position-y:
+  50px,
+  25%,
+  -3em;
 
 /* Valores globales */
 -webkit-mask-position-y: inherit;

files/es/web/css/-webkit-mask-repeat-x/index.md

@@ -48,12 +48,12 @@ La propiedad CSS `-webkit-mask-repeat-x` especifica si una imagen de máscara se
 
 ```css
 .exampleone {
-  -webkit-mask-image: url('mask.png');
+  -webkit-mask-image: url("mask.png");
   -webkit-mask-repeat-x: repeat;
 }
 
 .exampletwo {
-  -webkit-mask-image: url('mask.png');
+  -webkit-mask-image: url("mask.png");
   -webkit-mask-repeat-x: no-repeat;
 }
 ```
@@ -64,7 +64,7 @@ Es posible especificar un `<repeat-style>` diferente para cada una de las imáge
 
 ```css
 .examplethree {
-  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-image: url("mask1.png"), url("mask2.png");
   -webkit-mask-repeat-x: repeat, space;
 }
 ```

files/es/web/css/-webkit-mask-repeat-y/index.md

@@ -51,12 +51,12 @@ La propiedad CSS `-webkit-mask-repeat-y` especifica si una imagen de máscara se
 
 ```css
 .exampleone {
-  -webkit-mask-image: url('mask.png');
+  -webkit-mask-image: url("mask.png");
   -webkit-mask-repeat-y: repeat;
 }
 
 .exampletwo {
-  -webkit-mask-image: url('mask.png');
+  -webkit-mask-image: url("mask.png");
   -webkit-mask-repeat-y: no-repeat;
 }
 ```
@@ -67,7 +67,7 @@ Es posible especificar un `<repeat-style>` diferente para cada una de las imáge
 
 ```css
 .examplethree {
-  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-image: url("mask1.png"), url("mask2.png");
   -webkit-mask-repeat-y: repeat, space;
 }
 ```

files/es/web/css/-webkit-overflow-scrolling/index.md

@@ -26,14 +26,10 @@ La propiedad CSS `-webkit-overflow-scrolling` controla si los dispositivos táct
 
 ```html
 <div class="scroll-touch">
-  <p>
-    This paragraph has momentum scrolling
-  </p>
+  <p>This paragraph has momentum scrolling</p>
 </div>
 <div class="scroll-auto">
-  <p>
-    This paragraph does not.
-  </p>
+  <p>This paragraph does not.</p>
 </div>
 ```
 

files/es/web/css/@charset/index.md

@@ -39,10 +39,10 @@ Habiendo diferentes maneras de definir la codificación de caracteres en una hoj
 ## Ejemplos
 
 ```css
-@charset "UTF-8";       /* Establece la codificación de la hoja de estilos a Unicode UTF-8 */
+@charset "UTF-8"; /* Establece la codificación de la hoja de estilos a Unicode UTF-8 */
 @charset 'iso-8859-15'; /* Establece la codificación de la hoja de estilos a Latin-9 (idiomas de Europa Occidental, con símbolo de euro) */
- @charset "UTF-8";      /* Inválido, hay un caracter (espacio) antes de la regla-at */
-@charset UTF-8;         /* Inválido, sin comillas simples o dobles, el valor no es una cadena {{cssxref("<string>")}} de CSS */
+@charset "UTF-8"; /* Inválido, hay un caracter (espacio) antes de la regla-at */
+@charset UTF-8; /* Inválido, sin comillas simples o dobles, el valor no es una cadena {{cssxref("<string>")}} de CSS */
 ```
 
 ## Especificaciones

files/es/web/css/@counter-style/additive-symbols/index.md

@@ -15,8 +15,12 @@ Cuando el valor del descriptor es _cyclic_, _numeric_, _alphabetic_, _symbolic_,
 
 ```css
 additive-symbols: 3 "0";
-additive-symbols: 3 "0", 2 "\2E\20";
-additive-symbols: 3 "0", 2 url(symbol.png);
+additive-symbols:
+  3 "0",
+  2 "\2E\20";
+additive-symbols:
+  3 "0",
+  2 url(symbol.png);
 ```
 
 ### Sintaxis formal
@@ -29,11 +33,11 @@ additive-symbols: 3 "0", 2 url(symbol.png);
 
 ```html
 <ul class="list">
-   <li>One</li>
-   <li>Two</li>
-   <li>Three</li>
-   <li>Four</li>
-   <li>Five</li>
+  <li>One</li>
+  <li>Two</li>
+  <li>Three</li>
+  <li>Four</li>
+  <li>Five</li>
 </ul>
 ```
 

files/es/web/css/@counter-style/index.md

@@ -18,24 +18,31 @@ Initial version of CSS defined a set of useful counter styles. Although more sty
 Each `@counter-style` is identified by a name and has a set of descriptors.
 
 - {{cssxref("@counter-style/system", "system")}}
+
   - : Specifies the algorithm to be used for converting the integer value of a counter to a string representation.
 
 - {{cssxref("@counter-style/negative", "negative")}}
+
   - : Lets the author specify symbols to be appended or prepended to the counter representation if the value is negative.
 
 - {{cssxref("@counter-style/prefix", "prefix")}}
+
   - : Specifies a symbol that should be prepended to the marker representation. Prefixes are added to the representation in the final stage, so in the final representation of the counter, it comes before the negative sign.
 
 - {{cssxref("@counter-style/suffix", "suffix")}}
+
   - : Specifies, similar to the prefix descriptor, a symbol that is appended to the marker representation. Prefixes come after the marker representation.
 
 - {{cssxref("@counter-style/range", "range")}}
+
   - : Defines the range of values over which the conter style is applicable. If a counter style is used to represent a counter value outside of its ranges, the counter style will drop back to its fallback style.
 
 - {{cssxref("@counter-style/pad", "pad")}}
+
   - : Is used when you need the marker representations to be of a minimum length. For example if you want the counters to start start at 01 and go through 02, 03, 04 etc, then the pad descriptor is to be used. For representations larger than the specified pad value, the marker is constructed as normal.
 
 - {{cssxref("@counter-style/fallback", "fallback")}}
+
   - : Specifies a system to fall back into if either the specified system is unable to construct the representation of or a counter value or if the counter value outside the specified range. If the specified fallback also fails to represent the value, then the fallback style's fallback is used, if one is specified. If there are either no fallback systems described or if the chain of fallback systems are unable to represent a counter value, then it will ultimately fall back to the decimal style.
 
 - {{cssxref("@counter-style/symbols", "symbols")}}
@@ -53,6 +60,7 @@ Each `@counter-style` is identified by a name and has a set of descriptors.
     ```
 
 - {{cssxref("@counter-style/additive-symbols", "additive-symbols")}}
+
   - : While the symbols specified in the symbols descriptor is used for constructing marker representation by most algorithms, some systems such as 'additive' rely on _additive tuples_ described in this descriptor. Each additive tuple consists of a counter symbol and a non negative integer weight. The additive tuples must be specified in the descending order of their weights.
 
 - {{cssxref("@counter-style/speak-as", "speak-as")}}
@@ -76,7 +84,7 @@ The above counter style rule can be applied to lists like this:
 
 ```css
 .items {
-   list-style: circled-alpha;
+  list-style: circled-alpha;
 }
 ```
 

files/es/web/css/@counter-style/symbols/index.md

@@ -21,7 +21,7 @@ Los valores posibles para descriptor de símbolos incluyen:
 symbols: A B C D E;
 symbols: "\24B6" "\24B7" "\24B8" D E;
 symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
-symbols: url('first.svg') url('second.svg') url('third.svg');
+symbols: url("first.svg") url("second.svg") url("third.svg");
 symbols: indic-numbers;
 ```
 

files/es/web/css/@font-face/font-display/index.md

@@ -53,8 +53,9 @@ font-display: optional;
 ```css
 @font-face {
   font-family: ExampleFont;
-  src: url(/path/to/fonts/examplefont.woff) format('woff'),
-       url(/path/to/fonts/examplefont.eot) format('eot');
+  src:
+    url(/path/to/fonts/examplefont.woff) format("woff"),
+    url(/path/to/fonts/examplefont.eot) format("eot");
   font-weight: 400;
   font-style: normal;
   font-display: fallback;