es: Fix #16406 Update css/:is (#16536)

* es: Fix #16406 Update css/:is * Apply suggestions from code review Co-authored-by: Juan Vásquez <[email protected]> * Apply suggestions from code review Co-authored-by: Juan Vásquez <[email protected]> --------- Co-authored-by: Graywolf <[email protected]> Co-authored-by: Juan Vásquez <[email protected]>
mdn · Oct 17, 2023 · 38c52d7 · 38c52d7
1 parent 3d1ea5e
commit 38c52d7
Showing 1 changed file with 80 additions and 55 deletions.
diff --git a/files/es/web/css/_colon_is/index.md b/files/es/web/css/_colon_is/index.md
@@ -1,33 +1,55 @@
 ---
-title: ":any"
+title: ":is()"
 slug: Web/CSS/:is
+l10n:
+  sourceCommit: ac2874857a3de0be38430e58068597edf0afa2b2
 ---
 
-{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}}
 
-## Resumen
+La función [pseudo-clase](/es/docs/Web/CSS/Pseudo-classes) de [CSS](/es/docs/Web/CSS) **`:is()`** toma una lista de selectores como argumento y selecciona cualquier elemento que pueda ser seleccionado por uno de los selectores en esa lista. Esto es útil para escribir selectores grandes en una forma más compacta.
 
-La [pseudo-clase](/es/docs/CSS/Pseudo-classes) `:any()` permite construir rápidamente conjuntos de selectores similares estableciendo grupos desde los que cualquier elemento incluido coincidirá. Es una alternativa a tener que repetir el selector completo por uno de los elementos que va a variar.
+> **Nota:** Originalmente llamado `:matches()` (y `:any()`), este selector pasó a llamarse `:is()` en [CSSWG número 3258](https://github.com/w3c/csswg-drafts/issues/3258).
 
-> **Nota:** Esta pseudo-clase está en progreso de ser estandarizada en [_Selectores CSS Nivel 4_](http://dev.w3.org/csswg/selectors4/#matches) bajo el nombre `:matches()`. Es probable que la sintaxis y el nombre de `:-vendor-any()` sean cambiados para reflejar el estándar en el futuro próximo.
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-is.html", "tabbed-shorter")}}
 
-## Sintaxis
+Los pseudoelementos no son válidos en la lista de selección para `:is()`.
+
+### Diferencia entre :is() y :where()
 
-{{csssyntax}}
+La diferencia entre los dos es que `:is()` cuenta para la especificidad del selector general (toma la especificidad de su argumento más específico), mientras que [`:where()`](/es/docs/Web/CSS/:where) tiene un valor de especificidad de 0. Esto se demuestra con el [ejemplo en la página de referencia `:where()`](/es/docs/Web/CSS/:where#examples).
 
-### Valores
+### Análisis de selector permisivo
 
-- `selector`
-  - : Un selector. Puede ser un selector simple o un selector múltiple, comprendido de [selectores simples de CSS 3](http://www.w3.org/TR/css3-selectors/#simple-selectors), y puede incluir el combinador descendiente.
+La especificación define que `:is()` y `:where()` aceptan una [lista de selectores permisivos](https://drafts.csswg.org/selectors-4/#typedef-forgiving-selector-list).
 
-> **Nota:** Los selectores pueden **no** contener pseudo-elementos , y el combinador único combinador permitido es el de descendientes.
+En CSS, cuando se utiliza una lista de selectores, si alguno de los selectores no es válido, toda la lista se considera inválida. Cuando se utiliza `:is()` o `:where()` en lugar de que toda la lista de selectores se considere inválida si uno falla al analizar, el selector incorrecto o no compatible se ignorará y se utilizarán los demás.
+
+```css
+:is(:valid, :unsupported) {
+  /* … */
+}
+```
+
+Seguirá analizando correctamente y haciendo coincidir `:valid` incluso en navegadores que no soportan `:unsupported`, mientras que:
+
+```css
+:valid,
+:unsupported {
+  /* … */
+}
+```
+
+Se ignorará en navegadores que no admitan `:unsupported` incluso si admiten `:valid`.
 
 ## Ejemplos
 
-Por ejemplo, el siguiente CSS:
+### Simplificando selectores de listas
+
+La pseudoclase `:is()` puede simplificar enormemente sus selectores CSS. Por ejemplo, tome el siguiente CSS:
 
 ```css
-/* Listas desordenadas a tres (o más) niveles de profundidad que usarán viñeta de cuadrado */
+/* Las listas desordenadas de 3 (o más) niveles usan una viñeta cuadrada */
 ol ol ul,
 ol ul ul,
 ol menu ul,
@@ -80,46 +102,36 @@ dir dir dir {
 }
 ```
 
-Puede ser reemplazado con:
-
-```css
-/* Listas desordenadas a tres (o más) niveles de profundidad que usarán viñeta de cuadrado */
-:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
-:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
-:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
-  list-style-type: square;
-}
-```
-
-Sin embargo, no se debe usar lo siguiente: (Véase [la sección de rendimiento](#Issues_with_performance_and_specificity) abajo.)
+Puedes reemplazarlo con:
 
 ```css
-:-moz-any(ol, ul, menu, dir)
-  :-moz-any(ol, ul, menu, dir)
-  :-moz-any(ul, menu, dir) {
+/* Las listas desordenadas de 3 (o más) niveles usan una viñeta cuadrada */
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
   list-style-type: square;
 }
 ```
 
-## Notas
+### Simplificando selectores de secciones
 
-Esto es particularmente útil al tratar con [secciones y encabezados](/es/docs/Sections_and_Outlines_of_an_HTML5_document) de HTML5. Puesto que {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, y {{HTMLElement("nav")}} pueden ser anidados, puede ser complicado aplicar estilos sin usar `:any()`.
+La pseudoclase `:is()` es particularmente útil cuando se trata de [secciones y encabezados](/es/docs/Web/HTML/Element/Heading_Elements) HTML. Dado que {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} y {{HTMLElement("nav")}} comúnmente están anidados juntos, sin `:is()`, diseñarlos para que coincidan entre sí puede ser complicado.
 
-Por ejemplo, sin `:any()`, estilizar todos los {{HTMLElement("h1")}} a diferentes niveles de profundidad podría ser muy complicado:
+Por ejemplo, sin `:is()`, diseñar todos los elementos {{HTMLElement("Heading_Elements", "h1")}} en diferentes niveles podría ser muy complicado:
 
 ```css
 /* Nivel 0 */
 h1 {
   font-size: 30px;
 }
+
 /* Nivel 1 */
 section h1,
 article h1,
 aside h1,
 nav h1 {
   font-size: 25px;
 }
-/* Nivelo 2 */
+
+/* Nivel 2 */
 section section h1,
 section article h1,
 section aside h1,
@@ -138,60 +150,67 @@ nav aside h1,
 nav nav h1 {
   font-size: 20px;
 }
-/* Level 3 */
-/* ... ni siquiera lo pienses*/
+
+/* Nivel 3 */
+/* ¡ni lo pienses! */
 ```
 
-Usando `:-any()`, en cambio, es mucho más fácil:
+Sin embargo, usar `:is()` es mucho más fácil:
 
 ```css
 /* Nivel 0 */
 h1 {
   font-size: 30px;
 }
 /* Nivel 1 */
-:-moz-any(section, article, aside, nav) h1 {
+:is(section, article, aside, nav) h1 {
   font-size: 25px;
 }
 /* Nivel 2 */
-:-moz-any(section, article, aside, nav)
-  :-moz-any(section, article, aside, nav)
-  h1 {
+:is(section, article, aside, nav) :is(section, article, aside, nav) h1 {
   font-size: 20px;
 }
 /* Nivel 3 */
-:-moz-any(section, article, aside, nav)
-  :-moz-any(section, article, aside, nav)
-  :-moz-any(section, article, aside, nav)
+:is(section, article, aside, nav)
+  :is(section, article, aside, nav)
+  :is(section, article, aside, nav)
   h1 {
   font-size: 15px;
 }
 ```
 
-### Problemas con rendimiento y especificidad
+### :is() no selecciona pseudoelementos
 
-[Bug 561154](https://bugzilla.mozilla.org/show_bug.cgi?id=561154) sigue un problema con Gecko donde la especificidad de `:-moz-any()` es incorrecta. La implementación hasta Firefox 12 pone a `:-moz-any()` en la categoría de reglas universales, por lo que usarlo como el selector más hacia la derecha será más lento que usando un ID, una clase o etiqueta como el selector a la derecha.
+La pseudoclase `:is()` no funciona con los pseudoelementos. Entonces en lugar de esto:
 
-Por ejemplo
+```css example-bad
+some-element:is(::before, ::after) {
+  display: block;
+}
+```
 
-```css
-.a> : -moz-any(.b, .c) {
+o esto:
+
+```css example-bad
+:is(some-element::before, some-element::after) {
+  display: block;
 }
 ```
 
-es más lento que:
+en su lugar haz:
 
-```css
-.a > .b,
-.a > .c {
+```css example-good
+some-element::before,
+some-element::after {
+  display: block;
 }
 ```
 
-y lo siguiente es rápido:
+## Sintaxis
 
-```css
-:-moz-any(.a, .d) > .b,
-:-moz-any(.a, .d) > .c {
+```css-nolint
+:is(<forgiving-selector-list>) {
+  /* ... */
 }
 ```
 
@@ -202,3 +221,9 @@ y lo siguiente es rápido:
 ## Compatibilidad con navegadores
 
 {{Compat}}
+
+## Véase también
+
+- {{CSSxRef(":where", ":where()")}} - Como `:is()`, pero con 0 [especificidad](/es/docs/Web/CSS/Specificity).
+- [Lista de selección](/es/docs/Web/CSS/Selector_list)
+- [Componentes web](/es/docs/Web/API/Web_components)