diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index 1d4b11bb0b2e10..b6b5e6ad7f4eff 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -1804,6 +1804,7 @@ /es/docs/Web/CSS/:not() /es/docs/Web/CSS/:not /es/docs/Web/CSS/@media/altura /es/docs/Web/CSS/@media/height /es/docs/Web/CSS/@media/resolución /es/docs/Web/CSS/@media/resolution +/es/docs/Web/CSS/Adjacent_sibling_combinator /es/docs/Web/CSS/Next-sibling_combinator /es/docs/Web/CSS/CSS_Animations/Detectar_soporte_de_animación_CSS /es/docs/orphaned/Web/CSS/CSS_Animations/Detecting_CSS_animation_support /es/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support /es/docs/orphaned/Web/CSS/CSS_Animations/Detecting_CSS_animation_support /es/docs/Web/CSS/CSS_Animations/Usando_animaciones_CSS /es/docs/Web/CSS/CSS_animations/Using_CSS_animations @@ -1860,6 +1861,7 @@ /es/docs/Web/CSS/Descendant_selectors /es/docs/Web/CSS/Descendant_combinator /es/docs/Web/CSS/Elemento_reemplazo /es/docs/Web/CSS/Replaced_element /es/docs/Web/CSS/Especificidad /es/docs/Web/CSS/Specificity +/es/docs/Web/CSS/General_sibling_combinator /es/docs/Web/CSS/Subsequent-sibling_combinator /es/docs/Web/CSS/Gradiente /es/docs/Web/CSS/gradient /es/docs/Web/CSS/Herramientas /es/docs/conflicting/Web/CSS /es/docs/Web/CSS/Introducción/Content /es/docs/Learn/CSS/Howto/Generated_content @@ -1876,8 +1878,8 @@ /es/docs/Web/CSS/Selectores_CSS /es/docs/Web/CSS/CSS_selectors /es/docs/Web/CSS/Selectores_CSS/Usando_la_pseudo-clase_:target_en_selectores /es/docs/Web/CSS/CSS_selectors/Using_the_:target_pseudo-class_in_selectors /es/docs/Web/CSS/Selectores_atributo /es/docs/Web/CSS/Attribute_selectors -/es/docs/Web/CSS/Selectores_hermanos_adyacentes /es/docs/Web/CSS/Adjacent_sibling_combinator -/es/docs/Web/CSS/Selectores_hermanos_generales /es/docs/Web/CSS/General_sibling_combinator +/es/docs/Web/CSS/Selectores_hermanos_adyacentes /es/docs/Web/CSS/Next-sibling_combinator +/es/docs/Web/CSS/Selectores_hermanos_generales /es/docs/Web/CSS/Subsequent-sibling_combinator /es/docs/Web/CSS/Sintaxis_definición_de_valor /es/docs/Web/CSS/Value_definition_syntax /es/docs/Web/CSS/Texto_CSS /es/docs/Web/CSS/CSS_text /es/docs/Web/CSS/Tools /es/docs/conflicting/Web/CSS diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index 0240f532408de5..10b4a0c9fe4f0f 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -6547,10 +6547,6 @@ "modified": "2020-10-15T21:43:18.021Z", "contributors": ["SJW", "angelf", "MilkSnake"] }, - "Web/CSS/Adjacent_sibling_combinator": { - "modified": "2019-03-23T22:39:30.908Z", - "contributors": ["alkaithil"] - }, "Web/CSS/At-rule": { "modified": "2019-03-23T22:29:55.371Z", "contributors": ["Legioinvicta", "israel-munoz"] @@ -6865,10 +6861,6 @@ "modified": "2019-03-23T23:13:24.480Z", "contributors": ["ExE-Boss", "Makiber"] }, - "Web/CSS/General_sibling_combinator": { - "modified": "2019-03-23T22:39:33.429Z", - "contributors": ["alkaithil"] - }, "Web/CSS/ID_selectors": { "modified": "2020-10-15T21:52:30.474Z", "contributors": ["lajaso", "israel-munoz"] @@ -6889,6 +6881,10 @@ "modified": "2019-03-23T23:21:23.902Z", "contributors": ["ExE-Boss", "Sebastianz", "teoli", "jota1410"] }, + "Web/CSS/Next-sibling_combinator": { + "modified": "2019-03-23T22:39:30.908Z", + "contributors": ["alkaithil"] + }, "Web/CSS/Pseudo-classes": { "modified": "2020-02-22T08:04:35.419Z", "contributors": [ @@ -6944,6 +6940,10 @@ "Remohir" ] }, + "Web/CSS/Subsequent-sibling_combinator": { + "modified": "2019-03-23T22:39:33.429Z", + "contributors": ["alkaithil"] + }, "Web/CSS/Syntax": { "modified": "2020-09-29T20:54:10.526Z", "contributors": ["lucasmmaidana", "joseanpg", "mili01gm", "Derhks"] diff --git a/files/es/mdn/writing_guidelines/howto/write_an_api_reference/sidebars/index.md b/files/es/mdn/writing_guidelines/howto/write_an_api_reference/sidebars/index.md new file mode 100644 index 00000000000000..27577c45adffd1 --- /dev/null +++ b/files/es/mdn/writing_guidelines/howto/write_an_api_reference/sidebars/index.md @@ -0,0 +1,136 @@ +--- +title: Menús de referencia de la API +slug: MDN/Writing_guidelines/Howto/Write_an_API_reference/Sidebars +l10n: + sourceCommit: 0c163056cfe83fba519b757f15d2e20f83eddaff +--- + +{{MDNSidebar}} + +Puede incluir un menú lateral personalizado en las páginas de referencia de la API para que muestre enlaces a interfaces relacionadas, tutoriales y otros recursos relevantes solo para esa API. +En este artículo se explica cómo. + +## Crear un menú lateral + +Debes seguir los siguientes tres pasos para crear el menú lateral de la API: + +1. Cree sus páginas de referencia de API. +2. Añade una entrada para tu API en particular al archivo [`GroupData.json`](https://github.com/mdn/content/blob/main/files/jsondata/GroupData.json). +3. Utiliza la macro [`APIRef`](https://github.com/mdn/yari/blob/main/kumascript/macros/APIRef.ejs) para insertar el menú lateral en cada página en la que quieras mostrarlo. + +Repasemos cada uno de estos pasos a su vez. +El ejemplo al que nos referiremos en este artículo es la [API Fetch](/es/docs/Web/API/Fetch_API). + +### Añadir una entrada a GroupData.json + +El archivo `GroupData.json` contiene todos los datos relacionados con los enlaces que deben aparecer en los menús laterales de referencia de la API. +Cuando se invoca, la macro `APIRef` toma un nombre de API que se le da como parámetro, busca ese nombre en `GroupData.json`, crea un menú lateral adecuado y la inserta en la página. + +Para añadir una entrada a `GroupData.json`, debes: + +1. Asegúrate de tener una cuenta de [GitHub](https://github.com/). +2. Haga una copia del repositorio de contenido de MDN, cree una nueva rama para contener sus cambios y clone el repositorio localmente. +3. Revise su nueva rama antes de comenzar a trabajar y asegúrese de enviar sus cambios en ella después de terminar. +4. Cree una solicitud de incorporación para que el equipo de MDN pueda revisar su trabajo y solicitar cambios si es necesario. + +El archivo `GroupData.json` se puede encontrar dentro del directorio `files/jsondata/`. +Mirándolo, verás una estructura JSON gigante, con cada API teniendo sus propios miembros. +El nombre es el nombre de la API y el valor es un objeto que contiene varios submiembros que definen los enlaces del menú lateral que se creará. + +Por ejemplo, consulte la página [API Fetch](/es/docs/Web/API/Fetch_API) en MDN. +La entrada correspondiente en `GroupData.json` se ve así: + +```json +"Fetch API": { + "overview": [ "Fetch API"], + "interfaces": [ "Headers", + "Request", + "Response", + "FetchController", + "FetchObserver", + "FetchSignal", + "ObserverCallback" ], + "methods": [ "fetch()" ], + "properties": [], + "events": [] +}, +``` + +Como puede ver, hemos utilizado "Fetch API" para el nombre, y dentro del valor del objeto incluimos varios submiembros. + +#### Submiembros a incluir dentro de una entrada de GroupData + +Esta sección enumera todos los submiembros que podría incluir en una entrada de `GroupData`. + +Tenga en cuenta que la mayoría de los valores incluidos dentro de los submiembros enumerados equivalen tanto al texto del enlace como a los slugs añadidos al final de la página principal del índice de la API — `https://developer.mozilla.org//docs/Web/API` — para crear la URL final del enlace mostrado. +Entonces, por ejemplo, "Response" resultará en la creación de un enlace como este: + +```html +
  • Response
    • +``` + +Hay algunas excepciones. +Por ejemplo, el submiembro "guías" contiene uno o más conjuntos de información de enlace (título y slug) que define enlaces a guías/tutoriales asociados. +En este caso, los slugs se adjuntan al final de la raíz de MDN docs — `https://developer.mozilla.org/_/docs` — lo que permite incluir un artículo en cualquier parte de MDN. + +Estos son los miembros disponibles. +Todos estos son técnicamente opcionales, pero se recomienda encarecidamente que en lugar de omitirlos, incluya arreglos vacíos. + +1. `"overview"`: el valor es un arreglo, dentro de la cual se incluye el slug de la página de descripción general de la API, si la hay. + "Fetch API" da como resultado un enlace a [https://developer.mozilla.org/es/docs/Web/API/Fetch_API](/es/docs/Web/API/Fetch_API). +2. `"interfaces"`: el valor es un arreglo en el que debe enumerar todas las interfaces que forman parte de esa API. + "Response" da como resultado un enlace a [https://developer.mozilla.org/es/docs/Web/API/Response](/es/docs/Web/API/Response). +3. `"methods"`: el valor es un arreglo que debe contener cualquier método que la especificación agregue a las interfaces asociadas con otras API, como los métodos de instanciación creados en {{domxref ("Navigator")}} o {{domxref("Window")}}. + Si hay una gran cantidad de métodos, es posible que desees considerar solo enumerar los más populares o ponerlos en primer lugar en la lista. + "fetch()" da como resultado un enlace a [https://developer.mozilla.org/es/docs/Web/API/fetch](/es/docs/Web/API/fetch). + _No_ agregue métodos que son miembros de interfaces que son propiedad de la misma API. +4. `"properties"` — el valor es un arreglo que debe contener todas las propiedades asociadas con la API. + Esto puede incluir propiedades que son miembros de interfaces definidas en la especificación de la API y propiedades que la API define en otras interfaces. + Si hay un gran número de propiedades, es posible que desees considerar solo enumerar las más populares o ponerlas en primer lugar en la lista. + "Headers.append" da como resultado un enlace a [https://developer.mozilla.org/es/docs/Web/API/Headers/append](/es/docs/Web/API/Headers/append). +5. `"events"`: el valor es una matriz que debe contener todos los eventos asociados con la API, definidos en la especificación de la API o en otro lugar. + Si hay una gran cantidad de eventos, es posible que desees considerar solo enumerar los más populares o ponerlos en primer lugar en la lista. + "animationstart" da como resultado un enlace a [https://developer.mozilla.org/es/docs/Web/Events/animationstart](/es/docs/Web/API/Element/animationstart_event). +6. `"guides"`: el valor es un arreglo que contiene uno o más objetos que definen enlaces a guías que explican cómo usar la API. + Cada objeto contiene dos submiembros: "url", que contiene la URL parcial que apunta al artículo de guía, y "title", que define la prueba de enlace para el enlace. + A modo de ejemplo, el siguiente objeto: + + ```json + { + "url": "/docs/Web/API/Detecting_device_orientation", + "title": "Detectando la orientación del dispositivo" + } + ``` + + Crea un enlace con el título "Detectando la orientación del dispositivo", que apunta a [https://developer.mozilla.org/es/docs/Web/API/Device_orientation_events/Detecting_device_orientation](/es/docs/Web/API/Device_orientation_events/Detecting_device_orientation). + +7. `"diccionarios"`: una serie de cadenas que enumeran todos los diccionarios que forman parte de la API. + En general, aquí solo se deben enumerar los diccionarios utilizados por más de una propiedad o método, a menos que tengan un significado especial o sea probable que requieran referencias de varias páginas. + "CryptoKeyPair" da como resultado un enlace a [https://developer.mozilla.org/es/docs/Web/API/CryptoKeyPair](/es/docs/Web/API/CryptoKeyPair). + > **Nota:** MDN se está alejando de documentar diccionarios por separado. + > Cuando es posible, ahora se describen como objetos en los lugares donde se usan. +8. `"types"`: un arreglo de definiciones de tipo y tipos enumerados definidos por la API. + Puede optar por enumerar solo aquellos que son de especial importancia o a los que se hace referencia desde varias páginas, con el fin de mantener la lista corta. + > **Nota:** MDN se está alejando de documentar por separado las definiciones de tipo. + > Cuando es posible, ahora se describen como valores en los lugares donde se utilizan. +9. `"callbacks"`: el valor es un arreglo que contiene una lista de todos los tipos de _callback_ definidos para la API. + Puede que le resulte innecesario utilizar este grupo, incluso en las API que incluyen tipos de _callbacks_, ya que a menudo no son útiles para documentar por separado. + +## Etiquetas utilizadas por los menús laterales + +Algunos submiembros se descubren automáticamente en las páginas secundarias, en función de las etiquetas de página. +Las páginas bajo la API de nivel superior se rastrean cada vez que se representa la barra lateral, y las entradas se crean automáticamente para métodos (etiqueta "Method"), propiedades (etiqueta "Property") y constructores (etiqueta "Constructor"). + +Los submiembros también se decoran automáticamente con iconos de advertencia basados en etiquetas. +Se añaden decoraciones para submiembros experimentales (etiqueta "Experimental"), no estándar (etiqueta "Non Standard" o "Non-standard") o en desuso (etiqueta "Deprecated"). + +Más información sobre el procesamiento basado en etiquetas está disponible [en la fuente APIRef](https://github.com/mdn/yari/blob/main/kumascript/macros/APIRef.ejs). + +## Insertar el menú lateral + +Una vez que hayas agregado una entrada para tu API en `GroupData.json`, la hayas enviado como una solicitud de incorporación y se haya aceptado el cambio en el repositorio principal, puedes incluirla en las páginas de referencia de tu API utilizando la macro [`APIRef`](https://github.com/mdn/yari/blob/main/kumascript/macros/APIRef.ejs), que toma el nombre que usaste para tu API en GroupData como parámetro. +Como ejemplo, el menú lateral de la [API WebVR](/es/docs/Web/API/WebVR_API) se incluye en sus páginas con lo siguiente: + +```plain +\{{APIRef("WebVR API")}} +``` diff --git a/files/es/web/css/adjacent_sibling_combinator/index.md b/files/es/web/css/next-sibling_combinator/index.md similarity index 92% rename from files/es/web/css/adjacent_sibling_combinator/index.md rename to files/es/web/css/next-sibling_combinator/index.md index 7559ef9bb31bf9..bb7d5b10fc676f 100644 --- a/files/es/web/css/adjacent_sibling_combinator/index.md +++ b/files/es/web/css/next-sibling_combinator/index.md @@ -1,6 +1,7 @@ --- title: Selectores de hermanos adyacentes -slug: Web/CSS/Adjacent_sibling_combinator +slug: Web/CSS/Next-sibling_combinator +original_slug: Web/CSS/Adjacent_sibling_combinator --- {{CSSRef("Selectors")}} diff --git a/files/es/web/css/general_sibling_combinator/index.md b/files/es/web/css/subsequent-sibling_combinator/index.md similarity index 89% rename from files/es/web/css/general_sibling_combinator/index.md rename to files/es/web/css/subsequent-sibling_combinator/index.md index 1469beade31eab..f2423cb906c0be 100644 --- a/files/es/web/css/general_sibling_combinator/index.md +++ b/files/es/web/css/subsequent-sibling_combinator/index.md @@ -1,6 +1,7 @@ --- title: Selectores de hermanos generales -slug: Web/CSS/General_sibling_combinator +slug: Web/CSS/Subsequent-sibling_combinator +original_slug: Web/CSS/General_sibling_combinator --- {{CSSRef("Selectors")}} diff --git a/files/fr/web/css/css_images/using_css_gradients/index.md b/files/fr/web/css/css_images/using_css_gradients/index.md index 45efddc6948792..3578549bd88cc6 100644 --- a/files/fr/web/css/css_images/using_css_gradients/index.md +++ b/files/fr/web/css/css_images/using_css_gradients/index.md @@ -1,17 +1,19 @@ --- title: Utilisation de dégradés CSS slug: Web/CSS/CSS_images/Using_CSS_gradients +l10n: + sourceCommit: f79a491594ebb5634949ed31b26155973a39166e --- {{CSSRef}} Les **dégradés CSS** sont représentés par le type de donnée [``](/fr/docs/Web/CSS/gradient) qui est un sous-ensemble du type [``](/fr/docs/Web/CSS/image). L'utilisation de dégradés CSS permet d'afficher des transitions douces entre deux couleurs ou plus. Il existe trois sortes de dégradés : -- Les dégradés linéaires (créés avec la fonction [`linear-gradient()`]()), -- Les dégradés radiaux (créés avec la fonction [`radial-gradient()`]()), -- Les dégradés coniques (créés avec la fonction [`conic-gradient()`]()). +- Les dégradés linéaires (créés avec la fonction [`linear-gradient()`](/fr/docs/Web/CSS/gradient/linear-gradient)), +- Les dégradés radiaux (créés avec la fonction [`radial-gradient()`](/fr/docs/Web/CSS/gradient/radial-gradient)), +- Les dégradés coniques (créés avec la fonction [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient)). -Les dégradés peuvent être répétés avec les fonctions respectives [`repeating-linear-gradient()`](), [`repeating-radial-gradient()`]() et [`repeating-conic-gradient()`](). +Les dégradés peuvent être répétés avec les fonctions respectives [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient), [`repeating-radial-gradient()`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient) et [`repeating-conic-gradient()`](/fr/docs/Web/CSS/gradient/repeating-conic-gradient). Les dégradés peuvent être utilisés à chaque endroit où on peut utiliser une image (par exemple les arrière-plans). Les dégradés étant générés dynamiquement, ils permettent d'éviter d'utiliser des images matricielles pour ces effets, le temps de téléchargement et la bande passante utilisée sont réduits. En outre, comme le dégradé est généré par le navigateur, les objets concernés se comporteront mieux en cas de zoom et votre mise en page peut être ajustée de manière plus flexible. @@ -25,23 +27,21 @@ Pour créer un dégradé linéaire, définissez un point de départ et une direc Pour définir un dégradé sous sa forme la plus simple, il suffit d'avoir deux couleurs. Celles-ci permettent de placer ce qu'on appellera des arrêts de couleur (color stops en anglais). Il est nécessaire d'en avoir au moins deux, mais il est possible d'en avoir plus. -#### HTML - -```html +```html hidden
    ``` -#### CSS +```css hidden +div { + width: 120px; + height: 120px; +} +``` ```css .lineaire-simple { background: linear-gradient(blue, pink); } - -div { - width: 120px; - height: 120px; -} ``` #### Résultat @@ -52,23 +52,21 @@ div { Par défaut, les dégradés linéaires vont du haut vers le bas. Il est possible de changer leur orientation en indiquant une direction. -#### HTML - -```html +```html hidden
    ``` -#### CSS +```css hidden +div { + width: 120px; + height: 120px; +} +``` ```css .degrade-horizontal { background: linear-gradient(to right, blue, pink); } - -div { - width: 120px; - height: 120px; -} ``` #### Résultat @@ -79,23 +77,21 @@ div { Il est également possible d'orienter le dégradé sur une diagonale allant d'un coin à un autre. -#### HTML - -```html +```html hidden
    ``` -#### CSS +```css hidden +div { + width: 120px; + height: 120px; +} +``` ```css .degrade-diagonal { background: linear-gradient(to bottom right, blue, pink); } - -div { - width: 200px; - height: 100px; -} ``` #### Résultat @@ -106,23 +102,21 @@ div { Si on veut choisir plus précisément la direction, on pourra fournir un angle au dégradé. -#### HTML - -```html +```html hidden
    ``` -#### CSS +```css hidden +div { + width: 120px; + height: 120px; +} +``` ```css .degrade-angulaire { background: linear-gradient(70deg, blue, pink); } - -div { - width: 120px; - height: 120px; -} ``` #### Résultat @@ -131,7 +125,7 @@ div { L'angle est spécifié entre une ligne verticale et la ligne de dégradé, dans le sens des aiguilles d'une montre. Autrement dit, `0deg` crée un dégradé vertical de bas en haut, tandis que `90deg` génère un dégradé horizontal de la gauche vers la droite. Les valeurs négatives font progresser l'angle dans le sens inverse des aiguilles d'une montre : -![](linear_red_angles.png) +![Quatre carrés indiquant les angles avec les dégradés correspondants dessinés sur chaque. On y voit que le carré avec 0 degré a un dégradé du rouge vers le blanc de bas en haut, celui avec 90 degrés de gauche à droite, celui 180 degrés de haut en bas et celui de -90 degrés de droite à gauche.](linear_red_angles.png) ## Créer des effets et manipuler les couleurs @@ -141,23 +135,21 @@ L'ensemble des types de dégradés CSS sont décrits par une suite de couleurs a Les dégradés CSS ne sont pas limités à deux couleurs, il est possible d'en utiliser autant que souhaité. Par défaut, les couleurs sont espacées de façon homogène : -#### HTML - -```html +```html hidden
    ``` -#### CSS +```css hidden +div { + width: 120px; + height: 120px; +} +``` ```css .degrade-espacement-auto { background: linear-gradient(red, yellow, blue, orange); } - -div { - width: 120px; - height: 120px; -} ``` #### Résultat @@ -168,23 +160,21 @@ div { Les arrêts de couleurs sont des points sur la ligne de dégradé qui doivent avoir une couleur précise. Leur emplacement peut être spécifié sous la forme de zéro, un ou deux pourcentages de la longueur de la ligne, ou d'une longueur absolue. Vous pouvez en spécifier autant que vous voulez pour obtenir l'effet désiré. Si vous spécifiez un pourcentage, `0%` indique le point de départ, et `100%` le point d'arrivée ; il est cependant possible d'utiliser des valeurs en dehors de cet intervalle si nécessaire pour obtenir l'effet désiré. Si une position n'est pas définie, la position de cet arrêt de couleur sera automatiquement calculée (par défaut le premier arrêt est situé à 0%, le dernier à 100% et les autres répartis de façon homogène par rapport à leurs voisins). -#### HTML - -```html +```html hidden
    ``` -#### CSS +```css hidden +div { + width: 120px; + height: 120px; +} +``` ```css .degrade-multicolore { background: linear-gradient(to left, lime, lime 28px, red 77%, cyan); } - -div { - width: 120px; - height: 120px; -} ``` #### Résultat @@ -195,20 +185,18 @@ div { Pour créer une ligne franche entre deux couleurs et avoir deux bandes plutôt qu'un dégradé progressif, on peut définir deux points d'arrêt de couleur au même endroit. Dans l'exemple suivant, on a deux couleurs pour un même emplacement de point d'arrêt situé à `50%` : -#### HTML - -```html +```html hidden
    ``` -#### CSS - -```css +```css hidden div { width: 120px; height: 120px; } +``` +```css .ligne-franche { background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%); } @@ -222,23 +210,21 @@ div { Par défaut, les dégradés passent linéairement d'une couleur à une autre. On peut également utiliser une indication afin de définir l'emplacement où la couleur médiane sera atteinte. Dans l'exemple qui suit, plutôt que d'attendre la moitié de la transition au milieu, on la place à 10% de l'axe. -#### HTML - -```html +```html hidden
    ``` -#### CSS - -```css +```css hidden div { width: 120px; height: 120px; float: left; margin-right: 10px; } +``` +```css .indication-couleur { background: linear-gradient(blue, 10%, pink); } @@ -312,7 +298,7 @@ div { {{EmbedLiveSample("", 150, 150)}} -Dans le premier exemple ci-avant, le bleu vert commence au début puis progresse jusqu'à 20% avant de transitionner vers le rouge pendant les 10% qui suivent. Le rouge reste vif entre 30% et 45% avant de transitionner vers un cyan pendant 15% etc. +Dans le premier exemple ci-dessus, le vert citron commence au début puis progresse jusqu'à 20% avant de transitionner vers le rouge pendant les 10% qui suivent. Le rouge reste vif entre 30% et 45% avant de transitionner vers un cyan, le cyan restera vif pendant 15%, et ainsi de suite. Dans le deuxième exemple, le deuxième point d'arrêt pour chaque couleur est situé au même emplacement que le premier point d'arrêt pour la couleur suivante et on obtient donc des bandes successives. @@ -352,24 +338,22 @@ div { Les dégradés gèrent la transparence. Vous pouvez l'utiliser, par exemple, en superposant plusieurs fonds pour créer des effets sur les images. Par exemple : -#### HTML - -```html +```html hidden
    ``` -#### CSS +```css hidden +div { + width: 300px; + height: 150px; +} +``` ```css .superposition { background: linear-gradient(to right, transparent, mistyrose), url("critters.png"); } - -div { - width: 300px; - height: 150px; -} ``` #### Résultat @@ -380,13 +364,16 @@ div { Il est possible d'empiler différents dégradés. Il suffit que les dégradés sur les couches supérieures ne soient pas complètement opaques pour qu'on puisse voir ceux des couches inférieures. -#### HTML - -```html +```html hidden
    ``` -#### CSS +```css hidden +div { + width: 120px; + height: 120px; +} +``` ```css .linear-gradient { @@ -397,11 +384,6 @@ Il est possible d'empiler différents dégradés. Il suffit que les dégradés s ), linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%), linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%); } - -div { - width: 200px; - height: 200px; -} ``` #### Résultat @@ -414,9 +396,7 @@ Les dégradés radiaux sont similaires aux dégradés linéaires mais permettent ### Un dégradé radial simple -> **Note :** Dans les exemples suivants, nous continuons d'utiliser le même [`
    `](/fr/docs/Web/HTML/Element/div) et, pour ne pas surcharger la lecture, n'afficherons plus que la règle CSS spécifique au dégradé. - -De la même façon qu'avec les dégradés linéaires, il suffit de deux couleurs pour créer un dégradé radial. +De la même façon qu'avec les dégradés linéaires, il suffit de deux couleurs pour créer un dégradé radial. Par défaut, le centre du degradé se situe à la position 50% 50% et le dégradé a la forme d'une ellipse qui correspond aux proportions de sa boîte englobante : ```html hidden
    @@ -514,7 +494,7 @@ div { } ``` -{{EmbedLiveSample("", 270, 130)}} +{{EmbedLiveSample("utiliser_closest-side_pour_les_ellipses", 270, 130)}} #### Utiliser `farthest-corner` pour les ellipses @@ -543,7 +523,7 @@ div { } ``` -{{EmbedLiveSample("", 240, 130)}} +{{EmbedLiveSample("utiliser_farthest-corner_pour_les_ellipses", 240, 130)}} #### Utiliser `closest-side` pour les cercles @@ -572,7 +552,7 @@ div { } ``` -{{EmbedLiveSample("", 240, 150)}} +{{EmbedLiveSample("utiliser_closest-side_pour_les_cercles", 240, 150)}} #### Longueur ou pourcentage pour le dimensionnement des ellipses @@ -601,7 +581,7 @@ div { } ``` -{{EmbedLiveSample('', 240, 150)}} +{{EmbedLiveSample('longueur_ou_pourcentage_pour_le_dimensionnement_des_ellipses', 240, 150)}} #### Longueur pour le dimensionnement des cercles @@ -624,7 +604,7 @@ div { } ``` -{{EmbedLiveSample('', 240, 150)}} +{{EmbedLiveSample('longueur_pour_le_dimensionnement_des_cercles', 240, 150)}} ### Empiler des dégradés radiaux @@ -667,7 +647,7 @@ div { ## Dégradés coniques -La fonction **`conic-gradient()`** permet de créer une image composée d'un dégradé de couleurs tournant autour d'un point (plutôt qu'une progression radiale). On pourra ainsi utiliser des dégradés coniques pour créer des camemberts ou des éventails de couleurs. +La fonction [CSS](/fr/docs/Web/CSS) **`conic-gradient()`** permet de créer une image composée d'un dégradé de couleurs tournant autour d'un point (plutôt qu'une progression radiale). On pourra ainsi utiliser des dégradés coniques pour créer des camemberts ou des [cercles chromatiques](/fr/docs/Glossary/Color_wheel). La syntaxe de `conic-gradient()` est semblable à celle de `radial-gradient()` mais les arrêts de couleur seront placés le long d'un arc plutôt que le long de la ligne émise depuis le centre. Les arrêts de couleur seront exprimés en pourcentages ou en degrés, ils ne pourront pas être exprimés sous forme de longueurs absolues. @@ -752,13 +732,13 @@ div { ## Répéter des dégradés -Les propriétés [`linear-gradient()`](), [`radial-gradient()`]() et [`conic-gradient()`]() ne permettent pas automatiquement de répéter les arrêts de couleur. Toutefois, les fonctions [`repeating-linear-gradient()`](), [`repeating-radial-gradient()`]() et [`repeating-conic-gradient()`]() offrent cette fonctionnalité. +Les propriétés [`linear-gradient()`](/fr/docs/Web/CSS/gradient/linear-gradient), [`radial-gradient()`](/fr/docs/Web/CSS/gradient/radial-gradient) et [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient) ne permettent pas automatiquement de répéter les arrêts de couleur. Toutefois, les fonctions [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient), [`repeating-radial-gradient()`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient) et [`repeating-conic-gradient()`](/fr/docs/Web/CSS/gradient/repeating-conic-gradient) offrent cette fonctionnalité. -La taille de la portion (ligne ou arc) répétée est donnée par la longueur (ou l'arc) entre le premier arrêt de couleur et le dernier arrêt de couleur. Si on n'indique pas de coordonnées pour le premier et le dernier arrêts, ceux-ci prendront respectivement 0 et 100%. Si aucun n'est déclaré, la ligne du dégradé occupera 100%, ce qui signifie que les dégradés linéaires et coniques ne se répèteront pas et que le dégradé radial ne se répètera que si le rayon du dégradé est plus petit que la distance entre le centre du dégradé et le coin le plus proche. Si le premier arrêt de couleur est déclaré et que la valeur est supérieure à 0, le dégradé se répètera, car la taille de la ligne ou de l'arc est donnée par la différence entre le premier et le dernier arrêt de couleur, qui vaudra alors ici moins de 100% ou 360 degrés. +La taille de la portion (ligne ou arc) répétée est donnée par la longueur (ou l'arc) entre le premier arrêt de couleur et le dernier arrêt de couleur. Si on n'indique pas de coordonnées pour le premier et le dernier arrêts, ceux-ci prendront respectivement 0 et 100%. Si aucun n'est déclaré, la ligne du dégradé occupera 100%, ce qui signifie que les dégradés linéaires et coniques ne se répèteront pas et que le dégradé radial ne se répètera que si le rayon du dégradé est plus petit que la distance entre le centre du dégradé et le coin le plus éloigné. Si le premier arrêt de couleur est déclaré et que la valeur est supérieure à 0, le dégradé se répètera, car la taille de la ligne ou de l'arc est donnée par la différence entre le premier et le dernier arrêt de couleur, qui vaudra alors ici moins de 100% ou 360 degrés. ### Répéter un dégradé linéaire -Dans cet exemple, on utilise la fonction [`repeating-linear-gradient()`]() afin de créer un dégradé linéaire qui se répète le long d'une ligne. Les couleurs forment un cycle lorsque le motif se répète. +Dans cet exemple, on utilise la fonction [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient) afin de créer un dégradé linéaire qui se répète le long d'une ligne. Les couleurs forment un cycle lorsque le motif se répète. ```html hidden
    @@ -888,6 +868,33 @@ div { 63, 0.25 ) 5px, rgba(143, 77, 63, 0.25) 10px); + + background: repeating-linear-gradient( + 90deg, + transparent 0 50px, + rgba(255, 127, 0, 0.25) 50px 56px, + transparent 56px 63px, + rgba(255, 127, 0, 0.25) 63px 69px, + transparent 69px 116px, + rgba(255, 206, 0, 0.25) 116px 166px + ), repeating-linear-gradient( + 0deg, + transparent 0 50px, + rgba(255, 127, 0, 0.25) 50px 56px, + transparent 56px 63px, + rgba(255, 127, 0, 0.25) 63px 69px, + transparent 69px 116px, + rgba(255, 206, 0, 0.25) 116px 166px + ), repeating-linear-gradient( + -45deg, + transparent 0 5px, + rgba(143, 77, 63, 0.25) 5px 10px + ), repeating-linear-gradient(45deg, transparent 0 5px, rgba( + 143, + 77, + 63, + 0.25 + ) 5px 10px); } ``` @@ -895,7 +902,7 @@ div { ### Répéter des dégradés radiaux -Ici, on utilise la fonction [`repeating-radial-gradient()`]() afin de créer un dégradé radial qui se répète. Les couleurs utilisées forment un cycle lorsque le motif unitaire recommence. +Ici, on utilise la fonction [`repeating-radial-gradient()`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient) afin de créer un dégradé radial qui se répète. Les couleurs utilisées forment un cycle lorsque le motif unitaire recommence. ```html hidden
    @@ -963,12 +970,12 @@ div { - Les fonctions de manipulation des dégradés : - - [`linear-gradient`]() - - [`radial-gradient`]() - - [`conic-gradient`]() - - [`repeating-linear-gradient`]() - - [`repeating-radial-gradient`]() - - [`repeating-conic-gradient`]() + - [`linear-gradient`](/fr/docs/Web/CSS/gradient/linear-gradient) + - [`radial-gradient`](/fr/docs/Web/CSS/gradient/radial-gradient) + - [`conic-gradient`](/fr/docs/Web/CSS/gradient/conic-gradient) + - [`repeating-linear-gradient`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient) + - [`repeating-radial-gradient`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient) + - [`repeating-conic-gradient`](/fr/docs/Web/CSS/gradient/repeating-conic-gradient) - Les types de donnée CSS relatifs aux dégradés : @@ -981,4 +988,5 @@ div { - [`background-image`](/fr/docs/Web/CSS/background-image) - [Une bibliothèque de motifs de dégradés CSS, créée par Lea Verou](https://lea.verou.me/css3patterns/) +- [Une bibliothèque de motifs de dégragés, par Estelle Weyl](https://standardista.com/cssgradients/) - [Un générateur de dégradé CSS](https://cssgenerator.org/gradient-css-generator.html) diff --git a/files/fr/web/css/filter/index.md b/files/fr/web/css/filter/index.md index 81d1d471ab0921..31cb09e2f08aa8 100644 --- a/files/fr/web/css/filter/index.md +++ b/files/fr/web/css/filter/index.md @@ -1,22 +1,21 @@ --- title: filter slug: Web/CSS/filter +l10n: + sourceCommit: 5c3c25fd4f2fbd7a5f01727a65c2f70d73f1880a --- -{{CSSRef}}{{SeeCompatTable}} +{{CSSRef}} -La propriété CSS **`filter`** permet d'appliquer des filtres et d'obtenir des effets graphiques de flou, de saturation, etc. Les filtres sont généralement utilisés pour ajuster le rendu d'une image, d'un arrière-plan ou des bordures. +La propriété [CSS](/fr/docs/Web/CSS) **`filter`** permet d'appliquer des filtres et d'obtenir des effets graphiques de flou, de saturation, etc. Les filtres sont généralement utilisés pour ajuster le rendu d'une image, d'un arrière-plan ou des bordures. -Plusieurs fonctions sont incluses dans le standard CSS et permettent d'obtenir des effets prédéfinis. Il est également possible d'utiliser un filtre SVG via une URL référençant [un élément SVG `filter`](/fr/docs/Web/SVG/Element/filter). +Plusieurs [fonctions](#fonctions) comme `blur()` et `contrast()` sont incluses dans le standard CSS et permettent d'obtenir des effets prédéfinis. {{EmbedInteractiveExample("pages/css/filter.html")}} ## Syntaxe ```css -/* URL vers un filtre SVG */ -filter: url("filters.svg#filter-id"); - /* Fonctions de filtre */ filter: blur(5px); filter: brightness(0.4); @@ -29,8 +28,12 @@ filter: opacity(25%); filter: saturate(30%); filter: sepia(60%); +/* URL vers un filtre SVG */ +filter: url("filters.svg#filter-id"); + /* On applique plusieurs filtres */ filter: contrast(175%) brightness(3%); +filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue); /* On utilise aucun filtre */ filter: none; @@ -39,13 +42,14 @@ filter: none; filter: inherit; filter: initial; filter: revert; +filter: revert-layer; filter: unset; ``` Avec une fonction, on utilisera la forme suivante : -```css -filter: [] * | none; +```css-nolint +filter: []* | none; ``` En utilisant un élément SVG [``](/fr/docs/Web/SVG/Element/filter), on utilisera la forme suivante : @@ -54,1206 +58,105 @@ En utilisant un élément SVG [``](/fr/docs/Web/SVG/Element/filter), on filter: url(file.svg#filter-element-id); ``` -### Interpolation - -Si les deux filtres possèdent chacun une liste de même longueur (sans [``](), chacune des fonctions est interpolée selon ses propres règles. Si les deux listes ont des longueurs différentes, les derniers filtres de la liste la plus longue sont utilisés avec leurs valeurs par défaut afin de compléter la liste la plus courte, ensuite chaque fonction est interpolée selon ses propres règles. Si un filtre vaut `none`, il est remplacé avec la fonction de filtre (avec ses valeurs par défaut) de l'autre liste puis l'ensemble des fonctions est interpolé selon les règles de chacune. Dans les autres cas, on utilise une interpolation discrète. - ## Fonctions -Pour utiliser la propriété CSS `filter`, on utilisera `none` ou une ou plusieurs des fonctions listées ci-après avec, pour chacune, un argument. Si la valeur est invalide, la fonction renverra `none`. Sauf mention contraire, les fonctions qui acceptent des valeurs exprimées en pourcentages (34%) acceptent également des valeurs décimales (0.34). +La propriété `filter` s'utilise avec le mot-clé `none` ou avec une à plusieurs fonctions parmi celles listées ensuite. Si le paramètre fourni à l'une de ces fonctions est invalide, la fonction reverra `none`. Sauf mention contraire, les fonctions qui acceptent une valeur exprimée en pourcentage (par exemple `34%`) acceptent également les valeurs exprimées en décimal (par exemple `0.34`). -Lorsqu'une seule propriété `filter` possède deux fonctions (ou plus), le résultat obtenu sera différent de l'application de deux propriétés `filter` (ou plus) séparées avec chacune une fonction. +Lorsque la valeur de la propriété `filter` contient plusieurs fonctions, les filtres sont appliqués dans l'ordre. -### `url()` +- [`blur()`](/fr/docs/Web/CSS/filter-function/blur) -La fonction `url()` prend comme argument l'emplacement d'un [élément SVG <filter> à appliquer](/fr/docs/Web/SVG/Element/filter). L'URL peut faire référence à une ancre d'un élément spécifique. Cet élément peut être embarqué dans un fichier XML externe. + - : Applique un [flou gaussien](https://en.wikipedia.org/wiki/Gaussian_blur) à l'image. -```css -filter: url(resources.svg#c1); -``` + ```css + filter: blur(5px); + ``` -### `blur()` +- [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness) -Cette fonction applique un flou gaussien à l'image d'entrée. La valeur du paramètre correspond au rayon de flou (l'écart-type de la gaussienne) utilisé. Plus la valeur est importante, plus le flou sera prononcé. La valeur par défaut du paramètre est 0. Selon la spécification, le paramètre est une valeur de type [``](/fr/docs/Web/CSS/length) mais la fonction n'accepte pas de valeurs exprimées en pourcentages. + - : Rend l'image plus claire ou plus sombre en utilisant un coefficient multiplicateur. L'effet est linéaire : `0%` créera une image complètement noire, `100%` ne modifiera pas l'image et les valeurs supérieures à 100% rendront l'image plus claire. -```css -filter: blur(5px); -``` + ```css + filter: brightness(2); + ``` -```html hidden - - - - - - - - - - - - - - - - - -
    Image originale - Exemple live - Équivalent SVGExemple statique
    - - - - -
    - - - - - - -
    -     		- -
    -``` - -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -webkit-filter: blur(5px); - -ms-filter: blur(5px); - filter: blur(5px); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0; - margin: 0 0 1.286em; - height: 100%; - width: 85%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3 { - height: 100%; -} -``` - -```svg - - - - - -``` +- [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast) -{{EmbedLiveSample('','100%','236px','','', 'no-codepen')}} - -> **Note :** Voir [`blur()`]() pour plus d'informations. - -### `brightness()` - -La fonction [`brightness()`]() permet de modifier la luminosité d'une image grâce à un facteur linéaire. Un argument égal `0%` créera une image totalement noire et une valeur de `100%` conservera l'image d'entrée telle quelle. Il est possible d'utiliser des valeurs supérieures à `100%` afin d'obtenir des images saturées en luminosité. La valeur par défaut pour l'argument est `1`. - -```css -filter: brightness(2); -``` - -```svg - - - - - - - - - -``` - -```html hidden - - - - - - - - - - - - - - - - - -
    Image originaleExemple liveÉquivalent SVGExemple statique
    - - - - - - - - -
    -``` - -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -moz-filter: brightness(2); - -webkit-filter: brightness(2); - -ms-filter: brightness(2); - filter: brightness(2); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - height: 100%; - width: 85%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3 { - height: 100%; -} -``` - -{{EmbedLiveSample('','100%','231px','','', 'no-codepen')}} - -> **Note :** Voir [`brightness()`]() pour plus d'informations. - -### `contrast()` - -La fonction [`contrast()`]() permet d'ajuster le contraste de l'image d'entrée. Une valeur de `0%` créera une image entièrement grise. Une valeur de `100%` conservera l'image d'entrée telle quelle. Il est possible d'utiliser des valeurs supérieures à 100% pour augmenter le contraste. La valeur par défaut de l'argument est `1`. - -```css -filter: contrast(200%); -``` + - : Ajuste le contraste de l'image. Une valeur de `0%` rendra l'image grise, `100%` n'aura pas d'effet et les valeurs supérieures à `100%` renforceront le contraste. -```svg - - - - - - - - - -``` + ```css + filter: contrast(200%); + ``` -```html hidden - - - - - - - - - - - - - - - - - -
    Image originaleExemple liveÉquivalent SVGExemple statique
    - - - - - - - - -
    -``` +- [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow) -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -moz-filter: contrast(200%); - -webkit-filter: contrast(200%); - -ms-filter: contrast(200%); - filter: contrast(200%); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3 { - height: 100%; -} -``` + - : Applique une ombre portée suivant les contours de l'image. Son paramètre suit la même syntaxe que celle de la propriété [`box-shadow`](/fr/docs/Web/CSS/box-shadow) (définie dans le module [Arrière-plans et bordures CSS](/fr/docs/Web/CSS/CSS_backgrounds_and_borders)), sauf que le mot-clé `inset` et le paramètre `spread` ne sont pas autorisés. Tous les filtres appliqués après `drop-shadow()` sont appliqués à l'ombre portée également. -{{EmbedLiveSample('','100%','203px','','', 'no-codepen')}} + ```css + filter: drop-shadow(16px 16px 10px black); + ``` -> **Note :** Voir [`contrast()`]() pour plus d'informations. +- [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale) -### `drop-shadow()` + - : Convertit l'image en niveaux de gris. Un argument de `100%` rendra l'image uniquement avec des niveaux de gris. Un argument de `0%` ne modifiera pas l'image d'entrée. Les valeurs entre `0%` et `100%` appliquent un effet proportionnel. -La fonction [`drop-shadow()`]() permet d'appliquer une ombre portée à l'image d'entrée. Une ombre portée est une version décalée, dans une couleur donnée, du canal alpha de l'image qui est affiché sous celle-ci. La fonction peut accepter une valeur de type [``](/fr/docs/Web/CSS/shadow) (définie dans la spécification CSS3 sur les arrière-plans), une exception : les mots-clés `inset` et `spread` ne sont pas autorisés. Cette fonction est semblable à la propriété [`box-shadow`](/fr/docs/Web/CSS/box-shadow) plus répandue ; seule différence : les navigateurs utilisent parfois l'accélération matérielle pour les filtres ce qui peut permettre d'obtenir de meilleures performances. Les paramètres de l'argument `` sont les suivants : + ```css + filter: grayscale(100%); + ``` -- `` `` (nécessaire) - - : Deux valeurs [``](/fr/docs/Web/CSS/length) qui indiquent le décalage de l'ombre portée. `` définit la distance horizontale : des valeurs négatives décaleront l'ombre à gauche de l'élément. `` définit la distance verticale : des valeurs négatives décaleront l'ombre au-dessus de l'élément. Se référer à la page [``](/fr/docs/Web/CSS/length) pour les différentes unités utilisables. - Si les deux valeurs sont nulles, l'ombre sera exactement placée sous l'élément (et pourra servir à générer un effet de flou si `` et/ou `` sont utilisés). -- `` (optionnel) - - : Une troisième valeur de type [``](/fr/docs/Web/CSS/length). Plus la valeur sera grande, plus le flou sera important (l'ombre sera plus grande et moins prononcée). Les valeurs négatives ne sont pas autorisées. La valeur par défaut est `0`, le bord de l'ombre sera droit. -- `` (optionnel) - - : Une quatrième valeur de type [``](/fr/docs/Web/CSS/length). Des valeurs positives agrandiront l'ombre et les valeurs négatives réduiront l'ombre. La valeur par défaut est `0` (l'ombre aura la même taille que l'élément). Note: Webkit, and maybe other browsers, do not support this 4th length; it will not render if added. -- `` (optionnel) - - : Voir [``](/fr/docs/Web/CSS/color_value) pour les mots-clés et notations possibles. Si ce paramètre n'est pas défini, la couleur choisie dépendra du navigateur. Pour Gecko (Firefox), Presto (Opera) et Trident (Internet Explorer), la valeur de la propriété [`color`](/fr/docs/Web/CSS/color) est utilisée. Pour WebKit, si la couleur est absente, l'ombre sera transparente (donc inutile). +- [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate) -```css -filter: drop-shadow(16px 16px 10px black); -``` + - : Applique une rotation de teinte. L'argument angulaire définit le nombre de degrés pour la rotation sur le cercle des teintes. Une valeur de `0deg` n'aura pas d'effet sur l'image. -```svg - - - - - - - - - - - - -``` + ```css + filter: hue-rotate(90deg); + ``` -```html hidden - - - - - - - - - - - - - - - - - - - - - - - -
    Image originaleExemple liveÉquivalent SVGExemple statique
    -
    - - - - - - - - - - - -
    -
    test_form_4 distorted border - Image originaletest_form_4 distorted border - Exemple <i lang=live" id="img12" class="internal default" src="test_form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /> -
    - - - - - - - - - - - - - - -
    -     		test_form_4 distorted border drop shadow - Exemple statique
    -``` +- [`invert()`](/fr/docs/Web/CSS/filter-function/invert) -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -moz-filter: drop-shadow(16px 16px 10px black); - -webkit-filter: drop-shadow(16px 16px 10px black); - -ms-filter: drop-shadow(16px 16px 10px black); - filter: drop-shadow(16px 16px 10px black); -} -#img12 { - width: 100%; - height: auto; - -moz-filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8)); - -webkit-filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8)); - -ms-filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8)); - filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8)); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -#irregular-shape { - width: 64%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3, -#img13 { - width: 100%; - height: auto; -} -``` + - : Inverse les couleurs de l'image. Si l'argument vaut `100%`, on obtiendra le négatif complet de l'image. Si l'argument vaut `0%`, l'image sera inchangée. Les valeurs entre `0%` et `100%` ont des effets proportionnels. -{{EmbedLiveSample('','100%','400px','','', 'no-codepen')}} + ```css + filter: invert(100%); + ``` -> **Note :** Voir [`drop-shadow()`]() pour plus d'informations. +- [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity) -### `grayscale()` + - : Applique un niveau de transparence. Un coefficient de `0%` rendra l'image complètement transparente tandis qu'un coefficient de `100%` laissera l'image inchangée. -Avec la fonction [`grayscale()`](), l'image d'entrée est convertie en niveau de gris. La valeur de l'argument définit la force de cette conversion. En utilisant une valeur de `100%` sera complètement en niveaux de gris. `0%` conservera l'image telle quelle. La valeur par défaut du paramètre est `0`. + ```css + filter: opacity(50%); + ``` -```css -filter: grayscale(100%); -``` +- [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate) -```html hidden - - - - - - - - - - - - - - - - - -
    Image originaleExemple liveÉquivalent SVGExemple statique
    - - - - -
    -``` + - : Sature l'image. Avec un coefficient de `0%`, l'image sera complètement désaturée. `100%` n'aura pas d'effet sur l'image. Les valeurs supérieures à `100%` augmenteront la saturation. -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -moz-filter: grayscale(100%); - -webkit-filter: grayscale(100%); - -ms-filter: grayscale(100%); - filter: grayscale(100%); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3 { - height: 100%; -} -``` + ```css + filter: saturate(200%); + ``` -{{EmbedLiveSample('','100%','209px','','', 'no-codepen')}} +- [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia) -> **Note :** Voir [`grayscale()`]() pour plus d'informations. + - : Convertit l'image en sépia. Un coefficient de `100%` rendra l'image complètement sépia tandis qu'un coefficient `0%` n'aura pas d'effet sur l'image. -### `hue-rotate()` + ```css + filter: sepia(100%); + ``` -La fonction [`hue-rotate()`]() applique une rotation de teinte à l'image d'entrée. La valeur de l'angle passé en argument définit le nombre de degrés parcouru sur le cercle des couleurs. Une valeur de `0deg` conservera l'image telle quelle. La valeur par défaut du paramètre est `0deg`. Il n'y a pas de valeur maximale pour l'argument, si une valeur supérieure à `360deg` est utilisée, ce sera la mesure de l'angle correspondante qui sera utilisée. +## Combiner les fonctions -```css -filter: hue-rotate(90deg); -``` - -```css -filter: hue-rotate(90deg); -``` - -```html hidden - - - - - - - - - - - - - - - - - -
    Image originaleExemple liveÉquivalent SVGExemple statique
    - - - - -
    -``` - -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -moz-filter: hue-rotate(90deg); - -webkit-filter: hue-rotate(90deg); - -ms-filter: hue-rotate(90deg); - filter: hue-rotate(90deg); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3 { - height: 100%; -} -``` - -```html - - - - - -``` - -{{EmbedLiveSample('','100%','221px','','', 'no-codepen')}} - -> **Note :** Voir [`hue-rotate()`]() pour plus d'informations. - -### `invert()` - -La fonction [`invert()`]() permet d'inverser les couleurs de l'image d'entrée. La valeur de l'argument définit la force de cette inversion. Une valeur de `100%` inversera complètement les couleurs (tel un négatif) et une valeur `0%` conservera l'image d'entrée telle quelle. La valeur par défaut de l'argument est `0`. - -```css -filter: invert(100%); -``` - -```html hidden - - - - - - - - - - - - - - - - - -
    Image originaleExemple liveÉquivalent SVGExemple statique
    - - - - - - - - -
    -``` - -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -moz-filter: invert(100%); - -webkit-filter: invert(100%); - -ms-filter: invert(100%); - filter: invert(100%); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3 { - height: 100%; -} -``` - -{{EmbedLiveSample('','100%','407px','','', 'no-codepen')}} - -> **Note :** Voir [`invert()`]() pour plus d'informations. - -### `opacity()` - -La fonction [`opacity()`]() permet de régler l'opacité de l'image d'entrée. La valeur de l'argument indique la force de l'opacité. Ainsi, une valeur de `0%` rendra l'image complètement transparente et une valeur de `100%` conservera l'image telle quelle. Les valeurs intermédiaires appliqueront des effets proportionnels. La valeur par défaut de l'argument est `1`. Cette fonction est proche de la propriété [`opacity`](/fr/docs/Web/CSS/opacity), toutefois, avec les filtres, certains navigateurs utilisent l'accélération matérielle, ce qui permet d'obtenir de meilleures performances. - -```css -filter: opacity(50%); -``` - -```html hidden - - - - - - - - - - - - - - - - - -
    Image originaleExemple liveÉquivalent SVGExemple statique
    - - - - - - -
    -``` - -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -moz-filter: opacity(50%); - -webkit-filter: opacity(50%); - -ms-filter: opacity(50%); - filter: opacity(50%); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3 { - height: 100%; -} -``` - -{{EmbedLiveSample('','100%','210px','','', 'no-codepen')}} - -> **Note :** Voir [`opacity()`]() pour plus d'informations. - -### `saturate()` - -La fonction [`saturate()`]() sature l'image d'entrée. La valeur de l'argument indique la force de la saturation. Une valeur de `0%` fera que l'image sera totalement désaturée et une valeur de `100%` conservera l'image d'entrée telle quelle. Les valeurs intermédiaires auront un effet linéaire. Il est possible d'utiliser des valeurs supérieures à `100%` pour obtenir un effet de sursaturation. La valeur par défaut de l'argument est `1`. - -```css -filter: saturate(200%); -``` - -```html hidden - - - - - - - - - - - - - - - - - -
    Image originaleExemple liveÉquivalent SVGExemple statique
    - - - - -
    -``` - -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -moz-filter: saturate(200%); - -webkit-filter: saturate(200%); - -ms-filter: saturate(200%); - filter: saturate(200%); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3 { - height: 100%; -} -``` - -{{EmbedLiveSample('','100%','332px','','', 'no-codepen')}} - -> **Note :** Voir [`saturate()`]() pour plus d'informations. - -### `sepia()` - -La fonction [`sepia()`]() convertit l'image d'entrée est convertie en sépia. La valeur de l'argument définit la proportion de la conversion. Ainsi, si on utilise un argument égal à 100%, le résultat sera entièrement sépia et si on utilise une valeur de `0%`, l'image d'entrée sera inchangée. Les valeurs comprises entre `0%` et `100%` appliquent l'effet de façon linéaire. La valeur par défaut de l'argument est `0`. - -```css -filter: sepia(100%); -``` - -```html hidden - - - - - - - - - - - - - - - - - -
    Image originaleExemple liveÉquivalent SVGExemple statique
    - - - - -
    -``` - -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -moz-filter: sepia(100%); - -webkit-filter: sepia(100%); - -ms-filter: sepia(100%); - filter: sepia(100%); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3 { - height: 100%; -} -``` - -{{EmbedLiveSample('','100%','229px','','', 'no-codepen')}} - -> **Note :** Voir [`sepia()`]() pour plus d'informations. - -## Enchaîner les fonctions - -On peut appliquer autant de fonction que nécessaire pour manipuler le rendu obtenu. Dans l'exemple suivant, on augmente le contraste et la luminosité de l'image : +On peut combiner autant de fonctions que nécessaire pour manipuler le rendu. Les filtres sont alors appliqués dans l'ordre de leur déclaration. Dans l'exemple suivant, on améliore le contraste et la luminosité de l'image : ```css filter: contrast(175%) brightness(103%); ``` -```html hidden - - - - - - - - - - - - - - - -
    Image originale - Exemple live - Exemple statique
    - - - - - -
    -``` +### Interpolation -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -moz-filter: contrast(175%) brightness(103%); - -webkit-filter: contrast(175%) brightness(103%); - -ms-filter: contrast(175%) brightness(103%); - filter: contrast(175%) brightness(103%); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3 { - height: 100%; -} -``` +Pour les animations, si les filtres du début et de la fin ont une liste de fonctions de la même taille, sans [`url()`](/fr/docs/Web/CSS/url) et dans le même ordre, chaque filtre est interpolé selon ses règles particulières. -{{EmbedLiveSample('','100%','209px','','', 'no-codepen')}} +Si les listes de filtres sont de longueurs différentes, la liste la plus courte est complétée à la fin par les filtres supplémentaires de la liste la plus longue. Les fonctions ajoutées utilisent leur valeur initiale (qui ne modifie pas l'image). Tous les filtres alors présents sont interpolés selon leurs règles particulières. Sinon, c'est une interpolation discrète qui est utilisée. ## Définition formelle @@ -1267,34 +170,60 @@ table.standard-table td { ### Appliquer des fonctions de filtre -Voici un exemple d'utilisation des fonctions prédéfinies abordées ci-avant. Voyez les exemples précédents pour chaque fonction séparément. +On applique la propriété `filter` sur la deuxième image, en appliquant des niveaux de gris et un flou (à l'image et à la bordure). ```css -.mondiv { - filter: grayscale(50%); -} - -/* Appliquer un niveau de gris à 50% et un flou de rayon 10px */ -/* pour toutes les images */ img { - filter: grayscale(0.5) blur(10px); + border: 5px solid yellow; +} +/* On passe à 40% de niveau de gris */ +/* et un flou de 5px de rayon */ +img:nth-of-type(2) { + filter: grayscale(0.4) blur(5px); } ``` -### Appliquer des filtres SVG +```html +L'image originale est nette +L'image et la bordure sont floues et atténuées +``` + +{{EmbedLiveSample('','100%','229px')}} + +### Répéter des filtres -Voici des exemples où on utilise la fonction `url()` pour tirer parti de ressources SVG existantes : +Les fonctions de filtre sont appliquées selon leur ordre d'apparition. On peut donc appliquer plusieurs fois un même filtre. ```css -.target { - filter: url(#c1); +#MDN-logo { + border: 1px solid blue; + filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg) drop-shadow(5px 5px 0 + red); } +``` -.mydiv { - filter: url(commonfilters.xml#large-blur); -} +```html hidden + ``` +{{EmbedLiveSample('','100%','229px')}} + +Les filtres sont appliqués dans l'ordre, c'est pour cela que les ombres portées ne sont pas de la même couleur. La teinte de la première ombre portée est modifiée par la fonction `hue-rotate()`, mais pas la teinte de la deuxième. + ## Spécifications {{Specifications}} @@ -1305,8 +234,8 @@ Voici des exemples où on utilise la fonction `url()` pour tirer parti de ressou ## Voir aussi -- [Appliquer des effets SVG sur du contenu HTML](/fr/docs/Applying_SVG_effects_to_HTML_content) -- La propriété [`mask`](/fr/docs/Web/CSS/mask) -- [SVG](/fr/docs/Web/SVG) -- [Un article de HTML5 Rocks : Understanding CSS filters (en anglais)](https://www.html5rocks.com/en/tutorials/filters/understanding-css/) -- [Générateur de filtres CSS](https://cssgenerator.org/filter-css-generator.html) +- La propriété CSS [`backdrop-filter`](/fr/docs/Web/CSS/backdrop-filter) +- [La composition et les modes de fusion en CSS](/fr/docs/Web/CSS/CSS_compositing_and_blending) avec les propriétés CSS [`background-blend-mode`](/fr/docs/Web/CSS/background-blend-mode) et [`mix-blend-mode`](/fr/docs/Web/CSS/mix-blend-mode) +- La propriété CSS [`mask`](/fr/docs/Web/CSS/mask) +- [SVG](/fr/docs/Web/SVG) et notamment l'élément [``](/fr/docs/Web/SVG/Element/filter) et l'attribut [`filter`](/fr/docs/Web/SVG/Attribute/filter) +- [Appliquer des effets SVG à du contenu HTML](/fr/docs/Web/SVG/Applying_SVG_effects_to_HTML_content) diff --git a/files/fr/web/html/element/dialog/index.md b/files/fr/web/html/element/dialog/index.md index c4a18c3baf33ff..0d8628268c4d0c 100644 --- a/files/fr/web/html/element/dialog/index.md +++ b/files/fr/web/html/element/dialog/index.md @@ -1,80 +1,17 @@ --- title: " : l'élément de boîte de dialogue" slug: Web/HTML/Element/dialog +l10n: + sourceCommit: 25f88e451394412da19bbfe07cafd9ce382e802e --- {{HTMLSidebar}} -L'élément HTML **``** représente une boite de dialogue ou un composant interactif (par exemple un inspecteur ou une fenêtre). +L'élément [HTML](/fr/docs/Web/HTML) **``** représente une boite de dialogue ou un composant interactif (par exemple un inspecteur ou une fenêtre). - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - Catégories de contenu - - Contenu de flux, - racine de sectionnement. -
    Contenu autorisé - Contenu de flux. -
    Omission de balises - Aucune, la balise d'ouverture et la balise de fermeture sont - obligatoires. -
    Parents autorisés - Tout élément qui accepte du - contenu de flux. -
    Rôle ARIA implicite - dialog -
    Rôles ARIA autorisés - alertdialog -
    Interface DOM - HTMLDialogElement -
    +L'élément HTML `` est utilisé pour créer des boîtes de dialogue modale qui peuvent être interactives ou non. Les boîtes de dialogue modale interrompent l'interaction, le reste de la page étant inerte, tandis que les boîtes de dialogue non-modale permettent une interaction avec le reste de la page. + +JavaScript peut être utilisé pour afficher l'élément ``. L'utilisation de la méthode [`.showModal()`](/fr/docs/Web/API/HTMLDialogElement/showModal) pour afficher une boîte de dialogue modale et la méthode [`.show()`](/fr/docs/Web/API/HTMLDialogElement/show) pour afficher une boîte de dialogue non-modale. La boîte de dialogue peut être fermée à l'aide de la méthode [`.close()`](/fr/docs/Web/API/HTMLDialogElement/close) ou en utilisant la méthode [`dialog`](/fr/docs/Web/HTML/Element/form#method) lors de la soumission d'un formulaire `
    ` imbriqué dans l'élément ``. Les boîtes de dialogue modales peuvent également être fermées en appuyant sur la touche Échap. ## Attributs @@ -83,28 +20,102 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Global_attribu > **Attention :** L'attribut `tabindex` ne doit pas être utilisé sur l'élément ``. - `open` - - : Cet attribut indique que la boîte de dialogue est active et peut être utilisée de façon interactive. Si l'attribut n'est pas renseigné, la boîte de dialogue ne doit pas être présentée à l'utilisateur. + - : Cet attribut indique que la boîte de dialogue est active et peut être utilisée de façon interactive. Si l'attribut n'est pas renseigné, la boîte de dialogue ne doit pas être affichée. Il est recommandé d'utiliser les méthodes `.show()` ou `.showModal()` afin d'afficher les boîtes de dialogue, plutôt que l'attribut `open`. Si un élément `` est ouvert à l'aide de l'attribut `open`, il s'agira d'une boîte non-modale. + > **Note :** Bien qu'il soit possible de basculer entre l'état ouvert et l'état fermé des boîtes de dialogue ne bloquant pas l'interraction en modifiant la présence de l'attribut `open`, cette approche n'est pas recommandée. ## Notes d'utilisation -- Les éléments [``](/fr/docs/Web/HTML/Element/Form) peuvent fermer un dialogue s'ils possèdent l'attribut `method="dialog"`. Lorsqu'un tel formulaire est soumis, le dialogue se ferme avec sa propriété [`returnValue`](/fr/docs/Web/API/HTMLDialogElement/returnValue) définie sur la `value` (valeur) du bouton qui a été utilisé pour soumettre le formulaire. +- Les éléments [``](/fr/docs/Web/HTML/Element/form) peuvent fermer un dialogue s'ils possèdent l'attribut `method="dialog"` ou si le bouton utilisé pour soumettre le formulaire a l'attribut [`formmethod="dialog"`](/fr/docs/Web/HTML/Element/input#formmethod). Lorsqu'un tel formulaire est soumis, le dialogue se ferme avec sa propriété [`returnValue`](/fr/docs/Web/API/HTMLDialogElement/returnValue) définie sur la `value` (valeur) du bouton qui a été utilisé pour soumettre le formulaire. - Le pseudo-élément CSS [`::backdrop`](/fr/docs/Web/CSS/::backdrop) peut être utilisé pour créer un style derrière un élément `` lorsque le dialogue est affiché avec [`HTMLDialogElement.showModal()`](/fr/docs/Web/API/HTMLDialogElement/showModal). Par exemple, pour atténuer le contenu inaccessible derrière la boîte de dialogue modale. +- L'attribut [`autofocus`](/fr/docs/Web/HTML/Global_attributes/autofocus) peut être ajouté à l'élément avec lequel la personne est censée interagir immédiatement après l'ouverture d'une boîte de dialogue modale. S'il n'y a pas d'élément impliquant une interaction immédiate, l'attribut `autofocus` peut être ajouté à l'élément `` lui-même. ## Exemples -### Exemple simple +### Mises en garde concernant la création d'un dialogue en utilisant uniquement du HTML + +Cet exemple montre comment créer une boîte de dialogue non-modale en utilisant uniquement du HTML. Grâce à l'attribut booléen `open` de l'élément ``, la boîte de dialogue apparaît ouverte au chargement de la page. Le dialogue peut être fermé en cliquant sur le bouton "OK" parce que l'attribut `method` de l'élément `` est fixé à `"dialog"`. Dans ce cas, aucun JavaScript n'est nécessaire pour fermer le formulaire. ```html

    Salutations, à tous et à toutes !

    + + +     ``` #### Résultat -{{EmbedLiveSample('')}} +{{EmbedLiveSample("mises_en_garde_concernant_la_création_dun_dialogue_en_utilisant_uniquement_du_html")}} + +Cette boîte de dialogue est initialement ouverte en raison de la présence de l'attribut `open`. Les boîtes de dialogue affichées à l'aide de l'attribut `open` sont non-modales. Vous pouvez remarquer qu'après avoir cliqué sur « OK », la boîte de dialogue est fermée, laissant le cadre de résultat vide. Lorsque la boîte de dialogue est fermée, aucune méthode n'est prévue pour la rouvrir. C'est pourquoi la méthode préférée pour afficher les boîtes de dialogue non-modales consiste à utiliser la méthode [`HTMLDialogElement.show()`](/fr/docs/Web/API/HTMLDialogElement/show). Il est possible de basculer l'affichage de la boîte de dialogue en ajoutant ou en supprimant l'attribut booléen `open`, mais ce n'est pas la pratique recommandée. + +### Création d'une boîte de dialogue modale + +Cet exemple montre une boîte de dialogue modale avec un [arrière-plan](/fr/docs/Web/CSS/gradient). La méthode `.showModal()` ouvre la boîte de dialogue modale lorsque le bouton « Afficher la fenêtre » est activé. La boîte de dialogue peut être fermée en appuyant sur la touche Échap ou via la méthode `.close()` lorsque le bouton « Fermer » de la boîte de dialogue est activé. + +Lorsqu'une boîte de dialogue s'ouvre, le navigateur donne, par défaut, la priorité au premier élément qui peut l'être dans la boîte de dialogue. Dans cet exemple, l'attribut [`autofocus`](/fr/docs/Web/HTML/Global_attributes/autofocus) est appliqué au bouton « Fermer », lui donnant la priorité à l'ouverture de la boîte de dialogue, car c'est l'élément avec lequel nous nous attendons à ce que la personne interagisse immédiatement après l'ouverture de la boîte de dialogue. + +#### HTML + +```html + + +

    Cette boîte de dialogue modale a un arrière-plan festif !

    +     + +``` + +#### CSS + +Nous pouvons styliser l'arrière-plan du dialogue en utilisant le pseudo-élément [`::backdrop`](/fr/docs/Web/CSS/::backdrop). + +```css +::backdrop { + background-image: linear-gradient( + 45deg, + magenta, + rebeccapurple, + dodgerblue, + green + ); + opacity: 0.75; +} +``` + +#### JavaScript + +Le dialogue est ouvert de façon modale en utilisant la méthode `.showModal()` et est fermé en utilisant la méthode `.close()`. + +```js +const dialog = document.querySelector("dialog"); +const showButton = document.querySelector("dialog + button"); +const closeButton = document.querySelector("dialog button"); + +// Le bouton "Afficher la fenêtre" ouvre le dialogue +showButton.addEventListener("click", () => { + dialog.showModal(); +}); + +// Le bouton "Fermer" ferme le dialogue +closeButton.addEventListener("click", () => { + dialog.close(); +}); +``` + +#### Résultat + +{{EmbedLiveSample("création_dune_boîte_de_dialogue_modale")}} + +Lorsque la boîte de dialogue modale est affichée, elle apparaît au-dessus de toutes les autres boîtes de dialogue éventuellement présentes. Tout ce qui se trouve en dehors de la boîte de dialogue modale est inerte et les interactions en dehors de cette dernière sont bloquées. Remarquez que lorsque la boîte de dialogue est ouverte, à l'exception d'elle-même, il n'est pas possible d'interagir avec le document ; le bouton « Afficher la fenêtre » est en grande partie masqué par l'arrière-plan presque opaque de la boîte de dialogue et est inerte. + +### Traitement de la valeur de retour d'une boîte de dialogue + +Cet exemple illustre comment utiliser la valeur de retour, fournie par [`returnValue`](/fr/docs/Web/API/HTMLDialogElement/returnValue) et comment fermer un dialogue modal en utilisant un formulaire. Par défaut, la valeur de retour est la chaîne vide ou la valeur du bouton qui soumet le formulaire dans l'élément ``, s'il y en a un. -### Exemple avancé +Cet exemple ouvre une boîte de dialogue modale lorsque le bouton « Mettre à jour les détails » est activé. La boîte de dialogue contient un formulaire avec un élément [` - + @@ -129,48 +140,123 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Global_attribu - - - - - - +

    + +

    + ``` #### JavaScript ```js -let updateButton = document.getElementById("updateDetails"); -let favDialog = document.getElementById("favDialog"); -let outputBox = document.querySelector("output"); -let selectEl = document.querySelector("select"); -let confirmBtn = document.getElementById("confirmBtn"); - -// Le bouton "Mettre à jour les détails" ouvre le ; modulaire -updateButton.addEventListener("click", function onOpen() { - if (typeof favDialog.showModal === "function") { - favDialog.showModal(); - } else { - console.error( - "L'API n'est pas prise en charge par ce navigateur.", - ); - } +const showButton = document.getElementById("showDialog"); +const favDialog = document.getElementById("favDialog"); +const outputBox = document.querySelector("output"); +const selectEl = favDialog.querySelector("select"); +const confirmBtn = favDialog.querySelector("#confirmBtn"); + +// Le bouton « Mettre à jour les détails » ouvre la modale +showButton.addEventListener("click", () => { + favDialog.showModal(); }); -// L'entrée "Animal favori" définit la valeur du bouton d'envoi. -selectEl.addEventListener("change", function onSelect(e) { + +// L'entrée « Animal préféré » définit la valeur du bouton d'envoi. +selectEl.addEventListener("change", (e) => { confirmBtn.value = selectEl.value; }); -// Le bouton "Confirmer" du formulaire déclenche la fermeture -// de la boîte de dialogue en raison de [method="dialog"] -favDialog.addEventListener("close", function onClose() { + +// Le bouton « Annuler » ferme la boîte de dialogue sans la soumettre en raison de l'attribut [formmethod="dialog"], ce qui déclenche un événement de fermeture. +favDialog.addEventListener("close", (e) => { outputBox.value = - favDialog.returnValue + " bouton cliqué - " + new Date().toString(); + favDialog.returnValue === "default" + ? "Pas de valeur retournée." + : `Valeur retournée : ${favDialog.returnValue}.`; // Vérifie la présence de "default" au lieu d'une chaîne vide +}); + +// Empêchez le bouton « Confirmer » de soumettre le formulaire par défaut et fermez la boîte de dialogue avec la méthode `close()`, qui déclenche l'événement "close". +confirmBtn.addEventListener("click", (event) => { + event.preventDefault(); // Nous ne voulons pas soumettre ce faux formulaire + favDialog.close(selectEl.value); // Il faut envoyer la valeur du sélecteur ici. }); ``` #### Résultat -{{EmbedLiveSample("", "", 300)}} +{{EmbedLiveSample("traitement_de_la_valeur_de_retour_dune_boîte_de_dialogue", "100%", 300)}} + +Cet exemple présente les trois méthodes suivantes pour fermer les boîtes de dialogue modales : + +- En soumettant le formulaire dans la boîte de dialogue à l'aide de la méthode `dialog` (comme dans [l'exemple n'utilisant que du HTML](#mises_en_garde_concernant_la_création_d'un_dialogue_en_utilisant_uniquement_du_html)) +- En appuyant sur la touche Échap. +- En appelant la méthode [`HTMLDialogElement.close()`](/fr/docs/Web/API/HTMLDialogElement/close) (comme dans l'[exemple de création d'une boîte modale](#création_d'une_boîte_de_dialogue_modale)). + Dans cet exemple, le bouton « Annuler » ferme la boîte de dialogue via la méthode de formulaire `dialog` et le bouton « Confirmer » ferme la boîte de dialogue via la méthode [`HTMLDialogElement.close()`](/fr/docs/Web/API/HTMLDialogElement/close). + +Le bouton « Annuler » comprend l'attribut [`formmethod="dialog"`](/fr/docs/Web/HTML/Element/input/submit#formmethod), qui remplace la méthode par défaut [`GET`](/fr/docs/Web/HTTP/Methods/GET) de l'élément [`
    `](/fr/docs/Web/HTML/Element/form). Lorsque la méthode d'un formulaire est [`dialog`](#notes_dutilisation), l'état du formulaire est sauvegardé mais non soumis, et la boîte de dialogue est fermée. + +Sans `action`, la soumission du formulaire via la méthode par défaut [`GET`](/fr/docs/Web/HTTP/Methods/GET) entraîne le rechargement de la page. Nous utilisons JavaScript pour empêcher la soumission et fermer le dialogue avec les méthodes [`event.preventDefault()`](/fr/docs/Web/API/Event/preventDefault) et [`HTMLDialogElement.close()`](/fr/docs/Web/API/HTMLDialogElement/close), respectivement. + +Il est important de prévoir un mécanisme de fermeture dans chaque élément ``. La touche Échap ne ferme pas les dialogues non modaux par défaut, et l'on ne peut pas non plus supposer que la personne aura accès à un clavier physique (par exemple, une personne utilisant un écran tactile sans accès à un clavier). + +## Résumé technique + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + Catégories de contenu + + Contenu de flux, racine de sectionnement. +
    Contenu autorisé + Contenu de flux. +
    Omission de balises + Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires. +
    Parents autorisés + Tout élément qui accepte du contenu de flux. +
    Rôle ARIA implicite + dialog +
    Rôles ARIA autorisésalertdialog
    Interface DOM + HTMLDialogElement +
    + +## Accessibilité + +Lors de l'implémentation d'une fenêtre de dialogue, il est important de considérer l'endroit le plus approprié pour placer le point de concentration (ou « focus ») de la personne. Lorsque l'on utilise [`HTMLDialogElement.showModal()`](/fr/docs/Web/API/HTMLDialogElement/showModal) pour ouvrir un ``, le « focus » est mis sur le premier élément imbriqué focalisable. Le fait d'indiquer explicitement l'emplacement initial du « focus » en utilisant l'attribut [`autofocus`](/fr/docs/Web/HTML/Global_attributes/autofocus) permet de s'assurer que le « focus » initial est placé sur l'élément considéré comme le meilleur emplacement initial pour un dialogue particulier. En cas de doute, comme il n'est pas toujours possible de savoir où le « focus » initial peut être placé dans un dialogue, en particulier dans les cas où le contenu d'un dialogue est rendu dynamiquement lorsqu'il est invoqué, l'élément `` lui-même peut fournir le meilleur placement du « focus » initial. + +Veillez à ce qu'un mécanisme soit prévu pour permettre de fermer la boîte de dialogue. La meilleure façon de s'assurer que toutes les personnes peuvent fermer la boîte de dialogue est d'inclure un bouton explicite à cet effet, tel qu'un bouton de confirmation, d'annulation ou de fermeture. + +Par défaut, une boîte de dialogue invoquée par la méthode `showModal()` peut être fermée en appuyant sur la touche Échap. Une boîte de dialogue non-modale ne se ferme pas par la touche Échap par défaut, et selon ce que représente la boîte de dialogue non-modale, ce comportement n'est peut-être pas souhaitable Les utilisatrices et utilisateurs de clavier s'attendent à ce que la touche Échap ferme les boîtes de dialogue modales ; veillez à ce que ce comportement soit implémenté et maintenu. Si plusieurs boîtes de dialogue modales sont ouvertes, l'appui sur la touche Échap ne doit fermer que la dernière boîte de dialogue affichée. Lorsque l'on utilise ``, ce comportement est fourni par le navigateur. + +Bien que les boîtes de dialogue puissent être créées à l'aide d'autres éléments, l'élément natif `` offre des caractéristiques d'utilisation et d'accessibilité qui doivent être reproduites si vous utilisez d'autres éléments dans un but similaire. Si vous créez une implémentation de dialogue personnalisée, assurez-vous que tous les comportements par défaut attendus sont pris en charge et que les recommandations d'étiquetage appropriées sont suivies. + +L'élément `` est exposé par les navigateurs d'une manière similaire aux dialogues personnalisés qui utilisent l'attribut ARIA [role="dialog"](/fr/docs/Web/Accessibility/ARIA/Roles/dialog_role). Les éléments `` invoqués par la méthode `showModal()` ont implicitement [aria-modal="true"](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-modal), alors que les éléments `` invoqués par la méthode `show()` ou affichés en utilisant l'attribut `open` ou en changeant la propriété CSS `display` par défaut d'un élément HTML `` sont exposés en tant que `[aria-modal="false"]`. Lors de l'implémentation de dialogues modaux, tout ce qui n'est pas le `` et son contenu doit être rendu inerte en utilisant l'attribut HTML global [`inert`](/fr/docs/Web/HTML/Global_attributes/inert). Lorsque l'on utilise `` avec la méthode `HTMLDialogElement.showModal()`, ce comportement est fourni par le navigateur. ## Spécifications @@ -180,13 +266,12 @@ favDialog.addEventListener("close", function onClose() { {{Compat}} -## Prothèse d'émulation (polyfill) - -Incluez ce polyfill pour fournir un support aux navigateurs sans élément `` : [dialog-polyfill](https://github.com/GoogleChrome/dialog-polyfill). - ## Voir aussi -- L'évènement [close](/fr/docs/Web/Reference/HTMLDialogElement/close_event) -- L'évènement [cancel](/fr/docs/Web/Reference/HTMLDialogElement/cancel_event) -- [Guide sur les formulaires HTML](/fr/docs/Learn/Forms) +- L'interface [`HTMLDialogElement`](/fr/docs/Web/API/HTMLDialogElement) +- L'évènement [`close`](/fr/docs/Web/API/HTMLDialogElement/close_event) +- L'évènement [`cancel`](/fr/docs/Web/API/HTMLDialogElement/cancel_event) +- La propriété [`open`](/fr/docs/Web/API/HTMLDialogElement/open) de l'interface `HTMLDialogElement` +- L'attribut HTML universel [`inert`](/fr/docs/Web/HTML/Global_attributes/inert) - Le pseudo-élément [`::backdrop`](/fr/docs/Web/CSS/::backdrop) +- [Guide sur les formulaires HTML](/fr/docs/Learn/Forms) diff --git a/files/fr/web/progressive_web_apps/tutorials/cycletracker/html_and_css/html.jpg b/files/fr/web/progressive_web_apps/tutorials/cycletracker/html_and_css/html.jpg new file mode 100644 index 00000000000000..8022cd701c6ae1 Binary files /dev/null and b/files/fr/web/progressive_web_apps/tutorials/cycletracker/html_and_css/html.jpg differ diff --git a/files/fr/web/progressive_web_apps/tutorials/cycletracker/html_and_css/index.md b/files/fr/web/progressive_web_apps/tutorials/cycletracker/html_and_css/index.md new file mode 100644 index 00000000000000..fc32150206b0d6 --- /dev/null +++ b/files/fr/web/progressive_web_apps/tutorials/cycletracker/html_and_css/index.md @@ -0,0 +1,352 @@ +--- +title: "CycleTracker : fondations HTML et CSS" +short-title: Fondations HTML et CSS +slug: Web/Progressive_web_apps/Tutorials/CycleTracker/HTML_and_CSS +l10n: + sourceCommit: ab8736c08a6664970fec04088182b8c5e29a570a +--- + +{{PreviousMenuNext("Web/Progressive_web_apps/Tutorials/CycleTracker", "Web/Progressive_web_apps/Tutorials/CycleTracker/Secure_connection", "Web/Progressive_web_apps/Tutorials/CycleTracker")}} + +{{PWASidebar}} + +Pour construire une application web progressive, il faut créer une application web fonctionnelle. Dans cet article, nous mettrons en place la structure HTML d'une page web statique dont nous améliorerons l'apparence avec CSS. + +Notre projet consiste à créer CycleTracker, une application de suivi menstruel. La première étape de ce [tutoriel sur les PWA](/fr/docs/Web/Progressive_web_apps/Tutorials) consiste à écrire le squelette HTML et CSS. Pour notre application, la section située en haut de la page sera un formulaire où la personne pourra saisir les dates de début et de fin de chaque cycle menstruel. La section en bas de la page affichera une liste des cycles précédents. + +On crée un fichier HTML avec les métadonnées au sein de l'élément [``](/fr/docs/Web/HTML/Element/head) et comme contenu un formulaire et un emplacement pour afficher les données saisies. On ajoute ensuite une feuille de styles CSS externe pour améliorer l'apparence du site. + +Pour réaliser ce tutoriel, il est utile d'avoir des notions élémentaire en [HTML](/fr/docs/Learn/Getting_started_with_the_web/HTML_basics), [CSS](/fr/docs/Learn/Getting_started_with_the_web/CSS_basics), et [JavaScript](/fr/docs/Learn/Getting_started_with_the_web/JavaScript_basics). Si vous ne connaissez pas ces technologies, MDN contient des [guides pour démarrer sur le Web](/fr/docs/Learn/Getting_started_with_the_web), avec un ensemble d'articles introductifs au développement web. + +Dans les chapitres suivants, nous mettrons en place [un environnement de développement local](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Secure_connection) et verrons notre avancée avant d'ajouter [des fonctionnalités JavaScript](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality) pour convertir le contenu statique créé ici en une application web fonctionnelle. Une fois cette application fonctionnelle obtenue, nous pourrons l'améliorer progressivement pour obtenir une PWA qui puisse être installée et fonctionner hors-ligne. + +## Contenu web statique + +Notre site HTML statique contient des éléments [``](/fr/docs/Web/HTML/Element/link) et [` + + +``` + +Copiez le contenu de ce HTML dans votre éditeur de texte et enregistrez-le dans un fichier nommé `index.html`. + +## Le contenu HTML + +Même si le contenu HTML du fichier `index.html` vous semble familier, nous vous conseillons de lire cette section avant d'ajouter [temporairement des données en dur](#textes-temporaires-en-dur), d'ajouter du CSS dans la feuille de style externe [`styles.css`](#contenu-css), et de créer le fichier `app.js` qui contiendra [le code JavaScript de l'application](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality). + +La première ligne du document HTML est un préambule [doctype](/fr/docs/Glossary/Doctype) qui permet le bon fonctionnement du contenu. + +```html + +``` + +La balise racine [``](/fr/docs/Web/HTML/Element/html) englobe tout le contenu et possède l'attribut [`lang`](/fr/docs/Web/HTML/Global_attributes/lang) qui indique la langue principale de la page. + +```html + + + + +``` + +### La tête du document (``) + +L'élément [``](/fr/docs/Web/HTML/Element/head) contient des informations à propos de l'application web, interprétables par une machine et qui ne sont pas visibles à l'exception de [``](/fr/docs/Web/HTML/Element/title) qui affiche le titre de la page dans l'onglet du navigateur. + +`<head>` contient toutes les [métadonnées](/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML). Les deux premières informations dans `<head>` devraient toujours être le jeu de caractères, qui définit [l'encodage utilisé pour les caractères](/fr/docs/Glossary/Character_encoding), et [l'instruction sur la zone d'affichage (<i lang="en">viewport</i>)](/fr/docs/Web/HTML/Viewport_meta_tag) portée dans une balise [`<meta>`](/fr/docs/Web/HTML/Element/meta) pour que la page soit bien affichée avec la largeur de la zone d'affichage et ne soit pas réduite lorsqu'elle est chargée sur des petits écrans. + +```html +<head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width" /> +</head> +``` + +On définit le titre de la page avec le texte « Cycle Tracker » dans l'élément [`<title>`](/fr/docs/Web/HTML/Element/title). Même si le reste du contenu de `<head>` n'est pas visible sur la page, on peut voir le contenu de `<title>` dans l'onglet du navigateur lorsque la page est chargée, dans les résultats d'un moteur de recherche ou comme titre par défaut lorsqu'on met un marque-page. Le titre fournit également un nom accessible aux lecteurs d'écran pour les personnes qui se basent sur cette information pour savoir sur quel onglet elles sont. + +Le titre aurait pu être « Application de suivi des cycles menstruels », nous avons préféré une version plus courte et anglophone. + +```html +<title>Cycle Tracker +``` + +Bien qu'ils soient officiellement facultatifs, ces dex balises `` et l'élément `` sont trois composants de l'élément `<head>` qui devraient être présents dans tout document HTML. + +Le dernier composant inclus dans l'élément `<head>` est un élément [`<link>`](/fr/docs/Web/HTML/Element/link) reliant à notre feuille de style externe `styles.css` (qui n'est pas encore écrite) à notre document HTML. + +```html +<link rel="stylesheet" href="style.css" /> +``` + +L'élément HTML `<link>` établit une relation entre le document courant et une ressource externe. Il existe plus de 25 valeurs pour l'attribut [`rel`](/fr/docs/Web/HTML/Attributes/rel) (et de nombreuses autres valeurs ne sont pas spécifiées). La forme la plus fréquente, `rel="stylesheet"`, importe une ressource externe comme feuille de style. + +Nous reverrons cet élément `<link>` et son attribut `rel` dans un prochain chapitre lorsque nous inclurons [un lien vers le manifeste](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Manifest_file#ajouter_le_manifeste_à_lapplication). + +### Le corps du document (`<body>`) + +L'élément [`<body>`](/fr/docs/Web/HTML/Element/body) contient tout le contenu qu'on souhaite afficher aux personnes qui visitent le site sur Internet. + +Dans cet élément `<body>`, on inclut le nom de l'application sous la forme d'un titre de niveau 1 avec un élément [`<h1>`](/fr/docs/Web/HTML/Element/Heading_Elements), puis on place un formulaire avec un élément [`<form>`](/fr/docs/Web/HTML/Element/form). + +```html +<body> + <h1>Suivi des cycles</h1> + <form></form> +</body> +``` + +Le formulaire contiendra les instructions, les contrôles de saisie, un libellé pour chaque contrôle et un bouton pour soumettre une nouvelle entrée. Pour les contrôles de notre formulaire, on doit pouvoir saisir une date de début et une date de fin pour chaque cycle menstruel. + +Au sein de l'élément `<form>`, on inclut un élément [`<fieldset>`](/fr/docs/Web/HTML/Element/fieldset) avec une légende ([`<legend>`](/fr/docs/Web/HTML/Element/legend)) qui décrit l'objectif de ce groupe de champs. + +```html +<form> + <fieldset> + <legend> + Veuillez saisir la date de début et la date de fin de votre cycle + </legend> + </fieldset> +</form> +``` + +Les sélecteurs de date sont des éléments [`<input>`](/fr/docs/Web/HTML/Element/input) avec [`type="date"`](/fr/docs/Web/HTML/Element/input/date). On ajoute l'attribut [`required`](/fr/docs/Web/HTML/Attributes/required) pour réduire le risque d'erreur où la personne soumettrait un formulaire incomplet. + +Pour associer un libellé (`<label>`) avec chaque contrôle de formulaire, on utilise l'attribut [`id`](/fr/docs/Web/HTML/Global_attributes/id) de chaque `<input>` et on fait correspondre la valeur de l'attribut [`for`](/fr/docs/Web/HTML/Attributes/for) de l'élément [`<label>`](/fr/docs/Web/HTML/Element/label) associé. Chaque libellé associé fournit ainsi un [nom accessible](/fr/docs/Glossary/Accessible_name) au champ du formulaire.. + +```html +<label for="start-date">Date de début</label> +<input type="date" id="start-date" required /> +``` + +Pour assembler le tout, on ajoute deux paragraphes ([`<p>`](/fr/docs/Web/HTML/Element/p)) au sein de l'élément `<fieldset>`, chacun contenant un sélecteur date pour le début et la fin du cycle menstruel saisi et les libellés ([`<label>`](/fr/docs/Web/HTML/Element/label)) associés. On ajoute aussi un élément [`<button>`](/fr/docs/Web/HTML/Element/button) pour soumettre le formulaire avec le texte « Ajouter un cycle menstruel » entre les balises de l'élément. L'attribut `type="submit"` est optionnel, en effet `submit` est le type par défaut pour les éléments `<button>`. + +```html +<form> + <fieldset> + <legend> + Veuillez saisir la date de début et la date de fin de votre cycle + </legend> + <p> + <label for="start-date">Date de début</label> + <input type="date" id="start-date" required /> + </p> + <p> + <label for="end-date">Date de fin</label> + <input type="date" id="end-date" required /> + </p> + </fieldset> + <p> + <button type="submit">Ajouter un cycle menstruel</button> + </p> +</form> +``` + +Nous vous invitons [à approfondir la construction de formulaires web accessibles](/fr/docs/Learn/Forms). + +### Textes temporaires en dur + +On ajoute ensuite un élément [`<section>`](/fr/docs/Web/HTML/Element/section) vide. Ce conteneur sera rempli grâce à du code JavaScript. + +```html +<section id="past-periods"></section> +``` + +Lorsque la personne enverra le formulaire, nous utiliserons JavaScript pour intercepter les données et afficheront ainsi une liste des cycles passés, avec un titre pour cette section. + +Pour le moment, nous allons inscrire temporairement du contenu en dur dans cet élément `<section>`, avec un titre `<h2>` et quelques cycles passés. Ce contenu nous permettra de régler la mise en forme lorsque nous écrirons la feuille de style CSS. + +```html +<section id="past-periods"> + <h2>Cycles antérieurs</h2> + <ul> + <li>Du 01/01/2024 au 01/06/2024</li> + <li>Du 01/29/2024 au 02/04/2024</li> + </ul> +</section> +``` + +Le contenu à l'intérieur de `<section id="past-periods"></section>` est temporaire. Nous le retirerons ou le commenterons lorsque nous aurons [terminé la mise en forme CSS](#contenu_css) et que l'apparence de l'application sera satisfaisante. + +### Lien JavaScript + +Avant de fermer l'élément `</body>`, on ajoute un lien vers le fichier JavaScript `app.js` (qui n'est pas encore écrit). On ajoute l'attribut [`defer`](/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript#async_et_defer) pour que le chargement du script soit différé après le chargement et l'analyse du document HTML. + +```html +<script src="app.js" defer></script> +``` + +Le fichier `app.js` contiendra tout le fonctionnement de notre application : les gestionnaires d'évènements pour le bouton, l'enregistrement des données dans le stockage local, et l'affichage des cycles dans la section correspondante. + +[Le fichier HTML pour cette étape](https://github.com/mdn/pwa-examples/tree/master/cycletracker/html_and_css/index.html) est désormais terminé ! Vous pouvez ouvrir le fichier dans votre navigateur. Toutefois, vous verrez qu'il est plutôt basique. Nous améliorerons cet aspect dans la section qui vient. + +## Contenu CSS + +Nous pouvons maintenant mettre en forme notre contenu HTML statique à l'aide de CSS. Voici la feuille de style CSS complète : + +```css +body { + margin: 1vh 1vw; + background-color: #efe; +} +ul, +fieldset, +legend { + border: 1px solid; + background-color: #fff; +} +ul { + padding: 0; + font-family: monospace; +} +li, +legend { + list-style-type: none; + padding: 0.2em 0.5em; + background-color: #cfc; +} +li:nth-of-type(even) { + background-color: inherit; +} +``` + +Si vous comprenez chacune de ces lignes, n'hésitez pas à copier les règles précédentes ou à écrire votre propre CSS, puis enregistrez le fichier avec le nom [`style.css`](https://github.com/mdn/pwa-examples/tree/master/cycletracker/html_and_css/style.css), avant de [finaliser les fichiers HTML et CSS](#finaliser-le-html-statique-et-le-css-de-notre-pwa). Si vous découvrez quoi que ce soit dans cette feuille CSS, n'hésitez pas à poursuivre votre lecture, nous allons expliquer chaque règle. + +![Capture d'écran de la page web où on voit le fond coloré en vert clair, un formulaire avec une légende, deux sélecteurs de date et un bouton. La section inférieure affiche des données fausses pour deux cycles menstruels ainsi qu'un titre.](html.jpg) + +### Explications du CSS + +On utilise la propriété [`background-color`](/fr/docs/Web/CSS/background-color) pour créer un arrière-plan vert clair (`#efe`) sur le corps du document (`body`). Pour la liste non-ordonnée, l'ensemble des champs et la légende, on utilise un arrière-plan blanc (`#fff`) et une fine bordure grâce à la propriété [`border`](/fr/docs/Web/CSS/border). On surcharge la valeur de `background-color` pour la légende et les éléments de la liste en utilisant un vert plus foncé (`#cfc`). + +On utilise [le sélecteur](/fr/docs/Web/CSS/CSS_selectors) de pseudo-classe [`:nth-of-type(even)`](/fr/docs/Web/CSS/:nth-of-type) pour cibler chaque élément pair de la liste et lui affecter [`inherit`](/fr/docs/Web/CSS/inherit) pour qu'il ait la couleur d'arrière-plan de son parent. Ici, cela signifie que les éléments pairs de la liste auront un arrière-plan blanc (`#fff`), comme celui de la liste. + +```css +body { + background-color: #efe; +} +ul, +fieldset, +legend { + border: 1px solid; + background-color: #fff; +} +li, +legend { + background-color: #cfc; +} +li:nth-of-type(even) { + background-color: inherit; +} +``` + +Pour que la liste et ses éléments non-ordonnés ne ressemblent pas à une liste, on retire le remplissage (<i lang="en">padding</i>) en indiquant [`padding: 0`](/fr/docs/Web/CSS/padding) sur l'élément `ul`, puis on retire les puces avec [`list-style-type: none`](/fr/docs/Web/CSS/list-style-type). + +```css +ul { + padding: 0; +} +li { + list-style-type: none; +} +``` + +On ajoute un peu d'espace en fixant la marge ([`margin`](/fr/docs/Web/CSS/margin)) du corps en utilisant [les unités relatives à la zone d'affichage (<i lang="en">viewport</i>)](/fr/docs/Web/CSS/length#longueurs_liées_au_viewport) `vw` et `vh`. Ainsi, l'espace laissé autour de l'application sera proportionnel à la taille de la zone d'affichage. On ajoute également un peu de remplissage aux éléments `li` et `legend`. Enfin, pour améliorer l'alignement des données sur les cycles antérieurs, on applique [`font-family: monospace`](/fr/docs/Web/CSS/font-family) sur les éléments `ul` de la section des résultats. Avec une police à chasse fixe, chaque caractère aura ainsi la même largeur. + +```css +body { + margin: 1vh 1vw; +} +ul { + font-family: monospace; +} +li, +legend { + padding: 0.2em 0.5em; +} +``` + +On peut combiner ce qu'on vient de construire en plaçant plusieurs propriétés dans chaque bloc de déclaration. On peut même regrouper les styles pour `li` et `legend`. En effet, les styles qui ne s'appliquent pas à un sélecteur donné (comme la déclaration `list-style-type` pour `legend`) sont ignorés. + +```css +body { + margin: 1vh 1vw; + background-color: #efe; +} +ul, +fieldset, +legend { + border: 1px solid; + background-color: #fff; +} +ul { + padding: 0; + font-family: monospace; +} +li, +legend { + list-style-type: none; + padding: 0.2em 0.5em; + background-color: #cfc; +} +li:nth-of-type(even) { + background-color: inherit; +} +``` + +Si le CSS qui précède vous paraît toujours abscons, n'hésitez pas à lire les définitions des [propriétés CSS](/fr/docs/Glossary/Property/CSS) et [des sélecteurs](/fr/docs/Web/CSS/CSS_selectors), ou à suivre le parcours d'apprentissage [Débuter en CSS](/fr/docs/Learn/CSS/First_steps/Getting_started). + +Que vous utilisiez le CSS précédent tel quel, ou que vous ayez adapté cette mise en forme, voire que vous ayez écrit votre feuille de style à partir de 0, incluez ce contenu CSS dans un nouveau fichier et enregistrez-le avec le nom [`style.css`](https://github.com/mdn/pwa-examples/tree/master/cycletracker/html_and_css/style.css), dans le même répertoire que le fichier `index.html`. + +### Finaliser le HTML statique et le CSS de notre PWA + +Avant d'aller plus loin, [commentons](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#commentaires_en_html) ou supprimons les fausses données et le titre correspondant : + +```html +<section id="past-periods"> + <!-- + <h2>Cycles antérieurs</h2> + <ul> + <li>Du 01/01/2024 au 01/06/2024</li> + <li>Du 01/29/2024 au 02/04/2024</li> + </ul> + --> +</section> +``` + +## Pour la suite + +Avant d'ajouter [les fonctionnalités JavaScript](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality) pour convertir notre contenu statique en application web et de l'améliorer progressivement en une PWA grâce à [un manifeste](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Manifest_file) et [un <i lang="en">service worker</i>](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers), nous allons [créer un environnement de développement local](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Secure_connection) pour voir l'évolution de notre application dans notre navigateur. + +Avant d'aller plus loin, vous pouvez [voir le résultat obtenu à ce chapitre](https://mdn.github.io/pwa-examples/cycletracker/html_and_css) et télécharger [le code source HTML et CSS de CycleTracker](https://github.com/mdn/pwa-examples/tree/master/cycletracker/html_and_css). + +{{PreviousMenuNext("Web/Progressive_web_apps/Tutorials/CycleTracker/", "Web/Progressive_web_apps/Tutorials/CycleTracker/Secure_connection", "Web/Progressive_web_apps/Tutorials/CycleTracker")}} diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 59b73b963b98b6..a165ef916cc660 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -227,7 +227,7 @@ /ja/docs/CSS/@keyframes /ja/docs/Web/CSS/@keyframes /ja/docs/CSS/@media /ja/docs/Web/CSS/@media /ja/docs/CSS/@page /ja/docs/Web/CSS/@page -/ja/docs/CSS/Adjacent_sibling_selectors /ja/docs/Web/CSS/Adjacent_sibling_combinator +/ja/docs/CSS/Adjacent_sibling_selectors /ja/docs/Web/CSS/Next-sibling_combinator /ja/docs/CSS/Alternative_style_sheets /ja/docs/Web/CSS/Alternative_style_sheets /ja/docs/CSS/At-rule /ja/docs/Web/CSS/At-rule /ja/docs/CSS/Attribute_selectors /ja/docs/Web/CSS/Attribute_selectors @@ -248,7 +248,7 @@ /ja/docs/CSS/Comments /ja/docs/Web/CSS/Comments /ja/docs/CSS/Counters /ja/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters /ja/docs/CSS/Descendant_selectors /ja/docs/Web/CSS/Descendant_combinator -/ja/docs/CSS/General_sibling_selectors /ja/docs/Web/CSS/General_sibling_combinator +/ja/docs/CSS/General_sibling_selectors /ja/docs/Web/CSS/Subsequent-sibling_combinator /ja/docs/CSS/Getting_Started /ja/docs/Learn/CSS /ja/docs/CSS/Getting_Started/Boxes /ja/docs/Learn/CSS/Building_blocks/The_box_model /ja/docs/CSS/Getting_Started/Cascading_and_inheritance /ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance @@ -3536,7 +3536,8 @@ /ja/docs/Web/CSS/@viewport/user-zoom /ja/docs/Web/CSS /ja/docs/Web/CSS/@viewport/viewport-fit /ja/docs/Web/CSS /ja/docs/Web/CSS/@viewport/zoom /ja/docs/Web/CSS -/ja/docs/Web/CSS/Adjacent_sibling_selectors /ja/docs/Web/CSS/Adjacent_sibling_combinator +/ja/docs/Web/CSS/Adjacent_sibling_combinator /ja/docs/Web/CSS/Next-sibling_combinator +/ja/docs/Web/CSS/Adjacent_sibling_selectors /ja/docs/Web/CSS/Next-sibling_combinator /ja/docs/Web/CSS/Background_Backup /ja/docs/Web/CSS/background /ja/docs/Web/CSS/Block_formatting_context /ja/docs/Web/Guide/CSS/Block_formatting_context /ja/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support /ja/docs/orphaned/Web/CSS/CSS_Animations/Detecting_CSS_animation_support @@ -3614,7 +3615,8 @@ /ja/docs/Web/CSS/Descendant_selectors /ja/docs/Web/CSS/Descendant_combinator /ja/docs/Web/CSS/Filter_Effects /ja/docs/Web/CSS/CSS_filter_effects /ja/docs/Web/CSS/Flexible_boxes /ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox -/ja/docs/Web/CSS/General_sibling_selectors /ja/docs/Web/CSS/General_sibling_combinator +/ja/docs/Web/CSS/General_sibling_combinator /ja/docs/Web/CSS/Subsequent-sibling_combinator +/ja/docs/Web/CSS/General_sibling_selectors /ja/docs/Web/CSS/Subsequent-sibling_combinator /ja/docs/Web/CSS/Getting_started /ja/docs/Learn/CSS /ja/docs/Web/CSS/Getting_started/Boxes /ja/docs/Learn/CSS/Building_blocks/The_box_model /ja/docs/Web/CSS/Getting_started/Cascading_and_inheritance /ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index eed0ebf8b00af1..80460fc2333a65 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -16214,10 +16214,6 @@ "modified": "2020-11-30T12:30:31.824Z", "contributors": ["mfuji09", "yyss"] }, - "Web/CSS/Adjacent_sibling_combinator": { - "modified": "2020-10-15T21:20:46.943Z", - "contributors": ["mfuji09", "uknmr", "sii", "lv7777", "ethertank"] - }, "Web/CSS/Alternative_style_sheets": { "modified": "2020-10-15T21:15:43.078Z", "contributors": [ @@ -16853,18 +16849,6 @@ "modified": "2020-10-15T21:22:42.147Z", "contributors": ["mfuji09", "ethertank", "sosleepy"] }, - "Web/CSS/General_sibling_combinator": { - "modified": "2020-10-15T21:22:37.143Z", - "contributors": [ - "dlwe", - "h-subaru", - "mfuji09", - "yassh", - "SphinxKnight", - "ethertank", - "sosleepy" - ] - }, "Web/CSS/ID_selectors": { "modified": "2020-12-03T15:27:41.759Z", "contributors": ["mfuji09", "FumiyaShibusawa", "ethertank", "sii"] @@ -16967,6 +16951,10 @@ "Piro" ] }, + "Web/CSS/Next-sibling_combinator": { + "modified": "2020-10-15T21:20:46.943Z", + "contributors": ["mfuji09", "uknmr", "sii", "lv7777", "ethertank"] + }, "Web/CSS/Privacy_and_the_:visited_selector": { "modified": "2020-12-01T21:03:57.973Z", "contributors": ["mfuji09", "SphinxKnight", "ethertank", "sosleepy"] @@ -17029,6 +17017,18 @@ "modified": "2020-04-20T23:20:01.731Z", "contributors": ["mfuji09", "sakai-akinobu", "yoshidax", "ethertank", "sii"] }, + "Web/CSS/Subsequent-sibling_combinator": { + "modified": "2020-10-15T21:22:37.143Z", + "contributors": [ + "dlwe", + "h-subaru", + "mfuji09", + "yassh", + "SphinxKnight", + "ethertank", + "sosleepy" + ] + }, "Web/CSS/Syntax": { "modified": "2020-08-16T03:09:34.358Z", "contributors": [ diff --git a/files/ja/glossary/representation_header/index.md b/files/ja/glossary/representation_header/index.md index a42114d0e27654..c22d61739ea522 100644 --- a/files/ja/glossary/representation_header/index.md +++ b/files/ja/glossary/representation_header/index.md @@ -9,7 +9,7 @@ slug: Glossary/Representation_header 例えば、同じデータが XML や JSON などの特定のメディア種別の形式に変換されたり、特定の記述言語や地理的地域にローカライズされたり、伝送用に圧縮またはその他の方法で符号化されたりする可能性があります。 基本的なリソースはそれぞれの場合で同じですが、その表現は異なります。 -クライアントは[コンテンツ交渉](/ja/docs/Web/HTTP/Content_negotiation)の際に（`Accept-*` ヘッダーを用いて）送るべき形式を指定し、表現ヘッダーは実際に受信される*選択された表現*の形式をクライアントに伝えます。 +クライアントは[コンテンツネゴシエーション](/ja/docs/Web/HTTP/Content_negotiation)の際に（`Accept-*` ヘッダーを用いて）送るべき形式を指定し、表現ヘッダーは実際に受信される*選択された表現*の形式をクライアントに伝えます。 表現ヘッダーは HTTP リクエストおよびレスポンスの両方のメッセージに存在する可能性があります。 `HEAD` リクエストに対するレスポンスとして送られる場合、リソースが実際にリクエストされたときに選択される本文の内容を説明します。 diff --git a/files/ja/learn/css/howto/highlight_para_after_h1/index.md b/files/ja/learn/css/howto/highlight_para_after_h1/index.md index ec00bf1ff4ad9b..fe898cc1bbd10b 100644 --- a/files/ja/learn/css/howto/highlight_para_after_h1/index.md +++ b/files/ja/learn/css/howto/highlight_para_after_h1/index.md @@ -2,7 +2,7 @@ title: 見出しの直後に来た段落を強調表示するには slug: Learn/CSS/Howto/Highlight_para_after_h1 l10n: - sourceCommit: 8e2641ebe076ab89299c77a51ece882de4ba5efb + sourceCommit: b85bf9fcc2c0062a765d104799d7d45d9e9b13bb --- {{LearnSidebar}} @@ -15,7 +15,7 @@ l10n: ## 隣接兄弟結合子 -CSS の [CSS セレクター](/ja/docs/Web/CSS/CSS_Selectors) のグループには、複数のセレクターを組み合わせて選択することから**結合子**と呼ばれるものが存在します。この例では、[隣接兄弟結合子](/ja/docs/Web/CSS/Adjacent_sibling_combinator)を使用することにします。この結合子は、ある要素が他の要素の隣にあることを基準に選択します。HTML は {{htmlelement("Heading_Elements", "h1")}} の後に {{htmlelement("p")}} が続いています。`<p>` は `<h1>` の隣接する兄弟要素なので、`h1 + p` で選択することができます。 +CSS の [CSS セレクター](/ja/docs/Web/CSS/CSS_selectors) のグループには、複数のセレクターを組み合わせて選択することから**結合子**と呼ばれるものが存在します。この例では、[隣接兄弟結合子](/ja/docs/Web/CSS/Adjacent_sibling_combinator)を使用することにします。この結合子は、ある要素が他の要素の隣にあることを基準に選択します。HTML は {{htmlelement("Heading_Elements", "h1")}} の後に {{htmlelement("p")}} が続いています。`<p>` は `<h1>` の隣接する兄弟要素なので、`h1 + p` で選択することができます。 {{EmbedGHLiveSample("css-examples/howto/highlight_h1_plus_para.html", '100%', 800)}} diff --git a/files/ja/learn/index.md b/files/ja/learn/index.md index 8175e46074c667..6bb5a02c83abfd 100644 --- a/files/ja/learn/index.md +++ b/files/ja/learn/index.md @@ -1,13 +1,15 @@ --- title: ウェブ開発を学ぶ slug: Learn +l10n: + sourceCommit: f22e2f56c6cc82b43b6a14fa213755512e23cd8f --- {{LearnSidebar}} -MDN 学習エリアへようこそ。この一連の記事では、ウェブ開発が全くの初心者にとって、シンプルなウェブサイトのコーディングを始めるのに必要な全てを提供することを目標とします。 +MDN 学習領域へようこそ。この一連の記事では、ウェブ開発が全くの初心者にとって、シンプルなウェブサイトのコーディングを始めるのに必要な全てを提供することを目標とします。 -MDN のこのエリアの目的は、あなたを「初心者」から「エキスパート」にすることではなく、「初心者」から「中級者」にすることです。そこから、 [MDN のその他の部分](/ja/) や、多くの予備知識を前提とする他の中級から上級のリソースから学びながら、自分の道を歩み始めることができるようになるはずです。 +MDN のこの領域の目的は、あなたを「初心者」から「エキスパート」にすることではなく、「初心者」から「中級者」にすることです。そこから、 [MDN のその他の部分](/ja/) や、多くの予備知識を前提とする他の中級から上級のリソースから学びながら、自分の道を歩み始めることができるようになるはずです。 全くの初心者であれば、ウェブ開発は難しいものです - 私たちはあなたの手を握り、あなたが快適に感じ、適切にトピックを学ぶために十分な詳細を提供します。あなたがウェブ開発を学習している学生（個人またはクラスの一部として）、クラスの教材を探している先生、趣味の人、ウェブ技術の仕組みをもっと理解したい人など、どのような人であっても、安心してください。 @@ -24,7 +26,7 @@ MDN のこのエリアの目的は、あなたを「初心者」から「エキ - 全くの初心者の方 - : ウェブ開発の全くの初心者なら、[ウェブ入門](/ja/docs/Learn/Getting_started_with_the_web)を一通り読むことをお勧めします。これを読めば、ウェブ開発を始めるのに必要な基本的な知識はすべて見つかるでしょう。 - 基本の次の段階の方 - - : すでにいくらかの知識があるなら、次のステップは {{glossary("HTML")}} と {{glossary("CSS")}} を詳しく学ぶことです。 [HTML 入門](/ja/docs/Learn/HTML/Introduction_to_HTML)のモジュールから始めて、 [CSS 入門](/ja/docs/Learn/CSS/Introduction_to_CSS)のモジュールに移動してください。 + - : すでにいくらかの知識があるなら、次のステップは {{glossary("HTML")}} と {{glossary("CSS")}} を詳しく学ぶことです。 [HTML 入門](/ja/docs/Learn/HTML/Introduction_to_HTML)のモジュールから始めて、 [CSS 入門](/ja/docs/Learn/CSS/First_steps)のモジュールに移動してください。 - スクリプト作成まで進む方 - : HTML と CSS を十分知っていたり、主にコーディングに興味があるなら、 {{glossary("JavaScript")}} やサーバーサイド開発に行きたくなるでしょう。 [JavaScript の第一歩](/ja/docs/Learn/JavaScript/First_steps)と[サーバーサイドの第一歩](/ja/docs/Learn/Server-side/First_steps)のモジュールから始めてください。 - フレームワークとツールの利用 @@ -34,14 +36,14 @@ MDN のこのエリアの目的は、あなたを「初心者」から「エキ ## カバーするトピック -下記は MDN 学習エリアにてカバーしているすべてのトピック一覧です。 +下記は MDN 学習領域にてカバーしているすべてのトピック一覧です。 - [ウェブ入門](/ja/docs/Learn/Getting_started_with_the_web) - : 完全なウェブ開発初心者用の実用的な入門を提供します。 - [HTML — ウェブの構造化](/ja/docs/Learn/HTML) - : HTML はコンテンツのいろいろな部分を構造化し、意味や目的を定義するのに使う言語です。このトピックでは HTML を詳細に教えます。 -- [CSS — ウェブのスタイルづけ](/ja/docs/Learn/CSS) - - : CSS はウェブのコンテンツをスタイルづけしたりレイアウトしたり、アニメーションのような振る舞いを追加したりする言語です。このトピックでは CSS を包括的にカバーします。 +- [CSS — ウェブのスタイル付け](/ja/docs/Learn/CSS) + - : CSS はウェブのコンテンツウェブコンテンツのスタイルやレイアウトを制御したり、アニメーションのような振る舞いを追加したりするために用いる言語です。このトピックでは CSS を包括的にカバーします。 - [JavaScript — 動的クライアントサイドスクリプティング](/ja/docs/Learn/JavaScript) - : JavaScript はウェブページに動的な機能を追加するスクリプト言語です。このトピックでは JavaScript を書いたり理解するのに十分となるのに必要なすべての要点を教えます。 - [ウェブフォーム — ユーザーデータを扱う](/ja/docs/Learn/Forms) @@ -50,6 +52,8 @@ MDN のこのエリアの目的は、あなたを「初心者」から「エキ - : アクセシビリティはウェブコンテンツをなるべく多くの人に利用できるようにする実践であり、それは障がいや、端末や、ロケールや、その他の分化させる要素に関係なく利用できるようにします。このトピックでは知る必要のあるすべてが与えられます。 - [ウェブの性能 — ウェブサイトを高速かつレスポンシブにする](/ja/docs/Learn/Performance) - : ウェブの性能は、ウェブアプリケーションのダウンロードを確実に高速化し、ダウンロードを帯域幅、画面の寸法、ネットワーク、端末の能力にかかわらず、ユーザーの操作をレスポンシブにする技術です。 +- [MathML](/ja/docs/Learn/MathML) + - : MathML は、分数、スクリプト、基数、行列、インテグラル、級数などを用いて、ウェブページに数式を記述するために使用する言語です。このトピックでは、MathML を網羅します。 - [ツールとテスト](/ja/docs/Learn/Tools_and_testing) - : このトピックでは、開発者が作業を円滑に進めるために使用するツール、例えばブラウザー間テストツール、リンター、フォーマッター、変換ツール、バージョン管理システム、デプロイツール、クライアント側 JavaScript フレームワークなどについて説明します。 - [サーバーサイドのウェブサイトプログラミング](/ja/docs/Learn/Server-side) @@ -57,13 +61,13 @@ MDN のこのエリアの目的は、あなたを「初心者」から「エキ ## コード例の入手 -学習エリアにあるコードの例はすべて [GitHub から利用可能](https://github.com/mdn/learning-area/)です。すべてのコードを自分のコンピューターにコピーしたいのであれば、[最新の master コードブランチの ZIP をダウンロードする](https://codeload.github.com/mdn/learning-area/zip/main)のが最も簡単です。 +学習領域にあるコードの例はすべて [GitHub から利用可能](https://github.com/mdn/learning-area/)です。すべてのコードを自分のコンピューターにコピーしたいのであれば、[最新の master コードブランチの ZIP をダウンロードする](https://codeload.github.com/mdn/learning-area/zip/main)のが最も簡単です。 自動更新ができる、より柔軟な方法でリポジトリーをコピーしたい場合は、より複雑な指示に従うことになります。 1. マシンに [Git をインストールします](https://git-scm.com/downloads)。これは GitHub が動作する基盤となっているバージョン管理システムのソフトウェアです。 2. コンピューターで[コマンドプロンプト](https://www.lifewire.com/how-to-open-command-prompt-2618089) (Windows) またはターミナル ([Linux](https://help.ubuntu.com/community/UsingTheTerminal), [macOS](https://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line)) を開きます。 -3. 学習エリアのリポジトリーを、コマンドプロンプト/ターミナルが指している現在位置の learning-area というフォルダーにコピーするには、下記のコマンドを使います。 +3. 学習領域のリポジトリーを、コマンドプロンプト/ターミナルが指している現在位置の learning-area というフォルダーにコピーするには、下記のコマンドを使います。 ```bash git clone https://github.com/mdn/learning-area @@ -87,7 +91,7 @@ MDN のこのエリアの目的は、あなたを「初心者」から「エキ ## 連絡方法 -何か連絡を取りたいことがある場合は、 [Discourse フォーラム](https://discourse.mozilla.org/c/mdn/236)でメッセージを投稿するのがもっともよい方法です。サイト上で間違っていると思うことや足りないもの、新しい学習テーマのリクエスト、わからない項目のヘルプなど、どんなことでもお聞かせください。 +何か連絡を取りたいことがある場合は、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)を使用してください。サイト上で間違っていると思うことや足りないもの、新しい学習テーマのリクエスト、わからない項目のヘルプなど、どんなことでもお聞かせください。 コンテンツの開発、改善の手助けに興味がある場合、[協力するには？](/ja/docs/MDN/Contribute)を覗いて、始めてください！あなたが初心者でも、先生でも、熟練のウェブ開発者でも、その他学習体験の改善に興味がある人でも、誰でも歓迎です。 diff --git a/files/ja/mdn/writing_guidelines/howto/write_an_api_reference/index.md b/files/ja/mdn/writing_guidelines/howto/write_an_api_reference/index.md index 77cfb13b143031..eaafe2da0f85f9 100644 --- a/files/ja/mdn/writing_guidelines/howto/write_an_api_reference/index.md +++ b/files/ja/mdn/writing_guidelines/howto/write_an_api_reference/index.md @@ -1,6 +1,8 @@ --- title: API リファレンスの書き方 slug: MDN/Writing_guidelines/Howto/Write_an_api_reference +l10n: + sourceCommit: 4ae3910612ddfe81b5acf95e58385275380fd87e --- {{MDNSidebar}} @@ -50,7 +52,7 @@ API が変更された場合、参考にしたり学んだりする既存のデ ### 執筆や更新が必要な記事のリストを作成する API リファレンスには、一般的に次のようなページが含まれます。 -各ページの内容。例、テンプレートの詳細は、[ページの種類](/ja/docs/MDN/Structures/Page_types)の記事で確認することができます。 +各ページの内容。例、テンプレートの詳細は、[ページの種類](/ja/docs/MDN/Writing_guidelines/Page_structures/Page_types)の記事で確認することができます。 作業を始める前に、作成すべきすべてのページのリストを書き出してください。 1. 概要ページ @@ -206,7 +208,7 @@ API の概要ページは、 API の役割、最上位のインターフェイ ## ページの作成 -次に、以下の構造に従って必要なページを作成します。 [MDN の content の README](https://github.com/mdn/content#adding-a-new-document) には、新しい記事を作成する手順が書かれています。また、[ページの種類](/ja/docs/MDN/Structures/Page_types)のガイドには、役に立つかもしれない例やページテンプレートが書かれています。 +次に、以下の構造に従って必要なページを作成します。 [MDN の content の README](https://github.com/mdn/content#adding-a-new-document) には、新しい記事を作成する手順が書かれています。また、[ページの種類](/ja/docs/MDN/Writing_guidelines/Page_structures/Page_types)のガイドには、役に立つかもしれない例やページテンプレートが書かれています。 ### 概要ページの構成 @@ -219,7 +221,7 @@ API ランディングページは、 API の規模によって長さが大き 3. **インターフェイスの一覧**: この節は、「\[API 名] のインターフェイス」というタイトルで、 API を構成する各インターフェイスのリファレンスページへのリンクと、各インターフェイスの機能についての簡単な説明を提供します。新しいページを素早く作成する方法については、「\\{{domxref}} マクロを使用した他の API 機能の参照」を参照してください。 4. **例**: この節では、 API の簡単な使用例を 1 つか 2 つ示してください。 5. **仕様書一覧表**: ここに、仕様書の一覧表を入れる必要があります。詳しくは「仕様書参照表の作成」の節をご覧ください。 -6. **ブラウザーの互換性**: ここに、ブラウザーの互換性一覧表を入れてください。詳しくは[互換性一覧表](/ja/docs/MDN/Structures/Compatibility_tables)をご覧ください。 +6. **ブラウザーの互換性**: ここに、ブラウザーの互換性一覧表を入れてください。詳しくは[互換性一覧表](/ja/docs/MDN/Writing_guidelines/Page_structures/Compatibility_tables)をご覧ください。 7. **関連情報**: 「関連情報」の節には、 MDN （および外部）のチュートリアル、サンプル、ライブラリーなど、この技術について学ぶ際に役立つかもしれないさらなるリンクを含める野に良い場所です。 8. **タグ**: 各リファレンスページに含めるべき標準タグがあります。詳しくは「タグ」の節をご覧ください。 @@ -237,7 +239,7 @@ API ランディングページは、 API の規模によって長さが大き 3. **説明**: インターフェイスページの最初の段落では、インターフェイスの包括的な目的を簡潔に説明する必要があります。追加の説明が必要な場合は、さらに数段落を含めるとよいでしょう。インターフェイスが実質的には辞書である場合、「インターフェイス」の代わりにその用語を使用する必要があります。 4. **継承図:** [`\{{InheritanceDiagram}}`](https://github.com/mdn/yari/blob/main/kumascript/macros/InheritanceDiagram.ejs) マクロを使用して、このインターフェイスの SVG の継承図を埋め込みます。 -5. **プロパティの一覧、メソッドの一覧**: これらの節は、「プロパティ」と「メソッド」というタイトルで、そのインターフェイスのそれぞれのプロパティ/メソッドのリファレンスページへのリンクと（\\{{domxref}} マクロを使用します）、それぞれのプロパティが何を行うかの説明を提供します。これらは[説明/定義リスト](/ja/docs/MDN/Contribute/Markdown_in_MDN#定義リスト)を使用してマークアップしてください。それぞれの説明は短く簡潔にしてください。可能であれば 1 文で。他のページへのリンクを素早く作成する方法については、「\\{{domxref}} マクロによる他の API 機能の参照」を参照してください。 +5. **プロパティの一覧、メソッドの一覧**: これらの節は、「プロパティ」と「メソッド」というタイトルで、そのインターフェイスのそれぞれのプロパティ/メソッドのリファレンスページへのリンクと（\\{{domxref}} マクロを使用します）、それぞれのプロパティが何を行うかの説明を提供します。これらは[説明/定義リスト](/ja/docs/MDN/Writing_guidelines/Howto/Markdown_in_MDN#定義リスト)を使用してマークアップしてください。それぞれの説明は短く簡潔にしてください。可能であれば 1 文で。他のページへのリンクを素早く作成する方法については、「\\{{domxref}} マクロによる他の API 機能の参照」を参照してください。 それぞれの節の冒頭で、プロパティ/メソッドの一覧の前に、イタリック体で適切な文章を使用して継承を示してください。 @@ -246,11 +248,11 @@ API ランディングページは、 API の規模によって長さが大き - _このインターフェイスは固有のメソッドを実装していませんが、 \\{{domxref("XYZ")}}, および \\{{domxref("XYZ2")}} からメソッドを継承しています。_ - _このインターフェイスには \\{{domxref("XYZ")}}, および \\{{domxref("XYZ2")}} から継承したプロパティもあります。_ - > **メモ:** 読み取り専用のプロパティには \\{{readonlyInline}} マクロを、その \\{{domxref}} リンクと同じ行に設置すると、小さくてかっこいい「読み取り専用」バッジを生成します。（必要に応じて、\\{{experimentalInline}}, \\{{non-standard_Inline}}, \\{{deprecatedInline}} マクロの後に使用してください）。 + > **メモ:** 読み取り専用のプロパティには \\{{ReadOnlyInline}} マクロを、その \\{{domxref}} リンクと同じ行に設置すると、小さくてかっこいい「読み取り専用」バッジを生成します。（必要に応じて、\\{{experimentalInline}}, \\{{non-standard_Inline}}, \\{{deprecatedInline}} マクロの後に使用してください）。 -6. **例**: API の主要な機能の典型的な使用法を示すコードリストを入れてください。すべてのコードを列挙するのではなく、そのうちの興味深い部分のみを並べてください。完全なコードのリストを紹介する場合は。例の全体を含んだ [GitHub](https://github.com/) リポジトリーを参照することができます。また、 [GitHub gh-pages](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site) の機能を使って作成したライブサンプルにリンクすることもできます（もちろん、クライアント側のコードしか使用していなければですが）。サンプルが視覚的であれば、MDN [ライブサンプル](/ja/docs/MDN/Structures/Live_samples) 機能を使ってページ内でライブ実行できるようにすることができます。 +6. **例**: API の主要な機能の典型的な使用法を示すコードリストを入れてください。すべてのコードを列挙するのではなく、そのうちの興味深い部分のみを並べてください。完全なコードのリストを紹介する場合は。例の全体を含んだ [GitHub](https://github.com/) リポジトリーを参照することができます。また、 [GitHub gh-pages](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site) の機能を使って作成したライブサンプルにリンクすることもできます（もちろん、クライアント側のコードしか使用していなければですが）。サンプルが視覚的であれば、MDN [ライブサンプル](/ja/docs/MDN/Writing_guidelines/Page_structures/Live_samples) 機能を使ってページ内でライブ実行できるようにすることができます。 7. **仕様書一覧表**: ここに、仕様書一覧表を入れる必要があります。詳しくは「仕様書参照表の作成」の節をご覧ください。 -8. **ブラウザーの互換性**: ここで、ブラウザーの互換性一覧表を入れる必要があります。詳しくは、[互換性一覧表](/ja/docs/MDN/Structures/Compatibility_tables)を参照してください。 +8. **ブラウザーの互換性**: ここで、ブラウザーの互換性一覧表を入れる必要があります。詳しくは、[互換性一覧表](/ja/docs/MDN/Writing_guidelines/Page_structures/Compatibility_tables)を参照してください。 9. **ポリフィル**: 適切であれば、この節に、 API を実装していないブラウザーでも使用できるようにするためのポリフィルのコードを提供してください。ポリフィルが存在しない、あるいは必要ない場合は、この節は完全に除外してください。 10. **関連情報**: 「関連情報」の節は、 MDN （および外部）のチュートリアル、サンプル、ライブラリーなど、この技術について学ぶときに役立つかもしれないさらなるリンクを置くのに良い場所です。私たちは外部ソースへのリンクに対して自由なポリシーを持っていますが、注意してください。 @@ -259,14 +261,12 @@ API ランディングページは、 API の規模によって長さが大き - ブログの記事は特に注意が必要です。古くなりがちだからですです（古い構文、間違った互換性情報）。メンテナンスされた文書にはない明確な付加価値がある場合のみ、リンクを張ってください。 - 「詳しくは ... を参照してください」や「... をクリックしてください」のような動作動詞は使わないでください。読者が見ることができるかどうか、リンクをクリックできるかどうか（紙版のドキュメントのように）分からないからです。 -11. **タグ**: 各リファレンスページに設定すべき標準タグがあります。詳しくは「タグ」の節をご覧ください。 - #### インターフェイスのページの例 インターフェイスページの代表的な例を以下に示します。 -- {{domxref("Request")}} （[Fetch API](/ja/docs/Web/API/Fetch_API)） -- {{domxref("SpeechSynthesis")}} （[Web Speech API](/ja/docs/Web/API/Web_Speech_API)） +- {{domxref("Request")}} （[フェッチ API](/ja/docs/Web/API/Fetch_API)） +- {{domxref("SpeechSynthesis")}} （[ウェブ音声 API](/ja/docs/Web/API/Web_Speech_API)） ### プロパティページの構成 @@ -296,18 +296,17 @@ API ランディングページは、 API の規模によって長さが大き 5. **値**: 値の節では、プロパティの値の説明を行います。これにはプロパティのデータ型と、それが何を表しているかを説明する必要があります。例として、 {{domxref("SpeechRecognition.grammars")}} を参照してください。 -6. **例**: プロパティの典型的な使用方法を示すために、コードのリストを含めてください。その型のオブジェクトがどのように作成され、どのようにプロパティにアクセスするかを示す簡単な例から始める必要があります。より複雑な例は、そのような例の後に追加することができます。すべてのコードを列挙するのではなく、そのうちの興味深い部分のみを並べてください。完全なコードのリストを紹介する場合は。例の全体を含んだ [GitHub](https://github.com/) リポジトリーを参照することができます。また、 [GitHub gh-pages](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site) の機能を使って作成したライブサンプルにリンクすることもできます（もちろん、クライアント側のコードしか使用していなければですが）。サンプルが視覚的であれば、MDN [ライブサンプル](/ja/docs/MDN/Structures/Live_samples) 機能を使ってページ内でライブ実行できるようにすることができます。 +6. **例**: プロパティの典型的な使用方法を示すために、コードのリストを含めてください。その型のオブジェクトがどのように作成され、どのようにプロパティにアクセスするかを示す簡単な例から始める必要があります。より複雑な例は、そのような例の後に追加することができます。すべてのコードを列挙するのではなく、そのうちの興味深い部分のみを並べてください。完全なコードのリストを紹介する場合は。例の全体を含んだ [GitHub](https://github.com/) リポジトリーを参照することができます。また、 [GitHub gh-pages](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site) の機能を使って作成したライブサンプルにリンクすることもできます（もちろん、クライアント側のコードしか使用していなければですが）。サンプルが視覚的であれば、MDN [ライブサンプル](/ja/docs/MDN/Writing_guidelines/Page_structures/Live_samples) 機能を使ってページ内でライブ実行できるようにすることができます。 7. **仕様書一覧表**: ここに、仕様書一覧表を入れる必要があります。詳しくは「仕様書参照表の作成」の節をご覧ください。 -8. **ブラウザーの互換性**: ここで、ブラウザーの互換性一覧表を入れる必要があります。詳しくは、[互換性一覧表](/ja/docs/MDN/Structures/Compatibility_tables)を参照してください。 +8. **ブラウザーの互換性**: ここで、ブラウザーの互換性一覧表を入れる必要があります。詳しくは、[互換性一覧表](/ja/docs/MDN/Writing_guidelines/Page_structures/Compatibility_tables)を参照してください。 9. **関連情報**: 「関連情報」の節は、この技術を使用する際に役立つかもしれないさらなるリンクを置くのに良い場所です。このプロパティの変更によって影響を受けるメソッドやプロパティ、またはそれに関連して発行されるイベントなどです。 MDN （および外部）のチュートリアル、サンプル、ライブラリーなど、この技術について学ぶ際に役立つリンクを追加することができますが、代わりにインターフェイスのリファレンスページに追加することを考慮すると便利かもしれません。 -10. **Tags**: 各プロパティページに設定すべき標準タグがあります。詳しくは「タグ」の節をご覧ください。 #### プロパティページの例 以下に、プロパティページの例を示します。 -- {{domxref("Request.method")}} （[Fetch API](/ja/docs/Web/API/Fetch_API)） -- {{domxref("SpeechSynthesis.speaking")}} （[Web Speech API](/ja/docs/Web/API/Web_Speech_API)） +- {{domxref("Request.method")}} （[フェッチ API](/ja/docs/Web/API/Fetch_API)） +- {{domxref("SpeechSynthesis.speaking")}} （[ウェブ音声 API](/ja/docs/Web/API/Web_Speech_API)） ### メソッドページの構成 @@ -342,9 +341,9 @@ API ランディングページは、 API の規模によって長さが大き - "返値": これはメソッドが持つ返値を示すもので、 double や論理値のような単純な値でも、別なインターフェイスのオブジェクトのような複雑な値でも構いません。この場合、 \\{{domxref}} マクロを使って、そのインターフェースをカバーする MDN API ページに（存在すれば）リンクすることができます。 メソッドは何も返さない場合がありますが、その場合、返値は "\\{{jsxref('undefined')}}" と記述します（レンダリングすると {{jsxref("undefined")}} と表示されます）。 - "例外": これは、そのメソッドを呼び出したときに発生する可能性のあるさまざまな例外と、 その例外を発生させる状況を列挙してください。例外が発生しない場合は、この節は省略してください。 -6. **例**: プロパティの典型的な使用方法を示すために、コードのリストを入れてください。すべてのコードを列挙するのではなく、そのうちの興味深い部分のみを並べてください。完全なコードのリストを紹介する場合は。例の全体を含んだ [GitHub](https://github.com/) リポジトリーを参照することができます。また、 [GitHub gh-pages](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site) の機能を使って作成したライブサンプルにリンクすることもできます（もちろん、クライアント側のコードしか使用していなければですが）。サンプルが視覚的であれば、MDN [ライブサンプル](/ja/docs/MDN/Structures/Live_samples) 機能を使ってページ内でライブ実行できるようにすることができます。 +6. **例**: プロパティの典型的な使用方法を示すために、コードのリストを入れてください。すべてのコードを列挙するのではなく、そのうちの興味深い部分のみを並べてください。完全なコードのリストを紹介する場合は。例の全体を含んだ [GitHub](https://github.com/) リポジトリーを参照することができます。また、 [GitHub gh-pages](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site) の機能を使って作成したライブサンプルにリンクすることもできます（もちろん、クライアント側のコードしか使用していなければですが）。サンプルが視覚的であれば、MDN [ライブサンプル](/ja/docs/MDN/Writing_guidelines/Page_structures/Live_samples) 機能を使ってページ内でライブ実行できるようにすることができます。 7. **仕様書一覧表**: ここに、仕様書一覧表を入れる必要があります。詳しくは「仕様書参照表の作成」の節をご覧ください。 -8. **ブラウザーの互換性**: ここで、ブラウザーの互換性一覧表を入れる必要があります。詳しくは、[互換性一覧表](/ja/docs/MDN/Structures/Compatibility_tables)を参照してください。 +8. **ブラウザーの互換性**: ここで、ブラウザーの互換性一覧表を入れる必要があります。詳しくは、[互換性一覧表](/ja/docs/MDN/Writing_guidelines/Page_structures/Compatibility_tables)を参照してください。 #### メソッドページの例 @@ -353,39 +352,6 @@ API ランディングページは、 API の規模によって長さが大き - {{domxref("Document.getAnimations")}} （[ウェブアニメーション API](/ja/docs/Web/API/Web_Animations_API)） - {{domxref("fetch()")}} （[フェッチ API](/ja/docs/Web/API/Fetch_API)） -## タグ付け - -API リファレンスページには、すべてのページに設定すべきタグがあります。 - -- "API" -- "Reference" -- API の名前 (例: "Web Audio API") -- 関連するキーワード (例: "audio") - -インターフェイスページには、次のものを追加してください。 - -- "Interface" -- インターフェイスの名前。例: "AudioContext" - -メソッドページには、次のものを追加してください。 - -- "Method" -- そのメソッドが関連するインターフェイスの名前。例: "AudioContext" -- メソッドの名前。例: "createBuffer" - -プロパティページには、次のものを追加してください。 - -- "Property" -- そのプロパティが関連するインターフェイスの名前。例: "AudioContext" -- そのプロパティの名前。例: "currentTime" - -いずれの場合も、標準化の状況を示すキーワードも追加してください。 - -- Deprecated -- Non-standard - -これらのタグは、アイコン付きの正しいクイックリンクを生成するために使用されます。タグ付けに関する追加情報、およびその他の有用なタグについては、[適切にタグづけするには](/ja/docs/MDN/Contribute/Howto/Tag)を参照してください。 - ## サイドバー API リファレンスページを作成したら、ページを関連付けるために適切なサイドバーを挿入したくなるでしょう。 [API リファレンスサイドバー](/ja/docs/MDN/Writing_guidelines/Howto/Write_an_API_reference/Sidebars)のガイドで、その方法を説明します。 diff --git a/files/ja/mozilla/firefox/releases/117/index.md b/files/ja/mozilla/firefox/releases/117/index.md index 0e33f0f1b9dd47..943e6eaea2165b 100644 --- a/files/ja/mozilla/firefox/releases/117/index.md +++ b/files/ja/mozilla/firefox/releases/117/index.md @@ -2,7 +2,7 @@ title: Firefox 117 for developers slug: Mozilla/Firefox/Releases/117 l10n: - sourceCommit: 7c26f7e821b1793de804fb9a7744ebf3fafe0dc3 + sourceCommit: 062f3961a28054b72c7d406b46867c87208a68b0 --- {{FirefoxSidebar}} @@ -21,8 +21,8 @@ l10n: - [`math-style`](/ja/docs/Web/CSS/math-style) および [`math-depth`](/ja/docs/Web/CSS/math-depth) プロパティをサポートしました。また、[`font-size`](/ja/docs/Web/CSS/font-size#values) プロパティの値 `math` もサポートしました ([Firefox bug 1845516](https://bugzil.la/1845516))。 -- [`contain-intrinsic-size: auto none;`](/ja/docs/Web/CSS/contain-intrinsic-size) の構文をサポートしました。これは、可能であれば最後に記憶した要素のサイズを使用しますが、それ以外の場合は `contain-intrinsic-size: none` にフォールバックすることができます。 - これはグリッドや段組みなど、可変サイズを使用するレイアウトで有益です ([Firefox bug 1835813](https://bugzil.la/1835813))。 +- [`contain-intrinsic-size: auto none`](/ja/docs/Web/CSS/contain-intrinsic-size) の構文をサポートしました。これは、可能であれば最後に記憶した要素のサイズを使用しますが、それ以外の場合は `contain-intrinsic-size: none` にフォールバックすることができます。 + これはグリッドや段組みのレイアウトで、要素を高さ 0px の代わりに、内容物がないかのようにレイアウトすることに役立ちます ([Firefox bug 1835813](https://bugzil.la/1835813))。 ### JavaScript diff --git a/files/ja/mozilla/firefox/releases/118/index.md b/files/ja/mozilla/firefox/releases/118/index.md new file mode 100644 index 00000000000000..eaadf22e1f07e0 --- /dev/null +++ b/files/ja/mozilla/firefox/releases/118/index.md @@ -0,0 +1,79 @@ +--- +title: Firefox 118 for developers +slug: Mozilla/Firefox/Releases/118 +l10n: + sourceCommit: be0e7680f74b65e4374fc2835b341745c1619308 +--- + +{{FirefoxSidebar}} + +このページでは、開発者に影響する Firefox 118 の変更点をまとめています。Firefox 118 は、米国時間 2023 年 9 月 26 日にリリースされました。 + +## ウェブ開発者向けの変更点一覧 + +### HTML + +- {{HTMLElement('search')}} 要素をサポートしました。`<search>` 要素は、検索やフィルタリング操作に使用するすべての要素を包含する役割を持つグループ要素です ([Firefox bug 1824121](https://bugzil.la/1824121))。 + +### CSS + +- {{cssxref("font-synthesis-position")}} プロパティと、{{cssxref("font-synthesis")}} ショートハンドプロパティの値 `position` をサポートしました。これらは {{cssxref("font-variant-position")}} を使用しているときに、上付き文字や下付き文字のグリフを持たないフォントでそれらを無効にすることができます ([Firefox bug 1849010](https://bugzil.la/1849010))。 +- 以下の CSS [数学関数](/ja/docs/Web/CSS/CSS_Functions#math_functions) をサポートしました: [`abs()`](/ja/docs/Web/CSS/abs)、[`sign()`](/ja/docs/Web/CSS/sign)、[`round()`](/ja/docs/Web/CSS/round)、[`mod()`](/ja/docs/Web/CSS/mod)、[`rem()`](/ja/docs/Web/CSS/rem)、[`pow()`](/ja/docs/Web/CSS/pow)、[`sqrt()`](/ja/docs/Web/CSS/sqrt)、[`hypot()`](/ja/docs/Web/CSS/hypot)、[`log()`](/ja/docs/Web/CSS/log)、[`exp()`](/ja/docs/Web/CSS/exp) (Firefox bug [1814589](https://bugzil.la/1814589))。 +- CSS [`font-size-adjust`](/ja/docs/Web/CSS/font-size-adjust) プロパティで、最初に使用可能なフォントから望まれた `<font-metric>` を取得できるキーワード `from-font` をサポートしました (Firefox bug [1708240](https://bugzil.la/1708240))。 + +### JavaScript + +変更なし。 + +### HTTP + +- HTTP [`Permissions-Policy`](/ja/docs/Web/HTTP/Headers/Permissions-Policy) ヘッダーの [`publickey-credentials-get`](/ja/docs/Web/HTTP/Headers/Permissions-Policy/publickey-credentials-get) ディレクティブをサポートしました。これはクロスオリジンのインラインフレームで、公開鍵証明書を取得するために [Web Authentication API](/ja/docs/Web/API/Web_Authentication_API) インターフェイスを使用可能にします ([Firefox bug 1460986](https://bugzil.la/1460986))。 + +### MathML + +- [`<semantics>`](/ja/docs/Web/MathML/Element/semantics) および [`<maction>`](/ja/docs/Web/MathML/Element/maction) 要素が、デフォルトで最初の子要素のみ表示するようになりました。設定項目 `mathml.legacy_maction_and_semantics_implementations.disabled` を削除しました (Firefox bug [1788223](https://bugzil.la/1788223))。 +- [`mathvariant`](/ja/docs/Web/MathML/Element/mi#mathvariant) で、`normal` を除くすべての値が非推奨になりました。また、この属性を使う要素が `<mi>` に限定されました (Firefox bug [1845461](https://bugzil.la/1845461))。 + +### SVG + +変更なし。 + +### セキュリティ + +変更なし。 + +### API + +- Windows の <kbd>⊞ Windows ロゴ</kbd> キーおよび macOS の <kbd>Command</kbd> キーについて、[`KeyboardEvent.key`](/ja/docs/Web/API/KeyboardEvent/key) が値 `"OS"` ではなく `"Meta"` を、[`KeyboardEvent.code`](/ja/docs/Web/API/KeyboardEvent/code) が値 `OSLeft`/`OSRight` ではなく `MetaLeft`/`MetaRight` を返すようになりました (Firefox bug [1232918](https://bugzil.la/1232918))。 +- {{domxref("RTCRtpTransceiver.currentDirection")}} および {{domxref("RTCRtpTransceiver.direction")}} プロパティで、トランシーバーが停止したかを示す値 `"stopped"` をサポートしました。これは、非推奨の {{domxref("RTCRtpTransceiver.stopped")}} プロパティに代わって使用するべきです ([Firefox bug 1568296](https://bugzil.la/1568296))。 +- {{domxref("RTCPeerConnection.getTransceivers()")}} が返す配列で、停止したトランシーバーを除外するようになりました。同様に {{domxref("RTCPeerConnection.getReceivers()")}} および {{domxref("RTCPeerConnection.getSenders()")}} が、停止したトランシーバーに関連づけられたレシーバーおよびセンダーを除外します ([Firefox bug 1568296](https://bugzil.la/1568296))。 +- [`TextMetrics.emHeightDescent`](/ja/docs/Web/API/TextMetrics/emHeightDescent) および [`TextMetrics.emHeightAscent`](/ja/docs/Web/API/TextMetrics/emHeightAscent) プロパティをサポートしました (Firefox bug [1841692](https://bugzil.la/1841692))。 +- [`CSSStyleRule`](/ja/docs/Web/API/CSSStyleRule) が、[`CSSRule`](/ja/docs/Web/API/CSSRule) から直接継承するのではなく [`CSSGroupingRule`](/ja/docs/Web/API/CSSGroupingRule) から継承するようになりました。その結果 [`cssRules`](/ja/docs/Web/API/CSSGroupingRule/cssRules) プロパティと、[`deleteRule()`](/ja/docs/Web/API/CSSGroupingRule/cssRules) および [`insertRule()`](/ja/docs/Web/API/CSSGroupingRule/insertRule) メソッドを追加実装します (Firefox bug [1846251](https://bugzil.la/1846251))。 + +### WebDriver conformance (WebDriver BiDi, Marionette) + +#### 一般 + +- WebDriver BiDi および Marionette で、返されたユーザープロンプトの文字列が空になる現象を引き起こす Android の内部競合を修正しました ([Firefox bug 1848167](https://bugzil.la/1848167))。 +- Marionette の `WebDriver:PerformActions` コマンドおよび WebDriver BiDi の `browsingContext.performActions` コマンドで、高解像度ディスプレイが接続された環境で `wheel` 入力ソースによるスクロールが失敗する問題を修正しました ([Firefox bug 1849229](https://bugzil.la/1849229))。 + +#### WebDriver BiDi + +- ユーザーが指定したバックグラウンドのタブをフォアグラウンドに移動できるコマンド [`browsingContext.activate`](https://w3c.github.io/webdriver-bidi/#command-browsingContext-activate) を追加しました ([Firefox bug 1841004](https://bugzil.la/1841004))。 +- 表示された `alert`、`confirm` または `prompt` 型のユーザープロンプトを受け入れるか拒否できるコマンド [`browsingContext.handleUserPrompt`](https://w3c.github.io/webdriver-bidi/#command-browsingContext-handleUserPrompt) を追加しました ([Firefox bug 1824197](https://bugzil.la/1824197))。 +- `alert`、`confirm` または `prompt` 型のユーザープロンプトが開いたときに発生するイベント [`browsingContext.userPromptOpened`](https://w3c.github.io/webdriver-bidi/#event-browsingContext-userPromptOpened) を追加しました ([Firefox bug 1824224](https://bugzil.la/1824224))。 +- `event` メッセージまたはコマンドの成功状態を識別するためにクライアントへ返される JSON ペイロードに、`type` フィールドを追加しました。これは `success` または `error` のいずれかになります ([Firefox bug 1844009](https://bugzil.la/1844009))。 + +#### Marionette + +- すべての [Web Authentication 拡張機能コマンド](https://www.w3.org/TR/webauthn-2/#sctn-automation) をサポートしました。これは、ユーザーが公開鍵暗号の資格情報で自身を認証できるようにします ([Firefox bug 1846574](https://bugzil.la/1846574))。 + +## アドオン開発者向けの変更点一覧 + +### 廃止 + +- Manifest V3 拡張機能向けの、[`action`](/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/action)、[`options_ui`](/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui)、[`page_action`](/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action)、[`sidebar_action`](/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action) マニフェストキーにおける [`browser_style`](/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles) のサポートを廃止しました ([Firefox bug 1830711](https://bugzil.la/1830711))。Manifest V3 拡張機能で `browser_style` から移行するための情報について、詳しくは [Browser Styles' Manifest v3 migration](/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles#manifest_v3_migration) をご覧ください。 + +## 過去のバージョン + +{{Firefox_for_developers(117)}} diff --git a/files/ja/web/api/analysernode/analysernode/index.md b/files/ja/web/api/analysernode/analysernode/index.md new file mode 100644 index 00000000000000..fbe3a88a7ceaf1 --- /dev/null +++ b/files/ja/web/api/analysernode/analysernode/index.md @@ -0,0 +1,58 @@ +--- +title: "AnalyserNode: AnalyserNode() コンストラクター" +short-title: AnalyserNode() +slug: Web/API/AnalyserNode/AnalyserNode +l10n: + sourceCommit: 2c9f6f0688db9b4437f998321044fdd22afed546 +--- + +{{APIRef("'Web Audio API'")}} + +**`AnalyserNode()`** は[ウェブオーディオ API](/ja/docs/Web/API/Web_Audio_API) のコンストラクターで、新しい {{domxref("AnalyserNode")}} オブジェクトインスタンスを生成します。 + +## 構文 + +```js-nolint +new AnalyserNode(context) +new AnalyserNode(context, options) +``` + +### 引数 + +- `context` + - : {{domxref("AudioContext")}} または {{domxref("OfflineAudioContext")}} への参照です。 +- `options` {{optional_inline}} + + - : 以下のプロパティを持つオブジェクトです。すべて省略可能です。 + + - `fftSize` + - : [周波数領域](https://ja.wikipedia.org/wiki/周波数領域)を解析するための [FFT](https://ja.wikipedia.org/wiki/高速フーリエ変換) の望ましい初期サイズです。 + 既定値は `2048` です。 + - `maxDecibels` + - : FFT 解析のための [dB](https://ja.wikipedia.org/wiki/デシベル) 単位の望ましい初期最大出力です。 + 既定値は `-30` です。 + - `minDecibels` + - : FFT 解析のための dB 単位の望ましい初期最小出力です。 + 既定値は `-100` です。 + - `smoothingTimeConstant` + - : FFT 解析のための望ましい初期スムーズ化定数です。既定値は `0.8` です。 + - `channelCount` + - : ノードへの任意の入力への[アップミキシングとダウンミキシング](/ja/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#up-mixing_and_down-mixing)接続時に使用するチャンネル数を決定するための整数を表します。（詳しくは {{domxref("AudioNode.channelCount")}} を参照してください。）Its usage and precise definition depend on the value of `channelCountMode`. + 使い方や正確な定義は `channelCountMode` の値に依存します。 + - `channelCountMode` + - : ノードの入出力間でチャンネルを一致させる方法を記述する[列挙](/ja/docs/Glossary/Enumerated)値を表します。（既定など、詳細は{{domxref("AudioNode.channelCountMode")}}を参照してください。） + - `channelInterpretation` + - : チャンネルの意味を記述する列挙値を表します。この解釈は音声の[アップミキシングとダウンミキシング](/ja/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#up-mixing_and_down-mixing)がどのように行われるかを定義します。 + 使用可能な値は `"speakers"` または `"discrete"` です。（既定値など、詳しくは {{domxref("AudioNode.channelCountMode")}} を参照してください。） + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("BaseAudioContext.createAnalyser()")}}、同様のファクトリーメソッド diff --git a/files/ja/web/api/analysernode/fftsize/index.md b/files/ja/web/api/analysernode/fftsize/index.md new file mode 100644 index 00000000000000..bfce2bc2a8349d --- /dev/null +++ b/files/ja/web/api/analysernode/fftsize/index.md @@ -0,0 +1,88 @@ +--- +title: "AnalyserNode: fftSize プロパティ" +short-title: fftSize +slug: Web/API/AnalyserNode/fftSize +l10n: + sourceCommit: 1c2fd1d981acb52836d3701f52ac46238972b83b +--- + +{{APIRef("Web Audio API")}} + +**`fftSize`** は {{domxref("AnalyserNode")}} インターフェイスのプロパティで、このプロパティは符号なし long 値で、周波数領域データを取得するために[高速フーリエ変換](https://ja.wikipedia.org/wiki/高速フーリエ変換) (FFT) を行う際に使用するウィンドウサイズをサンプル数で表します。 + +## 値 + +符号なし整数で、FFT のウィンドウサイズをサンプル数で表します。値を大きくすると、周波数領域での精度は高くなりますが、振幅領域での精度は低くなります。 + +2 のべき乗で、 2^5 と 2^15 の間でなければなりません。すなわち `32`, `64`, `128`, `256`, `512`, `1024`, `2048`, `4096`, `8192`, `16384`, `32768` のいずれかです。既定値は `2048` です。 + +### 例外 + +- `IndexSizeError` {{domxref("DOMException")}} + - : 設定した値が 2 のべき乗でないか、許容範囲外である場合に発生します。 + +## 例 + +次の例では、 {{domxref("AudioContext")}} で `AnalyserNode` を作成し、 {{domxref("window.requestAnimationFrame()", "requestAnimationFrame")}} と {{htmlelement("canvas")}} で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。 +より完全な応用例/情報については、 [Voice-change-O-matic](https://github.com/mdn/webaudio-examples/tree/main/voice-change-o-matic) のデモを調べてください（関連するコードは [app.js の 108 ～ 193 行目](https://github.com/mdn/webaudio-examples/blob/main/voice-change-o-matic/scripts/app.js#L108-L193)を参照）。 + +```js +const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +const analyser = audioCtx.createAnalyser(); + +// … + +analyser.fftSize = 2048; +const bufferLength = analyser.frequencyBinCount; +const dataArray = new Uint8Array(bufferLength); +analyser.getByteTimeDomainData(dataArray); + +// draw an oscilloscope of the current audio source + +function draw() { + drawVisual = requestAnimationFrame(draw); + + analyser.getByteTimeDomainData(dataArray); + + canvasCtx.fillStyle = "rgb(200, 200, 200)"; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + canvasCtx.lineWidth = 2; + canvasCtx.strokeStyle = "rgb(0, 0, 0)"; + + canvasCtx.beginPath(); + + const sliceWidth = (WIDTH * 1.0) / bufferLength; + let x = 0; + + for (let i = 0; i < bufferLength; i++) { + const v = dataArray[i] / 128.0; + const y = (v * HEIGHT) / 2; + + if (i === 0) { + canvasCtx.moveTo(x, y); + } else { + canvasCtx.lineTo(x, y); + } + + x += sliceWidth; + } + + canvasCtx.lineTo(canvas.width, canvas.height / 2); + canvasCtx.stroke(); +} + +draw(); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ウェブオーディオ API の使用](/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/ja/web/api/analysernode/frequencybincount/index.md b/files/ja/web/api/analysernode/frequencybincount/index.md new file mode 100644 index 00000000000000..d25e76e84ee374 --- /dev/null +++ b/files/ja/web/api/analysernode/frequencybincount/index.md @@ -0,0 +1,74 @@ +--- +title: "AnalyserNode: frequencyBinCount プロパティ" +short-title: frequencyBinCount +slug: Web/API/AnalyserNode/frequencyBinCount +l10n: + sourceCommit: 135b8311a5e3d12789e8421845be3ce026ef72b8 +--- + +{{APIRef("Web Audio API")}} + +**`frequencyBinCount`** は {{domxref("AnalyserNode")}} インターフェイスの読み取り専用プロパティで、 {{domxref("AudioContext")}} の {{domxref("BaseAudioContext.sampleRate", "sampleRate")}} で利用可能なデータポイントの総数が格納されます。これは {{domxref("AnalyserNode.fftSize")}} の `value` の半分です。 2 つのメソッドのインデックスは、0 から[ナイキスト周波数](https://ja.wikipedia.org/wiki/ナイキスト周波数)の間で、それらが表す周波数と線形関係にあります。 + +## 値 + +符号なし整数で、指定された `TypedArray` にコピーされる {{domxref("AnalyserNode.getByteFrequencyData()")}} と {{domxref("AnalyserNode.getFloatFrequencyData()")}} が値の数に等しいものです。 + +[高速フーリエ変換](https://ja.wikipedia.org/wiki/高速フーリエ変換)を定義する方法に関する技術的な理由から，常に {{domxref("AnalyserNode.fftSize")}} の半分の値になります．したがって、 `16`, `32`, `64`, `128`, `256`, `512`, `1024`, `2048`, `4096`, `8192`, `16384` のうちのいずれかになります。 + +## 例 + +次の例では、 {{domxref("AudioContext")}} で `AnalyserNode` を作成し、 {{domxref("window.requestAnimationFrame()", "requestAnimationFrame")}} と {{htmlelement("canvas")}} で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。 +より完全な応用例/情報については、 [Voice-change-O-matic](https://github.com/mdn/webaudio-examples/tree/main/voice-change-o-matic) のデモを調べてください（関連するコードは [app.js の 108 ～ 193 行目](https://github.com/mdn/webaudio-examples/blob/main/voice-change-o-matic/scripts/app.js#L108-L193)を参照）。 + +```js +const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +const analyser = audioCtx.createAnalyser(); +analyser.minDecibels = -90; +analyser.maxDecibels = -10; + +// … + +analyser.fftSize = 256; +const bufferLength = analyser.frequencyBinCount; +console.log(bufferLength); +const dataArray = new Uint8Array(bufferLength); + +canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + +function draw() { + drawVisual = requestAnimationFrame(draw); + + analyser.getByteFrequencyData(dataArray); + + canvasCtx.fillStyle = "rgb(0, 0, 0)"; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + const barWidth = (WIDTH / bufferLength) * 2.5 - 1; + let barHeight; + let x = 0; + + for (let i = 0; i < bufferLength; i++) { + barHeight = dataArray[i]; + + canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`; + canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2); + + x += barWidth; + } +} + +draw(); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ウェブオーディオ API の使用](/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/ja/web/api/analysernode/fttaudiodata_en.svg b/files/ja/web/api/analysernode/fttaudiodata_en.svg new file mode 100644 index 00000000000000..ca6bc7304ff1cf --- /dev/null +++ b/files/ja/web/api/analysernode/fttaudiodata_en.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="692.929" height="206.323"><path fill="none" stroke="#010101" d="M25.556 31.667v59.458"/><path fill="#010101" d="M19.722 32.667l5.834-16.839 5.5 16.839zm210.915 51.914l16.839 5.834-16.839 5.5z"/><path fill="none" stroke="#010101" stroke-miterlimit="10" d="M25.722 53.167h36.667s4.167-14.333 9-11c0 0 2.333.417 7.333 14 0 0 2.917 10.583 8 8.167 0 0 3.333-.417 6.667-14.167 0 0 3.333-11.917 8.5-7.333 0 0 2.667 1.833 6.5 13.333 0 0 4 12 8.5 7.5 0 0 3.333-2.666 6.167-13.5 0 0 3.167-12.667 9-7.667 0 0 2.292.562 5.667 13.5 0 0 4.167 13.083 9.5 7.667 0 0 2.188-1.729 5-13.5 0 0 3.25-12.667 8.5-7.667 0 0 2.938 3.25 6.667 13.667 0 0 5.021 12.333 8.833 7.667 0 0 3.812-4.646 4.667-10.561h30"/><text transform="translate(252.055 94.834)" font-family="'ArialMT'" font-size="14">t</text><text transform="translate(23.222 106.333)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="14">0</tspan><tspan x="7.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="36" y="0" font-family="'ArialMT'" font-size="14">1</tspan><tspan x="43.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="72" y="0" font-family="'ArialMT'" font-size="14">2</tspan><tspan x="79.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="108" y="0" font-family="'ArialMT'" font-size="14">3</tspan><tspan x="115.787" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="144" y="0" font-family="'ArialMT'" font-size="14">4</tspan></text><path fill="none" stroke="#010101" stroke-miterlimit="10" d="M25.556 90.667h205.081"/><path fill="none" stroke="#010101" d="M431.556 31.667v59.458"/><path fill="#010101" d="M425.722 32.667l5.834-16.839 5.5 16.839zm210.914 51.914l16.84 5.834-16.84 5.5z"/><path fill="none" stroke="#010101" stroke-miterlimit="10" d="M431.722 53.167h36.666s4.167-14.333 9-11c0 0 2.334.417 7.334 14 0 0 2.916 10.583 8 8.167 0 0 3.334-.417 6.666-14.167 0 0 3.334-11.917 8.5-7.333 0 0 2.667 1.833 6.5 13.333 0 0 4 12 8.5 7.5 0 0 3.334-2.666 6.168-13.5 0 0 3.166-12.667 9-7.667 0 0 2.291.562 5.666 13.5 0 0 4.167 13.083 9.5 7.667 0 0 2.188-1.729 5-13.5 0 0 3.25-12.667 8.5-7.667 0 0 2.938 3.25 6.667 13.667 0 0 5.021 12.333 8.833 7.667 0 0 3.812-4.646 4.667-10.561h30"/><text transform="translate(658.055 94.834)" font-family="'ArialMT'" font-size="14">t</text><text transform="translate(429.222 106.333)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="14">0</tspan><tspan x="7.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="36" y="0" font-family="'ArialMT'" font-size="14">1</tspan><tspan x="43.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="72" y="0" font-family="'ArialMT'" font-size="14">2</tspan><tspan x="79.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="108" y="0" font-family="'ArialMT'" font-size="14">3</tspan><tspan x="115.787" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="144" y="0" font-family="'ArialMT'" font-size="14">4</tspan></text><path fill="none" stroke="#010101" stroke-miterlimit="10" d="M431.556 90.667h205.08"/><path fill="#010101" d="M401.636 47.489l16.84 5.834-16.84 5.5z"/><path fill="none" stroke="#010101" stroke-miterlimit="10" d="M273.555 53.576h128.081"/><path fill="#010101" d="M347.889 148.454l-5.834 16.84-5.5-16.84z"/><path fill="#719FD0" stroke="#010101" d="M299.222 35h86v96.5h-86z"/><text transform="translate(304.223 56.823)" font-family="'ArialMT'" font-size="11">AnalyserNode</text><path fill="none" stroke="#010101" stroke-miterlimit="10" d="M341.803 118v30.454"/><text transform="translate(331.889 106.333)" font-family="'Arial-BoldMT'" font-size="11">FFT</text><path fill="none" stroke="#2C2C76" stroke-miterlimit="10" d="M321.889 86.667h41l-8 29.333h-25.333z"/><g font-family="'ArialMT'" font-size="11"><text transform="translate(484.89 131.5)">変更なしの出力</text><text transform="translate(302.223 176.167)">周波数データ</text></g></svg> \ No newline at end of file diff --git a/files/ja/web/api/analysernode/getbytefrequencydata/index.md b/files/ja/web/api/analysernode/getbytefrequencydata/index.md new file mode 100644 index 00000000000000..39179fd7aadd46 --- /dev/null +++ b/files/ja/web/api/analysernode/getbytefrequencydata/index.md @@ -0,0 +1,88 @@ +--- +title: "AnalyserNode: getByteFrequencyData() メソッド" +short-title: getByteFrequencyData() +slug: Web/API/AnalyserNode/getByteFrequencyData +l10n: + sourceCommit: 135b8311a5e3d12789e8421845be3ce026ef72b8 +--- + +{{ APIRef("Web Audio API") }} + +**`getByteFrequencyData()`** は {{domxref("AnalyserNode")}} インターフェースのメソッドで、渡された {{jsxref("Uint8Array")}} （符号なしバイト配列）に現在の周波数データをコピーします． + +周波数データは、 0 から 255 まで の範囲の整数で構成されます。 + +配列の各項目は、固有の周波数のデシベル値を表します。周波数はサンプルレートの 0 から 1/2 まで直線的に広がります。例えば、サンプルレートが `48000` の場合、配列の最後の項目は `24000` Hz のデシベル値を表します。 + +配列の持つ要素が {{domxref("AnalyserNode.fftSize")}} より少なかった場合、余分な要素は削除されます。必要以上の要素があった場合、余分な要素は無視されます。 + +## 構文 + +```js-nolint +getByteFrequencyData(array) +``` + +### 引数 + +- `array` + - : 周波数領域データがコピーされる {{jsxref("Uint8Array")}}。無音のサンプルの場合、値は `-Infinity` です。 + 配列の持つ要素が {{domxref("AnalyserNode.fftSize")}} より少なかった場合、余分な要素は削除されます。必要以上の要素があった場合、余分な要素は無視されます。 + +### 返値 + +なし ({{jsxref("undefined")}})。 + +## 例 + +次の例では、 {{domxref("AudioContext")}} で `AnalyserNode` を作成し、 {{domxref("window.requestAnimationFrame()", "requestAnimationFrame")}} と {{htmlelement("canvas")}} で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。 +より完全な応用例/情報については、 [Voice-change-O-matic](https://github.com/mdn/webaudio-examples/tree/main/voice-change-o-matic) のデモを調べてください（関連するコードは [app.js の 108 ～ 193 行目](https://github.com/mdn/webaudio-examples/blob/main/voice-change-o-matic/scripts/app.js#L108-L193)を参照）。 + +```js +const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +const analyser = audioCtx.createAnalyser(); + +// … + +analyser.fftSize = 256; +const bufferLength = analyser.frequencyBinCount; +console.log(bufferLength); +const dataArray = new Uint8Array(bufferLength); + +canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + +function draw() { + drawVisual = requestAnimationFrame(draw); + + analyser.getByteFrequencyData(dataArray); + + canvasCtx.fillStyle = "rgb(0, 0, 0)"; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + const barWidth = (WIDTH / bufferLength) * 2.5; + let barHeight; + let x = 0; + + for (let i = 0; i < bufferLength; i++) { + barHeight = dataArray[i]; + + canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`; + canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2); + + x += barWidth + 1; + } +} + +draw(); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ウェブオーディオ API の使用](/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/ja/web/api/analysernode/getbytetimedomaindata/index.md b/files/ja/web/api/analysernode/getbytetimedomaindata/index.md new file mode 100644 index 00000000000000..3c47397d68375e --- /dev/null +++ b/files/ja/web/api/analysernode/getbytetimedomaindata/index.md @@ -0,0 +1,92 @@ +--- +title: "AnalyserNode: getByteTimeDomainData() メソッド" +short-title: getByteTimeDomainData() +slug: Web/API/AnalyserNode/getByteTimeDomainData +l10n: + sourceCommit: 7cf0e50d0acfaeba8fd2fa243f9d5612b61d408c +--- + +{{ APIRef("Web Audio API") }} + +**`getByteTimeDomainData()`** は {{ domxref("AnalyserNode") }} インターフェイスのメソッドで、渡される {{jsxref("Uint8Array")}} （符号なしバイト配列）に、現在の波形または時間領域のデータをコピーします。 + +配列の持つ要素が {{domxref("AnalyserNode.fftSize")}} より少なかった場合、余分な要素は削除されます。必要以上の要素があった場合、余分な要素は無視されます。 + +## 構文 + +```js-nolint +getByteTimeDomainData(array) +``` + +### 引数 + +- `array` + - : 時間領域データのコピー先の {{jsxref("Uint8Array")}} です。 + 配列の持つ要素が {{domxref("AnalyserNode.fftSize")}} より少なかった場合、余分な要素は削除されます。必要以上の要素があった場合、余分な要素は無視されます。 + +### 返値 + +なし ({{jsxref("undefined")}})。 + +## 例 + +次の例では、 {{domxref("AudioContext")}} で `AnalyserNode` を作成し、 {{domxref("window.requestAnimationFrame()", "requestAnimationFrame")}} と {{htmlelement("canvas")}} で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。 +より完全な応用例/情報については、 [Voice-change-O-matic](https://github.com/mdn/webaudio-examples/tree/main/voice-change-o-matic) のデモを調べてください（関連するコードは [app.js の 108 ～ 193 行目](https://github.com/mdn/webaudio-examples/blob/main/voice-change-o-matic/scripts/app.js#L108-L193)を参照）。 + +```js +const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +const analyser = audioCtx.createAnalyser(); + +// … + +analyser.fftSize = 2048; +const bufferLength = analyser.fftSize; +const dataArray = new Uint8Array(bufferLength); +analyser.getByteTimeDomainData(dataArray); + +// draw an oscilloscope of the current audio source +function draw() { + drawVisual = requestAnimationFrame(draw); + analyser.getByteTimeDomainData(dataArray); + + canvasCtx.fillStyle = "rgb(200, 200, 200)"; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + canvasCtx.lineWidth = 2; + canvasCtx.strokeStyle = "rgb(0, 0, 0)"; + + const sliceWidth = (WIDTH * 1.0) / bufferLength; + let x = 0; + + canvasCtx.beginPath(); + for (let i = 0; i < bufferLength; i++) { + const v = dataArray[i] / 128.0; + const y = (v * HEIGHT) / 2; + + if (i === 0) { + canvasCtx.moveTo(x, y); + } else { + canvasCtx.lineTo(x, y); + } + + x += sliceWidth; + } + + canvasCtx.lineTo(WIDTH, HEIGHT / 2); + canvasCtx.stroke(); +} + +draw(); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ウェブオーディオ API の使用](/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/ja/web/api/analysernode/getfloatfrequencydata/index.md b/files/ja/web/api/analysernode/getfloatfrequencydata/index.md new file mode 100644 index 00000000000000..820f6ca41bdb36 --- /dev/null +++ b/files/ja/web/api/analysernode/getfloatfrequencydata/index.md @@ -0,0 +1,128 @@ +--- +title: "AnalyserNode: getFloatFrequencyData() メソッド" +short-title: getFloatFrequencyData() +slug: Web/API/AnalyserNode/getFloatFrequencyData +l10n: + sourceCommit: 135b8311a5e3d12789e8421845be3ce026ef72b8 +--- + +{{ APIRef("Web Audio API") }} + +**`getFloatFrequencyData()`** は {{domxref("AnalyserNode")}} インターフェイスのメソッドで、渡された {{jsxref("Float32Array")}} 配列に現在の周波数データをコピーします。配列の各値はサンプルで、それぞれの時点における信号の大きさです。 + +配列の各項目は、固有の周波数のデシベル値を表します。周波数はサンプルレートの 0 から 1/2 まで直線的に広がります。例えば、サンプルレートが `48000` Hz の場合、配列の最後の項目は `24000` Hz のデシベル値を表します。 + +より高いパフォーマンスが必要で、精度を気にしない場合は、代わりに {{jsxref("Uint8Array")}} で動作する {{domxref("AnalyserNode.getByteFrequencyData()")}} を使用することができます。 + +## 構文 + +```js-nolint +getFloatFrequencyData(array) +``` + +### 引数 + +- `array` + - : 周波数領域データのコピー先となる {{jsxref("Float32Array")}} です。無音のサンプルの場合、値は `-Infinity` です。 + 配列の持つ要素が {{domxref("AnalyserNode.frequencyBinCount")}} より少なかった場合、余分な要素は削除されます。必要以上の要素があった場合は、余分な要素は無視されます。 + +### 返値 + +なし ({{jsxref("undefined")}})。 + +## 例 + +```js +const audioCtx = new AudioContext(); +const analyser = audioCtx.createAnalyser(); +// Float32Array should be the same length as the frequencyBinCount +const myDataArray = new Float32Array(analyser.frequencyBinCount); +// fill the Float32Array with data returned from getFloatFrequencyData() +analyser.getFloatFrequencyData(myDataArray); +``` + +### スペクトルの描画 + +次の例では、 {{domxref("AudioContext")}} で {{domxref("MediaElementAudioSourceNode")}} を作成し、 {{domxref("window.requestAnimationFrame()","requestAnimationFrame()")}} と {{htmlelement("canvas")}} で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。 + +より完全な応用例/情報については、 [Voice-change-O-matic](https://github.com/mdn/webaudio-examples/tree/main/voice-change-o-matic) のデモを調べてください（関連するコードは [app.js の 108 ～ 193 行目](https://github.com/mdn/webaudio-examples/blob/main/voice-change-o-matic/scripts/app.js#L108-L193)を参照）。 + +```html +<!doctype html> +<body> + <script> + const audioCtx = new AudioContext(); + + //Create audio source + //Here, we use an audio file, but this could also be e.g. microphone input + const audioEle = new Audio(); + audioEle.src = "my-audio.mp3"; //insert file name here + audioEle.autoplay = true; + audioEle.preload = "auto"; + const audioSourceNode = audioCtx.createMediaElementSource(audioEle); + + //Create analyser node + const analyserNode = audioCtx.createAnalyser(); + analyserNode.fftSize = 256; + const bufferLength = analyserNode.frequencyBinCount; + const dataArray = new Float32Array(bufferLength); + + //Set up audio node network + audioSourceNode.connect(analyserNode); + analyserNode.connect(audioCtx.destination); + + //Create 2D canvas + const canvas = document.createElement("canvas"); + canvas.style.position = "absolute"; + canvas.style.top = "0"; + canvas.style.left = "0"; + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + document.body.appendChild(canvas); + const canvasCtx = canvas.getContext("2d"); + canvasCtx.clearRect(0, 0, canvas.width, canvas.height); + + function draw() { + //Schedule next redraw + requestAnimationFrame(draw); + + //Get spectrum data + analyserNode.getFloatFrequencyData(dataArray); + + //Draw black background + canvasCtx.fillStyle = "rgb(0, 0, 0)"; + canvasCtx.fillRect(0, 0, canvas.width, canvas.height); + + //Draw spectrum + const barWidth = (canvas.width / bufferLength) * 2.5; + let posX = 0; + for (let i = 0; i < bufferLength; i++) { + const barHeight = (dataArray[i] + 140) * 2; + canvasCtx.fillStyle = + "rgb(" + Math.floor(barHeight + 100) + ", 50, 50)"; + canvasCtx.fillRect( + posX, + canvas.height - barHeight / 2, + barWidth, + barHeight / 2, + ); + posX += barWidth + 1; + } + } + + draw(); + </script> +</body> +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ウェブオーディオ API の使用](/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/ja/web/api/analysernode/getfloattimedomaindata/index.md b/files/ja/web/api/analysernode/getfloattimedomaindata/index.md new file mode 100644 index 00000000000000..2f3de8d58b46c3 --- /dev/null +++ b/files/ja/web/api/analysernode/getfloattimedomaindata/index.md @@ -0,0 +1,89 @@ +--- +title: "AnalyserNode: getFloatTimeDomainData() メソッド" +short-title: getFloatTimeDomainData() +slug: Web/API/AnalyserNode/getFloatTimeDomainData +l10n: + sourceCommit: 135b8311a5e3d12789e8421845be3ce026ef72b8 +--- + +{{ APIRef("Web Audio API") }} + +**`getFloatTimeDomainData()`** は {{domxref("AnalyserNode")}} 渡された　{{jsxref("Float32Array")}}　配列に、現在の波形、つまり時間領域のデータをコピーします。配列の各値はサンプルで、それぞれの時点における信号の大きさです。 + +## 構文 + +```js-nolint +getFloatTimeDomainData(array) +``` + +### 引数 + +- `array` + - : 時間領域データのコピー先となる {{jsxref("Float32Array")}} です。 + 配列の持つ要素が {{domxref("AnalyserNode.fftSize")}} より少なかった場合、余分な要素は削除されます。必要以上の要素があった場合、余分な要素は無視されます。 + +### 返値 + +なし ({{jsxref("undefined")}})。 + +## 例 + +次の例では、 {{domxref("AudioContext")}} で `AnalyserNode` を作成し、 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} と {{htmlelement("canvas")}} で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。 +より完全な応用例/情報については、 [Voice-change-O-matic](https://github.com/mdn/webaudio-examples/tree/main/voice-change-o-matic) のデモを調べてください（関連するコードは [app.js の 108 ～ 193 行目](https://github.com/mdn/webaudio-examples/blob/main/voice-change-o-matic/scripts/app.js#L108-L193)を参照）。 + +```js +const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +const analyser = audioCtx.createAnalyser(); + +// … + +analyser.fftSize = 1024; +const bufferLength = analyser.fftSize; +console.log(bufferLength); +const dataArray = new Float32Array(bufferLength); + +canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + +function draw() { + drawVisual = requestAnimationFrame(draw); + analyser.getFloatTimeDomainData(dataArray); + + canvasCtx.fillStyle = "rgb(200, 200, 200)"; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + canvasCtx.lineWidth = 2; + canvasCtx.strokeStyle = "rgb(0, 0, 0)"; + canvasCtx.beginPath(); + + const sliceWidth = (WIDTH * 1.0) / bufferLength; + let x = 0; + + for (let i = 0; i < bufferLength; i++) { + const v = dataArray[i] * 200.0; + const y = HEIGHT / 2 + v; + + if (i === 0) { + canvasCtx.moveTo(x, y); + } else { + canvasCtx.lineTo(x, y); + } + x += sliceWidth; + } + + canvasCtx.lineTo(canvas.width, canvas.height / 2); + canvasCtx.stroke(); +} + +draw(); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ウェブオーディオ API の使用](/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/ja/web/api/analysernode/index.md b/files/ja/web/api/analysernode/index.md index 3f01b7b0b0a638..8ee6f939b8415c 100644 --- a/files/ja/web/api/analysernode/index.md +++ b/files/ja/web/api/analysernode/index.md @@ -1,150 +1,152 @@ --- title: AnalyserNode slug: Web/API/AnalyserNode +l10n: + sourceCommit: 2c9f6f0688db9b4437f998321044fdd22afed546 --- {{APIRef("Web Audio API")}} -**`AnalyserNode`** インタフェースはリアルタイム時間領域/周波数領域分析情報を表現します。{{domxref("AudioNode")}}は、入力から出力の流れにおいて audio stream そのものは変えず、データ加工や音声の可視化をすることができます。 +**`AnalyserNode`** インターフェイスはリアルタイム時間領域/周波数領域分析情報を表現します。 {{domxref("AudioNode")}} は、入力から出力の流れにおいて音声ストリームそのものは変えず、データ加工や音声の可視化をすることができます。 -１つの`AnalyzerNode`は必ず１つの入力と出力を持ちます。出力先がなくても AnalyzerNode は問題ありません。 +1 つの `AnalyserNode` は必ず 1 つの入力と出力を持ちます。出力先がなくてもこのノードは問題ありません。 -![Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT.](fttaudiodata_en.svg) +![音声ストリームを変更することなく、ノードは FFT を使用して、それに関連する周波数と時刻のデータを取得することができます。](fttaudiodata_en.svg) + +{{InheritanceDiagram}} <table class="properties"> <tbody> <tr> - <th scope="row">Number of inputs</th> + <th scope="row">入力の数</th> <td><code>1</code></td> </tr> <tr> - <th scope="row">Number of outputs</th> - <td><code>1</code> (but may be left unconnected)</td> + <th scope="row">出力の数</th> + <td><code>1</code> （ただし未接続のままになる）</td> </tr> <tr> - <th scope="row">Channel count mode</th> - <td><code>"explicit"</code></td> + <th scope="row">チャンネル数モード</th> + <td><code>"max"</code></td> </tr> <tr> - <th scope="row">Channel count</th> - <td><code>1</code></td> + <th scope="row">チャンネル数</th> + <td><code>2</code></td> </tr> <tr> - <th scope="row">Channel interpretation</th> + <th scope="row">チャンネルの解釈</th> <td><code>"speakers"</code></td> </tr> </tbody> </table> -## Inheritance - -このインタフェースは以下のインタフェースと継承関係にあります。: +## コンストラクター -{{InheritanceDiagram}} +- {{domxref("AnalyserNode.AnalyserNode", "AnalyserNode()")}} + - : `AnalyserNode` オブジェクトの新しいインスタンスを生成します。 -## Properties +## インスタンスプロパティ -_以下は、{{domxref("AudioNode")}}からプロパティを継承する_. +_親である {{domxref("AudioNode")}} から継承したプロパティもあります_。 - {{domxref("AnalyserNode.fftSize")}} - - : 符号なしの long 型の値で FFT（[高速フーリエ変換](http://en.wikipedia.org/wiki/Fast_Fourier_transform)）において周波数領域を決定するために使われているサイズを表している。 -- {{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}} - - : 符号なしの long 型で FFT（高速フーリエ変換）のサイズの半分の値。一般的に音声再生時の可視化に用いられる。 + - : 符号なし long 型の値で、 FFT（[高速フーリエ変換](http://en.wikipedia.org/wiki/Fast_Fourier_transform)）において周波数領域を決定するために使われているサイズを表します。 +- {{domxref("AnalyserNode.frequencyBinCount")}} {{ReadOnlyInline}} + - : 符号なし long 型の値で、 FFT のサイズの半分の値。一般的に音声再生時の可視化に用いられます。 - {{domxref("AnalyserNode.minDecibels")}} - - : unsigned byte 型値へ変換する FFT 分析データのスケーリング時の最小のパワー値を表す double 型の値である。一般的に、この値は、getByteFrequencyData()の使用時の結果の範囲の最小値として明記される。 + - : double 型の値で、 unsigned byte 型の値へ変換する FFT 分析データのスケーリング時の最小のパワー値を表します。一般的に、この値は、 `getByteFrequencyData()` の使用時の結果の範囲の最小値を指定します。 - {{domxref("AnalyserNode.maxDecibels")}} - - : unsigned byte 型値へ変換する FFT 分析データのスケーリング時の最大のパワー値を表す double 型の値である。一般的に、この値は、getByteFrequencyData()の使用時の結果の範囲の最大値として明記される。 + - : double 型の値で、 unsigned byte 型の値へ変換する FFT 分析データのスケーリング時の最大のパワー値を表します。一般的に、この値は、 `getByteFrequencyData()` の使用時の結果の範囲の最大値を指定します。 - {{domxref("AnalyserNode.smoothingTimeConstant")}} - - : 分析フレームの平均間隔を表す double 型の値で、使用例として時間的にスペクトルを平滑化させるのに用いられる。 + - : double 型の値で、分析フレームの平均間隔を表します。基本的に、時間的にスペクトルを平滑化させるのに用いられます。 -## Methods +## インスタンスメソッド -_{{domxref("AudioNode")}}からメソッドを継承する_. +_親である {{domxref("AudioNode")}} から継承したメソッドもあります_。 - {{domxref("AnalyserNode.getFloatFrequencyData()")}} - - : 周波数データを引数として渡された Float32Array 配列へコピーする。 - -<!----> - + - : 現在の周波数データを、引数として渡された {{jsxref("Float32Array")}} 配列へコピーします。 - {{domxref("AnalyserNode.getByteFrequencyData()")}} - - : 周波数データを引数として渡された Uint8Array 配列(unsigned byte 配列)へコピーする。 - -<!----> - + - : 現在の周波数データを、引数として渡された {{jsxref("Uint8Array")}} 配列（unsigned byte 配列）へコピーします。 - {{domxref("AnalyserNode.getFloatTimeDomainData()")}} - - : 音声波形データを引数として渡された Float32Array 配列へコピーする。 + - : 現在の波形または時間領域データを、渡された {{jsxref("Float32Array")}} 配列へコピーします。 - {{domxref("AnalyserNode.getByteTimeDomainData()")}} - - : 音声波形データを引数として渡された Uint8Array 配列(unsigned byte 配列)へコピーする。 - -## Examples + - : 現在の波形または時間領域データを、引数として渡された {{jsxref("Uint8Array")}} 配列（unsigned byte 配列）へコピーします。 -> **メモ:** オーディオヴィジュアライゼーションのための Web Audio API を使ったヴィジュアライゼーションガイドを御覧ください。 +## 例 -### Basic usage +> **メモ:** 音声の視覚化を作成するための詳細は、[ウェブオーディオ API の視覚化](/ja/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API)のガイドを参照してください。 -以下の例では、AudioContext から１つの AnalyserNode を作成しており、requestAnimationFrame と\<canvas>へ繰り返し時間波形データを繰り返し集め現入力を"オシロスコープスタイル"で出力し描画している。 +### 基本的な使い方 -より多くのサンプルは 我々の [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) デモにご覧頂けます。 (see [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205) for relevant code). +次の例では、 {{domxref("AudioContext")}} で `AnalyserNode` を作成し、 {{domxref("window.requestAnimationFrame()", "requestAnimationFrame")}} と {{htmlelement("canvas")}} で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。 +より完全な応用例/情報については、 [Voice-change-O-matic](https://mdn.github.io/webaudio-examples/voice-change-o-matic/) のデモを調べてください（関連するコードは [app.js の 108-193 行目](https://github.com/mdn/webaudio-examples/tree/main/voice-change-o-matic/scripts/app.js#L108-L193)を参照）。 ```js -var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); -var analyser = audioCtx.createAnalyser(); +const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); - ... +// … +const analyser = audioCtx.createAnalyser(); analyser.fftSize = 2048; -var bufferLength = analyser.frequencyBinCount; -var dataArray = new Uint8Array(bufferLength); + +const bufferLength = analyser.frequencyBinCount; +const dataArray = new Uint8Array(bufferLength); analyser.getByteTimeDomainData(dataArray); -// draw an oscilloscope of the current audio source +// Connect the source to be analysed +source.connect(analyser); -function draw() { +// Get a canvas defined with ID "oscilloscope" +const canvas = document.getElementById("oscilloscope"); +const canvasCtx = canvas.getContext("2d"); - drawVisual = requestAnimationFrame(draw); +// draw an oscilloscope of the current audio source - analyser.getByteTimeDomainData(dataArray); +function draw() { + requestAnimationFrame(draw); - canvasCtx.fillStyle = 'rgb(200, 200, 200)'; - canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + analyser.getByteTimeDomainData(dataArray); - canvasCtx.lineWidth = 2; - canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; + canvasCtx.fillStyle = "rgb(200, 200, 200)"; + canvasCtx.fillRect(0, 0, canvas.width, canvas.height); - canvasCtx.beginPath(); + canvasCtx.lineWidth = 2; + canvasCtx.strokeStyle = "rgb(0, 0, 0)"; - var sliceWidth = WIDTH * 1.0 / bufferLength; - var x = 0; + canvasCtx.beginPath(); - for(var i = 0; i < bufferLength; i++) { + const sliceWidth = (canvas.width * 1.0) / bufferLength; + let x = 0; - var v = dataArray[i] / 128.0; - var y = v * HEIGHT/2; + for (let i = 0; i < bufferLength; i++) { + const v = dataArray[i] / 128.0; + const y = (v * canvas.height) / 2; - if(i === 0) { - canvasCtx.moveTo(x, y); - } else { - canvasCtx.lineTo(x, y); - } + if (i === 0) { + canvasCtx.moveTo(x, y); + } else { + canvasCtx.lineTo(x, y); + } - x += sliceWidth; - } + x += sliceWidth; + } - canvasCtx.lineTo(canvas.width, canvas.height/2); - canvasCtx.stroke(); - }; + canvasCtx.lineTo(canvas.width, canvas.height / 2); + canvasCtx.stroke(); +} - draw(); +draw(); ``` -## Specifications +## 仕様書 {{Specifications}} -## Browser compatibility +## ブラウザーの互換性 -{{Compat("api.AnalyserNode")}} +{{Compat}} -## See also +## 関連情報 -- [Using the Web Audio API](/ja/docs/Web_Audio_API/Using_Web_Audio_API) +- [ウェブオーディオ API の使用](/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/ja/web/api/analysernode/maxdecibels/index.md b/files/ja/web/api/analysernode/maxdecibels/index.md new file mode 100644 index 00000000000000..d7fd4c971f8062 --- /dev/null +++ b/files/ja/web/api/analysernode/maxdecibels/index.md @@ -0,0 +1,79 @@ +--- +title: "AnalyserNode: maxDecibels プロパティ" +short-title: maxDecibels +slug: Web/API/AnalyserNode/maxDecibels +l10n: + sourceCommit: 135b8311a5e3d12789e8421845be3ce026ef72b8 +--- + +{{APIRef("Web Audio API")}} + +**`maxDecibels`** は {{domxref("AnalyserNode")}} インターフェイスのプロパティで、符号なしバイト値に変換するための、 FFT 分析データの拡大縮小する範囲の最大出力値を表す double 値です。基本的には、 `getByteFrequencyData()` を使用したときの結果の範囲の最大値を指定します。 + +## 値 + +double 値で、 FFT 解析データを拡大縮小する際の最大[デシベル](https://ja.wikipedia.org/wiki/デシベル)値を表します。`0` dB は使用可能な最も大きな音、`-10` dB はその 10 分の 1 などです。既定値は `-30` dB です。 + +`getByteFrequencyData()` からデータを取得した場合、振幅が `maxDecibels` 以上の周波数は `255` として返されます。 + +### 例外 + +- `IndexSizeError` {{domxref("DOMException")}} + - : `AnalyserNode.minDecibels` 以下の値が設定されている場合に発生します。 + +## 例 + +次の例では、 {{domxref("AudioContext")}} で `AnalyserNode` を作成し、 {{domxref("window.requestAnimationFrame()", "requestAnimationFrame")}} と {{htmlelement("canvas")}} で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。 +より完全な応用例/情報については、 [Voice-change-O-matic](https://github.com/mdn/webaudio-examples/tree/main/voice-change-o-matic) のデモを調べてください（関連するコードは [app.js の 108 ～ 193 行目](https://github.com/mdn/webaudio-examples/blob/main/voice-change-o-matic/scripts/app.js#L108-L193)を参照）。 + +```js +const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +const analyser = audioCtx.createAnalyser(); +analyser.minDecibels = -90; +analyser.maxDecibels = -10; + +// … + +analyser.fftSize = 256; +const bufferLength = analyser.frequencyBinCount; +console.log(bufferLength); +const dataArray = new Uint8Array(bufferLength); + +canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + +function draw() { + drawVisual = requestAnimationFrame(draw); + + analyser.getByteFrequencyData(dataArray); + + canvasCtx.fillStyle = "rgb(0, 0, 0)"; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + const barWidth = (WIDTH / bufferLength) * 2.5; + let barHeight; + let x = 0; + + for (let i = 0; i < bufferLength; i++) { + barHeight = dataArray[i]; + + canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`; + canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2); + + x += barWidth + 1; + } +} + +draw(); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ウェブオーディオ API の使用](/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/ja/web/api/analysernode/mindecibels/index.md b/files/ja/web/api/analysernode/mindecibels/index.md new file mode 100644 index 00000000000000..671d2255e22a08 --- /dev/null +++ b/files/ja/web/api/analysernode/mindecibels/index.md @@ -0,0 +1,76 @@ +--- +title: "AnalyserNode: minDecibels プロパティ" +short-title: minDecibels +slug: Web/API/AnalyserNode/minDecibels +l10n: + sourceCommit: 135b8311a5e3d12789e8421845be3ce026ef72b8 +--- + +{{ APIRef("Web Audio API") }} + +**`minDecibels`** は {{domxref("AnalyserNode")}} インターフェイスのプロパティで、符号なしバイト値に変換するための、 FFT 分析データの拡大縮小する範囲の最小出力値を表す double 値です。基本的には、 `getByteFrequencyData()` を使用したときの結果の範囲の最小値を指定します。 + +## 値 + +double 値で、 FFT 解析データを拡大縮小する際の最小[デシベル](https://ja.wikipedia.org/wiki/デシベル)値を表します。`0` dB は使用可能な最も小さな音、`-10` dB はその 10 分の 1 などです。既定値は `-100` dB です。 + +`getByteFrequencyData()` からデータを取得した場合、振幅が `minDecibels` 以下の周波数は `0` として返されます。 + +> **メモ:** `AnalyserNode.maxDecibels` より大きい値を設定すると、 `INDEX_SIZE_ERR` 例外が発生します。 + +## 例 + +次の例では、 {{domxref("AudioContext")}} で `AnalyserNode` を作成し、 {{domxref("window.requestAnimationFrame()", "requestAnimationFrame")}} と {{htmlelement("canvas")}} で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。 +より完全な応用例/情報については、 [Voice-change-O-matic](https://github.com/mdn/webaudio-examples/tree/main/voice-change-o-matic) のデモを調べてください（関連するコードは [app.js の 108 ～ 193 行目](https://github.com/mdn/webaudio-examples/blob/main/voice-change-o-matic/scripts/app.js#L108-L193)を参照）。 + +```js +const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +const analyser = audioCtx.createAnalyser(); +analyser.minDecibels = -90; +analyser.maxDecibels = -10; + +// … + +analyser.fftSize = 256; +const bufferLength = analyser.frequencyBinCount; +console.log(bufferLength); +const dataArray = new Uint8Array(bufferLength); + +canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + +function draw() { + drawVisual = requestAnimationFrame(draw); + + analyser.getByteFrequencyData(dataArray); + + canvasCtx.fillStyle = "rgb(0, 0, 0)"; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + const barWidth = (WIDTH / bufferLength) * 2.5; + let barHeight; + let x = 0; + + for (let i = 0; i < bufferLength; i++) { + barHeight = dataArray[i]; + + canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`; + canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2); + + x += barWidth + 1; + } +} + +draw(); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ウェブオーディオ API の使用](/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/ja/web/api/analysernode/smoothingtimeconstant/index.md b/files/ja/web/api/analysernode/smoothingtimeconstant/index.md new file mode 100644 index 00000000000000..46112d53a6da22 --- /dev/null +++ b/files/ja/web/api/analysernode/smoothingtimeconstant/index.md @@ -0,0 +1,81 @@ +--- +title: "AnalyserNode: smoothingTimeConstant プロパティ" +short-title: smoothingTimeConstant +slug: Web/API/AnalyserNode/smoothingTimeConstant +l10n: + sourceCommit: 135b8311a5e3d12789e8421845be3ce026ef72b8 +--- + +{{ APIRef("Web Audio API") }} + +**`smoothingTimeConstant`** は {{ domxref("AnalyserNode") }} インターフェイスのプロパティで、最後の分析フレームとの平均化定数を表す double 値です。これは基本的に、現在のバッファーと `AnalyserNode` が処理した最後のバッファーとの間の平均であり、結果として、よりスムーズな時間による値の変化の集合になります。 + +## 値 + +doublet で、 `0` から `1` までの範囲内です（`0` は平均時間ではありません）。既定値は `0.8` です。 + +0 が設定されている場合、平均化は行われませんが、1 の値は「値を計算する間に前回と現在のバッファーがかなりオーバーラップする」ことを意味しており、実質的に {{domxref("AnalyserNode.getFloatFrequencyData")}}/{{domxref("AnalyserNode.getByteFrequencyData")}} 呼び出し間の変化を滑らかにします。 + +専門用語では、[ブラックマンウィンドウ](https://webaudio.github.io/web-audio-api/#blackman-window)を適用し、時間による値の変化を平滑化します。ほとんどの場合、既定値で十分です。 + +> **メモ:** 0～1 の範囲の外の値を設定するには、 `INDEX_SIZE_ERR` 例外が発生します。 + +## 例 + +次の例では、 {{domxref("AudioContext")}} で `AnalyserNode` を作成し、 {{domxref("window.requestAnimationFrame()", "requestAnimationFrame")}} と {{htmlelement("canvas")}} で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。 +より完全な応用例/情報については、 [Voice-change-O-matic](https://github.com/mdn/webaudio-examples/tree/main/voice-change-o-matic) のデモを調べてください（関連するコードは [app.js の 108 ～ 193 行目](https://github.com/mdn/webaudio-examples/blob/main/voice-change-o-matic/scripts/app.js#L108-L193)を参照）。 + +`smoothingTimeConstant()` が持つ効果に興味がある場合は、上記の例を複製して、代わりに `analyser.smoothingTimeConstant = 0;` を設定してみてください。値の変化がより激しくなることがわかるでしょう。 + +```js +const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +const analyser = audioCtx.createAnalyser(); +analyser.minDecibels = -90; +analyser.maxDecibels = -10; +analyser.smoothingTimeConstant = 0.85; + +// … + +analyser.fftSize = 256; +const bufferLength = analyser.frequencyBinCount; +console.log(bufferLength); +const dataArray = new Uint8Array(bufferLength); + +canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + +function draw() { + drawVisual = requestAnimationFrame(draw); + + analyser.getByteFrequencyData(dataArray); + + canvasCtx.fillStyle = "rgb(0, 0, 0)"; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + const barWidth = (WIDTH / bufferLength) * 2.5; + let barHeight; + let x = 0; + + for (let i = 0; i < bufferLength; i++) { + barHeight = dataArray[i]; + + canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`; + canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2); + + x += barWidth + 1; + } +} + +draw(); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ウェブオーディオ API の使用](/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/ja/web/api/document/activeelement/index.md b/files/ja/web/api/document/activeelement/index.md index fbac36fbb70587..5992af29790894 100644 --- a/files/ja/web/api/document/activeelement/index.md +++ b/files/ja/web/api/document/activeelement/index.md @@ -1,6 +1,9 @@ --- -title: Document.activeElement +title: "Document: activeElement プロパティ" +short-title: activeElement slug: Web/API/Document/activeElement +l10n: + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc --- {{APIRef("Shadow DOM")}} @@ -8,7 +11,7 @@ slug: Web/API/Document/activeElement **`activeElement`** は {{domxref("Document")}} インターフェイスの読み取り専用プロパティで、DOM 内で現在フォーカスを持っている要素 ({{domxref("Element")}}) を返します。 多くの場合、 `activeElement` はその時点でテキストが選択されていれば {{domxref("HTMLInputElement")}} または {{domxref("HTMLTextAreaElement")}} オブジェクトを返します。もしそうなら、そのオブジェクトの `selectionStart` と `selectionEnd` プロパティを使用することで、より詳細な情報を得ることができます。 -その他、フォーカスされている要素が {{HTMLElement("select")}} 要素（メニュー）や {{HTMLElement("input")}} 要素（ `type` `"button"`, `"checkbox"`, `"radio"`） である場合もあります。 +その他、フォーカスされている要素が {{HTMLElement("select")}} 要素（メニュー）や {{HTMLElement("input")}} 要素である場合もあります。 通常、ユーザーはタブキーを押して、フォーカス可能な要素間でページ内のフォーカスを移動させ、スペースバーを使用して 1 つの要素をアクティブにします（つまり、ボタンを押したり、ラジオボタンをトグル切り替えしたりします）。どの要素にフォーカスが当たるかは、プラットフォームやブラウザーの現在の設定によって異なります。例えば、 macOS システムでは通常、既定では、テキスト入力要素以外の要素はフォーカスされません。 @@ -34,8 +37,8 @@ slug: Web/API/Document/activeElement > </form> -<p>アクティブな要素の ID: <b id="output-element"></b></p> -<p>選択されているテキスト: <b id="output-text"></b></p> +<p>アクティブな要素の ID: <em id="output-element"></em></p> +<p>選択されているテキスト: <em id="output-text"></em></p> ``` ### JavaScript @@ -62,7 +65,7 @@ textarea2.addEventListener("mouseup", onMouseUp, false); ### 結果 -{{ EmbedLiveSample('Example', '400', '400') }} +{{ EmbedLiveSample('Examples', '400', '400') }} ## 仕様書 @@ -71,3 +74,7 @@ textarea2.addEventListener("mouseup", onMouseUp, false); ## ブラウザーの互換性 {{Compat}} + +## 関連情報 + +- {{domxref("Document.hasFocus")}} diff --git a/files/ja/web/api/document/exitfullscreen/index.md b/files/ja/web/api/document/exitfullscreen/index.md index 8dd1ca04562df3..85b031ff3f862e 100644 --- a/files/ja/web/api/document/exitfullscreen/index.md +++ b/files/ja/web/api/document/exitfullscreen/index.md @@ -1,8 +1,9 @@ --- -title: Document.exitFullscreen() +title: "Document: exitFullscreen() メソッド" +short-title: exitFullscreen() slug: Web/API/Document/exitFullscreen l10n: - sourceCommit: 4e233c16c6f0d347972c5c762f5b836318a46124 + sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b --- {{ApiRef("Fullscreen API")}} diff --git a/files/ja/web/api/document/fullscreen/index.md b/files/ja/web/api/document/fullscreen/index.md index c8e26f1e31196f..2374a160270209 100644 --- a/files/ja/web/api/document/fullscreen/index.md +++ b/files/ja/web/api/document/fullscreen/index.md @@ -1,8 +1,9 @@ --- -title: Document.fullscreen +title: "Document: fullscreen プロパティ" +short-title: fullscreen slug: Web/API/Document/fullscreen l10n: - sourceCommit: a33aa4b21a269539354089513b22846f4be83f3c + sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b --- {{APIRef("Fullscreen API")}}{{Deprecated_Header}} diff --git a/files/ja/web/api/document/fullscreenchange_event/index.md b/files/ja/web/api/document/fullscreenchange_event/index.md index 61090d708dd420..919ff5d41ff48e 100644 --- a/files/ja/web/api/document/fullscreenchange_event/index.md +++ b/files/ja/web/api/document/fullscreenchange_event/index.md @@ -1,8 +1,9 @@ --- title: "Document: fullscreenchange イベント" +short-title: fullscreenchange slug: Web/API/Document/fullscreenchange_event l10n: - sourceCommit: 77b8cdb3a05999ade4a269d0ef2443618bb7cd66 + sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b --- {{APIRef}} @@ -31,6 +32,8 @@ onfullscreenchange = (event) => {}; ## 例 +### `fullscreenchange` イベントのログ記録 + この例では、 `fullscreenchange` イベントのハンドラーが {{domxref("Document")}} に追加されます。 ユーザーが "Toggle Fullscreen Mode" ボタンをクリックすると、 `click` ハンドラーは `div` の全画面モードを切り替えます。もし `document.fullscreenElement` に値があれば、全画面モードを終了します。そうでない場合は、 div は全画面モードに配置されます。 @@ -39,48 +42,73 @@ onfullscreenchange = (event) => {}; この例のコードで意味しているのは、ある要素が現在全画面モードである場合、 `fullscreenchange` ハンドラーは全画面要素の `id` をコンソールにログ出力するということです。もし `document.fullscreenElement` が null ならば、このコードは全画面モードを離れるための変更であることをメッセージとしてログ出力します。 -### HTML +#### HTML ```html -<h1>fullscreenchange event example</h1> +<h1>fullscreenchange イベントの例</h1> <div id="fullscreen-div"> - <button id="toggle-fullscreen">Toggle Fullscreen Mode</button> + <button id="toggle-fullscreen">全画面モードの切り替え</button> + <pre id="logger"></pre> </div> ``` -### JavaScript +#### CSS + +```css +* { + box-sizing: border-box; +} + +#fullscreen-div { + height: 150px; + padding: 1rem; + background-color: pink; +} + +#logger { + height: 80px; + padding: 0 0.5rem; + background-color: white; + overflow: scroll; +} +``` + +#### JavaScript ```js +const logger = document.querySelector("#logger"); +const fullScreenElement = document.querySelector("#fullscreen-div"); + +function log(message) { + logger.textContent = `${logger.textContent}\n${message}`; +} + function fullscreenchanged(event) { // document.fullscreenElement は、全画面モードにある要素があれば // それを指します。要素がなければ、このプロパティの値は null に - // あります。 + // なります。 if (document.fullscreenElement) { - console.log( - `Element: ${document.fullscreenElement.id} entered fullscreen mode.`, - ); + log(`要素: ${document.fullscreenElement.id} が全画面モードに入りました。`); } else { - console.log("Leaving fullscreen mode."); + log("全画面モードを終了しました。"); } } document.addEventListener("fullscreenchange", fullscreenchanged); -// or -document.onfullscreenchange = fullscreenchanged; // トグルボタンがクリックされたら、全画面モードを切り替える -document - .getElementById("toggle-fullscreen") - .addEventListener("click", (event) => { - if (document.fullscreenElement) { - // exitFullscreen は Document オブジェクトでのみ使用可 - document.exitFullscreen(); - } else { - el.requestFullscreen(); - } - }); +document.getElementById("toggle-fullscreen").addEventListener("click", () => { + if (document.fullscreenElement) { + // exitFullscreen は Document オブジェクトでのみ使用可 + document.exitFullscreen(); + } else { + fullScreenElement.requestFullscreen(); + } +}); ``` +{{EmbedLiveSample("Logging fullscreenchange events", 640, 250, "", "", "", "fullscreen")}} + ## 仕様書 {{Specifications}} diff --git a/files/ja/web/api/document/fullscreenelement/index.md b/files/ja/web/api/document/fullscreenelement/index.md index d42995b5140185..f6a96c493025b3 100644 --- a/files/ja/web/api/document/fullscreenelement/index.md +++ b/files/ja/web/api/document/fullscreenelement/index.md @@ -1,8 +1,9 @@ --- -title: Document.fullscreenElement +title: "Document: fullscreenElement プロパティ" +short-title: fullscreenElement slug: Web/API/Document/fullscreenElement l10n: - sourceCommit: 23aea0fbb04893c64890c89a634250283e2beb71 + sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b --- {{ApiRef("Fullscreen API")}} diff --git a/files/ja/web/api/document/fullscreenerror_event/index.md b/files/ja/web/api/document/fullscreenerror_event/index.md index c250f580df5a74..f07544e7da19f8 100644 --- a/files/ja/web/api/document/fullscreenerror_event/index.md +++ b/files/ja/web/api/document/fullscreenerror_event/index.md @@ -1,8 +1,9 @@ --- title: "Document: fullscreenerror イベント" +short-title: fullscreenerror slug: Web/API/Document/fullscreenerror_event l10n: - sourceCommit: 1511e914c6b1ce6f88056bfefd48a6aa585cebce + sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b --- {{APIRef}} @@ -35,7 +36,7 @@ onfullscreenerror = (event) => {}; const requestor = document.querySelector("div"); function handleError(event) { - console.error("an error occurred changing into fullscreen"); + console.error("全画面モードへの移行時にエラーが発生しました"); console.log(event); } diff --git a/files/ja/web/api/document/index.md b/files/ja/web/api/document/index.md index dec5395be7fe0e..eb457cd896f314 100644 --- a/files/ja/web/api/document/index.md +++ b/files/ja/web/api/document/index.md @@ -2,12 +2,12 @@ title: Document slug: Web/API/Document l10n: - sourceCommit: 1511e914c6b1ce6f88056bfefd48a6aa585cebce + sourceCommit: 56c76424a5edb45f6716ac4ee48861dac8e7ae38 --- {{APIRef("DOM")}} -**`Document`** インターフェイスはブラウザーに読み込まれたウェブページを表し、 [DOM ツリー](/ja/docs/Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core)であるウェブページのコンテンツへの入口としての役割を果たします。 +**`Document`** インターフェイスはブラウザーに読み込まれたウェブページを表し、 [DOM ツリー](/ja/docs/Web/API/Document_object_model/Using_the_Document_Object_Model#dom_ツリーとは？)であるウェブページのコンテンツへの入口としての役割を果たします。 DOM ツリーには {{HTMLElement("body")}} や {{HTMLElement("table")}} など、[多数の要素](/ja/docs/Web/HTML/Element)があります。これはページの URL を取得したり文書で新たな要素を作成するなど、文書全体に関わる機能を提供します。 @@ -20,7 +20,7 @@ DOM ツリーには {{HTMLElement("body")}} や {{HTMLElement("table")}} など - {{DOMxRef("Document.Document", "Document()")}} - : 新しい `Document` オブジェクトを作成します。 -## プロパティ +## インスタンスプロパティ _このインターフェイスは、 {{DOMxRef("Node")}} インターフェイスおよび {{DOMxRef("EventTarget")}} インターフェイスのプロパティも継承しています。_ @@ -57,6 +57,8 @@ _このインターフェイスは、 {{DOMxRef("Node")}} インターフェイ - : 現在の文書の {{DOMxRef("FontFaceSet")}} インターフェイスを返します。 - {{DOMxRef("Document.forms")}} {{ReadOnlyInline}} - : {{DOMxRef("HTMLCollection")}} で現在の文書の {{HTMLElement("form")}} 要素を返します。 +- {{DOMxRef("Document.fragmentDirective")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : 現在の文書の {{domxref("FragmentDirective")}} を返します。 - {{DOMxRef("Document.fullscreenElement")}} {{ReadOnlyInline}} - : この文書で現在全画面モードになっている要素です。 - {{DOMxRef("Document.head")}} {{ReadOnlyInline}} @@ -71,8 +73,6 @@ _このインターフェイスは、 {{DOMxRef("Node")}} インターフェイ - : 現在の文書における最後の子要素を返します。 - {{DOMxRef("Document.links")}} {{ReadOnlyInline}} - : {{DOMxRef("HTMLCollection")}} で、文書内のすべてのハイパーリンクのリストを返します。 -- {{DOMxRef("Document.mozSyntheticDocument")}} {{Non-standard_Inline}} - - : 単独の画像、動画、音声ファイルなど、文書が合成されたものである限り `true` を返します。 - {{DOMxRef("Document.pictureInPictureElement")}} {{ReadOnlyInline}} - : この文書で現在、ピクチャインピクチャモードで表示されている要素 ({{DOMxRef('Element')}}) を返します。 - {{DOMxRef("Document.pictureInPictureEnabled")}} {{ReadOnlyInline}} @@ -132,7 +132,7 @@ _HTML 文書用の `Document` インターフェイスは {{DOMxRef("HTMLDocumen - {{DOMxRef("Document.anchors")}} {{Deprecated_Inline}} {{ReadOnlyInline}} - : 文書内のすべてのアンカーのリストを返します。 - {{DOMxRef("Document.applets")}} {{Deprecated_Inline}} {{ReadOnlyInline}} - - : 文書内にあるアプレットのリスト (出現順) を返します。 + - : 空の {{domxref("HTMLCollection")}} を返します。文書内にあるアプレットのリストを返すために使われた古いプロパティです。 - {{DOMxRef("Document.bgColor")}} {{Deprecated_Inline}} - : 現在の文書の背景色を取得または設定します。 - {{DOMxRef("Document.characterSet","Document.charset")}} {{Deprecated_Inline}} {{ReadOnlyInline}} @@ -141,16 +141,14 @@ _HTML 文書用の `Document` インターフェイスは {{DOMxRef("HTMLDocumen - : 現在の文書の前景色または文字色を取得/設定します。 - {{DOMxRef("Document.fullscreen")}} {{Deprecated_Inline}} - : 文書が[全画面モード](/ja/docs/Web/API/Fullscreen_API)にあるときに `true` になります。 -- {{DOMxRef("Document.height")}} {{Non-standard_Inline}} {{Deprecated_Inline}} - - : 現在の文書の高さを取得/設定します。 - {{DOMxRef("Document.characterSet", "Document.inputEncoding")}} {{Deprecated_Inline}} {{ReadOnlyInline}} - : {{DOMxRef("Document.characterSet")}} の別名です。代わりにそちらを使用してください。 - {{DOMxRef("Document.lastStyleSheetSet")}} {{Deprecated_Inline}} {{ReadOnlyInline}} {{Non-standard_Inline}} - : 直前に有効であったスタイルシートセットの名称を返します。 {{DOMxRef("Document.selectedStyleSheetSet","selectedStyleSheetSet")}} に値を設定してスタイルシートを変更するまで、この値は `null` になります。 - {{DOMxRef("Document.linkColor")}} {{Deprecated_Inline}} - - : document 内のハイパーリンクの色を取得/設定します。 + - : 文書内のハイパーリンクの色を取得/設定します。 - {{DOMxRef("Document.preferredStyleSheetSet")}} {{Deprecated_Inline}} {{ReadOnlyInline}} {{Non-standard_Inline}} - - : ページの作者によって設定された、優先的なスタイルシートを返します。 + - : ページの作者によって設定された、推奨されるスタイルシートを返します。 - {{DOMxRef("Document.rootElement")}} {{Deprecated_Inline}} - : {{DOMxRef("Document.documentElement")}} と同様ですが、 {{SVGElement("svg")}} ルート要素専用です。こちらのプロパティを代わりに使用してください。 - {{DOMxRef("Document.selectedStyleSheetSet")}} {{Deprecated_Inline}} {{Non-standard_Inline}} @@ -159,16 +157,14 @@ _HTML 文書用の `Document` インターフェイスは {{DOMxRef("HTMLDocumen - : 文書で使用できるスタイルシートセットのリストを返します。 - {{DOMxRef("Document.vlinkColor")}} {{Deprecated_Inline}} - : 訪問済みのハイパーリンクの色を取得/設定します。 -- {{DOMxRef("Document.width")}} {{Non-standard_Inline}} {{Deprecated_Inline}} - - : 現在の文書の幅を返します。 - {{DOMxRef("Document.xmlEncoding")}} {{Deprecated_Inline}} - : XML 宣言によって決められたエンコーディングを返します。 - {{DOMxRef("Document.xmlStandalone")}} {{Deprecated_Inline}} - - : XML 宣言で文書がスタンドアロンである (_例_: DTD の外部パートが文書のコンテンツに影響する) 場合に `true` を、そうでない場合に `false` を返します。 + - : XML 宣言で文書がスタンドアロンである（_例_: DTD の外部パートが文書のコンテンツに影響する）場合に `true` を、そうでない場合に `false` を返します。 - {{DOMxRef("Document.xmlVersion")}} {{Deprecated_Inline}} - : XML 宣言で指定されたバージョン番号、または宣言が省略されている場合に `"1.0"` を返します。 -## メソッド +## インスタンスメソッド _このインターフェイスは、{{DOMxRef("Node")}} インターフェイスおよび {{DOMxRef("EventTarget")}} インターフェイスのメソッドを継承します。_ @@ -196,8 +192,6 @@ _このインターフェイスは、{{DOMxRef("Node")}} インターフェイ - : 指定したタグ名で新しい要素を生成します。 - {{DOMxRef("Document.createElementNS()")}} - : 指定したタグ名およびネームスペース URI で、新しい要素を生成します。 -- {{DOMxRef("Document.createEntityReference()")}} {{Deprecated_Inline}} - - : 新しい実体参照オブジェクトを生成して、返します。 - {{DOMxRef("Document.createEvent()")}} - : イベントオブジェクトを生成します。 - {{DOMxRef("Document.createNodeIterator()")}} @@ -241,11 +235,9 @@ _このインターフェイスは、{{DOMxRef("Node")}} インターフェイ - {{DOMxRef("Document.getSelection()")}} - : ユーザーが現在選択しているテキスト範囲、または現在のキャレットの位置を表す {{DOMxRef('Selection')}} オブジェクトを返します。 - {{DOMxRef("Document.hasStorageAccess()")}} - - : 文書が自分自身 (first-party) のストレージにアクセスしたかどうかを示す論理値で解決する {{jsxref("Promise")}} を返します。 + - : 文書に分離されていないクッキーへのアクセスがあるかどうかを示す論理値で解決する {{jsxref("Promise")}} を返します。 - {{DOMxRef("Document.importNode()")}} - : 外部文書のノードの複製を返します。 -- {{DOMxRef("Document.normalizeDocument()")}} {{Deprecated_Inline}} - - : エンティティの置換や、テキストノードの正規化などを行います。 - {{DOMxRef("Document.prepend()")}} - : 文書の最初の子の前に、 {{domxref("Node")}} オブジェクトまたは文字列の集合を挿入します。 - {{DOMxRef("Document.querySelector()")}} @@ -259,7 +251,9 @@ _このインターフェイスは、{{DOMxRef("Node")}} インターフェイ - {{DOMxRef("Document.replaceChildren()")}} - : 文書の既存の子を、指定された新しい子の集合で置き換えます。 - {{DOMxRef("Document.requestStorageAccess()")}} - - : 自分自身 (first-party) のストレージへのアクセスが許可された場合は解決し、拒否された場合は拒否されるプロミス ({{jsxref("Promise")}}) を返します。 + - : サードパーティのコンテキスト（すなわち、 {{htmlelement("iframe")}} に埋め込まれたもの）に読み込まれた文書が、分離されていないクッキーへのアクセスを要求できるようにします。これはユーザーエージェントが既定で、プライバシーを改善するためにサードパーティコンテキストで読み込まれたサイトによる分離されていないクッキーへのアクセスをブロックしている場合に使用します。 +- {{domxref("Document.startViewTransition()")}} {{Experimental_Inline}} + - : 新しい{{domxref("View Transitions API", "ビュートランジション", "", "nocode")}}を開始し、それを表すための {{domxref("ViewTransition")}} オブジェクトを返します。 - {{DOMxRef("Document.mozSetImageElement()")}} {{Non-standard_Inline}} - : 指定した ID を持つ要素の背景画像として使用する要素を変更できます。 @@ -277,7 +271,7 @@ _このインターフェイスは、{{DOMxRef("Node")}} インターフェイ HTML 文書用の `Document` インターフェイスは {{DOMxRef("HTMLDocument")}} インターフェイスから継承または拡張されています。 - {{DOMxRef("Document.clear()")}} {{Deprecated_Inline}} - - : 最近の Firefox や Internet Explorer を含む大部分の現行ブラウザーは、何も行いません。 + - : このメソッドは何もしません。 - {{DOMxRef("Document.close()")}} - : 書き込み用の文書ストリームを閉じます。 - {{DOMxRef("Document.execCommand()")}} {{Deprecated_Inline}} @@ -318,7 +312,7 @@ HTML 文書用の `Document` インターフェイスは {{DOMxRef("HTMLDocument - {{DOMxRef("Document/visibilitychange_event", "visibilitychange")}} - : タブの内容の表示・非表示の状態が切り替わった時に発行されます。 - {{DOMxRef("Document/wheel_event","wheel")}} - - : ユーザーがポインティングデバイス (通常はマウス) のホイールボタンを回転した時に発行されます。 + - : ユーザーがポインティングデバイス（通常はマウス）のホイールボタンを回転させた時に発行されます。 ### アニメーションイベント @@ -401,7 +395,7 @@ HTML 文書用の `Document` インターフェイスは {{DOMxRef("HTMLDocument - {{DOMxRef("Document/pointermove_event", "pointermove")}} - : ポインターの座標が変化したときに発行されます。 - {{DOMxRef("Document/pointerout_event", "pointerout")}} - - : ポインターが (訳あって) 要素の _ヒットテスト_ 境界の外へ移動したときに発行されます。 + - : ポインターが（訳あって）要素の _ヒットテスト_ 境界の外へ移動したときに発行されます。 - {{DOMxRef("Document/pointerover_event", "pointerover")}} - : ポインターが要素のヒットテスト境界の中へ移動したときに発行されます。 - {{DOMxRef("Document/pointerup_event", "pointerup")}} @@ -426,13 +420,13 @@ HTML 文書用の `Document` インターフェイスは {{DOMxRef("HTMLDocument ### トランジションイベント - {{DOMxRef("Document/transitioncancel_event", "transitioncancel")}} - - : [CSS トランジション](/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)がキャンセルされたときに発行されます。 + - : [CSS トランジション](/ja/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)がキャンセルされたときに発行されます。 - {{DOMxRef("Document/transitionend_event", "transitionend")}} - - : [CSS トランジション](/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)が完了したときに発行されます。 + - : [CSS トランジション](/ja/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)が完了したときに発行されます。 - {{DOMxRef("Document/transitionrun_event", "transitionrun")}} - - : [CSS トランジション](/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)が初めて作成されたときに発行されます。 + - : [CSS トランジション](/ja/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)が初めて作成されたときに発行されます。 - {{DOMxRef("Document/transitionstart_event", "transitionstart")}} - - : [CSS トランジション](/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)が実際に開始されたときに発行されます。 + - : [CSS トランジション](/ja/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)が実際に開始されたときに発行されます。 ## 仕様書 diff --git a/files/ja/web/api/document/readystate/index.md b/files/ja/web/api/document/readystate/index.md index 1ca99537cf9c2c..95b27bef9fafd8 100644 --- a/files/ja/web/api/document/readystate/index.md +++ b/files/ja/web/api/document/readystate/index.md @@ -1,6 +1,9 @@ --- -title: Document.readyState +title: "Document: readyState プロパティ" +short-title: readyState slug: Web/API/Document/readyState +l10n: + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc --- {{APIRef("DOM")}} @@ -16,7 +19,7 @@ slug: Web/API/Document/readyState - `loading` - : この文書 ({{domxref("document")}}) はまだ読み込み中です。 - `interactive` - - : 文書の読み込みが完了し、文書の解釈はできたが、スクリプト、画像、スタイルシート、フレームなどのサブリソースはまだ読み込み中である。 + - : 文書の読み込みが完了し、文書の解釈はできたが、スクリプト、画像、スタイルシート、フレームなどのサブリソースはまだ読み込み中である。この状態は、 {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}} イベントが発行されようとしていることを示します。 - `complete` - : 文書とすべてのサブリソースの読み込みが完了しました。この状態は {{domxref("Window/load_event", "load")}} イベントが発行されようとしていることを示しています。 @@ -29,13 +32,14 @@ switch (document.readyState) { case "loading": // この文書はまだ読み込み中。 break; - case "interactive": + case "interactive": { // この文書は読み込みが終了した。 DOM 要素にアクセスできるようになった。 // しかし、画像、スタイルシート、フレームなどの副リソースはまだ読み込み中。 const span = document.createElement("span"); span.textContent = "A <span> element."; document.body.appendChild(span); break; + } case "complete": // ページが完全に読み込み完了。 console.log( @@ -49,7 +53,7 @@ switch (document.readyState) { ```js // DOMContentLoaded イベントの代替 -document.onreadystatechange = function () { +document.onreadystatechange = () => { if (document.readyState === "interactive") { initApplication(); } @@ -59,8 +63,8 @@ document.onreadystatechange = function () { ### readystatechange を load イベントの代替とする ```js -// load イベントの代替 -document.onreadystatechange = function () { +// Alternative to load event +document.onreadystatechange = () => { if (document.readyState === "complete") { initApplication(); } @@ -89,6 +93,7 @@ document.addEventListener("readystatechange", (event) => { ## 関連情報 -- {{domxref("Document/readystatechange_event", "readystatechange")}} イベント -- {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}} イベント -- {{domxref("Window/load_event", "load")}} イベント +- 関連イベント: + - {{domxref("Document/readystatechange_event", "readystatechange")}} イベント + - {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}} イベント + - {{domxref("Window/load_event", "load")}} イベント diff --git a/files/ja/web/api/fullscreen_api/guide/index.md b/files/ja/web/api/fullscreen_api/guide/index.md index 3c5fe25f7b50df..1d8b7e488a1715 100644 --- a/files/ja/web/api/fullscreen_api/guide/index.md +++ b/files/ja/web/api/fullscreen_api/guide/index.md @@ -1,6 +1,8 @@ --- title: 全画面 API のガイド slug: Web/API/Fullscreen_API/Guide +l10n: + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc --- {{DefaultAPISidebar("Fullscreen API")}} @@ -67,6 +69,10 @@ if (elem.requestFullscreen) { - {{DOMxRef("Document.fullscreenEnabled")}} - : `fullscreenEnabled` プロパティは、現在文書内の全画面モードがリクエストされる状態であるかどうかを指示します。 +### モバイルブラウザーのビューポートの拡大縮小 + +モバイルブラウザーによっては、全画面モードのときにビューポートメタタグの設定を無視し、ユーザーによる拡大縮小をブロックするものがあります。例えば、全画面モードでないときにピンチ操作で拡大縮小することができたとしても、全画面モードで表示されたページではピンチ操作で拡大縮小するジェスチャーが動作しないことがあります。 + ## ユーザーが知りたいこと ユーザーには、<kbd>Esc</kbd> キー（または <kbd>F11</kbd>）を押して全画面モードを終了できることを必ず伝えておくとよいでしょう。 @@ -109,9 +115,9 @@ function toggleFullScreen() { } ``` -これは {{DOMxRef("document")}} の `fullscreenElement` 属性の値を調べることから始まります（`moz`, `ms`, `webkit` のいずれかを接頭辞に持つものをチェックします）。もし `null` ならば、文書内のモードは現在ウィンドウモードなので、フルスクリーンモードに切り替える必要があります。全画面モードへの切り替えは {{DOMxRef("element.requestFullscreen()")}} を呼び出すことで行われます。 +これは {{DOMxRef("document")}} の `fullscreenElement` 属性の値を調べることから始まります。もし `null` ならば、文書内のモードは現在ウィンドウモードなので、全画面モードに切り替える必要があります。全画面モードへの切り替えは {{DOMxRef("element.requestFullscreen()")}} を呼び出すことで行われます。 -もし既に全画面モードが有効な場合（`fullscreenElement` が non`null`）、 {{DOMxRef("document.exitFullscreen()")}} を呼び出すことになります。 +もし既に全画面モードが有効な場合（`fullscreenElement` が `null` でない場合）、 {{DOMxRef("document.exitFullscreen()")}} を呼び出すことになります。 ## 接頭辞 diff --git a/files/ja/web/api/fullscreen_api/index.md b/files/ja/web/api/fullscreen_api/index.md index 03f64f2efbddb7..699148e04679f9 100644 --- a/files/ja/web/api/fullscreen_api/index.md +++ b/files/ja/web/api/fullscreen_api/index.md @@ -2,7 +2,7 @@ title: 全画面 API slug: Web/API/Fullscreen_API l10n: - sourceCommit: 5f80944f03f785c729c12ac143cf88a1c12e72cd + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc --- {{DefaultAPISidebar("Fullscreen API")}} @@ -59,9 +59,7 @@ _全画面 API は 2 つのイベントを定義しており、全画面モー ## アクセス制御 -全画面モードが利用可能であるかは、[機能ポリシー](/ja/docs/Web/HTTP/Feature_Policy)を使用して制御することができます。全画面モードの機能は `"fullscreen"` の文字列によって識別され、既定の許可リストの値は `"self"` であり、最上位の文書コンテキストでは全画面モードが許可されており、最上位文書と同じオリジンから読み込まれた内側の閲覧コンテキストも同様です。 - -機能ポリシーを使用して API へのアクセスを制御することについて、詳しくは[機能ポリシーの使用](/ja/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy)を参照してください。 +全画面モードが利用可能であるかは、[権限ポリシー](/ja/docs/Web/HTTP/Permissions_Policy)を使用して制御することができます。全画面モードの機能は `"fullscreen"` の文字列によって識別され、既定の許可リストの値は `"self"` であり、最上位の文書コンテキストでは全画面モードが許可されており、最上位文書と同じオリジンから読み込まれた内側の閲覧コンテキストも同様です。 ## 使用上のメモ @@ -121,7 +119,6 @@ function toggleFullScreen() { ## 関連情報 -- [全画面モードの使用](/ja/docs/Web/API/Fullscreen_API) - {{DOMxRef("Element.requestFullscreen()")}} - {{DOMxRef("Document.exitFullscreen()")}} - {{DOMxRef("Document.fullscreen")}} diff --git a/files/ja/web/api/gpu/getpreferredcanvasformat/index.md b/files/ja/web/api/gpu/getpreferredcanvasformat/index.md new file mode 100644 index 00000000000000..eb1b80dad85bfe --- /dev/null +++ b/files/ja/web/api/gpu/getpreferredcanvasformat/index.md @@ -0,0 +1,55 @@ +--- +title: "GPU: getPreferredCanvasFormat() メソッド" +slug: Web/API/GPU/getPreferredCanvasFormat +l10n: + sourceCommit: b6984118ac9482e683a654edfefa4b426ca3c7ca +--- + +{{APIRef("WebGPU API")}}{{SeeCompatTable}} + +{{domxref("GPU")}} インターフェイスの **`getPreferredCanvasFormat()`** メソッドは、現在のシステムにおける 8 ビット深度で通常のダイナミックレンジのコンテンツを表示する用の最適なキャンバステクスチャーの形式を返します。 + +これは、{{domxref("GPUCanvasContext.configure()")}} を呼び出す際に `format` の値を現在のシステムで最適なものにするためによく用いられます。これは推奨される方法です。キャンバスコンテキストを設定する際に適した形式を用いないと、プラットフォームによっては、テクスチャーのコピーが増えるなどの追加のオーバーヘッドが発生する可能性があります。 + +## 構文 + +```js-nolint +getPreferredCanvasFormat() +``` + +### 引数 + +なし + +### 返値 + +キャンバステクスチャーの形式を表す文字列です。`rgba8unorm` および `bgra8unorm` を取りえます。 + +### 例外 + +なし + +## 例 + +```js +const canvas = document.querySelector("#gpuCanvas"); +const context = canvas.getContext("webgpu"); + +context.configure({ + device: device, + format: navigator.gpu.getPreferredCanvasFormat(), + alphaMode: "premultiplied", +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebGPU API](/ja/docs/Web/API/WebGPU_API) diff --git a/files/ja/web/api/gpu/index.md b/files/ja/web/api/gpu/index.md new file mode 100644 index 00000000000000..c41b8042b3a359 --- /dev/null +++ b/files/ja/web/api/gpu/index.md @@ -0,0 +1,72 @@ +--- +title: GPU +slug: Web/API/GPU +l10n: + sourceCommit: ced28062a310010c347dae055bd53760b10293ba +--- + +{{APIRef("WebGPU API")}}{{SeeCompatTable}} + +{{domxref("WebGPU API", "WebGPU API", "", "nocode")}} の **`GPU`** インターフェイスは、WebGPU を使用するためのスタート地点です。デバイスの要求、機能や制限の設定、などを行える {{domxref("GPUAdapter")}} を取得するのに使用できます。 + +現在のコンテキスト用の `GPU` オブジェクトには、{{domxref("Navigator.gpu")}} または {{domxref("WorkerNavigator.gpu")}} プロパティからアクセスできます。 + +{{InheritanceDiagram}} + +## インスタンスプロパティ + +- {{domxref("GPU.wgslLanguageFeatures", "wgslLanguageFeatures")}} {{Experimental_Inline}} {{ReadOnlyInline}} + - : この WebGPU の実装が対応している [WGSL 言語の拡張](https://gpuweb.github.io/gpuweb/wgsl/#language-extension)を報告する {{domxref("WGSLLanguageFeatures")}} オブジェクトです。 + +## インスタンスメソッド + +- {{domxref("GPU.requestAdapter", "requestAdapter()")}} {{Experimental_Inline}} + - : {{domxref("GPUAdapter")}} オブジェクトのインスタンスで解決する {{jsxref("Promise")}} を返します。これを用いて、WebGPU の機能を用いるための第一のインターフェイスである {{domxref("GPUDevice")}} を要求できます。 +- {{domxref("GPU.getPreferredCanvasFormat", "getPreferredCanvasFormat()")}} {{Experimental_Inline}} + - : 現在のシステムにおける、8 ビット深度で通常のダイナミックレンジのコンテンツを表示するために最適なキャンバステクスチャーの形式を返します。 + +## 例 + +### アダプターとデバイスを要求する + +```js +async function init() { + if (!navigator.gpu) { + throw Error("WebGPU に対応していません。"); + } + + const adapter = await navigator.gpu.requestAdapter(); + if (!adapter) { + throw Error("WebGPU アダプターを要求できませんでした。"); + } + + const device = await adapter.requestDevice(); + + //... +} +``` + +### GPUCanvasContext を最適なテクスチャー形式で設定する + +```js +const canvas = document.querySelector("#gpuCanvas"); +const context = canvas.getContext("webgpu"); + +context.configure({ + device: device, + format: navigator.gpu.getPreferredCanvasFormat(), + alphaMode: "premultiplied", +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebGPU API](/ja/docs/Web/API/WebGPU_API) diff --git a/files/ja/web/api/gpu/requestadapter/index.md b/files/ja/web/api/gpu/requestadapter/index.md new file mode 100644 index 00000000000000..56dcd07cc00fad --- /dev/null +++ b/files/ja/web/api/gpu/requestadapter/index.md @@ -0,0 +1,86 @@ +--- +title: "GPU: requestAdapter() メソッド" +slug: Web/API/GPU/requestAdapter +l10n: + sourceCommit: cf57e1e1e1756fec85425d01294ffeabc3b5b451 +--- + +{{APIRef("WebGPU API")}}{{SeeCompatTable}} + +{{domxref("GPU")}} インターフェイスの **`requestAdapter()`** メソッドは、{{domxref("GPUAdapter")}} オブジェクトのインスタンスで解決する {{jsxref("Promise")}} を返します。これを用いると、{{domxref("GPUDevice")}}、アダプターの情報、機能、制限を要求できます。 + +注意点として、ユーザーエージェントはアダプターを返すかどうかを選択します。返す場合は、渡されたオプションに沿って選択します。オプションが何も渡されなかった場合は、デバイスはデフォルトアダプターへのアクセスを提供し、これは通常ほとんどの目的に十分適します。 + +## 構文 + +```js-nolint +requestAdapter() +requestAdapter(options) +``` + +### 引数 + +- `options` {{optional_inline}} + + - : 以下のプロパティを持つオブジェクトです。 + + - `powerPreference` {{optional_inline}} + + - : システムで利用可能なアダプターからどのような種類のアダプターを選ぶべきかのヒントをユーザーエージェントに与える列挙値です。以下の値が利用できます。 + + - `undefined` (または指定なし): ヒントを与えません。 + - `"low-power"`: パフォーマンスより電力の節約を優先するヒントを与えます。アプリケーションがこの設定で十分動作するなら、ポータブルデバイスにおけるバッテリーの寿命をかなり伸ばすので、これを使用することを推奨します。これは通常オプションが指定されない場合のデフォルトです。 + - `"high-performance"`: 電力の消費よりパフォーマンスを優先するヒントを与えます。これはポータブルデバイスにおけるバッテリーの寿命をかなり縮めるので、どうしても必要な場合のみこの値を指定することを推奨します。さらに、システムは電力を節約するために消費電力が少ないアダプターに切り替えることがあるため、{{domxref("GPUDevice")}} のロスの発生率が上がる可能性があります。 + + このヒントの主な目的は、複数の GPU があるシステムにおける使用する GPU の選択に影響を与えることです。たとえば、ノートパソコンには低消費電力の統合された GPU と高パフォーマンスの独立した GPU があるものがあります。どのアダプターが返されるかは、バッテリーの状態、接続されたディスプレイ、取り外し可能な GPU などの異なる因子に影響を受ける可能性があります。 + + > **メモ:** デュアル GPU の macOS デバイスで実行されている Chrome では、`requestAdapter()` が `powerPreference` オプションなしで呼び出され、デバイスが AC 電源で動作している場合は、高パフォーマンスの独立した GPU が返されます。そうでない場合は、低消費電力の統合された GPU が返されます。 + +### フォールバックアダプター + +ユーザーエージェントがそれが利用可能な中で最適な選択肢だと判断した場合は、ユーザーエージェントにより提供されるアダプターは **フォールバックアダプター** である可能性があります。一般的に、フォールバックアダプターはかなりパフォーマンスが落ちるかわりに、より広い互換性、より予測可能な挙動、よりよいプライバシーのうちいくつかを持ちます。たとえば、フォールバックアダプターを通じて API のソフトウェアベースの実装を提供するブラウザーもあるかもしれません。フォールバックアダプターはすべてのシステムで利用可能ではないでしょう。 + +アプリケーションがフォールバックアダプターで動作するのを防ぎたい場合は、{{domxref("GPUDevice")}} を要求する前に {{domxref("GPUAdapter.isFallbackAdapter")}} 属性をチェックするべきです。 + +> **メモ:** 仕様書には `requestAdapter()` 用の `forceFallbackAdapter` オプションがあります。これは、`true` に設定するとユーザーエージェントに利用可能であれば必ずフォールバックアダプターを返させる論理値です。これに対応しているブラウザーはまだありません。 + +### 返値 + +要求に成功した場合は {{domxref("GPUAdapter")}} オブジェクトのインスタンスで解決する {{jsxref("Promise")}} です。 + +適切なアダプターが利用できない場合は、`requestAdapter()` は `null` で解決します。 + +### 例外 + +なし + +## 例 + +```js +async function init() { + if (!navigator.gpu) { + throw Error("WebGPU に対応していません。"); + } + + const adapter = await navigator.gpu.requestAdapter(); + if (!adapter) { + throw Error("WebGPU アダプターを要求できませんでした。"); + } + + const device = await adapter.requestDevice(); + + //... +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebGPU API](/ja/docs/Web/API/WebGPU_API) diff --git a/files/ja/web/api/gpu/wgsllanguagefeatures/index.md b/files/ja/web/api/gpu/wgsllanguagefeatures/index.md new file mode 100644 index 00000000000000..1048290be4a912 --- /dev/null +++ b/files/ja/web/api/gpu/wgsllanguagefeatures/index.md @@ -0,0 +1,49 @@ +--- +title: "GPU: wgslLanguageFeatures プロパティ" +slug: Web/API/GPU/wgslLanguageFeatures +l10n: + sourceCommit: cf57e1e1e1756fec85425d01294ffeabc3b5b451 +--- + +{{APIRef("WebGPU API")}}{{SeeCompatTable}} + +{{domxref("GPU")}} インターフェイスの読み取り専用プロパティ **`wgslLanguageFeatures`** は、この WebGPU の実装が対応している [WGSL 言語の拡張](https://gpuweb.github.io/gpuweb/wgsl/#language-extension)を報告する {{domxref("WGSLLanguageFeatures")}} オブジェクトを返します。 + +> **メモ:** API に対応しているすべてのブラウザーの WebGPU ですべての WGSL 言語の拡張が利用可能なわけではありません。使用することを決めたすべての拡張を徹底的にテストすることを推奨します。 + +## 値 + +{{domxref("WGSLLanguageFeatures")}} オブジェクトのインスタンスです。これは [Set 風](/ja/docs/Web/JavaScript/Reference/Global_Objects/Set)オブジェクトです。 + +## 例 + +```js +if (!navigator.gpu) { + throw Error("WebGPU に対応していません。"); +} + +const wgslFeatures = navigator.gpu.wgslLanguageFeatures; + +// 集合のサイズを返す +console.log(wgslFeatures.size); + +// values() を用いて集合の要素すべてを走査する +const valueIterator = wgslFeatures.values(); +for (const value of valueIterator) { + console.log(value); +} + +// ... +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebGPU API](/ja/docs/Web/API/WebGPU_API) diff --git a/files/ja/web/api/gpusupportedfeatures/index.md b/files/ja/web/api/gpusupportedfeatures/index.md new file mode 100644 index 00000000000000..e5f73282bc04b8 --- /dev/null +++ b/files/ja/web/api/gpusupportedfeatures/index.md @@ -0,0 +1,107 @@ +--- +title: GPUSupportedFeatures +slug: Web/API/GPUSupportedFeatures +l10n: + sourceCommit: e18aa8e600733ebc25443075c563fd56361dfe98 +--- + +{{APIRef("WebGPU API")}}{{SeeCompatTable}} + +{{domxref("WebGPU API", "WebGPU API", "", "nocode")}} の **`GPUSupportedFeatures`** インターフェイスは、{{domxref("GPUAdapter")}} が対応している追加機能を表現する [`Set` 風オブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Set#set_風のブラウザー_api)です。 + +現在のアダプター用の `GPUSupportedFeatures` オブジェクトは、{{domxref("GPUAdapter.features")}} 経由で参照できます。 + +下層のハードウェアで対応していても、対応するすべてのブラウザーの WebGPU ですべての機能が利用できるわけではないことに注意するべきです。これは、たとえば以下の場合など、下層のシステム、ブラウザー、アダプターの制限によるものである可能性があります。 + +- 下層のシステムが、あるブラウザーと互換性がある方式で機能を利用可能にする保証ができないかもしれません。 +- ブラウザーのベンダーがある機能への対応を実装するセキュアな方法をまだ見つけていないか、単にまだ実装に手が回っていないかもしれません。 + +WebGPU アプリケーションにおいて特定の追加機能の恩恵を受けたい場合は、徹底的にテストを行うことを推奨します。 + +{{InheritanceDiagram}} + +## 利用可能な機能 + +実装や物理デバイスによって異なる可能性があり、時間の経過によっても変わる可能性があるので、ここでは WebGPU で使用可能な追加機能の完全な集合を列挙していませんリストは、仕様書内の [Feature Index](https://gpuweb.github.io/gpuweb/#feature-index) を参照してください。 + +## インスタンスプロパティ + +以下のプロパティは、すべての読み取り専用の [`Set` 風オブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Set#set_風のブラウザー_api)で使用可能です。(以下のリンクはグローバルオブジェクト {{jsxref("Set")}} のリファレンスページです) + +- {{jsxref("Set.prototype.size", "size")}} {{Experimental_Inline}} + - : 集合に含まれる値の数を返します。 + +## インスタンスメソッド + +以下のメソッドは、すべての読み取り専用の [`Set` 風オブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Set#set_風のブラウザー_api)で使用可能です。(以下のリンクはグローバルオブジェクト {{jsxref("Set")}} のリファレンスページです) + +- {{jsxref("Set.prototype.has()", "has()")}} {{Experimental_Inline}} + - : 指定の値の要素が集合に含まれるか否かを表す論理値を返します。 +- {{jsxref("Set.prototype.values()", "values()")}} {{Experimental_Inline}} + - : 集合内の各要素の **値** を挿入した順に出力する新しいイテレーターオブジェクトを返します。 +- {{jsxref("Set.prototype.keys()", "keys()")}} {{Experimental_Inline}} + - : {{jsxref("Set.prototype.values()", "values()")}} の別名です。 +- {{jsxref("Set.prototype.entries()", "entries()")}} {{Experimental_Inline}} + - : 集合内の各要素に対応する **配列 `[value, value]`** が挿入した順に含まれる新しいイテレーターオブジェクトを返します。 +- {{jsxref("Set.prototype.forEach()", "forEach()")}} {{Experimental_Inline}} + - : 集合内の各要素について挿入した順に指定のコールバック関数を 1 度ずつ呼び出します。 + +## 例 + +```js +async function init() { + if (!navigator.gpu) { + throw Error("WebGPU に対応していません。"); + } + + const adapter = await navigator.gpu.requestAdapter(); + if (!adapter) { + throw Error("WebGPU のアダプターを要求できませんでした。"); + } + + const adapterFeatures = adapter.features; + + // 集合のサイズを返す + console.log(adapterFeatures.size); + + // アダプターがある機能に対応しているかどうかをチェックする + console.log(adapterFeatures.has("texture-compression-astc")); + + // values() を用いて集合のすべての値を走査する + const valueIterator = adapterFeatures.values(); + for (const value of valueIterator) { + console.log(value); + } + + // keys() を用いて集合のすべての値を走査する + const keyIterator = adapterFeatures.keys(); + for (const value of keyIterator) { + console.log(value); + } + + // entries() を用いて集合のすべての値を走査する + const entryIterator = adapterFeatures.entries(); + for (const entry of entryIterator) { + console.log(entry[0]); + } + + // forEach() を用いて集合のすべての値を走査する + adapterFeatures.forEach((value) => { + console.log(value); + }); + + //... +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebGPU API](/ja/docs/Web/API/WebGPU_API) diff --git a/files/ja/web/api/gpusupportedlimits/index.md b/files/ja/web/api/gpusupportedlimits/index.md new file mode 100644 index 00000000000000..44b5fe7c3bac97 --- /dev/null +++ b/files/ja/web/api/gpusupportedlimits/index.md @@ -0,0 +1,99 @@ +--- +title: GPUSupportedLimits +slug: Web/API/GPUSupportedLimits +l10n: + sourceCommit: 840132f789c57681781d874734edd33da9d5ab90 +--- + +{{APIRef("WebGPU API")}}{{SeeCompatTable}} + +{{domxref("WebGPU API", "WebGPU API", "", "nocode")}} の **`GPUSupportedLimits`** インターフェイスは、{{domxref("GPUAdapter")}} が対応している制限を表現します。 + +現在のアダプター用の `GPUSupportedLimits` オブジェクトは、{{domxref("GPUAdapter.limits")}} プロパティ経由で参照できます。 + +ブラウザーは、ドライブバイフィンガープリンティングで利用可能な一意な情報を減らすため、それぞれの GPU の正確な制限を報告せず、それぞれの制限によって異なる段階的な値を報告する可能性が高いです。たとえば、ある制限用の段階は 2048、8192、32768 である可能性があります。GPU の実際の制限が 16384 である場合は、ブラウザーは 8192 を報告します。 + +異なるブラウザーは異なる扱いをする可能性があり、段階の値は時間の経過で変わる可能性があるため、制限の正確な値を予測するのは難しいです。徹底的にテストを行うことを推奨します。 + +{{InheritanceDiagram}} + +## インスタンスプロパティ + +`GPUSupportedLimits` オブジェクトのプロパティでは以下の制限が表現されます。これらの制限が何と関係するかの詳細な説明は、仕様書の [Limits](https://gpuweb.github.io/gpuweb/#limits) 節を参照してください。 + +| 制限名 | デフォルト値 | +| ------------------------------------------- | ------------------------ | +| `maxTextureDimension1D` | 8192 | +| `maxTextureDimension2D` | 8192 | +| `maxTextureDimension3D` | 2048 | +| `maxTextureArrayLayers` | 256 | +| `maxBindGroups` | 4 | +| `maxBindingsPerBindGroup` | 640 | +| `maxDynamicUniformBuffersPerPipelineLayout` | 8 | +| `maxDynamicStorageBuffersPerPipelineLayout` | 4 | +| `maxSampledTexturesPerShaderStage` | 16 | +| `maxSamplersPerShaderStage` | 16 | +| `maxStorageBuffersPerShaderStage` | 8 | +| `maxStorageTexturesPerShaderStage` | 4 | +| `maxUniformBuffersPerShaderStage` | 12 | +| `maxUniformBufferBindingSize` | 65536 bytes | +| `maxStorageBufferBindingSize` | 134217728 bytes (128 MB) | +| `minUniformBufferOffsetAlignment` | 256 bytes | +| `minStorageBufferOffsetAlignment` | 256 bytes | +| `maxVertexBuffers` | 8 | +| `maxBufferSize` | 268435456 bytes (256 MB) | +| `maxVertexAttributes` | 16 | +| `maxVertexBufferArrayStride` | 2048 bytes | +| `maxInterStageShaderComponents` | 60 | +| `maxInterStageShaderVariables` | 16 | +| `maxColorAttachments` | 8 | +| `maxColorAttachmentBytesPerSample` | 32 | +| `maxComputeWorkgroupStorageSize` | 16384 bytes | +| `maxComputeInvocationsPerWorkgroup` | 256 | +| `maxComputeWorkgroupSizeX` | 256 | +| `maxComputeWorkgroupSizeY` | 256 | +| `maxComputeWorkgroupSizeZ` | 64 | +| `maxComputeWorkgroupsPerDimension` | 65535 | + +## 例 + +以下のコードでは、`GPUAdapter.limits` の `maxBindGroups` の値を問い合わせ、6 以上かどうかをチェックします。理論上のサンプルアプリケーションは理想的には 6 個のバインドグループを必要とするので、返された値が 6 以上の場合は、`requiredLimits` オブジェクトに上限値 6 を追加適用します。そして、{{domxref("GPUAdapter.requestDevice()")}} を用いてこの制限の要件を満たすデバイスを要求します。 + +```js +async function init() { + if (!navigator.gpu) { + throw Error("WebGPU に対応していません。"); + } + + const adapter = await navigator.gpu.requestAdapter(); + if (!adapter) { + throw Error("WebGPU のアダプターを要求できませんでした。"); + } + + const requiredLimits = {}; + + // アプリケーションは理想的には 6 個のバインドグループが必要なので、 + // アプリケーションで必要な分の要求を試みる + if (adapter.limits.maxBindGroups >= 6) { + requiredLimits.maxBindGroups = 6; + } + + const device = await adapter.requestDevice({ + requiredLimits, + }); + + // ... +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebGPU API](/ja/docs/Web/API/WebGPU_API) diff --git a/files/ja/web/api/htmlimageelement/decode/index.md b/files/ja/web/api/htmlimageelement/decode/index.md index 758e7ae252cdae..ed39927b06e7fd 100644 --- a/files/ja/web/api/htmlimageelement/decode/index.md +++ b/files/ja/web/api/htmlimageelement/decode/index.md @@ -2,6 +2,8 @@ title: "HTMLImageElement: decode() メソッド" short-title: decode() slug: Web/API/HTMLImageElement/decode +l10n: + sourceCommit: 387d0d4d8690c0d2c9db1b85eae28ffea0f3ac1f --- {{APIRef("HTML DOM")}} @@ -12,8 +14,8 @@ slug: Web/API/HTMLImageElement/decode ## 構文 -```js -decode(); +```js-nolint +decode() ``` ### 引数 @@ -35,7 +37,7 @@ decode(); ## 例 -次の例では、`decode()` メソッドを使って、画像が DOM に追加されるタイミングを制御する方法を示しています。{{jsxref('Promise')}} を返すメソッドがなければ、 {{domxref("Window/load_event", "load")}} イベントのハンドラーで、 {{domxref("HTMLImageElement.load_event", "img.onload")}} イベントハンドラーを使うなどして画像を DOM に追加します。エラーは {{domxref("HTMLElement/error_event", "error")}} イベントのハンドラーで処理します。 +次の例では、 `decode()` メソッドを使って、画像が DOM に追加されるタイミングを制御しています。 {{jsxref('Promise')}} を返すメソッドがなければ、 {{domxref("Window/load_event", "load")}} イベントハンドラーで画像を DOM に追加し、 {{domxref("HTMLImageElement.load_event", "img.onload")}} イベントのハンドラでエラーを処理するなどの方法で、画像を追加することになります。 ```js const img = new Image(); diff --git a/files/ja/web/api/index.md b/files/ja/web/api/index.md index 49bcb7e5be078e..f55d4fa41f24cc 100644 --- a/files/ja/web/api/index.md +++ b/files/ja/web/api/index.md @@ -1,9 +1,11 @@ --- title: Web API slug: Web/API +l10n: + sourceCommit: 387d0d4d8690c0d2c9db1b85eae28ffea0f3ac1f --- -ウェブのコードを書く時は、数多くの Web API が利用できます。以下に、ウェブアプリやサイトを開発する際に利用することができる可能性があるすべてのインターフェイス (オブジェクト型) のリストを挙げます。 +ウェブのコードを書く時は、数多くの Web API が利用できます。以下に、ウェブアプリやサイトを開発する際に利用することができる可能性があるすべてのインターフェイス（オブジェクト型）のリストを挙げます。 Web API は通常 JavaScript とともに使用されますが、常にそうとは限りません。 diff --git a/files/ja/web/api/mouseevent/button/index.md b/files/ja/web/api/mouseevent/button/index.md index 92c61b6d3ff378..0e9d4ba480656f 100644 --- a/files/ja/web/api/mouseevent/button/index.md +++ b/files/ja/web/api/mouseevent/button/index.md @@ -45,18 +45,18 @@ l10n: ### JavaScript ```js -let button = document.querySelector('#button'); -button.addEventListener('mouseup', (e) => { - let log = document.querySelector('#log'); +let button = document.querySelector("#button"); +button.addEventListener("mouseup", (e) => { + let log = document.querySelector("#log"); switch (e.button) { case 0: - log.textContent = '左ボタンがクリックされました。'; + log.textContent = "左ボタンがクリックされました。"; break; case 1: - log.textContent = '中央ボタンがクリックされました。'; + log.textContent = "中央ボタンがクリックされました。"; break; case 2: - log.textContent = '右ボタンがクリックされました。'; + log.textContent = "右ボタンがクリックされました。"; break; default: log.textContent = `不明なボタンコード: ${e.button}`; diff --git a/files/ja/web/api/navigator/ink/index.md b/files/ja/web/api/navigator/ink/index.md index 544d33f898bd65..ca98313e703b95 100644 --- a/files/ja/web/api/navigator/ink/index.md +++ b/files/ja/web/api/navigator/ink/index.md @@ -8,7 +8,7 @@ l10n: {{SeeCompatTable}}{{APIRef("Ink API")}} -**`ink`** は {{domxref("Navigator")}} インターフェイスの読み取り専用プロパティで、現在の文書の {{domxref("Ink")}} オブジェクトを取得します。これは[インク API](/en-US/docs/Web/API/Ink_API) の機能へのアクセスを提供します。 +**`ink`** は {{domxref("Navigator")}} インターフェイスの読み取り専用プロパティで、現在の文書の {{domxref("Ink")}} オブジェクトを取得します。これは[インク API](/ja/docs/Web/API/Ink_API) の機能へのアクセスを提供します。 ## 値 diff --git a/files/ja/web/api/response/body/index.md b/files/ja/web/api/response/body/index.md index 67ec764b9fad63..e9e5ac1aa95cb1 100644 --- a/files/ja/web/api/response/body/index.md +++ b/files/ja/web/api/response/body/index.md @@ -12,7 +12,7 @@ l10n: ## 値 -{{domxref("ReadableStream")}}、または `Response` オブジェクトが[構築](/ja/docs/Web/API/Response/Response)時に [`body`](/ja/docs/Web/API/Response/Response#body) プロパティが null であった場合、あるいは [HTTP レスポンス](/ja/docs/Web/HTTP/Messages#http_responses)に[本体](/ja/docs/Web/HTTP/Messages#body_2)がなかった場合には [`null`](/ja/docs/Web/JavaScript/Reference/Operators/null) になります。 +{{domxref("ReadableStream")}}、または `Response` オブジェクトが[構築](/ja/docs/Web/API/Response/Response)時に [`body`](/ja/docs/Web/API/Response/Response#body) プロパティが null であった場合、あるいは [HTTP レスポンス](/ja/docs/Web/HTTP/Messages#http_レスポンス)に[本体](/ja/docs/Web/HTTP/Messages#本体_2)がなかった場合には [`null`](/ja/docs/Web/JavaScript/Reference/Operators/null) になります。 ストリームは[読み取り可能なバイトストリーム](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)で、 {{domxref("ReadableStreamBYOBReader")}} を用いたゼロコピー移譲に対応しています。 diff --git a/files/ja/web/api/shadowroot/activeelement/index.md b/files/ja/web/api/shadowroot/activeelement/index.md index 771cf9a5a9d9df..8d8800fb0bbb9a 100644 --- a/files/ja/web/api/shadowroot/activeelement/index.md +++ b/files/ja/web/api/shadowroot/activeelement/index.md @@ -1,19 +1,16 @@ --- -title: ShadowRoot.activeElement +title: "ShadowRoot: activeElement プロパティ" +short-title: activeElement slug: Web/API/ShadowRoot/activeElement +l10n: + sourceCommit: f2f9346c0c0e9f6676f2df9f1850933e274401de --- {{APIRef("Shadow DOM")}} **`activeElement`** は {{domxref("ShadowRoot")}} インターフェイスの読み取り専用プロパティで、シャドウツリー内でフォーカスを持っている要素を返します。 -## 構文 - -```js -shadowRoot.activeElement; -``` - -### 値 +## 値 現在フォーカスを持っている {{domxref('Element')}}、またはフォーカスを持っている要素がなければ `null` です。 diff --git a/files/ja/web/api/shadowroot/index.md b/files/ja/web/api/shadowroot/index.md index 4d3420ae2756a8..2fc6c99642de53 100644 --- a/files/ja/web/api/shadowroot/index.md +++ b/files/ja/web/api/shadowroot/index.md @@ -1,55 +1,65 @@ --- title: ShadowRoot slug: Web/API/ShadowRoot +l10n: + sourceCommit: 9091d8b54a600e5b751c97b1e47261324ef475d8 --- {{APIRef('Shadow DOM')}} -**`ShadowRoot`** は Shadow DOM API のインターフェイスで、文書の DOM ツリーから分離してレンダリングされた部分ツリーのルートノードを指します。 +**`ShadowRoot`** はシャドウ DOM API のインターフェイスで、文書の DOM ツリーから分離してレンダリングされた部分ツリーのルートノードを指します。 要素のシャドウルートへの参照は {{domxref("Element.shadowRoot")}} プロパティで受け取ることができます。これは {{domxref("Element.attachShadow()")}} で `mode` オプションが `open` に設定されて作成されたときに提供されます。 -## プロパティ +{{InheritanceDiagram}} -- {{domxref("ShadowRoot.activeElement")}} {{readonlyInline}} +## インスタンスプロパティ + +- {{domxref("ShadowRoot.activeElement")}} {{ReadOnlyInline}} - : フォーカスを持っているシャドウツリー内の {{domxref('Element')}} を返します。 -- {{domxref("ShadowRoot.delegatesFocus")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}} - - : シャドウが取り付けられたときに `delegatesFocus` が設定されていたかどうかを示す論理値を返します ({{domxref("Element.attachShadow()")}} を参照)。 +- {{domxref("ShadowRoot.adoptedStyleSheets")}} + - : シャドウ DOM のサブツリーで使用するために構築されたスタイルシートの配列を追加します。 + これらは、同じ親 {{domxref("Document")}} ノードを共有する他の DOM サブツリーや、文書自身と共有されることがあります。 +- {{domxref("ShadowRoot.delegatesFocus")}} {{ReadOnlyInline}} + - : シャドウが取り付けられたときに `delegatesFocus` が設定されていたかどうかを示す論理値を返します（{{domxref("Element.attachShadow()")}} を参照）。 - {{DOMxRef("ShadowRoot.fullscreenElement")}} {{ReadOnlyInline}} - : このシャドウツリーで現在全画面モードになっている要素です。 -- {{domxref("ShadowRoot.host")}} {{readonlyinline}} +- {{domxref("ShadowRoot.host")}} {{ReadOnlyInline}} - : `ShadowRoot` が取り付けられた DOM 要素への参照を返します。 -- {{domxref("ShadowRoot.innerHTML")}} {{non-standard_inline}} +- {{domxref("ShadowRoot.innerHTML")}} - : `ShadowRoot` の内部の DOM ツリーへの参照を設定したり返却したりします。 -- {{domxref("ShadowRoot.mode")}} {{readonlyinline}} - - : `ShadowRoot` のモードで `open` または `closed` の値を取ります。これはシャドウルートの内部の機能に JavaScript からアクセスできるかどうかを定義します。 +- {{domxref("ShadowRoot.mode")}} {{ReadOnlyInline}} + - : `ShadowRoot` のモードで `open` または `closed` の値を取ります。 + これはシャドウルートの内部の機能に JavaScript からアクセスできるかどうかを定義します。 - {{DOMxRef("ShadowRoot.pictureInPictureElement")}} {{ReadOnlyInline}} - : シャドウツリー内で現在ピクチャインピクチャモードで表示されている {{DOMxRef('Element')}} を返します。 - {{DOMxRef("ShadowRoot.pointerLockElement")}} {{ReadOnlyInline}} - : ポインターがロックされている間、マウスイベントのターゲットとして設定されている {{DOMxRef('Element')}} を返します。 ロックが保留中か、ポインターがロックされていないか、ターゲットがほかのツリーにある場合は `null` を返します。 -- {{domxref("ShadowRoot.styleSheets")}} {{readonlyInline}} +- {{domxref("ShadowRoot.styleSheets")}} {{ReadOnlyInline}} - : シャドウツリーに明示的にリンクされている、または埋め込まれている {{domxref('CSSStyleSheet')}} オブジェクトの {{domxref('StyleSheetList')}} を返します。 -### イベントハンドラー - -- {{domxref("ShadowRoot.onslotchange")}} - - : [イベントハンドラー](/ja/docs/Web/Events/Event_handlers)で、 {{domxref("HTMLSlotElement/slotchange_event", "slotchange")}} イベントが発行されたときに呼び出されるコードを表します。 - -## メソッド +## インスタンスメソッド - {{DOMxRef("ShadowRoot.getAnimations()")}} - : 現在有効なすべての {{DOMxRef("Animation")}} オブジェクトのうち、ターゲット要素がシャドウツリーの子孫であるものの配列を返します。 -- {{domxref("ShadowRoot.getSelection()")}} +- {{domxref("ShadowRoot.getSelection()")}} {{Non-standard_Inline}} - : ユーザーによって選択されたテキストの範囲または現在のキャレットの位置を表現する {{domxref('Selection')}} オブジェクトを返します。 -- {{domxref("ShadowRoot.elementFromPoint()")}} +- {{domxref("ShadowRoot.elementFromPoint()")}} {{Non-standard_Inline}} - : 指定された座標における最上位の要素を返します。 -- {{domxref("ShadowRoot.elementsFromPoint()")}} +- {{domxref("ShadowRoot.elementsFromPoint()")}} {{Non-standard_Inline}} - : 指定された座標における全要素からなる配列を返します。 +## イベント + +以下のイベントは {{domxref("HTMLSlotElement")}} からのイベントバブリングによって `ShadowRoot` で利用できます。 + +- `HTMLSlotElement` {{domxref("HTMLSlotElement.slotchange_event", "slotchange")}} event + - : そのスロットに含まれるノードが変更されたときに発行されるイベント。 + ## 例 -以下のコードは、サイズと色の属性が指定された四角形の要素を作る [life-cycle-callbacks](https://github.com/mdn/web-components-examples/tree/master/life-cycle-callbacks) の例です。 ([ライブでも確認](https://mdn.github.io/web-components-examples/life-cycle-callbacks)) +以下のコードは、サイズと色の属性が指定された四角形の要素を作る [life-cycle-callbacks](https://github.com/mdn/web-components-examples/tree/main/life-cycle-callbacks) の例です。 ([ライブでも確認](https://mdn.github.io/web-components-examples/life-cycle-callbacks/)) `<custom-square>` 要素のクラス定義の中に、外部関数である `updateStyle()` を呼び出すライフサイクルコールバックが含まれています。`updateStyle()` は要素のサイズと色を適用します。`this` (カスタム要素自身) を引数として関数に渡していることが分かるでしょう。 @@ -69,22 +79,17 @@ attributeChangedCallback(name, oldValue, newValue) { ```js function updateStyle(elem) { - var shadow = elem.shadowRoot; - var childNodes = shadow.childNodes; - for (var i = 0; i < childNodes.length; i++) { - if (childNodes[i].nodeName === "STYLE") { - childNodes[i].textContent = - "div {" + - "width: " + - elem.getAttribute("l") + - "px;" + - "height: " + - elem.getAttribute("l") + - "px;" + - "background-color: " + - elem.getAttribute("c") + - ";" + - "}"; + const shadow = elem.shadowRoot; + const childNodes = shadow.childNodes; + for (const node of childNodes) { + if (node.nodeName === "STYLE") { + node.textContent = ` +div { + width: ${elem.getAttribute("l")}px; + height: ${elem.getAttribute("l")}px; + background-color: ${elem.getAttribute("c")}; +} + `; } } } diff --git a/files/ja/web/api/storage/index.md b/files/ja/web/api/storage/index.md index bc5d9845978b23..64a66cfdccc909 100644 --- a/files/ja/web/api/storage/index.md +++ b/files/ja/web/api/storage/index.md @@ -7,7 +7,7 @@ l10n: {{APIRef("Web Storage API")}} -**`Storage`** は[ウェブストレージ API](/en-US/docs/Web/API/Web_Storage_API) のインターフェイスで、特定のドメインのセッションストレージまたはローカルストレージへのアクセス機能を提供して、例えば保存されているデータアイテムを追加、変更、削除することができます。 +**`Storage`** は[ウェブストレージ API](/ja/docs/Web/API/Web_Storage_API) のインターフェイスで、特定のドメインのセッションストレージまたはローカルストレージへのアクセス機能を提供して、例えば保存されているデータアイテムを追加、変更、削除することができます。 例えば、ドメインのセッションストレージを操作したい場合は、{{domxref("Window.sessionStorage")}} メソッドを呼び出してください。ドメインのローカルストレージを操作したい場合は、{{domxref("Window.localStorage")}} を呼び出してください。 diff --git a/files/ja/web/api/storage/removeitem/index.md b/files/ja/web/api/storage/removeitem/index.md index 22b9d3eb1cc8bb..29051c0e176f0e 100644 --- a/files/ja/web/api/storage/removeitem/index.md +++ b/files/ja/web/api/storage/removeitem/index.md @@ -9,7 +9,7 @@ l10n: {{APIRef("Web Storage API")}} **`removeItem()`** は {{domxref("Storage")}} インターフェイスのメソッドは、キーの名前を渡すと、指定された `Storage` からキーを削除します。 -**`Storage`** は[ウェブストレージ API](/en-US/docs/Web/API/Web_Storage_API) のインターフェイスで、特定のドメインのセッションストレージまたはローカルストレージへのアクセス機能を提供します。 +**`Storage`** は[ウェブストレージ API](/ja/docs/Web/API/Web_Storage_API) のインターフェイスで、特定のドメインのセッションストレージまたはローカルストレージへのアクセス機能を提供します。 指定されたキーに関連するアイテムがない場合、このメソッドは何もしません。 diff --git a/files/ja/web/api/wgsllanguagefeatures/index.md b/files/ja/web/api/wgsllanguagefeatures/index.md new file mode 100644 index 00000000000000..f408dda6bd8f18 --- /dev/null +++ b/files/ja/web/api/wgsllanguagefeatures/index.md @@ -0,0 +1,75 @@ +--- +title: WGSLLanguageFeatures +slug: Web/API/WGSLLanguageFeatures +l10n: + sourceCommit: cf57e1e1e1756fec85425d01294ffeabc3b5b451 +--- + +{{APIRef("WebGPU API")}}{{SeeCompatTable}} + +{{domxref("WebGPU API", "WebGPU API", "", "nocode")}} の **`WGSLLanguageFeatures`** インターフェイスは、この WebGPU の実装が対応している [WGSL 言語の拡張](https://gpuweb.github.io/gpuweb/wgsl/#language-extension)を報告する [Set 風](/ja/docs/Web/JavaScript/Reference/Global_Objects/Set)オブジェクトです。 + +`WGSLLanguageFeatures` オブジェクトは {{domxref("GPU.wgslLanguageFeatures")}} プロパティ経由で参照します。 + +> **メモ:** API をサポートしているすべてのブラウザーの WebGPU ですべての WGSL 言語の拡張が使えるわけではありません。使うことにした拡張をすべて徹底的にテストすることを推奨します。 + +{{InheritanceDiagram}} + +## 利用可能な機能 + +利用可能な WGSL 言語の拡張は実装や物理デバイスによって異なる可能性があり、時間の経過によっても変わる可能性があります。そのため、ここでは列挙しません。完全なリストは、WGSL の仕様書内の [WGSL 言語の拡張](https://gpuweb.github.io/gpuweb/wgsl/#language-extension)を参照してください。 + +## インスタンスプロパティ + +以下のプロパティは、すべての読み取り専用の [Set 風](/ja/docs/Web/JavaScript/Reference/Global_Objects/Set)オブジェクトで使用可能です。 + +- {{jsxref("Set.prototype.size", "size")}} {{Experimental_Inline}} + - : 集合に含まれる値の数を返します。 + +## インスタンスメソッド + +以下のメソッドは、すべての読み取り専用の [Set 風](/ja/docs/Web/JavaScript/Reference/Global_Objects/Set)オブジェクトで使用可能です。 + +- {{jsxref("Set.prototype.has()", "has()")}} {{Experimental_Inline}} + - : 指定の値の要素が集合に含まれるか否かを表す論理値を返します。 +- {{jsxref("Set.prototype.values()", "values()")}} {{Experimental_Inline}} + - : 集合内の各要素の **値** を挿入した順に出力する新しいイテレーターオブジェクトを返します。 +- {{jsxref("Set.prototype.keys()", "keys()")}} {{Experimental_Inline}} + - : {{jsxref("Set.prototype.values()", "values()")}} の別名です。 +- {{jsxref("Set.prototype.entries()", "entries()")}} {{Experimental_Inline}} + - : 集合内の各要素に対応する **配列 `[value, value]`** が挿入した順に含まれる新しいイテレーターオブジェクトを返します。 +- {{jsxref("Set.prototype.forEach()", "forEach()")}} {{Experimental_Inline}} + - : 集合内の各要素について挿入した順に指定のコールバック関数を 1 度ずつ呼び出します。 + +## 例 + +```js +if (!navigator.gpu) { + throw Error("WebGPU に対応していません。"); +} + +const wgslFeatures = navigator.gpu.wgslLanguageFeatures; + +// 集合のサイズを返す +console.log(wgslFeatures.size); + +// values() を用いて集合のすべての値を走査する +const valueIterator = wgslFeatures.values(); +for (const value of valueIterator) { + console.log(value); +} + +// ... +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebGPU API](/ja/docs/Web/API/WebGPU_API) diff --git a/files/ja/web/css/_doublecolon_view-transition-group/index.md b/files/ja/web/css/_doublecolon_view-transition-group/index.md new file mode 100644 index 00000000000000..26f9b0726dc577 --- /dev/null +++ b/files/ja/web/css/_doublecolon_view-transition-group/index.md @@ -0,0 +1,73 @@ +--- +title: "::view-transition-group" +slug: Web/CSS/::view-transition-group +l10n: + sourceCommit: 6d4b6a0f9df94de158c373d6b08c504caafcee5f +--- + +{{CSSRef}}{{SeeCompatTable}} + +**`::view-transition-group`** は [CSS](/ja/docs/Web/CSS) の[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)で、単一のビュートランジショングループを表します。 + +ビュートランジションの間、 `::view-transition-group` はは、[ビュートランジションプロセス](/ja/docs/Web/API/View_Transitions_API#the_view_transition_process) で説明されているように、関連する擬似要素ツリーに含まれています。これは{{cssxref("::view-transition")}}の唯一の子であり、{{cssxref("::view-transition-image-pair")}}を子として持ちます。 + +`::view-transition-group` は UA スタイルシートで以下の既定のスタイルを与えられています。 + +```css +html::view-transition-group(*) { + position: absolute; + top: 0; + left: 0; + + animation-duration: 0.25s; + animation-fill-mode: both; +} +``` + +既定では、選択された要素は、「古い｝ビュー状態を表す {{cssxref("::view-transition-old")}} 擬似要素、または「古い」ビュー状態がない場合は「新しい」ビュー状態を表す {{cssxref("::view-transition-new")}} 擬似要素のサイズと位置を最初に反映します。 + +「古い」ビュー状態と「新しい」ビュー状態の両方がある場合、ビュートランジションスタイルシートのスタイルは、この擬似要素の {{cssxref("width")}} と {{cssxref("height")}} を「古い」ビュー状態の境界ボックスのサイズから「新しい」ビュー状態の境界ボックスのサイズにアニメーションさせます。 + +> **メモ:** ビュートランジションスタイルシートのスタイルは、ビューのトランジション中に動的に生成されます。詳細については、仕様書の[トランジション擬似要素の設定](https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements)および[擬似要素スタイルの更新](https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles)の節を参照してください。 + +さらに、要素の変換は、「古い」ビュー状態の画面空間変換から新しいビュー状態の画面空間変換へアニメーションします。アニメーションしているプロパティの値はトランジションを始める時点に決定されるため、このスタイル設定は動的に生成されます。 + +## 構文 + +```css-nolint +::view-transition-group(<pt-name-selector>) { + /* ... */ +} +``` + +`<pt-name-selector>` は以下の値のうちのいずれかです。 + +- `*` + - : 擬似要素が、すべてのビュートランジショングループに一致するようにします。 +- `root` + - : 擬似要素が、ページ全体のビュートランジションを含むためにユーザエージェントによって作成された既定の `root` ビュートランジショングループに一致するようにします。すなわち、 {{cssxref("view-transition-name")}} プロパティによって自分自身を固有のビュートランジショングループに割り当てていない要素を意味します）。 +- {{cssxref("custom-ident")}} + - : 擬似要素が、指定された {{cssxref("custom-ident")}} を {{cssxref("view-transition-name")}} プロパティを通して要素に割り当てることによって作成された固有のビュートランジショングループに一致するようにします。 + +## 例 + +```css +view-transition-group(embed-container) { + animation-duration: 0.3s; + animation-timing-function: ease; + z-index: 1; +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ビュートランジション API](/ja/docs/Web/API/View_Transitions_API) +- [ビュートランジション API によるスムーズでシンプルなトランジション](https://developer.chrome.com/docs/web-platform/view-transitions/) diff --git a/files/ja/web/css/_doublecolon_view-transition-image-pair/index.md b/files/ja/web/css/_doublecolon_view-transition-image-pair/index.md new file mode 100644 index 00000000000000..8d4853c4197d96 --- /dev/null +++ b/files/ja/web/css/_doublecolon_view-transition-image-pair/index.md @@ -0,0 +1,64 @@ +--- +title: "::view-transition-image-pair" +slug: Web/CSS/::view-transition-image-pair +l10n: + sourceCommit: 1a27ade8c981c8a98c8fac9881b362e881a4d236 +--- + +{{CSSRef}}{{SeeCompatTable}} + +**`::view-transition-image-pair`** は [CSS](/ja/docs/Web/CSS) の[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)で、[ビュートランジション](/ja/docs/Web/API/View_Transitions_API)の「古い」および「新しい」ビュー状態、すなわちトランジションの前と後のコンテナーを表します。 + +ビュートランジションの間、 `::view-transition-image-pair` は[ビュートランジションのプロセス](/ja/docs/Web/API/View_Transitions_API#ビュートランジションのプロセス)で説明されているように、関連する擬似要素のツリーとして表現されます。これは {{cssxref("::view-transition-group")}} の子にしかなりません。子という意味では、 {{cssxref("::view-transition-new")}} または {{cssxref("::view-transition-old")}}、あるいはその両方を持つことができます。 + +UA スタイルシートでは `::view-transition-image-pair` に以下の既定値が指定されています。 + +```css +html::view-transition-image-pair(*) { + position: absolute; + inset: 0; + + animation-duration: inherit; + animation-fill-mode: inherit; +} +``` + +ビュートランジションの間、 `::view-transition-image-pair` は {{cssxref("isolation", "isolation: isolate")}} をビュートランジションスタイルシートで設定することで、他の視覚出力に影響を与えることなく、通常の混合モード以外で混合することができます。 + +## 構文 + +```css-nolint +::view-transition-image-pair(<pt-name-selector>) { + /* ... */ +} +``` + +`<pt-name-selector>` は以下の値のうちのいずれかです。 + +- `*` + - : 擬似要素が、すべてのビュートランジショングループに一致するようにします。 +- `root` + - : 擬似要素が、ページ全体のビュートランジションを含むためにユーザエージェントによって作成された既定の `root` ビュートランジショングループに一致するようにします。すなわち、 {{cssxref("view-transition-name")}} プロパティによって自分自身を固有のビュートランジショングループに割り当てていない要素を意味します）。 +- {{cssxref("custom-ident")}} + - : 擬似要素が、指定された {{cssxref("custom-ident")}} を {{cssxref("view-transition-name")}} プロパティを通して要素に割り当てることによって作成された固有のビュートランジショングループに一致するようにします。 + +## 例 + +```css +::view-transition-image-pair(root) { + isolation: auto; +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ビュートランジション API](/ja/docs/Web/API/View_Transitions_API) +- [ビュートランジション API によるスムーズでシンプルなトランジション](https://developer.chrome.com/docs/web-platform/view-transitions/) diff --git a/files/ja/web/css/_doublecolon_view-transition-new/index.md b/files/ja/web/css/_doublecolon_view-transition-new/index.md new file mode 100644 index 00000000000000..2bcb03ce5b4e5f --- /dev/null +++ b/files/ja/web/css/_doublecolon_view-transition-new/index.md @@ -0,0 +1,109 @@ +--- +title: "::view-transition-new" +slug: Web/CSS/::view-transition-new +l10n: + sourceCommit: c9cc38c3c3c342e2e952c1acd57f55e104c5bb06 +--- + +{{CSSRef}}{{SeeCompatTable}} + +**`::view-transition-new`** は [CSS](/ja/docs/Web/CSS) の[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)で、ビュートランジションの「新しい」ビュー状態を表します。これは新しいビューのライブ表現で、トランジションの後を表します。 + +ビュートランジションの間、 `::view-transition-new` は[ビュートランジションのプロセス](/ja/docs/Web/API/View_Transitions_API#ビュートランジションのプロセス)で説明されているように、関連する擬似要素ツリーに記載されます。これは {{cssxref("::view-transition-image-pair")}} の子要素でしかなく、子要素を持つことはありません。 + +これは置換要素であり、 {{cssxref("object-fit")}} や {{cssxref("object-position")}} などのプロパティで操作できます。コンテンツのサイズに等しい自然な寸法を持ちます。 + +UA スタイルシートでは以下の既定値が指定されています。 + +```css +@keyframes -ua-view-transition-fade-in { + from { + opacity: 0; + } +} + +html::view-transition-new(*) { + position: absolute; + inset-block-start: 0; + inline-size: 100%; + block-size: auto; + + animation-name: -ua-view-transition-fade-in; + animation-duration: inherit; + animation-fill-mode: inherit; +} +``` + +> **メモ:** `::view-transition-new` のアニメーションを設定するために、追加のビュートランジションスタイルシートスタイルも設定されます。これらはビュートランジション中に動的に生成されます。詳細は仕様書の [setup transition pseudo-elements](https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements) および [update pseudo-element styles](https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles) の節を参照してください。 + +## 構文 + +```css-nolint +::view-transition-new(<pt-name-selector>) { + /* ... */ +} +``` + +`<pt-name-selector>` は以下の値のうちのいずれかです。 + +- `*` + - : 擬似要素が、すべてのビュートランジショングループに一致するようにします。 +- `root` + - : 擬似要素が、ページ全体のビュートランジションを含むためにユーザエージェントによって作成された既定の `root` ビュートランジショングループに一致するようにします。すなわち、 {{cssxref("view-transition-name")}} プロパティによって自分自身を固有のビュートランジショングループに割り当てていない要素を意味します）。 +- {{cssxref("custom-ident")}} + - : 擬似要素が、指定された {{cssxref("custom-ident")}} を {{cssxref("view-transition-name")}} プロパティを通して要素に割り当てることによって作成された固有のビュートランジショングループに一致するようにします。 + +## 例 + +```css +figcaption { + view-transition-name: figure-caption; +} + +@keyframes grow-x { + from { + transform: scaleX(0); + } + to { + transform: scaleX(1); + } +} + +@keyframes shrink-x { + from { + transform: scaleX(1); + } + to { + transform: scaleX(0); + } +} + +::view-transition-old(figure-caption), +::view-transition-new(figure-caption) { + height: auto; + right: 0; + left: auto; + transform-origin: right center; +} + +::view-transition-old(figure-caption) { + animation: 0.25s linear both shrink-x; +} + +::view-transition-new(figure-caption) { + animation: 0.25s 0.25s linear both grow-x; +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ビュートランジション API](/ja/docs/Web/API/View_Transitions_API) +- [ビュートランジション API によるスムーズでシンプルなトランジション](https://developer.chrome.com/docs/web-platform/view-transitions/) diff --git a/files/ja/web/css/image/index.md b/files/ja/web/css/image/index.md index 88aae096550aa6..acdb5267c5f2b3 100644 --- a/files/ja/web/css/image/index.md +++ b/files/ja/web/css/image/index.md @@ -1,6 +1,8 @@ --- title: <image> slug: Web/CSS/image +l10n: + sourceCommit: 2a23f650d86d4f5d948614a607224a2bd52cca33 --- {{CSSRef}} @@ -11,25 +13,25 @@ slug: Web/CSS/image `<image>` データ型は以下のいずれかによって表すことができます。 -- {{CSSxRef("url()", "url()")}} データ型で記述された画像 +- {{CSSxRef("url", "url()")}} データ型で記述された画像 - {{CSSxRef("<gradient>")}} データ型 -- {{CSSxRef("element()","element()")}} 関数で定義されたウェブページの一部 -- {{CSSxRef("image/image()","image()")}} 関数で定義された画像、画像フラグメント、単色の色 -- {{CSSxRef("cross-fade()","cross-fade()")}} 関数で定義された 2 つ以上の画像の合成 -- {{CSSxRef("image/image-set()","image-set()")}} 関数で定義された、解像度に基づいて定義された画像の選択 +- {{CSSxRef("element","element()")}} 関数で定義されたウェブページの一部 +- {{CSSxRef("image/image","image()")}} 関数で定義された画像、画像フラグメント、単色の色 +- {{CSSxRef("cross-fade","cross-fade()")}} 関数で定義された 2 つ以上の画像の合成 +- {{CSSxRef("image/image-set","image-set()")}} 関数で定義された、解像度に基づいて定義された画像の選択 ## 解説 CSS はさまざま種類の画像を扱うことができます。 -- JPEG、PNG、その他の[ラスター形式](https://ja.wikipedia.org/wiki/ビットマップ画像)の画像のように、_自身の寸法_ (自然の寸法) を持つ画像。 -- 単一のファイルの中に複数のバージョンが存在する、*複数の自身の寸法*を持つ画像。 (この場合、自身の寸法は領域に収まる最も大きな画像であり、かつ縦横比が包含ボックスに最も近いものになります。) -- SVG またはその他の[ベクター形式](https://ja.wikipedia.org/wiki/ベクター画像)の画像のように、自身の寸法を持たないが、幅と高さの間に自身の縦横比のある画像。 -- CSS グラデーションなど、*自身の寸法がなく、固有の縦横比もない*画像。 +- JPEG、PNG、その他の[ラスター形式](https://ja.wikipedia.org/wiki/ビットマップ画像)の画像のように、_内在的な寸法_ (自然の寸法) を持つ画像。 +- 単一のファイルの中に複数のバージョンが存在する、*複数の内在的な寸法*を持つ画像。（この場合、内在的な寸法は領域に収まる最も大きな画像であり、かつ縦横比が包含ボックスに最も近いものになります。） +- SVG またはその他の[ベクター形式](https://ja.wikipedia.org/wiki/ベクター画像)の画像のように、内在的な寸法を持たないが、幅と高さの間に自身の縦横比のある画像。 +- CSS グラデーションなど、*内在的な寸法がなく、固有の縦横比もない*画像。 -CSS はオブジェクトの*実際の*寸法を、 (1) _自身の寸法_、 (2) CSS の {{CSSxRef("width")}}, {{CSSxRef("height")}}, {{CSSxRef("background-size")}} などのプロパティで定義された*指定の寸法*、 (3) 画像が使用されるプロパティの種類によって指定された、以下のような*既定の寸法*によって特定します。 +CSS はオブジェクトの*実際の*寸法を、 (1) _内在的な寸法_、 (2) CSS の {{CSSxRef("width")}}, {{CSSxRef("height")}}, {{CSSxRef("background-size")}} などのプロパティで定義された*指定の寸法*、 (3) 画像が使用されるプロパティの種類によって指定された、以下のような*既定の寸法*によって特定します。 -| オブジェクトの種類 (CSS プロパティ) | 既定のオブジェクトの寸法 | +| オブジェクトの種類（CSS プロパティ） | 既定のオブジェクトの寸法 | | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | | {{CSSxRef("background-image")}} | 要素の背景が配置される領域の寸法 | | {{CSSxRef("list-style-image")}} | `1em` の文字の寸法 | @@ -38,13 +40,13 @@ CSS はオブジェクトの*実際の*寸法を、 (1) _自身の寸法_、 (2) | {{CSSxRef("mask-image")}} | ? | | {{CSSxRef("shape-outside")}} | ? | | {{CSSxRef("mask-border-source")}} | ? | -| @counter-style の {{CSSxRef("symbols()")}} | リスクあり。対応している場合、クライアントのシステムにおける通常のカーソルの寸法に合わせたブラウザー定義の寸法 | +| @counter-style の {{CSSxRef("symbols", "symbols()")}} | リスクあり。対応している場合、クライアントのシステムにおける通常のカーソルの寸法に合わせたブラウザー定義の寸法 | | 擬似要素 ({{CSSxRef("::after")}}/{{CSSxRef("::before")}}) の {{CSSxRef("content")}} | 300px × 150px の矩形 | 正しいオブジェクトの寸法は、次のアルゴリズムを使って計算されます。 - 指定された寸法に*幅と高さの両方*が定義されている場合は、その値が実際の寸法に使われます。 -- 指定された寸法に*幅と高さのどちらかのみ*が定義されている場合は、もう一方の値は、画像自身の比率、指定値が一致するなら画像自身の寸法、既定のオブジェクトの寸法の値の何れかを使用して決められます。 +- 指定された寸法に*幅と高さのどちらかのみ*が定義されている場合は、もう一方の値は、画像自身の比率、指定値が一致するなら画像の内在的な寸法、既定のオブジェクトの寸法の値の何れかを使用して決められます。 - 指定された寸法が*幅も高さも定義していない*場合は、実際のオブジェクトの寸法は、画像自身の縦横比に一致し、かつ既定のオブジェクトの寸法をどちらの方向にも超過しない値が計算されます。画像自身の縦横比がない場合は、適用されるオブジェクト自身の縦横比が使用されます。このオブジェクトにも縦横比が存在しない場合は、残りの幅または高さは既定のオブジェクトの寸法から取られます。 > **メモ:** すべてのブラウザーがすべてのプロパティですべての種類の画像に対応しているわけではありません。詳細は[ブラウザーの互換性の節](#ブラウザーの互換性)を参照してください。 @@ -53,9 +55,13 @@ CSS はオブジェクトの*実際の*寸法を、 (1) _自身の寸法_、 (2) ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。 -- [MDN WCAG を理解する, ガイドライン 1.1 の解説](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) +- [MDN WCAG を理解する, ガイドライン 1.1 の解説](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_—_providing_text_alternatives_for_non-text_content) - [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) +## 形式文法 + +{{csssyntax}} + ## 例 ### 有効な画像 @@ -97,7 +103,7 @@ image-set('cat.jpg' 1x, 'dog.jpg' 1x) /* 画像セット内の画像はすべて ## 関連情報 - {{CSSxRef("<gradient>")}} -- {{CSSxRef("element()","element()")}} -- {{CSSxRef("image/image()", "image()")}} -- {{CSSxRef("image/image-set()","image-set()")}} -- {{CSSxRef("cross-fade()","cross-fade()")}} +- {{CSSxRef("element","element()")}} {{Experimental_Inline}} +- {{CSSxRef("image/image", "image()")}} +- {{CSSxRef("image/image-set","image-set()")}} +- {{CSSxRef("cross-fade","cross-fade()")}} diff --git a/files/ja/web/css/adjacent_sibling_combinator/index.md b/files/ja/web/css/next-sibling_combinator/index.md similarity index 90% rename from files/ja/web/css/adjacent_sibling_combinator/index.md rename to files/ja/web/css/next-sibling_combinator/index.md index 23f618ff969c46..743e76d33278e5 100644 --- a/files/ja/web/css/adjacent_sibling_combinator/index.md +++ b/files/ja/web/css/next-sibling_combinator/index.md @@ -1,6 +1,7 @@ --- title: 隣接兄弟結合子 -slug: Web/CSS/Adjacent_sibling_combinator +slug: Web/CSS/Next-sibling_combinator +original_slug: Web/CSS/Adjacent_sibling_combinator --- {{CSSRef("Selectors")}} diff --git a/files/ja/web/css/general_sibling_combinator/index.md b/files/ja/web/css/subsequent-sibling_combinator/index.md similarity index 92% rename from files/ja/web/css/general_sibling_combinator/index.md rename to files/ja/web/css/subsequent-sibling_combinator/index.md index caef2c61a07ede..6b142845942de6 100644 --- a/files/ja/web/css/general_sibling_combinator/index.md +++ b/files/ja/web/css/subsequent-sibling_combinator/index.md @@ -1,6 +1,7 @@ --- title: 一般兄弟結合子 -slug: Web/CSS/General_sibling_combinator +slug: Web/CSS/Subsequent-sibling_combinator +original_slug: Web/CSS/General_sibling_combinator --- {{CSSRef("Selectors")}} diff --git a/files/ja/web/css/using_css_custom_properties/index.md b/files/ja/web/css/using_css_custom_properties/index.md index f885d13d2dc377..30d4458c8d594d 100644 --- a/files/ja/web/css/using_css_custom_properties/index.md +++ b/files/ja/web/css/using_css_custom_properties/index.md @@ -13,7 +13,7 @@ l10n: カスタムプロパティはカスケードの対象であり、親から値を継承します。 -> **メモ:** 変数は、メディアクエリーやコンテナークエリーの中では動作しません。{{cssxref("var", "var()")}} 関数は、要素のすべてのプロパティの、任意の場所で使用することができます。{{cssxref("var", "var()")}} 関数はプロパティ名やセレクターなど、プロパティ値以外のところでは使用できません。従って、メディアクエリーやコンテんなークエリーの中では使用できません。 +> **メモ:** 変数は、メディアクエリーやコンテナークエリーの中では動作しません。{{cssxref("var", "var()")}} 関数は、要素のすべてのプロパティの、任意の場所で使用することができます。{{cssxref("var", "var()")}} 関数はプロパティ名やセレクターなど、プロパティ値以外のところでは使用できません。従って、メディアクエリーやコンテナークエリーの中では使用できません。 ## 基本的な使用方法 diff --git a/files/ja/web/html/attributes/accept/index.md b/files/ja/web/html/attributes/accept/index.md index f4eb903707c021..e08b4e50de4c04 100644 --- a/files/ja/web/html/attributes/accept/index.md +++ b/files/ja/web/html/attributes/accept/index.md @@ -1,11 +1,19 @@ --- title: "HTML 属性: accept" slug: Web/HTML/Attributes/accept +l10n: + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} -**`accept`** 属性は、値としてカンマ区切りでファイル種別または[固有ファイル種別指定子](#unique_file_type_specifiers)を取り、どのファイル種別を受け入れるかを記述します。 accept プロパティは {{HTMLElement("input/file", "file")}} 型の {{htmlelement("input")}} 要素のプロパティです。もとは {{htmlelement("form")}} 要素で対応していましたが、 HTML5 で削除され、 {{HTMLElement("input/file", "file")}} に変更されました。 +**`accept`** 属性は、値としてカンマ区切りでファイル種別または[固有ファイル種別指定子](#unique_file_type_specifiers)を取り、どのファイル種別を受け入れるかを記述します。 + +{{EmbedInteractiveExample("pages/tabbed/attribute-accept.html", "tabbed-shorter")}} + +## 概要 + +accept プロパティは {{HTMLElement("input/file", "file")}} 型の {{htmlelement("input")}} 要素のプロパティです。もとは {{htmlelement("form")}} 要素で対応していましたが、 HTML5 で削除され、 {{HTMLElement("input/file", "file")}} に変更されました。 与えられたファイル種別は複数の方法で識別される可能性があるため、特定の種別のファイルが必要な場合には、型指定子の完全なセットを提供したり、ワイルドカードを使用して任意の形式の型が許容されることを示したりすると便利です。 @@ -49,7 +57,7 @@ slug: Web/HTML/Attributes/accept </p> ``` -{{EmbedLiveSample('simple_example', '100%', 200)}} +{{EmbedLiveSample('Examples', '100%', 200)}} なお、最後の例では複数の画像を選択することができます。詳しくは [`multiple`](multiple) 属性を参照してください。 @@ -95,7 +103,7 @@ div { {{EmbedLiveSample('A_basic_example', 650, 60)}} -> **メモ:** この例は GitHub でも見ることができます。 — [ソースコード](https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html)と[ライブ実行](https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html)を確認してください。 +> **メモ:** この例は GitHub でも見ることができます。 — [ソースコード](https://github.com/mdn/learning-area/blob/main/html/forms/file-examples/simple-file.html)と[ライブ実行](https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html)を確認してください。 ユーザーの端末やオペレーティングシステムが何であろうと、ファイル入力には、ユーザーがファイルを選択するためのファイルピッカーダイアログを開くボタンが用意されす。 @@ -109,7 +117,7 @@ div { - `accept="image/png"` または `accept=".png"` — PNG ファイルを受け付ける。 - `accept="image/png, image/jpeg"` または `accept=".png, .jpg, .jpeg"` — PNG または JPEG ファイルを受け付ける。 -- `accept="image/*"` — `image/*` MIME タイプで任意のファイルを受け付ける (また、多くのモバイル端末では、これを使用するとユーザーにカメラで写真を撮影させることができる。) +- `accept="image/*"` — `image/*` MIME タイプで任意のファイルを受け付ける（また、多くのモバイル端末では、これを使用するとユーザーにカメラで写真を撮影させることができる。） - `accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"` — MS Word 文書と思しきすべてのファイルを受け付ける。 もっと完全な例を見てみましょう。 @@ -148,5 +156,5 @@ div { ## 関連情報 -- [ウェブアプリケーションからのファイルの使用](/ja/docs/Using_files_from_web_applications) -- [File API](/ja/docs/Web/API/File) +- [ウェブアプリケーションからのファイルの使用](/ja/docs/Web/API/File_API/Using_files_from_web_applications) +- [ファイル API](/ja/docs/Web/API/File) diff --git a/files/ja/web/html/attributes/autocomplete/index.md b/files/ja/web/html/attributes/autocomplete/index.md index 972b4e03a2a409..829aae217beb3f 100644 --- a/files/ja/web/html/attributes/autocomplete/index.md +++ b/files/ja/web/html/attributes/autocomplete/index.md @@ -1,6 +1,8 @@ --- title: "HTML 属性: autocomplete" slug: Web/HTML/Attributes/autocomplete +l10n: + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} @@ -21,6 +23,8 @@ HTML の `autocomplete` 属性は、ウェブ開発者は入力欄にどの種 > 2. `<form>` 要素の子孫であること > 3. フォームが {{HTMLElement("input/submit", "submit")}} ボタンを持つこと +{{EmbedInteractiveExample("pages/tabbed/attribute-autocomplete.html", "tabbed-shorter")}} + ## 値 - "`off`" @@ -115,7 +119,7 @@ HTML の `autocomplete` 属性は、ウェブ開発者は入力欄にどの種 - "`bday-year`" - : 生年月日の年の部分です。 - "`sex`" - - : 性別で ("Female", "Fa'afafine", "Male" など)、改行のない自由な形式のテキストです。 + - : 性別で ("Female", "Fa'afafine", "Hijra", "Male", "Nonbinary" など)、改行のない自由な形式のテキストです。 - "`tel`" - : 国番号を含む、完全な電話番号です。電話番号を書く部分に分割する必要がある場合は、各フィールドに以下の値を使用することができます。 diff --git a/files/ja/web/html/attributes/capture/index.md b/files/ja/web/html/attributes/capture/index.md index 889cc262b00f54..6661e840826a74 100644 --- a/files/ja/web/html/attributes/capture/index.md +++ b/files/ja/web/html/attributes/capture/index.md @@ -1,6 +1,8 @@ --- title: "HTML 属性: capture" slug: Web/HTML/Attributes/capture +l10n: + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} @@ -9,7 +11,7 @@ slug: Web/HTML/Attributes/capture 値としては、 `user` と `environment` があります。 capture 属性は {{HTMLElement("input/file", "file")}} 入力型が対応しています。 -`capture` 属性は、 [accept](accept) 属性が画像や動画データの入力に使用するカメラの種類を指定する文字列を値とするものです。 +`capture` 属性は、[accept](accept) 属性が入力の種類を示す場合、画像やビデオデータの取り込みに使用するカメラを指定する文字列をその値として受け取ります。 | 値 | 説明 | | ------------- | ---------------------------------------- | @@ -18,6 +20,8 @@ slug: Web/HTML/Attributes/capture > **メモ:** capture は、以前は論理属性で、存在する場合、ファイル入力を要求する代わりに、カメラやマイクなどの機器のメディアキャプチャ機器を使用するように要求していました。 +{{EmbedInteractiveExample("pages/tabbed/attribute-capture.html", "tabbed-standard")}} + ## 例 ファイル入力型に設定すると、マイクやカメラを搭載した OS では、既存のファイルから選択したり、新規にファイルを作成したりできるユーザーインターフェースが表示されます。 diff --git a/files/ja/web/html/attributes/crossorigin/index.md b/files/ja/web/html/attributes/crossorigin/index.md index e8904c19c1bf05..af434de6c2544b 100644 --- a/files/ja/web/html/attributes/crossorigin/index.md +++ b/files/ja/web/html/attributes/crossorigin/index.md @@ -1,20 +1,22 @@ --- title: "HTML 属性: crossorigin" slug: Web/HTML/Attributes/crossorigin +l10n: + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} -**`crossorigin`** 属性は、 {{ HTMLElement("audio") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}, {{ HTMLElement("video") }} の各要素で有効であり、 [CORS](/ja/docs/Web/HTTP/CORS) への対応を提供し、したがって要素が読み取るデータのために CORS リクエストの構成を有効にします。要素によっては、属性は CORS 設定属性になります。 +**`crossorigin`** 属性は、{{HTMLElement("audio")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("video")}} の各要素で有効です。[CORS](/ja/docs/Web/HTTP/CORS) への対応を提供し、したがって要素が読み取るデータのために CORS リクエストの構成を有効にします。要素によっては、属性は CORS 設定属性になります。 メディア要素の `crossorigin` コンテンツ属性は CORS 設定属性です。 -これらの属性は列挙型で、以下の値を取ることができます。 +これらの属性は[列挙型](/ja/docs/Glossary/Enumerated)で、以下の値を取ることができます。 - `anonymous` - : リクエストは CORS ヘッダーを使用し、資格情報フラグには `'same-origin'` に設定されます。宛先が同一オリジンでない限り、クッキー、クライアントサイド SSL 証明書、HTTP 認証による**ユーザー資格情報**の交換は行われません。 - `use-credentials` - - : リクエストは CORS ヘッダーを使用し、資格情報フラグには `'include'` に設定され、**ユーザー資格情報**は常に含まれます。 + - : リクエストは CORS ヘッダーを使用し、資格情報フラグには `'include'` に設定され、**ユーザー資格情報**が常に含まれます。 - `""` - : `crossorigin` または `crossorigin=""` のように属性に空の値を設定すると、 `anonymous` と同じになります。 @@ -37,7 +39,7 @@ slug: Web/HTML/Attributes/crossorigin <tr> <td><code>script</code></td> <td> - {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}} によるエラーログへのアクセスが制限されます。 + {{domxref('Window.error_event', 'window.onerror')}} によるエラーログへのアクセスが制限されます。 </td> </tr> <tr> diff --git a/files/ja/web/html/attributes/disabled/index.md b/files/ja/web/html/attributes/disabled/index.md index 4511a3935c23c7..446cb506db246b 100644 --- a/files/ja/web/html/attributes/disabled/index.md +++ b/files/ja/web/html/attributes/disabled/index.md @@ -1,15 +1,21 @@ --- title: "HTML 属性: disabled" slug: Web/HTML/Attributes/disabled +l10n: + sourceCommit: a9323bfa9a5c937633786a29124fd308bfa8d29d --- {{HTMLSidebar}} **`disabled`** は論理属性で、存在する場合、その要素は変更不可、フォーカス不可、フォームへの送信不可となります。ユーザーはそのコントロールやフォームコントロールの子孫を編集したり、フォーカスしたりすることができません。 +{{EmbedInteractiveExample("pages/tabbed/attribute-disabled.html", "tabbed-standard")}} + +## 概要 + フォームコントロールに `disabled` 属性が指定された場合、その要素とフォームコントロールの子孫は制約検証が行われません。多くの場合、ブラウザーはそのようなコントロールをグレーアウトし、マウスクリックやフォーカス関連のイベントなどの閲覧イベントを受け取りません。 -`disabled` 属性は、 {{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("input")}} が対応しています。 +`disabled` 属性は、 {{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("input")}} が対応しています。 論理属性の disabled は、ユーザーがコントロールやその子孫のコントロールと対話できないことを示します。この属性が指定されていない場合、コントロールは、例えば `fieldset` のような包含要素からその設定を継承します。 `disabled` 属性が設定されている包含要素がなく、コントロール自体がこの属性を持っていない場合、コントロールは有効になります。 {{ HTMLElement("optgroup") }}上で宣言された場合、 select は（特に無効化されていない限り）操作可能になりますが、オプショングループの項目はどれも選択不可能になります。 @@ -70,7 +76,7 @@ Firefox は他のブラウザーとは異なり、ページを再読み込みし <p> <label - >選択してください + >選択してください: <select> <optgroup label="Group 1"> <option>Option 1.1</option> @@ -92,7 +98,7 @@ Firefox は他のブラウザーとは異なり、ページを再読み込みし <fieldset disabled> <legend>無効なフィールドセット</legend> <p> - <label>名前: <input type="name" name="radio" value="通常" /> 通常 </label> + <label> 名前: <input type="name" name="radio" value="通常" /> 通常 </label> </p> <p> <label>数値: <input type="number" /></label> @@ -100,7 +106,7 @@ Firefox は他のブラウザーとは異なり、ページを再読み込みし </fieldset> ``` -{{EmbedLiveSample('Examples', 500, 300)}} +{{EmbedLiveSample('Examples', 500, 450)}} ## 仕様書 diff --git a/files/ja/web/html/attributes/elementtiming/index.md b/files/ja/web/html/attributes/elementtiming/index.md index f494d02ee20416..3eb78a6120e88d 100644 --- a/files/ja/web/html/attributes/elementtiming/index.md +++ b/files/ja/web/html/attributes/elementtiming/index.md @@ -2,12 +2,16 @@ title: "HTML 属性: elementtiming" slug: Web/HTML/Attributes/elementtiming l10n: - sourceCommit: bb7e3c7303746408072ddf4cc646e28d7e14214a + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} -**`elementtiming`** 属性は、要素が{{domxref("Element Timing API", "要素タイミング API", "", 1)}} による追跡のためのフラグを立てていることを示すために使用されます。この属性は {{htmlelement("img")}}、 {{SVGElement("svg")}} の中の {{SVGElement("image")}} 要素、 {{htmlelement("video")}} 要素のポスター画像、 {{cssxref("background-image")}} がある要素、及び {{htmlelement("p")}} などテキストノードを持つ要素に対して適用することができます。 +**`elementtiming`** 属性は、ある要素が {{domxref("PerformanceObserver")}} オブジェクトで `"element"` 型を使用したものによる追跡のためのフラグを立てていることを示すために使用されます。詳細は、 {{domxref("PerformanceElementTiming")}} インターフェイスを参照してください。 + +この属性は {{htmlelement("img")}}、 {{SVGElement("svg")}} の中の {{SVGElement("image")}} 要素、 {{htmlelement("video")}} 要素のポスター画像、 {{cssxref("background-image")}} がある要素、及び {{htmlelement("p")}} などテキストノードを持つ要素に対して適用することができます。 + +DOM では、この属性は {{domxref("Element.elementTiming")}} として反映されます。 ## 使用方法 @@ -34,4 +38,5 @@ l10n: ## 関連情報 -- [Custom metrics](https://web.dev/custom-metrics/) +- {{domxref("PerformanceElementTiming")}} +- {{domxref("Element.elementTiming")}} diff --git a/files/ja/web/html/attributes/for/index.md b/files/ja/web/html/attributes/for/index.md index d45126448402d1..3e8fbad6f40a95 100644 --- a/files/ja/web/html/attributes/for/index.md +++ b/files/ja/web/html/attributes/for/index.md @@ -2,7 +2,7 @@ title: "HTML 属性: for" slug: Web/HTML/Attributes/for l10n: - sourceCommit: bb7e3c7303746408072ddf4cc646e28d7e14214a + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} diff --git a/files/ja/web/html/attributes/index.md b/files/ja/web/html/attributes/index.md index 8f4c567b34e277..f8f76d48bcba45 100644 --- a/files/ja/web/html/attributes/index.md +++ b/files/ja/web/html/attributes/index.md @@ -2,7 +2,7 @@ title: HTML 属性リファレンス slug: Web/HTML/Attributes l10n: - sourceCommit: 076a9f924e4619b4f5129c2ec7440420d05b5ec5 + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar("Attributes")}} @@ -72,7 +72,7 @@ HTML の要素は**属性**を持ちます。ユーザーが望む条件を満 </tr> <tr> <td> - <code><a href="/ja/docs/Web/HTML/Element/iframe#attr-allow">allow</a></code> + <code><a href="/ja/docs/Web/HTML/Element/iframe#allow">allow</a></code> </td> <td>{{ HTMLElement("iframe") }}</td> <td>iframe の機能ポリシーを指定します。</td> @@ -404,7 +404,7 @@ HTML の要素は**属性**を持ちます。ユーザーが望む条件を満 </tr> <tr> <td> - <code><a href="/ja/docs/Web/HTML/Element/img#attr-decoding">decoding</a></code> + <code><a href="/ja/docs/Web/HTML/Element/img#decoding">decoding</a></code> </td> <td>{{ HTMLElement("img") }}</td> <td>画像をデコードする推奨の方法を示します。</td> @@ -696,7 +696,7 @@ HTML の要素は**属性**を持ちます。ユーザーが望む条件を満 </tr> <tr> <td> - <a href="/ja/docs/Web/HTML/Element/img#attr-intrinsicsize"><code>intrinsicsize</code></a> + <a href="/ja/docs/Web/HTML/Element/img#intrinsicsize"><code>intrinsicsize</code></a> {{deprecated_inline}} </td> <td>{{ HTMLElement("img") }}</td> @@ -718,7 +718,7 @@ HTML の要素は**属性**を持ちます。ユーザーが望む条件を満 </tr> <tr> <td> - <code><a href="/ja/docs/Web/HTML/Element/img#attr-ismap">ismap</a></code> + <code><a href="/ja/docs/Web/HTML/Element/img#ismap">ismap</a></code> </td> <td>{{ HTMLElement("img") }}</td> <td>画像がサーバーサイドイメージマップの一部であることを示します。</td> @@ -1098,7 +1098,7 @@ HTML の要素は**属性**を持ちます。ユーザーが望む条件を満 </tr> <tr> <td> - <code><a href="/ja/docs/Web/HTML/Element/iframe#attr-sandbox">sandbox</a></code> + <code><a href="/ja/docs/Web/HTML/Element/iframe#sandbox">sandbox</a></code> </td> <td>{{ HTMLElement("iframe") }}</td> <td> @@ -1204,7 +1204,7 @@ HTML の要素は**属性**を持ちます。ユーザーが望む条件を満 </tr> <tr> <td> - <code><a href="/ja/docs/Web/HTML/Element/iframe#attr-srcdoc">srcdoc</a></code> + <code><a href="/ja/docs/Web/HTML/Element/iframe#srcdoc">srcdoc</a></code> </td> <td>{{ HTMLElement("iframe") }}</td> <td></td> diff --git a/files/ja/web/html/attributes/max/index.md b/files/ja/web/html/attributes/max/index.md index 429eaa4c01f91e..a750918d526380 100644 --- a/files/ja/web/html/attributes/max/index.md +++ b/files/ja/web/html/attributes/max/index.md @@ -1,11 +1,13 @@ --- title: "HTML 属性: max" slug: Web/HTML/Attributes/max +l10n: + sourceCommit: cfcbb39cc595bd536b107f6771bfb3f8e13bacca --- {{HTMLSidebar}} -**`max`** 属性は、その属性を含む入力に対して許容可能で有効な最大値を定義します。要素の値 ([`value`](/ja/docs/Web/HTML/Element/input#value)) がこれより大きい場合、その要素は[制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation)に失敗します。この値は、 [`min`](min) 属性の値以上でなければなりません。 `max` 属性が指定されていないか無効であった場合、 `max` 値は適用されません。 `max` 属性が有効で、値が空でなく、 `max` 属性によって許容される最大値よりも大きい場合、制約検証によってフォームの送信が阻止されます。 +**`max`** 属性は、その属性を含む入力に対して許容可能で有効な最大値を定義します。要素の値 ([`value`](/ja/docs/Web/HTML/Element/input#value)) がこれより大きい場合、その要素は[制約検証](/ja/docs/Learn/Forms/Form_validation)に失敗します。この値は、 [`min`](min) 属性の値以上でなければなりません。 `max` 属性が指定されていないか無効であった場合、 `max` 値は適用されません。 `max` 属性が有効で、値が空でなく、 `max` 属性によって許容される最大値よりも大きい場合、制約検証によってフォームの送信が阻止されます。 これは数値入力型、例えば {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}}, {{HTMLElement("input/range", "range")}} 型や {{htmlelement('progress')}} および {{htmlelement('meter')}} 要素で有効であり、 `max` 属性はフォームコントロールで妥当と見なされる最も大きな値を指定する数値です。 @@ -73,7 +75,7 @@ slug: Web/HTML/Attributes/max > **メモ:** ユーザーが入力したデータが設定された最大値を満たしていない場合、制約検証では無効とみなされ、 {{cssxref(':invalid')}} と {{cssxref(':out-of-range')}} の擬似クラスに一致するようになります。 -詳しくは [クライアント側検証](/ja/docs/Web/Guide/HTML/Constraint_validation)と {{domxref("ValidityState.rangeOverflow", "rangeOverflow")}} を参照してください。 +詳しくは [クライアント側検証](/ja/docs/Web/HTML/Constraint_validation)と {{domxref("ValidityState.rangeOverflow", "rangeOverflow")}} を参照してください。 {{htmlelement('progress')}} 要素における `max` 属性は、 `progress` 要素で示されたタスクの作業の必要量を記述します。存在する場合、ゼロより大きい値を持ち、有効な浮動小数点数でなければなりません。 {{htmlelement('meter')}} 要素における `max` 属性は、測定範囲の上限の数値を定義します。これは、指定されている場合、最小値（[`min`](/ja/docs/Web/HTML/Attributes/min) 属性）よりも大きくなければなりません。どちらの場合も、省略された場合、値は既定で 1 となります。 @@ -129,8 +131,8 @@ slug: Web/HTML/Attributes/max - [`step`](/ja/docs/Web/HTML/Attributes/step) - [`min`](/ja/docs/Web/HTML/Attributes/min) - 他の meter の属性: [`low`](/ja/docs/Web/HTML/Attributes/low), [`high`](/ja/docs/Web/HTML/Attributes/high), [`optimum`](/ja/docs/Web/HTML/Attributes/optimum) -- [制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation) -- [制約検証 API](/ja/docs/Web/API/Constraint_validation) +- [制約検証](/ja/docs/Web/HTML/Constraint_validation) +- [制約検証 API](/ja/docs/Learn/Forms/Form_validation) - {{domxref('validityState.rangeOverflow')}} - {{cssxref(':out-of-range')}} - {{htmlelement('input')}} diff --git a/files/ja/web/html/attributes/maxlength/index.md b/files/ja/web/html/attributes/maxlength/index.md index e19e9da1dcc26f..f522817ba4297b 100644 --- a/files/ja/web/html/attributes/maxlength/index.md +++ b/files/ja/web/html/attributes/maxlength/index.md @@ -1,6 +1,8 @@ --- title: "HTML 属性: maxlength" slug: Web/HTML/Attributes/maxlength +l10n: + sourceCommit: cfcbb39cc595bd536b107f6771bfb3f8e13bacca --- {{HTMLSidebar}} @@ -15,6 +17,8 @@ maxlength が指定されなかった場合、または無効な値が指定さ ブラウザーは一般的に、 maxlength 属性が許可する以上のテキストをユーザーが入力することを防止しますが、長さが maxlength が許可しているよりも長くなった場合、 {{domxref("ValidityState")}} オブジェクトの読み取り専用の {{domxref("ValidityState.tooLong", "tooLong")}} プロパティが true になります。 +{{EmbedInteractiveExample("pages/tabbed/attribute-maxlength.html", "tabbed-shorter")}} + ## 例 ```html @@ -36,6 +40,6 @@ maxlength が指定されなかった場合、または無効な値が指定さ - [`minlength`](/ja/docs/Web/HTML/Attributes/minlength) - [`size`](/ja/docs/Web/HTML/Attributes/size) - [`pattern`](/ja/docs/Web/HTML/Attributes/pattern) -- [制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation) -- [制約検証 API](/ja/docs/Web/API/Constraint_validation) +- [制約検証](/ja/docs/Web/HTML/Constraint_validation) +- [制約検証 API](/ja/docs/Learn/Forms/Form_validation) - {{htmlelement('input')}} diff --git a/files/ja/web/html/attributes/min/index.md b/files/ja/web/html/attributes/min/index.md index 65209e6c8d42a6..7decb07cb0299b 100644 --- a/files/ja/web/html/attributes/min/index.md +++ b/files/ja/web/html/attributes/min/index.md @@ -1,11 +1,15 @@ --- title: "HTML 属性: min" slug: Web/HTML/Attributes/min +l10n: + sourceCommit: cfcbb39cc595bd536b107f6771bfb3f8e13bacca --- {{HTMLSidebar}} -**`min`** 属性は、その属性を含む入力欄に対して許容できる有効な最小値を定義します。要素の値 ([`value`](/ja/docs/Web/HTML/Element/input#attr-value)) がこれより大きい場合、その要素は[制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation)に失敗します。この値は、 `max` 属性の値以下でなければなりません。 `min` 属性が指定されていないか無効であった場合、最小値は適用されません。 +**`min`** 属性は、その属性を含む入力欄に対して許容できる有効な最小値を定義します。要素の値 ([`value`](/ja/docs/Web/HTML/Element/input#value)) がこれより小さい場合、その要素は[制約検証](/ja/docs/Learn/Forms/Form_validation)に失敗します。この値は、`max` 属性の値以下でなければなりません。 + +入力欄の種類によっては既定の最小値があるものもあります。入力欄に既定の最小値がなく、 `min` に有効な数値に変換できない値が指定された場合（あるいは最小値が設定されなかった場合）、その入力には最小値が設定されません。 これは数値入力型、例えば {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}}, {{HTMLElement("input/range", "range")}} 型や {{htmlelement('meter')}} 要素で有効であり、 `min` 属性はフォームコントロールで妥当と見なされる最も小さな値を指定する数値です。 @@ -71,7 +75,7 @@ slug: Web/HTML/Attributes/min > **メモ:** ユーザーが入力したデータが設定された最大値を満たしていない場合、制約検証では無効とみなされ、 {{cssxref(':invalid')}} の擬似クラスに一致するようになります。 -詳しくは [クライアント側検証](/ja/docs/Web/Guide/HTML/Constraint_validation)と {{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}} を参照してください。 +詳しくは [クライアント側検証](/ja/docs/Web/HTML/Constraint_validation)と {{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}} を参照してください。 {{htmlelement('meter')}} 要素における `min` 属性は、測定範囲の上限の数値を定義します。これは、指定されている場合、最大値 ([`max`](/ja/docs/Web/HTML/Attributes/max) 属性) よりも小さくなければなりません。どちらの場合も、省略された場合、値は既定で 1 となります。 @@ -141,8 +145,8 @@ input:invalid { - [`step`](/ja/docs/Web/HTML/Attributes/step) - [`max`](/ja/docs/Web/HTML/Attributes/max) - その他の meter 属性: [`low`](/ja/docs/Web/HTML/Attributes/low), [`high`](/ja/docs/Web/HTML/Attributes/high), [`optimum`](/ja/docs/Web/HTML/Attributes/optimum) -- [制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation) -- [制約検証 API](/ja/docs/Web/API/Constraint_validation) +- [制約検証](/ja/docs/Web/HTML/Constraint_validation) +- [制約検証 API](/ja/docs/Learn/Forms/Form_validation) - {{domxref('validityState.rangeUnderflow')}} - {{cssxref(':out-of-range')}} - {{htmlelement('input')}} diff --git a/files/ja/web/html/attributes/minlength/index.md b/files/ja/web/html/attributes/minlength/index.md index aa3f8a14328283..fbd64fafa83a0c 100644 --- a/files/ja/web/html/attributes/minlength/index.md +++ b/files/ja/web/html/attributes/minlength/index.md @@ -1,14 +1,18 @@ --- title: "HTML 属性: minlength" slug: Web/HTML/Attributes/minlength +l10n: + sourceCommit: cfcbb39cc595bd536b107f6771bfb3f8e13bacca --- {{HTMLSidebar}} -**`minlength`** 属性は、ユーザーが {{htmlelement('input')}} または {{htmlelement('textarea')}} に入力できる最小文字数を (UTF-16 コード単位で) 定義します。 0 以上の整数値である必要があります。 minlength が指定されなかった場合、または無効な値が指定された場合は、入力欄には最小文字数が設定されません。この値は [maxlength](/ja/docs/Web/HTML/Attributes/maxlength) の値以下である必要があります。そうでなければどちらの条件にも合わせることができないので、この値が有効になることはありません。 +**`minlength`** 属性は、ユーザーが {{htmlelement('input')}} または {{htmlelement('textarea')}} に入力できる最小文字数を（UTF-16 コード単位で）定義します。 0 以上の整数値である必要があります。 minlength が指定されなかった場合、または無効な値が指定された場合は、入力欄には最小文字数が設定されません。この値は [maxlength](/ja/docs/Web/HTML/Attributes/maxlength) の値以下である必要があります。そうでなければどちらの条件にも合わせることができないので、この値が有効になることはありません。 フィールドのテキスト値の長さが minlength を UTF-16 コード単位の長さで下回った場合、入力欄は制約検証に失敗し、 {{domxref('validityState.tooShort')}} が `true` を返します。制約検証は、ユーザーが値を変更した場合にのみ適用されます。送信に失敗すると、ブラウザーによっては必要な最小文字列と現在の長さを示してエラーメッセージを表示します。 +{{EmbedInteractiveExample("pages/tabbed/attribute-minlength.html", "tabbed-shorter")}} + ## 例 `minlength="5"` を追加すると、値は空か 5 文字以上でないと有効にはならなくなります。 @@ -18,7 +22,7 @@ slug: Web/HTML/Attributes/minlength <input type="text" minlength="5" id="fruit" /> ``` -擬似クラスを使用すると、要素を値が有効かどうかによってスタイル付けすることができます。この値は null (空欄) または 5 文字以上であれば有効になります。*ライム色*は無効であり、_レモン色は有効です_。 +擬似クラスを使用すると、要素を値が有効かどうかによってスタイル付けすることができます。この値は null （空欄）または 5 文字以上であれば有効になります。*ライム色*は無効であり、_レモン色は有効です_。 ```css input { @@ -47,6 +51,6 @@ input:invalid:focus { - [`maxlength`](/ja/docs/Web/HTML/Attributes/maxlength) - [`size`](/ja/docs/Web/HTML/Attributes/size) - [`pattern`](/ja/docs/Web/HTML/Attributes/pattern) -- [制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation) -- [制約検証 API](/ja/docs/Web/API/Constraint_validation) +- [制約検証](/ja/docs/Web/HTML/Constraint_validation) +- [制約検証 API](/ja/docs/Learn/Forms/Form_validation) - {{htmlelement('input')}} diff --git a/files/ja/web/html/attributes/multiple/index.md b/files/ja/web/html/attributes/multiple/index.md index fbe61ac7f2270d..b2166cbb123fe8 100644 --- a/files/ja/web/html/attributes/multiple/index.md +++ b/files/ja/web/html/attributes/multiple/index.md @@ -1,23 +1,29 @@ --- title: "HTML 属性: multiple" slug: Web/HTML/Attributes/multiple +l10n: + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} 論理属性の **`multiple`** 属性は、設定されている場合、フォームコントロールが 1 つ以上の値を受け入れることを意味します。 {{HTMLElement("input/email", "email")}} と {{HTMLElement("input/file", "file")}} の入力型と {{HTMLElement("select")}} に対して有効で、ユーザーが複数の値を選択する方法はフォームコントロールに依存します。 +{{EmbedInteractiveExample("pages/tabbed/attribute-multiple.html", "tabbed-standard")}} + +## 概要 + 型によっては、`multiple` 属性が設定されている場合、フォームコントロールの外観が変わる場合があります。 file 入力型については、ブラウザーが提供するネイティブのメッセージが異なります。 Firefox では、ファイルが選択されていないとき、この属性が設定されていると「ファイルが選択されていません」、設定されていない場合は「ファイルが選択されていません」となります（訳注：英語では file と files の違いがありますが、日本語ではメッセージの違いはありません）。ほとんどのブラウザーでは、 {{HTMLElement("select")}} コントロールに `multiple` 属性が設定されていると、スクロールするリストボックスを表示するのに対し、設定されていない場合は単一行のドロップダウンを表示します。 {{HTMLElement("input/email", "email")}} 入力は同じ表示ですが、この属性が設定されていない場合は、カンマ区切りで複数のメールアドレスが設定されていると {{cssxref(':invalid')}} 擬似クラスに一致します。 -`multiple` が {{HTMLElement("input/email", "email")}} 入力型に設定されている場合、ユーザーは 0 個 ([`required`](/ja/docs/Web/HTML/Attributes/required) がない場合)、1 個、またはそれ以上のカンマ区切りのメールアドレスを入れることができます。 +`multiple` が {{HTMLElement("input/email", "email")}} 入力型に設定されている場合、ユーザーは 0 個（[`required`](/ja/docs/Web/HTML/Attributes/required) がない場合）、1 個、またはそれ以上のカンマ区切りのメールアドレスを入れることができます。 ```html <input type="email" multiple name="emails" id="emails" /> ``` -`multiple` 属性が指定された場合のみ、値はカンマで区切られた適切な形式のメールアドレスのリストになります。リスト内の各アドレスから、末尾と先頭の空白はすべて削除されます。 +`multiple` 属性が指定された場合のみ、値はカンマで区切られた適切な形式のメールアドレスのリストになります。リスト内の各アドレスから、末尾と先頭のホワイトスペースはすべて削除されます。 -`multiple` が {{HTMLElement("input/file", "file")}} 入力型に設定された場合、ユーザーは 1 つ以上のファイルを選択することができます。ユーザーはファイルピッカーから複数のファイルを、選択したプラットフォームが許可する任意の方法 (<kbd>Shift</kbd> か <kbd>Control</kbd> を押したまま、それからクリックするなど) で選択することができます。 +`multiple` が {{HTMLElement("input/file", "file")}} 入力型に設定された場合、ユーザーは 1 つ以上のファイルを選択することができます。ユーザーはファイルピッカーから複数のファイルを、選択したプラットフォームが許可する任意の方法（<kbd>Shift</kbd> か <kbd>Control</kbd> を押したまま、それからクリックするなど）で選択することができます。 ```html <input type="file" multiple name="uploads" id="uploads" /> @@ -28,7 +34,7 @@ slug: Web/HTML/Attributes/multiple `multiple` 属性を {{HTMLElement("select")}} 要素に設定すると、選択肢のリストから 0 個以上の選択肢を選択するためのコントロールを表します。それ以外の場合、 {{HTMLElement("select")}} 要素は、選択肢のリストから単一の {{HTMLElement("option")}} を選択するためのコントロールを表します。 ```html -<select multiple name="drawfs" id="drawfs"> +<select multiple name="dwarfs" id="dwarfs"> <option>Grumpy</option> <option>Happy</option> <option>Sleepy</option> @@ -58,11 +64,11 @@ slug: Web/HTML/Attributes/multiple multiple name="emails" id="emails" - list="drawfemails" + list="dwarf-emails" required size="64" /> -<datalist id="drawfemails"> +<datalist id="dwarf-emails"> <option value="grumpy@woodworkers.com">Grumpy</option> <option value="happy@woodworkers.com">Happy</option> <option value="sleepy@woodworkers.com">Sleepy</option> @@ -92,7 +98,7 @@ input:invalid { ```html <form method="post" enctype="multipart/form-data"> <p> - <label for="uploads"> アップロードする画像を選択してください: </label> + <label for="uploads">アップロードする画像を選択してください: </label> <input type="file" id="uploads" @@ -116,7 +122,7 @@ input:invalid { `multiple` が設定された `file` 入力欄と、設定されていない入力欄との外見の違いに注意してください。 -フォームが送信されたとき、 [`method="get"`](/ja/docs/Web/HTML/Element/form) を使用していれば、選択された各ファイルの名前が URL パラメータに`?uploads=img1.jpg&uploads=img2.svg` のように追加されていたはずです。しかし、[マルチパート](/ja/docs/Web/API/XMLHttpRequest/multipart)のフォームデータを送信しているので、post を多用しています。詳しくは {{htmlelement('form')}} 要素と[フォームデータの送信](/ja/docs/Learn/Forms/Sending_and_retrieving_form_data#The_method_attribute)を参照してください。 +フォームが送信されたとき、 [`method="get"`](/ja/docs/Web/HTML/Element/form) を使用していれば、選択された各ファイルの名前が URL 引数に `?uploads=img1.jpg&uploads=img2.svg` のように追加されていたはずです。しかし、[マルチパート](/ja/docs/Web/API/XMLHttpRequest/multipart)のフォームデータを送信しているので、post を使用しています。詳しくは {{htmlelement('form')}} 要素と[フォームデータの送信](/ja/docs/Learn/Forms/Sending_and_retrieving_form_data#method_属性)を参照してください。 ### select @@ -125,8 +131,8 @@ input:invalid { ```html <form method="get" action="#"> <p> - <label for="dwarfs">好きな木こりを選ぶ:</label> - <select multiple name="drawfs" id="drawfs"> + <label for="dwarfs">好きなドワーフの木こりを選んでください:</label> + <select multiple name="dwarfs" id="dwarfs"> <option>grumpy@woodworkers.com</option> <option>happy@woodworkers.com</option> <option>sleepy@woodworkers.com</option> @@ -137,7 +143,7 @@ input:invalid { </select> </p> <p> - <label for="favoriteOnly">好きなものを選ぶ:</label> + <label for="favoriteOnly">好きなものを選んでください:</label> <select name="favoriteOnly" id="favoriteOnly"> <option>grumpy@woodworkers.com</option> <option>happy@woodworkers.com</option> @@ -183,4 +189,4 @@ select[multiple]:active { - {{htmlelement('input')}} - {{htmlelement('select')}} -- [複数のメールアドレスの許可](/ja/docs/Web/HTML/Element/input/email#Allowing_multiple_e-mail_addresses) +- [複数のメールアドレスの許可](/ja/docs/Web/HTML/Element/input/email#複数のメールアドレスの許可) diff --git a/files/ja/web/html/attributes/pattern/index.md b/files/ja/web/html/attributes/pattern/index.md index 20fc310a66deb1..9a4c7d4e1fe003 100644 --- a/files/ja/web/html/attributes/pattern/index.md +++ b/files/ja/web/html/attributes/pattern/index.md @@ -1,21 +1,27 @@ --- -title: "HTML attribute: pattern" +title: "HTML 属性: pattern" slug: Web/HTML/Attributes/pattern +l10n: + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} -**`pattern`** 属性は、フォームコントロールの値が一致すべき[正規表現](/ja/docs/Web/JavaScript/Guide/Regular_Expressions)を指定します。 `null` 以外の値が `pattern` 値によって設定された制約に適合しない場合、 {{domxref('ValidityState')}} オブジェクトの読み取り専用の {{domxref('ValidityState.patternMismatch','patternMismatch')}} プロパティが真になります。 +**`pattern`** 属性は、フォームコントロールの値が一致すべき[正規表現](/ja/docs/Web/JavaScript/Guide/Regular_Expressions)を指定します。`null` 以外の値が `pattern` 値によって設定された制約に適合しない場合、{{domxref('ValidityState')}} オブジェクトの読み取り専用の {{domxref('ValidityState.patternMismatch','patternMismatch')}} プロパティが真になります。 -`pattern`属性は {{HTMLElement("input/text", "text")}}, {{HTMLElement("input/tel", "tel")}}, {{HTMLElement("input/email", "email")}}, {{HTMLElement("input/url", "url")}}, {{HTMLElement("input/password", "password")}}, {{HTMLElement("input/search", "search")}} の入力型の属性です。 +{{EmbedInteractiveExample("pages/tabbed/attribute-pattern.html", "tabbed-shorter")}} -`pattern`属性は、[制約検証](/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation)を通過させるために、入力の [`value`](/ja/docs/Web/HTML/Element/input#value) が一致するべき正規表現です。これは有効な JavaScript の正規表現でなければならず、 {{jsxref("RegExp")}} 型で使用されたり、 [正規表現ガイド](/ja/docs/Web/JavaScript/Guide/Regular_Expressions)で説明されているものと同じものです。通り正規表現をコンパイルする際に `'u'` フラグを指定することで、パターンが ASCII ではなく Unicode コードポイントの並びとして扱われるようになります。パターンテキストの周りには、スラッシュを指定してはいけません。 +## 概要 + +`pattern` 属性は {{HTMLElement("input/text", "text")}}, {{HTMLElement("input/tel", "tel")}}, {{HTMLElement("input/email", "email")}}, {{HTMLElement("input/url", "url")}}, {{HTMLElement("input/password", "password")}}, {{HTMLElement("input/search", "search")}} の入力型の属性です。 + +`pattern` 属性は、[制約検証](/ja/docs/Web/HTML/Constraint_validation)を通過させるために、入力の {{htmlattrxref("value")}} が一致するべき正規表現です。これは有効な JavaScript の正規表現でなければならず、 {{jsxref("RegExp")}} 型で使用されたり、[正規表現ガイド](/ja/docs/Web/JavaScript/Guide/Regular_Expressions)で説明されているものと同じものです。正規表現をコンパイルする際に `'u'` フラグが指定されるので、パターンが ASCII ではなく Unicode コードポイントの並びとして扱われるようになります。パターンテキストの周りには、スラッシュを指定してはいけません。 パターンが指定されていないか無効な場合、正規表現は適用されず、この属性は無視されます。 > **メモ:** [`title`](/ja/docs/Web/HTML/Element/input#title) 属性を使用すると、ほとんどのブラウザーがパターンに一致するための要件を説明するためにツールチップとして表示するテキストを指定することができます。説明をツールチップだけに頼っては**いけません**。ユーザービリティについての詳細は以下を参照してください。 -pattern 属性に対応している入力型の中には、特に {{HTMLElement("input/email", "email")}} および {{HTMLElement("input/url", "url")}} 入力型のように、一致しなければならない期待値の構文を持っているものがあります。 pattern 属性が存在せず、値がその値型の期待される構文と一致しない場合、 {{domxref('ValidityState')}} オブジェクトの読み取り専用の {{domxref('ValidityState.typeMismatch','typeMismatch')}} プロパティが真になります。 +pattern 属性に対応している入力型の中には、特に {{HTMLElement("input/email", "email")}} および {{HTMLElement("input/url", "url")}} 入力型のように、一致しなければならない期待値の構文を持っているものがあります。 pattern 属性が存在せず、値がその値型の期待される構文と一致しない場合、 {{domxref('ValidityState')}} オブジェクトの読み取り専用の {{domxref('ValidityState.typeMismatch','typeMismatch')}} プロパティが true になります。 ### ユーザービリティ @@ -23,23 +29,27 @@ pattern 属性に対応している入力型の中には、特に {{HTMLElement( ### 制約検証 -入力欄の値が空文字列ではなく、正規表現全体と一致しない場合は、 {{domxref('ValidityState.patternMismatch','patternMismatch')}} が真になります。 -pattern の正規表現は、値に一致したときに、先頭が文字列の先頭に該当し、末尾が文字列の末尾に該当するため、これは JavaScript の正規表現とは少し異なります。 pattern 属性の場合、パターンの先頭に `^(?:` が、末尾に `)$` が指定されているかのように、値の部分ではなく全体に一致します。 +入力の値が空文字列でなく、正規表現全体に一致しない場合、{{domxref('ValidityState')}} オブジェクトの {{domxref('ValidityState.patternMismatch','patternMismatch')}} プロパティが `true` になって報告される制約違反が存在することになります。。 +パターンの正規表現は、値に対して照合されるとき、その始まりが文字列の始まりに、その終わりが文字列の終わりに固定されます。これは、JavaScript の正規表現と少し異なります。pattern 属性の場合、値のどこか一部ではなく値全体に対して照合され、まるでパターンの先頭に `^(?:` が、末尾に `)$` があるかのようになります。 + +> **メモ:** `pattern` 属性が値なしで指定された場合、その値は暗黙的に空文字列となります。したがって、**空でない**入力欄の `value` は制約に違反することになります。 ## 例 -以下ののものを考えてみてください。 +### 電話番号の照合 + +以下のものを考えてみてください。 ```html <p> - <label - >Enter your phone number in the format (123)456-7890 (<input + <label> + Enter your phone number in the format (123) - 456 - 7890 (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" - size="2" />)- + size="2" />) - <input name="tel2" type="tel" @@ -59,7 +69,7 @@ pattern の正規表現は、値に一致したときに、先頭が文字列の </p> ``` -ここでは北米の電話番号を示す 3 つの部分があり、電話番号の 3 つの構成要素すべてを含む暗黙のラベルがありますが、それぞれ 3 桁、3 桁、4 桁で [`pattern`](/ja/docs/Web/HTML/Attributes/pattern) 属性によってそれぞれ設定されています。 +ここでは北米の電話番号を示す 3 つの部分があり、電話番号の 3 つの構成要素すべてを含む暗黙のラベルがありますが、それぞれ 3 桁、3 桁、4 桁で `pattern` 属性によってそれぞれ設定されています。 値が長すぎたり短すぎたり、数字ではない文字が含まれていたりすると、 patternMismatch が true になります。 `true` の場合、要素は CSS の {{cssxref(":invalid")}} 擬似クラスに一致します。 @@ -69,13 +79,13 @@ input:invalid { } ``` -{{EmbedLiveSample("example1", 300, 40)}} +{{EmbedLiveSample("Matching_a_phone_number", 300, 80)}} 代わりに [`minlength`](/ja/docs/Web/HTML/Attributes/minlength) と [`maxlength`](/ja/docs/Web/HTML/Attributes/maxlength) 属性を用いた場合、 {{domxref('validityState.tooLong')}} または {{domxref('validityState.tooShort')}} が true になります。 ### パターンの指定 -[`pattern`](/ja/docs/Web/HTML/Element/input#pattern) 属性を使用すると、入力された値が有効とみなされるために一致しなければならない正規表現を指定することができます（正規表現を使用して入力を検証する簡単な集中講座は、[正規表現での検証](/ja/docs/Learn/Forms/Form_validation#正規表現での検証)を参照してください）。 +{{htmlattrxref("pattern", "input")}} 属性を使用すると、入力された値が有効とみなされるために一致しなければならない正規表現を指定することができます（正規表現を使用して入力を検証する簡単な集中講座は、[正規表現での検証](/ja/docs/Learn/Forms/Form_validation#正規表現での検証)を参照してください）。 以下の例では、値を 4-8 文字に制限し、小文字のみを含むことを要求しています。 @@ -115,13 +125,13 @@ input + span { padding-right: 30px; } -input:invalid + span:after { +input:invalid + span::after { position: absolute; content: "✖"; padding-left: 5px; } -input:valid + span:after { +input:valid + span::after { position: absolute; content: "✓"; padding-left: 5px; @@ -148,6 +158,6 @@ This renders like so: ## 関連情報 -- [Constraint validation](/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation) -- [Forms: Data form validation](/ja/docs/Web/Guide/HTML/Forms/Data_form_validation) -- [Regular Expressions](/ja/docs/Web/JavaScript/Guide/Regular_Expressions) +- [制約検証](/ja/docs/Web/HTML/Constraint_validation) +- [フォーム: データフォーム検証](/ja/docs/Learn/Forms/Form_validation) +- [正規表現](/ja/docs/Web/JavaScript/Guide/Regular_Expressions) diff --git a/files/ja/web/html/attributes/readonly/index.md b/files/ja/web/html/attributes/readonly/index.md index 0f069514b1e91c..4c790a12f5e861 100644 --- a/files/ja/web/html/attributes/readonly/index.md +++ b/files/ja/web/html/attributes/readonly/index.md @@ -1,19 +1,25 @@ --- title: "HTML 属性: readonly" slug: Web/HTML/Attributes/readonly +l10n: + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} **`readonly`** は論理属性で、存在する場合、要素が変更可能ではなくなり、ユーザーがそのコントロールを編集できなくなります。 +{{EmbedInteractiveExample("pages/tabbed/attribute-readonly.html", "tabbed-shorter")}} + +## 概要 + `readonly` 属性が input 要素に指定された場合、その入力欄をユーザーが編集できないので、その要素は制約検証が行われません。 -`readonly` 属性はフォームコントロールの `{{HTMLElement("input/text","text")}}`, `{{HTMLElement("input/search","search")}}`, `{{HTMLElement("input/url","url")}}`, `{{HTMLElement("input/tel","tel")}}`, `{{HTMLElement("input/email","email")}}`, `{{HTMLElement("input/password","password")}}`, `{{HTMLElement("input/date","date")}}`, `{{HTMLElement("input/month","month")}}`, `{{HTMLElement("input/week","week")}}`, `{{HTMLElement("input/time","time")}}`, `{{HTMLElement("input/datetime-local","datetime-local")}}`, `{{HTMLElement("input/number","number")}}` の `{{HTMLElement("input")}}` 型と `{{HTMLElement("textarea")}}` 要素が対応しています。これらの入力型や要素のいずれかに設定された場合、 `{{cssxref(':read-only')}}` 擬似クラスが一致します。この属性が含まれなかった場合は、 `{{cssxref(':read-write')}}` 擬似クラスが一致します。 +`readonly` 属性はフォームコントロールの `{{HTMLElement("input/text","text")}}`, `{{HTMLElement("input/search","search")}}`, `{{HTMLElement("input/url","url")}}`, `{{HTMLElement("input/tel","tel")}}`, `{{HTMLElement("input/email","email")}}`, `{{HTMLElement("input/password","password")}}`, `{{HTMLElement("input/date","date")}}`, `{{HTMLElement("input/month","month")}}`, `{{HTMLElement("input/week","week")}}`, `{{HTMLElement("input/time","time")}}`, `{{HTMLElement("input/datetime-local","datetime-local")}}`, `{{HTMLElement("input/number","number")}}` の `{{HTMLElement("input")}}` 型と `{{HTMLElement("textarea")}}` 要素が対応しています。これらの入力型や要素のいずれかに設定された場合、`{{cssxref(':read-only')}}` 擬似クラスが一致します。この属性が含まれなかった場合は、`{{cssxref(':read-write')}}` 擬似クラスが一致します。 -この属性は `{{HTMLElement("select")}}` や、 {{HTMLElement("input/checkbox","checkbox")}} や {{HTMLElement("input/radio","radio")}} のように既に変更不可能な入力型、 {{HTMLElement("input/file","file")}} 入力型のように定義上初期状態で値を設定できない入力型は対応していません。 {{HTMLElement("input/range","range")}} や {{HTMLElement("input/color","color")}} は、どちらも既定値があります。 {{HTMLElement("input/hidden","hidden")}} も、非表示であればユーザーが値を入力することが期待できないので対応していません。ボタン型も、 `image` を含め、すべて対応していません。 +この属性は `{{HTMLElement("select")}}` や、 {{HTMLElement("input/checkbox","checkbox")}} や {{HTMLElement("input/radio","radio")}} のように既に変更不可能な入力型、{{HTMLElement("input/file","file")}} 入力型のように定義上初期状態で値を設定できない入力型は対応していません。{{HTMLElement("input/range","range")}} や {{HTMLElement("input/color","color")}} は、どちらも既定値があります。{{HTMLElement("input/hidden","hidden")}} も、非表示であればユーザーが値を入力することが期待できないので対応していません。ボタン型も、`image` を含め、すべて対応していません。 -> **メモ:** テキストコントロールだけが読み取り専用にすることができます。他のコントロール (チェックボックスやボタンなど) は、読み取り専用と無効との間に有用な違いがないため、 `readonly` 属性は適用されません。 +> **メモ:** テキストコントロールだけが読み取り専用にすることができます。他のコントロール（チェックボックスやボタンなど）は、読み取り専用と無効との間に有用な違いがないため、 `readonly` 属性は適用されません。 入力に `readonly` 属性が設定されている場合、 {{cssxref(":read-only")}} 擬似クラスも適用されます。逆に、 `readonly` 属性に対応していても、この属性が設定されていない入力欄は、 {{cssxref(":read-write")}} 擬似クラスに一致します。 @@ -29,7 +35,7 @@ readonly が付いた値を動的に変更できる唯一の方法は、スク ### ユーザビリティ -ブラウザーは `readonly` 属性を表示します... +ブラウザーは `readonly` 属性を表示します。 ### 制約検証 diff --git a/files/ja/web/html/attributes/required/index.md b/files/ja/web/html/attributes/required/index.md index d1a9d216396224..4be75d16fb4619 100644 --- a/files/ja/web/html/attributes/required/index.md +++ b/files/ja/web/html/attributes/required/index.md @@ -1,23 +1,25 @@ --- title: "HTML 属性: required" slug: Web/HTML/Attributes/required +l10n: + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} -論理属性の **`required`** 属性は、存在する場合、所有するフォームを送信する前にユーザーが入力に値を指定しなければならないことを示します。 `required` 属性は `{{HTMLElement("input/text","text")}}`, `{{HTMLElement("input/search","search")}}`, `{{HTMLElement("input/url","url")}}`, `{{HTMLElement("input/tel","tel")}}`, `{{HTMLElement("input/email","email")}}`, `{{HTMLElement("input/password","password")}}`, `{{HTMLElement("input/date","date")}}`, `{{HTMLElement("input/month","month")}}`, `{{HTMLElement("input/week","week")}}`, `{{HTMLElement("input/time","time")}}`, `{{HTMLElement("input/datetime-local","datetime-local")}}`, `{{HTMLElement("input/number","number")}}`, `{{HTMLElement("input/checkbox","checkbox")}}`, `{{HTMLElement("input/radio","radio")}}`, `{{HTMLElement("input/file","file")}}` の {{HTMLElement("input")}} 型と {{HTMLElement("select")}} および {{HTMLElement("textarea")}} のフォームコントロール要素で対応しています。これらの入力型や要素の何れかに設定された場合、 {{cssxref(':required')}} 擬似クラスが一致します。属性が設定されていない場合は {{cssxref(':optional')}} 擬似クラスが一致します。 +論理属性の **`required`** 属性は、存在する場合、所有するフォームを送信する前にユーザーが入力に値を指定しなければならないことを示します。 + +`required` 属性は `{{HTMLElement("input/text","text")}}`, `{{HTMLElement("input/search","search")}}`, `{{HTMLElement("input/url","url")}}`, `{{HTMLElement("input/tel","tel")}}`, `{{HTMLElement("input/email","email")}}`, `{{HTMLElement("input/password","password")}}`, `{{HTMLElement("input/date","date")}}`, `{{HTMLElement("input/month","month")}}`, `{{HTMLElement("input/week","week")}}`, `{{HTMLElement("input/time","time")}}`, `{{HTMLElement("input/datetime-local","datetime-local")}}`, `{{HTMLElement("input/number","number")}}`, `{{HTMLElement("input/checkbox","checkbox")}}`, `{{HTMLElement("input/radio","radio")}}`, `{{HTMLElement("input/file","file")}}` の {{HTMLElement("input")}} 型と {{HTMLElement("select")}} および {{HTMLElement("textarea")}} のフォームコントロール要素で対応しています。これらの入力型や要素の何れかに設定された場合、 {{cssxref(':required')}} 擬似クラスが一致します。属性が設定されていない場合は {{cssxref(':optional')}} 擬似クラスが一致します。 この属性は {{HTMLElement("input/range","range")}} と {{HTMLElement("input/color","color")}} は対応していませんし、どちらも既定値を持っているので関係がありません。 {{HTMLElement("input/hidden","hidden")}} は、非表示のフォームにユーザーが記入することを期待できないため、対応していません。また、 `image` を含むボタンの種類もいずれも対応していません。 なお、 `color` と `range` は `required` に対応していませんが、 `color` 型は既定値が `#000000` であり、 `range` は、 `min` と `max` の中間点が既定値です。 — 宣言されていない場合、ほとんどのブラウザーでは `min` と `max` の既定値はそれぞれ 0 と 100 です。 — 従って、常に値があります。 -入力欄に `required` 属性がある場合、 {{cssxref(":required")}} 擬似クラスも適用されます。逆に、 `required` 属性に対応していて、この属性が設定されていない入力欄は、 {{cssxref(":optional")}} 擬似クラスに一致します。 - 同じ名前が付けられた {{HTMLElement("input/radio","radio")}} ボタンのグループのでは、グループ内の一つのラジオボタンに `required` 属性が設定されていた場合、この属性が設定されているものでなくても構わないのですが、グループ内のラジオボタンの一つをチェックする必要があります。そのため、コードの保守性を向上させるために、グループ内の同じ名前のラジオボタンすべてに `required` 属性を設定するか、またはどれにも設定しないようにすることをお勧めします。 同じ名前が付けられた {{HTMLElement("input/checkbox","checkbox")}} 入力型のグループでは、 `required` 属性がついたチェックボックスのみが必須になります。 -> **メモ:** `aria-required="true"` を設定すると、ある要素 (任意の要素) が必須であることを読み上げソフトに伝えますが、その要素が任意であるかどうかには関係ありません。 +> **メモ:** `aria-required="true"` を設定すると、ある要素（任意の要素）が必須であることを画面リーダーに伝えますが、その要素が任意であるかどうかには関係ありません。 ### 属性の相互作用 @@ -25,7 +27,7 @@ slug: Web/HTML/Attributes/required ### ユーザビリティ -`required`属性を設定する、その {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} が必須であることをユーザーに知らせるために、コントロールの近くに目に見える表示を提供してください。さらに、必須フォームコントロールを {{cssxref(':required')}} 擬似クラスでターゲットにし、必須であることを示すようにスタイル付けしてください。これにより、視覚障碍者のユーザーのユーザービリティが向上します。しかし、 `aria-required="true"` を追加しても、ブラウザーと読み上げソフトの組み合わせがまだ `required` に対応していない場合には問題ありません。 +`required`属性を設定する、その {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} が必須であることをユーザーに知らせるために、コントロールの近くに目に見える表示を提供してください。さらに、必須フォームコントロールを {{cssxref(':required')}} 擬似クラスでターゲットにし、必須であることを示すようにスタイル付けしてください。これにより、視覚障碍者のユーザーのユーザービリティが向上します。しかし、 `aria-required="true"` を追加しても、ブラウザーと画面リーダーの組み合わせがまだ `required` に対応していない場合には問題ありません。 ### 制約検証 @@ -55,7 +57,7 @@ slug: Web/HTML/Attributes/required ### 結果 -{{EmbedLiveSample('Examples')}} +{{EmbedLiveSample('Example')}} ## 仕様書 @@ -67,7 +69,7 @@ slug: Web/HTML/Attributes/required ## 関連情報 -- {{cssxref('validityState.valueMissing')}} +- {{domxref('validityState.valueMissing')}} - {{cssxref(':required')}} および {{cssxref(':optional')}} - {{htmlelement('input')}} - {{htmlelement('select')}} diff --git a/files/ja/web/html/attributes/size/index.md b/files/ja/web/html/attributes/size/index.md index 037cc879e2f3b3..0cbaa689a87d3c 100644 --- a/files/ja/web/html/attributes/size/index.md +++ b/files/ja/web/html/attributes/size/index.md @@ -1,6 +1,8 @@ --- title: "HTML 属性: size" slug: Web/HTML/Attributes/size +l10n: + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} @@ -9,6 +11,8 @@ slug: Web/HTML/Attributes/size `size` 属性は制約検証には影響しません。 +{{EmbedInteractiveExample("pages/tabbed/attribute-size.html", "tabbed-standard")}} + ## 例 一部の入力型で `size` を指定すると、入力欄の幅を制御することができます。 select に size を追加すると、閉じた状態のときにいくつの選択肢が見えるかを定義します。 diff --git a/files/ja/web/html/attributes/step/index.md b/files/ja/web/html/attributes/step/index.md index 7e88a2c86b407d..703de8632cd0f4 100644 --- a/files/ja/web/html/attributes/step/index.md +++ b/files/ja/web/html/attributes/step/index.md @@ -1,6 +1,8 @@ --- -title: "HTML attribute: step" +title: "HTML 属性: step" slug: Web/HTML/Attributes/step +l10n: + sourceCommit: cfcbb39cc595bd536b107f6771bfb3f8e13bacca --- {{HTMLSidebar}} @@ -98,7 +100,7 @@ input:invalid { > **メモ:** ユーザーが入力したデータが刻みの設定に従っていない場合、制約検証では無効とみなされ、 {{cssxref(":invalid")}} と {{cssxref(":out-of-range")}} の擬似クラスに一致します。 -詳しくは[クライアント側制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation)と {{domxref("ValidityState.stepMismatch", "stepMismatch")}} を参照してください。 +詳しくは[クライアント側制約検証](/ja/docs/Web/HTML/Constraint_validation)と {{domxref("ValidityState.stepMismatch", "stepMismatch")}} を参照してください。 ## アクセシビリティの考慮 @@ -116,8 +118,8 @@ input:invalid { - [`max`](/ja/docs/Web/HTML/Attributes/max) - [`min`](/ja/docs/Web/HTML/Attributes/min) -- [制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation) -- [制約検証 API](/ja/docs/Web/API/Constraint_validation) +- [制約検証](/ja/docs/Web/HTML/Constraint_validation) +- [制約検証 API](/ja/docs/Learn/Forms/Form_validation) - {{domxref('validityState.stepMismatch')}} - {{cssxref(':out-of-range')}} - {{htmlelement('input')}} diff --git a/files/ja/web/html/element/input/color/index.md b/files/ja/web/html/element/input/color/index.md index b1b43e21a6ee9c..88cf279716f55c 100644 --- a/files/ja/web/html/element/input/color/index.md +++ b/files/ja/web/html/element/input/color/index.md @@ -2,7 +2,7 @@ title: <input type="color"> slug: Web/HTML/Element/input/color l10n: - sourceCommit: 7594b50698a76ce79209b159835e615052915723 + sourceCommit: 1995a9dbe407d9ee41c3b1b50f29e020a85e456a --- {{HTMLSidebar}} @@ -15,49 +15,9 @@ CSS の色表現には他にも色名、関数表記、アルファ値つきの {{EmbedInteractiveExample("pages/tabbed/input-color.html", "tabbed-standard")}} -<table class="properties"> - <tbody> - <tr> - <td><strong><a href="#value">値</a></strong></td> - <td> - 小文字の 16 進数で {{cssxref("<color>")}} を定義する - 7 文字の文字列 - </td> - </tr> - <tr> - <td><strong>イベント</strong></td> - <td> - {{domxref("HTMLElement/change_event", "change")}} および - {{domxref("HTMLElement/input_event", "input")}} - </td> - </tr> - <tr> - <td><strong>対応する共通属性</strong></td> - <td> - <a href="/ja/docs/Web/HTML/Element/input#autocomplete"><code>autocomplete</code></a> および - <a href="/ja/docs/Web/HTML/Element/input#list"><code>list</code></a> - </td> - </tr> - <tr> - <td><strong>IDL 属性</strong></td> - <td><code>list</code> および <code>value</code></td> - </tr> - <tr> - <td><strong>DOM インターフェイス</strong></td> - <td><p>{{domxref("HTMLInputElement")}}</p></td> - </tr> - <tr> - <td><strong>メソッド</strong></td> - <td> - {{domxref("HTMLInputElement.select", "select()")}} - </td> - </tr> - </tbody> -</table> - ## 値 -type が `color` の {{HTMLElement("input")}} 要素の [`value`](/ja/docs/Web/HTML/Element/input#value) は、常に 16 進表記で RGB カラーを特定する 7 文字の文字列になります。入力欄には色を大文字でも小文字でも入力することができ、大文字を指定した場合、小文字に変換して格納されます。これ以外の値や、空の値になることはありません。 +{{HTMLElement("input")}} 要素で型が `color` のものの [`value`](/ja/docs/Web/HTML/Element/input#value) は、常に 16 進表記で RGB カラーを特定する 7 文字の文字列になります。入力欄には色を大文字でも小文字でも入力することができ、大文字を指定した場合、小文字に変換して格納されます。これ以外の値や、空の値になることはありません。 > **メモ:** 有効な、不透明な *16 進表現*の RGB カラーではない値を設定した場合は、結果的に `#000000` に設定されます。特に、CSS で標準化されている色名や、CSS 関数を値の設定に使用することはできません。HTML と CSS は別な言語や仕様であることを考慮していただければお分かりでしょう。加えて、アルファチャネルのある色はサポートされていません。`#009900aa` のような 9 文字の 16 進表記で色を設定すると、結果的に `#000000` に設定されます。 @@ -67,7 +27,7 @@ type が `color` の入力欄は、対応する属性の数が限られている ### 既定の色の設定 -上記の例で既定値を設定するように変更すると、色の部分があらかじめ既定色で塗りつぶされ、カラーピッカーも（もしあれば）その色が既定になります。 +上記の例で既定値を設定するように変更すると、カラーピッカーがあらかじめ既定色で塗りつぶされ、カラーピッカーも（もしあれば）その色が既定になります。 ```html <input type="color" value="#ff0000" /> @@ -101,7 +61,7 @@ function watchColorPicker(event) { ブラウザーがカラーピッカーなどを提供している場合、`select()` は何もしません。いずれの状況でもコードが動作するように気をつける必要があります。 ```js -colorWell.select(); +colorPicker.select(); ``` ## 検証 @@ -114,13 +74,13 @@ colorWell.select(); ### HTML -HTMLはかなり単純です。数段落の説明的な素材と、 ID が `colorWell` で `color` 型の {{HTMLElement("input")}} があり、これを使用して段落のテキストの色を変更することになります。 +HTMLはかなり単純です。数段落の説明的な素材と、 ID が `color-picker` で `color` 型の {{HTMLElement("input")}} があり、これを使用して段落のテキストの色を変更することになります。 ```html <p><code><input type="color"></code> コントロールを使用する例です。</p> -<label for="colorWell">色:</label> -<input type="color" value="#ff0000" id="colorWell" /> +<label for="color-picker">色:</label> +<input type="color" value="#ff0000" id="color-picker" /> <p> カラーピッカーを動かしたときに段落の色が変わるのを見てください。カラーピッカーに変更を加えると、最初の段落の色が、プレビューとして変化します（<code @@ -136,7 +96,7 @@ HTMLはかなり単純です。数段落の説明的な素材と、 ID が `colo まずはいくつかの設定を行います。いくつかの変数を作成し、変数の値をページが最初に読み込まれたとき設定する色にし、ページが完全に読み込まれた時に一度スタートアップ作業を実行させるために {{domxref("Window/load_event", "load")}} ハンドラーを設定します。 ```js -let colorWell; +let colorPicker; const defaultColor = "#0000ff"; window.addEventListener("load", startup, false); @@ -148,19 +108,19 @@ window.addEventListener("load", startup, false); ```js function startup() { - colorWell = document.querySelector("#colorWell"); - colorWell.value = defaultColor; - colorWell.addEventListener("input", updateFirst, false); - colorWell.addEventListener("change", updateAll, false); - colorWell.select(); + colorPicker = document.querySelector("#color-picker"); + colorPicker.value = defaultColor; + colorPicker.addEventListener("input", updateFirst, false); + colorPicker.addEventListener("change", updateAll, false); + colorPicker.select(); } ``` -`colorWell` に取得された `<input>` 要素を格納し、value プロパティに `defaultColor` を代入します。次に、{{domxref("HTMLElement/input_event", "input")}} イベントに `updateFirst()` 関数を、{{domxref("HTMLElement/change_event", "change")}} イベントに `updateAll()` 関数を指定します。これらについては後述します。 +これは color の `<input>` 要素の参照を取得して `colorPicker` という変数に格納し、色入力欄の値を `defaultColor` を設定します。次に、{{domxref("HTMLElement/input_event", "input")}} イベントに `updateFirst()` 関数を、{{domxref("HTMLElement/change_event", "change")}} イベントに `updateAll()` 関数を指定します。これらについては後述します。 最後に {{domxref("HTMLInputElement.select", "select()")}} を呼び出し、色入力のテキストコンテンツを選択します。これはカラーピッカーが提供されていないなどで、テキスト入力欄として表示された場合に利用します。 -#### 色の変更に反応させる +#### 色の変更に応答させる 色の変更に反応する 2 つの関数を与えています。`updateFirst()` 関数は `input` イベントによって呼び出され、文書の最初にある段落要素の色を変えて、入力欄の新しい値と一致させます。 `input` イベントは値を調整する（例えば明るさを増加させるなど）たびに実行されるため、カラーピッカーが使用される毎に繰り返して実行されます。 @@ -191,6 +151,51 @@ function updateAll(event) { {{EmbedLiveSample("Example", 700, 200)}} +## 技術的概要 + +<table class="properties"> + <tbody> + <tr> + <td><strong><a href="#value">値</a></strong></td> + <td> + 小文字の 16 進数で {{cssxref("<color>")}} を定義する 7 文字の文字列 + </td> + </tr> + <tr> + <td><strong>イベント</strong></td> + <td> + {{domxref("HTMLElement/change_event", "change")}} および + {{domxref("HTMLElement/input_event", "input")}} + </td> + </tr> + <tr> + <td><strong>対応する共通属性</strong></td> + <td> + <a href="/ja/docs/Web/HTML/Element/input#autocomplete"><code>autocomplete</code></a> および + <a href="/ja/docs/Web/HTML/Element/input#list"><code>list</code></a> + </td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>list</code> および <code>value</code></td> + </tr> + <tr> + <td><strong>DOM インターフェイス</strong></td> + <td><p>{{domxref("HTMLInputElement")}}</p></td> + </tr> + <tr> + <td><strong>メソッド</strong></td> + <td> + {{domxref("HTMLInputElement.select", "select()")}} + </td> + </tr> + <tr> + <td><strong>暗黙の ARIA ロール</strong></td> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"><code>対応するロールなし</code></a></td> + </tr> + </tbody> +</table> + ## 仕様書 {{Specifications}} diff --git a/files/ja/web/html/element/nav/index.md b/files/ja/web/html/element/nav/index.md index b18b9ba12f6cee..4fe94958c83abb 100644 --- a/files/ja/web/html/element/nav/index.md +++ b/files/ja/web/html/element/nav/index.md @@ -1,11 +1,13 @@ --- title: "<nav>: ナビゲーションセクション要素" slug: Web/HTML/Element/nav +l10n: + sourceCommit: e04d8d2766c468f149445c0bf438d09f9b2d188c --- {{HTMLSidebar}} -**HTML の `<nav>` 要素**は、現在の文書内の他の部分や他の文書へのナビゲーションリンクを提供するためのセクションを表します。ナビゲーションセクションの一般的な例としてメニュー、目次、索引などがあります。 +**`<nav>`** は [HTML](/ja/docs/Web/HTML) の要素で、現在の文書内の他の部分や他の文書へのナビゲーションリンクを提供するためのセクションを表します。ナビゲーションセクションの一般的な例としてメニュー、目次、索引などがあります。 {{EmbedInteractiveExample("pages/tabbed/nav.html", "tabbed-standard")}} @@ -13,12 +15,13 @@ slug: Web/HTML/Element/nav <tbody> <tr> <th scope="row"> - <a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a> + <a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリー</a> </th> <td> <a href="/ja/docs/Web/HTML/Content_categories#フローコンテンツ" >フローコンテンツ</a - >、<a href="/ja/docs/Web/HTML/Content_categories#区分コンテンツ" + >、 + <a href="/ja/docs/Web/HTML/Content_categories#区分コンテンツ" >区分コンテンツ</a >、知覚可能コンテンツ </td> @@ -43,6 +46,16 @@ slug: Web/HTML/Element/nav >を受け入れるすべての要素 </td> </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td> + <code + ><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Navigation_Role" + >navigation</a + ></code + > + </td> + </tr> <tr> <th scope="row">許可されている ARIA ロール</th> <td>なし</td> @@ -60,13 +73,13 @@ slug: Web/HTML/Element/nav ## 使用上の注意 -- すべてのリンクを `<nav>` 要素に入れる必要はありません。 `<nav>` はナビゲーションリンクの主要なブロックのみに用います。 {{HTMLElement("footer")}} にもよくリンクのリストが設置されますが、 {{HTMLElement("nav")}} 要素の中に入れる必要はありません。 -- {{HTMLElement("nav")}} 要素は文書内に複数設定することができます。例えば、サイトナビゲーションを一つ、ページ内ナビゲーションを一つなどです。このような場合、アクセシビリティを強化するために、 [`aria-labelledby`](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) を使用することができます。[例](/ja/docs/Web/HTML/Element/Heading_Elements#Labeling_section_content)をご覧ください。 +- すべてのリンクを `<nav>` 要素に入れる必要はありません。`<nav>` はナビゲーションリンクの主要なブロックのみに用います。{{HTMLElement("footer")}} にもよくリンクのリストが設置されますが、{{HTMLElement("nav")}} 要素の中に入れる必要はありません。 +- {{HTMLElement("nav")}} 要素は文書内に複数設定することができます。例えば、サイトナビゲーションを一つ、ページ内ナビゲーションを一つなどです。このような場合、アクセシビリティを強化するために、 [`aria-labelledby`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) を使用することができます。[例](/ja/docs/Web/HTML/Element/Heading_Elements#labeling_section_content)をご覧ください。 - スクリーンリーダーのような障碍者向けのユーザーエージェントは、この要素を使用してナビゲーション用のコンテンツを初期読み上げから省略するかを判断するために使用することがあります。 ## 例 -この例では、リンクの番号なしリスト ({{HTMLElement("ul")}}) を包含するために `<nav>` ブロックを使用します。適切な CSS によってサイドバー、ナビゲーションバー、あるいはドロップダウンメニューにすることができます。 +この例では、`<nav>` ブロックを使用して、リンクの番号なしリスト ({{HTMLElement("ul")}}) を囲んでいます。適切な CSS によってサイドバー、ナビゲーションバー、あるいはドロップダウンメニューにすることができます。 ```html <nav class="menu"> @@ -78,16 +91,45 @@ slug: Web/HTML/Element/nav </nav> ``` +`nav` 要素の意味づけはリンクを提供することです。しかし、`nav` 要素はリストを格納する必要はなく、他の種類のコンテンツを格納することもできます。このナビゲーションブロックでは、リンクは散文で指定されています。 + +```html +<nav> + <h2>Navigation</h2> + <p> + You are on my home page. To the north lies <a href="/blog">my blog</a>, from + whence the sounds of battle can be heard. To the east you can see a large + mountain, upon which many <a href="/school">school papers</a> are littered. + Far up this mountain you can spy a little figure who appears to be me, + desperately scribbling a <a href="/school/thesis">thesis</a>. + </p> + <p> + To the west are several exits. One fun-looking exit is labeled + <a href="https://games.example.com/">"games"</a>. Another more + boring-looking exit is labeled <a href="https://isp.example.net/">ISP™</a>. + </p> + <p> + To the south lies a dark and dank <a href="/about">contacts page</a>. + Cobwebs cover its disused entrance, and at one point you see a rat run + quickly out of the page. + </p> +</nav> +``` + +### 結果 + +{{EmbedLiveSample('Examples')}} + ## 仕様書 {{Specifications}} ## ブラウザーの互換性 -{{Compat("html.elements.nav")}} +{{Compat}} ## 関連情報 -- 他のセクション関連要素: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}} -- [HTML5 文書のセクションとアウトライン](/ja/docs/Sections_and_Outlines_of_an_HTML5_document) -- [ARIA: Navigation ロール](/ja/docs/Web/Accessibility/ARIA/Roles/Navigation_Role) +- 他のセクション関連要素: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("Heading_Elements", "h1")}}, {{HTMLElement("Heading_Elements", "h2")}}, {{HTMLElement("Heading_Elements", "h3")}}, {{HTMLElement("Heading_Elements", "h4")}}, {{HTMLElement("Heading_Elements", "h5")}}, {{HTMLElement("Heading_Elements", "h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}} +- [HTML 文書のセクションとアウトライン](/ja/docs/Web/HTML/Element/Heading_Elements) +- [ARIA: Navigation ロール](/ja/docs/Web/Accessibility/ARIA/Roles/navigation_role) diff --git a/files/ja/web/html/element/noembed/index.md b/files/ja/web/html/element/noembed/index.md index 8e432d5fe5e257..c1bd9e2fb4a3fb 100644 --- a/files/ja/web/html/element/noembed/index.md +++ b/files/ja/web/html/element/noembed/index.md @@ -1,11 +1,13 @@ --- title: "<noembed>: 埋め込みフォールバック要素" slug: Web/HTML/Element/noembed +l10n: + sourceCommit: 942a529383ee7ee3996fb234187641c08935f3ff --- -{{HTMLSidebar}}{{Non-standard_header}}{{deprecated_header}} +{{HTMLSidebar}}{{deprecated_header}} -**`<noembed>`** は [HTML](/ja/docs/Web/HTML) の要素で、廃止された、標準外の方法であり、 {{HTMLElement("embed")}} 要素に対応していないブラウザーや、ユーザーが仕様とした種類の[埋め込みコンテンツ](/ja/docs/Web/Guide/HTML/Content_categories#埋め込みコンテンツ)に対応していないブラウザーで代替または「フォールバック」コンテンツを提供するものです。これは HTML 4.01 で非推奨となり、代替コンテンツは {{HTMLElement("object")}} 要素の開始タグと終了タグの間に配置されるようになりました。 +**`<noembed>`** は [HTML](/ja/docs/Web/HTML) の要素で、廃止された、標準外の方法であり、 {{HTMLElement("embed")}} 要素に対応していないブラウザーや、ユーザーが仕様とした種類の[埋め込みコンテンツ](/ja/docs/Web/HTML/Content_categories#埋め込みコンテンツ)に対応していないブラウザーで代替または「フォールバック」コンテンツを提供するものです。これは HTML 4.01 で非推奨となり、代替コンテンツは {{HTMLElement("object")}} 要素の開始タグと終了タグの間に配置されるようになりました。 > **メモ:** 現在のところ、この要素はまだ多くのブラウザーで動作しますが、廃止されており、使用するべきではありません。代わりに {{HTMLElement("object")}} 要素の開始タグと終了タグの間にフォールバックコンテンツを入れて使用して下さい。 diff --git a/files/ja/web/html/element/rp/index.md b/files/ja/web/html/element/rp/index.md index 7a63c17931d5a3..cfba598415eedc 100644 --- a/files/ja/web/html/element/rp/index.md +++ b/files/ja/web/html/element/rp/index.md @@ -1,68 +1,23 @@ --- -title: "<rp>: ルビのフォールバック用括弧要素" +title: "<rp>: ルビの代替表示用括弧要素" slug: Web/HTML/Element/rp +l10n: + sourceCommit: e04d8d2766c468f149445c0bf438d09f9b2d188c --- {{HTMLSidebar}} -**HTML のルビ代替表示用括弧 (`<rp>`) 要素**は、 {{HTMLElement("ruby")}} 要素によるルビの表示に対応していないブラウザー向けの代替表示用括弧を提供するために使用します。 `<rp>` 要素は、注釈の文字列を {{HTMLElement("rt")}} 要素を囲む開き括弧と閉じ括弧をそれぞれ囲む必要があります。 +**`<rp>`** は [HTML](/ja/docs/Web/HTML) の要素で、{{HTMLElement("ruby")}} 要素によるルビの表示に対応していないブラウザー向けの代替表示用の括弧を提供するために使用します。それぞれ 1 つの `<rp>` 要素で、注釈の文字列を含む {{HTMLElement("rt")}} 要素を囲む開き括弧と閉じ括弧をそれぞれ囲む必要があります。 {{EmbedInteractiveExample("pages/tabbed/rp.html", "tabbed-shorter")}} -<table class="properties"> - <tbody> - <tr> - <th scope="row"> - <a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a> - </th> - <td>なし</td> - </tr> - <tr> - <th scope="row">許可されている内容</th> - <td>テキスト</td> - </tr> - <tr> - <th scope="row">タグの省略</th> - <td> - 要素の直後に {{HTMLElement("rt")}} または他の - <code><rp></code> - 要素が続くとき、または親要素内にそれ以上のコンテンツがない場合は、終了タグを省略可。 - </td> - </tr> - <tr> - <th scope="row">許可されている親要素</th> - <td> - {{HTMLElement("ruby")}} 要素。 <code><rp></code> 要素は - {{HTMLElement("rt")}} - 要素の直前または直後に配置しなければなりません。 - </td> - </tr> - <tr> - <th scope="row">暗黙の ARIA ロール</th> - <td> - <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" - >対応するロールなし</a - > - </td> - </tr> - <tr> - <th scope="row">許可されている ARIA ロール</th> - <td>すべて</td> - </tr> - <tr> - <th scope="row">DOM インターフェイス</th> - <td>{{domxref("HTMLElement")}}</td> - </tr> - </tbody> -</table> - ## 属性 この要素には[グローバル属性](/ja/docs/Web/HTML/Global_attributes)以外の属性はありません。 ## 使用上のメモ -- ルビは日本語のふりがなや台湾語の注音符号など、東アジア言語で発音を示すものです。 `<rp>` 要素は {{HTMLElement("ruby")}} 要素に対応していない場合に使用されます。 `<rp>` 要素の内容物で、ルビの存在を示すために何を表示すべきか（通常は括弧）を指定します。 +- ルビは日本語のふりがなや台湾語の注音符号など、東アジア言語で発音を示すものです。`<rp>` 要素は {{HTMLElement("ruby")}} 要素に対応していない場合に使用されます。`<rp>` 要素の内容は、ルビの存在を示すために何を表示すべきか（通常は括弧）を示します。 ## 例 @@ -104,13 +59,62 @@ body { {{EmbedLiveSample("Without_ruby_support", 600, 60)}} +## 技術的概要 + +<table class="properties"> + <tbody> + <tr> + <th scope="row"> + <a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリー</a> + </th> + <td>なし</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>テキスト</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td> + 要素の直後に {{HTMLElement("rt")}} または他の + <code><rp></code> + 要素が続くとき、または親要素内にそれ以上のコンテンツがない場合は、終了タグを省略可。 + </td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td> + {{HTMLElement("ruby")}} 要素。 <code><rp></code> 要素は + {{HTMLElement("rt")}} + 要素の直前または直後に配置しなければなりません。 + </td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td> + <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" + >対応するロールなし</a + > + </td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + ## 仕様書 {{Specifications}} ## ブラウザーの互換性 -{{Compat("html.elements.rp")}} +{{Compat}} ## 関連情報 diff --git a/files/ja/web/html/element/rtc/index.md b/files/ja/web/html/element/rtc/index.md index 3ecc529ec7ffd5..247ffcab75aa10 100644 --- a/files/ja/web/html/element/rtc/index.md +++ b/files/ja/web/html/element/rtc/index.md @@ -1,19 +1,53 @@ --- -title: "<rtc>: ルビ文字列コンテナー要素" +title: "<rtc>: ルビテキストコンテナー要素" slug: Web/HTML/Element/rtc +l10n: + sourceCommit: 942a529383ee7ee3996fb234187641c08935f3ff --- -{{HTMLSidebar}} +{{HTMLSidebar}}{{deprecated_header}} -**HTML のルビ文字列コンテナー (`<rtc>`) 要素**は、 {{HTMLElement("ruby")}} 要素内で使用する {{HTMLElement("rb")}} 要素にルビで与える文字列の、意味を表す注釈を包含します。{{HTMLElement("rb")}} 要素は発音の注釈 ({{HTMLElement("rt")}}) と意味の注釈 ({{HTMLElement("rtc")}}) の両方を持つことができます。 +**`<rtc>`** は [HTML](/ja/docs/Web/HTML) の要素で、{{HTMLElement("ruby")}} 要素内で使用する {{HTMLElement("rb")}} 要素にルビで与える文字列の、意味を表す注釈を包含します。{{HTMLElement("rb")}} 要素は発音の注釈 ({{HTMLElement("rt")}}) と意味の注釈 ({{HTMLElement("rtc")}}) の両方を持つことができます。 {{EmbedInteractiveExample("pages/tabbed/rtc.html", "tabbed-standard")}} +## 属性 + +この要素には[グローバル属性](/ja/docs/Web/HTML/Global_attributes)のみがあります。 + +## 例 + +```html +<div class="info"> + <ruby> + <rtc> + <rb>旧</rb><rt>jiù</rt> + <rb>金</rb><rt>jīn</rt> + <rb>山</rb><rt>shān</rt> + </rtc> + <rtc>San Francisco</rtc> + </ruby> +</div> +``` + +```css hidden +.info { + padding-top: 10px; + font-size: 36px; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", 600, 120)}} + +## 技術的概要 + <table class="properties"> <tbody> <tr> <th scope="row"> - <a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a> + <a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリー</a> </th> <td>なし</td> </tr> @@ -48,32 +82,6 @@ slug: Web/HTML/Element/rtc </tbody> </table> -## 属性 - -この要素には[グローバル属性](/ja/docs/Web/HTML/Global_attributes)のみがあります。 - -## 例 - -```html -<div class="info"> - <ruby> - <rbc> - <rb>旧</rb><rt>jiù</rt> <rb>金</rb><rt>jīn</rt> <rb>山</rb><rt>shān</rt> - </rbc> - <rtc>San Francisco</rtc> - </ruby> -</div> -``` - -```css hidden -.info { - padding-top: 10px; - font-size: 36px; -} -``` - -{{EmbedLiveSample("Examples", 600, 120)}} - ## 仕様書 {{Specifications}} @@ -88,4 +96,3 @@ slug: Web/HTML/Element/rtc - {{HTMLElement("rp")}} - {{HTMLElement("rb")}} - {{HTMLElement("rt")}} -- {{HTMLElement("rbc")}} diff --git a/files/ja/web/html/element/s/index.md b/files/ja/web/html/element/s/index.md index f8ab81761ce1a6..a6e5c4fb425dc3 100644 --- a/files/ja/web/html/element/s/index.md +++ b/files/ja/web/html/element/s/index.md @@ -1,11 +1,13 @@ --- -title: <s> +title: "<s>: 取り消し要素" slug: Web/HTML/Element/s +l10n: + sourceCommit: fb6eaff788d19ad4013d57db0084f7c4f8e15a91 --- {{HTMLSidebar}} -**HTML の `<s>` 要素**は取り消し線を引いた文字列を表示します。 `<s>` 要素はすでに適切または正確ではなくなった事柄を表現します。しかし、文書の修正を示す場合、 `<s>` 要素は適切ではありません。この場合は {{HTMLElement("del")}} と {{HTMLElement("ins")}} の方が適しているので、こちらを使用してください。 +**`<s>`** は [HTML](/ja/docs/Web/HTML) の要素で、テキストを取り消し線または打ち消し線つきで描画します。`<s>` 要素はすでに適切または正確ではなくなった事柄を表現するために使用してください。しかし、文書の修正を示す場合、 `<s>` 要素は適切ではありません。この場合は {{HTMLElement("del")}} と {{HTMLElement("ins")}} の方が適しているので、こちらを使用してください。 {{EmbedInteractiveExample("pages/tabbed/s.html", "tabbed-shorter")}} @@ -13,7 +15,7 @@ slug: Web/HTML/Element/s <tbody> <tr> <th scope="row"> - <a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a> + <a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリー</a> </th> <td> <a href="/ja/docs/Web/HTML/Content_categories#記述コンテンツ" @@ -67,23 +69,26 @@ slug: Web/HTML/Element/s この要素には[グローバル属性](/ja/docs/Web/HTML/Global_attributes)のみがあります。 -> **メモ:** **実装におけるメモ:** Gecko 1.9.2 以前はこの要素に {{domxref("HTMLSpanElement")}} インターフェイスを実装しています。 - ## 例 +```css +.sold-out { + text-decoration: line-through; +} +``` + ```html -<s>本日のおすすめ: サーモンカルパッチョ</s> 売り切れ<br /> -<span style="text-decoration:line-through;" - >本日のおすすめ: サーモンカルパッチョ</span -> -売り切れ +<s>本日のおすすめ: サーモン</s> 売り切れ<br /> +<span class="sold-out">本日のおすすめ: サーモン</span> 売り切れ ``` +### 結果 + {{EmbedLiveSample("Examples")}} ## アクセシビリティの考慮 -`s` 要素が存在することは、多くの読み上げ技術の既定の設定ではアナウンスされません。 CSS の {{cssxref("content")}} プロパティを、 {{cssxref("::before")}} および {{cssxref("::after")}} 擬似要素と共に使うことでアナウンスさせることができます。 +`s` 要素が存在することは、多くのスクリーンリーダー技術の既定の設定ではアナウンスされません。 CSS の {{cssxref("content")}} プロパティを、 {{cssxref("::before")}} および {{cssxref("::after")}} 擬似要素と共に使うことでアナウンスさせることができます。 ```css s::before, @@ -106,10 +111,10 @@ s::after { } ``` -読み上げソフトを使用する人によっては、特に冗長になるコンテンツのアナウンスを意図的に無効にしていることがあります。このため、この手法を悪用しないようにすることは重要であり、コンテンツが取り消しされていることを知らないと理解に影響するような場面でのみ使用するようにしてください。 +スクリーンリーダーを使用する人によっては、特に冗長になるコンテンツのアナウンスを意図的に無効にしていることがあります。このため、この手法を悪用しないようにすることは重要であり、コンテンツが取り消しされていることを知らないと理解に影響するような場面でのみ使用するようにしてください。 -- [Short note on making your mark (more accessible) | The Paciello Group](https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/) -- [Tweaking Text Level Styles | Adrian Roselli](http://adrianroselli.com/2017/12/tweaking-text-level-styles.html) +- [Short note on making your mark (more accessible) | The Paciello Group](https://www.tpgi.com/short-note-on-making-your-mark-more-accessible/) +- [Tweaking Text Level Styles | Adrian Roselli](https://adrianroselli.com/2017/12/tweaking-text-level-styles.html) ## 仕様書 @@ -117,10 +122,10 @@ s::after { ## ブラウザーの互換性 -{{Compat("html.elements.s")}} +{{Compat}} ## 関連情報 -- {{HTMLElement("strike")}} 要素は、 {{HTMLElement("s")}} 要素の分身でしたが、廃止されており、もうウェブサイトで使用するべきではありません。 +- {{HTMLElement("strike")}} 要素は、{{HTMLElement("s")}} 要素の分身でしたが、廃止されており、もうウェブサイトで使用するべきではありません。 - {{HTMLElement("del")}} 要素は、データが*削除された*場合に代わりに使用するべきものです。 -- CSS の {{cssxref("text-decoration-line")}} プロパティは、 {{HTMLElement("s")}} 要素の以前の視覚効果を実現します。 +- CSS の {{cssxref("text-decoration-line")}} プロパティは、{{HTMLElement("s")}} 要素の以前の視覚効果を実現します。 diff --git a/files/ja/web/html/element/track/index.md b/files/ja/web/html/element/track/index.md index 4ac65c2f7b4e1c..dba16a53bd0771 100644 --- a/files/ja/web/html/element/track/index.md +++ b/files/ja/web/html/element/track/index.md @@ -1,6 +1,8 @@ --- title: "<track>: 埋め込みテキストトラック要素" slug: Web/HTML/Element/track +l10n: + sourceCommit: 942a529383ee7ee3996fb234187641c08935f3ff --- {{HTMLSidebar}} diff --git a/files/ja/web/html/element/u/index.md b/files/ja/web/html/element/u/index.md index 1dc5161c193b28..8bbc2cba9a0d44 100644 --- a/files/ja/web/html/element/u/index.md +++ b/files/ja/web/html/element/u/index.md @@ -1,11 +1,13 @@ --- -title: "<u>: 非言語的注釈 (下線) 要素" +title: "<u>: 非言語的注釈（下線）要素" slug: Web/HTML/Element/u +l10n: + sourceCommit: 942a529383ee7ee3996fb234187641c08935f3ff --- {{HTMLSidebar}} -**HTML** の**非言語的注釈要素** (**`<u>`**) は、非言語的に注釈があることを示す方法で表示する行内テキストの区間を示します。これは既定で単純な実線の下線として表示されますが、 CSS を使用して変更することもできます。 +**`<u>`** は [HTML](/ja/docs/Web/HTML) の要素で、非言語的に注釈があることを示す方法で表示する行内テキストの区間を示します。これは既定で単純な実線の下線として表示されますが、 CSS を使用して変更することもできます。 > **警告:** この要素は古いバージョンの HTML で "Underline" (下線) 要素と呼ばれる傾向があり、現在でもそのように誤用されることがあります。テキストに下線を引くのであれば、代わりに CSS の {{cssxref("text-decoration")}} プロパティを `underline` に設定したスタイルを適用してください。 @@ -13,60 +15,6 @@ slug: Web/HTML/Element/u `<u>` を使用するのがどのような場合に適切で、どのような場合に適切でないのかについての詳細は、[使用上の注意](#使用上の注意)を参照してください。 -<table class="properties"> - <tbody> - <tr> - <th scope="row"> - <a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a> - </th> - <td> - <a href="/ja/docs/Web/HTML/Content_categories#フローコンテンツ" - >フローコンテンツ</a - >, - <a href="/ja/docs/Web/HTML/Content_categories#記述コンテンツ" - >記述コンテンツ</a - >, 知覚可能コンテンツ - </td> - </tr> - <tr> - <th scope="row">許可されている内容</th> - <td> - <a href="/ja/docs/Web/HTML/Content_categories#記述コンテンツ" - >記述コンテンツ</a - > - </td> - </tr> - <tr> - <th scope="row">タグの省略</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">許可されている親要素</th> - <td> - <a href="/ja/docs/Web/HTML/Content_categories#記述コンテンツ" - >記述コンテンツ</a - >を受け入れるすべての要素 - </td> - </tr> - <tr> - <th scope="row">暗黙の ARIA ロール</th> - <td> - <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" - >対応するロールなし</a - > - </td> - </tr> - <tr> - <th scope="row">許可されている ARIA ロール</th> - <td>すべて</td> - </tr> - <tr> - <th scope="row">DOM インターフェイス</th> - <td>{{domxref("HTMLElement")}}</td> - </tr> - </tbody> -</table> - ## 属性 この要素には[グローバル属性](/ja/docs/Web/HTML/Global_attributes)のみがあります。 @@ -75,11 +23,11 @@ slug: Web/HTML/Element/u 他の純粋な整形要素と同様に、以前の HTML の下線 (`<u>`) 要素は HTML 4 で非推奨になりました。しかし `<u>` は、 HTML 5 で新しい意味論的な、何らかの曖昧な注釈が適用されるテキストをマークするという意味で復活しました。 -> **メモ:** (既定で下線が引かれる) ハイパーリンクと誤認されるような方法で、 (これも既定で下線が引かれる) `<u>` 要素を使用することは避けるように注意してください。 +> **メモ:** （既定で下線が引かれる）ハイパーリンクと誤認されるような方法で、（これも既定で下線が引かれる）`<u>` 要素を使用することは避けるように注意してください。 ### 用途 -`<u>` 要素の有効な用途としては、綴りエラーの通知、中国語の文字列の[固有名詞記号](https://en.wikipedia.org/wiki/proper_name_mark)の記述、その他の形の注釈などがあります。 +`<u>` 要素の有効な用途としては、綴りエラーの通知、中国語の文字列の[固有名詞記号](https://en.wikipedia.org/wiki/Proper_name_mark)の記述、その他の形の注釈などがあります。 単に表現の目的で下線を引いたり、本の題名を記述したりするために `<u>` を使用するべきでは*ありません*。 @@ -94,7 +42,7 @@ slug: Web/HTML/Element/u - {{HTMLElement("cite")}}: 書籍やその他の出版物の題名をマーク - {{HTMLElement("i")}}: 西洋言語のテキストで技術用語、音訳、考え、船名などを記述 -(`<u>` で作成された非言語的な注釈に対して) 言語的な注釈を提供する場合は、 {{HTMLElement("ruby")}} 要素を使用してください。 +（`<u>` で作成された非言語的な注釈に対して）言語的な注釈を提供する場合は、 {{HTMLElement("ruby")}} 要素を使用してください。 意味論的な意味なしで下線を引きたい場合は、 {{cssxref("text-decoration")}} プロパティの値 `underline` を使用してください。 @@ -168,7 +116,7 @@ Chicken Noodle Soup With Carrots {{EmbedLiveSample("Using_the_cite_element", 650, 80)}} -##### cit 要素のスタイル付け +##### cite 要素のスタイル付け なお、 `<cite>` 要素の既定のスタイルではテキストを斜体で表示します。 CSS を使用して上書きすることができます。 @@ -185,6 +133,62 @@ cite { {{EmbedLiveSample("Styling_the_cite_element", 650, 80)}} +## 技術的概要 + +<table class="properties"> + <tbody> + <tr> + <th scope="row"> + <a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリー</a> + </th> + <td> + <a href="/ja/docs/Web/HTML/Content_categories#フローコンテンツ" + >フローコンテンツ</a + >, + <a href="/ja/docs/Web/HTML/Content_categories#記述コンテンツ" + >記述コンテンツ</a + >, 知覚可能コンテンツ + </td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td> + <a href="/ja/docs/Web/HTML/Content_categories#記述コンテンツ" + >記述コンテンツ</a + > + </td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td> + <a href="/ja/docs/Web/HTML/Content_categories#記述コンテンツ" + >記述コンテンツ</a + >を受け入れるすべての要素 + </td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td> + <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" + >対応するロールなし</a + > + </td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + ## 仕様書 {{Specifications}} diff --git a/files/ja/web/html/element/ul/index.md b/files/ja/web/html/element/ul/index.md index e50df8ee5f04f9..0a176b2ae47730 100644 --- a/files/ja/web/html/element/ul/index.md +++ b/files/ja/web/html/element/ul/index.md @@ -124,11 +124,11 @@ l10n: > </th> <td> - <a href="/ja/docs/Web/Guide/HTML/Content_categories#フローコンテンツ" + <a href="/ja/docs/Web/HTML/Content_categories#フローコンテンツ" >フローコンテンツ</a >。また、 <code><ul></code> 要素の子に少なくとも 1 個 {{HTMLElement("li")}} 要素を包含する場合は、<a - href="/ja/docs/Web/Guide/HTML/Content_categories#知覚可能コンテンツ" + href="/ja/docs/Web/HTML/Content_categories#知覚可能コンテンツ" >知覚可能コンテンツ</a >。 </td> @@ -148,7 +148,7 @@ l10n: <tr> <th scope="row">許可されている親要素</th> <td> - <a href="/ja/docs/Web/Guide/HTML/Content_categories#フローコンテンツ" + <a href="/ja/docs/Web/HTML/Content_categories#フローコンテンツ" >フローコンテンツ</a >を受け入れるすべての要素 </td> diff --git a/files/ja/web/http/authentication/index.md b/files/ja/web/http/authentication/index.md index 8b74895d9c8165..f2cd269a790a2d 100644 --- a/files/ja/web/http/authentication/index.md +++ b/files/ja/web/http/authentication/index.md @@ -1,6 +1,8 @@ --- title: HTTP 認証 slug: Web/HTTP/Authentication +l10n: + sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8 --- {{HTTPSidebar}} @@ -85,7 +87,7 @@ IANA は[認証方式の一覧](https://www.iana.org/assignments/http-authscheme - **Bearer** - : {{rfc(6750)}} を参照。 OAuth 2.0 で保護されたリソースにアクセスするベアラートークンです。 - **Digest** - - : {{rfc(7616)}} を参照。 Firefox 93 以降は SHA-256 暗号化に対応しています。以前のバージョンでは MD5 ハッシュだけに対応していまました（非推奨）。 + - : {{rfc(7616)}} を参照。 Firefox 93 以降は SHA-256 アルゴリズムに対応しています。以前のバージョンでは MD5 ハッシュだけに対応していまました（非推奨）。 - **HOBA** - : {{rfc(7486)}} 3 章を参照、 HTTP オリジン認証 (**H**TTP **O**rigin-**B**ound **A**uthentication)、電子署名ベース - **Mutual** @@ -118,7 +120,7 @@ Apache サーバー上のディレクトリをパスワードで保護するに `.htaccess` ファイルは通常、次のようになります。 -``` +```apacheconf AuthType Basic AuthName "Access to the staging site" AuthUserFile /path/to/.htpasswd @@ -127,7 +129,7 @@ Require valid-user `.htaccess` ファイルは `.htpasswd` ファイルを参照しており、このファイルの各行にはユーザー名とパスワードをコロン (`:`) で区切って記述されています。実際のパスワードは（この場合は MD5 ベースのハッシュを使用して）[ハッシュ化されている](https://httpd.apache.org/docs/2.4/misc/password_encryptions.html)ので表示できません。なお、必要に応じて `.htpasswd` ファイルの名前を変更することができますが、このファイルには誰にもアクセスできないようにしてください。（Apache は通常 `.ht*` ファイルへのアクセスを禁止するように構成されています）。 -``` +```apacheconf aladdin:$apr1$ZjTqBB3f$IF9gdYAGlMrs2fuINjHsz. user2:$apr1$O04r.y2H$/vEkesPhVInBByJUkXitA/ ``` @@ -136,7 +138,7 @@ user2:$apr1$O04r.y2H$/vEkesPhVInBByJUkXitA/ nginx の場合は、保護する場所とパスワードで保護された領域に名前を指定する `auth_basic` ディレクティブを指定する必要があります。`auth_basic_user_file` ディレクティブは上の Apache の例のように、暗号化されたユーザー資格情報を含む `.htpasswd` ファイルを指します。 -``` +```apacheconf location /status { auth_basic "Access to the staging site"; auth_basic_user_file /etc/apache2/.htpasswd; @@ -147,12 +149,12 @@ location /status { 多くのクライアントでは次のように、ユーザー名とパスワードを含むエンコードされた URL を使用してログインプロンプトを回避できます。 -```http example-bad +```plain example-bad https://username:password@www.example.com/ ``` **これらの URL の使用は推奨されていません。** -Chrome ではセキュリティ上の理由から、URL の `username:password@` 部分が[削除されます](https://bugs.chromium.org/p/chromium/issues/detail?id=82250#c7)。 Firefox ではサイトが実際に認証を要求するかどうかをチェックし、そうでない場合 Firefox はユーザーに「"www\.example\.com" というサイトに "username" というユーザー名でログインしようとしていますが、このウェブサイトは認証を必要としません。これはあなたを騙そうとしている可能性があります。」と警告します。 +Chrome ではセキュリティ上の理由から、URL の `username:password@` 部分が[削除されます](https://crbug.com/82250#c7)。 Firefox ではサイトが実際に認証を要求するかどうかをチェックし、そうでない場合 Firefox はユーザーに「`www.example.com` というサイトに `username` というユーザー名でログインしようとしていますが、このウェブサイトは認証を必要としません。これはあなたを騙そうとしている可能性があります。」と警告します。 ## 関連情報 diff --git a/files/ja/web/http/basics_of_http/identifying_resources_on_the_web/index.md b/files/ja/web/http/basics_of_http/identifying_resources_on_the_web/index.md index fa4d1541e0472b..46a5312be69384 100644 --- a/files/ja/web/http/basics_of_http/identifying_resources_on_the_web/index.md +++ b/files/ja/web/http/basics_of_http/identifying_resources_on_the_web/index.md @@ -1,13 +1,13 @@ --- title: ウェブ上のリソースの識別 slug: Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web +l10n: + sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8 --- {{HTTPSidebar}} -HTTP 要求の対象は「リソース」と呼ばれ、その本質は細かく定義されていません。ドキュメント、写真、その他の何にでもなりえます。それぞれのリソースは、リソースを特定するために HTTP の至るところで使用される Uniform Resource Identifier ({{Glossary("URI")}}) で特定されます。 - -ウェブ上にあるリソースの身元や場所は、たいていひとつの URL (Uniform Resource Locator、 一種の URI) によって与えられます。時々、同一の URI によって身元や場所が与えられない理由が存在します。要求されたリソースについて、クライアントに別の場所へアクセスしてほしい場合に、HTTP では {{HTTPHeader("Alt-Svc")}} ヘッダーを使用します。 +HTTP リクエストの対象は「リソース」と呼ばれ、その本質は細かく定義されていません。文書、写真、その他の何でもなりえます。それぞれのリソースは、リソースを特定するために HTTP の至るところで使用される Uniform Resource Identifier ({{Glossary("URI")}}) で特定されます。 ## URL と URN @@ -15,7 +15,7 @@ HTTP 要求の対象は「リソース」と呼ばれ、その本質は細かく もっとも一般的な URI の形式は Uniform Resource Locator ({{Glossary("URL")}}) であり、*ウェブアドレス*として知られています。 -``` +```url https://developer.mozilla.org https://developer.mozilla.org/ja/docs/Learn/ https://developer.mozilla.org/ja/search?q=URL @@ -23,22 +23,22 @@ https://developer.mozilla.org/ja/search?q=URL ブラウザーのアドレスバーに URL を入力して、URL に関連付けられているページ (リソース) を読み込むように指示できます。 -URL はさまざまな部品で構成されており、必須のものと省略可能なものがあります。より複雑な URL の例は、以下のようになります: +URL はさまざまな部品で構成されており、必須のものと省略可能なものがあります。より複雑な URL として、例えば次のようなものがあります。 -``` +```url http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument ``` ### URN -Uniform Resource Name (URN) は、特定の名前空間内の名前によってリソースを特定する URI です。 +Uniform Resource Name (URN) は、特定の名前空間内における名前によってリソースを特定する URI です。 -``` +```url urn:isbn:9780141036144 urn:ietf:rfc:7230 ``` -2 つの URN は以下のものに対応します: +2 つの URN は以下のものに対応します。 - George Orwell の書籍 Nineteen Eighty-Four - IETF 仕様書 7230、 Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing @@ -48,13 +48,13 @@ urn:ietf:rfc:7230 ### スキームまたはプロトコル - ![Protocol](mdn-url-protocol@x2.png) - - : `http://` はプロトコルです。これは、ブラウザーが使用すべきプロトコルを示します。通常、 HTTP プロトコルまたは安全なバージョンである HTTPS になります。ウェブではこれら 2 つのうちひとつを必要としますが、ブラウザーは `mailto:` (メールクライアントを開く) やファイル転送を扱う `ftp:` といったほかのプロトコルの扱い方も知っていますので、このようなプロトコルが現れても驚かないでください。主なスキームは以下のとおりです: + - : `http://` はプロトコルです。これは、ブラウザーが使用すべきプロトコルを示します。通常、 HTTP プロトコルまたは安全なバージョンである HTTPS になります。ウェブではこれら 2 つのうちひとつを必要としますが、ブラウザーは `mailto:` （メールクライアントを開く）やファイル転送を扱う `ftp:` といったほかのプロトコルの扱い方も知っていますので、このようなプロトコルが現れても驚かないでください。主なスキームは以下のとおりです。 | スキーム | 説明 | | ----------- | ---------------------------------------------------------------- | -| data | [Data URI](/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) | +| data | [Data URI](/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) | | file | ホスト固有のファイル名 | -| ftp | [File Transfer Protocol](/ja/docs/Glossary/FTP) | +| ftp | {{Glossary("FTP","File Transfer Protocol")}} | | http/https | [Hyper text transfer protocol (安全)](/ja/docs/Glossary/HTTP) | | javascript | URL に埋め込まれた JavaScript のコード | | mailto | 電子メールアドレス | @@ -66,28 +66,28 @@ urn:ietf:rfc:7230 ### オーソリティ -- ![Domaine Name](mdn-url-domain@x2.png) - - : `www.example.com` は、名前空間を統制するドメイン名またはオーソリティです。これは、どのウェブサーバーが要求されているかを示します。代わりに {{Glossary("IP address","IP アドレス")}} を直接使用することもできますが、利便性が低いためウェブではあまり使用されません。 +- ![ドメイン名](mdn-url-domain@x2.png) + - : `www.example.com` は、名前空間を統制するドメイン名またはオーソリティです。これは、どのウェブサーバーがリクエストされているかを示します。代わりに {{Glossary("IP address","IP アドレス")}}を直接使用することもできますが、利便性が低いためウェブではあまり使用されません。 -### ポート +### ポート番号 -- ![Port](mdn-url-port@x2.png) - - : ここで `:80` はポートです。これはウェブサーバー内のリソースへアクセスするために使用する、技術上の "出入口" です。ウェブサーバーがリソースへのアクセスを受け入れるために HTTP プロトコルの標準ポート (HTTP では 80、HTTPS では 443) を使用している場合、通常はポートを省略します。それ以外の場合は、ポートが必須です。 +- ![ポート番号](mdn-url-port@x2.png) + - : ここで `:80` はポート番号です。これはウェブサーバー内のリソースへアクセスするために使用する、技術上の「出入口」です。ウェブサーバーがリソースへのアクセスを受け入れるために HTTP プロトコルの標準ポート（HTTP では 80、HTTPS では 443）を使用している場合、通常はポートを省略します。それ以外の場合は、ポートが必須です。 ### パス -- ![Path to the file](mdn-url-path@x2.png) +- ![ファイルへのパス](mdn-url-path@x2.png) - : `/path/to/myfile.html` は、ウェブサーバー内にあるリソースのパスです。初期のウェブではこのようなパスが、ウェブサーバー内の物理的なファイルの場所を表していました。現代のパスはたいてい物理的な実情と関係がない、ウェブサーバーによって制御される抽象的なものになっています。 -### クエリ +### クエリー -- ![Parameters](mdn-url-parameters@x2.png) - - : `?key1=value1&key2=value2` は、ウェブサーバーに提供する追加パラメーターです。このパラメーターは `&` 記号で区切られた、キーと値のペアのリストです。ウェブサーバーは、ユーザーへリソースを返す前に追加の処理を行うために、このパラメーターを使用できます。それぞれのウェブサーバーはパラメーターについて独自の規則を持っており、特定のウェブサーバーがパラメーターを扱う方法を知るために唯一信頼できる方法は、ウェブサーバーの所有者に尋ねることです。 +- ![引数](mdn-url-parameters@x2.png) + - : `?key1=value1&key2=value2` は、ウェブサーバーに提供する追加の引数です。この引数は `&` 記号で区切られた、キーと値のペアのリストです。ウェブサーバーは、ユーザーへリソースを返す前に追加の処理を行うために、この引数を使用できます。それぞれのウェブサーバーは引数について独自の規則を持っており、特定のウェブサーバーが引数を扱う方法を知るために唯一信頼できる方法は、ウェブサーバーの所有者に尋ねることです。 ### フラグメント -- ![Anchor](mdn-url-anchor@x2.png) - - : `#SomewhereInTheDocument` は、リソース自体の別の場所へのアンカーです。アンカーはリソース内の一種の "ブックマーク" を表しており、 "ブックマーク" 地点にあるコンテンツを表示するようにブラウザーへ指示を与えます。例えば HTML ドキュメントでは、ブラウザーはアンカーが定義されている位置にスクロールします。動画や音声のドキュメントでは、ブラウザーはアンカーが示す位置への移動を試みます。 # より後の部分はフラグメント識別としても知られており、要求でサーバーには送信されないことは注目に値します。 +- ![アンカー](mdn-url-anchor@x2.png) + - : `#SomewhereInTheDocument` は、リソース自体の別の場所へのアンカーです。アンカーはリソース内の一種の「ブックマーク」を表しており、「ブックマーク」地点にあるコンテンツを表示するようにブラウザーへ指示を与えます。例えば HTML 文書では、ブラウザーはアンカーが定義されている位置にスクロールします。動画や音声の文書では、ブラウザーはアンカーが示す位置への移動を試みます。 # より後の部分はフラグメント識別子としても知られており、リクエストでサーバーには送信されないことは注目に値します。 ## 使用上のメモ @@ -97,7 +97,7 @@ FTP は最上位では利用できますが (ブラウザーの URL バーに直 ## 例 -``` +```url https://developer.mozilla.org/ja/docs/Learn tel:+1-816-555-1212 git@github.com:mdn/browser-compat-data.git @@ -108,11 +108,9 @@ mailto:help@supercyberhelpdesk.info ## 仕様書 -| 仕様書 | 題名 | -| ------------------------------------------------------ | ------------------------------------------------------------------ | -| {{RFC("7230", "Uniform Resource Identifiers", "2.7")}} | Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing | +{{Specifications}} ## 関連情報 -- [URL とは何か](/ja/docs/Learn/Common_questions/What_is_a_URL) -- [IANA list of URI schemes](http://www.iana.org/assignments/uri-schemes/uri-schemes.xhtml) +- [URL とは何か](/ja/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL) +- [IANA list of URI schemes](https://www.iana.org/assignments/uri-schemes/uri-schemes.xhtml) diff --git a/files/ja/web/http/compression/index.md b/files/ja/web/http/compression/index.md index a6c90a690f96ab..b75362d81d71c6 100644 --- a/files/ja/web/http/compression/index.md +++ b/files/ja/web/http/compression/index.md @@ -1,28 +1,30 @@ --- title: HTTP の圧縮 slug: Web/HTTP/Compression +l10n: + sourceCommit: b0870830e4c02596ca6c501f8f8b468a917eafc2 --- {{HTTPSidebar}} -**圧縮**は、ウェブサイトのパフォーマンスを向上させるための重要な手段です。ドキュメントによっては、必要な帯域を最大 70% 削減するほどサイズが縮減します。長年かけてアルゴリズムはより効率的になり、またクライアントおよびサーバーが新たなアルゴリズムをサポートしました。 +**圧縮**は、ウェブサイトのパフォーマンスを向上させるための重要な手段です。文書によっては、必要な帯域を最大 70% 削減するほどサイズが縮減します。長年かけてアルゴリズムはより効率的になり、またクライアントおよびサーバーが新たなアルゴリズムに対応してきました。 実際のところ、圧縮の仕組みはブラウザーやサーバーがすでに実装していますので、ウェブ開発者が実装する必要性はありません。しかし、サーバーが適切に設定されるように注意しなければなりません。圧縮は、3 種類の異なるレベルで実施します。 - 始めに、一部のファイル形式は、固有の最適化された方法で圧縮されます。 -- そして、一般的な暗号化が HTTP レベルで行われれる場合があります (リソースはエンドツーエンドで圧縮されて転送されます) +- そして、一般的な暗号化が HTTP レベルで行われれる場合があります（リソースはエンドツーエンドで圧縮されて転送されます） - 最後に HTTP コネクションの 2 つのノード間で、コネクションレベルで圧縮が定義される場合があります。 ## ファイル形式の圧縮 -それぞれのデータ形式には、無駄なスペース (_wasted space_) と呼ばれる冗長な領域が内部にあります。テキストが一般的に 60% もの冗長性を持つとして、この割合は音声や動画といった他のメディアよりはるかに高くなります。テキストとは異なり、これらのその他のメディア形式はデータを格納するためにより多くの領域を使用するので、ストレージを最適化し領域を取り戻す必要性はごく初期に明らかになりました。技術者は特定の用途向けに設計されたファイル形式で使用される、最適化された圧縮アルゴリズムを設計しました。メディアファイルで使用される圧縮アルゴリズムは、大きく 2 つのカテゴリーに分類できます。 +それぞれのデータ形式には、無駄なスペース (_wasted space_) と呼ばれる冗長な領域が内部にあります。テキストは一般的に 60% もの冗長性を持つものであり、この割合は音声や動画といった他のメディアよりはるかに高くなります。テキストとは異なり、これらのその他のメディア形式はデータを格納するためにより多くの領域を使用するので、ストレージを最適化し領域を取り戻す必要性はごく初期に明らかになりました。技術者は特定の用途向けに設計されたファイル形式で使用される、最適化された圧縮アルゴリズムを設計しました。メディアファイルで使用される圧縮アルゴリズムは、大きく 2 つのカテゴリーに分類できます。 -- _可逆圧縮_。圧縮・展開のサイクルで取り出したデータが変化しません。これは元のデータに (バイト単位で) 一致します。 +- _可逆圧縮_。圧縮・展開のサイクルで取り出したデータが変化しません。これは元のデータに（バイト単位で）一致します。 画像では `gif` や `png` が可逆圧縮を使用しています。 -- _非可逆圧縮_。圧縮・展開のサイクルで、ユーザーが (できるだけ) 感知できない方法で元のデータを変更します。 +- _非可逆圧縮_。圧縮・展開のサイクルにおいて、ユーザーが（できるだけ）認知できない方法で元のデータを変更します。 ウェブ上の動画形式は非可逆です。 `jpeg` 画像も非可逆です。 -`webp` のように可逆圧縮と非可逆圧縮のいずれかを使用できる形式もありますが、通常は非可逆圧縮で高圧縮・低圧縮を設定でき、当然ながらそれは品質の高低に結びつきます。サイトのパフォーマンスを高めるには、満足できる品質レベルを維持しながら、できるだけ圧縮することが理想です。画像の場合は、ツールが生成する画像はウェブ向けに十分最適化されていない場合があります。要求する品質で可能な限り圧縮するツールを使用することをお勧めします。この用途に特化した [多くのツール](https://www.creativebloq.com/design/image-compression-tools-1132865) があります。 +`webp` のように可逆圧縮と非可逆圧縮のいずれかを使用できる形式もありますが、通常は非可逆圧縮で高圧縮・低圧縮を設定でき、当然ながらそれは品質の高低に結びつきます。サイトのパフォーマンスを高めるには、満足できる品質レベルを維持しながら、できるだけ圧縮することが理想です。画像の場合は、ツールが生成する画像はウェブ向けに十分最適化されていない場合があります。要求する品質で可能な限り圧縮するツールを使用することをお勧めします。この用途に特化した[多くのツール](https://www.creativebloq.com/design/image-compression-tools-1132865)があります。 非可逆圧縮アルゴリズムは一般的に、可逆圧縮より効率がよくなります。 @@ -30,30 +32,30 @@ slug: Web/HTTP/Compression ## エンドツーエンドの圧縮 -エンドツーエンドの圧縮は、ウェブサイトのパフォーマンスをもっとも向上させます。エンドツーエンドの圧縮は、サーバーによって行われるメッセージボディの圧縮を指しており、圧縮されたデータはクライアントに到達するまで変更されません。中間のノードはすべて、ボディ部分に手をつけないままにします。 +エンドツーエンドの圧縮は、ウェブサイトのパフォーマンスをもっとも向上させます。エンドツーエンドの圧縮は、サーバーによって行われるメッセージ本体の圧縮を指しており、圧縮されたデータはクライアントに到達するまで変更されません。中間のノードはすべて、本体部分に手をつけないままにします。 -![](httpenco1.png) +![圧縮された HTTP 本体をネットワークノード経由でクライアントに送信するサーバー。本体がクライアントにリーチするまで、ネットワーク上のどのホップでも展開されません。](httpenco1.png) 現代のすべてのブラウザーやサーバーはこの圧縮をサポートしており、唯一取り決めることは、使用する圧縮アルゴリズムです。これらのアルゴリズムは、テキストに最適化されています。1990 年代に圧縮技術は速いペースで進歩して、いくつものアルゴリズムが、使用可能な選択肢に追加されました。現在妥当なアルゴリズムは、もっとも一般的な `gzip` と新たな挑戦者である `br` の 2 つだけです。 -使用するアルゴリズムを選択するには、ブラウザーとサーバーで [プロアクティブなコンテンツネゴシエーション](/ja/docs/Web/HTTP/Content_negotiation) を行います。ブラウザーは {{HTTPHeader("Accept-Encoding")}} ヘッダーで、サポートするアルゴリズムを優先度順に並べて送信します。サーバーはそのうちひとつを選択して、レスポンスのボディの圧縮に使用します。そして {{HTTPHeader("Content-Encoding")}} ヘッダーを使用して、選択したアルゴリズムをブラウザーに伝えます。エンコーディングに基づいて表現を選択するためにコンテンツネゴシエーションを使用したとき、少なくとも {{HTTPHeader("Content-Encoding")}} を含めた {{HTTPHeader("Vary")}} ヘッダーを、レスポンスとともに送信しなければなりません。この方法によって、リソースのさまざまな表現をキャッシュすることができます。 +使用するアルゴリズムを選択するには、ブラウザーとサーバーで[プロアクティブなコンテンツネゴシエーション](/ja/docs/Web/HTTP/Content_negotiation)を行います。ブラウザーは {{HTTPHeader("Accept-Encoding")}} ヘッダーで、サポートするアルゴリズムを優先度順に並べて送信します。サーバーはそのうちひとつを選択して、レスポンスの本体の圧縮に使用します。そして {{HTTPHeader("Content-Encoding")}} ヘッダーを使用して、選択したアルゴリズムをブラウザーに伝えます。エンコーディングに基づいて表現を選択するためにコンテンツネゴシエーションを使用したとき、少なくとも {{HTTPHeader("Content-Encoding")}} を含めた {{HTTPHeader("Vary")}} ヘッダーを、レスポンスとともに送信しなければなりません。この方法によって、リソースのさまざまな表現をキャッシュすることができます。 -![](httpcompression1.png) +!['Accept-Encoding: br, gzip' ヘッダーでコンテンツをリクエストされたクライアント。サーバは Brotli アルゴリズムで圧縮した本体と、必要な 'Content-Encoding' ヘッダーと 'Vary' ヘッダーでレスポンスします。](httpcompression1.png) 圧縮によってパフォーマンスが大きく向上しますので、画像・音声・動画といったすでに圧縮されているものを除くすべてのファイルで圧縮を有効化することを推奨します。 -Apache は圧縮や [mod_deflate](https://httpd.apache.org/docs/current/mod/mod_deflate.html) をサポートします。 nginx では [ngx_http_gzip_module](https://nginx.org/en/docs/http/ngx_http_gzip_module.html)、 IIS では [`<httpCompression>`](https://www.iis.net/configreference/system.webserver/httpcompression) 要素があります。 +Apache は圧縮や [mod_deflate](https://httpd.apache.org/docs/current/mod/mod_deflate.html) をサポートします。 Nginx では [ngx_http_gzip_module](https://nginx.org/en/docs/http/ngx_http_gzip_module.html)、 IIS では [`<httpCompression>`](https://docs.microsoft.com/iis/configuration/system.webServer/httpCompression/) 要素があります。 ## ホップバイホップの圧縮 -ホップバイホップの圧縮はエンドツーエンドの圧縮に似ています。しかし、サーバー内のリソースでは圧縮を行わずに特定の表現形式を生成して転送しますが、クライアントとサーバーの間のパス上にある任意の 2 つのノードの間でメッセージのボディが圧縮されるという根本的な違いがあります。連続した中間ノードの間のコネクションで、*異なる*圧縮が行われることがあります。 +ホップバイホップの圧縮はエンドツーエンドの圧縮に似ています。しかし、サーバー内のリソースでは圧縮を行わずに特定の表現形式を生成して転送しますが、クライアントとサーバーの間のパス上にある任意の 2 つのノードの間でメッセージの本体が圧縮されるという根本的な違いがあります。連続した中間ノードの間のコネクションで、*異なる*圧縮が行われることがあります。 -![](httpte1.png) +![非圧縮 HTTP 本体をネットワークノード経由でクライアントに送信するサーバー。本体はクライアントに到達する前に、'Transfer-Encoding' ヘッダーによってネットワーク上のノードで圧縮・展開されます。](httpte1.png) これを行うために、 HTTP ではエンドツーエンドの圧縮のコンテンツネゴシエーションに似ている仕組みを使用します。リクエストを転送するノードは {{HTTPHeader("TE")}} ヘッダーを使用して圧縮アルゴリズムを伝えます。相手のノードは適切な方式を選択して圧縮を行い、 {{HTTPHeader("Transfer-Encoding")}} ヘッダーを使用して、選択した方式を示します。 -![](httpcomp2.png) +![クライアントが、圧縮関連のヘッダーを持たないコンテンツをサーバーにリクエストされた場合。サーバーは圧縮されていない本体で応答します。本体がクライアントにリーチするまでに、ネットワーク上のノードで圧縮と展開が行われます。](httpcomp2.png) 実際は、ホップバイホップの圧縮はサーバーやクライアントにとって透過的であり、あまり使用されません。 {{HTTPHeader("TE")}} および {{HTTPHeader("Transfer-Encoding")}} は主にチャンク形式でレスポンスを送信するために使用され、長さがわからないリソースの転送を開始することができます。 -ホップレベルで圧縮や {{HTTPHeader("Transfer-Encoding")}} を使用することは Apache、nginx、IIS などほとんどのサーバーでまれであり、簡単に設定する方法はありません。このような設定は、主にプロキシレベルで行います。 +ホップレベルで圧縮や {{HTTPHeader("Transfer-Encoding")}} を使用することは Apache、Nginx、IIS などほとんどのサーバーでまれであり、簡単に設定する方法はありません。このような設定は、主にプロキシーレベルで行います。 diff --git a/files/ja/web/http/conditional_requests/index.md b/files/ja/web/http/conditional_requests/index.md index b9409fcca14379..06acc1dc663f04 100644 --- a/files/ja/web/http/conditional_requests/index.md +++ b/files/ja/web/http/conditional_requests/index.md @@ -1,6 +1,8 @@ --- title: HTTP 条件付きリクエスト slug: Web/HTTP/Conditional_requests +l10n: + sourceCommit: fc577878fa29a23248fba29e14eb67beb54aaaa2 --- {{HTTPSidebar}} @@ -13,8 +15,8 @@ HTTP 条件付きリクエストは、特定のヘッダーの値に応じて異 リクエストで使用したメソッドや前提条件で使用したヘッダー一式によって、さまざまな動作が定義されています。 -- {{HTTPMethod("GET")}} などの{{glossary("safe", "安全な")}}メソッドは、一般に文書を取得するメソッドであり、条件付きリクエストは関連する文書のみを返信するために利用することができます。これによって、帯域を節約します。 -- {{HTTPMethod("PUT")}} などの{{glossary("safe", "安全ではない")}}メソッドは、一般に文書をアップロードするメソッドであり、条件付きリクエストは文書がサーバーに格納されているものと同じものに基づいたものである場合に限ってアップロードするようにするために利用することができます。 +- {{glossary("Safe/HTTP", "安全な")}}メソッド、例えば {{HTTPMethod("GET")}} などは、一般に文書を取得するメソッドであり、条件付きリクエストは関連する文書のみを返信するために利用することができます。これによって、帯域を節約します。 +- {{glossary("Safe/HTTP", "安全ではない")}}メソッド、例えば {{HTTPMethod("PUT")}} などは、一般に文書をアップロードするメソッドであり、条件付きリクエストは文書がサーバーに格納されているものと同じものに基づいたものである場合に限ってアップロードするようにするために利用することができます。 ## 検証子 @@ -34,7 +36,7 @@ HTTP 条件付きリクエストは、特定のヘッダーの値に応じて異 強い検証は、比較対象のリソースがバイト単位で同一であることを保証します。これは一部の条件ヘッダーで必須、また他のヘッダーでは既定の要件です。強い検証はとても厳密であり、サーバーレベルで保証することが困難である場合もありますが、時には性能を犠牲にしても、データが失われていないことを常に保証します。 -{{HTTPHeader("Last-Modified")}} で強い検証のための一意な識別子を持つことは、とても困難です。多くの場合、リソースの MD5 ハッシュ (あるいはその派生物) を持つ {{HTTPHeader("ETag")}} を使用します。 +{{HTTPHeader("Last-Modified")}} で強い検証のための一意な識別子を持つことは、とても困難です。多くの場合、リソースの MD5 ハッシュ（あるいはその派生物）を持つ {{HTTPHeader("ETag")}} を使用します。 ### 弱い検証 @@ -45,13 +47,13 @@ HTTP 条件付きリクエストは、特定のヘッダーの値に応じて異 条件ヘッダーと呼ばれるいくつかの HTTP ヘッダーが、条件付きリクエストをもたらします。 - {{HTTPHeader("If-Match")}} - - : 遠方のリソースの {{HTTPHeader("ETag")}} と、このヘッダーに載せた etag が等しければ成功します。既定では etag に接頭辞 `'W/'` がついていない限り、強い検証を行います。 + - : 遠方のリソースの {{HTTPHeader("ETag")}} と、このヘッダーに載せた etag が等しければ成功します。強い検証を行います。 - {{HTTPHeader("If-None-Match")}} - - : 遠方のリソースの {{HTTPHeader("ETag")}} と、このヘッダーに載せたそれぞれの etag が異なっていれば成功します。既定では etag に接頭辞 `'W/'` がついていない限り、強い検証を行います。 + - : 遠方のリソースの {{HTTPHeader("ETag")}} と、このヘッダーに載せたそれぞれの etag が異なっていれば成功します。弱い検証を行います。 - {{HTTPHeader("If-Modified-Since")}} - : 遠方のリソースの {{HTTPHeader("Last-Modified")}} の日時が、このヘッダーで指定した日時より新しければ成功します。 - {{HTTPHeader("If-Unmodified-Since")}} - - : 遠方のリソースの {{HTTPHeader("Last-Modified")}} の日時が、このヘッダーで指定した日時より過去または同一であれば成功します。 + - : 遠方のリソースの {{HTTPHeader("Last-Modified")}} の日時が、このヘッダーで指定した日時以前であれば成功します。 - {{HTTPHeader("If-Range")}} - : {{HTTPHeader("If-Match")}} や {{HTTPHeader("If-Unmodified-Since")}} に似ていますが、 etag または日時をひとつしか持つことができません。条件が失敗すると範囲指定リクエストも失敗して、 {{HTTPStatus("206")}} `Partial Content` レスポンスの代わりに {{HTTPStatus("200")}} `OK` でリソース全体を送信します。 @@ -65,13 +67,14 @@ HTTP 条件付きリクエストは、特定のヘッダーの値に応じて異 リソースと共に、ヘッダーで検証子を送信します。この例では {{HTTPHeader("Last-Modified")}} と {{HTTPHeader("ETag")}} の両方を送信していますが、どちらか一方しか使用しません。これらの検証子はリソースと共に (すべてのヘッダーのように) キャッシュへ保存され、キャッシュが陳腐化したときに条件付きリクエストを作成するために使用します。 -キャッシュが陳腐化していなければ、条件付きリクエストは行いません。しかしキャッシュが陳腐化すると主に {{HTTPHeader("Cache-Control")}} ヘッダーに制御されて、クライアントはキャッシュされた値を直接使用せず、{{HTTPHeader("If-Modified-Since")}} または {{HTTPHeader("If-Match")}} ヘッダーに検証子の値を指定した*条件付きリクエスト*を発行します。 +キャッシュが陳腐化していなければ、条件付きリクエストは行いません。しかしキャッシュが陳腐化すると主に {{HTTPHeader("Cache-Control")}} ヘッダーに制御されて、クライアントはキャッシュされた値を直接使用せず、{{HTTPHeader("If-Modified-Since")}} または {{HTTPHeader("If-None-Match")}} ヘッダーに検証子の値を指定した*条件付きリクエスト*を発行します。 リソースが変更されていなければ、サーバーは {{HTTPStatus("304")}} `Not Modified` レスポンスを返します。これはキャッシュを再び新鮮な状態にして、クライアントはキャッシュされたリソースを使用します。これはリソースをいくらか消費するレスポンスとリクエストのやり取りが発生しますが、通信網でリソース全体を再度転送するよりも効率的です。 ![キャッシュが古くなっている状態では、条件付きのリクエストが送信されます。サーバーは、リソースが変更されたかどうかを判断し、このケースのように、同じものであるため再度送信しないことを決定することができます。](httpcache2.png) -リソースが変更された場合は、サーバーは条件付きではないリクエストと同様に {{HTTPStatus("200")}} `OK` レスポンスで新しいバージョンのリソースを送信します。そして、クライアントは新しいリソースを使用します (また、それをキャッシュします)。 +リソースが変更された場合、サーバーは新しいバージョンのリソースを含む {{HTTPStatus("200", "200 OK")}} レスポンスを返します（リクエストが条件付きでなかったかのように）。 +クライアントはこの新しいリソースを使用します（そしてキャッシュします）。 ![リソースが変更された場合には、リクエストが条件付きでなかったかのように送り返されます。](httpcache3.png) @@ -97,7 +100,7 @@ HTTP 条件付きリクエストは、特定のヘッダーの値に応じて異 ![If-Range ヘッダーを使用すると、リソースが変更されている場合、サーバは直接完全なリソースを送り返すことができ、 412 エラーを送信してクライアントが再度ダウンロードを開始するのを待つ必要がありません。](httpresume4.png) -この解決策はより効率的ですが、柔軟性が若干劣ります (条件で etag をひとつしか使用できません)。ただし、これ以上の柔軟性はほとんど必要ありません。 +この解決策はより効率的ですが、柔軟性が若干劣ります（条件で etag をひとつしか使用できません）。ただし、これ以上の柔軟性はほとんど必要ありません。 ### 楽観的ロックで更新が失われる問題を避ける @@ -113,7 +116,7 @@ HTTP 条件付きリクエストは、特定のヘッダーの値に応じて異 2 つのクライアントの片方を困らせることなく、この問題に対処する方法はありません。しかし、更新が失われたりや競合状態になったりすることは避けるべきです。予測可能な結果や、クライアントが変更点を却下されたときに通知を受けることを望みます。 -条件付きリクエストで、_楽観的ロックアルゴリズム_ (ほとんどの wiki やソース管理システムで使用されています) を実装できます。この考え方ではすべてのクライアントに、リソースの複製の取得を許可してローカルで変更することを許可します。そして、最初のクライアントが更新内容を送信することを許可して成功させて、以降の古いバージョンになったリソースに基づく更新は拒否します。 +条件付きリクエストで、_楽観的ロックアルゴリズム_ （ほとんどの wiki やソース管理システムで使用されています）を実装できます。この考え方ではすべてのクライアントに、リソースの複製の取得を許可してローカルで変更することを許可します。そして、最初のクライアントが更新内容を送信することを許可して成功させて、以降の古いバージョンになったリソースに基づく更新は拒否します。 ![条件付きリクエストにより、楽観的なロックを実装することができます。](httplock3.png) @@ -125,7 +128,7 @@ HTTP 条件付きリクエストは、特定のヘッダーの値に応じて異 ![通常のアップロードと同様に、リソースの最初のアップロードには競合状態が発生します。 If-None-Match で防ぐことができます。](httpfirst.png) -`If-None-Match` は HTTP/1.1 (およびそれ以降) に準拠するサーバーのみで動作します。サーバーが対応しているかが不明である場合は、始めに確認用の {{HTTPMethod("HEAD")}} リクエストをリソースに対して発行しなければなりません。 +`If-None-Match` は HTTP/1.1 （およびそれ以降）に準拠するサーバーのみで動作します。サーバーが対応しているかが不明である場合は、始めに確認用の {{HTTPMethod("HEAD")}} リクエストをリソースに対して発行しなければなりません。 ## まとめ diff --git a/files/ja/web/http/content_negotiation/index.md b/files/ja/web/http/content_negotiation/index.md index 0b8915607a331a..3ff684c851a176 100644 --- a/files/ja/web/http/content_negotiation/index.md +++ b/files/ja/web/http/content_negotiation/index.md @@ -1,40 +1,42 @@ --- -title: コンテンツ交渉 +title: コンテンツネゴシエーション slug: Web/HTTP/Content_negotiation +l10n: + sourceCommit: 0880a90f3811475d78bc4b2c344eb4146f25f66c --- {{HTTPSidebar}} -[HTTP](/ja/docs/Glossary/HTTP) において**コンテンツ交渉** (content negotiation) は、同じ URI におけるさまざまな{{Glossary("Representation header","表現")}}のリソースを提供するために使用する仕組みであり、ユーザーエージェントはどのリソースがユーザーにもっとも適しているか (例えば文書の言語はどれか、画像形式はどれか、コンテンツエンコード方式はどれか) を指定することができます。 +[HTTP](/ja/docs/Glossary/HTTP) において**コンテンツネゴシエーション** (content negotiation) は、同じ URI におけるさまざまな{{Glossary("Representation header","表現")}}のリソースを提供するために使用する仕組みであり、ユーザーエージェントはどのリソースがユーザーにもっとも適しているか（例えば文書の言語はどれか、画像形式はどれか、コンテンツエンコーディングはどれか）を指定することができます。 -> **メモ:** [WHATWG のウィキページ](https://wiki.whatwg.org/wiki/Why_not_conneg)には、 HTTP コンテンツ交渉の短所がいくつか書かれています。 HTML5 では、コンテンツ交渉の代替として、例えば [`<source>` 要素](/ja/docs/Web/HTML/Element/source)を提供しています。 +> **メモ:** [WHATWG のウィキページ](https://wiki.whatwg.org/wiki/Why_not_conneg)には、 HTTP コンテンツネゴシエーションの短所がいくつか書かれています。 HTML では、コンテンツネゴシエーションの代替として、例えば [`<source>` 要素](/ja/docs/Web/HTML/Element/source)を提供しています。 -### コンテンツ交渉の原理 +### コンテンツネゴシエーションの原理 -特定の文書は**リソース** (_resource_) と呼ばれます。クライアントがリソースを取得したいときは、 URL でリクエストします。サーバーはこの URL **表現** (_representation_) と呼ばれます–特定の表現をクライアントに返します。それぞれの表現を含むリソース全体が一つの特定の URL を持ちます。**コンテンツ交渉**は、リソースが呼び出されたときに特定の表現を選択する方法を定めます。クライアントサーバーの間で交渉する方法がいくつかあります。 +特定の文書はリソース (_resource_) と呼ばれます。クライアントがリソースを取得したいときは、 URL でリクエストします。サーバーはこの URL を使用して、表現 (_representation_) と呼ばれる利用可能な変化形–特定の表現をクライアントに返します。それぞれの表現を含むリソース全体が一つの特定の URL を持ちます。**コンテンツネゴシエーション**は、リソースが呼び出されたときに特定の表現を選択する方法を定めます。クライアントサーバーの間でネゴシエーションする方法がいくつかあります。 -![](httpnego.png) +![URL をリクエストしているクライアント。サーバーには URL で表される複数のリソースがあり、リクエストに基づいて適切なコンテンツを返送します。](httpnego.png) 最適な表現は、以下の 2 つの仕組みのいずれかによって識別されます。 -- クライアントによる特定の [HTTP ヘッダー](/ja/docs/Web/HTTP/Headers) (**サーバー駆動型交渉**または **プロアクティブ交渉**)。これは、特定の種類のリソースで交渉を行う標準的な方法です。 -- サーバーによる {{HTTPStatus("300")}} (Multiple Choices) または {{HTTPStatus("406")}} (Not Acceptable) [HTTP レスポンスコード](/ja/docs/Web/HTTP/Status) (**エージェント駆動型交渉** または **リアクティブ交渉**)。これはフォールバック機構として使用します。 +- クライアントによる特定の [HTTP ヘッダー](/ja/docs/Web/HTTP/Headers) (*サーバー駆動型ネゴシエーション*または*プロアクティブネゴシエーション*)。これは、特定の種類のリソースでネゴシエーションを行う標準的な方法です。 +- サーバーによる {{HTTPStatus("300")}} (Multiple Choices)、{{HTTPStatus("406")}} (Not Acceptable)、{{HTTPStatus("415")}} (Unsupported Media Type) のいずれかの [HTTP レスポンスコード](/ja/docs/Web/HTTP/Status)（*エージェント駆動型ネゴシエーション*または*リアクティブネゴシエーション*）。これはフォールバック機構として使用します。 -数年来、[透過的コンテンツ交渉 (transparent content negotiation)](https://datatracker.ietf.org/doc/html/rfc2295) や `Alternates` ヘッダーといった他のコンテンツ交渉が提案されてきました。これらは支持を得られず、破棄されました。 +数年来、[透過的コンテンツネゴシエーション (transparent content negotiation)](https://datatracker.ietf.org/doc/html/rfc2295) や `Alternates` ヘッダーといった他のコンテンツネゴシエーションが提案されてきました。これらは支持を得られず、破棄されました。 -## サーバー駆動型コンテンツ交渉 +## サーバー駆動型コンテンツネゴシエーション -**サーバー駆動型コンテンツ交渉**またはプロアクティブコンテンツ交渉では、ブラウザー（または他の種類のユーザー エージェント）はいくつかの HTTP ヘッダーを URL と一緒に送信します。これらのヘッダーには、ユーザーが希望する選択肢を記述します。サーバーはこれらをヒントとして使い、内部アルゴリズムがクライアントに提供する最適なコンテンツを選択します。適切なリソースを提供できない場合、 {{HTTPStatus("406")}} (Not Acceptable) または {{HTTPStatus("415")}} (Unsupported Media Type) で応答し、対応しているメディアタイプのヘッダーを設定します（たとえば、POST と PATCH リクエストに対しては、それぞれ {{HTTPHeader("Accept-Post")}} または {{HTTPHeader("Accept-Patch")}} を使用します）。このアルゴリズムはサーバーに依存し、標準では定義されていません。 [Apache の交渉アルゴリズム](https://httpd.apache.org/docs/current/ja/content-negotiation.html#algorithm) をご覧ください。 +**サーバー駆動型コンテンツネゴシエーション**またはプロアクティブコンテンツネゴシエーションでは、ブラウザー（または他の種類のユーザー エージェント）はいくつかの HTTP ヘッダーを URL と一緒に送信します。これらのヘッダーには、ユーザーが希望する選択肢を記述します。サーバーはこれらをヒントとして使い、内部アルゴリズムがクライアントに提供する最適なコンテンツを選択します。適切なリソースを提供できない場合、 {{HTTPStatus("406")}} (Not Acceptable) または {{HTTPStatus("415")}} (Unsupported Media Type) で応答し、対応しているメディアタイプのヘッダーを設定します（たとえば、POST と PATCH リクエストに対しては、それぞれ {{HTTPHeader("Accept-Post")}} または {{HTTPHeader("Accept-Patch")}} を使用します）。このアルゴリズムはサーバーに依存し、標準では定義されていません。 [Apache ネゴシエーションアルゴリズム](https://httpd.apache.org/docs/current/ja/content-negotiation.html#algorithm) をご覧ください。 -![](httpnegoserver.png) +![コンテンツタイプを推奨するヘッダーを持つ URL をリクエストされたクライアント。サーバーは URL で表される複数のリソースを持っており、クライアントのリクエストヘッダーを尊重しながら、推奨する言語のコンテンツを返送し、リクエスト本体を圧縮します。](httpnegoserver.png) -HTTP/1.1 標準では、サーバー駆動型交渉を開始する標準ヘッダーの一覧 (例えば {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Language")}}) を定義しています。厳密に言えば {{HTTPHeader("User-Agent")}} はこの一覧に含まれていませんが、リクエストしたリソースの特定の表現を送信するために使用されることがあります。ただし、これはよい習慣ではないと考えられています。サーバーはどのヘッダーを実際にコンテンツ交渉で使用したかを示すために {{HTTPHeader("Vary")}} ヘッダー（あるいは、より的確な関係があるレスポンスヘッダー）を使用します。これにより、[キャッシュ](/ja/docs/Web/HTTP/Caching)が適切に機能します。 +HTTP/1.1 標準では、サーバー駆動型ネゴシエーションを開始する標準ヘッダーの一覧（例えば {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Language")}}）を定義しています。厳密に言えば {{HTTPHeader("User-Agent")}} はこの一覧に含まれていませんが、リクエストしたリソースの特定の表現を送信するために使用されることがあります。ただし、これはよい習慣ではないと考えられています。サーバーはどのヘッダーを実際にコンテンツネゴシエーションで使用したかを示すために {{HTTPHeader("Vary")}} ヘッダー（あるいは、より的確な関係があるレスポンスヘッダー）を使用します。これにより、[キャッシュ](/ja/docs/Web/HTTP/Caching)が適切に機能します。 -さらに、交渉に使用できるヘッダーを追加する実験的な提案があり、**クライアントヒント**と呼ばれています。クライアントヒントは、ユーザーエージェントを実行しているデバイスがどのようなものか（例えば、デスクトップコンピューターかモバイル端末か）を伝えます。 +さらに、ネゴシエーションに使用できるヘッダーを追加する実験的な提案があり、*クライアントヒント*と呼ばれています。クライアントヒントは、ユーザーエージェントを実行している端末がどのようなものか（例えば、デスクトップコンピューターかモバイル端末か）を伝えます。 -サーバー駆動型コンテンツ交渉は、リソースの特定の表現を決定するためのもっとも一般的な方法ですが、いくつか欠点があります。 +サーバー駆動型コンテンツネゴシエーションは、リソースの特定の表現を決定するためのもっとも一般的な方法ですが、いくつか欠点があります。 -- サーバーは、ブラウザーのことをすべて知っているわけではありません。クライアント拡張を加えても、ブラウザーの機能を完全には把握できません。クライアントが選択するリアクティブコンテンツ交渉とは異なり、サーバーの選択は常に少し独断的です。 +- サーバーは、ブラウザーのことをすべて知っているわけではありません。クライアント拡張を加えても、ブラウザーの機能を完全には把握できません。クライアントが選択するリアクティブコンテンツネゴシエーションとは異なり、サーバーの選択は常に少し独断的です。 - クライアントが提供する情報はかなり冗長であり（HTTP/2 のヘッダー圧縮は、この問題を緩和します）、またプライバシーのリスク（HTTP フィンガープリンティング）もあります。 - 指定されたリソースの複数の表現を送信すると、共有キャッシュの効率が下がります。また、サーバーの実装がより複雑になります。 @@ -46,7 +48,7 @@ HTTP/1.1 標準では、サーバー駆動型交渉を開始する標準ヘッ ### `Accept-CH` ヘッダー {{experimental_inline}} -> **メモ:** これは**クライアントヒント (Client Hints)** と呼ばれる**実験的**な技術の一部であり、現在は Chrome 46 以降が実装しています。 Device-Memory の値は Chrome 61 以降が実装しています。 +> **メモ:** これは*クライアントヒント (Client Hints)* と呼ばれる**実験的**な技術の一部であり、現在は Chrome 46 以降が実装しています。 Device-Memory の値は Chrome 61 以降が実装しています。 {{HTTPHeader("Accept-CH")}} は実験的なもので、サーバーが適切なリソースを選択するために使用できる設定データを羅列します。有効な値は以下のとおりです。 @@ -58,7 +60,7 @@ HTTP/1.1 標準では、サーバー駆動型交渉を開始する標準ヘッ ### `Accept-CH-Lifetime` ヘッダー -> **メモ:** これは、**実験的**な**クライアントヒント**と呼ばれる技術の一部であり、 Chrome 61 以降のみで利用できます。 +> **メモ:** これは*クライアントヒント (Client Hints)* と呼ばれる**実験的**な技術の一部であり、 Chrome 61 以降でのみ利用できます。 {{HTTPHeader("Accept-CH-Lifetime")}} ヘッダーは、 `Accept-CH` ヘッダーの `Device-Memory` 値と共に使用され、端末がメモリーの量をサーバーと共有することを許可すべき時間を示します。値はミリ秒単位で与えられ、使用は任意です。 @@ -75,30 +77,30 @@ HTTP メッセージの圧縮はウェブサイトのパフォーマンスを向 [設定に基づくエントロピー](https://www.eff.org/deeplinks/2010/01/primer-information-theory-and-privacy)が高まるため、変更された値はユーザーのフィンガープリントとして使用される可能性があります。値を変更することは推奨されておらず、ウェブサイトは、この値がユーザーの本当の希望を反映していると信じてはいけません。このヘッダーで言語検出を行うと、使い勝手を損なう可能性があるため、サイトのデザイナーは使用することを避けてください。 - サイトデザイナーは常に、サーバーが選択した言語を変える手段を、例えばサイト上に言語切り替えメニューを提供するなりして提供するべきです。多くのユーザーエージェントは `Accept-Language` ヘッダーに、ユーザーインターフェイス言語に合わせた既定値を提供します。エンドユーザーは大抵、この設定を変更しません。変更する方法を知らなかったり、コンピューティング環境の都合で変更できなかったりするからです。 -- サーバーが選択した言語をユーザーが変更したら、サイトは言語検出を使用せず、明示的に指定された言語に従うべきです。言い換えると、このヘッダーを使用して適切な言語を選択するのは、サイトの入り口のページだけとするべきです。 +- サーバーが選択した言語をユーザーが変更したら、サイトは言語検出を使用せず、明示的に指定された言語に従うべきです。言い換えると、このヘッダーを使用して適切な言語を選択するのは、サイトの入口のページだけとするべきです。 ### `User-Agent` ヘッダー > **メモ:** コンテンツの選択にこのヘッダーを使用することは、正当な使用方法ですが、ユーザーエージェントがどの機能に対応しているかを判断するためにこのヘッダーを頼ることは[悪い習慣であると考えられています](/ja/docs/Web/HTTP/Browser_detection_using_the_user_agent)。 -{{HTTPHeader("User-Agent")}} ヘッダーは、リクエストを送信するブラウザーを識別します。この文字列には、空白区切りで**製品トークン**や**コメント**のリストが含まれることがあります。 +{{HTTPHeader("User-Agent")}} ヘッダーは、リクエストを送信するブラウザーを識別します。この文字列には、空白区切りで*製品トークン*や*コメント*のリストが含まれることがあります。 -**製品トークン**は `Firefox/4.0.1` のように、名称、スラッシュ '`/`'、バージョン番号で構成されます。ユーザーエージェントは好きなだけこれを入れることができます。**コメント**は、括弧で囲まれた任意の文字列です。当然ながら、その文字列内で括弧を使用することはできません。コメントの内部形式は標準化されておらず、従って各ブラウザーがさまざまなトークンをセミコロン '`;`' 区切りで入れています。 +*製品トークン*は `Firefox/4.0.1` のように、名称、スラッシュ '`/`'、バージョン番号で構成されます。ユーザーエージェントは好きなだけこれを入れることができます。*コメント*は、括弧で囲まれた任意の文字列です。当然ながら、その文字列内で括弧を使用することはできません。コメントの内部形式は標準化されておらず、従って各ブラウザーがさまざまなトークンをセミコロン '`;`' 区切りで入れています。 ### `Vary` レスポンスヘッダー -クライアントが送信する前出の `Accept-*` ヘッダーとは対照的に、 {{HTTPHeader("Vary")}} HTTP ヘッダーはウェブサーバーがレスポンスで送信します。これは、サーバーがサーバー駆動型コンテンツ交渉で使用したヘッダーのリストを示します。このヘッダーは交渉を再現できるように、判断基準のキャッシュを知らせるために必要であり、キャッシュが機能を果たすようにするとともに、ユーザーに誤ったコンテンツを提供することを防ぎます。 +クライアントが送信する前出の `Accept-*` ヘッダーとは対照的に、 {{HTTPHeader("Vary")}} HTTP ヘッダーはウェブサーバーがレスポンスで送信します。これは、サーバーがサーバー駆動型コンテンツネゴシエーションで使用したヘッダーのリストを示します。このヘッダーはネゴシエーションを再現できるように、判断基準のキャッシュを知らせるために必要であり、キャッシュが機能を果たすようにするとともに、ユーザーに誤ったコンテンツを提供することを防ぎます。 -特別な値 '`*`' は、サーバー駆動型コンテンツ交渉で適切なコンテンツを選ぶために、ヘッダーで与えられていない情報も使用することを表します。 +特別な値 '`*`' は、サーバー駆動型コンテンツネゴシエーションで適切なコンテンツを選ぶために、ヘッダーで与えられていない情報も使用することを表します。 -`Vary` ヘッダーは HTTP バージョン 1.1 で追加され、キャッシュが適切に働くようにするためのものです。サーバー駆動型コンテンツ交渉で動作させるためには、転送されたコンテンツを選択するためにサーバーが使用した基準をキャッシュが知らなければなりません。この方法で、キャッシュはコンテンツ選択のアルゴリズムを再生することを可能にして、サーバーへさらにリクエストを行うことなく適切なコンテンツを直接提供できるでしょう。当然ながらワイルドカード '`*`' は、背後にある要素をキャッシュで知ることができないため、キャッシュの生成を妨げます。詳しくは、 [HTTP キャッシュ > 変化するレスポンス](/ja/docs/Web/HTTP/Caching#vary)を参照してください。 +`Vary` ヘッダーは HTTP バージョン 1.1 で追加され、キャッシュが適切に働くようにするためのものです。サーバー駆動型コンテンツネゴシエーションで動作させるためには、転送されたコンテンツを選択するためにサーバーが使用した基準をキャッシュが知らなければなりません。この方法で、キャッシュはコンテンツ選択のアルゴリズムを再生することを可能にして、サーバーへさらにリクエストを行うことなく適切なコンテンツを直接提供できるでしょう。当然ながらワイルドカード '`*`' は、背後にある要素をキャッシュで知ることができないため、キャッシュの生成を妨げます。詳しくは、 [HTTP キャッシュ > 変化するレスポンス](/ja/docs/Web/HTTP/Caching#vary)を参照してください。 -## エージェント駆動型交渉 +## エージェント駆動型ネゴシエーション -サーバー駆動型交渉には、うまくスケーリングできないという欠点があります。交渉では、ひとつの機能に対してひとつのヘッダーを使用します。画面サイズ、解像度、または他の軸を使用したい場合は、新たな HTTP ヘッダーを作成する必要があります。このヘッダーを、すべてのリクエストで送信しなければなりません。ヘッダーが少ない場合は問題にはなりませんが、ヘッダーの数が増えると、最終的にはメッセージの大きさがパフォーマンスに影響を与える可能性があります。多くの詳細なヘッダーを送信するとエントロピーも多く送信されますので、 HTTP フィンガープリンティングの可能性やそれに伴うプライバシーの懸念が増大します。 +サーバー駆動型ネゴシエーションには、うまくスケーリングできないという欠点があります。ネゴシエーションでは、ひとつの機能に対してひとつのヘッダーを使用します。画面サイズ、解像度、または他の軸を使用したい場合は、新たな HTTP ヘッダーを作成する必要があります。このヘッダーを、すべてのリクエストで送信しなければなりません。ヘッダーが少ない場合は問題にはなりませんが、ヘッダーの数が増えると、最終的にはメッセージの大きさがパフォーマンスに影響を与える可能性があります。多くの詳細なヘッダーを送信するとエントロピーも多く送信されますので、 HTTP フィンガープリンティングの可能性やそれに伴うプライバシーの懸念が増大します。 -HTTP では、もうひとつの交渉方法である**エージェント駆動型交渉**または**リアクティブ交渉**が利用できます。この場合、サーバーはあいまいなリクエストに直面したときに、利用可能な代替リソースへのリンクを含むページを送り返します。ユーザーはそのリソースを提示され、使用するリソースを選択します。 +HTTP では、もうひとつのネゴシエーション方法である*エージェント駆動型ネゴシエーション*または*リアクティブネゴシエーション*が利用できます。この場合、サーバーはあいまいなリクエストに直面したときに、利用可能な代替リソースへのリンクを含むページを送り返します。ユーザーはそのリソースを提示され、使用するリソースを選択します。 -![](httpnego3.png) +![クライアントが、コンテンツタイプを推奨するヘッダーを持つ URL をリクエストされた場合。サーバーは URL で表される複数のリソースを持ち、複数のレスポンスを返します。そのため、クライアントは好みの圧縮アルゴリズムが適用された本体を選ぶことができます。](httpnego3.png) -残念ながら HTTP 標準では、使用可能なリソースを選択するためのページの様式を定めていないため、このプロセスを自動化することができません。この方法は、**サーバー駆動型交渉**のフォールバックのほかにも、スクリプト、特に JavaScript のリダイレクトで常に使われています。交渉基準を確認した後、スクリプトがリダイレクトを実行します。第二の問題点は、実際のリソースを取り出すために複数のリクエストが必要であるため、ユーザーがリソースを利用可能になるのが遅くなることです。 +残念ながら HTTP 標準では、使用可能なリソースを選択するためのページの様式を定めていないため、このプロセスを自動化することができません。この方法は、**サーバー駆動型ネゴシエーション**のフォールバックのほかにも、スクリプト、特に JavaScript のリダイレクトで常に使われています。ネゴシエーション基準を確認した後、スクリプトがリダイレクトを実行します。第二の問題点は、実際のリソースを取り出すために複数のリクエストが必要であるため、ユーザーがリソースを利用可能になるのが遅くなることです。 diff --git a/files/ja/web/http/cors/errors/index.md b/files/ja/web/http/cors/errors/index.md index 6004bf51babc74..fffce2108405e3 100644 --- a/files/ja/web/http/cors/errors/index.md +++ b/files/ja/web/http/cors/errors/index.md @@ -1,26 +1,28 @@ --- title: CORS のエラー slug: Web/HTTP/CORS/Errors +l10n: + sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8 --- {{HTTPSidebar}} -[オリジン間リソース共有](/ja/docs/Web/HTTP/CORS) (Cross-Origin Resource Sharing) ({{Glossary("CORS")}}) は、サーバーが[同一オリジンポリシー](/ja/docs/Web/Security/Same-origin_policy)を緩和することができる標準です。例えば、サイトが埋め込み可能なサービスを提供する場合、このような制約を緩和する必要があるかもしれません。このような CORS の構成の設定は必ずしも簡単ではなく、いくらか冒険的です。これらのページでは、よくある CORS のエラーメッセージと解決方法を調査します。 +[オリジン間リソース共有](/ja/docs/Web/HTTP/CORS) (Cross-Origin Resource Sharing) ({{Glossary("CORS")}}) は、サーバーが[同一オリジンポリシー](/ja/docs/Web/Security/Same-origin_policy)を緩和することができる標準規格です。例えば、サイトが埋め込み可能なサービスを提供する場合、このような制約を緩和する必要があるかもしれません。このような CORS の構成の設定は必ずしも簡単ではなく、いくらか冒険的です。これらのページでは、よくある CORS のエラーメッセージと解決方法を調査します。 -CORS 構成が正しく設定されていないと、ブラウザーコンソールには `"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $somesite"` のようなエラーを表示して、リクエストが CORS のセキュリティ規則を侵害しているためにブロックされたことを示します。これは必ずしも設定ミスとは限りません。実際には、ユーザーのウェブアプリケーションおよびリモートの外部サービスからのリクエストが、意図的に許可されていない場合もあります。しかし、ただし、エンドポイントが使用可能である場合、成功するためにはデバッグが必要です。 +CORS 構成が正しく設定されていないと、ブラウザーのコンソールには `"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $somesite"` のようなエラーを表示して、リクエストが CORS のセキュリティ規則を侵害しているためにブロックされたことを示します。これは必ずしも設定ミスとは限りません。実際には、ユーザーのウェブアプリケーションおよびリモートの外部サービスからのリクエストが、意図的に許可されていない場合もあります。ただし、エンドポイントが使用可能である場合、成功するためにはデバッグが必要です。 ## 問題の識別 CORS の構成に関する問題を理解するために、どのリクエストが、なぜ失敗したのかを調べる必要があります。そのためには以下の手順が役立つかもしれません。 -1. 問題のウェブサイトやウェブアプリを実行し、[開発者ツール](/ja/docs/Tools)を開く。 -2. 失敗するトランザクションを再現してみて、[コンソール](/ja/docs/Tools/Web_Console)で CORS 違反エラーメッセージが表示されるかを調べる。おそらく次のように見える。 +1. 問題のウェブサイトやウェブアプリを実行し、[開発者ツール](https://firefox-source-docs.mozilla.org/devtools-user/index.html)を開く。 +2. 失敗するトランザクションを再現してみて、[コンソール](https://firefox-source-docs.mozilla.org/devtools-user/web_console/index.html)で CORS 違反エラーメッセージが表示されるかを調べる。おそらく次のように見える。 ![CORS エラーを表示している Firefox コンソール](cors-error2.png) エラーメッセージのテキストは以下のようなものになるでしょう。 -``` +```plain Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://some-url-here. (Reason: additional information here). @@ -41,7 +43,7 @@ Firefox のコンソールは、 CORS のためにリクエストが失敗した - [Reason: CORS header 'Access-Control-Allow-Origin' does not match 'xyz'](/ja/docs/Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin) - [Reason: Credential is not supported if the CORS header 'Access-Control-Allow-Origin' is '\*'](/ja/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials) - [Reason: Did not find method in CORS header 'Access-Control-Allow-Methods'](/ja/docs/Web/HTTP/CORS/Errors/CORSMethodNotFound) -- [Reason: expected 'true' in CORS header 'Access-Control-Allow-Credentials'](/ja/docs/Web/HTTP/CORS/Errors/CORSMissingAllowCredentials) +- [Reason: expected 'true' in CORS header 'Access-Control-Allow-Credentials'](/ja/docs/Web/HTTP/CORS/Errors/CORSMIssingAllowCredentials) - [Reason: CORS preflight channel did not succeed](/ja/docs/Web/HTTP/CORS/Errors/CORSPreflightDidNotSucceed) - [Reason: invalid token 'xyz' in CORS header 'Access-Control-Allow-Methods'](/ja/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowMethod) - [Reason: invalid token 'xyz' in CORS header 'Access-Control-Allow-Headers'](/ja/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowHeader) @@ -52,7 +54,7 @@ Firefox のコンソールは、 CORS のためにリクエストが失敗した - 用語集: {{Glossary("CORS")}} - [CORS 入門](/ja/docs/Web/HTTP/CORS) -- [サーバー側 CORS 設定](/ja/docs/Web/HTTP/Server-Side_Access_Control) +- [サーバー側 CORS 設定](/ja/docs/Web/HTTP/CORS) - [CORS 有効化の画像](/ja/docs/Web/HTML/CORS_enabled_image) -- [CORS の設定属性](/ja/docs/Web/HTML/CORS_settings_attributes) +- [CORS の設定属性](/ja/docs/Web/HTML/Attributes/crossorigin) - <https://www.test-cors.org> – CORS リクエストの試験ページ diff --git a/files/ja/web/http/headers/accept-encoding/index.md b/files/ja/web/http/headers/accept-encoding/index.md index 23abb37a1e7a35..b9416c3ad4086c 100644 --- a/files/ja/web/http/headers/accept-encoding/index.md +++ b/files/ja/web/http/headers/accept-encoding/index.md @@ -7,7 +7,7 @@ l10n: {{HTTPSidebar}} -**`Accept-Encoding`** は HTTP のリクエストヘッダーで、クライアントが理解することができるコンテンツのエンコーディング（ふつうは圧縮アルゴリズム）を示します。[コンテンツ交渉](/ja/docs/Web/HTTP/Content_negotiation)を使用して、サーバーは提案されたものから一つを選択して使用し、 {{HTTPHeader("Content-Encoding")}} レスポンスヘッダーを使用してクライアントに選択結果を知らせます。 +**`Accept-Encoding`** は HTTP のリクエストヘッダーで、クライアントが理解することができるコンテンツのエンコーディング（ふつうは圧縮アルゴリズム）を示します。[コンテンツネゴシエーション](/ja/docs/Web/HTTP/Content_negotiation)を使用して、サーバーは提案されたものから一つを選択して使用し、 {{HTTPHeader("Content-Encoding")}} レスポンスヘッダーを使用してクライアントに選択結果を知らせます。 クライアントとサーバーが同じ圧縮アルゴリズムに対応していた場合でも、 `identity` の値が受け付けられる場合は、サーバーはレスポンスの本体を圧縮しないことを選択する場合があります。これには主に 2 つの場合があります。 @@ -85,6 +85,6 @@ Accept-Encoding: br;q=1.0, gzip;q=0.8, *;q=0.1 ## 関連情報 -- HTTP [コンテンツ交渉](/ja/docs/Web/HTTP/Content_negotiation) -- コンテンツ交渉の結果を伴うヘッダー: {{HTTPHeader("Content-Encoding")}} +- HTTP [コンテンツネゴシエーション](/ja/docs/Web/HTTP/Content_negotiation) +- コンテンツネゴシエーションの結果を伴うヘッダー: {{HTTPHeader("Content-Encoding")}} - 他の同様のヘッダー: {{HTTPHeader("TE")}}, {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}} diff --git a/files/ja/web/http/headers/location/index.md b/files/ja/web/http/headers/location/index.md index f8bc5d49c78654..bb8a46a5bd68b5 100644 --- a/files/ja/web/http/headers/location/index.md +++ b/files/ja/web/http/headers/location/index.md @@ -9,7 +9,7 @@ slug: Web/HTTP/Headers/Location リダイレクトの場合、 HTTP メソッドは元のメソッドとリダイレクトの種類によって、 `Location` で示されたページにアクセスする新しいリクエストを生成するために使用します。 -- {{HTTPStatus("303")}} (See Also) レスポンスは常に {{HTTPMethod("GET")}} メソッドを使用するように誘導され、 {{HTTPStatus("307")}} (Temporary Redirect) および {{HTTPStatus("308")}} (Permanent Redirect) は元のリクエストにおいて使用されたメソッドを変更しません。 +- {{HTTPStatus("303")}} (See Other) レスポンスは常に {{HTTPMethod("GET")}} メソッドを使用するように誘導され、 {{HTTPStatus("307")}} (Temporary Redirect) および {{HTTPStatus("308")}} (Permanent Redirect) は元のリクエストにおいて使用されたメソッドを変更しません。 - {{HTTPStatus("301")}} (Moved Permanently) と {{HTTPStatus("302")}} (Found) は多くの場合はメソッドを変更しませんが、古いユーザーエージェントは変更することがあります (そのため、基本的に結果は不明です)。 これらのステータスコードを持つすべてのレスポンスは、 `Location` ヘッダーを送信します。 diff --git a/files/ja/web/http/headers/sec-fetch-user/index.md b/files/ja/web/http/headers/sec-fetch-user/index.md new file mode 100644 index 00000000000000..899bdb806ae903 --- /dev/null +++ b/files/ja/web/http/headers/sec-fetch-user/index.md @@ -0,0 +1,71 @@ +--- +title: Sec-Fetch-User +slug: Web/HTTP/Headers/Sec-Fetch-User +l10n: + sourceCommit: 0880a90f3811475d78bc4b2c344eb4146f25f66c +--- + +{{HTTPSidebar}} + +**`Sec-Fetch-User`** は{{Glossary("Fetch metadata request header", "フェッチメタデータリクエストヘッダー")}}で、これはユーザーアクティベーションによって開始されたリクエストに 対してのみ送られ、その値は常に `?1` です。 + +サーバーはこのヘッダーを使用して、文書や iframe などからのナビゲーションリクエストがユーザーによって発信されたかどうかを識別できます。 + +<table class="properties"> + <tbody> + <tr> + <th scope="row">ヘッダー種別</th> + <td>{{Glossary("Fetch metadata request header", "フェッチメタデータリクエストヘッダー")}}</td> + </tr> + <tr> + <th scope="row">{{Glossary("Forbidden header name", "禁止ヘッダー名")}}</th> + <td>はい（<code>Sec-</code> 接頭辞）</td> + </tr> + <tr> + <th scope="row"> + {{Glossary("CORS-safelisted request header", "CORS セーフリストリクエストヘッダー")}} + </th> + <td>いいえ</td> + </tr> + </tbody> +</table> + +## 構文 + +```http +Sec-Fetch-User: ?1 +``` + +## ディレクティブ + +値は常に `?1` です。リクエストがユーザーによるアクティベーション以外で発生した場合、 仕様ではヘッダーを完全に除外するようにブラウザーに要求されています。 + +## 例 + +ユーザーが同じオリジンの別のページへのページリンクをクリックした場合、結果として生じるリクエストには以下のヘッダーが入ります。 + +```http +Sec-Fetch-Dest: document +Sec-Fetch-Mode: navigate +Sec-Fetch-Site: same-origin +Sec-Fetch-User: ?1 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 関連ヘッダー + + - {{HTTPHeader("Sec-Fetch-Dest")}} + - {{HTTPHeader("Sec-Fetch-Mode")}} + - {{HTTPHeader("Sec-Fetch-Site")}} + +- [Protect your resources from web attacks with Fetch Metadata](https://web.dev/fetch-metadata/) (web.dev) +- [Fetch Metadata Request Headers playground](https://secmetadata.appspot.com/) (secmetadata.appspot.com) diff --git a/files/ja/web/http/messages/index.md b/files/ja/web/http/messages/index.md index b0edff75aefefb..0e941452f7d08a 100644 --- a/files/ja/web/http/messages/index.md +++ b/files/ja/web/http/messages/index.md @@ -1,6 +1,8 @@ --- title: HTTP メッセージ slug: Web/HTTP/Messages +l10n: + sourceCommit: 0880a90f3811475d78bc4b2c344eb4146f25f66c --- {{HTTPSidebar}} @@ -9,22 +11,22 @@ HTTP メッセージは、サーバーとクライアントがデータを交換 HTTP メッセージは ASCII でエンコードされたテキスト情報で構成されており、複数の行にまたがります。HTTP/1.1 およびそれより前のバージョンのプロトコルでは、メッセージがコネクション内でそのまま送信されます。HTTP/2 では、人間が読める形式のメッセージを HTTP フレームに分割して、最適化やパフォーマンスの向上を実現します。 -ウェブ開発者やウェブ管理者がこれらテキスト形式の HTTP メッセージを作成することはめったにありません。ウェブブラウザー、プロキシ、ウェブサーバーといったソフトウェアが行います。それらは HTTP メッセージを設定ファイル (プロキシやサーバー)、API (ブラウザー)、あるいは他のインターフェイスによって提供します。 +ウェブ開発者やウェブ管理者がこれらテキスト形式の HTTP メッセージを作成することはめったにありません。ウェブブラウザー、プロキシー、ウェブサーバーといったソフトウェアが行います。それらは HTTP メッセージを設定ファイル（プロキシーやサーバー）、API （ブラウザー）、あるいは他のインターフェイスによって提供します。 -![From a user-, script-, or server- generated event, an HTTP/1.x msg is generated, and if HTTP/2 is in use, it is binary framed into an HTTP/2 stream, then sent.](httpmsg2.png) +![ユーザーやスクリプトやサーバーが生成したイベントから、 HTTP/1.x メッセージが生成され、 HTTP/2 を使用している場合は、 HTTP/2 ストリームにバイナリーフレーム化され、送信されます。](httpmsg2.png) -HTTP/2 のバイナリフレーム化方式は、適用される API や設定ファイルの変更を必要としないように設計されています。これはユーザーに対して透過的です。 +HTTP/2 のバイナリーフレーム化方式は、適用される API や設定ファイルの変更を必要としないように設計されています。これはユーザーに対して透過的です。 HTTP のリクエストやレスポンスは似た構造を共用しており、以下の要素で構成されます。 1. 実行するリクエスト、または成功か失敗かの状態を表す*開始行*。開始行は常に 1 行です。 -2. リクエストの詳細を示す、またはメッセージに含まれる本文を説明する、省略可能な *HTTP ヘッダー*一式。 +2. リクエストの詳細を示す、またはメッセージに含まれる本体を説明する、省略可能な *HTTP ヘッダー*一式。 3. リクエストのメタ情報がすべて送信されたことを示す空行。 -4. リクエストに関連付けられたデータ (HTML フォームの内容など)、あるいはレスポンスに関連付けられたドキュメントを含む、省略可能な*本文*。本文が存在することやそのサイズは、開始行や HTTP ヘッダーで指定します。 +4. リクエストに関連付けられたデータ (HTML フォームの内容など)、あるいはレスポンスに関連付けられたドキュメントを含む、省略可能な*本体*。本体が存在することやそのサイズは、開始行や HTTP ヘッダーで指定します。 -HTTP メッセージの開始行と HTTP ヘッダーは、まとめてリクエストの*ヘッド*として知られています。一方、ペイロードは*本文*として知られています。 +HTTP メッセージの開始行と HTTP ヘッダーは、まとめてリクエストの*ヘッド*として知られています。一方、ペイロードは*本体*として知られています。 -![Requests and responses share a common structure in HTTP](httpmsgstructure2.png) +![リクエストとレスポンスは HTTP で共通の構造を持っています。](httpmsgstructure2.png) ## HTTP リクエスト @@ -33,15 +35,18 @@ HTTP メッセージの開始行と HTTP ヘッダーは、まとめてリクエ HTTP リクエストは、アクションを始めるためにクラアントからサーバーへ送られます。その*開始行*には、3 つの要素が含まれています。 1. _[HTTP メソッド](/ja/docs/Web/HTTP/Methods)_。実行するアクションを表わす動詞 ({{HTTPMethod("GET")}}、{{HTTPMethod("PUT")}}、{{HTTPMethod("POST")}} など) または名詞 ({{HTTPMethod("HEAD")}}、{{HTTPMethod("OPTIONS")}})。例えば `GET` はリソースを取り込むこと、`POST` はデータをサーバーへ送信すること (リソースを作成または変更する、あるいは返送する一時的なドキュメントを生成する) ことを示します。 -2. _リクエスト対象_。通常は {{glossary("URL")}} ですが、プロトコル、ポート、ドメインの絶対パスは通常、リクエストの状況から明らかにされます。リクエスト対象の形式は、HTTP メソッドにより異なります。以下のような形式があります。 - - - 最後に `'?'` とクエリー文字列がある絶対パス。これは _origin form_ として知られているもっとも一般的な形式であり、`GET`、`POST`、`HEAD`、`OPTIONS` メソッドで使用します。 - `POST / HTTP/1.1 GET /background.png HTTP/1.0 HEAD /test.html?query=alibaba HTTP/1.1 OPTIONS /anypage.html HTTP/1.0` - - _absolute form_ として知られている完全な URL は、主にプロキシへ接続する際に `GET` で使用します。 - `GET http://developer.mozilla.org/en-US/docs/Web/HTTP/Messages HTTP/1.1` - - ドメイン名とポート (省略可能。`':'` を前につける) で構成される、URL の authority の部分は _authority form_ と呼ばれます。これは `CONNECT` で HTTP トンネルを設定するときに限り使用されます。 +2. _リクエスト対象_。通常は {{glossary("URL")}} ですが、プロトコル、ポート番号、ドメインの絶対パスは通常、リクエストの状況から明らかにされます。リクエスト対象の形式は、HTTP メソッドにより異なります。以下のような形式があります。 + + - 最後に `'?'` とクエリー文字列がある絶対パス。これは*オリジン形式*とも呼ばれているもっとも一般的な形式であり、`GET`、`POST`、`HEAD`、`OPTIONS` メソッドで使用します。 + - `POST / HTTP/1.1` + - `GET /background.png HTTP/1.0` + - `HEAD /test.html?query=alibaba HTTP/1.1` + - `OPTIONS /anypage.html HTTP/1.0` + - 完全な URL は*絶対形式*とも呼ばれ、主にプロキシーへ接続する際に `GET` で使用します。 + `GET https://developer.mozilla.org/ja/docs/Web/HTTP/Messages HTTP/1.1` + - ドメイン名とポート（省略可能。`':'` を前につける）で構成される、URL の authority の部分は*認証形式*と呼ばれます。これは `CONNECT` で HTTP トンネルを設定するときに限り使用されます。 `CONNECT developer.mozilla.org:80 HTTP/1.1` - - 単なるアスタリスク (`'*'`) である _asterisk form_ は `OPTIONS` で使用されており、サーバー全体を表します。 + - 単純なアスタリスク (`'*'`) である*アスタリスク形式*は `OPTIONS` で使用され、サーバー全体を表します。 `OPTIONS * HTTP/1.1` 3. _HTTP バージョン_。これはメッセージの残りの部分の構造を定義しており、レスポンスで使用することを想定しているバージョンを示す役割もあります。 @@ -50,22 +55,22 @@ HTTP リクエストは、アクションを始めるためにクラアントか リクエストの [HTTP ヘッダー](/ja/docs/Web/HTTP/Headers) は、HTTP ヘッダーの一定の基本構造に従います。大文字・小文字を区別しない文字列の後にコロン (`':'`) と、ヘッダーに応じた構造の値が続きます。値を含むヘッダー全体は 1 行で構成されており、とても長くなる場合もあります。 -使用できるリクエストヘッダーは多数あります。これらはいくつかのグループに分類されます。 +様々なヘッダーがリクエストに現れることがあります。これらはいくつかのグループに分類されます。 -- *一般ヘッダー*は、 {{HTTPHeader("Via")}} など、メッセージ全体に適用されるものです。 -- *リクエストヘッダー*は、 {{HTTPHeader("User-Agent")}}, {{HTTPHeader("Accept-Type")}}, 指定するとリクエストを変更するもの ({{HTTPHeader("Accept-Language")}} など)、状況を示すもの ({{HTTPHeader("Referer")}} など)、条件を与えるもの ({{HTTPHeader("If-None")}} など) があります。 -- *エンティティヘッダー*は {{HTTPHeader("Content-Length")}} など、リクエストの本文に適用されます。当然ながら、リクエスト内に本文がない場合はこれらのヘッダーが送信されません。 +- {{glossary("General header", "一般ヘッダー")}}は、 {{HTTPHeader("Via")}} など、メッセージ全体に適用されるものです。 +- {{glossary("Request header", "リクエストヘッダー")}}は、 {{HTTPHeader("User-Agent")}}, {{HTTPHeader("Accept")}} などで、指定するとリクエストを変更するもの（{{HTTPHeader("Accept-Language")}} など）、状況を示すもの（{{HTTPHeader("Referer")}} など）、条件を制約するもの（{{HTTPHeader("If-None")}} など）があります。 +- {{glossary("Representation header", "表現ヘッダー")}}は {{HTTPHeader("Content-Type")}} など、メッセージデータの下の形式や適用されているエンコーディングを説明します（メッセージの本体がある場合のみ存在します）。 -![Example of headers in an HTTP request](http_request_headers2.png) +![HTTP リクエストのヘッダーの例](http_request_headers3.png) -### 本文 +### 本体 -リクエストの最後の部分が本文です。本文が存在しないリクエストもあります。リソースを取り込むリクエストである `GET`, `HEAD`, `DELETE`, `OPTIONS` は通常、本文は不要です。サーバー内のデータを更新するためにデータを送信するリクエストもあり、 `POST` リクエストでよくあります (HTML フォームのデータを持つ)。 +リクエストの最後の部分が本体 (body) です。本体が存在しないリクエストもあります。リソースを取り込むリクエストである `GET`, `HEAD`, `DELETE`, `OPTIONS` は通常、本体は不要です。サーバー内のデータを更新するためにデータを送信するリクエストもあり、 `POST` リクエストでよくあります（HTML フォームのデータを持つ）。 -本文は、大きく 2 種類に分類されます。 +本体は、大きく 2 種類に分類されます。 -- 単一リソースの本文。1 個のファイルで構成され、{{HTTPHeader("Content-Type")}} と {{HTTPHeader("Content-Length")}} の 2 つのヘッダーで定義されます。 -- [複数リソースの本文](/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types#multipartform-data)。マルチパートの本文で構成され、それぞれが異なる情報を持ちます。これは主に、 [HTML フォーム](/ja/docs/Web/Guide/HTML/Forms)と関連付けられます。 +- 単一リソースの本体。1 個のファイルで構成され、{{HTTPHeader("Content-Type")}} と {{HTTPHeader("Content-Length")}} の 2 つのヘッダーで定義されます。 +- [複数リソースの本体](/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types#multipartform-data)。マルチパートの本体で構成され、それぞれが異なる情報を持ちます。これは主に、 [HTML フォーム](/ja/docs/Learn/Forms)と関連付けられます。 ## HTTP レスポンス @@ -75,7 +80,7 @@ HTTP レスポンスの開始行は*ステータス行*と呼ばれ、以下の 1. _プロトコルバージョン_。通常 `HTTP/1.1` です。 2. _ステータスコード_。リクエストが成功したか失敗したかを示します。一般的なステータスコードは {{HTTPStatus("200")}}, {{HTTPStatus("404")}}, {{HTTPStatus("302")}} です。 -3. _ステータス文字列_。手短な単なる情報ですが、人間が HTTP メッセージを理解するのを助けるために、ステータスコードをテキストで説明します。 +3. _ステータステキスト_。手短な単なる情報ですが、人間が HTTP メッセージを理解するのを助けるために、ステータスコードをテキストで説明します。 一般的に、ステータス行は `HTTP/1.1 404 Not Found.` のようになります。 @@ -85,35 +90,35 @@ HTTP レスポンスの開始行は*ステータス行*と呼ばれ、以下の 使用できるレスポンスヘッダーは多数あります。これらはいくつかのグループに分類されます。 -- *一般ヘッダー*は {{HTTPHeader("Via")}} など、メッセージ全体に適用されるものです。 -- *レスポンスヘッダー*は {{HTTPHeader("Vary")}} や {{HTTPHeader("Accept-Ranges")}} など、ステータス行で伝えられないサーバーの追加情報を与えます。 -- *エンティティヘッダー*は {{HTTPHeader("Content-Length")}} など、レスポンスの本文に適用されます。通常、レスポンス内に本文がない場合はこのようなヘッダーは送信されません。 +- {{glossary("General header", "一般ヘッダー")}}は {{HTTPHeader("Via")}} など、メッセージ全体に適用されるものです。 +- {{glossary("Response header", "レスポンスヘッダー")}}は {{HTTPHeader("Vary")}} や {{HTTPHeader("Accept-Ranges")}} など、ステータス行で伝えられないサーバーの追加情報を与えます。 +- {{glossary("Representation header", "表現ヘッダー")}}は {{HTTPHeader("Content-Type")}} など、レスポンスの本体に適用されます。通常、レスポンス内に本体がない場合はこのようなヘッダーは送信されません。 -![Example of headers in an HTTP response](http_response_headers2.png) +![HTTP レスポンスヘッダーの例](http_response_headers2.png) -### 本文 +### 本体 -レスポンスの最後の部分が本文です。本文を持たないレスポンスもあります。 {{HTTPStatus("201")}} **`Created`** や {{HTTPStatus("204")}} **`No Content`** といったステータスコードのレスポンスは通常、本文がありません。 +レスポンスの最後の部分が本体です。本体を持たないレスポンスもあります。 {{HTTPStatus("201")}} **`Created`** や {{HTTPStatus("204")}} **`No Content`** といったステータスコードのレスポンスは通常、本体がありません。 -本文は、大きく 3 種類に分類されます。 +本体は、大きく 3 種類に分類されます。 -- 大きさが判明している 1 個のファイルで構成される、単一リソースの本文。 {{HTTPHeader("Content-Type")}} と {{HTTPHeader("Content-Length")}} の 2 つのヘッダーで定義されます。 -- 大きさが不明な 1 個のファイルで構成される、単一リソースの本文。 {{HTTPHeader("Transfer-Encoding")}} を `chunked` に設定して、 chunked 形式でエンコードされます。 -- [複数リソースの本文](/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types#multipartform-data)。マルチパートの本文で構成され、それぞれが異なる情報のセクションを持ちます。これは比較的まれです。 +- 大きさが判明している 1 個のファイルで構成される、単一リソースの本体。 {{HTTPHeader("Content-Type")}} と {{HTTPHeader("Content-Length")}} の 2 つのヘッダーで定義されます。 +- 大きさが不明な 1 個のファイルで構成される、単一リソースの本体。 {{HTTPHeader("Transfer-Encoding")}} を `chunked` に設定して、 chunked 形式でエンコードされます。 +- [複数リソースの本体](/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types#multipartform-data)。マルチパートの本体で構成され、それぞれが異なる情報のセクションを持ちます。これは比較的まれです。 ## HTTP/2 フレーム HTTP/1.x のメッセージには、パフォーマンスの欠点があります。 -- ヘッダーは本文と異なり、圧縮されません。 +- ヘッダーは本体と異なり、圧縮されません。 - あるメッセージと次のメッセージでヘッダーが酷似していることがよくありますが、それでも複数のコネクションにわたって繰り返されます。 - 多重化することができません。同じサーバーに対して複数のコネクションを開かなければなりません。また、ウォーム状態の TCP コネクションはコールド状態のコネクションより効率的です。 HTTP/2 は次の段階に進みました。 HTTP/1.x のメッセージを、ストリーム内に埋め込まれるフレームに分割します。データのフレームとヘッダーのフレームは区別され、ヘッダーの圧縮が可能になります。*多重化*と呼ばれる処理によって複数のストリームがまとめられ、下層の TCP コネクションの効率を向上させることができます。 -![HTTP/2 modify the HTTP message to divide them in frames (part of a single stream), allowing for more optimization.](binary_framing2.png) +![HTTP/2 は HTTP メッセージをフレーム（単一のストリームの一部）に分割するように変更し、より最適化できるようにします。](binary_framing2.png) -HTTP フレームは、ウェブ開発者によって透過的になります。これは HTTP/2 において、 HTTP/1.1 メッセージと基盤となるトランスポート層との間のさらなるステップです。 HTTP フレームを利用するためにウェブ開発者が使用する API を変更する必要はありません。ブラウザーとサーバーの両方で利用可能になれば、 HTTP/2 が有効になり使用されます。 +HTTP フレームは、ウェブ開発者に対しては透過的になります。これは HTTP/2 において、 HTTP/1.1 メッセージと基盤となるトランスポート層との間のさらなるステップです。 HTTP フレームを利用するためにウェブ開発者が使用する API を変更する必要はありません。ブラウザーとサーバーの両方で利用可能になれば、 HTTP/2 が有効になり使用されます。 ## まとめ diff --git a/files/ja/web/http/overview/index.md b/files/ja/web/http/overview/index.md index dbaef08e397dcd..95f2c2f88acb6a 100644 --- a/files/ja/web/http/overview/index.md +++ b/files/ja/web/http/overview/index.md @@ -2,7 +2,7 @@ title: HTTP の概要 slug: Web/HTTP/Overview l10n: - sourceCommit: eada29e0774d505becb3a725001d372f0dbdc73d + sourceCommit: a75c144eaba00c38623b2ab9532319b1da40825f --- {{HTTPSidebar}} @@ -56,7 +56,7 @@ HTTP はアプリケーション層の最上位に存在します。 ### ウェブサーバー 通信路の反対側は、クライアントのリクエストに応じて文書を*提供する*サーバーがいます。 -サーバーは、仮想的には 1 台だけのマシンとして見えます。しかし、実際は負荷を共有する（負荷分散の）ための複数のサーバーの集合体である場合もありますし、他のコンピューター（キャッシュ、データベースサーバー、電子商取引サーバーなど）に問い合わせを行う複雑なひとまとまりのソフトウェアを分け合って、リクエストに応じて全面的または部分的に文書を生成していることもあります。 +サーバーは、仮想的には 1 台だけのマシンとしてしか見えませんが、実際には負荷を分担する（ロードバランシング）サーバーの集合であったり、他にも（キャッシュ、データベースサーバー、電子商取引サーバーなど）、要求に応じて文書を全体的または部分的に生成するソフトウェアであったりします。 サーバーは 1 台のマシンである必要性はありませんが、複数のサーバーのソフトウェアインスタンスを同じマシンで運用することができます。 HTTP/1.1 と {{HTTPHeader("Host")}} ヘッダーによって、同じ IP アドレスを共有できます。 @@ -118,24 +118,24 @@ HTTP の拡張性により時間をかけて、ウェブの制御性や機能性 HTTP で制御できる一般的な機能は以下のとおりです。 -- _[キャッシュ](/ja/docs/Web/HTTP/Caching)_ +- _[キャッシュ](/ja/docs/Web/HTTP/Caching)_: 文書をどのようにキャッシュするかを、 HTTP で制御できます。 サーバーはプロキシーやクライアントに対して、何をどれだけの間キャッシュするかを指示できます。 クライアントは中間のキャッシュプロキシーに対して、保存されている文書を無視するよう指示できます。 -- _オリジン制約の緩和_ +- _オリジン制約の緩和_: のぞき見や他のプライバシー侵害を避けるため、ウェブブラウザーはウェブサイト間を厳密に分割するよう強制しています。 **同一オリジン**のページだけが、ウェブページの情報すべてにアクセスできます。 この制約はサーバーにとって負担になりますが、 HTTP ヘッダーでサーバー側の厳密な分割を緩和できます。これにより、さまざまなドメインを情報源とした情報の寄せ集めの文書を作成できます。ただし、このようにするセキュリティ上の理由があります。 -- _認証_ +- _認証_: 特定のユーザーしかアクセスできないように保護されたページがあるでしょう。 基本的な認証は HTTP が提供しており、 {{HTTPHeader("WWW-Authenticate")}} などのヘッダーを使用するか、 [HTTP Cookie](/ja/docs/Web/HTTP/Cookies) を使用した特別なセッションを設定するかします。 -- _[プロキシーとトネリング](/ja/docs/Web/HTTP/Proxy_servers_and_tunneling)_ +- _[プロキシーとトンネリング](/ja/docs/Web/HTTP/Proxy_servers_and_tunneling)_: サーバーやクライアントがイントラネット内に配置されて、他のコンピューターから本当の IP アドレスが見えなくなっていることがよくあります。 このネットワーク境界を渡るため、 HTTP リクエストはプロキシーを通過します。 すべてのプロキシーが HTTP プロキシーであるとは限りません。 たとえば、 SOCKS プロトコルはより低い層で動作します。 ほかにも FTP などがそれらのプロキシーで処理されることがあります。 -- _セッション_ +- _セッション_: HTTP Cookie を使用して、リクエストとサーバーのセッションを関連付けできます。 これにより HTTP がステートレスプロトコルであるにもかかわらず、セッションを作成できます。 これは電子商取引のショッピングバスケットだけでなく、出力内容にユーザー設定を適用できるサイトでも有用です。 @@ -196,7 +196,7 @@ HTTP リクエストの例です。 - HTTP [メソッド](/ja/docs/Web/HTTP/Methods)。通常、クライアントが実行したい操作を定義する {{HTTPMethod("GET")}} や {{HTTPMethod("POST")}} のような動詞か、{{HTTPMethod("OPTIONS")}} や {{HTTPMethod("HEAD")}} のような名詞です。 一般的にクライアントはリソースを取り込む（`GET` を使用）か [HTML フォーム](/ja/docs/Learn/Forms) の値を送信する（`POST` を使用）ことを望みますが、場合によってはほかの操作が必要になります。 -- 取り込むリソースのパス。状況から明らかであればリソースの URL はこの要素から取り除かれます。たとえば{{Glossary("protocol","プロトコル")}}（`http://`）、{{Glossary("domain","ドメイン")}}（ここでは `developer.mozilla.org`）、TCP {{Glossary("port","ポート")}}（ここでは `80`）が取り除かれます。 +- 取り込むリソースのパス。状況から明らかであればリソースの URL はこの要素から取り除かれます。たとえば{{Glossary("protocol","プロトコル")}} (`http://`)、{{Glossary("domain","ドメイン")}}（ここでは `developer.mozilla.org`）、TCP {{Glossary("port","ポート")}}（ここでは `80`）が取り除かれます。 - HTTP プロトコルのバージョン。 - サーバーに追加の情報を与える任意の[ヘッダー](/ja/docs/Web/HTTP/Headers)。 - `POST` のようなメソッドではレスポンスと同様に、送信するリソースを包含した本体があります。 diff --git a/files/ja/web/http/redirections/index.md b/files/ja/web/http/redirections/index.md index 40ff9f4e94cbfe..049bca1c87cbb7 100644 --- a/files/ja/web/http/redirections/index.md +++ b/files/ja/web/http/redirections/index.md @@ -1,11 +1,13 @@ --- title: HTTP のリダイレクト slug: Web/HTTP/Redirections +l10n: + sourceCommit: 0880a90f3811475d78bc4b2c344eb4146f25f66c --- {{HTTPSidebar}} -*URL リダイレクト*は、 *URL 転送*とも呼ばれ、ページ、フォーム、ウェブアプリケーション全体などに二つ以上の URL のアドレスを与える技術です。 HTTP ではこの操作のために、特別な種類のレスポンスである **_HTTP リダイレクト_**を提供しています。 +**URL リダイレクト**は、 *URL 転送*とも呼ばれ、ページ、フォーム、ウェブサイト全体、ウェブアプリケーションなどに 2 つ以上の URL のアドレスを与える技術です。 HTTP ではこの操作のために、特別な種類のレスポンスである **_HTTP リダイレクト_**を提供しています。 リダイレクトには多くの目的があります。 @@ -18,13 +20,13 @@ HTTP では、リダイレクトはリクエストに対して、サーバーが ブラウザーがリダイレクトを受け取ると、 `Location` ヘッダーで提供された新たな URL を使用して直ちに読み込みを行います。追加の往復によるパフォーマンスの低下の他に、ユーザーがリダイレクトに気づくことはほとんどありません。 -![](httpredirect.png) +![最初のリクエストはクライアントからサーバーに送られます。サーバーはリダイレクト先のURLとともに 301:moved permanently で応答します。クライアントは新しい URL への GET リクエストを行い、サーバーは 200 OK レスポンスでこれを返します。](httpredirect.png) -リダイレクトには何種類かがありますが、3 つのカテゴリに分類することができます。 +リダイレクトには何種類かがありますが、3 つのカテゴリーに分類することができます。 -1. [恒久的リダイレクト](#Permanent_redirections) -2. [一時的リダイレクト](#Temporary_redirections) -3. [特殊リダイレクト](#Special_redirections) +1. [恒久的リダイレクト](#恒久的リダイレクト) +2. [一時的リダイレクト](#一時的リダイレクト) +3. [特殊リダイレクト](#特殊リダイレクト) ### 恒久的リダイレクト @@ -32,7 +34,7 @@ HTTP では、リダイレクトはリクエストに対して、サーバーが | コード | テキスト | メソッドの扱い | 主な使用例 | | ------ | -------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -| `301` | `Moved Permanently` | {{HTTPMethod("GET")}} メソッドは変更しません。 他のメソッドは {{HTTPMethod("GET")}} に変更されるかもしれません。[\[1\]](#attr1) | ウェブサイトの再編。 | +| `301` | `Moved Permanently` | {{HTTPMethod("GET")}} メソッドは変更しません。 他のメソッドは {{HTTPMethod("GET")}} に変更されるかもしれません。[1] | ウェブサイトの再編。 | | `308` | `Permanent Redirect` | メソッドや本文は変更しません。 | GET 以外のリンクや操作を含むウェブサイトの再編。 | \[1] 仕様書ではメソッドの変更を意図していませんが、メソッドを変更するユーザーエージェントが存在します。 {{HTTPStatus("308")}} が定義されたのは、 `GET` 以外のメソッドを使用するときの動作のあいまいさをなくすためです。 @@ -45,7 +47,7 @@ HTTP では、リダイレクトはリクエストに対して、サーバーが | コード | テキスト | メソッドの扱い | 主な使用例 | | ------ | -------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `302` | `Found` | {{HTTPMethod("GET")}} メソッドは変更しません。 他のメソッドは {{HTTPMethod("GET")}} に変更されるかもしれません。[\[2\]](#attr2) | ウェブページは不測の理由により、一時的に利用できない状態です。 | +| `302` | `Found` | {{HTTPMethod("GET")}} メソッドは変更しません。 他のメソッドは {{HTTPMethod("GET")}} に変更されるかもしれません。[2] | ウェブページは不測の理由により、一時的に利用できない状態です。 | | `303` | `See Other` | {{HTTPMethod("GET")}} メソッドは変更しません。 他のメソッドは `GET` に*変更します* (本文は失われます)。 | ページの再読み込みによって操作が再度実施されることを防ぐために、{{HTTPMethod("PUT")}} や {{HTTPMethod("POST")}} の後のリダイレクトで使用します。 | | `307` | `Temporary Redirect` | メソッドと本文は変更しません。 | ウェブページは不測の理由により、一時的に使用できない状態です。検索エンジンは自身のリンクを更新しません。 `302` と比較して、サイトで `GET` 以外の操作を使用できる場合に推奨されます。 | @@ -53,7 +55,7 @@ HTTP では、リダイレクトはリクエストに対して、サーバーが ### 特殊リダイレクト -{{HTTPStatus("304")}} (Not Modified) は、ページをローカルにキャッシュした (陳腐化した) 複製へリダイレクトします。また {{HTTPStatus("300")}} (Multiple Choice) は、手動リダイレクトです。ブラウザーがウェブページとして表示する本文には使用可能なリダイレクトのリストがあり、ユーザーはひとつ選択してクリックします。 +{{HTTPStatus("304")}} (Not Modified) は、ページをローカルにキャッシュした（陳腐化した）複製へリダイレクトします。また {{HTTPStatus("300")}} (Multiple Choice) は、手動リダイレクトです。ブラウザーがウェブページとして表示する本文には使用可能なリダイレクトのリストがあり、ユーザーはひとつ選択してクリックします。 | コード | テキスト | 主な使用例 | | ------ | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | @@ -62,14 +64,14 @@ HTTP では、リダイレクトはリクエストに対して、サーバーが ## リダイレクトを指定する代替手段 -HTTP リダイレクトは、リダイレクトを定義する唯一の手段ではありません。他にも二つの方法があります。 +HTTP リダイレクトは、リダイレクトを定義する唯一の手段ではありません。他にも 2 つの方法があります。 1. {{HTMLElement("meta")}} 要素を使用する HTML リダイレクト 2. [DOM](/ja/docs/Web/API/Document_Object_Model) による JavaScript リダイレクト ### HTML リダイレクト -HTTP リダイレクトはリダイレクトを作成するための最良の方法ですが、サーバーの制御権を持っていない場合もあります。このような場合は、そのページの {{HTMLElement("head")}} 内に [`http-equiv`](/ja/docs/Web/HTML/Element/meta#http-equiv) 属性に `Refresh` を設定した {{HTMLElement("meta")}} 要素を記述してみてください。ページを表示すると、ブラウザーは示されたページへ移動します。 +HTTP リダイレクトはリダイレクトを作成するための最良の方法ですが、サーバーの制御権を持っていない場合もあります。このような場合は、そのページの {{HTMLElement("head")}} 内に {{HTMLElement("meta")}} 要素を記述し、その [`http-equiv`](/ja/docs/Web/HTML/Element/meta#http-equiv) 属性に `Refresh` を設定してみてください。ページを表示すると、ブラウザーは示されたページへ移動します。 ```html <head> @@ -113,7 +115,7 @@ HTML リダイレクトと同様にすべてのリソースでは動作できず - : よくある事例は、サイトが `www.example.com` ドメイン配下に存在しているとき、`example.com` からもアクセスできるようにしたい場合です。この場合は、`example.com` から `www.example.com` へのリダイレクトを設定します。また、一般的に使用される同義語や、ドメイン名の打ち間違いで頻度が多いものを提供してもよいでしょう。 - 別のドメインに移動するため - : 例えば、会社名が変わっても、既存のリンクやブックマークからも新しい会社名を見つけられるようにしたいでしょう。 -- [HTTPS](/ja/docs/Glossary/https) を強制するため +- [HTTPS](/ja/docs/Glossary/HTTPS) を強制するため - : `http://` 版のサイトへのリクエストを `https://` 版のサイトにリダイレクトします。 ### リンクの存続 @@ -122,7 +124,7 @@ HTML リダイレクトと同様にすべてのリソースでは動作できず 外部のリンクは貴重なユーザーを連れてきてくれるし、 SEO にも役立つため、リンクを壊したくはありません。よって、古い URL から新しい URL へのリダイレクトを設定します。 -> **メモ:** この手法は内部のリンクにも有効ですが、内部のリダイレクトは避けるようにしてください。リダイレクトは (追加の HTTP リクエストを行うため) 性能の負担がかなりあります。内部のリンクを修正することでこれを避けられるのであれば、リンクを修正してください。 +> **メモ:** この手法は内部のリンクにも有効ですが、内部のリダイレクトは避けるようにしてください。リダイレクトは（追加の HTTP リクエストを行うため）性能の負担がかなりあります。内部のリンクを修正することでこれを避けられるのであれば、リンクを修正してください。 ### 安全でないリクエストへの一時的なレスポンス @@ -134,7 +136,7 @@ HTML リダイレクトと同様にすべてのリソースでは動作できず ### 長いリクエストに対する一時的なレスポンス -{{HTTPHeader("DELETE")}} リクエストを後で処理するように予定するなど、リクエストによってはサーバー側で長い時間が必要になる場合があります。この場合、レスポンスを {{HTTPStatus("303")}} (See Other) として操作が実行予定に追加されたことを示すページにリンクし、最終的に進捗を確認したり、キャンセルできるようにしたりするようにします。 +{{HTTPMethod("DELETE")}} リクエストを後で処理するように予定するなど、リクエストによってはサーバー側で長い時間が必要になる場合があります。この場合、レスポンスを {{HTTPStatus("303")}} (See Other) として操作が実行予定に追加されたことを示すページにリンクし、最終的に進捗を確認したり、キャンセルできるようにしたりするようにします。 ## 一般的なサーバーにおけるリダイレクトの設定 @@ -142,9 +144,9 @@ HTML リダイレクトと同様にすべてのリソースでは動作できず リダイレクトはサーバーの設定ファイルか、各ディレクトリの `.htaccess` で設定できます。 -[`mod_alias`](https://httpd.apache.org/docs/current/mod/mod_alias.html) モジュールに、 (既定で) {{HTTPStatus("302")}} レスポンスを設定するための `Redirect` および `RedirectMatch` ディレクティブがあります。 +[`mod_alias`](https://httpd.apache.org/docs/current/mod/mod_alias.html) モジュールには `Redirect` および `RedirectMatch` ディレクティブがあり、これらは既定で {{HTTPStatus("302")}} レスポンスを設定します。 -``` +```xml <VirtualHost *:443> ServerName example.com Redirect / https://www.example.com @@ -155,7 +157,7 @@ URL `https://example.com/` は `https://www.example.com/` にリダイレクト `RedirectMatch` も同じですが、対象の URL の集合を定義するために{{glossary("regular expression", "正規表現")}}を使用します。 -``` +```plain RedirectMatch ^/images/(.*)$ https://images.example.com/$1 ``` @@ -163,19 +165,19 @@ RedirectMatch ^/images/(.*)$ https://images.example.com/$1 一時的なリダイレクトを設定したくない場合は、別の種類のリダイレクトを設定するために追加引数 (使用する HTTP ステータスコードまたは `permanent` キーワード) を使用できます。 -``` +```plain Redirect permanent / https://www.example.com # …acts the same as: Redirect 301 / https://www.example.com ``` -[`mod_rewrite`](http://httpd.apache.org/docs/current/mod/mod_rewrite.html) モジュールでリダイレクトを作成することもできます。こちらはさらに柔軟性がありますが、若干複雑です。 +[`mod_rewrite`](https://httpd.apache.org/docs/current/mod/mod_rewrite.html) モジュールでリダイレクトを作成することもできます。こちらはさらに柔軟性がありますが、若干複雑です。 ### Nginx Nginx では、リダイレクトしたいコンテンツ用の server ブロックを作成します。 -``` +```plain server { listen 80; server_name example.com; @@ -185,14 +187,14 @@ server { ディレクトリまたは特定のページにのみリダイレクトを適用するには、`rewrite` ディレクティブを使用します。 -``` +```plain rewrite ^/images/(.*)$ https://images.example.com/$1 redirect; rewrite ^/images/(.*)$ https://images.example.com/$1 permanent; ``` ### IIS -IIS では、[`<httpRedirect>`](https://www.iis.net/configreference/system.webserver/httpredirect) 要素を使用してリダイレクトを設定します。 +IIS では、[`<httpRedirect>`](https://docs.microsoft.com/iis/configuration/system.webServer/httpRedirect/) 要素を使用してリダイレクトを設定します。 ## リダイレクトループ @@ -202,7 +204,7 @@ IIS では、[`<httpRedirect>`](https://www.iis.net/configreference/system.webse 時々、サーバーがリダイレクトループを検出しないことがあります。それぞれのサーバーでは全貌を把握できない、複数のサーバーにわたるリダイレクトループがあり得ます。この場合はブラウザーがループを検出して、エラーメッセージを表示するでしょう。Firefox では以下のメッセージを表示します。 -> このアドレスへのリクエストに対するサーバーの自動転送設定がループしています。 +> Firefox は、サーバーがこのアドレスへのリクエストを決して終了しない方法でリダイレクトしていることを検出しました。 Chrome では以下のように表示されます。 @@ -210,4 +212,4 @@ Chrome では以下のように表示されます。 どちらの場合も、ユーザーができることはほとんどありません (キャッシュや Cookie の不一致など、ユーザー側で問題が発生している場合を除きます)。 -リダイレクトループはユーザー体験を完全に損ないますので、避けることが重要です。 +リダイレクトループは使い勝手をを完全に損ないますので、避けることが重要です。 diff --git a/files/ja/web/http/status/102/index.md b/files/ja/web/http/status/102/index.md new file mode 100644 index 00000000000000..72f2e72d600987 --- /dev/null +++ b/files/ja/web/http/status/102/index.md @@ -0,0 +1,29 @@ +--- +title: 102 Processing +slug: Web/HTTP/Status/102 +l10n: + sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8 +--- + +{{HTTPSidebar}}{{deprecated_header}} + +HTTP **`102 Processing`** 情報ステータスレスポンスコードは、リクエスト全体が受信され、サーバーがそれを処理中であることをクライアントに示します。 + +このステータスコードは、リクエストの処理に長時間かかるとサーバーが判断した場合のみ送信されます。これは、クライアントにリクエストがまだ死んでいないことを伝えます。 + +> **メモ:** このステータスコードは非推奨になっており、もう送られるべきではありません。クライアントはまだ受け入れる可能性がありますが、単純に無視します。 + +## ステータス + +```plain +102 Processing +``` + +## 仕様書 + +{{Specifications}} + +## 関連情報 + +- {{HTTPHeader("Expect")}} +- {{HTTPStatus("100")}} diff --git a/files/ja/web/http/status/421/index.md b/files/ja/web/http/status/421/index.md new file mode 100644 index 00000000000000..3e523ed0b43f27 --- /dev/null +++ b/files/ja/web/http/status/421/index.md @@ -0,0 +1,20 @@ +--- +title: 421 Misdirected Request +slug: Web/HTTP/Status/421 +l10n: + sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8 +--- + +{{HTTPSidebar}} + +HTTP **`421 Misdirected Request`** クライエントエラーレスポンスコードは、リクエストがレスポンスを生成できないサーバーに送られたことを示します。これは、接続が再利用されたり、代替サービスが選択されたとき起こり得ます。 + +## ステータス + +```plain +421 Misdirected Request +``` + +## 仕様書 + +{{Specifications}} diff --git a/files/ja/web/http/status/423/index.md b/files/ja/web/http/status/423/index.md new file mode 100644 index 00000000000000..2479956ac505cf --- /dev/null +++ b/files/ja/web/http/status/423/index.md @@ -0,0 +1,37 @@ +--- +title: 423 Locked +slug: Web/HTTP/Status/423 +l10n: + sourceCommit: bb25f8e4cb5819b439e370010b4f0c7bcc0fda8e +--- + +{{HTTPSidebar}} + +> **メモ:** リソースを _ロック_ する機能は、{{Glossary("WebDAV")}} サーバーの一部に固有のものです。ウェブページにアクセスしているブラウザーがこのステータスコードを受け取ることは無いはずです。これを受け取る間違った状況では、ブラウザーはこれを一般の `400` ステータスコードとして扱うでしょう。 + +HTTP **`423 Locked`** エラーレスポンスコードは、対象のリソースが _ロックされている_、すなわちアクセスできないことを示します。コンテンツは、WebDAV の XML 形式で情報を含むべきです。 + +## ステータス + +```plain +423 Locked +``` + +### 例 + +```http +HTTP/1.1 423 Locked +Content-Type: application/xml; charset="utf-8" +Content-Length: xxxx + +<?xml version="1.0" encoding="utf-8" ?> +<D:error xmlns:D="DAV:"> + <D:lock-token-submitted> + <D:href>/workspace/webdav/</D:href> + </D:lock-token-submitted> +</D:error> +``` + +## 仕様書 + +{{Specifications}} diff --git a/files/ja/web/http/status/424/index.md b/files/ja/web/http/status/424/index.md new file mode 100644 index 00000000000000..66da1d3d7abfaf --- /dev/null +++ b/files/ja/web/http/status/424/index.md @@ -0,0 +1,26 @@ +--- +title: 424 Failed Dependency +slug: Web/HTTP/Status/424 +l10n: + sourceCommit: 0880a90f3811475d78bc4b2c344eb4146f25f66c +--- + +{{HTTPSidebar}} + +HTTP **`424 Failed Dependency`** クライエントエラーレスポンスコードは、要求されたアクションが他のアクションに依存しており、そのアクションが失敗したため、対象のリソースに対してメソッドを実行できなかったことを示します。 + +普通のウェブサーバーがこのステータスコードを返すことは通常ありません。しかし、{{Glossary("WebDAV")}} などの他のプロトコルが返すことはあります。たとえば、{{Glossary("WebDAV")}} では、`PROPPATCH` 要求が発行され、あるコマンドが失敗した場合は、他のコマンドも自動的に `424 Failed Dependency` で失敗します。 + +## ステータス + +```plain +424 Failed Dependency +``` + +## 仕様書 + +{{Specifications}} + +## 関連情報 + +- {{HTTPStatus("403")}} (Forbidden) diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt index 82e27072c97d51..d747b7924a2a93 100644 --- a/files/ko/_redirects.txt +++ b/files/ko/_redirects.txt @@ -514,6 +514,7 @@ /ko/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute /ko/docs/Web/Accessibility/ARIA/Attributes/aria-label /ko/docs/Web/Accessibility/ARIA/forms /ko/docs/Web/Accessibility/ARIA /ko/docs/Web/CSS/@viewport /ko/docs/Web/CSS +/ko/docs/Web/CSS/Adjacent_sibling_combinator /ko/docs/Web/CSS/Next-sibling_combinator /ko/docs/Web/CSS/All_About_The_Containing_Block /ko/docs/Web/CSS/Containing_block /ko/docs/Web/CSS/CSS_Background_and_Borders /ko/docs/Web/CSS/CSS_backgrounds_and_borders /ko/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator /ko/docs/Web/CSS/CSS_backgrounds_and_borders/Border-image_generator @@ -562,6 +563,7 @@ /ko/docs/Web/CSS/CSS_단위와_값 /ko/docs/Web/CSS/CSS_Values_and_Units /ko/docs/Web/CSS/Compositing_and_Blending /ko/docs/Web/CSS/CSS_compositing_and_blending /ko/docs/Web/CSS/Filter_Effects /ko/docs/Web/CSS/CSS_filter_effects +/ko/docs/Web/CSS/General_sibling_combinator /ko/docs/Web/CSS/Subsequent-sibling_combinator /ko/docs/Web/CSS/Getting_Started /en-US/docs/Learn/CSS/First_steps /ko/docs/Web/CSS/Getting_Started/Color /en-US/docs/Learn/CSS/Building_blocks/Values_and_units /ko/docs/Web/CSS/Getting_Started/Content /ko/docs/Learn/CSS/Howto/Generated_content @@ -604,7 +606,7 @@ /ko/docs/Web/CSS/시작하기/색상 /en-US/docs/Learn/CSS/Building_blocks/Values_and_units /ko/docs/Web/CSS/시작하기/설렉터 /en-US/docs/Learn/CSS/Building_blocks/Selectors /ko/docs/Web/CSS/시작하기/왜_CSS를_사용하나 /en-US/docs/Learn/CSS/First_steps/How_CSS_works -/ko/docs/Web/CSS/인접_형제_선택자 /ko/docs/Web/CSS/Adjacent_sibling_combinator +/ko/docs/Web/CSS/인접_형제_선택자 /ko/docs/Web/CSS/Next-sibling_combinator /ko/docs/Web/Events/DOMContentLoaded /ko/docs/Web/API/Document/DOMContentLoaded_event /ko/docs/Web/Events/abort /ko/docs/Web/API/HTMLMediaElement/abort_event /ko/docs/Web/Events/blur /ko/docs/Web/API/Element/blur_event diff --git a/files/ko/_wikihistory.json b/files/ko/_wikihistory.json index 85b30e938c3aab..f47c615e8b4abb 100644 --- a/files/ko/_wikihistory.json +++ b/files/ko/_wikihistory.json @@ -4861,10 +4861,6 @@ "modified": "2020-10-15T21:39:41.961Z", "contributors": ["alattalatta", "fscholz", "epicsaga"] }, - "Web/CSS/Adjacent_sibling_combinator": { - "modified": "2020-10-15T21:53:17.801Z", - "contributors": ["alattalatta", "neatnet"] - }, "Web/CSS/Alternative_style_sheets": { "modified": "2019-03-23T23:52:49.065Z", "contributors": ["teoli", "Suguni"] @@ -5247,10 +5243,6 @@ "modified": "2020-10-15T22:25:55.745Z", "contributors": ["alattalatta"] }, - "Web/CSS/General_sibling_combinator": { - "modified": "2020-10-15T22:25:59.669Z", - "contributors": ["alattalatta"] - }, "Web/CSS/ID_selectors": { "modified": "2020-10-15T22:16:17.946Z", "contributors": ["alattalatta"] @@ -5263,6 +5255,10 @@ "modified": "2020-08-05T01:05:50.434Z", "contributors": ["alattalatta", "Netaras"] }, + "Web/CSS/Next-sibling_combinator": { + "modified": "2020-10-15T21:53:17.801Z", + "contributors": ["alattalatta", "neatnet"] + }, "Web/CSS/Pseudo-classes": { "modified": "2020-08-13T04:55:02.947Z", "contributors": ["alattalatta", "Netaras"] @@ -5307,6 +5303,10 @@ "modified": "2020-03-13T15:56:02.613Z", "contributors": ["EatChangmyeong", "alattalatta", "Netaras"] }, + "Web/CSS/Subsequent-sibling_combinator": { + "modified": "2020-10-15T22:25:59.669Z", + "contributors": ["alattalatta"] + }, "Web/CSS/Syntax": { "modified": "2020-08-04T07:19:16.823Z", "contributors": ["alattalatta", "young-gratia", "Netaras"] diff --git a/files/ko/glossary/adobe_flash/index.md b/files/ko/glossary/adobe_flash/index.md new file mode 100644 index 00000000000000..89db287560cc7e --- /dev/null +++ b/files/ko/glossary/adobe_flash/index.md @@ -0,0 +1,19 @@ +--- +title: Adobe Flash +slug: Glossary/Adobe_Flash +l10n: + sourceCommit: 0c163056cfe83fba519b757f15d2e20f83eddaff +--- + +{{GlossarySidebar}} + +[Flash](https://en.wikipedia.org/wiki/Adobe_Flash)는 표현력이 풍부한 웹 애플리케이션, 멀티미디어 콘텐츠, 스트리밍 미디어를 보기 위해 Adobe에서 개발한 오래된 기술입니다. + +2021년부터, Flash는 더 이상 Adobe 또는 주요 웹 브라우저에서 지원되지 않습니다. + +## 같이 보기 + +- [Adobe Flash 수명 종료 발표](https://blog.adobe.com/en/publish/2017/07/25/adobe-flash-update#gs.g8mmgf) +- [Chrome의 Flash에 작별 인사하기](https://www.blog.google/products/chrome/saying-goodbye-flash-chrome/) +- [Flash 수명 종료에 대한 Firefox 로드맵](https://blog.mozilla.org/futurereleases/2017/07/25/firefox-roadmap-flash-end-life/) +- [Microsoft Windows Flash Player 제거](https://blogs.windows.com/msedgedev/2020/09/04/update-adobe-flash-end-support/) diff --git a/files/ko/glossary/alpha/index.md b/files/ko/glossary/alpha/index.md index 01e880930bdae4..72bb069acf0df5 100644 --- a/files/ko/glossary/alpha/index.md +++ b/files/ko/glossary/alpha/index.md @@ -19,7 +19,7 @@ l10n: - [CSS 색상](/ko/docs/Web/CSS/CSS_colors) - [CSS 값과 단위 소개](/ko/docs/Learn/CSS/Building_blocks/Values_and_units) -- [이미지 파일 형식 및 형식 안내서](/en-US/docs/Web/Media/Formats/Image_types) +- [이미지 파일 형식 및 형식 안내서](/ko/docs/Web/Media/Formats/Image_types) - [알파 합성](https://en.wikipedia.org/wiki/Alpha_compositing) on Wikipedia - [RGBA 색상 모델](https://en.wikipedia.org/wiki/RGBA_color_model) on Wikipedia - [채널 (디지털 이미지)](<https://en.wikipedia.org/wiki/Channel_(digital_image)>) on Wikipedia diff --git a/files/ko/glossary/apple_safari/index.md b/files/ko/glossary/apple_safari/index.md new file mode 100644 index 00000000000000..399c5f43d7cf0c --- /dev/null +++ b/files/ko/glossary/apple_safari/index.md @@ -0,0 +1,18 @@ +--- +title: 애플 사파리 +slug: Glossary/Apple_Safari +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +[Safari](https://www.apple.com/safari/)는 Apple에 의해 개발되고 macOS, iPadOS 및 iOS에 올라가는 {{Glossary("Browser","웹 브라우저")}}입니다. 사파리는 [Webkit](https://webkit.org/) 오픈소스 엔진을 기반으로 합니다. + +## 같이 보기 + +- 위키백과의 [Safari](<https://en.wikipedia.org/wiki/Safari_(web_browser)>) +- [apple.com의 Safari](https://www.apple.com/safari/) +- [WebKit 프로젝트](https://webkit.org/) +- [WebKit 개발 중인 빌드](https://webkit.org/build-archives/) +- [Safari의 버그 알리기](https://bugs.webkit.org/) diff --git a/files/ko/glossary/base64/index.md b/files/ko/glossary/base64/index.md index a949ca9b851ed5..fc7fdaeec28900 100644 --- a/files/ko/glossary/base64/index.md +++ b/files/ko/glossary/base64/index.md @@ -21,7 +21,7 @@ Base64 인코딩 체계는 일반적으로 ASCII 텍스트만 처리할 수 있 - [MIME](https://en.wikipedia.org/wiki/MIME)를 통한 이메일 - [XML](/ko/docs/Web/XML)에 복잡한 데이터 저장 -- [`data:` URL](/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs)에 포함될 수 있도록 바이너리 데이터를 인코딩 +- [`data:` URL](/ko/docs/Web/HTTP/Basics_of_HTTP/Data_URLs)에 포함될 수 있도록 바이너리 데이터를 인코딩 ## 인코딩된 크기 증가 diff --git a/files/ko/glossary/color_wheel/index.md b/files/ko/glossary/color_wheel/index.md new file mode 100644 index 00000000000000..84a3a91c0965a3 --- /dev/null +++ b/files/ko/glossary/color_wheel/index.md @@ -0,0 +1,25 @@ +--- +title: 색상환 (Color wheel) +slug: Glossary/Color_wheel +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**색상환(color wheel 또는 color circle)** 은 원 안에 색상 팔레트를 나타내는 차트입니다. 색상환은 원의 중심인 원점으로부터의 '각도'와 '거리'라는 두 극좌표로 식별되는 색상을 표시할 수 있습니다. + +색상환은 [`hsl()`](/ko/docs/Web/CSS/color_value/hsl), [`hwb()`](/ko/docs/Web/CSS/color_value/hwb) 또는 [`lch()`](/ko/docs/Web/CSS/color_value/lch)와 같이 극좌표나 원통형 좌표로 표현된 색상을 비교할 때 편리합니다. + +이러한 경우, '보색'은 동일한 직경의 반대편에서 주로 발견됩니다. 마찬가지로, '단색 색상'(동일한 '톤'이지만 다른 '음영'의 색상)은 동일한 반경에서 위치하고, '삼중 색상'(색상한 주위에 균일한 간격으로 배치되어 함께 잘 어울리는 색상으로 이어지는 세 가지 색상)도 쉽게 찾을 수 있습니다. + +색상환은 실생활에서 다양한 색상 중에서 선택하려고 할 때 사용됩니다. 예를 들어, 벽 페인트를 선택하거나 가구의 색상을 선택할 때입니다. + +디지털 세계에선, macOS의 기본 색상환([![macOS Monterey의 기본 색상 선택기](color_wheel_macos.png)](/ko/docs/Glossary/Color_wheel/color_wheel_macos.png))처럼, '색상 선택기'에서 색상환이 사용됩니다. + +## 같이 보기 + +- [색상 이론과 색상환](https://www.canva.com/colors/color-wheel/) +- Better Homes & Gardens의 [색상환을 사용하여 완벽한 색상 팔레트를 선택하는 방법](https://www.bhg.com/decorating/color/basics/color-wheel-color-chart/) +- 위키백과의 [색상환](https://en.wikipedia.org/wiki/Color_wheel) +- [`<color>`](/ko/docs/Web/CSS/color_value) (CSS 색상 유형) diff --git a/files/ko/glossary/composite_operation/index.md b/files/ko/glossary/composite_operation/index.md new file mode 100644 index 00000000000000..438bb3ce20a464 --- /dev/null +++ b/files/ko/glossary/composite_operation/index.md @@ -0,0 +1,23 @@ +--- +title: 복합 연산 (Composite operation) +slug: Glossary/Composite_operation +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +CSS에서, CSS 규칙의 속성 값은 해당 속성의 '기본 값'이고, [키프레임](/ko/docs/Web/CSS/@keyframes)의 동일한 속성 값은 해당 효과 크기입니다. + +'복합 연산'은 효과 값을 기본 값과 결합하여 생성하는 데 사용되는 특정 작업입니다. 복합 연산에는 세 가지 유형이 있습니다. + +- **대체**: 효과 값이 기본 값을 대체합니다. 이 경우 최종 효과 값은 원래 효과 값 자체입니다. +- **추가**: 효과 값이 기본 값에 추가됩니다. +- **누적**: 효과 값은 기본 값과 결합됩니다. + +> **참고:** CSS의 복합 연산은 애니메이션에만 적용됩니다. + +## 같이 보기 + +- [`animation-composition`](/ko/docs/Web/CSS/animation-composition) +- [`KeyframeEffect.composite`](/ko/docs/Web/API/KeyframeEffect/composite) diff --git a/files/ko/glossary/continuous_media/index.md b/files/ko/glossary/continuous_media/index.md new file mode 100644 index 00000000000000..71cbcc4eb11169 --- /dev/null +++ b/files/ko/glossary/continuous_media/index.md @@ -0,0 +1,14 @@ +--- +title: 연속적인 미디어 (Continuous Media) +slug: Glossary/Continuous_Media +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +연속 미디어(Continuous media)란 소스와 대상(destination) 사이에 시간적인 관계가 있는 데이터를 의미합니다. 연속적인 미디어의 가장 일반적인 예로는 오디오와 모션 비디오가 있습니다. 연속적인 미디어는 소스와 대상(sink) 사이에 "엄격한" 시간적인 관계가 있는 실시간(대화형)이거나, 관계가 덜 엄격한 스트리밍(재생)일 수 있습니다. + +CSS는 인쇄 매체를 포함한 다양한 상황에서 사용될 수 있습니다. 그리고 일부 CSS, 특히 레이아웃에 사용되는 CSS는 컨텍스트에 따라 다르게 동작합니다. + +따라서 연속적인 미디어는 콘텐츠가 분리되지 않은 컨텍스트를 식별합니다. 연속적인 미디어는 끊임없이 재생될 수 있습니다. 화면에 표시되는 웹 콘텐츠는 음성 콘텐츠와 마찬가지로 연속적인 미디어입니다. diff --git a/files/ko/glossary/cryptographic_hash_function/index.md b/files/ko/glossary/cryptographic_hash_function/index.md new file mode 100644 index 00000000000000..14e02141f60eea --- /dev/null +++ b/files/ko/glossary/cryptographic_hash_function/index.md @@ -0,0 +1,26 @@ +--- +title: 암호화 해시 함수 (Cryptographic hash function) +slug: Glossary/Cryptographic_hash_function +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +종종 '다이제스트 함수 (digest function)'라 불리는, 암호화 해시 함수는 임의의 크기를 가지는 메시지를 {{glossary("digest", "다이제스트")}}라고 하는 고정 크기의 메시지로 변환하는 {{glossary("cryptography", "암호학적")}} 기본 요소입니다. 암호화 해시 함수는 인증, 디지털 서명 및 메시지 인증 코드에 사용됩니다. + +암호화에 사용하려면, 해시 함수에 다음과 같은 특성이 있어야 합니다. + +- 게산이 빠릅니다 (자주 생성되기 때문입니다). +- 되돌릴 수 없습니다 (각 다이제스트는 매우 많은 수의 메시지에서 나올 수 있으며, 무차별 대입 공격만이 특정 다이제스트에 연결되는 메시지를 생성할 수 있습니다) +- 변조가 방지되어야 합니다 (메시지를 변경하면 다이제스트가 달라집니다) +- 충돌이 방지되어야 합니다 (동일한 다이제스트를 생성하는 두 개의 다른 메시지를 찾는 것은 불가능해야 합니다) + +MD5 및 SHA-1와 같은 암호화 해시 함수는 충돌 저항성을 크게 감소시키는 공격이 발견되어 손상된 것으로 생각됩니다. + +## 같이 보기 + +- 위키백과의 [암호화 해시 함수](https://en.wikipedia.org/wiki/Cryptographic_hash_function) +- [MDN 웹 문서 용어사전](/ko/docs/Glossary) + + - {{Glossary("Symmetric-key cryptography", "대칭키 암호화")}} diff --git a/files/ko/glossary/css_pixel/index.md b/files/ko/glossary/css_pixel/index.md new file mode 100644 index 00000000000000..96f4dd80943a8e --- /dev/null +++ b/files/ko/glossary/css_pixel/index.md @@ -0,0 +1,14 @@ +--- +title: CSS 픽셀 (CSS pixel) +slug: Glossary/CSS_pixel +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**CSS 픽셀**이라는 용어는 절대 길이 'px'의 CSS 단위와 동의어입니다. 이는 정확히 1 CSS 인치('in')의 1/96으로 [표준적으로 정의됩니다](https://drafts.csswg.org/css-values/#absolute-lengths). + +## 같이 보기 + +- MDN Hacks 블로그의 [CSS 길이 설명](https://hacks.mozilla.org/2013/09/css-length-explained/) diff --git a/files/ko/glossary/cssom/index.md b/files/ko/glossary/cssom/index.md new file mode 100644 index 00000000000000..a82657f1fca883 --- /dev/null +++ b/files/ko/glossary/cssom/index.md @@ -0,0 +1,14 @@ +--- +title: CSS 객체 모델 (CSS Object Model, CSSOM) +slug: Glossary/CSSOM +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +[**CSS 객체 모델 (CSS Object Model, CSSOM)**](/ko/docs/Web/API/CSS_Object_Model)은 문서의 스타일 관련 (CSS) 정보를 읽고 수정하기 위한 API 세트입니다. 즉, [DOM](/ko/docs/Web/API/Document_Object_Model)을 사용해 JavaScript에서 문서의 구조와 내용을 읽고 수정할 수 있는 방식과 비슷하게, CSSOM을 사용하여 JavaScript에서 문서의 스타일을 읽고 수정할 수 있습니다. + +## 같이 보기 + +- [페이지 채우기: 브라우저 작동 방식](/ko/docs/Web/Performance/How_browsers_work) diff --git a/files/ko/glossary/decryption/index.md b/files/ko/glossary/decryption/index.md new file mode 100644 index 00000000000000..ffb5e8e8e28f0d --- /dev/null +++ b/files/ko/glossary/decryption/index.md @@ -0,0 +1,21 @@ +--- +title: 복호화 (Decryption) +slug: Glossary/Decryption +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +{{glossary("cryptography", "암호학")}}에서, **복호화**는 {{glossary("ciphertext", "암호문")}}을 {{glossary("Plaintext", "평문")}}으로 변환하는 것입니다. + +복호화는 암호화의 기본 요소입니다. {{glossary("cipher", "암호")}}라는 암호화 알고리즘을 사용하여 암호문 메시지를 일반 텍스트로 변환합니다. +암호화와 마찬가지로, 최신 암호의 복호화는 특정 알고리즘과 {{glossary("key", "키")}}라는 비밀을 사용하여 수행됩니다. 알고리즘은 공개되는 경우가 많아, 암호화가 안전하게 유지된다면 키는 비밀로 유지되어야 합니다. + +![복호화 기본 요소입니다](decryption.png) + +복호화는 {{glossary("encryption")}}의 반대이며 키가 비밀로 유지되는 경우, 특정 비밀을 알지 못한 채 복호화하는 것은 수학적으로 수행하기 어렵습니다. 얼마나 어려운지는 선택한 암호화 알고리즘의 보안에 따라 달라지고 {{glossary("cryptanalysis", "암호화 분석")}}의 진행과 함께 발전합니다. + +## 같이 보기 + +- [암호화와 복호화](/ko/docs/Encryption_and_Decryption) diff --git a/files/ko/glossary/distributed_denial_of_service/index.md b/files/ko/glossary/distributed_denial_of_service/index.md new file mode 100644 index 00000000000000..bb32485d2a39a5 --- /dev/null +++ b/files/ko/glossary/distributed_denial_of_service/index.md @@ -0,0 +1,31 @@ +--- +title: 분산 서비스 거부 (Distributed Denial of Service, DDoS) +slug: Glossary/Distributed_Denial_of_Service +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +분산 서비스 거부(Distributed Denial of Service, DDoS)는 서버 리소스를 마비시키고 합법적인 사용자를 차단하기 위해, 손상된 다수의 시스템이 단일 대상을 공격하도록 만드는 공격입니다. + +일반적으로 많은 사람들이 다수의 봇을 사용해 은행이나 신용 카드 결제 게이트웨이와 같은 유명 웹 {{glossary("server","서버")}}를 공격합니다. DDoS는 컴퓨터 네트워크 및 CPU 리소스 관리와 관련이 있습니다. + +일반적인 DDoS 공격에서, 공격자는 하나의 컴퓨터 시스템의 취약점을 악용하고 이 컴퓨터를 DDoS 마스터로 만드는 것부터 시작합니다. 봇마스터라고 알려지는 공격 마스터는 다른 취약한 시스템을 식별하고 맬웨어로 감염시킵니다. 결국 공격자는 제어되는 기계에 지정된 대상에 공격하도록 지시합니다. + +DDoS 공격에는 두 가지 유형이 있습니다. 네트워크 중심 공격(대역폭을 사용하여 서비스에 과부하) 및 애플리케이션 계층 공격(애플리케이션 호출로 서비스 또는 데이터베이스에 과부하)이 있습니다. 대상에 대한 데이터 오버플로로 인해 대상 시스템이 포화되어 합법적인 트래픽에 응답할 수 없거나 매우 느리게 응답합니다(따라서 '서비스 거부'라는 이름이 붙었습니다). 감염된 컴퓨터의 소유자는 일반적으로 자신의 컴퓨터가 손상되었다는 사실을 알지 못하고, 서비스 손실도 겪게 됩니다. + +침입자의 통제를 받는 컴퓨터를 좀비 또는 봇이라고 합니다. 공동 감염된 컴퓨터의 네트워크는 봇넷 또는 좀비 군대로 알려져 있습니다. Kaspersky Labs과 Symantec은 스팸, 바이러스, 웜이 아닌 봇넷을 인터넷 보안에 대한 가장 큰 위협으로 식별했습니다. + +미국 컴퓨터 비상 준비팀(US-CERT)은 서비스 거부 공격의 증상을 다음과 같이 정의합니다. + +- 비정상적으로 느린 네트워크 성능(파일 열기 또는 웹 사이트 접근) +- 특정 웹사이트를 이용할 수 없음 +- 어떤 웹사이트에도 접속할 수 없음 +- 스팸 이메일 수신량이 급격히 증가함(이러한 유형의 DoS 공격은 이메일 폭탄으로 간주됨) +- 무선 또는 유선 인터넷 연결 끊김 +- 웹이나 인터넷 서비스에 대한 장기간의 접근 거부 + +## 같이 보기 + +- 위키백과의 [서비스 거부 공격](https://en.wikipedia.org/wiki/Denial-of-service_attack) diff --git a/files/ko/glossary/dmz/index.md b/files/ko/glossary/dmz/index.md new file mode 100644 index 00000000000000..f41187a8a26026 --- /dev/null +++ b/files/ko/glossary/dmz/index.md @@ -0,0 +1,16 @@ +--- +title: 비무장지대 (DeMilitarized Zone, DMZ) +slug: Glossary/DMZ +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**비무장지대(DeMilitarized Zone, DMZ)** 는 내부 네트워크(기업 또는 개인)과 신뢰할 수 없는 외부 세계(일반적으로 인터넷) 사이에 격리된 보안 인터페이스를 제공하는 방법입니다. + +정의된 특정 엔드포인트만 노출하며, {{Glossary('node/networking', '외부 노드')}}에서 내부 네트워크에 대한 접근을 거부합니다. + +## 같이 보기 + +- 위키백과의 [DMZ](<https://en.wikipedia.org/wiki/DMZ_(computing)>) diff --git a/files/ko/glossary/dos_attack/index.md b/files/ko/glossary/dos_attack/index.md new file mode 100644 index 00000000000000..bba7bd1bce1f33 --- /dev/null +++ b/files/ko/glossary/dos_attack/index.md @@ -0,0 +1,32 @@ +--- +title: DOS 공격 (DoS attack) +slug: Glossary/DOS_attack +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +DoS (서비스 거부)는 서버에 요청이 너무 많이 들어와 {{glossary("server", "서버")}} 리소스의 합법적인 사용을 방해하는 네트워크 공격입니다. + +컴퓨터에는 계산 능력이나 메모리와 같은 제한된 리소스가 있습니다. 제한된 리소스들이 모두 소모되면, 프로그램이 정지되거나 충돌하여 사용할 수 없게 될 수 있습니다. DoS 공격은 이러한 리소스를 소모시키고 합법적인 사용자가 서버나 네트워크를 이용할 수 없게 만들거나, 최소한 서버 성능 하락을 가져오는 다양한 기술로 이루어져 있습니다. + +공격을 받는 컴퓨터의 계산 용량을 소진시키기 위해 다수의 서버를 사용하는 분산 서비스 거부 공격(Distributed Denial of Service, DDoS)도 있습니다. + +### DoS 공격의 종류 + +DoS 공격은 특정 종류의 공격이라기 보단, 하나의 범주에 가깝습니다. 다음은 DoS 공격 유형의 대략적인 목록입니다. + +- 대역폭 공격 +- 서비스 요청 폭주 +- SYN 플러딩 공격 +- ICMP 플러드 공격 +- peer-to-peer(P2P) 공격 +- 영구적인 DoS 공격 +- 애플리케이션 레벨 플러드 공격 + +## 같이 보기 + +- 위키백과의 [서비스 거부 공격](https://en.wikipedia.org/wiki/Denial-of-service_attack) +- [OWASP의 서비스 거부](https://owasp.org/www-community/attacks/Denial_of_Service) +- {{Glossary("Distributed Denial of Service","DDoS")}} diff --git a/files/ko/glossary/dsl/digital_subscriber_line/index.md b/files/ko/glossary/dsl/digital_subscriber_line/index.md new file mode 100644 index 00000000000000..222fa1370ee02c --- /dev/null +++ b/files/ko/glossary/dsl/digital_subscriber_line/index.md @@ -0,0 +1,17 @@ +--- +title: 디지털 가입자 회선 (Digital Subscriber Line, DSL) +slug: Glossary/DSL/Digital_subscriber_line +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**디지털 가입자 회선**은 전화선을 통해 유선 데이터 전송을 보내는 광대역 인터넷 연결 유형입니다. + +다운로드 속도와 업로드 속도가 동일할 필요는 없습니다. 이러한 경우, 회선은 '비대칭'이라고 하며 ADSL이라는 약어가 사용됩니다. +케이블, 광섬유 또는 전화 접속 연결과 비교됩니다. + +## 같이 보기 + +- 위키백과의 [디지털 가입자 회선](https://en.wikipedia.org/wiki/Digital_subscriber_line) diff --git a/files/ko/glossary/dsl/domain_specific_language/index.md b/files/ko/glossary/dsl/domain_specific_language/index.md new file mode 100644 index 00000000000000..c6a0a7ef23819c --- /dev/null +++ b/files/ko/glossary/dsl/domain_specific_language/index.md @@ -0,0 +1,17 @@ +--- +title: 도메인 특화 언어 (Domain-Specific Language, DSL) +slug: Glossary/DSL/Domain_specific_language +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**도메인 특화 언어 (DSL)**은 응용 프로그램 도메인 내의 특정 문제를 해결하도록 설계된, 제한된 범위의 컴퓨터 언어 유형입니다. + +도메인 전반에 걸쳐 다양한 문제를 해결하도록 설계된 '일반 목적 언어(GPL)'과 DSL를 비교해보세요. + +## 같이 보기 + +- 위키백과의 [도메인 특화 언어](https://en.wikipedia.org/wiki/Domain-specific_language) +- martinfowler.com [DSL 안내서](https://martinfowler.com/dsl.html) diff --git a/files/ko/glossary/dsl/index.md b/files/ko/glossary/dsl/index.md new file mode 100644 index 00000000000000..c01ef4dbc53010 --- /dev/null +++ b/files/ko/glossary/dsl/index.md @@ -0,0 +1,16 @@ +--- +title: DSL +slug: Glossary/DSL +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**DSL**라는 용어는 상황에 따라 여러가지 의미를 가질 수 있습니다. 다음을 참조하세요. + +{{GlossaryDisambiguation}} + +## 같이 보기 + +- 위키백과의 [DSL](<https://en.wikipedia.org/wiki/DSL_(disambiguation)>) diff --git a/files/ko/glossary/effective_connection_type/index.md b/files/ko/glossary/effective_connection_type/index.md new file mode 100644 index 00000000000000..8bfbec57721a38 --- /dev/null +++ b/files/ko/glossary/effective_connection_type/index.md @@ -0,0 +1,32 @@ +--- +title: 유효 연결 타입 (Effective connection type) +slug: Glossary/Effective_connection_type +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**유효 연결 타입 (Effective connection type, ECT)**은 실제 연결이 광대역이나 Wi-Fi 테더링이더라도, 브라우저가 페이지를 요청하는 시간과 유효 연결 타입 사이의 시간을 기준으로 3G와 같은 셀룰러 연결 타입을 반환하는, 측정된 네트워크 성능을 나타냅니다. + +'`slow-2g`', '`2g`', '`3g`'과 '`4g`' 값은 관찰되는 왕복 시간과 다운링크 값을 사용하여 결정됩니다. + +| 유효 연결 타입 | 최소 [왕복 시간](/ko/docs/Glossary/Round_Trip_Time) | 최대 다운링크 | 설명 | +| -------------- | --------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------- | +| `slow-2g` | 2000ms | 50 Kbps | 이 네트워크는 텍스트 전용 페이지와 같은 소규모 전송에만 적합합니다. | +| `2g` | 1400ms | 70 Kbps | 이 네트워크는 작은 이미지 전송에 적합합니다. | +| `3g` | 270ms | 700 Kbps | 이 네트워크는 고해상도 이미지, 오디오, SD 비디오 등 대용량 리소스를 전송하는 데 적합합니다. | +| `4g` | 0ms | ∞ | 이 네트워크는 HD 비디오, 실시간 비디오 등에 적합합니다. | + +[유효타입](/ko/docs/Web/API/NetworkInformation/effectiveType)은 [네트워크 정보 API](/ko/docs/Web/API/Network_Information_API)의 속성으로, [navigator.connection](/en-US/docs/Web/API/Navigator/connection) 객체를 통해 JavaScript에 노출됩니다. 유효 연결 타입을 보려면, 지원 브라우저의 개발자 도구 콘솔을 열고 다음을 입력하세요. + +```js +navigator.connection.effectiveType; +``` + +## 같이 보기 + +- [네트워크 정보 API](/ko/docs/Web/API/Network_Information_API) +- {{domxref('NetworkInformation')}} +- {{domxref('NetworkInformation.effectiveType')}} +- {{HTTPHeader("ECT")}} diff --git a/files/ko/glossary/enumerated/index.md b/files/ko/glossary/enumerated/index.md new file mode 100644 index 00000000000000..f7add499e29fd0 --- /dev/null +++ b/files/ko/glossary/enumerated/index.md @@ -0,0 +1,34 @@ +--- +title: 열거형 (Enumerated) +slug: Glossary/Enumerated +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +컴퓨터 과학에서, **열거형** 타입은 제한된 이름이 있는 값의 모음으로 구성된 데이터 타입입니다. + +## HTML 열거 속성 + +HTML에서 [열거 속성](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#enumerated-attribute)은 제한된 사전 정의된 텍스트 값 모음이 있는 속성입니다. 예를 들어, 전역 HTML [`dir`](/en-US/docs/Web/HTML/Global_attributes/dir) 속성은 세 가지 유효한 값(`ltr`, `rtl` 및 `auto`)이 있습니다. + +열거된 각 속성에는 속성이 값 없이 존재할 경우(값이 누락되는 경우)에 대한 기본값 및 속성에 유효하지 않은 값이 할당될 경우에 대한 기본값이 있습니다. [불리언](/en-US/docs/Glossary/Boolean) HTML 속성과 달리, 이 속성에는 값이 존재하는지, 생략되었는지, 유효하지 않은지에 관계없이 속성이 존재할 때 항상 true입니다. 열거된 HTML 속성을 사용하면, 생략된 값의 기본값이 유효하지 않은 값의 기본값과 다를 수 있습니다. + +예를 들어, 전역 HTML [`contenteditable`](/ko/docs/Web/HTML/Global_attributes/contenteditable) 속성은 두 개의 유효한 키워드( `true` 및 `false`)를 가집니다. 속성이 있지만 값이 설정되지 않은 경우, 값은 `true`입니다. 값이 설정되었지만, 유효하지 않은 경우(`contenteditable="contenteditable"`와 같이), 값은 세 번째 상태인 `inherit`으로 매핑됩니다. + +## ARIA 열거 속성 + +ARIA 상태와 속성은 HTML이므로 열거된 속성도 있습니다. ARIA 속성이 열거된 목록에 `true` 및 `false` 값을 모두 포함하는 경우, 일반적으로 생략된 속성은 `false`로, 유효하지 않은 값은 `true`로 처리하는 반면, 빈 문자열이나 생략된 값의 기본값은 속성에 따라 다릅니다. + +예를 들어, `aria-current` 속성은 `page`, `step`, `location`, `date`, `time`, `true` 및 `false`를 포함하는 제한된 값 목록을 허용합니다. 이 경우에는, 속성이 없거나, 빈 문자열이거나, 값이 없거나 `aria-current="false"`로 설정된 경우에, 속성은 false이고 사용자에게 노출되지 않습니다. 열거된 값 목록에 없는 비어 있지 않은 문자열 값은 `aria-current="true"`가 설정된 것처럼 처리됩니다. + +## JavaScript 열거 속성 + +JavaScript에서, 열거 가능 속성은 내부 열거 가능 플래그가 true로 설정된 속성입니다. 열거 가능 속성은 단순 할당이나 속성 초기자를 통해 생성된 속성의 기본값입니다. 대부분의 반복 메커니즘([`for...in`](/ko/docs/Web/JavaScript/Reference/Statements/for...in) 반복문 및 [`Object.keys`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/keys)와 같습니다)은 열거 가능한 키만 접근하게 됩니다. + +## 같이 보기 + +- [불리언](/ko/docs/Glossary/Boolean) +- [JavaScript 데이터 타입과 자료구조](/ko/docs/Web/JavaScript/Data_structures) +- HTML 표준의 [열거 속성](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#enumerated-attribute) diff --git a/files/ko/glossary/etld/index.md b/files/ko/glossary/etld/index.md new file mode 100644 index 00000000000000..c21df46c0b7a7f --- /dev/null +++ b/files/ko/glossary/etld/index.md @@ -0,0 +1,50 @@ +--- +title: 유효 최상위 도메인 (eTLD) +slug: Glossary/eTLD +l10n: + sourceCommit: 8d0cbeacdc1872f7e4d966177151585c58fb879e +--- + +{{GlossarySidebar}} + +**eTLD**라는 용어는 "유효 최상위 도메인"을 의미하며 단일 조직이 등록할 수 있는 도메인입니다. + +최상위 도메인 (TLD)은 도메인 네임에서 마지막 점 다음에 오는 부분입니다. 예를 들어, `crookedtimber.org`의 최상위 도메인은 `org`입니다. + +단일 조직에서는 최상위 도메인 바로 아래의 도메인만 등록할 수 있다고 가정합니다. 그러면 다음 도메인이 모두 동일한 조직에 속해 있다는 것을 알 수 있습니다. + +```plain + xyz.org +abc.xyz.org +def.xyz.org +``` + +그러나 많은 등록 기관이 최상위 수준보다 낮은 수준에서 도메인을 등록하도록 허용하기 때문에, 이는 일반적인 규칙으로 운용되지 않습니다. 예를 들어, `sussex.ac.uk` 및 `aber.ac.uk`가 서로 다른 조직의 소유라는 것을 의미합니다. + +이것은 등록기관의 정책에 따른 문제이므로, 특정 도메인 이름 접미사(예,`ac.uk`)가 공개적으로 등록 가능한지 여부를 알고리즘적으로 판단하는 것을 불가능합니다. [공용 접미사 목록](https://publicsuffix.org/)은 조직이 이름을 직접 등록할 수 있는 모든 접미사 목록입니다. 즉, eTLD 목록입니다. + +관련된 개념 **eTLD+1**은 eTLD와 도메인 이름의 다음 부분을 의미합니다. eTLD는 등록 가능하기 때문에, 동일한 eTLD+1을 가진 모든 도메인은 동일한 조직이 소유합니다. + +예를 들어, 아래는 모두 eTLD+1 도메인입니다. + +- crookedtimber.org +- theguardian.com +- sussex.ac.uk +- aber.ac.uk + +이것은 각 도메인 아래의 모든 도메인이 동일한 조직에 속함을 의미합니다. 예를 들어, + +```plain + film.theguardian.com +music.theguardian.com +``` + +```plain + news.sussex.ac.uk + blog.sussex.ac.uk +admissions.sussex.ac.uk +``` + +## 같이 보기 + +- [공용 접미사 목록](https://publicsuffix.org/) diff --git a/files/ko/glossary/event/index.md b/files/ko/glossary/event/index.md new file mode 100644 index 00000000000000..17bca6ad4c78e4 --- /dev/null +++ b/files/ko/glossary/event/index.md @@ -0,0 +1,16 @@ +--- +title: 이벤트 (Event) +slug: Glossary/Event +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +이벤트는 JavaScript 코드로 수정할 수 있는 [DOM](/ko/docs/Glossary/DOM) 요소에 의해 생성된 리소스입니다. + +## 같이 보기 + +- [MDN의 Event 문서](/ko/docs/Web/API/Event) +- [공식 웹사이트](https://www.w3.org/TR/DOM-Level-2-Events/events.html) +- 위키백과의 [DOM 이벤트](https://en.wikipedia.org/wiki/DOM_Events) diff --git a/files/ko/glossary/first_cpu_idle/index.md b/files/ko/glossary/first_cpu_idle/index.md new file mode 100644 index 00000000000000..471e1afed2291a --- /dev/null +++ b/files/ko/glossary/first_cpu_idle/index.md @@ -0,0 +1,10 @@ +--- +title: 첫 번째 CPU 유휴 상태 (First CPU idle) +slug: Glossary/First_CPU_idle +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**첫 번째 CPU 유휴 상태(First CPU Idle)**는 페이지가 최소한으로 대화형일 때 또는 창이 사용자 입력을 처리할 수 있을 만큼 조용할 때를 측정합니다. 첫 번째 CPU 유휴 상태는 비표준 Google 웹 성능 지표입니다. 일반적으로, 이 지표는 표시되는 모든 UI 요소가 반드시 그런 것은 아니지만, 대부분이 대화형이고 사용자 인터페이스가 평균적으로 대부분의 사용자 입력에 50ms 내에 응답할 때 발생합니다. [첫 번째 대화형](/ko/docs/Glossary/First_interactive)이라고도 합니다. diff --git a/files/ko/glossary/first_meaningful_paint/index.md b/files/ko/glossary/first_meaningful_paint/index.md new file mode 100644 index 00000000000000..dd402e9aeab0e0 --- /dev/null +++ b/files/ko/glossary/first_meaningful_paint/index.md @@ -0,0 +1,19 @@ +--- +title: 최초 의미있는 페인트 (First Meaningful Paint, FMP) +slug: Glossary/First_meaningful_paint +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**최초 의미있는 페인트(FMP)** 이후에 웹 페이지 초기 렌더링 직후 기본 화면 레이아웃(above-the-fold)이 변경되고, 웹 글꼴이 로드됩니다. FMP 이후에 사용자는 웹 페이지를 유용하다고 느낄 수 있습니다. + +FMP는 페이지 로드의 작은 차이에도 매우 민감합니다. 이로 인해 일관되지 않은(이중적인) 결과가 발생할 수 있습니다. 측정항목에 대한 정의는 브라우저 별 구현 세부정보에 의존합니다. 즉, 표준화할 수 없고 모든 웹 브라우저에서 구현되지 않았습니다. + +> **경고:** 최초 의미있는 페인트 (FMP)는 Lighthouse 6.0부터 지원되지 않습니다. 앞으로는 대신, [LargestContentfulPaint API](https://wicg.github.io/largest-contentful-paint/) 사용을 고려해주세요. + +## 같이 보기 + +- [최초 콘텐트풀 페인트](/ko/docs/Glossary/First_contentful_paint) +- [최대 콘텐트풀 페인트](https://wicg.github.io/largest-contentful-paint/) diff --git a/files/ko/glossary/fps/index.md b/files/ko/glossary/fps/index.md new file mode 100644 index 00000000000000..f7d4907e3fa73f --- /dev/null +++ b/files/ko/glossary/fps/index.md @@ -0,0 +1,17 @@ +--- +title: 프레임 속도 (Frame rate, FPS) +slug: Glossary/FPS +l10n: + sourceCommit: d267a8cb862c20277f81bbc223221b36b0c613e6 +--- + +{{GlossarySidebar}} + +**프레임 속도(FPS)**는 브라우저가 콘텐츠를 다시 계산하고, 레이아웃을 설정하고 디스플레이에 그릴 수 있는 속도입니다. **초당 프레임 수(frames per second, fps)**는 1초에 다시 칠할 수 있는 프레임 수입니다. 웹사이트 컴퓨터 그래픽의 목표 프레임 속도는 60fps입니다. + +일반적으로 영화의 프레임 속도는 24fps입니다. 모션 블러(연속적인 이미지가 겹쳐 보여, 영상 끌림이 보이는 현상)를 통해 물체의 환상이 만들어지기 때문애 초당 프레임 수를 줄일 수 있습니다. 모션 블러를 사용하여 이미지 [스프라이트](/ko/docs/Web/CSS/CSS_images/Implementing_image_sprites_in_CSS)에 애니메이션을 적용하지 않는 경우를 제외하면, 컴퓨터 화면에서는 움직일 때 모션 블러가 없습니다. + +## 같이 보기 + +- 위키백과의 [프레임 속도](https://en.wikipedia.org/wiki/Frame_rate) +- 용어 사전의 {{glossary("FPS")}} diff --git a/files/ko/glossary/function/index.md b/files/ko/glossary/function/index.md index fcf3b54c5d28d3..53a2d45aee01d5 100644 --- a/files/ko/glossary/function/index.md +++ b/files/ko/glossary/function/index.md @@ -1,5 +1,5 @@ --- -title: 함수 +title: 함수 (function) slug: Glossary/Function l10n: sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 @@ -7,13 +7,13 @@ l10n: {{GlossarySidebar}} -**함수**는 다른 코드에서 또는 자신에 의해 호출되거나 함수 레퍼런스를 저장한 {{Glossary("variable", "변수")}}에 의해 호출될 수 있는 코드 조각입니다. 함수가 호출될 때, 함수의 입력으로 {{Glossary("Argument", "인수")}} 가 전달되고 함수는 선택적으로 출력값을 반환할 수 있습니다. 또한 {{glossary("JavaScript")}}에서 함수는 {{glossary("object", "객체")}}이기도 합니다. +**함수(function)** 는 다른 코드에서 또는 자신에 의해 호출되거나 함수 레퍼런스를 저장한 {{Glossary("variable", "변수")}}에 의해 호출될 수 있는 코드 조각입니다. 함수가 호출될 때, 함수의 입력으로 {{Glossary("Argument", "인수")}} 가 전달되고 함수는 선택적으로 출력값을 반환할 수 있습니다. 또한 {{glossary("JavaScript")}}에서 함수는 {{glossary("object", "객체")}}이기도 합니다. -함수명은 함수 선언문 또는 함수 표현식의 일부로써 선언된 {{Glossary("identifier","식별자")}}입니다. 함수 이름의 {{Glossary("scope","범위")}}는 함수 이름의 선언식 또는 표현식인지에 따라 결정된다. +함수명은 함수 선언문 또는 함수 표현식의 일부로써 선언된 {{Glossary("identifier","식별자")}}입니다. 함수 이름의 {{Glossary("scope","범위")}}는 함수 이름의 선언식 또는 표현식인지에 따라 결정됩니다. ### 여러 함수 형식들 -**익명 함수**는 함수명이 없는 함수입니다. 함수 표현식만 이름이 없을 수 있으며, 함수 선언식에는 반드시 이름이 있어야합니다. +**익명 함수**는 함수명이 없는 함수입니다. 함수 표현식만 이름이 없을 수 있으며, 함수 선언식에는 반드시 이름이 있어야 합니다. ```js // 함수 표현식으로 만든 익명 함수 @@ -38,7 +38,7 @@ function foo() {} const baz = () => {}; ``` -**내부 함수**는 다른 함수 내부에서 정의된 함수이다(아래 예에서는 `square`). **외부 함수**는 함수를 포함하고 있는 함수이다(아래 예에서는 `addSquares`): +**내부 함수**는 다른 함수 내부에서 정의된 함수입니다(아래 예에서는 `square`). **외부 함수**는 함수를 포함하고 있는 함수입니다(아래 예에서는 `addSquares`). ```js function addSquares(a, b) { @@ -94,9 +94,9 @@ function foo() { }(); ``` -IIFE에 대해 더 많은 설명이 필요하다면, 위키피디아의 다음 페이지를 확인해 주세요. [Immediately Invoked Function Expression](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression) +IIFE에 대해 더 많은 설명이 필요하다면, 위키피디아의 [즉시 실행 함수 표현식(Immediately Invoked Function Expression)](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression)을 확인해주세요. ## 같이 보기 -- [Functions](/ko/docs/Web/JavaScript/Guide/Functions) -- [Arrow Functions](/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions) +- [함수](/ko/docs/Web/JavaScript/Guide/Functions) +- [화살표 함수](/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions) diff --git a/files/ko/glossary/gecko/index.md b/files/ko/glossary/gecko/index.md new file mode 100644 index 00000000000000..320a7f79acaf59 --- /dev/null +++ b/files/ko/glossary/gecko/index.md @@ -0,0 +1,18 @@ +--- +title: 게코 (Gecko) +slug: Glossary/Gecko +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**게코(Gecko)** 는 Mozilla Project에서 개발하고 {{glossary("Mozilla Firefox","파이어폭스")}} 및 {{glossary("Firefox OS","파이어폭스 운영체제")}}를 포함한 많은 애플리케이션/장치에서 사용되는 레이아웃 엔진입니다. + +웹 {{glossary("browser","브라우저")}}에는 {{glossary("HTML")}}, {{glossary("CSS")}}, {{glossary("JavaScript")}} 및 삽입된 콘텐츠(예, 이미지)를 해석하고 모든 것을 화면에 그리는 레이아웃 엔진이라는 소프트웨어가 필요합니다. 추가적으로, 게코(Gecko)는 연관된 {{glossary("API","API")}}가 게코(Gecko)가 지원하는 모든 운영체제에서 잘 작동하는지 확인하고, 적절한 API가 관련 지원 대상에만 노출되도록 합니다. 이것은 게코(Gecko)에는 무엇보다도 네트워킹 스택, 그래픽 스택, 레이아웃 엔진, JavaScript 가상 머신 및 포팅 레이어가 포함되어 있음을 의미합니다. + +모든 파이어폭스 운영체제 애플리케이션은 웹 앱이므로 파이어폭스 운영체제는 애플리케이션 런타임으로도 게코(Gecko)를 사용합니다. + +## 같이 보기 + +- 위키백과의 [게코(Gecko)](<https://en.wikipedia.org/wiki/Gecko_(software)>) diff --git a/files/ko/glossary/global_scope/index.md b/files/ko/glossary/global_scope/index.md new file mode 100644 index 00000000000000..d6ddb97f96719e --- /dev/null +++ b/files/ko/glossary/global_scope/index.md @@ -0,0 +1,17 @@ +--- +title: 전역 스코프 (Global scope) +slug: Glossary/Global_scope +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +프로그래밍 환경에서, '전역 범위'는 다른 모든 범위를 포함하고, 모든 범위에 접근 가능한 {{glossary("scope", "스코프")}}입니다. + +클라이언트 사이드 JavaScript에서, 전역 범위는 일반적으로 모든 코드가 실행되는 웹 페이지입니다. + +## 같이 보기 + +- [JavaScript 변수 스코프 소개](/ko/docs/Web/JavaScript/Guide/Grammar_and_types#variable_scope) +- 위키백과의 [스코프](<https://en.wikipedia.org/wiki/Scope_(computer_science)>) diff --git a/files/ko/glossary/grid/index.md b/files/ko/glossary/grid/index.md new file mode 100644 index 00000000000000..c7573f4582a818 --- /dev/null +++ b/files/ko/glossary/grid/index.md @@ -0,0 +1,71 @@ +--- +title: 그리드 (Grid) +slug: Glossary/Grid +l10n: + sourceCommit: d267a8cb862c20277f81bbc223221b36b0c613e6 +--- + +{{GlossarySidebar}} + +'CSS 그리드(grid)'는 {{cssxref("display")}} 속성의 `grid` 값을 사용하여 정의됩니다. {{cssxref("grid-template-rows")}} 및 {{cssxref("grid-template-columns")}} 속성을 사용하여 그리드의 열과 행을 정의할 수 있습니다. + +이러한 속성을 사용해 정의하는 그리드는 '명시적 그리드'라고 할 수 있습니다. + +이 명시적 그리드 외부에 콘텐츠를 배치하거나 자동 배치에 의존하고 그리드 알고리즘이 {{glossary("grid item", "그리드 요소")}}들을 보관하기 위해 추가 행 또는 열 {{glossary("grid tracks", "트랙")}}을 생성해야 하는 경우, 그러면 암시적 그리드에 추가 트랙이 생성됩니다.'암시적 그리드'는 정의된 트랙 외부에 추가되는 콘텐츠로 인해 자동으로 생성되는 그리드입니다. + +아래 예제에서는 3개의 열과 2개의 행으로 구성된 '명시적 그리드'를 만들었습니다. 그리드의 '세 번째' 행은 '암시적 그리드' 행 트랙으로, 명시적 트랙을 채우는 6개 항목보다 많기 때문에 형성됩니다. + +## 예제 + +```css hidden +* { + box-sizing: border-box; +} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +``` + +```css +.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 100px 100px; +} +``` + +```html +<div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> + <div>Eight</div> +</div> +``` + +{{ EmbedLiveSample('Example', '500', '330') }} + +## 같이 보기 + +- [그리드 레이아웃의 기본 개념](/ko/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) +- 속성 참고서 + + - {{cssxref("grid-template-columns")}} + - {{cssxref("grid-template-rows")}} + - {{cssxref("grid")}} + - {{cssxref("grid-template")}} diff --git a/files/ko/glossary/grid_container/index.md b/files/ko/glossary/grid_container/index.md new file mode 100644 index 00000000000000..f5d656d97c7903 --- /dev/null +++ b/files/ko/glossary/grid_container/index.md @@ -0,0 +1,27 @@ +--- +title: 그리드 컨테이너 (Grid container) +slug: Glossary/Grid_Container +l10n: + sourceCommit: d267a8cb862c20277f81bbc223221b36b0c613e6 +--- + +{{GlossarySidebar}} + +요소에 `grid` 또는 `inline-grid` 값을 사용하면 해당 요소가 [CSS 그리드 레이아웃](/ko/docs/Web/CSS/CSS_grid_layout)을 사용하여 **그리드 컨테이너**로 변환되고, 바로 밑의 모든 자식 요소도 그리드 요소가 됩니다. + +요소가 그리드 컨테이너가 되면 **그리드 서식 지정 컨텍스트**가 설정됩니다. 바로 밑의 자식 요소는 이제 {{cssxref("grid-template-columns")}} 및 {{cssxref("grid-template-rows")}}를 사용하여 정의된 명시적 그리드 또는 요소가 '명시적 그리드' 외부에 배치될 때 생성된 '암시적 그리드'에 배치될 수 있습니다. + +## 같이 보기 + +### 속성 참고서 + +- {{cssxref("grid-template-columns")}} +- {{cssxref("grid-template-rows")}} +- {{cssxref("grid-auto-columns")}} +- {{cssxref("grid-auto-rows")}} +- {{cssxref("grid")}} +- {{cssxref("grid-template")}} + +### 더 읽어보기 + +- CSS 그리드 레이아웃 안내서: [그리드 레이아웃의 기본 개념](/ko/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) diff --git a/files/ko/glossary/ide/index.md b/files/ko/glossary/ide/index.md new file mode 100644 index 00000000000000..8159a177131c3e --- /dev/null +++ b/files/ko/glossary/ide/index.md @@ -0,0 +1,14 @@ +--- +title: 통합 개발 환경 (IDE) +slug: Glossary/IDE +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**통합 개발 환경 (Integrated Development Environment, IDE)** 또는 대화형 개발 환경은 소프트웨어 개발을 위해 컴퓨터 프로그래머에게 포괄적인 기능을 제공하는 소프트웨어 응용 프로그램입니다. IDE는 일반적으로 소스코드 편집기, 빌드 자동화 도구 및 디버거로 구성됩니다. + +## 같이 보기 + +- 위키백과의 [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) diff --git a/files/ko/glossary/index.md b/files/ko/glossary/index.md index ccd3899c06f1d9..455f82303de11d 100644 --- a/files/ko/glossary/index.md +++ b/files/ko/glossary/index.md @@ -1,18 +1,14 @@ --- title: "MDN Web Docs 용어 사전: 웹 용어 정의" slug: Glossary +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- +{{GlossarySidebar}} + 웹 기술은 문서화 또는 코딩에서 사용되는 전문 용어 및 약어를 많이 포함하고 있습니다. 이 용어 사전은 웹을 성공적으로 이해하고 구축하기 위해 알아야 하는 단어와 약어의 정의를 제공합니다. 사이드바에서 용어 사전의 용어를 골라볼 수 있습니다. -새 항목을 작성하거나 기존 항목을 개선하여 개선하는 데 도움을 줄 수 있습니다. - -> **참고:** 용어 사전은 끝없이 진행 중인 작업입니다. [새 항목을 작성](/ko/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary)하거나 기존 항목을 개선하여 도움을 줄 수 있습니다. - -<section id="Quick_links"> - <ol> - <li><strong><a href="/ko/docs/Glossary">MDN Web Docs Glossary</a></strong>{{ListSubpagesForSidebar("/ko/docs/Glossary", 1)}}</li> - </ol> -</section> +> **참고:** 용어 사전은 끝없이 진행 중인 작업입니다. [새 항목을 작성](/ko/docs/MDN/Writing_guidelines/Howto/Write_a_new_entry_in_the_glossary)하거나 기존 항목을 개선하여 도움을 줄 수 있습니다. diff --git a/files/ko/glossary/irc/index.md b/files/ko/glossary/irc/index.md new file mode 100644 index 00000000000000..29b84c19ed3f20 --- /dev/null +++ b/files/ko/glossary/irc/index.md @@ -0,0 +1,12 @@ +--- +title: 인터넷 릴레이 챗 (IRC) +slug: Glossary/IRC +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**인터넷 릴레이 챗(Internet Relay Chat, IRC)**은 IRC 서버를 통해 메시지를 보내고 받는 IRC 클라이언트와, 인터넷 연결이 필요한 전세계 채팅 시스템입니다. + +Jarrko Oikarinen이 1980년대 후반에 설계한, IRC는 {{glossary("TCP")}}를 사용하며 개방형 프로토콜입니다. IRC 서버는 많은 IRC 채널 중 하나에 연결된 모든 사람에게 메시지를 브로드캐스트합니다(각각 자신의 ID가 있음). diff --git a/files/ko/glossary/local_scope/index.md b/files/ko/glossary/local_scope/index.md new file mode 100644 index 00000000000000..f42f8bd5f827ba --- /dev/null +++ b/files/ko/glossary/local_scope/index.md @@ -0,0 +1,14 @@ +--- +title: 지역 범위 (Local scope) +slug: Glossary/Local_scope +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +지역 범위는 {{glossary("variable","변수")}}를 로컬로 만드는 변수의 특성입니다. 즉, 변수 이름은 {{glossary("global scope", "전역 범위")}}가 아닌 범위 안에서 해당 {{glossary("value", "값")}}에만 바인딩됩니다. + +## 같이 보기 + +- 위키백과의 [스코프](<https://en.wikipedia.org/wiki/Scope_(computer_science)>) diff --git a/files/ko/glossary/lossless_compression/index.md b/files/ko/glossary/lossless_compression/index.md new file mode 100644 index 00000000000000..d23539ca5db747 --- /dev/null +++ b/files/ko/glossary/lossless_compression/index.md @@ -0,0 +1,21 @@ +--- +title: 무손실 압축 (Lossless compression) +slug: Glossary/Lossless_compression +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**무손실 압축(Lossless compression)**은 압축된 데이터를 원본 데이터로 완벽하게 재구성할 수 있는 데이터 압축 알고리즘의 일종입니다. 무손실 압축 방법은 되돌릴 수 있습니다. 무손실 압축의 예로는 {{glossary("GZIP")}}, {{glossary("Brotli")}}, WebP 및 {{glossary("PNG")}}가 있습니다. + +반면에 {{glossary("Lossy compression", "손실 압축")}}은 원본 파일에서 일부 데이터를 삭제하여 부정확한 근사치를 사용하기 때문에, 되돌릴 수 없는 압축 방법입니다. + +## 같이 보기 + +- [용어 사전](/ko/docs/Glossary) + + - {{glossary("GZIP")}} + - {{glossary("Brotli")}} + - {{glossary("PNG")}} + - {{glossary("Lossy compression")}} diff --git a/files/ko/glossary/ltr/index.md b/files/ko/glossary/ltr/index.md new file mode 100644 index 00000000000000..4f45c42a6841ef --- /dev/null +++ b/files/ko/glossary/ltr/index.md @@ -0,0 +1,35 @@ +--- +title: 왼쪽에서 오른쪽으로 읽는 특성 (Left To Right, LTR) +slug: Glossary/LTR +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**왼쪽에서 오른쪽으로 읽는 특성 (Left To Right, LTR)**은 텍스트가 왼쪽에서 오른쪽으로 작성되어 있다는 것을 나타내는 {{Glossary("locale")}} 속성입니다. 예를 들어, `en-US` locale 속성 (미국 영어의 경우) 왼쪽에서 오른쪽으로 지정합니다. + +대부분의 서양 언어와, 전세계의 많은 언어는 LTR로 작성됩니다. + +LTR의 반대인, {{Glossary("RTL")}} (오른쪽에서 왼쪽으로 읽는 특성)은 아랍어 (`ar`) 및 히브리어 (`he`)를 포함한 다른 언어들에서 사용됩니다. + +## 같이 보기 + +- [MDN 웹 문서 용어 사전](/ko/docs/Glossary) + + - {{Glossary("locale")}} + - {{Glossary("Localization")}} + - {{Glossary("LTR")}} + - {{Glossary("RTL")}} + +- [HTML 전역 속성](/ko/docs/Web/HTML/Global_attributes) + + - [dir](/ko/docs/Web/HTML/Global_attributes#dir) + - [lang](/ko/docs/Web/HTML/Global_attributes#lang) + +- [CSS](/ko/docs/Web/CSS) + + - {{cssxref(":dir")}} + - {{cssxref("direction")}} + - {{cssxref("unicode-bidi")}} + - {{cssxref("writing-mode")}} diff --git a/files/ko/glossary/main_thread/index.md b/files/ko/glossary/main_thread/index.md new file mode 100644 index 00000000000000..218ccb2b54ff75 --- /dev/null +++ b/files/ko/glossary/main_thread/index.md @@ -0,0 +1,21 @@ +--- +title: 메인 스레드 (Main thread) +slug: Glossary/Main_thread +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**메인 스레드(main thread)** 는 브라우저가 사용자 이벤트와 페인트를 처리하는 곳입니다. 기본적으로, 브라우저는 단일 스레드를 사용하여 페이지의 모든 JavaScript를 실행하고 레이아웃, 리플로우 및 가비지 컬렉션을 수행합니다. 오래 실행되는 JavaScript 함수가 스레드를 차단하여 페이지가 응답하지 않고, 사용자 경험이 저하될 수 있다는 것을 의미합니다. + +[서비스 워커](/ko/docs/Web/API/Service_Worker_API/Using_Service_Workers)와 같은 [웹 워커](/ko/docs/Web/API/Web_Workers_API/Using_web_workers)를 의도적으로 사용하지 않는 한, JavaScript는 메인 스레드에서 실행되기 때문에, 스크립트로 인해 이벤트 처리 또는 페인팅이 지연되기 쉽습니다. 메인 스레드에 필요한 작업이 적을수록, 메인 스레드는 사용자 이벤트, 페인트에 더 많이 응답할 수 있으며, 일반적으로 사용자에게 응답할 수 있습니다. + +## 같이 보기 + +- [비동기 JavaScript](/ko/docs/Learn/JavaScript/Asynchronous) +- [Web worker API](/ko/docs/Web/API/Web_Workers_API) +- [Service worker API](/ko/docs/Web/API/Service_Worker_API) +- [용어 사전](/ko/docs/Glossary) + + - {{Glossary("Thread")}} diff --git a/files/ko/glossary/mime/index.md b/files/ko/glossary/mime/index.md new file mode 100644 index 00000000000000..df706ae650b3b1 --- /dev/null +++ b/files/ko/glossary/mime/index.md @@ -0,0 +1,16 @@ +--- +title: 다목적 인터넷 메일 확장 (MIME) +slug: Glossary/MIME +l10n: + sourceCommit: d842f8c32316dbe36cff9fc5e0e777602e32d958 +--- + +{{GlossarySidebar}} + +**다목적 인터넷 메일 확장(Multipurpose Internet Mail Extensions, MIME)**은 오디오, 비디오, 이미지 등 ASCII 텍스트 이외의 다른 형식으로 문서를 설명하기 위한 표준입니다. +처음에는 이메일 첨부에 사용되었지만 어느 곳에서나 문서 타입을 정의하는 사실상의 표준이 되었습니다. + +## 같이 보기 + +- [MIME-Type](/ko/docs/Glossary/MIME_type) +- 위키백과의 [MIME](https://en.wikipedia.org/wiki/MIME) diff --git a/files/ko/glossary/minification/index.md b/files/ko/glossary/minification/index.md new file mode 100644 index 00000000000000..d789bb3ae57d17 --- /dev/null +++ b/files/ko/glossary/minification/index.md @@ -0,0 +1,14 @@ +--- +title: 코드 경량화 (Minification) +slug: Glossary/Minification +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**코드 경량화(Minification)** 는 브라우저에서 리소스를 처리하는 방식에 영향을 주지 않고 불필요하거나 중복되는 데이터를 제거하는 프로세스입니다. + +코드 경량화에는 코드 주석, 공백, 사용되지 않는 코드 제거는 물론 변수 및 함수 이름 줄이는 것도 포함될 수 있습니다. 코드 경량화는 파일 크기를 줄여 웹 성능을 향상시키는 데 사용됩니다. 코드 경량화는 일반적으로 빌드 시 발생하는 자동화된 단계입니다. + +코드 경량화로 인해 코드를 사람이 읽기가 어려워지므로, 개발자 도구에는 코드에 공백을 다시 추가하는 방식으로 좀 더 읽기 쉽게 만들어주는 '코드 정리(prettification)' 기능이 있습니다. diff --git a/files/ko/glossary/mobile_first/index.md b/files/ko/glossary/mobile_first/index.md new file mode 100644 index 00000000000000..a77623e4c8dc5c --- /dev/null +++ b/files/ko/glossary/mobile_first/index.md @@ -0,0 +1,10 @@ +--- +title: 모바일 우선 (Mobile First) +slug: Glossary/Mobile_First +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +{{Glossary("progressive enhancement", "점진적인 향상")}}의 한 형태인 **모바일 우선 (Mobile first)** 은 데스크톱 화면 크기에 대한 디자인 및 개발보다, 모바일 화면 크기에 대한 디자인 및 개발에 우선순위를 두는 웹 개발 및 웹 디자인 접근 방식입니다. 모바일 우선 접근 방식을 사용하는 이유는 작은 화면에서 잘 작동하는 사용자 경험을 만드는 것부터 시작해, 화면 크기가 커짐에 따라 사용자 경험을 더욱 풍부하게 만들어 모든 화면 크기에서 사용자에게 좋은 사용자 경험을 제공하는 것입니다. 모바일 우선 접근 방식은 데스크톱 화면 크기에 맞게 먼저 디자인한 다음, 나중에 작은 화면 크기에 대한 일부 지원을 추가하는 기존 접근 방식과 반대됩니다. diff --git a/files/ko/glossary/namespace/index.md b/files/ko/glossary/namespace/index.md new file mode 100644 index 00000000000000..825392a1dc40f7 --- /dev/null +++ b/files/ko/glossary/namespace/index.md @@ -0,0 +1,22 @@ +--- +title: 네임스페이스 (Namespace) +slug: Glossary/Namespace +l10n: + sourceCommit: 7f7ff219a89982f689b5a6b3c8c0b029ce1b8178 +--- + +{{GlossarySidebar}} + +네임스페이스 (Namespace)는 프로그램에서 사용되는 이름의 논리적 그룹인 식별자의 컨텍스트입니다. 동일한 컨텍스트 및 범위 내에서, 식별자는 엔터티를 고유하게 식별해야 합니다. + +운영체제에서, 디렉터리는 네임스페이스입니다. 디렉토리 내 각 파일이나 하위 디렉토리는 고유한 이름입니다. 동일한 이름을 하위 디렉터리 전체에 걸쳐서 여러 번 사용할 수 있습니다. + +HTML, CSS 와 XML 기반 언어에서, 네임스페이스는 요소(또는 속성)가 명시적으로, 혹은 암시적으로 속한 언어입니다. + +## 같이 보기 + +- [네임스페이스 집중 강의](/ko/docs/Web/SVG/Namespaces_Crash_Course) +- [CSS 네임스페이스](/ko/docs/Web/CSS/CSS_namespaces) 모듈 +- CSS {{CSSXref("@namespace")}} +- [`Document.createElementNS()`](/ko/docs/Web/API/Document/createElementNS) 메소드 +- 위키백과의 [네임스페이스](https://en.wikipedia.org/wiki/Namespace) diff --git a/files/ko/glossary/native/index.md b/files/ko/glossary/native/index.md new file mode 100644 index 00000000000000..8c0c0e2893974f --- /dev/null +++ b/files/ko/glossary/native/index.md @@ -0,0 +1,18 @@ +--- +title: 네이티브 (Native) +slug: Glossary/Native +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +네이티브(native) 애플리케이션은 대상 아키턱처를 구성하는 하드웨어/소프트웨어 환경에서 실행되도록 컴파일 되었습니다. + +기본 Android 애플리케이션의 예제로는 Android 도구 체인을 사용하여 Java로 작성된 모바일 애플리케이션이 있습니다. + +반면, 브라우저 내에서 실행되는 웹 애플리케이션은 네이티브가 아닙니다. 네이티브 환경 자체가 아닌, 네이티브 환경 위에 있는 웹 브라우저에서 실행됩니다. + +## 같이 보기 + +- 위키백과의 [네이티브 (컴퓨팅)](<https://en.wikipedia.org/wiki/Native_(computing)>) diff --git a/files/ko/glossary/node/dom/index.md b/files/ko/glossary/node/dom/index.md new file mode 100644 index 00000000000000..95f6d4ba03162a --- /dev/null +++ b/files/ko/glossary/node/dom/index.md @@ -0,0 +1,15 @@ +--- +title: 노드 (DOM) +slug: Glossary/Node/DOM +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +{{Glossary("DOM")}} 맥락에서는, **노드(node)** 는 노드 트리의 단일 지점입니다. 노드가 되는 요소는 문서 자체, 요소, 텍스트, 주석 등입니다. + +## 같이 보기 + +- WHATWG 명세의 [노드 트리](https://dom.spec.whatwg.org/#concept-node) +- [노드](/ko/docs/Web/API/Node) 객체 diff --git a/files/ko/glossary/node/index.md b/files/ko/glossary/node/index.md new file mode 100644 index 00000000000000..81ad16b3d3f853 --- /dev/null +++ b/files/ko/glossary/node/index.md @@ -0,0 +1,14 @@ +--- +title: 노드 (Node) +slug: Glossary/Node +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**노드(node)** 라는 용어는 상황에 따라 여러 가지 의미를 가질 수 있습니다. 다음을 참조할 수 있습니다. + +{{GlossaryDisambiguation}} + +이 단어의 또 다른 용도는 {{Glossary("Node.js")}}에 대해 이야기할 때입니다. diff --git a/files/ko/glossary/node/networking/index.md b/files/ko/glossary/node/networking/index.md new file mode 100644 index 00000000000000..2cc0efb14783fa --- /dev/null +++ b/files/ko/glossary/node/networking/index.md @@ -0,0 +1,14 @@ +--- +title: 노드 (networking) +slug: Glossary/Node/networking +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +네트워크에서, **노드** 는 네트워크의 연결 지점입니다. 물리적 네트워크에서 노드는 일반적으로 컴퓨터나 라우터와 같은 장치입니다. + +## 같이 보기 + +- 위키백과의 [노드](<https://en.wikipedia.org/wiki/Node_(networking)>) diff --git a/files/ko/glossary/non-normative/index.md b/files/ko/glossary/non-normative/index.md new file mode 100644 index 00000000000000..2d24b040002682 --- /dev/null +++ b/files/ko/glossary/non-normative/index.md @@ -0,0 +1,14 @@ +--- +title: 비표준 (Non-normative) +slug: Glossary/Non-normative +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +소프트웨어 {{Glossary("specification", "명세")}}는 종종 독자가 명세서를 더 잘 이해하도록 도와주거나, 예제와 모범 사례를 보여주기 위해 제공되는 **비표준(non-normative)** 또는 '정보성'으로 표시된 정보가 포함되는 경우가 많습니다. 명세서의 비표준 부분은 지침으로 제공되며, 공식 명세서의 일부로 간주되지 않습니다. 명세서의 공식 부분을 포함하는 섹션은 종종 {{Glossary("normative", "표준")}}으로 표시됩니다. + +## 같이 보기 + +- WHATWG 위키의 [표준 콘텐츠 및 정보성 콘텐츠](https://wiki.whatwg.org/wiki/Specs/howto#Content)에 대한 설명 diff --git a/files/ko/glossary/openssl/index.md b/files/ko/glossary/openssl/index.md new file mode 100644 index 00000000000000..6a99e65d400b7e --- /dev/null +++ b/files/ko/glossary/openssl/index.md @@ -0,0 +1,15 @@ +--- +title: OpenSSL +slug: Glossary/OpenSSL +l10n: + sourceCommit: 83f30ecaaeb6227dc0d4551f71eb8be1cacb8e94 +--- + +{{GlossarySidebar}} + +OpenSSL은 {{glossary("TLS")}} 와 {{glossary("SSL")}}의 오픈소스 구현체입니다. + +## 같이 보기 + +- 위키백과의 [OpenSSL](https://en.wikipedia.org/wiki/OpenSSL) +- [공식 웹사이트](https://www.openssl.org/) diff --git a/files/ko/glossary/packet/index.md b/files/ko/glossary/packet/index.md new file mode 100644 index 00000000000000..0eeaa05609002c --- /dev/null +++ b/files/ko/glossary/packet/index.md @@ -0,0 +1,42 @@ +--- +title: 패킷 (Packet) +slug: Glossary/Packet +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +패킷 또는 네트워크 패킷은 네트워크를 통해 전송되는 형식화된 데이터 덩어리입니다. 네트워크 패킷의 주요 컴포넌트는 사용자 데이터와 제어 정보입니다. 사용자 데이터는 '페이로드(payload)'로 알려져 있습니다. 제어정보는 페이로드를 전달하기 위한 정보입니다. 소스와 목적지에 대한 네트워크 주소, 순서 정보, 오류 감지 코드로 구성되며 일반적으로 패킷 헤더와 푸터에서 발견됩니다. + +## 패킷에 포함된 내용 + +### 홉 제한 + +홉은 패킷이 한 네트워크에서 다음 네트워크로 전달될 때 발생합니다. 패킷이 통과할 때마다 1씩 감소하는 필드입니다. 홉 제한이 0에 도달하면 전송 작업이 실패하고 패킷이 삭제됩니다. + +시간이 지남에 따라 패킷 수로 인해 폐쇄 회로 내에서 횡단이 발생할 수 있고, 순환하는 패킷 수가 증가하여 궁극적으로 네트워킹 실패로 이어질 수 있습니다. + +### 오류 감지 및 수정 + +오류 감지 및 수정은 데이터가 수신기로 전송될 때 발생하는 오류를 감지하고 수정하는 데 사용되는 코드입니다. 오류 수정에는 역방향 오류 수정과 순방향 오류 수정의 두 가지 유형이 있습니다. 역뱡향 오류 수정은 수신자가 발신자에게 전체 데이터 단위를 재전송하도록 요청하는 경우입니다. 순방향 오류 수정은 수신자가 자동으로 오류를 수정하는 오류 수정 코드를 사용하는 것입니다. + +송신기에서는, 패킷이 전송되기 전에 계산이 수행됩니다. 대상에서 수신되면 체크섬이 다시 계산되어 패킷의 체크섬과 비교됩니다. + +### 우선순위 + +이 필드는 어떤 패킷이 다른 패킷보다 더 높은 우선순위를 가져야 하는지를 나타냅니다. 높은 우선순위 대기열은 네트워크가 혼잡할 때 낮은 우선순위 대기열보다 더 빨리 비워지게 됩니다. + +### 주소 + +네트워크 패킷을 라우팅할 때 송신 호스트의 소스 주소와 수신 호스트의 대상 주소라는 두 개의 네트워크 주소가 필요합니다. + +### 사용자 데이터 - 페이로드 + +페이로드는 애플리케이션을 대신하여 전달되는 데이터입니다. 일반적으로 네트워크 프로토콜과 때로는 경로의 장비에 의해 설정된 최대 길이까지 가변 길이입니다. + +## 사용된 참고자료 + +- [네트워크 패킷](https://en.wikipedia.org/wiki/Network_packet) +- [홉 (네트워크)](<https://en.wikipedia.org/wiki/Hop_(networking)>) +- [오류 감지 및 수정 작동 방식](https://www.techradar.com/news/computing/how-error-detection-and-correction-works-1080736) diff --git a/files/ko/glossary/page_load_time/index.md b/files/ko/glossary/page_load_time/index.md new file mode 100644 index 00000000000000..020d3deb219733 --- /dev/null +++ b/files/ko/glossary/page_load_time/index.md @@ -0,0 +1,24 @@ +--- +title: 페이지 로드 시간 (Page load time) +slug: Glossary/Page_load_time +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**페이지 로드 시간(Page load time)** 은 페이지를 로드하는 데 걸리는 시간으로, [탐색 시작](/ko/docs/Web/API/PerformanceTiming/navigationStart)부터 [로드 이벤트 시작](/en-US/docs/Web/API/PerformanceTiming/loadEventStart)까지 측정됩니다. + +```js +let time = performance.timing; + +let pageloadtime = time.loadEventStart - time.navigationStart; +``` + +페이지 로드 시간은 완벽한 웹 성능 지표처럼 들리지만, 그렇지 않습니다. 로드 시간은 장치 기능, 네트워크 상태 및 서버와의 거리에 따라 사용자마다 크게 다를 수 있습니다. 페이지 로드 시간이 측정되는 개발 환경은 사용자의 현실을 반영하지 않는 최적의 환경일 가능성이 높습니다. 또한, 웹 성능은 로드 이벤트가 발생하는 시점에만 국한되지 않습니다. 또한 페이지 로드 시간은 [인지된 성능](/ko/docs/Glossary/Perceived_performance), 응답성, [jank](/ko/docs/Glossary/Jank) 및 지터와 관련이 있습니다. + +## 같이 보기 + +- [탐색 및 리소스 타이밍](/ko/docs/Web/Performance/Navigation_and_resource_timings) +- {{domxref("PerformanceNavigationTiming")}} +- {{domxref("PerformanceResourceTiming")}}, diff --git a/files/ko/glossary/parent_object/index.md b/files/ko/glossary/parent_object/index.md new file mode 100644 index 00000000000000..704dafe5223fb2 --- /dev/null +++ b/files/ko/glossary/parent_object/index.md @@ -0,0 +1,14 @@ +--- +title: 부모 객체 (Parent object) +slug: Glossary/Parent_object +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +주어진 {{glossary("property", "속성")}} 또는 {{glossary("method", "메서드")}}가 속한 {{glossary("object", "객체")}}입니다. + +## 같이 보기 + +- [JavaScript의 상속 및 프로토타입에 대한 토론](/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) diff --git a/files/ko/glossary/perceived_performance/index.md b/files/ko/glossary/perceived_performance/index.md new file mode 100644 index 00000000000000..7781ac4efdc8bf --- /dev/null +++ b/files/ko/glossary/perceived_performance/index.md @@ -0,0 +1,14 @@ +--- +title: 인지된 성능 (Perceived performance) +slug: Glossary/Perceived_performance +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**인지된 성능(Perceived performance)** 은 웹사이트가 사용자에게 얼마나 빠르고 반응성이 뛰어나며 안정적이라고 '느끼는'지를 나타내는 척도입니다. 사이트 성능에 대한 인식은 실제 로드 및 응답 시간보다 사용자 경험에 더 큰 영향을 미칠 수 있습니다. + +## 같이 보기 + +- [인지된 성능](/ko/docs/Learn/Performance/Perceived_performance) diff --git a/files/ko/glossary/prerender/index.md b/files/ko/glossary/prerender/index.md new file mode 100644 index 00000000000000..e44f232d0fd041 --- /dev/null +++ b/files/ko/glossary/prerender/index.md @@ -0,0 +1,24 @@ +--- +title: 프리 렌더 (Prerender) +slug: Glossary/Prerender +l10n: + sourceCommit: c7f7f5cde1506f1e324598f1792de13474d5d79d +--- + +{{GlossarySidebar}} + +프리 렌더링 (Prerendering)은 사용자가 가까운 미래에 탐색할 '가능성이 있는' 페이지를 추측에 따라 [프리페치](/ko/docs/Glossary/Prefetch)하고 렌더링하는 행위를 의미합니다(브라우저는 사실상 보이지 않는 별도의 탭에서 백그라운드로 페이지를 렌더링합니다). +그런 다음 사용자가 페이지를 탐색하기로 선택하면, 해당 콘텐츠가 거의 즉시 표시될 수 있습니다. + +예를 들어, 프리 렌더링은 '다음' 버튼으로 링크된 페이지 리소스, 사용자가 마우스를 올려놓은 링크 팝업, 주소 표시줄에 입력되는 URL의 가능한 페이지 대상을 가져오는 데 사용될 수 있습니다. + +```html +<link rel="prerender" href="https://example.com/content/to/prerender" /> +``` + +프리 렌더링을 사용하면 프리페치보다 표시 시간이 빨리지고 더 많은 리소스를 필요로 하는 대신 사용자 경험이 향상됩니다. + +## 같이 보기 + +- [즉각적인 페이지 탐색을 위해 Chrome에서 페이지를 미리 렌더링합니다](https://developer.chrome.com/blog/prerender-pages/#prerendering-from-the-address-bar) 주소 표시줄의 URL 프리 렌더링 및 제안된 추측 규칙 API 사용과 같은 프리 렌더링을 위한 Chrome 전용 기능에 대해 설명합니다. +- [prefetch](/ko/docs/Glossary/Prefetch) diff --git a/files/ko/glossary/presto/index.md b/files/ko/glossary/presto/index.md new file mode 100644 index 00000000000000..c01e5fe444b2a6 --- /dev/null +++ b/files/ko/glossary/presto/index.md @@ -0,0 +1,14 @@ +--- +title: 프레스토 (Presto) +slug: Glossary/Presto +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +프레스토(Presto)는 버전 15까지 {{Glossary("Opera browser", "오페라 브라우저")}}를 구동하는 데 사용된 독점 브라우저 레이아웃 엔진이었습니다. 이후 Opera 브라우저는 {{Glossary('Blink', '블링크')}} 레이아웃을 엔진을 사용하는 Chromium을 기반으로 합니다. + +## 같이 보기 + +- 위키백과의 [프레스토 레이아웃 엔진](https://en.wikipedia.org/wiki/Presto_%28layout_engine%29) diff --git a/files/ko/glossary/pseudo-class/index.md b/files/ko/glossary/pseudo-class/index.md new file mode 100644 index 00000000000000..ab22ac0e39d3b6 --- /dev/null +++ b/files/ko/glossary/pseudo-class/index.md @@ -0,0 +1,14 @@ +--- +title: 가상 클래스 (Pseudo-class) +slug: Glossary/Pseudo-class +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +CSS에서, **가상 클래스(pseudo-class)** 선택자는 문서 트리의 정보가 아닌 상태에 따라 요소를 대상으로 합니다. 예를 들어, `a`{{ cssxref(":visited") }} 선택자는 사용자가 이미 방문한 링크에만 스타일을 적용합니다. + +## 같이 보기 + +- [가상 클래스 문서](/ko/docs/Web/CSS/Pseudo-classes) diff --git a/files/ko/glossary/pseudo-element/index.md b/files/ko/glossary/pseudo-element/index.md new file mode 100644 index 00000000000000..271f3251030817 --- /dev/null +++ b/files/ko/glossary/pseudo-element/index.md @@ -0,0 +1,14 @@ +--- +title: 가상 요소 (Pseudo-element) +slug: Glossary/Pseudo-element +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +CSS에서, **가상 요소(pseudo-element)** 선택자는 선택할 특정 HTML 요소가 없는 시나리오에서 문서 콘텐츠의 일부에 스타일을 적용합니다. 예를 들어, 각 단락의 첫 글자를 자체 요소에 넣는 대신 `p`{{ Cssxref("::first-letter") }}를 사용하여 모든 단락의 스타일을 지정할 수 있습니다. + +## 같이 보기 + +- [가상 요소](/ko/docs/Web/CSS/Pseudo-elements) diff --git a/files/ko/glossary/python/index.md b/files/ko/glossary/python/index.md index 911870ea2b6ee4..8b0e8aa98bb8b7 100644 --- a/files/ko/glossary/python/index.md +++ b/files/ko/glossary/python/index.md @@ -1,5 +1,5 @@ --- -title: Python +title: 파이썬 (Python) slug: Glossary/Python l10n: sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 @@ -7,7 +7,7 @@ l10n: {{GlossarySidebar}} -**Python** 은 고도의 범용 프로그래밍 언어입니다. 그것은 절차적, 객체지향적, 그리고 일부 함수형 프로그래밍 구조를 지원하는 다변수적 접근방식을 사용합니다. +**파이썬 (Python)** 은 고도의 범용 프로그래밍 언어입니다. 그것은 절차적, 객체지향적, 그리고 일부 함수형 프로그래밍 구조를 지원하는 다변수적 접근방식을 사용합니다. 1985년에서 1990년 사이에 귀도 반 로썸(Guido van Rossum)이 ABC라는 다른 언어의 후속으로 만들었으며, 현재는 웹 개발, 데스크톱 애플리케이션, 데이터 과학, DevOps, 자동화/생산성과 같은 다양한 영역에서 사용되고 있습니다. @@ -16,7 +16,7 @@ Python은 OSI가 승인한 오픈 소스 라이센스로 개발되어 상업적 ## 더 알아보기 - Wikipedia의 [Python](https://ko.wikipedia.org/wiki/%ED%8C%8C%EC%9D%B4%EC%8D%AC) -- [Official Python docs tutorials](https://docs.python.org/3/tutorial/index.html) -- [Tutorialspoint Python tutorial](http://www.tutorialspoint.com/python/index.htm) -- [AlphaCodingSkills Python Tutorial](https://alphacodingskills.com/python/python-tutorial.php) +- [Official Python 문서 자습서](https://docs.python.org/3/tutorial/index.html) +- [Tutorialspoint Python 자습서](http://www.tutorialspoint.com/python/index.htm) +- [AlphaCodingSkills Python 자습서](https://alphacodingskills.com/python/python-tutorial.php) - MDN의 [Django Web Framework (Python)](/ko/docs/Learn/Server-side/Django) diff --git a/files/ko/glossary/quality_values/index.md b/files/ko/glossary/quality_values/index.md new file mode 100644 index 00000000000000..c4231b477cc535 --- /dev/null +++ b/files/ko/glossary/quality_values/index.md @@ -0,0 +1,47 @@ +--- +title: 품질 값 (Quality values) +slug: Glossary/Quality_values +l10n: + sourceCommit: 5090082ff453369e1b9c44bf2bc975a00614114a +--- + +{{GlossarySidebar}} + +**품질 값(Quality values)** 또는 'q-values' 또는 'q-factors'는 쉼표로 구분된 목록에서 값의 우선순위 순서를 설명하는 데 사용됩니다. 일부 [HTTP 헤더](/ko/docs/Web/HTTP/Headers) 및 HTML에서 허용되는 특수 구문입니다. + +값의 중요도는 접미사 `';q='`로 표시되며 바로 뒤에 `0`에서 `1`사이의 값이 포함됩니다. 최대 3자리의 소수점 숫자가 가장 높은 값이 제일 높은 우선순위를 나타냅니다. 존재하지 않는 경우, 기본값은 `1`입니다. + +## 예제 + +아래 문법을 참고해주세요. + +```http +text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 +``` + +우선순위를 나타냅니다. + +| 값 | 우선순위 | +| -------------------------------------- | -------- | +| `text/html` 및 `application/xhtml+xml` | `1.0` | +| `application/xml` | `0.9` | +| `*/*` | `0.8` | + +처음 두 값에 대해 정의된 우선순위가 없는 경우, 목록의 순서는 관계가 없습니다. 그럼에도 불구하고, 동일한 품질을 사용하면 보다 구체적인 값이 덜 구체적인 값보다 우선순위가 높습니다. + +```http +text/html;q=0.8,text/*;q=0.8,*/*;q=0.8 +``` + +| Value | Priority | +| ----------- | ----------------------------- | +| `text/html` | `0.8` (but totally specified) | +| `text/*` | `0.8` (partially specified) | +| `*/*` | `0.8` (not specified) | + +{{HTTPHeader("Accept")}}과 같은 일부 구문은 `text/html;level=1`과 같이 추가 지정자를 두는 것을 허용합니다. 사용은 매우 드물지만, 값의 특이성을 증가시킵니다. + +## 추가 정보 + +- [HTTP 헤더](/ko/docs/Web/HTTP/Headers) 구문에 q-values를 사용하는 경우가 있습니다(예, {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Language")}}, {{HTTPHeader("TE")}}, {{HTTPHeader("Want-Digest")}}). +- [헤더 필드 정의](https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html) diff --git a/files/ko/glossary/rail/index.md b/files/ko/glossary/rail/index.md new file mode 100644 index 00000000000000..49700f9ae20bb0 --- /dev/null +++ b/files/ko/glossary/rail/index.md @@ -0,0 +1,23 @@ +--- +title: RAIL +slug: Glossary/RAIL +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**RAIL** 은 **Response, Animation, Idle, and Load** 의 축약어로, 2015년 Google Chrome 팀이 창안한 브라우저 내 사용자 경험과 성능에 중점을 둔 성능 모델입니다. RAIL의 성능의 핵심은 '사용자에게 초점을 맞추세요. 최종 목표는 사이트가 특정 장치에서 빠르게 작동하도록 만드는 것이 아니라 사용자를 행복하게 만드는 것'입니다. 상호 작용에는 페이지 로드, 유휴, 입력에 대한 응답, 스크롤 및 애니메이션의 4단계가 있습니다. 약어순으로 주요 원칙은 아래와 같습니다. + +- **응답(Response)** + - : **100ms** 이내에 사용자 입력을 승인하여 즉시 사용자에게 응답합니다. +- **애니메이션(Animation)** + - : 애니메이션을 적용할 때, 각 프레임을 **16ms** 미만으로 렌더링하여 일관성을 유지하고 버벅거림을 방지하세요. +- **유휴(Idle)** + - : 기본 JavaScript 스레드를 사용하는 경우, **50ms** 미만의 시간 동안 청크로 작업하여 사용자 상호작용을 위한 스레드를 확보합니다. +- **로드(Load)** + - : **1초** 이내에 상호작용 가능한 콘텐츠를 제공합니다. + +## 같이 보기 + +- [권장 웹 성능 타이밍: 얼마나 길면 너무 길까요](/ko/docs/Web/Performance/How_long_is_too_long) diff --git a/files/ko/glossary/raster_image/index.md b/files/ko/glossary/raster_image/index.md new file mode 100644 index 00000000000000..08e5de85ef88f2 --- /dev/null +++ b/files/ko/glossary/raster_image/index.md @@ -0,0 +1,16 @@ +--- +title: 래스터 이미지 (Raster image) +slug: Glossary/Raster_image +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**래스터 이미지(raster image)** 는 픽셀 격자로 정의된 이미지 파일입니다. '비트맵'이라고도 합니다. 웹의 일반적인 래스터 이미지 형식은 [JPEG](/ko/docs/Glossary/JPEG), [PNG](/ko/docs/Glossary/PNG), [GIF](/ko/docs/Glossary/GIF) 및 [ICO](<https://en.wikipedia.org/wiki/ICO_(file_format)>)가 있습니다. + +래스터 이미지 파일에는 일반적으로 차원의 세트가 포함되지만, 파비콘 및 [CSS 커서 이미지](/ko/docs/Web/CSS/cursor)에 사용되는 ICO 및 CUR 형식에는 여러 크기가 포함될 수 있습니다. + +## 같이 보기 + +- {{glossary("Vector images", "벡터 이미지")}} diff --git a/files/ko/glossary/real_user_monitoring/index.md b/files/ko/glossary/real_user_monitoring/index.md new file mode 100644 index 00000000000000..3d82cd99037519 --- /dev/null +++ b/files/ko/glossary/real_user_monitoring/index.md @@ -0,0 +1,16 @@ +--- +title: 실제 사용자 모니터링 (Real User Monitoring, RUM) +slug: Glossary/Real_User_Monitoring +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**실제 사용자 모니터링 (Real User Monitoring, RUM)** 은 실제 사용자 컴퓨터의 페이지 성능을 측정합니다. 일반적으로, 타사 스크립트는 각 페이지에 스크립트를 삽입하여 모든 요청에 대한 페이지 로드 데이터를 측정하고 보고합니다. 이 기술은 애플리케이션의 실제 사용자 상호 작용을 모니터링합니다. RUM에서, 타사 스크립트는 실제 사용자의 브라우저에서 성능 지표를 수집합니다. RUM은 사용자의 지리적 분포와 해당 분포가 최종 사용자 경험에 미치는 영향을 포함하여, 애플리케이션이 사용되는 방식을 식별하는 데 도움이 됩니다. + +## 같이 보기 + +- [실제 사용자 모니터링 vs 종합 모니터링](/ko/docs/Web/Performance/Rum-vs-Synthetic) +- [종합 모니터링](/ko/docs/Glossary/Synthetic_monitoring) +- [비콘(Beacon)](/ko/docs/Glossary/Beacon) diff --git a/files/ko/glossary/render_blocking/index.md b/files/ko/glossary/render_blocking/index.md new file mode 100644 index 00000000000000..4b07d710a693c0 --- /dev/null +++ b/files/ko/glossary/render_blocking/index.md @@ -0,0 +1,18 @@ +--- +title: 렌더링 차단 (Render-blocking) +slug: Glossary/Render_blocking +l10n: + sourceCommit: 245307fe1bbb5a62c7e895fae62e0152f200b37b +--- + +{{GlossarySidebar}} + +**렌더링 차단 (Render-blocking)** 은 사용자 인터페이스 렌더링을 차단할 때 웹 사이트를 로드하는 프로세스의 모든 부분을 나타냅니다. 렌더링 차단은 사용자가 사이트와 상호 작용(예, 콘텐츠 보기 또는 컨트롤과 상호 작용)할 수 있을 때까지의 시간을 늘리기 때문에 웹 성능에 좋지 않습니다. + +렌더링 차단의 가장 일반적인 원인은 처음에 로드된 CSS 또는 JavaScript 파일입니다. + +## 같이 보기 + +- [CSS 성능 최적화](/ko/docs/Learn/Performance/CSS) +- [JavaScript 성능 최적화](/ko/docs/Learn/Performance/JavaScript) +- Speckyboy의 [렌더링 차단 리소스란 무엇이며, 렌더링 차단 문제를 해결하는 방법](https://speckyboy.com/render-blocking/) Speckyboy (2018) diff --git a/files/ko/glossary/rendering_engine/index.md b/files/ko/glossary/rendering_engine/index.md new file mode 100644 index 00000000000000..72eb09fbfe0132 --- /dev/null +++ b/files/ko/glossary/rendering_engine/index.md @@ -0,0 +1,15 @@ +--- +title: 렌더링 엔진 (Rendering engine) +slug: Glossary/Rendering_engine +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**렌더링 엔진(rendering engine)** 은 화면에 텍스트와 이미지를 그리는 소프트웨어입니다. 엔진은 문서 (종종 {{glossary("HTML")}})에서 구조화된 텍스트를, 그리고 주어진 선언에 따라 적절한 형식 (종종 {{glossary("CSS")}}에 제공됨)을 지정합니다. 레이아웃 엔진의 예로는 {{glossary("Blink")}}, {{glossary("Gecko")}}, EdgeHTML, {{glossary("WebKit")}} 가 있습니다. + +## 같이 보기 + +- 위키백과의 [웹 브라우저 엔진](https://en.wikipedia.org/wiki/Web_browser_engine) +- [Venkatraman.R - Behind Browsers (Part 1, Basics)](https://medium.com/@ramsunvtech/behind-browser-basics-part-1-b733e9f3c0e6) diff --git a/files/ko/glossary/repaint/index.md b/files/ko/glossary/repaint/index.md new file mode 100644 index 00000000000000..7fb55726bcaaf2 --- /dev/null +++ b/files/ko/glossary/repaint/index.md @@ -0,0 +1,15 @@ +--- +title: 리페인트 (Repaint) +slug: Glossary/Repaint +l10n: + sourceCommit: 245307fe1bbb5a62c7e895fae62e0152f200b37b +--- + +{{GlossarySidebar}} + +**리페인트(Repaint)** 는 대화형 사이트의 업데이트와 같이 UI 변경으로 인한 시각적 업데이트를 표시하기 위해 {{glossary("browser", "브라우저")}}가 웹 페이지를 다시 그릴 때 발생합니다. 리페인트는 일반적으로 브라우저가 웹 페이지의 특정 부분의 위치와 기하학적 구조를 다시 계산하는 리플로우 후에 발생합니다. + +## 같이 보기 + +- [리플로우](/ko/docs/Glossary/Reflow) +- dev.to의 [브라우저의 리플로우 및 리페인트 이해하기](https://dev.to/gopal1996/understanding-reflow-and-repaint-in-the-browser-1jbg) (2020) diff --git a/files/ko/glossary/replay_attack/index.md b/files/ko/glossary/replay_attack/index.md new file mode 100644 index 00000000000000..b7a23f828e23ae --- /dev/null +++ b/files/ko/glossary/replay_attack/index.md @@ -0,0 +1,16 @@ +--- +title: 재전송 공격 (Replay attack) +slug: Glossary/Replay_attack +l10n: + sourceCommit: 0c163056cfe83fba519b757f15d2e20f83eddaff +--- + +{{GlossarySidebar}} + +웹 보안에서, '재전송 공격 (Replay attack)'은 공격자가 이전에 전송된 메시지를 가로채서 나중에 다시 전송하여 원래의 메시지와 동일한 자격 증명을 얻을 때 발생하며, 잠재적으로 다른 페이로드나 명령이 포함되어 있는 메시지를 다시 보내 공격하는 것을 의미합니다. + +수신자가 전송의 신뢰성을 확인하는 데 사용 가능한 고유하고 일회성의 식별자를 각 메시지에 포함시키고 있으면 재생 공격을 방지할 수 있습니다. 이 식별자는 세션 토큰 또는 '한 번만 사용되는 숫자(number used only once, nonce)' 형식을 가질 수 있습니다. + +## 같이 보기 + +- 위키백과의 [Replay attack](https://en.wikipedia.org/wiki/Replay_attack) diff --git a/files/ko/glossary/reporting_directive/index.md b/files/ko/glossary/reporting_directive/index.md new file mode 100644 index 00000000000000..35cb8b5a9f29f5 --- /dev/null +++ b/files/ko/glossary/reporting_directive/index.md @@ -0,0 +1,28 @@ +--- +title: 보고 지시어 (Reporting directive) +slug: Glossary/Reporting_directive +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**{{Glossary("CSP")}} 보고 지시어(reporting directives)** 는 {{HTTPHeader("Content-Security-Policy")}} 헤더에 사용되며 CSP 위반 보고 프로세스를 제어합니다. + +전체 목록은 [보고 지시어(Reporting directives)](/ko/docs/Web/HTTP/Headers/Content-Security-Policy#reporting_directives)를 참조합니다. + +## 같이 보기 + +- [용어 사전](/ko/docs/Glossary) + + - {{Glossary("CSP")}} + - {{Glossary("Fetch directive")}} + - {{Glossary("Document directive")}} + - {{Glossary("Navigation directive")}} + +- 참고서 + + - <https://www.w3.org/TR/CSP/#directives-reporting> + - {{HTTPHeader("Content-Security-Policy/upgrade-insecure-requests", "upgrade-insecure-requests")}} + - {{HTTPHeader("Content-Security-Policy/block-all-mixed-content", "block-all-mixed-content")}} + - {{HTTPHeader("Content-Security-Policy")}} diff --git a/files/ko/glossary/representation_header/index.md b/files/ko/glossary/representation_header/index.md new file mode 100644 index 00000000000000..e2376476729c7a --- /dev/null +++ b/files/ko/glossary/representation_header/index.md @@ -0,0 +1,28 @@ +--- +title: 표현 헤더 (Representation header) +slug: Glossary/Representation_header +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**표현 헤더 (representation header)** 는 HTTP 메시지 본문으로 전송된 리소스의 특정 '표현'을 설명하는 {{glossary("HTTP_header", "HTTP 헤더")}}입니다. + +표현은 특정 리소스의 다양한 형태입니다. +예를 들어, 동일한 데이터가 XML 또는 JSON과 같은 특정 미디어 타입으로 형식화되거나, 작성된 언어 또는 지리적 지역으로 지역화되거나, 전송을 위해 압축되거나 인코딩될 수 있습니다. +기본 리소스는 각 경우에 동일하지만, 표현은 다릅니다. + +클라이언트는 [콘텐츠 협상(content negotiation)](/ko/docs/Web/HTTP/Content_negotiation) (`Accept-*` 헤더 사용) 중에 전송되기를 선호하는 형식을 지정하고, 표현 헤더는 실제로 수신한 '선택된 표현'의 형식을 클라이언트에게 알려줍니다. + +표현 헤더는 HTTP 요청과 응답 메시지 모두에 존재할 수 있습니다. `HEAD` 요청에 대한 응답으로 전송되면, 리소스가 실제로 요청된 경우 '선택될' 본문 컨텐츠를 설명합니다. + +표현 헤더는 {{HTTPHeader("Content-Type")}}, {{HTTPHeader("Content-Encoding")}}, {{HTTPHeader("Content-Language")}} 및 {{HTTPHeader("Content-Location")}}를 포함합니다. + +## 같이 보기 + +- [RFC 9110, section 3.2: Representations](https://httpwg.org/specs/rfc9110.html#representations) +- [모든 HTTP 헤더의 목록](/ko/docs/Web/HTTP/Headers) +- {{Glossary("Payload header")}} +- {{glossary("Entity header")}} +- {{HTTPHeader("Digest")}}/ {{HTTPHeader("Want-Digest")}} diff --git a/files/ko/glossary/rng/index.md b/files/ko/glossary/rng/index.md new file mode 100644 index 00000000000000..538a4ef9e5feec --- /dev/null +++ b/files/ko/glossary/rng/index.md @@ -0,0 +1,25 @@ +--- +title: 난수 생성기 (Random Number Generator) +slug: Glossary/RNG +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**의사 난수 생성기 (pseudorandom number generator, PRNG)** 는 복잡하고 예측 불가능해 보이는 패턴으로 숫자를 출력하는 알고리즘입니다. 진정한 난수(예를 들어, 방사선 소스)는 전혀 예측할 수 없지만, 모든 알고리즘은 예측 가능하며 PRNG는 동일한 시작 매개변수 또는 'seed'를 전달하면 동일한 숫자를 반환합니다. + +PRNG는 게임과 같은 다양한 애플리케이션에 사용될 수 있습니다. + +암호학적으로 안전한 PRNG는 암호화에 사용하기에 적합한 특정 추가 속성을 갖춘 PRNG입니다. 여기에는 아래가 포함됩니다. + +- 공격자가 (시드에 대한 지식 없이) 출력을 예측하는 것은 계산을 고려했을 때 불가능합니다. +- 공격자가 현재 상태를 알아낼 수 있다면, 공격자가 이전에 내보낸 숫자를 알아낼 수 있어서는 안 됩니다. + +대부분의 PRNG는 암호학적으로 안전하지 않습니다. + +## 같이 보기 + +- 위키백과의 [의사 난수 생성기](https://en.wikipedia.org/wiki/Pseudorandom_number_generator) +- 암호화된 보안 PRNG가 아닌 내장된 JavaScript PRNG 함수인 {{jsxref("Math.random()")}}. +- 암호화된 보안 숫자를 제공하기 위한 함수인 {{domxref("Crypto.getRandomValues()")}} diff --git a/files/ko/glossary/robots.txt/index.md b/files/ko/glossary/robots.txt/index.md new file mode 100644 index 00000000000000..e6158f44470e2e --- /dev/null +++ b/files/ko/glossary/robots.txt/index.md @@ -0,0 +1,19 @@ +--- +title: Robots.txt +slug: Glossary/Robots.txt +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +Robots.txt는 일반적으로 모든 웹사이트의 루트에 배치되는 파일입니다. {{Glossary("crawler", "크롤러")}}가 웹사이트에 대한 접근을 허용할지 금지할지 결정합니다. + +예를 들어, 사이트 관리자는 일반적으로 다른 검색 엔진에서 해당 파일이 색인화되는 것을 방지하기 위해 크롤러가 특정 폴더(및 그 안에 포함된 모든 파일)를 방문하거나 특정 파일을 크롤링하는 것을 금지할 수 있습니다. + +## 같이 보기 + +- 위키백과의 [Robots.txt](https://en.wikipedia.org/wiki/Robots.txt) +- <https://developers.google.com/search/reference/robots_txt> +- 표준 명세서: [RFC9309](https://www.rfc-editor.org/rfc/rfc9309.html) +- <https://www.robotstxt.org/> diff --git a/files/ko/glossary/round_trip_time/index.md b/files/ko/glossary/round_trip_time/index.md new file mode 100644 index 00000000000000..4ee4107ad529cd --- /dev/null +++ b/files/ko/glossary/round_trip_time/index.md @@ -0,0 +1,35 @@ +--- +title: 왕복 시간 (Round Trip Time, RTT) +slug: Glossary/Round_Trip_Time +l10n: + sourceCommit: 6b01400b286e8bdfa7060d56af84757dd4b8de48 +--- + +{{GlossarySidebar}} + +**왕복 시간 (Round Trip Time, RTT)** 은 데이터 패킷이 대상으로 전송되는 데 걸리는 시간과 해당 패킷에 대한 승인이 원본에서 다시 수신되는 데 걸리는 시간을 더한 것입니다. 네트워크와 서버 간의 RTT는 `ping` 명령을 사용하여 확인할 수 있습니다. + +```bash +ping example.com +``` + +그러면 아래와 같이 출력됩니다. + +```plain +PING example.com (216.58.194.174): 56 data bytes +64 bytes from 216.58.194.174: icmp_seq=0 ttl=55 time=25.050 ms +64 bytes from 216.58.194.174: icmp_seq=1 ttl=55 time=23.781 ms +64 bytes from 216.58.194.174: icmp_seq=2 ttl=55 time=24.287 ms +64 bytes from 216.58.194.174: icmp_seq=3 ttl=55 time=34.904 ms +64 bytes from 216.58.194.174: icmp_seq=4 ttl=55 time=26.119 ms +--- google.com ping statistics --- +5 packets transmitted, 5 packets received, 0.0% packet loss +round-trip min/avg/max/stddev = 23.781/26.828/34.904/4.114 ms +``` + +위의 예제에서, 평균 왕복 시간은 마지막 줄에 26.8ms로 표시됩니다. + +## 같이 보기 + +- [첫 번째 바이트까지의 시간 (Time to First Byte, TTFB)](/ko/docs/Glossary/Time_to_first_byte) +- [지연 시간(Latency)](/ko/docs/Glossary/Latency) diff --git a/files/ko/glossary/rsync/index.md b/files/ko/glossary/rsync/index.md new file mode 100644 index 00000000000000..5675fdaedfde48 --- /dev/null +++ b/files/ko/glossary/rsync/index.md @@ -0,0 +1,30 @@ +--- +title: Rsync +slug: Glossary/Rsync +l10n: + sourceCommit: 0c163056cfe83fba519b757f15d2e20f83eddaff +--- + +{{GlossarySidebar}} + +[Rsync](https://rsync.samba.org/)는 증분 파일 전송을 제공하는 오픈 소스 파일 동기화 도구입니다. 안전하지 않은 전송과 SSH와 같은 보안 전송을 통해 사용할 수 있습니다. 대부분의 Unix 기반 시스템 (예, macOS와 Linux)과 Windows에서 사용할 수 있습니다. rsync를 사용하는 GUI 기반 도구도 있습니다(예, [Acrosync](https://acrosync.com/mac.html)). + +기본 명령어는 아래와 같습니다. + +```bash +rsync [-options] SOURCE user@x.x.x.x:DESTINATION +``` + +- `-options`은 대시 뒤에 하나 이상의 문자가 오는 것입니다. 예를 들어, 자세한 오류 메시지의 경우 `-v`, 백업을 만드는 경우 `-b`입니다. [rsync man 페이지](https://linux.die.net/man/1/rsync) ("Options summary"를 검색하세요) 에서 전체 옵션 목록을 확인하세요. +- `SOURCE`는 복사하거나 동기화하려는 로컬 파일 또는 디렉터리의 경로입니다. +- `user@`는 파일을 복사하려는 원격 서버에 있는 사용자의 자격 증명입니다. +- `x.x.x.x`는 원격 서버의 IP 주소입니다. +- `DESTINATION`는 원격 서버에서 디렉터리나 파일을 복사하려는 위치의 경로입니다. + +아래와 같이 `-e` 옵션을 사용하여 SSH를 통해 연결할 수도 있습니다. + +```bash +rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE user@x.x.x.x:DESTINATION +``` + +rsync에 대해 [공식 웹사이트](https://rsync.samba.org/examples.html) 및 [위키백과 항목](https://en.wikipedia.org/wiki/Rsync#Examples) 등 인터넷에 수많은 예제가 있습니다. diff --git a/files/ko/glossary/rtl/index.md b/files/ko/glossary/rtl/index.md new file mode 100644 index 00000000000000..d079c9c9f591a0 --- /dev/null +++ b/files/ko/glossary/rtl/index.md @@ -0,0 +1,22 @@ +--- +title: RTL (Right to Left) +slug: Glossary/RTL +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**RTL** 은 텍스트가 오른쪽에서 왼쪽으로 쓰여지는 것을 나타내는 {{Glossary("locale")}} 속성입니다. + +예를 들어, `he` locale (히브리어의 경우)은 오른쪽에서 왼쪽으로 지정합니다. 아랍어 (`ar`)는 RTL로 작성된 또 다른 공용 언어입니다. + +RTL과 반대로, LTR (Left To Right)은 영어 (`en`, `en-US`, `en-GB`, 등), 스페인어 (`es`) 및 프랑스어 (`fr`)를 포함한 다른 언어에서 사용합니다. + +## 같이 보기 + +- [MDN 웹 문서 용어사전](/ko/docs/Glossary) + + - {{Glossary("Localization")}} + - {{Glossary("LTR", "LTR (Left to Right)")}} + - {{Glossary("RTL", "RTL (Right to Left)")}} diff --git a/files/ko/glossary/rtsp/index.md b/files/ko/glossary/rtsp/index.md new file mode 100644 index 00000000000000..28d9b3abe16488 --- /dev/null +++ b/files/ko/glossary/rtsp/index.md @@ -0,0 +1,18 @@ +--- +title: 실시간 스트리밍 프로토콜 (Real-time streaming protocol, RTSP) +slug: Glossary/RTSP +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +실시간 스트리밍 프로토콜 (Real-time streaming protocol, RTSP)은 {{glossary("server", "서버")}}와 {{glossary("client", "클라이언트")}} 사이에서 미디어 스트리밍이 발생하는 방식을 제어하는 네트워크 프로토콜입니다. 기본적으로, RTSP는 비디오를 스트리밍할 때 '일시 중지'/'재생'을 클릭하면 어떤 일이 발생하는지 설명하는 프로토콜입니다. 컴퓨터가 리모콘이고 스트리밍 서버가 텔레비전이라고 비유하면, RTSP는 리모콘 명령이 TV에 어떤 영향을 미치는지 설명합니다. + +## 같이 보기 + +- 위키백과의 [RTSP](https://en.wikipedia.org/wiki/Real_Time_Streaming_Protocol) +- [RFC 7826](https://datatracker.ietf.org/doc/html/rfc7826) (프로토콜의 작동 방식을 정확하게 표시한 문서 중 하나) +- [용어사전](/ko/docs/Glossary) + + - {{Glossary("RTSP")}} diff --git a/files/ko/glossary/ruby/index.md b/files/ko/glossary/ruby/index.md new file mode 100644 index 00000000000000..f2db6b91410c9f --- /dev/null +++ b/files/ko/glossary/ruby/index.md @@ -0,0 +1,18 @@ +--- +title: 루비 (Ruby) +slug: Glossary/Ruby +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**루비 (Ruby)** 는 오픈 소스 프로그래밍 언어입니다. {{glossary("world wide web","웹")}} 관련 맥락에서, Ruby는 웹사이트/앱을 생성하기 위해 'Ruby On Rails(ROR)' 프레임워크와 함께 서버 사이드에서 자주 사용됩니다. + +Ruby는 HTML 문서에서 동아시아 텍스트에 주석을 달아 발음 정보를 제공하는 방법이기도 합니다. {{HTMLElement("ruby")}} 요소를 참고하세요. + +## 같이 보기 + +- 위키백과의 [Ruby](https://en.wikipedia.org/wiki/Ruby_%28programming_language%29) +- [Ruby's 공식 웹사이트](https://www.ruby-lang.org) +- [Ruby On Rails' 공식 웹사이트](https://rubyonrails.org/) diff --git a/files/ko/glossary/same-origin_policy/index.md b/files/ko/glossary/same-origin_policy/index.md new file mode 100644 index 00000000000000..f689928d6924c3 --- /dev/null +++ b/files/ko/glossary/same-origin_policy/index.md @@ -0,0 +1,20 @@ +--- +title: 동일 출처 정책 (Same-origin policy) +slug: Glossary/Same-origin_policy +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**[동일 출처 정책 (Same-origin policy)](/ko/docs/Web/Security/Same-origin_policy)** 은 하나의 {{Glossary("origin", "출처")}}에서 로드된 문서나 스크립트가 다른 출처의 리소스와 상호작용할 수 있는 방법을 제한하는 중요한 보안 메커니즘입니다. + +잠재적으로 악의적인 문서를 격리하여, 가능한 공격 경로를 줄이는 데 도움이 됩니다. + +## 같이 보기 + +- [동일 출처 정책](/ko/docs/Web/Security/Same-origin_policy) +- [MDN 웹 문서 용어사전](/ko/docs/Glossary): + + - {{Glossary("CORS")}} + - {{Glossary("origin")}} diff --git a/files/ko/glossary/screen_reader/index.md b/files/ko/glossary/screen_reader/index.md new file mode 100644 index 00000000000000..ec67755e4163f5 --- /dev/null +++ b/files/ko/glossary/screen_reader/index.md @@ -0,0 +1,42 @@ +--- +title: 스크린 리더 (Screen reader) +slug: Glossary/Screen_reader +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +스크린 리더는 화면 디스플레이에 표시된 내용을 비시각적 방식(일반적으로 텍스트 음성 변환, 점자 또는 사운드 아이콘)으로 전달하려고 시도하는 소프트웨어 애플리케이션입니다. 스크린 리더는 시각 장애가 있거나 문맹이거나 학습 장애가 있는 사람들에게 필수적입니다. 일부 브라우저 확장 스크린 리더가 있지만, 대부분의 스크린 리더는 브라우저 뿐만 아니라 모든 사용자 애플리케이션에 대해 시스템 전체에서 작동합니다. + +웹 접근성 측면에서, 대부분의 사용자 에이전트는 접근성 객체 모델을 제공하고 스크린 리더는 다양한 운영 체제의 기능을 사용하고 후킹 기술을 통해 전용 접근성 API와 상호 작용합니다. + +## 보이스오버(VoiceOver) + +macOS에는 내장 스크린 리더인 VoiceOver가 함께 제공됩니다. VoiceOver에 접근하려면, System Preferences > Accessibility > VoiceOver로 이동하세요. fn+command + F5를 사용하여 VoiceOver를 켜거나 끌 수도 있습니다. VoiceOver는 소리내어 읽고 내용을 표시합니다. 소리내어 읽은 내용은 어두운 회색 상자에 표시됩니다. + +데스크톱/노트북 스크린 리더 사용자는 키보드나 기타 비포인팅 장치를 사용하여 웹사이트를 탐색합니다. 사용해보려면 가장 좋은 방법은 동일한 일을 해보세요. + +VoiceOver가 없는 키보드 탐색과 마찬가지로, 탭 키와 화살표 키를 사용해 대화형 요소를 탐색할 수 있습니다. + +- 다음 대화형 요소: Tab +- 이전 대화형 요소: Shift + Tab +- 같은 이름의 그룹의 다음 라디오 버튼: 오른쪽 또는 아래 화살표 +- 같은 이름의 그룹의 이전 라디오 버튼: 왼쪽 또는 위쪽 화살표 + +페이지 내용 탐색은 탭 키와 Control + Option 키와 함께 다른 키를 사용해 실행될 수 있습니다. + +- 다음 제목: Control + Option + H +- 다음 목록: Control + Option + X +- 다음 그래픽 요소: Control + Option + G +- 다음 테이블: Control + Option + T +- HTML 계층 순서 아래로: Control + Option + right arrow +- 이전 제목: Shift + Control + Option + H +- 이전 목록: Shift + Control + Option + X +- 이전 그래픽 요소: Shift + Control + Option + G +- 이전 테이블: Shift + Control + Option + T +- HTML 계층 순서 위로: Control + Option + left arrow + +## 같이 보기 + +- [ARIA](/ko/docs/Web/Accessibility/ARIA) diff --git a/files/ko/glossary/script-supporting_element/index.md b/files/ko/glossary/script-supporting_element/index.md new file mode 100644 index 00000000000000..6ea77067d6eafc --- /dev/null +++ b/files/ko/glossary/script-supporting_element/index.md @@ -0,0 +1,18 @@ +--- +title: 스크립트 지원 요소 (Script-supporting element) +slug: Glossary/Script-supporting_element +l10n: + sourceCommit: d267a8cb862c20277f81bbc223221b36b0c613e6 +--- + +{{GlossarySidebar}} + +{{Glossary("HTML")}} 문서에서, **스크립트 지원 요소 (script-supporting elements)** 는 페이지의 모양이나 레이아웃에 직접적으로 기여하지 않는 요소입니다. 대신 스크립트이거나 스크립트에서만 사용되는 정보를 포함합니다. + +이러한 요소는 중요할 수 있지만, 페이지의 스크립트가 명시적으로 그렇게 하도록 하지 않는 한 표시된 페이지에 영향을 주지 않습니다. + +스크립트 지원 요소는 {{HTMLElement("script")}} 및 {{HTMLElement("template")}} 두 가지 밖에 없습니다. + +## 같이 보기 + +[Script-supporting elements](/ko/docs/Web/HTML/Content_categories#script-supporting_elements) diff --git a/files/ko/glossary/scroll_container/index.md b/files/ko/glossary/scroll_container/index.md new file mode 100644 index 00000000000000..2377d833d91aa9 --- /dev/null +++ b/files/ko/glossary/scroll_container/index.md @@ -0,0 +1,18 @@ +--- +title: 스크롤 컨테이너 (Scroll container) +slug: Glossary/Scroll_container +l10n: + sourceCommit: dfad9eccce7c2f11c195003ec1cbd7b0fd9db577 +--- + +{{GlossarySidebar}} + +**스크롤 컨테이너(scroll container)** 는 스크롤 막대가 있는지 여부에 관계없이, 콘텐츠를 스크롤할 수 있는 요소 상자입니다. CSS {{cssxref("overflow")}} 속성이 `scroll`로 설정되거나 `overflow`가 `auto`로 설정되고 콘텐츠가 컨테이너를 넘어갈 때 사용자 에이전트는 요소 상자에 스크롤 막대를 추가해 스크롤 컨테이너로 만들어줍니다. + +요소 상자의 콘텐츠가 테두리 상자를 넘으면, 사용자는 스크롤 막대를 사용해 화면 요소에서 숨겨졌던 잘린 콘텐츠를 스크롤 할 수 있습니다. + +스크롤 컨테이너에는 스크롤포트와 스크롤 막대가 포함되어 있습니다. + +## 스크롤포트(Scrollport) + +스크롤포트는 스크롤 컨테이너의 보이는 부분이며 스크롤 컨테이너의 패딩 상자와 일치합니다. 스크롤 막대는 내용을 볼 수 있도록 스크롤포트 안과 밖으로 내용을 이동하는 데 사용됩니다. diff --git a/files/ko/glossary/search_engine/index.md b/files/ko/glossary/search_engine/index.md new file mode 100644 index 00000000000000..51a5a16c298498 --- /dev/null +++ b/files/ko/glossary/search_engine/index.md @@ -0,0 +1,24 @@ +--- +title: 검색 엔진 (Search engine) +slug: Glossary/Search_engine +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +검색 엔진은 {{Glossary("World Wide Web", "월드 와이드 웹")}}에서 정보를 수집하여 특정 정보를 찾는 사용자에게 제공하는 소프트웨어 시스템입니다. + +검색 엔진은 아래와 같은 프로세스를 수행합니다. + +- **웹 크롤링:** 사이트 내에서 그리고 한 사이트에서 다른 사이트로 웹페이지의 {{Glossary("Hyperlink", "하이퍼링크")}}를 탐색해 웹사이트를 검색합니다. 웹사이트 소유자는 `robots.txt`라는 파일에 '로봇 제외' 정보를 정의하여, 검색 엔진의 '웹 크롤러' 또는 '스파이더'가 사이트 영역에 접근하지 못하도록 제외할 수 있습니다. +- **인덱싱:** 키워드 및 기타 정보를 크롤링된 특정 웹페이지와 연결합니다. 이를 통해 사용자는 관련 페이지를 최대한 빨리 찾을 수 있습니다. +- **검색:** 검색 엔진에 대한 키워드 및 기타 명령으로 구성된 쿼리를 기반으로 관련 웹 페이지를 찾습니다. 검색 엔진은 쿼리와 일치하는 페이지의 URL 을 찾고 관련성을 기준으로 순위를 정합니다. 그런 다음 순위에 따라 결과를 사용자에게 제시합니다. + +가장 인기있는 검색엔진은 Google입니다. 다른 인기 검색 엔진으로는 Yahoo!, Bing, Baidu 및 AOL이 있습니다. + +## 같이 보기 + +- 위키백과의 [웹 검색 엔진](https://en.wikipedia.org/wiki/Web_search_engine) +- Webopedia의 [검색 엔진](https://www.webopedia.com/definitions/search-engine/) +- How Stuff Works의 [인터넷 검색 엔진은 어떻게 동작하나요](https://computer.howstuffworks.com/internet/basics/search-engine.htm) diff --git a/files/ko/glossary/second-level_domain/index.md b/files/ko/glossary/second-level_domain/index.md new file mode 100644 index 00000000000000..25f743538abdbc --- /dev/null +++ b/files/ko/glossary/second-level_domain/index.md @@ -0,0 +1,26 @@ +--- +title: 2단계 도메인 (Second-level Domain, SLD) +slug: Glossary/Second-level_Domain +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +2단계 도메인 (Second-level Domain, {{Glossary("SLD")}})은 최상위 도메인({{Glossary("TLD")}}) 바로 앞에 있는 도메인 이름의 일부입니다. + +예를 들어, `mozilla.org`에서 SLD는 `mozilla`이고 TLD는 `org`입니다. + +도메인 이름은 TLD 및 SLD로 제한되지 않습니다. 서버의 다양한 기능에 대한 추가 정보를 제공하거나 동일한 도메인 아래의 영역을 구분하기 위해 추가 하위 도메인을 만들 수 있습니다. 예를 들어, `www`는 도메인이 웹 서버를 가리킨다는 것을 나타내기 위해 일반적으로 사용되는 하위 도메인입니다. + +또 다른 예로 `developer.mozilla.org`에서, `developer` 하위 도메인은 하위 도메인에 Mozilla 웹사이트의 개발자 섹션이 포함되어 있음을 지정하는 데 사용됩니다. + +## 같이 보기 + +- 위키백과의 [SLD](https://en.wikipedia.org/wiki/Second-level_domain) +- [용어 사전](/ko/docs/Glossary) + + - {{Glossary("DNS")}} + - {{Glossary("Domain")}} + - {{Glossary("Domain name")}} + - {{Glossary("TLD")}} diff --git a/files/ko/glossary/secure_context/index.md b/files/ko/glossary/secure_context/index.md new file mode 100644 index 00000000000000..fab4c4e3391e67 --- /dev/null +++ b/files/ko/glossary/secure_context/index.md @@ -0,0 +1,12 @@ +--- +title: 보안 컨텍스트 (Secure Context) +slug: Glossary/Secure_Context +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**보안 컨텍스트(secure context)** 는 특정 최소 인증 및 기밀 표준이 충족되는 `Window` 또는 `Worker` 입니다. 많은 웹 API 및 기능은 보안 컨텍스트에서만 접근할 수 있으므로 악성 코드에 의한 오용 가능성이 줄어듭니다. + +자세한 정보는 [Web > Security > Secure Contexts](/ko/docs/Web/Security/Secure_Contexts)을 참조하세요. diff --git a/files/ko/glossary/serialization/index.md b/files/ko/glossary/serialization/index.md new file mode 100644 index 00000000000000..34ff7fd3fb55c0 --- /dev/null +++ b/files/ko/glossary/serialization/index.md @@ -0,0 +1,18 @@ +--- +title: 직렬화 (Serialization) +slug: Glossary/Serialization +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +객체나 데이터 구조를 네트워크나 저장소(예, 배열 버퍼 또는 파일 형식)를 통한 전송에 적합한 형식으로 변환하는 프로세스입니다. + +예를 들어, {{Glossary("JavaScript")}}에서는 {{Glossary("function", "함수")}} {{jsxref("JSON.stringify()")}}를 호출하는 것을 통해 객체를 {{Glossary("JSON")}} {{Glossary("string", "문자열")}}로 직렬화할 수 있습니다. + +{{Glossary("CSS")}} 값은 {{domxref("CSSStyleDeclaration.getPropertyValue()")}} 함수를 호출하여 직렬화됩니다. + +## 같이 보기 + +- 위키백과의 [직렬화](https://en.wikipedia.org/wiki/Serialization) diff --git a/files/ko/glossary/server_timing/index.md b/files/ko/glossary/server_timing/index.md new file mode 100644 index 00000000000000..ece27008ed4cdb --- /dev/null +++ b/files/ko/glossary/server_timing/index.md @@ -0,0 +1,15 @@ +--- +title: 서버 타이밍 (Server Timing) +slug: Glossary/Server_Timing +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +[서버 타이밍 (Server Timing) 명세서](https://www.w3.org/TR/server-timing/)는 서버가 요청-응답 주기의 성능 메트릭을 사용자 에이전트에 전달할 수 있도록 하고, JavaScript 인터페이스를 활용하여 애플리케이션이 이러한 메트릭을 수집, 처리 및 실행하여 애플리케이션 제공을 최적화할 수 있도록 합니다. + +## 같이 보기 + +- <https://www.w3.org/TR/server-timing/> +- [리소스 타이밍(Resource Timing)](https://www.w3.org/TR/resource-timing/) diff --git a/files/ko/glossary/session_hijacking/index.md b/files/ko/glossary/session_hijacking/index.md new file mode 100644 index 00000000000000..9c9ec5f111593b --- /dev/null +++ b/files/ko/glossary/session_hijacking/index.md @@ -0,0 +1,44 @@ +--- +title: 세션 하이재킹 (Session Hijacking) +slug: Glossary/Session_Hijacking +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**세션 하이재킹 (Session Hijacking)** 은 공격자가 두 컴퓨터 간의 유효한 세션을 장악할 때 발생합니다. 공격자는 시스템에 침입하여 데이터를 스누핑하기 위해 유효한 세션 ID를 훔칩니다. + +대부분의 인증은 {{glossary("TCP")}} 세션이 시작될 때만 발생합니다. TCP 세션 하이재킹에서는, 공격자가 세션 중간에 두 시스템 간의 TCP 세션을 장악하여 접근 권한을 획득합니다. + +![공격자는 웹 서버와 상호 작용하는 사용자로부터 합법적인 세션 ID를 스니핑하고 접근한 다음, 해당 세션 식별자를 사용하여 일반 사용자와 서버 간의 세션을 스푸핑하여, 사용자의 세션을 익스플로잇(취약점 공격)을 실행하고 서버에 직접 접근합니다](session_hijacking_3.jpg) + +### 세션 하이재킹이 발생하는 이유는 아래와 같습니다 + +- 유효하지 않은 세션 ID에 대한 계정 잠금이 없습니다. +- 취약한 세션 ID 생성 알고리즘 +- 안전하지 않은 취급 +- 무기한 세션 만료 시간 +- 짦은 세션 ID +- 일반 텍스트로 전송 + +### 세션 하이재킹 과정 + +1. **스니프(Sniff):** 중간자(man-in-the-middle, MITM) 공격을 수행합니다. 공격받는 컴퓨터와 서버 사이의 자기 자신을 위치시킵니다. +2. **모니터링(Monitor):** 서버와 사용자 사이에 흐르는 패킷을 관찰합니다. +3. **차단(Break):** 공격받는 컴퓨터의 연결을 종료시킵니다. +4. **제어(Take control):** 세션을 제어합니다. +5. **주입(Inject):** 공격받는 컴퓨터의 세션 ID를 사용하여 서버에 새로운 패킷을 주입합니다. + +### 세션 하이재킹으로부터의 보호 + +- 보안 쉘(SSH)을 사용하여 보안 통신 채널을 생성합니다. +- HTTPS 연결을 통해 인증 쿠키를 전달합니다. +- 사용자가 세션을 종료할 수 있도록 로그아웃 기능을 구현합니다. +- 로그인 성공 후 세션 ID를 생성합니다. +- 사용자와 웹 서버 간에 암호화된 데이터를 전달합니다. +- 문자열이나 길이가 긴 난수를 세션 키로 사용합니다. + +## 같이 보기 + +- 위키백과의 [세션 하이재킹](https://en.wikipedia.org/wiki/Session_hijacking) diff --git a/files/ko/glossary/simple_header/index.md b/files/ko/glossary/simple_header/index.md new file mode 100644 index 00000000000000..b57945506bf9e6 --- /dev/null +++ b/files/ko/glossary/simple_header/index.md @@ -0,0 +1,10 @@ +--- +title: Simple header +slug: Glossary/Simple_header +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +{{Glossary("CORS-safelisted request header")}}의 과거 표현입니다. diff --git a/files/ko/glossary/simple_response_header/index.md b/files/ko/glossary/simple_response_header/index.md new file mode 100644 index 00000000000000..5176115590fe9d --- /dev/null +++ b/files/ko/glossary/simple_response_header/index.md @@ -0,0 +1,10 @@ +--- +title: Simple response header +slug: Glossary/Simple_response_header +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +{{Glossary("CORS-safelisted response header")}}에 포함된 이전에 사용된 용어입니다. diff --git a/files/ko/glossary/site/index.md b/files/ko/glossary/site/index.md new file mode 100644 index 00000000000000..ca71b7f610c130 --- /dev/null +++ b/files/ko/glossary/site/index.md @@ -0,0 +1,46 @@ +--- +title: 사이트 (Site) +slug: Glossary/Site +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +비공식적으로, '사이트'는 웹페이지 모음이고, 동일한 도메인에서 제공되며 단일 조직에서 유지관리하는 웹사이트입니다. + +브라우저는 때때로 서로 다른 사이트를 정확하게 구별해야 합니다. 예를 들어, 브라우저는 [`SameSite`](/ko/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value) 쿠키를 쿠키를 설정한 동일한 사이트로만 보내야 합니다. + +보다 정확한 정의를 위해 사이트는 도메인 이름의 '등록 가능한 도메인' 부분에 의해 결정됩니다. 등록 가능한 도메인은 [공개 접미사 목록](https://publicsuffix.org/list/)의 항목과 바로 앞의 도메인 네임 부분으로 구성됩니다. 예를 들면, `theguardian.co.uk`, `sussex.ac.uk` 및 `bookshop.org`가 모두 등록 가능한 도메인임을 의미합니다. + +이 정의에 따라, `support.mozilla.org` 및 `developer.mozilla.org`는 동일한 사이트의 일부입니다. `mozilla.org`는 등록 가능한 도메인이기 때문입니다. + +일부 상황에서는, 사이트를 차별화할 때 이 체계가 고려되기도 합니다. 이렇게 하면 `http://vpl.ca`와 `https://vpl.ca`가 다른 사이트가 됩니다. 이러한 스키마를 포함하면 안전하지 않은(HTTP) 사이트가 보안(HTTPS) 사이트와 동일한 사이트로 처리되는 것을 방지할 수 있습니다. 이러한 방식을 고려한 정의를 'schemeful same-site'라고도 합니다. 이와 같이, 더 엄격한 정의는 [`SameSite`](/ko/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value) 쿠키 처리 규칙에 적용됩니다. + +## 예제 + +`mozilla.org`의 등록 가능한 도메인이 동일하므로 다음 사이트는 동일합니다. + +- `https://developer.mozilla.org/en-US/docs/` +- `https://support.mozilla.org/en-US/` + +포트가 관련이 없기 때문에, 다음은 동일한 사이트입니다. + +- `https://example.com:8080` +- `https://example.com` + +두 URL의 등록 가능한 도메인이 다르기 때문에 동일한 사이트가 아닙니다. + +- `https://developer.mozilla.org/en-US/docs/` +- `https://example.com` + +다음은 스키마가 고려되는 경우 동일한 사이트이거나 다른 사이트입니다. + +- `http://example.com` +- `https://example.com` + +## 같이 보기 + +- [URL이란 무엇인가요](/ko/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL) +- {{Glossary("Origin")}} +- [동일 출처 정책](/ko/docs/Web/Security/Same-origin_policy) diff --git a/files/ko/glossary/site_map/index.md b/files/ko/glossary/site_map/index.md new file mode 100644 index 00000000000000..fbb95bab73170a --- /dev/null +++ b/files/ko/glossary/site_map/index.md @@ -0,0 +1,12 @@ +--- +title: 사이트 맵 (Site map) +slug: Glossary/Site_map +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**사이트 맵(site map 또는 sitemap)** 은 웹사이트 페이지 목록입니다. + +사이트 페이지의 구조화된 목록은 검색 엔진과 같은 웹 크롤러가 따라가야 할 링크를 제공하여 [검색 엔진 최적화](/ko/docs/Glossary/SEO)에 도움이 됩니다. 또한 사이트 맵은 사이트 콘텐츠의 개요를 한 눈에 제공하여 사용자의 사이트 탐색을 도와줍니다. diff --git a/files/ko/glossary/sloppy_mode/index.md b/files/ko/glossary/sloppy_mode/index.md new file mode 100644 index 00000000000000..74f12610a71272 --- /dev/null +++ b/files/ko/glossary/sloppy_mode/index.md @@ -0,0 +1,16 @@ +--- +title: 느슨한 모드 (Sloppy mode) +slug: Glossary/Sloppy_mode +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +{{Glossary("ECMAScript")}} 5 이상에서는 스크립트가 탄력성(일부 실패가 전체에 영향을 끼치지 않는 특성)을 향상하기 위해 여러 가지 방법으로 JavaScript의 의미를 변경하고 문제가 발생했을 때 무슨 일이 일어나고 있는지 더 쉽게 이해할 수 있는 새로운 [엄격 모드](/ko/docs/Web/JavaScript/Reference/Strict_mode)를 선택할 수 있습니다. + +일반적이고 엄격하지 않은 JavaScript 모드를 **느슨한 모드** 라고도 합니다. 이것은 공식적인 명칭은 아니지만, 중요한 JavaScript 코드를 작성하는 데 시간을 투자한다면 이 이름을 접하게 될 가능성이 높습니다. + +## 같이 보기 + +- Speaking JavaScript 책, 7번째 부분 ("JavaScript Syntax")에 있는 "[엄격 모드](https://exploringjs.com/es5/ch07.html#_strict_mode)". diff --git a/files/ko/glossary/slug/index.md b/files/ko/glossary/slug/index.md new file mode 100644 index 00000000000000..2c017638552ed2 --- /dev/null +++ b/files/ko/glossary/slug/index.md @@ -0,0 +1,16 @@ +--- +title: 간편 URL (Slug) +slug: Glossary/Slug +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +간편 URL(Slug)는 일반적으로 URL 끝에 있는 웹 주소의 고유하게 식별이 되는 부분입니다. MDN의 맥락에서는, "_\<locale>/docs/_" 다음의 URL 부분입니다. + +또한 상위 문서 아래에 새 문서가 생성될 때 최종 구성 요소일 수도 있습니다. 예를 들어, 이 페이지의 슬러그는 `Glossary/Slug`입니다. + +## 같이 보기 + +- [제목과 간편 URL 선택하기](/ko/docs/MDN/Writing_guidelines/Writing_style_guide#slugs) diff --git a/files/ko/glossary/smoke_test/index.md b/files/ko/glossary/smoke_test/index.md new file mode 100644 index 00000000000000..d6914ec625c3a1 --- /dev/null +++ b/files/ko/glossary/smoke_test/index.md @@ -0,0 +1,22 @@ +--- +title: 스모크 테스트 (Smoke Test) +slug: Glossary/Smoke_Test +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +스모크 테스트는 중요한 소프트웨어 기능에 대한 기능 테스트 또는 단위 테스트로 구성됩니다. 스모크 테스트는 심층적인 추가 테스트보다 먼저 수행됩니다. + +스모크 테스트는 아래와 같은 질문에 대답합니다. + +- 프로그램이 제대로 시작되나요? +- 메인 컨트롤 버튼이 작동하나요? +- 단순한 비어있는 새 테스트 사용자 계정을 저장할 수 있나요? + +이러한 기본 기능이 실패하면, 이 단계에서 더 자세한 QA 작업에 시간을 투자할 이유가 없습니다. + +## 같이 보기 + +- 위키백과의 [스모크 테스팅 (소프트웨어)](<https://en.wikipedia.org/wiki/Smoke_testing_(software)>) diff --git a/files/ko/glossary/smpte/index.md b/files/ko/glossary/smpte/index.md new file mode 100644 index 00000000000000..dd849eb8b77d07 --- /dev/null +++ b/files/ko/glossary/smpte/index.md @@ -0,0 +1,12 @@ +--- +title: 텔레비전 기술자 협회 (Society of Motion Picture and Television Engineers, SMPTE) +slug: Glossary/SMPTE +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**텔레비전 기술자 협회 (Society of Motion Picture and Television Engineers, SMPTE)** (**[SMPTE](https://www.smpte.org/)**) 는 엔터테인먼트 미디어를 제작, 방송, 저장 및 제공하는 데 사용되는 표준과 기술을 개발하고 정의하는 엔지니어와 과학자의 전문 협회입니다. + +예를 들어, SMPTE는 현대 디지털 영화관에서 쓰이는 디지털 영화에 사용되는 표준을 정의합니다. diff --git a/files/ko/glossary/snap_positions/index.md b/files/ko/glossary/snap_positions/index.md new file mode 100644 index 00000000000000..d6a219193106b7 --- /dev/null +++ b/files/ko/glossary/snap_positions/index.md @@ -0,0 +1,12 @@ +--- +title: 스냅 위치 (Snap positions) +slug: Glossary/Snap_positions +l10n: + sourceCommit: d267a8cb862c20277f81bbc223221b36b0c613e6 +--- + +{{GlossarySidebar}} + +스냅 위치는 스크롤 작업이 완료되고 난 후 [스크롤포트](/ko/docs/Glossary/Scroll_container)가 이동을 멈추는 지점입니다. 스냅 위치를 설정하면 콘텐츠를 화면 요소로 드래그할 필요 없이 콘텐츠를 페이징하는 스크롤 경험을 만들 수 있습니다. + +스냅 위치는 [스크롤 컨테이너](/ko/docs/Glossary/Scroll_container)에 설정됩니다. [CSS 스크롤 스냅](/ko/docs/Web/CSS/CSS_scroll_snap) 속성을 참조하세요. diff --git a/files/ko/glossary/soap/index.md b/files/ko/glossary/soap/index.md new file mode 100644 index 00000000000000..b56cf7e86c8f05 --- /dev/null +++ b/files/ko/glossary/soap/index.md @@ -0,0 +1,15 @@ +--- +title: 단순 객체 접근 프로토콜 (Simple Object Access Protocol, SOAP) +slug: Glossary/SOAP +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**단순 객체 접근 프로토콜 (Simple Object Access Protocol, SOAP)** 은 {{glossary('XML')}} 형식으로 데이터를 전송하기 위한 {{glossary('protocol', "프로토콜")}}입니다. + +## 같이 보기 + +- 위키백과의 [SOAP](https://en.wikipedia.org/wiki/SOAP) +- [명세서](https://www.w3.org/TR/soap12-part1/) diff --git a/files/ko/glossary/spa/index.md b/files/ko/glossary/spa/index.md new file mode 100644 index 00000000000000..ffa9073cca7bed --- /dev/null +++ b/files/ko/glossary/spa/index.md @@ -0,0 +1,28 @@ +--- +title: 단일 페이지 애플리케이션 (Single-page application, SPA) +slug: Glossary/SPA +l10n: + sourceCommit: 7c7473588e7fb487df574c64307b11a3ecd55cd1 +--- + +{{GlossarySidebar}} + +단일 페이지 애플리케이션 (Single-page application, SPA)은 단일 웹 문서만 로드한 다음 다른 콘텐츠가 표시될 때 {{domxref("XMLHttpRequest")}} 및 [Fetch](/ko/docs/Web/API/Fetch_API)와 같은 JavaScript API를 통해 해당 단일 문서의 본문 콘텐츠를 업데이트하는 웹 앱 구현체입니다. + +따라서, 사용자는 서버에서 완전히 새로운 페이지를 로드하지 않고도 웹사이트를 사용할 수 있으므로, 성능이 향상되고 보다 동적인 경험을 얻을 수 있지만, SEO와 같은 일부 절충이 되는 단점이 있으며, 상태를 유지하고 탐색을 구현 및 의미 있는 성능 모니터링을 하는 데 더 많은 노력이 필요합니다. + +## 같이 보기 + +- 위키백과의 [단일 페이지 애플리케이션](https://en.wikipedia.org/wiki/Single-page_application) +- [클라이언트 사이드 JavaScript 프레임워크의 이해](/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks) +- [용어 사전](/ko/docs/Glossary) + + - {{Glossary("API")}} + - {{Glossary("AJAX")}} + - {{Glossary("JavaScript")}} + +- 인기있는 SPA 프레임워크 + + - [React](https://react.dev/) + - [Angular](https://angular.io/) + - [Vue.JS](https://vuejs.org/) diff --git a/files/ko/glossary/specification/index.md b/files/ko/glossary/specification/index.md new file mode 100644 index 00000000000000..142f91aa716f23 --- /dev/null +++ b/files/ko/glossary/specification/index.md @@ -0,0 +1,14 @@ +--- +title: 명세서 (Specification) +slug: Glossary/Specification +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**명세서(specification)** 는 전달 전에 제품에 포함되어야 하는 기능이나 특성을 자세히 설명하는 문서입니다. 웹을 설명하는 맥락에서, '명세서(spec)'라는 용어는 일반적으로 언어, 기술 또는 전체 개방형 웹 기술 세트를 구성하는 {{Glossary("API")}}를 설명하는 문서를 의미합니다. + +## 같이 보기 + +- 위키백과의 [명세서](https://en.wikipedia.org/wiki/Specification) diff --git a/files/ko/glossary/speed_index/index.md b/files/ko/glossary/speed_index/index.md new file mode 100644 index 00000000000000..2e19e96dcc44b3 --- /dev/null +++ b/files/ko/glossary/speed_index/index.md @@ -0,0 +1,21 @@ +--- +title: 스피드 인덱스 (Speed index, SI) +slug: Glossary/Speed_index +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**스피드 인덱스(Speed index, SI)** 는 페이지의 콘텐츠가 시각적으로 얼마나 빨리 채워지는지를 측정하는 페이지 로드 성능 측정항목입니다. 스피드 인덱스는 뷰포트의 크기에 따라 달라지며 밀리초 단위로 표시됩니다. 시간이 짧을수록 점수가 높아집니다. + +스피드 인덱스는 다른 마일스톤 및 지표와 관련된 문제를 해결하고 실제 사용자 경험의 척도를 제공하기 위해 도입되었습니다. 스피드 인덱스는 [WebPageTest](https://github.com/WPO-Foundation/webpagetest-docs/blob/main/src/metrics/SpeedIndex.md) 및 [Lighthouse](https://github.com/paulirish/speedline)를 포함한 여러 일반적인 감사에서 구현되었습니다. + +스피드 인덱스는 페이지가 시각적으로 완료될 때까지 100ms 간격으로 페이지의 시각적으로 완료된 비율을 계산합니다. 전체 점수는 화면이 시각적으로 완전하지 않은 비율을 초당 10회 개인의 비율로 합산한 것입니다. + +페이즈 로드 이벤트 전에 스크롤 없이 볼 수 있는 콘텐츠가 어떻게 로드되고 스피드 인덱스로 측정되는지 보여주는 다이어그램입니다. +![SpeedIndex의 계산](speedindex.png) + +## 같이 보기 + +- [웹 성능 배우기](/ko/docs/Learn/Performance) diff --git a/files/ko/glossary/sql_injection/index.md b/files/ko/glossary/sql_injection/index.md new file mode 100644 index 00000000000000..fe2db56e1f39a3 --- /dev/null +++ b/files/ko/glossary/sql_injection/index.md @@ -0,0 +1,71 @@ +--- +title: SQL 인젝션 (SQL Injection) +slug: Glossary/SQL_Injection +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +SQL 주입은 사용자 입력의 유효성을 검사하지 못하는 웹 앱을 활용합니다. 해커는 백엔드 데이터베이스에서 실행하기 위해 웹앱을 통해 SQL 명령을 악의적으로 전달할 수 있습니다. + +SQL 주입은 데이터베이스에 대한 무단 접근을 얻거나 데이터베이스에서 직접 정보를 검색할 수 있습니다. 많은 데이터 침해는 SQL 주입으로 인해 발생합니다. + +[![가장 일반적인 취약점의 원형 차트: SQL 주입은 취약점의 50%를 담당하고, 크로스 사이트 스크립팅은 취약점의 42%를 담당하고, 소스 코드 공개는 취약점의 7%를 담당합니다](sql_inj_xss.gif)](https://cdn.acunetix.com/wp_content/uploads/2010/09/sql_inj_xss.gif) + +## 작동 방식 + +![사용자 이름 및 비밀번호 필드가 포함된 로그인 양식의 스크린샷](updates_loginscreen.png) + +사용자 이름과 비밀번호를 입력한 후 GUI 뒤에서 SQL 쿼리는 아래와 같이 작동합니다. + +```sql +"SELECT Count(*) FROM Users WHERE Username=' " + txt.User.Text+" ' AND Password=' "+ txt.Password.Text+" ' "; +``` + +이제 사용자가 사용자 이름을 admin, 비밀번호를 passwd123을 입력한다고 가정하고, 로그인 버튼을 클릭하면 SQL 쿼리가 아래와 같이 실행됩니다. + +```sql +"SELECT Count(*) FROM Users WHERE Username=' admin ' AND Password=' passwd123 ' "; +``` + +자격 증명이 정확하면, 사용자의 로그인이 허용되므로, 매우 간단한(따라서 안전하지 않은) 메커니즘입니다. 해커는 이러한 불안정성을 이용하여 무단 접근을 얻습니다. + +해커는 Magical String이라는 간단한 문자열을 사용합니다. 예를 들면, 아래와 같습니다. + +**사용자 이름: _admin_** + +**비밀번호: _anything 'or'1'='1_** + +로그인 버튼을 클릭하면, SQL 쿼리가 아래와 같이 작동합니다. + +```sql +"SELECT Count(*) FROM Users WHERE Username=' admin ' AND Password=' anything 'or'1'='1 ' "; +``` + +위 쿼리의 비밀번호 섹션을 자세히 살펴보세요. + +```plain +Password=' anything 'or'1'='1 ' +``` + +비밀번호는 'anything'이 아니므로, password=anything의 결과도 거짓(FALSE)이지만, '1'='1'은 참(TRUE) 문이므로 TRUE 값을 반환합니다. 마지막으로, OR 연산자로 인해, 값(FALSE 또는 TRUE)이 TRUE이므로, 인증 우회에 성공합니다. 단순한 문자열(Magical String) 때문에 전체 데이터베이스가 손상되었습니다. + +## 예방 방법 + +사용자 자격 증명에 대한 쿼리를 실행하기 전에, 아래와 같이 몇 가지 사항을 변경합니다. + +```sql +$id = $_GET['id'] + +(1) $id = Stripslashes($id) + +(2) $id = mysql_real_escape_String($id) +``` + +따라서 (1)로 인해 입력 문자열의 각 작은 따옴표(')가 큰따옴표(")로 바뀌고, (2)로 인해 모든 작은 따옴표(') 앞에 (/)가 추가됩니다. 수정된 Magical String은 인증을 우회하지 못하며, 데이터베이스는 안전하게 유지됩니다. + +## 같이 보기 + +- 위키백과의 [SQL 인젝션](https://en.wikipedia.org/wiki/SQL_injection) +- OWASP (Open Web Application Security Project)의 [SQL 인젝션에 대한 설명](https://owasp.org/www-community/attacks/SQL_Injection) diff --git a/files/ko/glossary/sri/index.md b/files/ko/glossary/sri/index.md new file mode 100644 index 00000000000000..15451532e3232f --- /dev/null +++ b/files/ko/glossary/sri/index.md @@ -0,0 +1,14 @@ +--- +title: 하위 자원 무결성 (Subresource Integrity, SRI) +slug: Glossary/SRI +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**하위 자원 무결성 (Subresource Integrity, SRI)** 은 브라우저가 가져오는 파일(예, {{Glossary("CDN")}})이 예기치 않은 조작없이 전달되는지 확인할 수 있는 보안 기능입니다. 가져온 파일이 일치해야 하는 암호화 해시를 제공할 수 있게 함으로써 작동합니다. + +## 같이 보기 + +- [하위 자원 무결성](/ko/docs/Web/Security/Subresource_Integrity) diff --git a/files/ko/glossary/stacking_context/index.md b/files/ko/glossary/stacking_context/index.md index 1a9566e9fa5c4b..bb43b42e40fa2f 100644 --- a/files/ko/glossary/stacking_context/index.md +++ b/files/ko/glossary/stacking_context/index.md @@ -1,12 +1,14 @@ --- -title: 쌓임 맥락 +title: 스태킹 컨텍스트 (Stacking context) slug: Glossary/Stacking_context +l10n: + sourceCommit: d267a8cb862c20277f81bbc223221b36b0c613e6 --- -**쌓임 맥락**은 마치 책상 위의 카드를 옆으로 늘어놓거나 서로 겹치게 만들 수 있듯, 웹 페이지에서 어떤 요소가 위에 그려지는지 결정하는 방법입니다. +{{GlossarySidebar}} -## 더 알아보기 +**스태킹 컨텍스트 (Stacking context)** 는 마치 책상 위의 카드를 옆으로 늘어놓거나 서로 겹치게 만들 수 있듯, 웹 페이지에서 어떤 요소가 위에 그려지는지 결정하는 방법입니다. -### 일반 지식 +## 같이 보기 -- [자세한 설명과 예제](/ko/docs/Web/CSS/Understanding_z-index/The_stacking_context) +- [stacking context에 대한 설명과 예제](/ko/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context) diff --git a/files/ko/glossary/state_machine/index.md b/files/ko/glossary/state_machine/index.md new file mode 100644 index 00000000000000..38e1a1bf31b2aa --- /dev/null +++ b/files/ko/glossary/state_machine/index.md @@ -0,0 +1,42 @@ +--- +title: 상태 기계 (State machine) +slug: Glossary/State_machine +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +상태 기계는 알고리즘을 설계하는 데 사용되는 수학적 추상화 표현입니다. 상태 기계는 일련의 입력을 읽고 해당 입력에 따라 다른 상태로 변경됩니다. + +상태는 전환을 실행하는 것을 기다리는 시스템 상태에 대한 설명입니다. 전환은 조건이 충족되거나 이벤트가 수신될 때 실행되는 일련의 작업입니다. 상태 다이어그램에서, 원은 가능한 각 상태를 나타내고 화살표는 상태 간에 전환을 나타냅니다. + +최종 상태를 보면, 해당 상태로 이어지는 일련의 입력에 대해 식별할 수 있습니다. + +기본 상태 기계에는 두 가지 유형이 있습니다. + +- 결정론적 유한 상태 기계 + - : 이 종류는 허용된 입력에 대해 하나의 가능한 전환만 허용합니다. 이는 `if x then doThis else doThat`이 불가능 하다는 "if" {{Glossary("statement", "명령문")}}과 같습니다. 컴퓨터는 두 가지 옵션 중 '하나'를 수행해야 합니다. +- 비결정적 유한 상태 기계 + - : 어떤 상태가 주어지면, 입력은 둘 이상의 다른 상태로 이어질 수 있습니다. + +'그림 1: 결정론적 유한 상태 머신' + +![기계는 입력 X에 대해 상태 1에서 상태 2로 전환하고 입력 Y에 대해 상태 1에서 상태 3으로 전환합니다](statemachine1.png) + +'그림 1'에서, 상태는 상태 1에서 시작됩니다. 상태는 입력 'X'가 주어지면 상태 2로 변경되거나 입력 'Y'가 주어지면 상태 3으로 변경됩니다. + +'그림 2: 비결정적 유한 상태 머신' + +![기계는 상태 1에 남아 자체적으로 전환되거나 입력 X에 대해 상태 1에서 상태 2로 전환될 수 있습니다](statemachine2.png) + +'그림 2'에서, 'X'를 입력하면 상태가 지속되거나 상태 2로 변경될 수 있습니다. + +모든 {{Glossary("regular expression", "정규 표현식")}}은 상태 기계로 표현될 수 있습니다. + +## 같이 보기 + +- 위키백과의 [유한 상태 기계](https://en.wikipedia.org/wiki/Finite-state_machine) +- 위키백과의 [UML 상태 기계](https://en.wikipedia.org/wiki/UML_state_machine) +- 위키백과의 [무어 기계](https://en.wikipedia.org/wiki/Moore_machine) +- 위키백과의 [밀리 기계](https://en.wikipedia.org/wiki/Mealy_machine) diff --git a/files/ko/glossary/statement/index.md b/files/ko/glossary/statement/index.md new file mode 100644 index 00000000000000..f87f7992732427 --- /dev/null +++ b/files/ko/glossary/statement/index.md @@ -0,0 +1,15 @@ +--- +title: 명령문 (Statement) +slug: Glossary/Statement +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +컴퓨터 프로그래밍 언어에서, **명령문(statement)** 은 작업을 명령하는 코드 줄입니다. 모든 프로그램은 일련의 명령문으로 구성됩니다. + +## 같이 보기 + +- 위키백과의 [명령문 (컴퓨터 과학)](<https://en.wikipedia.org/wiki/Statement_(computer_science)>) +- [JavaScript 명령문과 선언문](/ko/docs/Web/JavaScript/Reference/Statements) diff --git a/files/ko/glossary/static_method/index.md b/files/ko/glossary/static_method/index.md new file mode 100644 index 00000000000000..12265ab2bb8b85 --- /dev/null +++ b/files/ko/glossary/static_method/index.md @@ -0,0 +1,39 @@ +--- +title: 정적 메서드 (Static method) +slug: Glossary/Static_method +l10n: + sourceCommit: 1b094710cd2816a6669ce616b6f56d0a5b25e6ad +--- + +{{GlossarySidebar}} + +정적 메서드 (또는 정적 함수)는 {{Glossary("object", "객체")}}의 멤버로 정의된 {{Glossary("method", '메서드')}}이지만 생성자를 통해 생성된 객체 인스턴스가 아닌 API 객체의 생성자에서 직접 접근할 수 있습니다. + +[Web API](/ko/docs/Web/API)에서, 정적 메서드는 인터페이스에 의해 정의되지만 해당 유형의 객체를 먼저 인스턴스화하지 않고도 호출할 수 있는 메서드입니다. + +객체 인스턴스에서 호출되는 메서드를 '인스턴스 메서드'라고 합니다. + +## 예제 + +[Notifications API](/ko/docs/Web/API/Notifications_API)에서, {{domxref("Notification/requestPermission_static", "Notification.requestPermission()")}} 메서드는 {{domxref("Notification")}} 생성자 자체에서 호출됩니다. {{domxref("Notification/requestPermission_static", "Notification.requestPermission()")}} 메서드는 정적 메서드입니다. + +```js +let promise = Notification.requestPermission(); +``` + +반면에 {{domxref("Notification.close()")}} 메서드는 인스턴스 메서드입니다. 이는 특정 알림 객체 인스턴스에서 호출되어 해당 시스템 알림을 닫습니다. + +```js +let myNotification = new Notification("This is my notification"); + +myNotification.close(); +``` + +## 같이 보기 + +- Techopedia의 [정적 메서드](https://www.techopedia.com/definition/24034/static-method-java) +- [static](/ko/docs/Web/JavaScript/Reference/Classes/static) +- [MDN 웹 문서 용어 사전](/ko/docs/Glossary) + + - {{Glossary("Object")}} + - {{Glossary("Method")}} diff --git a/files/ko/glossary/sticky_activation/index.md b/files/ko/glossary/sticky_activation/index.md new file mode 100644 index 00000000000000..5ed3dc8e3d5055 --- /dev/null +++ b/files/ko/glossary/sticky_activation/index.md @@ -0,0 +1,22 @@ +--- +title: 고정 활성화 (Sticky activation) +slug: Glossary/Sticky_activation +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**고정 활성화(Sticky activation)** 또는 sticky user activation(고정 사용자 활성화)는 사용자가 버튼을 누르거나, 마우스를 이동하거나, 메뉴를 사용하거나, 기타 사용자 상호 작용을 수행했음을 나타내는 창 상태입니다. + +사용자가 현재 페이지와 상호 작용 중이거나 페이지 로드 이후 터치, 포인터 또는 키보드 상호 작용을 완료할 경우 페이지는 '사용자 활성화'로 생각합니다. 고정 사용자 활성화를 사용하면, ({{Glossary("Transient activation", "일시적 활성화")}}와 달리) 활성화가 설정되어 있으면 세션 기간 동안 재설정되지 않습니다. + +'고정 활성화'가 필요한 API의 예는 [사용자 활성화로 제한되는 기능](/ko/docs/Web/Security/User_activation)을 참조하세요. + +현재 창의 고정 활성화 상태에 프로그래밍 방식으로 접근하려면 {{domxref("UserActivation.hasBeenActive")}} 속성을 참조하세요. + +## 같이 보기 + +- [HTML Living Standard > Sticky activation](https://html.spec.whatwg.org/multipage/interaction.html#sticky-activation) +- {{Glossary("Transient activation")}} +- {{domxref("UserActivation.hasBeenActive")}} diff --git a/files/ko/glossary/stringifier/index.md b/files/ko/glossary/stringifier/index.md new file mode 100644 index 00000000000000..504c182d723a37 --- /dev/null +++ b/files/ko/glossary/stringifier/index.md @@ -0,0 +1,14 @@ +--- +title: Stringifier +slug: Glossary/Stringifier +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +{{Glossary("object", "객체의")}} stringifier는 {{Glossary("string", "문자열")}}이 필요한 상황에서 사용할 객체의 텍스트 표현을 제공하기 위해 정의된 {{Glossary("attribute", "속성")}} 또는 {{Glossary("method", "메서드")}}입니다. + +## 같이 보기 + +- [WebIDL 파일에 포함된 정보](/ko/docs/MDN/Writing_guidelines/Howto/Write_an_API_reference/Information_contained_in_a_WebIDL_file#stringifiers)에 있는 Stringifiers diff --git a/files/ko/glossary/stun/index.md b/files/ko/glossary/stun/index.md new file mode 100644 index 00000000000000..1c785a5409c0ca --- /dev/null +++ b/files/ko/glossary/stun/index.md @@ -0,0 +1,19 @@ +--- +title: NAT용 세션 탐색 유틸리티 (Session Traversal Utilities for NAT, STUN) +slug: Glossary/STUN +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**NAT용 세션 탐색 유틸리티 (Session Traversal Utilities for NAT, STUN)** 는 네트워크 주소 변환 (Network Address Translator, {{glossary("NAT")}}) 주변에서 데이터를 전송하기 위한 보조 프로토콜입니다. STUN은 {{glossary("IP address", "IP 주소")}}, {{glossary("port", "포트")}} 및 NAT 뒤에 네트워크 컴퓨터의 연결 상태를 반환합니다. + +## 같이 보기 + +- 위키백과의 [STUN](https://en.wikipedia.org/wiki/STUN) +- [WebRTC 프로토콜](/ko/docs/Web/API/WebRTC_API/Protocols) + +### 기술적 참고서 + +- [명세서](https://datatracker.ietf.org/doc/html/rfc5389) diff --git a/files/ko/glossary/stylesheet/index.md b/files/ko/glossary/stylesheet/index.md new file mode 100644 index 00000000000000..64e6637d354208 --- /dev/null +++ b/files/ko/glossary/stylesheet/index.md @@ -0,0 +1,17 @@ +--- +title: 스타일시트 (Stylesheet) +slug: Glossary/Stylesheet +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**스타일시트(stylesheet)** 는 웹페이지나 문서의 레이아웃과 디자인을 제어하는 데 사용되는 CSS 규칙 집합입니다. '내부' 스타일시트는 웹 문서의 {{htmlelement("head")}} 내부에 있는 {{htmlelement("style")}} 요소 안에 배치됩니다. '외부' 스타일시트는 문서 head 태그의 {{htmlelement("link")}} 요소 내부에 있는 파일을 참조하여 문서에 적용되는 별도의 `.css` 파일 내에 배치됩니다. + +외부 스타일시트를 사용하면 각 페이지의 CSS를 반복할 필요 없이, 한 곳에서 여러 페이지의 스타일을 제어할 수 있으므로 일반적으로 자주 사용되는 방법입니다. + +## 같이 보기 + +- [CSS 첫 걸음](/ko/docs/Learn/CSS/First_steps) +- 위키백과의 [스타일시트](<https://en.wikipedia.org/wiki/Style_sheet_(web_development)>) diff --git a/files/ko/glossary/submit_button/index.md b/files/ko/glossary/submit_button/index.md new file mode 100644 index 00000000000000..cc65e73ded3b99 --- /dev/null +++ b/files/ko/glossary/submit_button/index.md @@ -0,0 +1,37 @@ +--- +title: 제출 버튼 (Submit button) +slug: Glossary/Submit_button +l10n: + sourceCommit: c9a87fc4010cef73c21c5f46662431f3c8ad2d28 +--- + +{{GlossarySidebar}} + +**제출 버튼(submit button)** 은 {{HTMLElement("form", "양식")}}을 제출하는 데 사용할 수 있는 HTML의 {{Glossary("element", "요소")}}입니다. 기본 제출 버튼 요소는 아래와 같습니다. + +- {{HtmlElement("button")}} (기본 타입은 `type`은 `"submit"`입니다.) +- `{{HtmlElement('input/submit', '<input type="submit">')}}` +- `{{HtmlElement('input/image', '<input type="image">')}}` + +양식 제출 외에도, 제출 버튼은 양식의 동작과 전송되는 데이터에 영향을 줄 수 있습니다. + +## 양식의 동작을 재정의 + +제출 버튼은 다양한 속성을 통해 양식의 제출 동작을 재정의할 수 있습니다. + +- `{{HtmlElement("button#formaction", "formaction")}}`: 양식의 [`action`](/ko/docs/Web/HTML/Element/form#action) 속성을 재정의합니다. +- `{{HtmlElement("button#formenctype", "formenctype")}}`: 양식의 [`enctype`](/ko/docs/Web/HTML/Element/form#enctype) 속성을 재정의합니다. +- `{{HtmlElement("button#formmethod", "formmethod")}}`: 양식의 [`method`](/ko/docs/Web/HTML/Element/form#method) 속성을 재정의합니다. +- `{{HtmlElement("button#formnovalidate", "formnovalidate")}}`: 양식의 [`novalidate`](/ko/docs/Web/HTML/Element/form#novalidate) 속성을 재정의합니다. +- `{{HtmlElement("button#formtarget", "formtarget")}}`: 양식의 [`target`](/ko/docs/Web/HTML/Element/form#target) 속성을 재정의합니다. + +## 양식 데이터 항목 + +제출 버튼이 {{HtmlElement("button")}} 또는 `{{HtmlElement('input/submit', '<input type="submit">')}}` 및 `name` 속성이 있는 경우, 양식 데이터 모음에는 `name` 및 `value`에 대한 항목이 포함됩니다. + +제출 버튼이 `{{HtmlElement('input/image', '<input type="image">')}}`인 경우, 양식 데이터 세트에는 사용자가 클릭한 X 및 Y 좌표에 대한 항목이 포함됩니다(예, `x=100&y=200` 또는 `buttonName.x=123&buttonName.y=234`). + +## 같이 보기 + +- [기본 네이티브 양식 컨트롤](/ko/docs/Learn/Forms/Basic_native_form_controls) +- [양식 데이터 제출하기](/ko/docs/Learn/Forms/Sending_and_retrieving_form_data) diff --git a/files/ko/glossary/symmetric-key_cryptography/index.md b/files/ko/glossary/symmetric-key_cryptography/index.md new file mode 100644 index 00000000000000..643f56e0437fdd --- /dev/null +++ b/files/ko/glossary/symmetric-key_cryptography/index.md @@ -0,0 +1,25 @@ +--- +title: 대칭키 암호화 (Symmetric-key cryptography) +slug: Glossary/Symmetric-key_cryptography +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +대칭키 암호화(Symmetric-key cryptography)는 암호화와 복호화에 동일한 키를 사용하는 암호화 알고리즘에 사용되는 용어입니다. 키는 일반적으로 "대칭 키" 또는 "비밀 키"라고 합니다. + +일반적으로 키가 쌍으로 생성되고 한 키에 의한 변환이 다른 키를 통해서만 되돌릴 수 있는 {{Glossary("public-key cryptography", "공개 키 암호화")}}와 비교됩니다. + +대칭키 알고리즘은 올바르게 사용하면 안전하고 효율성이 높아 성능에 부정적인 영향을 주지 않으면서, 대량의 데이터를 암호화하는 데 사용할 수 있습니다. + +현재 사용되는 대부분의 대칭키 알고리즘은 블록암호입니다. 즉, 한 번에 한 블록씩 데이터를 암호화합니다. 각 블록의 크기는 고정되어 있으며 알고리즘에 의해 결정됩니다. 예를 들어, {{Glossary("AES")}} 16 바이트 블록을 사용합니다. 블록 암호는 항상 블록 크기보다 긴 메시지를 안전하게 암호화하는 방법을 지정하는 '{{Glossary("Block cipher mode of operation", "모드")}}'와 함께 사용됩니다. 예를 들어, AES는 암호이고, CTR, CBC 및 GCM은 모두 모드입니다. 부적절한 모드를 사용하거나 모드를 잘못 사용하면, 기본 암호가 제공되는 보안이 완전히 훼손될 수 있습니다. + +## 같이 보기 + +- [MDN 웹 문서 용어 사전](/ko/docs/Glossary) + + - {{Glossary("Block cipher mode of operation")}} + - {{Glossary("Cryptography")}} + - {{Glossary("Cryptographic hash function")}} + - {{Glossary("Symmetric-key cryptography")}} diff --git a/files/ko/glossary/syntax/index.md b/files/ko/glossary/syntax/index.md new file mode 100644 index 00000000000000..702633ac5b9f19 --- /dev/null +++ b/files/ko/glossary/syntax/index.md @@ -0,0 +1,24 @@ +--- +title: 구문 (Syntax) +slug: Glossary/Syntax +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +구문은 올바르게 구조화된 코드를 구성하는 {{Glossary("character","문자열")}}의 필수 조합과 순서를 지정합니다. 구문에는 일반적으로 Python의 들여쓰기 요구 사항과 같이 문법과 작성에 적용되는 규칙이 포함됩니다. + +구문은 언어마다 다릅니다(예, {{Glossary("HTML")}} 및 {{Glossary("JavaScript")}}의 구문은 다름). 언어는 JavaScript 및 Python의 "피연산자 연산자 피연산자" 규칙과 같이 구문 측면에서 거의 유사점을 공유할 수 없습니다. 이것은 두 언어가 구문과 유사점을 공유한다는 의미가 아닙니다. + +구문은 프로그래밍 언어(컴퓨터에 대한 명령)와 마크업 언어(문서 구조 정보) 모두에 동일하게 적용됩니다. + +구문은 순서와 구조에만 적용됩니다. 이러한 지침은 또한 '의미 있는' 것이어야 하고 {{Glossary("semantics", "의미론")}}적인 부분입니다. + +{{Glossary("compile", "컴파일")}}을 올바르게 수행하려면 코드에 올바른 구문이 있어야 합니다. 그렇지 않으면 {{Glossary("syntax error", "구문 오류")}}가 발생합니다. 괄호 누락과 같은 작은 오류라도, 소스 코드가 성공적으로 컴파일되지 않을 수 있습니다. + +간단하고, 읽기 쉽고, 간결한 결과를 생성하는 프레임워크는 "깨끗한" 구문을 가지고 있다고 합니다. 코드베이스가 "많은 구문"을 사용하는 경우, 동일한 기능을 달성하려면 더 많은 문자가 필요합니다. + +## 같이 보기 + +- 위키백과의 [구문 (프로그래밍 언어)](<https://en.wikipedia.org/wiki/Syntax_(programming_languages)>) diff --git a/files/ko/glossary/syntax_error/index.md b/files/ko/glossary/syntax_error/index.md new file mode 100644 index 00000000000000..edb8773533c772 --- /dev/null +++ b/files/ko/glossary/syntax_error/index.md @@ -0,0 +1,17 @@ +--- +title: 구문 오류 (Syntax error) +slug: Glossary/Syntax_error +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +미리 정의된 {{Glossary("syntax", "구문")}}을 잘못 사용하여 발생한 {{Glossary("exception", "예외")}}입니다. 소스 코드를 컴파일하거나 구문 분석하는 동안 구문 오류가 감지됩니다. + +예를 들어, {{Glossary("JavaScript")}} 함수를 정의할 때 닫는 중괄호(`}`)를 생략하면, 구문 오류가 발생합니다. 브라우저 개발자 도구에는 콘솔에 {{Glossary("JavaScript")}} 및 {{Glossary("CSS")}} 구문 오류를 표시합니다. + +## 같이 보기 + +- 위키백과의 [구문 오류](https://en.wikipedia.org/wiki/Syntax_error) +- {{jsxref("SyntaxError")}} JavaScript 객체 diff --git a/files/ko/glossary/synthetic_monitoring/index.md b/files/ko/glossary/synthetic_monitoring/index.md new file mode 100644 index 00000000000000..91f5fb39acb40c --- /dev/null +++ b/files/ko/glossary/synthetic_monitoring/index.md @@ -0,0 +1,22 @@ +--- +title: 종합 모니터링 (Synthetic monitoring) +slug: Glossary/Synthetic_monitoring +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**종합 모니터링(Synthetic monitoring)** 은 일반적으로 가능한 한 일관된 환경에서 자동화 도구를 사용해, '실험실' 환경에서 페이지 성능을 모니터링하는 작업을 의미합니다. + +일관된 기준을 사용하는, 종합 모니터링은 코드 변경이 성능에 미치는 영향을 측정하는 데 좋습니다. 그러나 사용자가 경험하고 있는 상황이 반드시 반영되는 것은 아닙니다. + +종합 모니터링에는 최종 사용자가 웹 애플리케이션을 통해 이동할 수 있는 경로를 시뮬레이션하기 위한 스크립트 배포가 포함되며, 시뮬레이터 경험의 성능 결과를 다시 보고합니다. 널리 사용되는 종합 모니터링 도구의 예로는 [WebPageTest](https://webpagetest.org) 및 [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)가 있습니다. 측정된 트래픽은 실제 사용자가 아니라, 페이지 성능에 대한 데이터를 수집하여 종합적으로 생성된 트래픽입니다. + +[실제 사용자 모니터링 (Real User Monitoring, RUM)](/ko/docs/Glossary/Real_User_Monitoring)과 달리, 종합 모니터링은 사용자 차이를 고려하지 않는 좁은 성능 보기를 제공합니다. 그래서 애플리케이션 성능에 대한 기본 데이터를 얻고 개발 환경에서 성능을 즉각적으로 확인하는 데 유용합니다. 네트워크 조절과 같은 다른 도구와 결합하면, 잠재적인 문제 영역에 대한 뛰어난 통찰력을 제공할 수 있습니다. + +## 같이 보기 + +- [실제 사용자 모니터링 (Real User Monitoring, RUM)](/ko/docs/Glossary/Real_User_Monitoring) +- [실제 사용자 모니터링 vs 종합 모니터링](/ko/docs/Web/Performance/Rum-vs-Synthetic) +- [비콘](/ko/docs/Glossary/Beacon) diff --git a/files/ko/glossary/table_grid_box/index.md b/files/ko/glossary/table_grid_box/index.md new file mode 100644 index 00000000000000..0ae3d263cd2621 --- /dev/null +++ b/files/ko/glossary/table_grid_box/index.md @@ -0,0 +1,10 @@ +--- +title: 테이블 그리드 상자 (Table Grid Box) +slug: Glossary/Table_Grid_Box +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**테이블 그리드 상자(Table Grid Box)** 는 캡션을 제외한 모든 테이블 내부 상자를 포함하는 블록 수준의 상자입니다. 캡션이 포함된 상자를 [테이블 래퍼 상자](/ko/docs/Glossary/Table_Wrapper_Box)라고 합니다. diff --git a/files/ko/glossary/table_wrapper_box/index.md b/files/ko/glossary/table_wrapper_box/index.md new file mode 100644 index 00000000000000..f11fd46b484a75 --- /dev/null +++ b/files/ko/glossary/table_wrapper_box/index.md @@ -0,0 +1,10 @@ +--- +title: 테이블 래퍼 상자 (Table Wrapper Box) +slug: Glossary/Table_Wrapper_Box +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**테이블 래퍼 상자(Table Wrapper Box)** 는 테이블에 표시되는 캡션에 필요한 공간을 설명하는 [테이블 그리드 상자](/ko/docs/Glossary/Table_Grid_Box) 주위에 생성된 상자입니다. 이 상자는 테이블이 둘러싸는 블록이라는 특성을 가진 절대 위치 항목에 대한 둘러싸는 항목이 됩니다. diff --git a/files/ko/glossary/tcp_handshake/index.md b/files/ko/glossary/tcp_handshake/index.md new file mode 100644 index 00000000000000..08591c10dfb2c1 --- /dev/null +++ b/files/ko/glossary/tcp_handshake/index.md @@ -0,0 +1,22 @@ +--- +title: TCP 핸드셰이크 (TCP handshake) +slug: Glossary/TCP_handshake +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +{{glossary('TCP','전송 제어 프로토콜(Transmission Control Protocol)')}}은 uses a **3방향 핸드셰이크(three-way handshake)** (TCP-handshake, 3개의 메시지 핸드셰이크 및/또는 SYN-SYN-ACK로 알려져 있습니다)를 사용하여 IP 기반 네트워크를 통해 TCP/IP 연결을 설정합니다. + +TCP 세션을 협상하고 시작하기 위해 TCP가 전송하는 세 가지 메시지는 각각 **SYN(SYNchronize)**, **SYN-ACK(SYNchronize-ACKnowledgement)**, **ACK(ACKnowledge)** 라는 이름을 가집니다. 세 가지 메시지 메커니즘은 서로 정보를 주고 받기를 윈하는 두 컴퓨터가 HTTP 브라우저 요청과 같은 데이터를 전송하기 전에 연결 매개변수를 협상할 수 있도록 설계되었습니다. + +호스트(일반적으로 브라우저)는 TCP SYNchronize 패킷을 서버로 보냅니다. 서버는 SYN을 수신하고 SYNchronize-ACKnowledgement를 다시 보냅니다. 호스트는 서버의 SYN-ACK을 수신하고 ACKnowledge를 다시 보냅니다. 서버는 ACK를 수신하고 TCP 소켓 연결이 설정됩니다. + +이 핸드셰이크 단계는 보안 연결을 생성할 때, {{glossary('DNS', 'DNS 조회')}} 이후 및 {{glossary('TLS')}} 핸드셰이크 이전에 발생합니다. 4방향 핸드셰이크를 통해 연결의 각 측면에서 독립적으로 연결을 종료할 수 있습니다. + +## 같이 보기 + +- [전송 계층 보안 (Transport Layer Security, TLS)프로토콜](/ko/docs/Web/Security/Transport_Layer_Security) +- {{Glossary("HTTPS")}} +- 위키백과의 [전송 계층 보안](https://en.wikipedia.org/wiki/Transport_Layer_Security) diff --git a/files/ko/glossary/tcp_slow_start/index.md b/files/ko/glossary/tcp_slow_start/index.md new file mode 100644 index 00000000000000..242f18a06f9b96 --- /dev/null +++ b/files/ko/glossary/tcp_slow_start/index.md @@ -0,0 +1,21 @@ +--- +title: TCP 느린 시작 (TCP slow start) +slug: Glossary/TCP_slow_start +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +{{glossary('TCP')}} 느린 시작은 네트워크 성능에 대한 전송 속도를 높이는 데 도움이 됩니다. 처음에는 해당 기능이 무엇인지 알지 못하고 혼잡을 일으키지 않고 이 작업을 수행합니다. {{glossary('TCP')}} 느린 시작은 패킷 전송에 사용 가능한 대역폭을 감지하고 네트워크 연결 속도의 균형을 맞추는 데 사용되는 알고리즘입니다. 초기에 기능을 알 수 없는 네트워크 혼잡 현상을 방지하고, 네트워크의 최대 용량을 찾을 때까지 확산되는 정보의 양을 천천히 늘립니다. + +TCP 느린 시작을 구현하기 위해, 혼잡 창('cwnd')은 확인('ACK')을 수신하기 전에 소스가 네트워크를 통해 전송할 수 있는 데이터 양에 대한 상한을 설정합니다. 느린 시작 임계값('ssthresh')은 느린 시작의 (비)활성화를 결정합니다. 새로운 연결이 이루어지면 cwnd는 하나의 TCP 데이터 또는 확인 패킷으로 초기화되고 확인 또는 ACK를 기다립니다. 해당 ACK가 수신되면, 'cwnd'가 'ssthresh'보다 커질 때까지 혼잡 창이 증가됩니다. 혼잡이 발생하면 느린 시작도 종료됩니다. + +## 혼잡 제어 + +혼잡 자체는 메시지 트래픽이 너무 많아 네트워크 응답 시간이 느려질 때 네트워크 계층 내에서 발생하는 상태입니다. 서버는 TCP 패킷으로 데이터를 보내고, 사용자의 클라이언트는 확인 또는 ACK를 반환하여 전달을 확인합니다. 하드웨어 및 네트워크 상태에 따라 연결 용량이 제한됩니다. 서버가 너무 많은 패킷을 너무 빨리 보내면 해당 패킷이 삭제됩니다. 즉, 확인이 없을 것입니다. 서버는 이를 누락된 ACK로 등록합니다. 혼잡 제어 알고리즘은 전송된 패킷과 ACK의 흐름을 사용하여 전송 속도를 결정합니다. + +## 같이 보기 + +- [페이지 채우기: 브라우저 작동 방식](/ko/docs/Web/Performance/How_browsers_work) +- [http 개요](/ko/docs/Web/HTTP/Overview) diff --git a/files/ko/glossary/telnet/index.md b/files/ko/glossary/telnet/index.md new file mode 100644 index 00000000000000..ff73e585d2f31f --- /dev/null +++ b/files/ko/glossary/telnet/index.md @@ -0,0 +1,14 @@ +--- +title: 텔넷 (Telnet) +slug: Glossary/Telnet +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**텔넷(Telnet)** 은 원격 컴퓨터에 접근하기 위한 명령줄 도구이자 기본 TCP/IP 프로토콜입니다. + +## 같이 보기 + +- 위키백과의 [텔넷](https://en.wikipedia.org/wiki/Telnet) diff --git a/files/ko/glossary/texel/index.md b/files/ko/glossary/texel/index.md new file mode 100644 index 00000000000000..f2c191fa87bf61 --- /dev/null +++ b/files/ko/glossary/texel/index.md @@ -0,0 +1,25 @@ +--- +title: 텍셀 (Texel) +slug: Glossary/Texel +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +3D 그래픽에서, **텍셀(texel)** 은 텍스처 내의 단일 픽셀입니다. '텍스처'는 3D 렌더링 이미지 내의 각형 표면에 표시되는 이미지입니다. 이미지가 픽셀 모음으로 특성을 가지고 있는 것과 유사하게, 텍스처는 텍셀 모음으로 특성을 가집니다. + +래스터 이미지 파일의 픽셀은 색상 데이터와 때로는 불투명도 데이터를 포함하는 일련의 비트로, 컴퓨터 모니터와 같은 출력 장치의 픽셀 표시에 매핑됩니다. 픽셀이 텍스처 리소스로 사용되는 이미지에 속하는 경우 '텍스처 픽셀' 또는 줄여서 '텍셀'이라고 합니다. 화면 픽셀에 직접 매핑하는 대신, 텍셀의 데이터는 모델링되는 3D 객체의 좌표 공간 위치에 매핑됩니다. 텍스처는 색상과 깊이, 반사율과 같은 기타 표면 품질을 전달하는 데 사용할 수 있습니다. 여러 텍스처를 겹쳐서 복잡한 표면 오버레이를 만들 수 있습니다. + +적절한 텍셀을 다각형의 해당 점에 매핑하는 프로세스를 **텍스처 매핑** 이라고 합니다. 텍스처 매핑은 표시할 3D 이미지를 렌더링하는 프로세스의 한 단계입니다. 소스 텍셀 그리드와 대상 픽셀 그리드가 정렬되지 않으면, 추가 **텍스처 필터링** 이 적용되어 결과 텍스처 매핑 픽셀(텍스처 '확대' 또는 '축소')을 매끄럽게 만듭니다. 렌더링 프로세스의 최종 출력은 모델 주위에 텍스처가 '둘러싸여진' 3D 모델의 평평한 2D의 투영한 형태입니다. + +렌더 파이프라인 중, 텍스처 매핑은 일반적으로 장면을 조명하기 전에 수행됩니다. 그러나, WebGL에선 조명이 텍스처 매핑 프로세스의 일부로 수행됩니다. + +## 같이 보기 + +- 위키백과의 [텍셀 (그래픽스)](<https://en.wikipedia.org/wiki/Texel_(graphics)>) +- 위키백과의 [텍스처 매핑](https://en.wikipedia.org/wiki/Texture_mapping) +- 위키백과의 [텍스처 필터링](https://en.wikipedia.org/wiki/Texture_filtering) +- [WebGL에서 텍스처 사용하기](/ko/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL) +- [WebGL에서의 조명](/ko/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL) +- [WebGL에서 텍스처 애니메이션](/ko/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL) diff --git a/files/ko/glossary/thread/index.md b/files/ko/glossary/thread/index.md new file mode 100644 index 00000000000000..afe08506776f47 --- /dev/null +++ b/files/ko/glossary/thread/index.md @@ -0,0 +1,27 @@ +--- +title: 스레드 (Thread) +slug: Glossary/Thread +l10n: + sourceCommit: 3734941b8a491f3d95741669d68b827602f83954 +--- + +{{GlossarySidebar}} + +컴퓨터 과학의 스레드는 동시에 여러 작업이나 프로그램을 실행하는 것입니다. 코드를 실행할 수 있는 각 단위를 **스레드** 라고 합니다. + +**{{Glossary("main thread", "메인 스레드")}}** 는 브라우저에서 사용자 이벤트를 처리하고, 디스플레이를 렌더링 및 페인팅하고, 일반적인 웹 페이지나 앱을 구성하는 대부분의 코드를 실행하는 데 사용되는 스레드입니다. 이러한 일이 모두 하나의 스레드에서 발생하기 때문에, 느린 웹 사이트나 앱 스크립트는 전체 브라우저의 속도를 저하시킵니다. 더 안 좋은 부분은 사이트나 앱 스크립트가 무한 루프에 빠지면 전체 브라우저가 중단된다는 것입니다. + +최신 {{Glossary("JavaScript")}}는 추가 스레드를 생성하는 방법을 제공하며, 각 스레드는 서로 통신하면서 독립적으로 실행됩니다. 자체 스레드에서 기본 스레드와 동시에 실행되는 하위 프로그램을 분리하는 데 사용할 수 있는 [web workers](/ko/docs/Web/API/Web_Workers_API)와 같은 기술을 사용해 수행될 수 있습니다. 이러한 기술들로 느리거나 복잡하거나 장기간 실행되는 작업을 메인 스레드와 독립적으로 실행할 수 있으며, 사이트나 앱의 전반적인 성능은 물론 브라우저의 전반적인 성능도 보존할 수 있습니다. 또한, 스레딩을 사용하면 웹 애플리케이션이 최신 멀티 코어 프로세서를 활용할 수 있기 때문에, 단일 코어에서 실행되는 멀티 스레드 애플리케이션보다 훨씬 더 나은 성능을 얻을 수 있습니다. + +**[service worker](/ko/docs/Web/API/Service_Worker_API)** 라는 특별한 유형의 워커를 생성하여 사용자의 허가를 받아 사이트에서 실행할 수 있습니다. 사용자가 현재 해당 사이트를 사용하지 않는 경우에도 마찬가지입니다. 서비스 워커는 사용자가 사이트에 활성 사용자로써 참여하지 않는 동안 어떤 일이 발생하면 사용자에게 알릴 수 있는 사이트를 만드는 데 사용됩니다. 예를 들어, 사용자가 현재 메일 서비스에 로그인하지 않았음에도 새 이메일을 받았다고 알리는 등의 작업을 수행할 수 있습니다. + +전반적으로 우리 운영 체제 내의 이러한 스레드는 매우 유용하다는 것을 알 수 있습니다. 이는 컨텍스트 전환 시간을 최소화하고 보다 효율적인 통신을 가능하게 하며 다중 프로세서 아키텍처를 추가로 사용할 수 있도록 해줍니다. + +## 같이 보기 + +- [비동기 JavaScript](/ko/docs/Learn/JavaScript/Asynchronous) +- [Web worker API](/ko/docs/Web/API/Web_Workers_API) +- [Service worker API](/ko/docs/Web/API/Service_Worker_API) +- [용어 사전](/ko/docs/Glossary) + + - {{Glossary("Main thread")}} diff --git a/files/ko/glossary/three_js/index.md b/files/ko/glossary/three_js/index.md new file mode 100644 index 00000000000000..0ae1fc39024bf3 --- /dev/null +++ b/files/ko/glossary/three_js/index.md @@ -0,0 +1,15 @@ +--- +title: Three js +slug: Glossary/Three_js +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +three.js는 GPU 기반 게임 및 기타 그래픽 기반 앱을 {{Glossary("browser", "브라우저")}}에서 바로 실행할 수 있는 {{Glossary("JavaScript")}} 기반 {{Glossary("WebGL")}} 엔진입니다. three.js 라이브러리는 브라우저에서 3D 장면을 그리기 위한 다양한 기능과 {{Glossary("API","API")}}를 제공합니다. + +## 같이 보기 + +- 위키백과의 [Three.js](https://en.wikipedia.org/wiki/Three.js) +- [three.js 공식 웹사이트](https://threejs.org/) diff --git a/files/ko/glossary/time_to_first_byte/index.md b/files/ko/glossary/time_to_first_byte/index.md new file mode 100644 index 00000000000000..50de7755255b6a --- /dev/null +++ b/files/ko/glossary/time_to_first_byte/index.md @@ -0,0 +1,22 @@ +--- +title: Time to first byte (TTFB) +slug: Glossary/Time_to_first_byte +l10n: + sourceCommit: 83f30ecaaeb6227dc0d4551f71eb8be1cacb8e94 +--- + +{{GlossarySidebar}} + +**Time to First Byte(TTFB)** 는 브라우저가 페이지를 요청한 시점과 서버로부터 첫 번째 정보 바이트를 수신한 시점 사이의 시간을 나타냅니다. 이 시간에는 [DNS](/ko/docs/Glossary/DNS) 조회와 [TCP](/ko/docs/Glossary/TCP) 핸드셰이크 및 [TLS](/ko/docs/Glossary/TLS) 핸드셰이크([HTTPS](/ko/docs/Glossary/HTTPS)를 통해 이루어진 경우)를 사용한 연결 설정이 포함됩니다. + +TTFB는 요청 시작과 응답 시작 사이에 걸리는(밀리초)입니다. + +```plain +TTFB = responseStart - navigationStart +``` + +## 같이 보기 + +- [일반적인 HTTP 세션](/ko/docs/Web/HTTP/Session) +- [PerformanceResourceTiming](/ko/docs/Web/API/PerformanceResourceTiming) +- [PerformanceTiming](/ko/docs/Web/API/PerformanceTiming) diff --git a/files/ko/glossary/time_to_interactive/index.md b/files/ko/glossary/time_to_interactive/index.md new file mode 100644 index 00000000000000..46a5144ae6e02b --- /dev/null +++ b/files/ko/glossary/time_to_interactive/index.md @@ -0,0 +1,22 @@ +--- +title: Time to interactive (TTI) +slug: Glossary/Time_to_interactive +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**Time to Interactive(TTI)** 는 마지막 [긴 작업](/ko/docs/Web/API/PerformanceLongTaskTiming)이 완료되고 5초의 네트워크 및 메인 스레드가 비활성화된 시점으로 정의된 비표준화된 웹 성능 '진행' 측정항목입니다. + +2018년 Web Incubator Community Group에서 제안한 TTI는 페이지나 애플리케이션에 유용한 콘텐츠가 포함되어 있고 메인 스레드가 유휴 상태이며 이벤트 핸들러 등록을 포함해 사용자 상호작용에 자유롭게 응답하는 경우를 설명하는 측정 기준을 제공하기 위한 것입니다. + +#### 경고 + +TTI는 [긴 작업 API](/ko/docs/Web/API/PerformanceLongTaskTiming)의 정보를 활용하여 파생되어 나온 정보입니다. 일부 성능 모니터링 도구에는 사용할 수 있지만, TTI는 이 글을 쓰는 시점에서는 공식 웹 명세서의 일부가 아닙니다. + +## 같이 보기 + +- Web Incubator Community Group의 [TTI의 정의](https://github.com/WICG/time-to-interactive) +- Radimir Bitsov의 [Time to Interactive — 인간 중심 지표에 초점](https://calibreapp.com/blog/time-to-interactive) +- [TTI 추적](https://web.dev/user-centric-performance-metrics/#tracking_tti) diff --git a/files/ko/glossary/tld/index.md b/files/ko/glossary/tld/index.md new file mode 100644 index 00000000000000..108202bf41092e --- /dev/null +++ b/files/ko/glossary/tld/index.md @@ -0,0 +1,35 @@ +--- +title: 최상위 도메인 (top-level domain, TLD) +slug: Glossary/TLD +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +최상위 도메인(top-level domain, TLD)은 인터넷의 계층적 {{Glossary("DNS")}}(도메인 네임 시스템)에서 가장 일반적인 {{Glossary("domain", "도메인")}}입니다. TLD는 {{Glossary("domain name", "도메인 네임")}}의 마지막 구성 요소입니다(`developer.mozilla.org`의 'org'). + +국제 인터넷 주소 관리 기구(Internet Corporation for Assigned Names and Numbers, {{Glossary("ICANN")}})는 각 TLD를 관리할 조직을 지정합니다. 관리 조직의 엄격한 정보에 따라, TLD는 웹 사이트의 목적, 소유권 또는 국적에 대한 단서 역할을 하는 경우가 많습니다. + +인터넷 주소의 예를 생각해 봅시다(`https://developer.mozilla.org`). +여기서 org는 TLD입니다. mozilla.org는 2차 도메인 이름입니다. developer는 하위 도메인 이름입니다. 이 모든 것이 정규화된 도메인 이름을 구성합니다. https\://를 추가하면 완전한 URL이 됩니다. + +현재 {{Glossary("IANA")}}에서는 아래와 같은 최상위 도메인 그룹을 구분합니다. + +- 국가 코드 최상위 도메인 (country-code top-level domains, ccTLD) + - : 국가 또는 지역에 대해 설정된 2자리 도메인입니다(예, 미국의 경우 '.us'). +- 국제화된 국가 코드 최상위 도메인 (internationalized country code top-level domains, IDN ccTLD) + - : 라틴어가 아닌 문자 세트입니다(예, 아랍어 또는 중국어). +- 일반 최상위 도메인 (generic top-level domains, gTLD) + - : 3자 이상의 최상위 도메인입니다. +- 스폰서가 없는 최상위 도메인 + - : 글로벌 인터넷 커뮤니티를 위해 ICANN 프로세스에 의해 설정된 정책에 따라 직접 운영되는 도메인입니다(예, 'com' 및 'edu'). +- 스폰서 최상위 도메인 (sponsored top-level domains, sTLD) + - : 이러한 도메인은 커뮤니티 테마 개념을 기반으로 신청자가 TLD를 사용할 자격이 있는지 여부를 결정하는 민간 조직에서 제안하고 후원합니다. +- 인프라 최상위 도메인 + - : 이 그룹은 하나의 도메인인 {{Glossary("ARPA", "Address and Routing Parameter Area")}} (ARPA)로 구성됩니다. + +## 같이 보기 + +- 위키백과의 [TLD](https://en.wikipedia.org/wiki/TLD) +- [최상위 도메인 목록](https://www.iana.org/domains/root/db) diff --git a/files/ko/glossary/tofu/index.md b/files/ko/glossary/tofu/index.md new file mode 100644 index 00000000000000..4479ad075c6f11 --- /dev/null +++ b/files/ko/glossary/tofu/index.md @@ -0,0 +1,16 @@ +--- +title: 첫 사용에 대한 신뢰 (Trust On First Use, TOFU) +slug: Glossary/TOFU +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**첫 사용에 대한 신뢰 (Trust On First Use, TOFU)** 는 클라이언트가 알 수 없는 서버와 신뢰 관계를 생성해야 하는 보안 모델입니다. 이를 위해, 클라이언트는 로컬에 저장된 식별자(예, 공개 키)를 찾습니다. 식별자가 발견되면, 클라이언트는 연결을 설정할 수 있습니다. 식별자가 발견되지 않으면, 클라이언트는 사용자에게 클라이언트가 식별자를 신뢰해야 하는지 결정하라는 메시지를 표시할 수 있습니다. + +TOFU는 브라우저가 리디렉션 규칙을 따르는 {{HTTPHeader("Strict-Transport-Security")}} ({{Glossary("HSTS")}})의 SSH 프로토콜에서 사용됩니다. + +## 같이 보기 + +- 위키백과의 [TOFU](https://en.wikipedia.org/wiki/Trust_on_first_use) diff --git a/files/ko/glossary/top_layer/index.md b/files/ko/glossary/top_layer/index.md new file mode 100644 index 00000000000000..f781a13afad67a --- /dev/null +++ b/files/ko/glossary/top_layer/index.md @@ -0,0 +1,33 @@ +--- +title: 최상위 계층 (Top layer) +slug: Glossary/Top_layer +l10n: + sourceCommit: 9fa28f84a3aef826a30d402e63153b63db739a89 +--- + +{{GlossarySidebar}} + +**최상위 계층(top layer)** 은 뷰포트의 전체 너비와 높이에 걸쳐 있고 웹 문서에 표시된 다른 모든 레이어 위에 위치하는 특정 레이어입니다. 페이지의 다른 모든 콘텐츠 위에 표시되어야 하는 요소를 포함하기 위해 브라우저에서 생성됩니다. + +최상위 레이어에 배치된 요소는 해당 {{cssxref("::backdrop")}} 의사 요소와 마찬가지로 새로운 +[스태킹 컨텍스트(stacking context)](/ko/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context)를 생성합니다. + +최상위 레이어에 표시되는 요소는 아래와 같습니다. + +- 전체 화면 요소입니다. 즉, 성공적인 {{domxref("Element.requestFullscreen()")}} 호출로 인해 전체 화면 모드로 표시되는 요소입니다. +- 성공적인 {{domxref("HTMLDialogElement.showModal()")}} 호출을 통해 모달로 표시되는 {{htmlelement("dialog")}} 요소입니다. +- 성공적인 {{domxref("HTMLElement.showPopover()")}} 호출을 통해 표시된 Popover 요소입니다. + +Chrome과 같은 일부 브라우저는 특수 DOM 트리 항목 내 최상위 레이어에 배치된 요소를 표시합니다. 예를 들면, + +![크롬 개발자 도구에 표시된 것처럼 최상위 레이어의 요소](top_layer_devtools.png) + +최상위 계층은 내부 브라우저 개념이므로 코드에서 직접 조작할 수 없습니다. CSS 및 JavaScript를 사용하여 최상위 레이어에 배치된 요소를 타겟팅할 수 있지만, 최상위 레이어 자체를 타겟팅할 수는 없습니다. + +## 같이 보기 + +- [스태킹 컨텍스트(stacking context)](/ko/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context) +- [Fullscreen API](/ko/docs/Web/API/Fullscreen_API) +- {{htmlelement("dialog")}} 요소, {{domxref("HTMLDialogElement")}} 인터페이스 +- [Popover API](/ko/docs/Web/API/Popover_API) +- {{CSSXref(":fullscreen")}} 의사 클래스 diff --git a/files/ko/glossary/trident/index.md b/files/ko/glossary/trident/index.md new file mode 100644 index 00000000000000..5e14dce0ec47cb --- /dev/null +++ b/files/ko/glossary/trident/index.md @@ -0,0 +1,14 @@ +--- +title: Trident +slug: Glossary/Trident +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +Trident(또는 MSHTML)는 {{Glossary("Microsoft Internet Explorer","인터넷 익스플로러")}}를 구동하는 레이아웃 엔진이었습니다. 'EdgeHTML' 이라는 Trident {{Glossary("fork", "복사본")}}이 인터넷 익스플로러의 후속 제품인 {{Glossary("Microsoft Edge","Edge")}}에서 Trident를 대체했습니다. + +## 같이 보기 + +- 위키백과의 [Trident 레이아웃 엔진](https://en.wikipedia.org/wiki/Trident_%28layout_engine%29) diff --git a/files/ko/glossary/truthy/index.md b/files/ko/glossary/truthy/index.md index 187abad0579aed..6f8bf2ffab5ff6 100644 --- a/files/ko/glossary/truthy/index.md +++ b/files/ko/glossary/truthy/index.md @@ -31,7 +31,7 @@ if (-Infinity) ### 논리적 AND 연산자, && -첫 번째 피연산자가 참인 경우, [논리적 AND 연산자](/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND)는 두 번째 피연산자를 반환합니다. +첫 번째 피연산자가 참인 경우, [논리적 AND 연산자](/ko/docs/Web/JavaScript/Reference/Operators/Logical_AND)는 두 번째 피연산자를 반환합니다. ```js true && "dog" diff --git a/files/ko/glossary/turn/index.md b/files/ko/glossary/turn/index.md new file mode 100644 index 00000000000000..470df1d4ee7041 --- /dev/null +++ b/files/ko/glossary/turn/index.md @@ -0,0 +1,17 @@ +--- +title: TURN +slug: Glossary/TURN +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**TURN** (Traversal Using Relays around NAT)은 컴퓨터가 {{glossary("NAT", "네트워크 주소 변환")}} (NAT) 또는 방화벽 뒤에서 데이터를 주고받을 수 있도록 하는 {{Glossary('protocol', "프로토콜")}}입니다. TURN은 {{Glossary("WebRTC")}}에서 인터넷상의 임의의 두 장치가 P2P(peer-to-peer) 연결을 시작할 수 있도록 하는 데 사용됩니다. + +## 같이 보기 + +- 위키백과의 [TURN](https://en.wikipedia.org/wiki/TURN) +- [WebRTC 프로토콜](/ko/docs/Web/API/WebRTC_API/Protocols) +- [명세서](https://www.ietf.org/rfc/rfc5766.txt) +- [IPv6에 대한 명세서 업데이트](https://www.ietf.org/rfc/rfc6156.txt) diff --git a/files/ko/glossary/type/index.md b/files/ko/glossary/type/index.md new file mode 100644 index 00000000000000..1f60f825d08b02 --- /dev/null +++ b/files/ko/glossary/type/index.md @@ -0,0 +1,31 @@ +--- +title: 타입 (Type) +slug: Glossary/Type +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**타입** 은 저장할 수 있는 데이터 종류와 데이터가 지켜야 할 구조에 영향을 미치는 {{glossary("value", "값")}}의 특성입니다. 예를 들어, {{Glossary("boolean", "불리언")}} [데이터 타입](/ko/docs/Web/JavaScript/Data_structures)은 일정 시간에 `true` 또는 `false` 값만 가질 수 있는 반면, {{Glossary("string", "문자열")}}은 문자열 또는 일련의 문자를 보유할 수 있는 기능이 있습니다. {{Glossary("number", "숫자")}}는 모든 종류의 숫자 값 등을 보유할 수 있습니다. + +값의 데이터 타입은 해당 값에 유효한 작업에도 영향을 미칩니다. 예를 들어, 숫자 타입의 값은 다른 숫자와 곱할 수 있지만, 문자열로는 곱할 수 없습니다. 문자열 '2'와 같이 해당 문자열에 숫자'만' 포함되어 있는 경우에도 마찬가지입니다. + +타입은 또한 서로 다른 값 간의 비교에 대한 유용한 지식을 제공합니다. 구조화된 타입 간의 비교는 항상 쉬운 가정은 아닙니다. 이전 데이터 구조가 동일하더라도 [프로토타입 체인](/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) 내부에 상속된 구조가 있을 수 있기 때문입니다. + +값 유형을 잘 모르는 경우, [`typeof`](/ko/docs/Web/JavaScript/Reference/Operators/typeof) 연산자를 사용할 수 있습니다. + +## 같이 보기 + +- 위키백과의 [데이터 타입](https://en.wikipedia.org/wiki/Data_type) +- [JavaScript 데이터 타입](/ko/docs/Web/JavaScript/Data_structures) +- [용어 사전](/ko/docs/Glossary) + + - {{Glossary("JavaScript")}} + - {{Glossary("string")}} + - {{Glossary("number")}} + - {{Glossary("bigint")}} + - {{Glossary("boolean")}} + - {{Glossary("null")}} + - {{Glossary("undefined")}} + - {{Glossary("symbol")}} diff --git a/files/ko/glossary/udp/index.md b/files/ko/glossary/udp/index.md new file mode 100644 index 00000000000000..949a638dfffad5 --- /dev/null +++ b/files/ko/glossary/udp/index.md @@ -0,0 +1,19 @@ +--- +title: 사용자 데이터그램 프로토콜 (User Datagram Protocol, UDP) +slug: Glossary/UDP +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**사용자 데이터그램 프로토콜 (User Datagram Protocol, UDP)** 은 보안과 신뢰성보다 전송 속도와 효율성이 더 중요한 경우 데이터를 전송하기 위해 {{glossary("IPv6","IP")}}과 함께 오래 사용된 {{glossary("protocol", "프로토콜")}}입니다. + +UDP는 최소한의 프로토콜 메커니즘을 갖춘 간단한 [무연결 통신](https://en.wikipedia.org/wiki/Connectionless_communication) 모델을 사용합니다. UDP는 데이터 무결성을 위한 [checksums](https://en.wikipedia.org/wiki/Checksum) 및 데이터그램의 소스 및 대상에서 다양한 기능을 처리하기 위한 [포트 번호](https://en.wikipedia.org/wiki/Port_numbers)를 제공합니다. UDP에는 [핸드셰이킹](https://en.wikipedia.org/wiki/Handshaking) 대화 수단이 없으므로, 사용자 프로그램이 기본 네트워크의 [불안정성](<https://en.wikipedia.org/wiki/Reliability_(computer_networking)>)에 노출됩니다. 전달, 순서 또는 중복에 관한 보호가 보장되지 않습니다. 네트워크 인터페이스 수준에서 오류 수정 기능이 필요한 경우, 애플리케이션은 이 목적을 가지고 설계된 [전송 제어 프로토콜(Transmission Control Protocol, TCP)](https://en.wikipedia.org/wiki/Transmission_Control_Protocol) 또는 [스트림 제어 전송 프로토콜(Stream Control Transmission Protocol, SCTP)](https://en.wikipedia.org/wiki/Stream_Control_Transmission_Protocol)를 사용할 수 있습니다. + +UDP는 오류 확인 및 수정이 필요하지 않거나 애플리케이션에서 수행되는 목적에 적합합니다. UDP는 [프로토콜 스택](https://en.wikipedia.org/wiki/Protocol_stack)에서 이러한 처리를 인한 오버헤드를 방지합니다. 시간에 민감한 애플리케이션은 UDP를 사용하는 경우가 많습니다. [실시간 시스템](https://en.wikipedia.org/wiki/Real-time_system)에서는 UDP는 옵션이 아닐 수 있는 [재전송](<https://en.wikipedia.org/wiki/Retransmission_(data_networks)>)으로 인해 지연된 패킷을 기다리는 것보다, 패킷 삭제가 더 바람직하기 때문입니다. + +## 같이 보기 + +- 위키백과의 [User Datagram Protocol](https://en.wikipedia.org/wiki/User_Datagram_Protocol) +- [명세서](https://datatracker.ietf.org/doc/html/rfc768) diff --git a/files/ko/glossary/unix_time/index.md b/files/ko/glossary/unix_time/index.md new file mode 100644 index 00000000000000..0f0a7a44e18fe7 --- /dev/null +++ b/files/ko/glossary/unix_time/index.md @@ -0,0 +1,17 @@ +--- +title: 유닉스 시간 (Unix time) +slug: Glossary/Unix_time +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +유닉스 시간(Unix time)은 타임스탬프를 표현하는 방법으로, 일반적으로 1970년 1월 1일 자정(UTC)인 유닉스의 시간 표기(Unix epoch)가 시작된 이후의 초 수로 정의됩니다. 윤초(Leap seconds)는 무시됩니다. + +웹 플랫폼에서, 유닉스 시간(Unix time)이 타임스탬프에 사용되며, 유닉스의 시간 표기(Unix epoch)가 시작된 이후의 밀리초 단위로 표시됩니다. + +## 같이 보기 + +- 위키백과의 [Unix time](https://en.wikipedia.org/wiki/Unix_time) +- 위키백과의 [윤초(Leap second)](https://en.wikipedia.org/wiki/Leap_second) diff --git a/files/ko/glossary/usenet/index.md b/files/ko/glossary/usenet/index.md new file mode 100644 index 00000000000000..6021225cfca92c --- /dev/null +++ b/files/ko/glossary/usenet/index.md @@ -0,0 +1,14 @@ +--- +title: 유즈넷 (Usenet) +slug: Glossary/Usenet +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +유즈넷(Usenet)은 각 게시물이 여러 서버에 복제되는 인터넷 토론 시스템입니다. 과거의 인터넷 포럼과 마찬가지로, 유즈넷은 게시판 시스템처럼 동작했습니다. + +## 같이 보기 + +- 위키백과의 [Usenet](https://en.wikipedia.org/wiki/Usenet) diff --git a/files/ko/glossary/validator/index.md b/files/ko/glossary/validator/index.md new file mode 100644 index 00000000000000..c9a95e485c11a4 --- /dev/null +++ b/files/ko/glossary/validator/index.md @@ -0,0 +1,15 @@ +--- +title: 유효성 검사기 (Validator) +slug: Glossary/Validator +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +유효성 검사기(validator)는 코드의 구문 오류를 검사하는 프로그램입니다. 유효성 검사기는 모든 형식이나 언어에 대해 생성될 수 있지만, 이 문서에서는 {{Glossary("HTML")}}, {{Glossary("CSS")}} 및 {{Glossary("XML")}}을 확인하는 도구에 대해 얘기합니다. + +## 같이 보기 + +- 위키백과의 [유효성 검사기](https://en.wikipedia.org/wiki/Validator) +- [유효성 검사기의 간단한 목록](https://firefox-source-docs.mozilla.org/devtools-user/validators/index.html) diff --git a/files/ko/glossary/value/index.md b/files/ko/glossary/value/index.md new file mode 100644 index 00000000000000..950dba35255ed9 --- /dev/null +++ b/files/ko/glossary/value/index.md @@ -0,0 +1,18 @@ +--- +title: 값 (Value) +slug: Glossary/Value +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +데이터 또는 해당 데이터 주변의 객체 **{{Glossary("Wrapper", "래퍼")}}** 맥락에서, 값은 객체 래퍼에 포함된 **{{Glossary("Primitive","기본 값")}}** 입니다. **{{Glossary("Variable","변수")}}** 또는 **{{Glossary("Property","속성")}}** 맥락에서, 값은 기본 값이거나 **{{Glossary("Object reference","객체 참조")}}** 일 수 있습니다. + +CSS 속성 값의 맥락에는, 지정된 값, 계산된 값, 실제 값이 있습니다. 모든 요소와 의사 요소에 적용되는 모든 CSS 속성의 최종 값은 4단계를 통한 계산의 결과입니다. 이 값은 명세서([지정된 값](/ko/docs/Web/CSS/specified_value))를 통해 결정된 다음, 상속에 사용되는 값([계산된 값](/ko/docs/Web/CSS/computed_value))으로 해석됩니다. 그 후에 필요한 경우 절대값([사용된 값](/ko/docs/Web/CSS/used_value))으로 변환되고, 최종적으로 로컬 환경([실제 값](/ko/docs/Web/CSS/actual_value))의 제한에 따라 변환됩니다. + +CSS 데이터 타입은 [CSS 값 및 단위](/ko/docs/Web/CSS/CSS_Values_and_Units)를 참조하세요. + +## 같이 보기 + +- 위키백과의 [원시 래퍼 클래스](https://en.wikipedia.org/wiki/Primitive_wrapper_class) diff --git a/files/ko/glossary/vendor_prefix/index.md b/files/ko/glossary/vendor_prefix/index.md new file mode 100644 index 00000000000000..74b12e52dddc0a --- /dev/null +++ b/files/ko/glossary/vendor_prefix/index.md @@ -0,0 +1,83 @@ +--- +title: 공급업체 접두사 (Vendor Prefix) +slug: Glossary/Vendor_Prefix +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +브라우저 공급자는 개발자가 새로운 아이디어를 실험할 수 있도록 실험적이거나 비표준 CSS 속성과 JavaScript API에 접두사를 추가하곤 했습니다. 이 방법은 이론적으로 표준화 과정에서 실험이 의존성을 가지게 되고 웹 개발자의 코드가 손상되는 것을 방지하는 데 도움이 되었습니다. + +웹 개발자는 실험적 성격에도 불구하고 프로덕션 웹 사이트에 접두사 기능을 포함했습니다. 이로 인해 브라우저 공급자가 새로운 기능을 개발하는 동안 호환성을 보장하기가 더욱 어려워졌습니다. 접두사가 붙은 기능을 포함하면 인기 있는 웹사이트를 렌더링하기 위해, 다른 브라우저의 접두사를 추가해야 하는 소규모 브라우저 공급자에도 피해를 주었습니다. + +이제, 브라우저의 실험적 기능은 플래그 뒤에 위치합니다. +이를 통해 개발자는 브라우저 구성을 변경하여 향후 기능을 테스트할 수 있습니다. 또한, 브라우저는 사용자가 제어하는 플래그 또는 기본 설정 뒤에 실험적 기능을 추가합니다. 더 작은 명세서에 대해 플래그를 추가하면 훨씬 더 빠르게 안정적인 상태에 도달할 수 있습니다. + +## CSS 접두사 + +이전 코드 베이스에서 볼 수 있는 가장 일반적인 브라우저 CSS 접두사는 아래와 같습니다. + +- `-webkit-` (Chrome, Safari, 최신 버전의 Opera 및 Edge, 거의 모든 iOS 브라우저(iOS용 Firefox), 기본적으로 모든 WebKit 및 Chromium 기반 브라우저) +- `-moz-` (Firefox) +- `-o-` (WebKit 이전의 오래된 Opera 버전) +- `-ms-` (인터넷 익스플로러 및 Chromium 이전 Microsoft Edge) + +예제 사용법입니다. + +```css +-webkit-transition: all 4s ease; +-moz-transition: all 4s ease; +-ms-transition: all 4s ease; +-o-transition: all 4s ease; +transition: all 4s ease; +``` + +코드 베이스에서 위 코드를 발견하면 마지막 줄을 제외하고 모두 안전하게 제거할 수 있습니다. 모든 브라우저는 공급자 접두사 없이 [전환](/ko/docs/Web/CSS/transition#browser_compatibility)을 지원합니다. + +```css +transition: all 4s ease; +``` + +## API 접두사 + +역사적으로, 브라우저 공급자는 실험적인 API에도 접두사를 사용해 왔습니다. 전체 인터페이스가 실험적이라면 인터페이스 이름이 접두어로 붙습니다(그러나 내부의 속성이나 메서드는 붙지 않습니다). 실험적인 속성이나 방법이 표준화된 인터페이스에 추가된 경우, 개별 방법이나 속성이 앞에 붙었습니다. + +### 인터페이스 접두사 + +인터페이스 이름의 접두사는 대문사입니다. + +- `WebKit` (Chrome, Safari, 최신 버전의 Opera 및 Edge, 거의 모든 iOS 브라우저(iOS용 Firefox), 기본적으로 모든 WebKit 및 Chromium 기반 브라우저) +- `Moz` (Firefox) +- `O` (WebKit 이전의 오래된 Opera 버전) +- `MS` (인터넷 익스플로러 및 Chromium 이전 Microsoft Edge) + +### 속성 및 메서드 접두사 + +속성과 메서드의 접두사는 소문자입니다. + +- `webkit` (Chrome, Safari, 최신 버전의 Opera 및 Edge, 거의 모든 iOS 브라우저(iOS용 Firefox), 기본적으로 모든 WebKit 및 Chromium 기반 브라우저) +- `moz` (Firefox) +- `o` (WebKit 이전의 오래된 Opera 버전) +- `ms` (인터넷 익스플로러 및 Chromium 이전 Microsoft Edge) + +예제 사용법입니다. + +```js +window.requestAnimationFrame = + window.requestAnimationFrame || + window.mozRequestAnimationFrame || + window.webkitRequestAnimationFrame || + window.oRequestAnimationFrame || + window.msRequestAnimationFrame; +``` + +코드베이스에서 위 코드를 발견하면, 첫 번째 줄을 제외한 모든 줄을 안전하게 제거할 수 있습니다. 모든 브라우저는 공급자 접두사 및 `window` 없이 [`requestAnimationFrame`](/ko/docs/Web/API/window/requestAnimationFrame#browser_compatibility)을 지원합니다. + +```js +requestAnimationFrame(callback); +``` + +## 같이 보기 + +- 위키백과의 [브라우저 접두사](https://en.wikipedia.org/wiki/CSS_hack#Browser_prefixes) diff --git a/files/ko/glossary/visual_viewport/index.md b/files/ko/glossary/visual_viewport/index.md new file mode 100644 index 00000000000000..256e5fa53b27e6 --- /dev/null +++ b/files/ko/glossary/visual_viewport/index.md @@ -0,0 +1,18 @@ +--- +title: 시각적 뷰포트 (Visual Viewport) +slug: Glossary/Visual_Viewport +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +현재 표시되는 {{Glossary("viewport", "뷰포트")}} 부분을 시각적 뷰포트라고 합니다. 이는 사용자가 두 손가락으로 줌 설정(pinched-zoomed)한 경우와 같이 레이아웃 뷰포트보다 작을 수 있습니다. 시각적 뷰포트는 화면 키보드, 핀치 줌 영역 외부 영역 또는 페이지 크기에 따라 확장되지 않는 기타 화면 아티팩트를 제외한 화면의 시각적 부분입니다. + +## 같이 보기 + +- [시각적 뷰포트 API](/ko/docs/Web/API/Visual_Viewport_API) +- [뷰포트](https://en.wikipedia.org/wiki/Viewport) on Wikipedia +- [두 가지 뷰포트 이야기](https://www.quirksmode.org/mobile/viewports.html) (Quirksmode) +- MDN 용어사전의 {{Glossary("Viewport", "뷰포트")}} +- MDN 용어사전의 {{Glossary("Layout viewport", "레이아웃 뷰포트")}} diff --git a/files/ko/glossary/web_performance/index.md b/files/ko/glossary/web_performance/index.md new file mode 100644 index 00000000000000..e868ae1d2ee398 --- /dev/null +++ b/files/ko/glossary/web_performance/index.md @@ -0,0 +1,17 @@ +--- +title: 웹 성능 (Web performance) +slug: Glossary/Web_performance +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**웹 성능(Web performance)** 은 콘텐츠를 요청한 시점부터 요청한 콘텐츠가 사용자의 브라우저에 표시될 때까지의 객관적인 시간, 객관적인 렌더링 시간, 로드 시간 및 런타임에 대한 주관적인 사용자 경험입니다. + +객관적으로, 웹 페이지나 웹 애플리케이션이 다운로드되고, 사용자의 웹 브라우저에 표시되고, 반응형 및 상호작용을 할 수 있게 되는 데 걸리는 측정 가능한 시간(밀리초)입니다. 이것은 초당 프레임 수이며, 사용자 상호 작용에 메인 스레드를 사용할 수 없는 시간입니다. 주관적으로, 사용자가 콘텐츠를 요청한 시점과 사용자가 요청한 콘텐츠가 사용 가능하고 그렇게 느낄 때까지 걸리는 시간이 느리거나, 빠르다고 '느끼는지' 여부에 대한 사용자의 인식입니다. + +## 같이 보기 + +- [웹 성능 배우기](/ko/docs/Learn/Performance) +- [인지 성능](/ko/docs/Glossary/Perceived_performance) diff --git a/files/ko/glossary/web_server/index.md b/files/ko/glossary/web_server/index.md new file mode 100644 index 00000000000000..325b89ed285b57 --- /dev/null +++ b/files/ko/glossary/web_server/index.md @@ -0,0 +1,15 @@ +--- +title: 웹 서버 (Web server) +slug: Glossary/Web_server +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +웹 서버(web server)는 일반적으로 클라이언트라고 하는 사용자에게 서비스를 제공하는 하드웨어 서버에서 실행되는 소프트웨어입니다. 반면에, 서버는 일반적으로 데이터 센터로 알려진 컴퓨터로 가득 찬 방에 있는 하드웨어입니다. + +## 같이 보기 + +- [서버에 대한 소개](/ko/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server) +- 위키백과의 [서버 (컴퓨팅)](<https://en.wikipedia.org/wiki/Server_(computing)>) diff --git a/files/ko/glossary/webassembly/index.md b/files/ko/glossary/webassembly/index.md new file mode 100644 index 00000000000000..5d7425b9260bf3 --- /dev/null +++ b/files/ko/glossary/webassembly/index.md @@ -0,0 +1,16 @@ +--- +title: 웹 어셈블리 (WebAssembly) +slug: Glossary/WebAssembly +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**웹 어셈블리(Wasm, WebAssembly)** 는 성능에서 이득을 보거나 웹 페이지에 새로운 기능을 제공하기 위해 최신 웹 {{Glossary("Browser", "브라우저")}}에서 실행할 수 있는 개방형 {{Glossary("binary", "바이너리")}} 프로그래밍 형식입니다. + +## 같이 보기 + +- 위키백과의 [웹어셈블리](https://en.wikipedia.org/wiki/WebAssembly) +- [공식 웹사이트](https://webassembly.org/) +- MDN의 [웹어셈블리](/ko/docs/WebAssembly) diff --git a/files/ko/glossary/webdav/index.md b/files/ko/glossary/webdav/index.md new file mode 100644 index 00000000000000..9a49e8e4ab0c89 --- /dev/null +++ b/files/ko/glossary/webdav/index.md @@ -0,0 +1,29 @@ +--- +title: 웹 분산 저작 및 버전 관리 (Web Distributed Authoring and Versioning, WebDAV) +slug: Glossary/WebDAV +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**웹 분산 저작 및 버전 관리(Web Distributed Authoring and Versioning, WebDAV)** 는 웹 개발자가 클라이언트에서 원격으로 콘텐츠를 갱신할 수 있게 해주는 {{Glossary("HTTP")}} 확장 프로그램입니다. + +WebDAV는 단독으로 사용되는 경우가 거의 없지만, {{Glossary("CalDAV")}} (원격 접근 달력) 및 {{Glossary("CardDAV")}} (원격 접근 주소록)이라는 두 가지 확장이 매우 일반적으로 사용됩니다. + +WebDAV를 사용하면 클라이언트가 아래를 수행할 수 있습니다. + +- 웹페이지 메타데이터(예, 작성자 또는 생성 날짜) 추가, 삭제 및 검색 +- 모든 미디어 타입의 페이지를 관련 페이지에 연결 +- 문서 세트를 생성하고 계층적으로 목록을 검색 +- 웹페이지 복사 및 이동 +- 한 번에 두 명 이상이 문서를 편집하지 못하도록 잠금 + +## 같이 보기 + +- 위키백과의 [WebDAV](https://en.wikipedia.org/wiki/WebDAV) +- 명세서: + + - {{rfc(2518)}} + - {{rfc(3253)}} + - {{rfc(3744)}} diff --git a/files/ko/glossary/webidl/index.md b/files/ko/glossary/webidl/index.md new file mode 100644 index 00000000000000..501a257a04522c --- /dev/null +++ b/files/ko/glossary/webidl/index.md @@ -0,0 +1,19 @@ +--- +title: WebIDL +slug: Glossary/WebIDL +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**WebIDL** 은 웹 애플리케이션 프로그래밍 인터페이스({{Glossary("API")}})를 구성하는 {{Glossary("type", "데이터 타입")}}, {{Glossary("interface", "인터페이스")}}, {{Glossary("method", "메서드")}}, {{Glossary("property", "속성")}} 및 기타 구성 요소를 설명하는 데 사용되는 인터페이스 설명 언어입니다. 특정 프로그래밍 언어와는 독립적인 다소 양식이 있는 구문을 사용합니다. 그래서 각 API를 구축하는 데 사용되는 기본 코드는 가장 적합한 언어로 작성될 수 있으며 동시에 API 구성요소를 JavaScript에 호환이 되는 구성에 매핑할 수도 있습니다. + +WebIDL은 웹을 위한 거의 모든 API {{Glossary("specification", "명세서")}}에서 사용되며, WebIDL의 표준 형식과 구문으로 인해 웹 브라우저를 만드는 프로그래머는 API 구현을 위한 코드를 작성하는 방법에 관계없이 브라우저가 서로 호환되는지 보다 쉽게 확인할 수 있습니다. + +## 같이 보기 + +- [명세서](https://webidl.spec.whatwg.org/) +- [WebIDL 파일에 포함된 정보](/ko/docs/MDN/Writing_guidelines/Howto/Write_an_API_reference/Information_contained_in_a_WebIDL_file) +- [Gecko WebIDL 바인딩](https://firefox-source-docs.mozilla.org/dom/webIdlBindings/index.html) +- [WebIDL](https://en.wikipedia.org/wiki/WebIDL) diff --git a/files/ko/glossary/webkit/index.md b/files/ko/glossary/webkit/index.md new file mode 100644 index 00000000000000..3b3e21b4ab6d0b --- /dev/null +++ b/files/ko/glossary/webkit/index.md @@ -0,0 +1,19 @@ +--- +title: WebKit +slug: Glossary/WebKit +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +WebKit은 마크업을 기반으로 올바른 형식의 웹페이지를 표시하는 프레임워크입니다. {{Glossary("Apple Safari")}}는 WebKit에 의존하며 대부분의 모바일 브라우저도 사용합니다(WebKit은 이식성이 뛰어나고 사용자 정의 개발이 가능하기 때문입니다). + +WebKit은 KDE의 KHTML 및 KJS 라이브러리의 포크로 시작되었지만, 많은 개인과 회사(KDE, Apple, Google 및 Nokia 포함)가 기여해 왔습니다. + +WebKit은 Apple 상표이며 프레임워크는 BSD 형식 라이센스에 따라 배포됩니다. 그러나, {{Glossary("LGPL")}}:에는 **WebCore** 렌더링 라이브러리와 **JavaScriptCore** 엔진이라는 두 가지 중요한 구성요소가 포함됩니다. + +## 같이 보기 + +- 위키백과의 [WebKit](https://en.wikipedia.org/wiki/WebKit) on Wikipedia +- [WebKit CSS 확장](/ko/docs/Web/CSS/WebKit_Extensions) diff --git a/files/ko/glossary/whitespace/index.md b/files/ko/glossary/whitespace/index.md new file mode 100644 index 00000000000000..5becef684a9666 --- /dev/null +++ b/files/ko/glossary/whitespace/index.md @@ -0,0 +1,34 @@ +--- +title: 공백 (Whitespace) +slug: Glossary/Whitespace +l10n: + sourceCommit: d842f8c32316dbe36cff9fc5e0e777602e32d958 +--- + +{{GlossarySidebar}} + +**공백(Whitespace)** 은 다른 문자 사이에 가로 또는 세로 간격을 제공하는 데 사용되는 {{Glossary("Character", "문자열")}}을 나타냅니다. 공백은 {{Glossary("HTML")}}, {{Glossary("CSS")}}, {{Glossary("JavaScript")}} 및 기타 컴퓨터 언어에서 토큰을 구분하는 데 자주 사용됩니다. + +공백 문자와 사용법은 언어마다 차이가 있습니다. + +## HTML에서 + +[Infra Living Standard](https://infra.spec.whatwg.org/#ascii-whitespace)에서는 5개의 문자를 '{{Glossary("ASCII")}} 공백'으로 정의합니다(U+0009 TAB, U+000A LF, U+000C FF, U+000D CR 및 U+0020 SPACE). + +## JavaScript에서 + +[ECMAScript 언어 명세서](https://tc39.es/ecma262/multipage/ecmascript-language-lexical-grammar.html#sec-white-space)는 여러 유니코드 코드 포인트를 '공백'으로 정의합니다(U+0009 CHARACTER TABULATION \<TAB>, U+000B LINE TABULATION \<VT>, U+000C FORM FEED \<FF>, U+0020 SPACE \<SP>, U+00A0 NO-BREAK SPACE \<NBSP>, U+FEFF ZERO WIDTH NO-BREAK SPACE \<ZWNBSP> 및 기타 유니코드 "Space_Separator" 코드 포인트 \<USP>). + +## 같이 보기 + +- 위키백과의 [공백 문자](https://en.wikipedia.org/wiki/Whitespace_character) +- [HTML, CSS 및 DOM에서 공백을 처리하는 방법](/ko/docs/Web/API/Document_Object_Model/Whitespace) +- {{cssxref("white-space")}} +- 명세서 + + - [ASCII 공백 명세](https://infra.spec.whatwg.org/#ascii-whitespace) + - [ECMAScript 언어 명세서](https://tc39.es/ecma262/multipage/ecmascript-language-lexical-grammar.html#sec-white-space) + +- [용어 사전](/ko/docs/Glossary) + + 1. {{Glossary("Character")}} diff --git a/files/ko/glossary/windowproxy/index.md b/files/ko/glossary/windowproxy/index.md new file mode 100644 index 00000000000000..101201c86ea6d3 --- /dev/null +++ b/files/ko/glossary/windowproxy/index.md @@ -0,0 +1,15 @@ +--- +title: WindowProxy +slug: Glossary/WindowProxy +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**`WindowProxy`** 객체는 [`Window`](/ko/docs/Web/API/Window) 객체에 대한 래퍼입니다. 모든 [브라우징 컨텍스트](/ko/docs/Glossary/Browsing_context)에는 `WindowProxy` 객체가 존재합니다. `WindowProxy` 객체에 수행된 모든 작업은 현재 래핑된 기본 `Window` 객체에도 적용됩니다. 따라서, `WindowProxy` 객체와 상호 작용하는 것은 `Window` 객체와 직접 상호작용하는 것과 거의 동일합니다. 브라우징 컨텍스트를 탐색할 때, `WindowProxy`가 래핑하는 `Window` 객체가 변경됩니다. + +## 같이 보기 + +- HTML 명세서: [WindowProxy 부분](https://html.spec.whatwg.org/multipage/window-object.html#the-windowproxy-exotic-object) +- Stack Overflow 질문: [WindowProxy 및 Window 객체?](https://stackoverflow.com/questions/16092835/windowproxy-and-window-objects) diff --git a/files/ko/glossary/xforms/index.md b/files/ko/glossary/xforms/index.md new file mode 100644 index 00000000000000..979156890d31d9 --- /dev/null +++ b/files/ko/glossary/xforms/index.md @@ -0,0 +1,12 @@ +--- +title: XForms +slug: Glossary/XForms +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**XForms** 은 웹 양식을 작성하고 {{glossary("XML")}} 형식의 양식 데이터를 처리하기 위한 규칙입니다. + +> **참고:** XForms을 더 이상 지원하는 주요 브라우저는 없습니다. 대신 [HTML forms](/ko/docs/Learn/Forms)을 사용하는 것이 좋습니다. diff --git a/files/ko/glossary/xinclude/index.md b/files/ko/glossary/xinclude/index.md new file mode 100644 index 00000000000000..67349d8a899297 --- /dev/null +++ b/files/ko/glossary/xinclude/index.md @@ -0,0 +1,17 @@ +--- +title: XInclude +slug: Glossary/XInclude +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +XInclude는 문서에 다른 문서나 일부를 포함할 수 있도록 하는 포함 태그를 정의하는 W3C 권장 사항입니다. 콘텐츠는 다른 XML 파일이나 텍스트 파일에서 포함될 수 있습니다. + +XInclude 메커니즘은 주요 브라우저에서 기본적으로 지원되지 않습니다. + +## 같이 보기 + +- [XInclude 표준](https://www.w3.org/TR/xinclude-11/) +- [`XPath`](/ko/docs/Web/XPath) diff --git a/files/ko/glossary/xlink/index.md b/files/ko/glossary/xlink/index.md new file mode 100644 index 00000000000000..8c4b2f20218c6b --- /dev/null +++ b/files/ko/glossary/xlink/index.md @@ -0,0 +1,26 @@ +--- +title: XLink +slug: Glossary/XLink +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +XLink는 XML과 XML 또는 기타 문서 간의 링크를 설명하는 데 사용되는 W3C 표준입니다. 처리 방법을 결정하기 위해 일부 동작은 구현에 달려있습니다. + +단순 XLink는 Firefox(적어도 SVG 및 MathML에서) 지원되지만, XLink가 포함된 일반 XML 문서를 로드하고 XML 트리에서 관련 포인트를 클릭하려고 하면 링크로 작동하지 않습니다. + +XLink 1.0이 일반 링크에 대해 번거롭다고 생각하는 사람들을 위해, XLink 1.1에서 단순 링크에 `xlink:type="simple"`을 지정할 필요가 없어졌습니다. + +XLink는 [SVG](/ko/docs/Web/SVG), [MathML](/ko/docs/Web/MathML) 및 기타 중요한 표준에서 사용됩니다. + +### 명세서 + +- [XLink 1.0](https://www.w3.org/TR/xlink/) +- [XLink 1.1](https://www.w3.org/TR/xlink11/) (현재 초안입니다) + +### 같이 보기 + +- [XML](/ko/docs/Web/XML) +- [Code snippets:getAttributeNS](/ko/docs/Web/API/Element/getAttributeNS) - 이 DOM 메서드를 지원하지 않는 일부 브라우저를 처리하기 위한 래퍼 diff --git a/files/ko/glossary/xpath/index.md b/files/ko/glossary/xpath/index.md new file mode 100644 index 00000000000000..52e4dec56999bf --- /dev/null +++ b/files/ko/glossary/xpath/index.md @@ -0,0 +1,17 @@ +--- +title: XPath +slug: Glossary/XPath +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**XPath** 는 {{glossary("XML")}} 문서의 섹션과 콘텐츠에 접근할 수 있는 쿼리 언어입니다. + +## 같이 보기 + +- [MDN의 XPath 문서](/ko/docs/Web/XPath) +- [XPath 명세서](https://www.w3.org/TR/xpath-30/) +- [공식 웹사이트](https://www.w3.org/TR/?tag=xml) +- 위키백과의 [XPath](https://en.wikipedia.org/wiki/XPath) diff --git a/files/ko/glossary/xquery/index.md b/files/ko/glossary/xquery/index.md new file mode 100644 index 00000000000000..da7441d61bd493 --- /dev/null +++ b/files/ko/glossary/xquery/index.md @@ -0,0 +1,15 @@ +--- +title: XQuery +slug: Glossary/XQuery +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**XQuery** 는 {{glossary("XML")}} 데이터베이스의 데이터를 갱신, 검색 및 계산하기 위한 컴퓨터 언어입니다. + +## 같이 보기 + +- [공식 웹사이트](https://www.w3.org/XML/Query/) +- 위키백과의 [XQuery](https://en.wikipedia.org/wiki/XQuery) diff --git a/files/ko/web/api/document/contenttype/index.md b/files/ko/web/api/document/contenttype/index.md new file mode 100644 index 00000000000000..3f13210dc7d3e8 --- /dev/null +++ b/files/ko/web/api/document/contenttype/index.md @@ -0,0 +1,25 @@ +--- +title: "Document: contentType property" +short-title: contentType +slug: Web/API/Document/contentType +l10n: + sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b +--- + +{{APIRef}} + +**`Document.contentType`** 은 document가 렌더링 되는 MIME 타입을 반환하는 읽기 전용 속성입니다. `Document.contentType`은 HTTP 헤더나 그 외에 MIME 정보 출처에서 나올 수 있으며 브라우저나 확장 프로그램에서 수행하는 자동 타입 변환의 영향을 받을 수 있습니다. + +> **참고:** 이 속성은 {{HTMLElement("meta")}}에 영향을 받지 않습니다. + +## 값 + +`contentType`은 읽기 전용 속성입니다. + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} diff --git a/files/ko/web/css/adjacent_sibling_combinator/index.md b/files/ko/web/css/next-sibling_combinator/index.md similarity index 89% rename from files/ko/web/css/adjacent_sibling_combinator/index.md rename to files/ko/web/css/next-sibling_combinator/index.md index dacb7f141e2412..9a4b83f19b6b6b 100644 --- a/files/ko/web/css/adjacent_sibling_combinator/index.md +++ b/files/ko/web/css/next-sibling_combinator/index.md @@ -1,6 +1,7 @@ --- title: 인접 형제 결합자 -slug: Web/CSS/Adjacent_sibling_combinator +slug: Web/CSS/Next-sibling_combinator +original_slug: Web/CSS/Adjacent_sibling_combinator --- {{CSSRef("Selectors")}} diff --git a/files/ko/web/css/general_sibling_combinator/index.md b/files/ko/web/css/subsequent-sibling_combinator/index.md similarity index 92% rename from files/ko/web/css/general_sibling_combinator/index.md rename to files/ko/web/css/subsequent-sibling_combinator/index.md index 8d8f839bca8aa1..4c5c18f1d374a1 100644 --- a/files/ko/web/css/general_sibling_combinator/index.md +++ b/files/ko/web/css/subsequent-sibling_combinator/index.md @@ -1,6 +1,7 @@ --- title: 일반 형제 결합자 -slug: Web/CSS/General_sibling_combinator +slug: Web/CSS/Subsequent-sibling_combinator +original_slug: Web/CSS/General_sibling_combinator --- {{CSSRef("Selectors")}} diff --git a/files/ko/web/http/authentication/index.md b/files/ko/web/http/authentication/index.md index 7c319734f48c0b..f3166a44d66744 100644 --- a/files/ko/web/http/authentication/index.md +++ b/files/ko/web/http/authentication/index.md @@ -40,7 +40,7 @@ HTTP는 접근 제어와 인증을 위한 일반적인 프레임워크를 제공 ### 교차 원본 이미지 인증 -잠재적인 보안 문제(이후 브라우저에서 수정됩니다)는 크로스 사이트 이미지 인증이었습니다. [Firefox 59](/en-US/docs/Mozilla/Firefox/Releases/59)부터 다른 출처에서 현재 문서로 로드된 이미지 리소스는 더 이상 HTTP 인증 대화상자를 연결할 수 없습니다([Firefox bug 1423146](https://bugzil.la/1423146)). 공격자가 임의의 이미지를 제 3자 페이지에 삽입할 수 있는 경우 사용자가 자격 증명이 도난당하는 것을 방지합니다. +잠재적인 보안 문제(이후 브라우저에서 수정됩니다)는 크로스 사이트 이미지 인증이었습니다. [Firefox 59](/ko/docs/Mozilla/Firefox/Releases/59)부터 다른 출처에서 현재 문서로 로드된 이미지 리소스는 더 이상 HTTP 인증 대화상자를 연결할 수 없습니다([Firefox bug 1423146](https://bugzil.la/1423146)). 공격자가 임의의 이미지를 제 3자 페이지에 삽입할 수 있는 경우 사용자가 자격 증명이 도난당하는 것을 방지합니다. ### HTTP 인증의 문자 인코딩 diff --git a/files/ko/web/http/basics_of_http/mime_types/common_types/index.md b/files/ko/web/http/basics_of_http/mime_types/common_types/index.md index c5236551473e31..6c6410959b93fb 100644 --- a/files/ko/web/http/basics_of_http/mime_types/common_types/index.md +++ b/files/ko/web/http/basics_of_http/mime_types/common_types/index.md @@ -1,72 +1,92 @@ --- -title: MIME 타입의 전체 목록 +title: 일반 MIME 타입 slug: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types +l10n: + sourceCommit: 997a0ec66e1514b7269076195b2419db334e876e --- {{HTTPSidebar}} 다음은 일반적인 확장자로 정렬된, 문서 타입과 관련된 MIME 타입의 포괄적인 목록입니다. -두 개의 주요 MIME 타입은 기본 타입에 있어 중요한 역할을 합니다: +두 개의 주요 MIME 타입은 기본 타입에 있어 중요한 역할을 합니다. - `text/plain`는 텍스트 파일을 위한 기본값입니다. 텍스트 파일은 인간이 읽을 수 있어야 하며 이진 데이터를 포함해서는 안됩니다. -- `application/octet-stream`는 다른 모든 경우를 위한 기본값입니다. 알려지지 않은 파일 타입은 이 타입을 사용해야 합니다. 브라우저들은 이런 파일들을 다룰 때, 사용자를 위험한 동작으로부터 보호하도록 개별적인 주의를 기울여야 합니다. +- `application/octet-stream`는 다른 모든 경우를 위한 기본값입니다. 알려지지 않은 파일 타입은 이 타입을 사용해야 합니다. 브라우저들은 이런 파일들을 다룰 때, 소프트웨어 취약점과 발생할 수 있는 위험한 동작으로부터 보호하도록 특히 주의를 기울여야 합니다. -IANA는 MIME 미디어 타입의 공식적인 레지스트리로 [list공식적인 MIME 타입의 전체 목록](http://www.iana.org/assignments/media-types/media-types.xhtml)을 관리합니다. 다음 표에 웹에 대한 몇 가지 중요한 MIME 타입들이 나와 있습니다: +IANA는 MIME 미디어 타입의 공식적인 레지스트리로 [공식적인 MIME 타입의 전체 목록](http://www.iana.org/assignments/media-types/media-types.xhtml)을 관리합니다. 다음 표에 웹에 대한 몇 가지 중요한 MIME 타입들이 나와 있습니다. -| 확장자 | 문서 종류 | MIME 타입 | -| -------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `.aac` | AAC 오디오 파일 | `audio/aac` | -| `.abw` | [AbiWord](https://en.wikipedia.org/wiki/AbiWord) 문서 | `application/x-abiword` | -| `.arc` | 아카이브 문서 (인코딩된 다중 파일) | `application/octet-stream` | -| `.avi` | AVI: Audio Video Interleave | `video/x-msvideo` | -| `.azw` | 아마존 킨들 전자책 포맷 | `application/vnd.amazon.ebook` | -| `.bin` | 모든 종류의 이진 데이터 | `application/octet-stream` | -| `.bz` | BZip 아카이브 | `application/x-bzip` | -| `.bz2` | BZip2 아카이브 | `application/x-bzip2` | -| `.csh` | C-Shell 스크립트 | `application/x-csh` | -| `.css` | Cascading Style Sheets (CSS) | `text/css` | -| `.csv` | Comma-separated values (CSV) | `text/csv` | -| `.doc` | Microsoft Word | `application/msword` | -| `.epub` | Electronic publication (EPUB) | `application/epub+zip` | -| `.gif` | Graphics Interchange Format (GIF) | `image/gif` | -| `.htm .html` | HyperText Markup Language (HTML) | `text/html` | -| `.ico` | Icon 포맷 | `image/x-icon` | -| `.ics` | iCalendar 포맷 | `text/calendar` | -| `.jar` | Java 아카이브 (JAR) | `application/java-archive` | -| `.jpeg` `.jpg` | JPEG 이미지 | `image/jpeg` | -| `.js` | JavaScript (ECMAScript) | `text/javascript` (Specifications: [HTML](https://html.spec.whatwg.org/multipage/#scriptingLanguages) and [RFC 9239](https://www.rfc-editor.org/rfc/rfc9239)) | -| `.json` | JSON 포맷 | `application/json` | -| `.mid` `.midi` | Musical Instrument Digital Interface (MIDI) | `audio/midi` | -| `.mpeg` | MPEG 비디오 | `video/mpeg` | -| `.mpkg` | Apple Installer Package | `application/vnd.apple.installer+xml` | -| `.odp` | OpenDocuemnt 프리젠테이션 문서 | `application/vnd.oasis.opendocument.presentation` | -| `.ods` | OpenDocuemnt 스프레드시트 문서 | `application/vnd.oasis.opendocument.spreadsheet` | -| `.odt` | OpenDocument 텍스트 문서 | `application/vnd.oasis.opendocument.text` | -| `.oga` | OGG 오디오 | `audio/ogg` | -| `.ogv` | OGG 비디오 | `video/ogg` | -| `.ogx` | OGG | `application/ogg` | -| `.pdf` | Adobe [Portable Document Format](https://acrobat.adobe.com/us/en/why-adobe/about-adobe-pdf.html) (PDF) | `application/pdf` | -| `.ppt` | Microsoft PowerPoint | `application/vnd.ms-powerpoint` | -| `.rar` | RAR 아카이브 | `application/x-rar-compressed` | -| `.rtf` | Rich Text Format (RTF) | `application/rtf` | -| `.sh` | Bourne 쉘 스크립트 | `application/x-sh` | -| `.svg` | Scalable Vector Graphics (SVG) | `image/svg+xml` | -| `.swf` | [Small web format](https://en.wikipedia.org/wiki/SWF) (SWF) 혹은 Adobe Flash document | `application/x-shockwave-flash` | -| `.tar` | Tape Archive (TAR) | `application/x-tar` | -| `.tif .tiff` | Tagged Image File Format (TIFF) | `image/tiff` | -| `.ttf` | TrueType Font | `application/x-font-ttf` | -| `.vsd` | Microsft Visio | `application/vnd.visio` | -| `.wav` | Waveform Audio Format | `audio/x-wav` | -| `.weba` | WEBM 오디오 | `audio/webm` | -| `.webm` | WEBM 비디오 | `video/webm` | -| `.webp` | WEBP 이미지 | `image/webp` | -| `.woff` | Web Open Font Format (WOFF) | `application/x-font-woff` | -| `.xhtml` | XHTML | `application/xhtml+xml` | -| `.xls` | Microsoft Excel | `application/vnd.ms-excel` | -| `.xml` | `XML` | `application/xml` | -| `.xul` | XUL | `application/vnd.mozilla.xul+xml` | -| `.zip` | ZIP archive | `application/zip` | -| `.3gp` | [3GPP](https://en.wikipedia.org/wiki/3GP_and_3G2) 오디오/비디오 컨테이너 | `video/3gpp` `audio/3gpp` if it doesn't contain video | -| `.3g2` | [3GPP2](https://en.wikipedia.org/wiki/3GP_and_3G2) 오디오/비디오 컨테이너 | `video/3gpp2` `audio/3gpp2` if it doesn't contain video | -| `.7z` | [7-zip](https://en.wikipedia.org/wiki/7-Zip) 아카이브 | `application/x-7z-compressed` | +| 확장자 | 문서 종류 | MIME 타입 | +| --------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `.aac` | AAC 오디오 | `audio/aac` | +| `.abw` | [AbiWord](https://en.wikipedia.org/wiki/AbiWord) 문서 | `application/x-abiword` | +| `.arc` | 아카이브 문서 (다중 파일 포함) | `application/x-freearc` | +| `.avif` | AVIF 이미지 | `image/avif` | +| `.avi` | AVI: 오디오 비디오 인터리브(Audio Video Interleave) | `video/x-msvideo` | +| `.azw` | 아마존 킨들 전자책 포맷 | `application/vnd.amazon.ebook` | +| `.bin` | 모든 종류의 이진 데이터 | `application/octet-stream` | +| `.bmp` | Windows OS/2 비트맵 그래픽 | `image/bmp` | +| `.bz` | BZip 아카이브 | `application/x-bzip` | +| `.bz2` | BZip2 아카이브 | `application/x-bzip2` | +| `.cda` | CD 오디오 | `application/x-cdf` | +| `.csh` | C-셸 스크립트 | `application/x-csh` | +| `.css` | 종속 스타일 시트 (CSS) | `text/css` | +| `.csv` | 쉼표로 구분된 값 (CSV) | `text/csv` | +| `.doc` | Microsoft 워드 | `application/msword` | +| `.docx` | Microsoft 워드 (OpenXML) | `application/vnd.openxmlformats-officedocument.wordprocessingml.document` | +| `.eot` | MS Embedded OpenType fonts | `application/vnd.ms-fontobject` | +| `.epub` | 전자출판물(Electronic publication) (EPUB) | `application/epub+zip` | +| `.gz` | GZip 압축 아카이브 | `application/gzip` | +| `.gif` | Graphics Interchange Format (GIF) | `image/gif` | +| `.htm`, `.html` | HyperText Markup Language (HTML) | `text/html` | +| `.ico` | Icon format | `image/vnd.microsoft.icon` | +| `.ics` | iCalendar format | `text/calendar` | +| `.jar` | Java Archive (JAR) | `application/java-archive` | +| `.jpeg`, `.jpg` | JPEG 이미지 | `image/jpeg` | +| `.js` | JavaScript | `text/javascript` (명세: [HTML](https://html.spec.whatwg.org/multipage/#scriptingLanguages) 및 [RFC 9239](https://www.rfc-editor.org/rfc/rfc9239)) | +| `.json` | JSON 형식 | `application/json` | +| `.jsonld` | JSON-LD 형식 | `application/ld+json` | +| `.mid`, `.midi` | Musical Instrument Digital Interface (MIDI) | `audio/midi`, `audio/x-midi` | +| `.mjs` | JavaScript 모듈 | `text/javascript` | +| `.mp3` | MP3 오디오 | `audio/mpeg` | +| `.mp4` | MP4 비디오 | `video/mp4` | +| `.mpeg` | MPEG 비디오 | `video/mpeg` | +| `.mpkg` | Apple 설치 패키지 | `application/vnd.apple.installer+xml` | +| `.odp` | OpenDocument 프레젠테이션 문서 | `application/vnd.oasis.opendocument.presentation` | +| `.ods` | OpenDocument 스프레드시트 문서 | `application/vnd.oasis.opendocument.spreadsheet` | +| `.odt` | OpenDocument 텍스트 문서 | `application/vnd.oasis.opendocument.text` | +| `.oga` | OGG 오디오 | `audio/ogg` | +| `.ogv` | OGG 비디오 | `video/ogg` | +| `.ogx` | OGG | `application/ogg` | +| `.opus` | Opus 오디오 | `audio/opus` | +| `.otf` | OpenType 폰트 | `font/otf` | +| `.png` | Portable Network Graphics | `image/png` | +| `.pdf` | Adobe [휴대용 문서 형식](https://www.adobe.com/acrobat/about-adobe-pdf.html) (PDF) | `application/pdf` | +| `.php` | Hypertext Preprocessor (**Personal Home Page**) | `application/x-httpd-php` | +| `.ppt` | Microsoft PowerPoint | `application/vnd.ms-powerpoint` | +| `.pptx` | Microsoft PowerPoint (OpenXML) | `application/vnd.openxmlformats-officedocument.presentationml.presentation` | +| `.rar` | RAR 아카이브 | `application/vnd.rar` | +| `.rtf` | Rich Text Format (RTF) | `application/rtf` | +| `.sh` | Bourne shell script | `application/x-sh` | +| `.svg` | Scalable Vector Graphics (SVG) | `image/svg+xml` | +| `.tar` | Tape Archive (TAR) | `application/x-tar` | +| `.tif`, `.tiff` | Tagged Image File Format (TIFF) | `image/tiff` | +| `.ts` | MPEG 전송 스트림 | `video/mp2t` | +| `.ttf` | TrueType Font | `font/ttf` | +| `.txt` | Text, (일반적으로 {{Glossary("ASCII")}} 또는 ISO 8859-_n_) | `text/plain` | +| `.vsd` | Microsoft Visio | `application/vnd.visio` | +| `.wav` | Waveform Audio Format | `audio/wav` | +| `.weba` | WEBM audio | `audio/webm` | +| `.webm` | WEBM video | `video/webm` | +| `.webp` | WEBP image | `image/webp` | +| `.woff` | Web Open Font Format (WOFF) | `font/woff` | +| `.woff2` | Web Open Font Format (WOFF) | `font/woff2` | +| `.xhtml` | XHTML | `application/xhtml+xml` | +| `.xls` | Microsoft Excel | `application/vnd.ms-excel` | +| `.xlsx` | Microsoft Excel (OpenXML) | `application/vnd.openxmlformats-officedocument.spreadsheetml.sheet` | +| `.xml` | XML | [RFC 7303](https://datatracker.ietf.org/doc/html/rfc7303#section-4.1) (섹션 4.1)부터 `application/xml`을 권장하지만, `text/xml`은 여전히 가끔 사용됩니다. 내용이 해석되는 방식에 따라 `.xml` 확장자를 가진 파일에 특정 MIME 타입을 할당할 수 있습니다. 예를 들어, Atom 피드는 `application/atom+xml`이지만, `application/xml`은 유효한 기본값으로 사용됩니다. | +| `.xul` | XUL | `application/vnd.mozilla.xul+xml` | +| `.zip` | ZIP archive | `application/zip` | +| `.3gp` | [3GPP](https://en.wikipedia.org/wiki/3GP_and_3G2) audio/video container | `video/3gpp`; 비디오가 포함되어 있지 않은 경우 `audio/3gpp` | +| `.3g2` | [3GPP2](https://en.wikipedia.org/wiki/3GP_and_3G2) audio/video container | `video/3gpp2`; 비디오가 포함되어 있지 않은 경우 `audio/3gpp2` | +| `.7z` | [7-zip](https://en.wikipedia.org/wiki/7-Zip) archive | `application/x-7z-compressed` | diff --git a/files/ko/web/http/basics_of_http/mime_types/index.md b/files/ko/web/http/basics_of_http/mime_types/index.md index d8259b147576a7..f1ac9226072b0e 100644 --- a/files/ko/web/http/basics_of_http/mime_types/index.md +++ b/files/ko/web/http/basics_of_http/mime_types/index.md @@ -1,93 +1,182 @@ --- -title: MIME 타입 +title: MIME 타입 (IANA 미디어 타입) slug: Web/HTTP/Basics_of_HTTP/MIME_types +l10n: + sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8 --- {{HTTPSidebar}} -**MIME 타입**이란 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘입니다: 웹에서 파일의 확장자는 별 의미가 없습니다. 그러므로, 각 문서와 함께 올바른 MIME 타입을 전송하도록, 서버가 정확히 설정하는 것이 중요합니다. 브라우저들은 리소스를 내려받았을 때 해야 할 기본 동작이 무엇인지를 결정하기 위해 대게 MIME 타입을 사용합니다. +**미디어 타입** (**Multipurpose Internet Mail Extensions 또는 MIME type**로도 알려져 있음)이란 문서, 파일 또는 바이트 집합의 성격과 형식을 나타냅니다. MIME 타입은 IETF의 {{RFC(6838)}}에 정의 및 표준화되어 있습니다. -수 많은 종류의 문서가 있으므로 많은 MIME 타입들이 존재합니다. 우리는 이 글에서 웹 개발에 있어 가장 중요한 MIME 타입들 중 몇 가지를 나열해 살펴보긴 하겠지만, 특정 종류의 문서에 딱 들어맞는 것을 보려면 다음의 전용 문서를 참고하시기 바랍니다: [MIME 타입의 전체 목록](/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types). +[인터넷 할당 번호 관리 기관(IANA)](https://www.iana.org/)은 모든 공식 MIME 타입을 담당하며 [미디어 타입](https://www.iana.org/assignments/media-types/media-types.xhtml)에서 가장 최신의 전체 목록을 찾을 수 있습니다. -MIME 타입은 문서 타입 정보를 실어나르는 유일한 방법은 아닙니다: +> **경고:** 브라우저는 '파일 확장자가 아닌' MIME 타입을 사용하여 URL 처리 방법을 결정합니다. +> 따라서, 웹 서버가 응답의 {{HTTPHeader("Content-Type")}} 헤더에 올바른 MIME 타입을 보내는 것이 중요합니다. +> 올바르게 구성하지 않으면, 브라우저가 파일 내용을 잘못 해석할 가능성이 높고, 사이트가 제대로 작동하지 않고 다운로드한 파일이 잘못 처리될 수 있습니다. -- 이름의 접미사가 때때로 사용되는데, 특히 Microsoft의 윈도우즈 시스템이 그렇습니다. 모든 운영체제들이 이런 접미사를 의미있게 생각하는 것은 아니며(Linux 혹은 OS X의 경우 그렇습니다), 외부 MIME 타입의 경우처럼 그들이 정확하다는 보장도 없습니다. -- 매직 넘버. 다른 종류의 파일의 문법은 구조 상 보여지는 타입을 결정하는데 도움을 줍니다. 예를 들어, 각 GIF 파일들은 47 49 46 38 16진수 값 \[GIF89]로 시작되며 PNG 파일의 경우 89 50 4E 47 \[.PNG]로 시작됩니다. 파일의 모든 타입들이 이런 매직 넘버를 가지고 있는 것은 아니므로 100% 신뢰할 만한 시스템은 아니기도 합니다. +## MIME 타입의 구조 -웹에서는 MIME 타입만이 가장 적절하며, 그러므로 조심스럽게 설정되어야 합니다. 브라우저와 서버들은 일반적인 타입이 제공된 경우에만 MIME 타입을 정의하고, 일치하는지 점검하거나 정확한 MIME 타입을 찾기 위해 접미사나 매직 넘버에 근거하는 휴리스틱(발견적 경험)을 사용합니다. +MIME 타입은 가장 일반적으로 슬래시(`/`)로 구분된 'type'과 'subtype'의 두 부분으로 구성됩니다. 또한 이 사이에는 공백이 없습니다. -## 문법 - -### 일반적인 구조 - -``` +```plain type/subtype ``` -MIME 타입의 구조는 매우 간단합니다. `'/'`로 구분된 두 개의 문자열인 타입과 서브타입으로 구성됩니다. 스페이스는 허용되지 않습니다. *type*은 카테고리를 나타내며 _개별(discrete) 혹은_ _멀티파트_ 타입이 될 수 있습니다. _subtype_ 은 각각의 타입에 한정됩니다. +**_type_**은 `video` 또는 `text`와 같이 데이터 타입이 속하는 일반 카테고리를 나타냅니다. -MIME 타입은 대소문자를 구분하지는 않지만 전통적으로 소문자로 쓰여집니다. +**_subtype_**은 MIME 타입이 나타내는 지정된 타입의 정확한 데이터 종류를 식별합니다. +예를 들어, MIME 타입 `text`의 경우 하위 타입은 `plain` (평문 텍스트), `html` ({{Glossary("HTML")}} 소스 코드) 또는 `calendar` (iCalendar/`.ics` 용)입니다. -### 개별 타입 +각 타입에는 고유한 하위 타입이 있습니다. MIME 타입은 항상 타입과 하위 타입 모두 가지며, 둘 중 하나만 가지지는 않습니다. -``` -text/plain -text/html -image/jpeg -image/png -audio/mpeg -audio/ogg -audio/* -video/mp4 -application/octet-stream -… +추가적인 세부정보를 제공하기 위해 선택적 **매개변수**를 추가할 수 있습니다. + +```plain +type/subtype;parameter=value ``` -_개별_ 타입은 문서의 카테고리를 가리키며, 다음 중 하나가 될 수 있습니다: +예를 들어, 기본 타입이 `text`인 MIME 타입의 경우 선택적 `charset` 매개변수를 추가하여 데이터의 문자에 사용되는 문자 세트를 지정할 수 있습니다. +`문자 집합`이 지정되지 않은 경우, {{Glossary("user agent", "사용자 에이전트")}} 설정으로 재정의되지 않는 한 기본 값은 {{Glossary("ASCII")}} (`US-ASCII`)입니다. +UTF-8 텍스트 파일을 지정하려면, MIME 타입 `text/plain;charset=UTF-8`이 사용됩니다. -| 타입 | 설명 | 일반적인 서브타입 예시 | -| ------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | -| `text` | 텍스트를 포함하는 모든 문서를 나타내며 이론상으로는 인간이 읽을 수 있어야 합니다 | `text/plain`, `text/html`, `text/css, text/javascript` | -| `image` | 모든 종류의 이미지를 나타냅니다. (animated gif처럼) 애니메이션되는 이미지가 이미지 타입에 포함되긴 하지만, 비디오는 포함되지 않습니다. | `image/gif`, `image/png`, `image/jpeg`, `image/bmp`, `image/webp` | -| `audio` | 모든 종류의 오디오 파일들을 나타냅니다. | `audio/midi`, `audio/mpeg, audio/webm, audio/ogg, audio/wav` | -| `video` | 모든 종류의 비디오 파일들을 나타냅니다. | `video/webm`, `video/ogg` | -| `application` | 모든 종류의 이진 데이터를 나타냅니다. | `application/octet-stream`, `application/pkcs12`, `application/vnd.mspowerpoint`, `application/xhtml+xml`, `application/xml`, `application/pdf` | +MIME 타입은 대소문자를 구분하지는 않지만 전통적으로 소문자로 쓰여집니다. 매개변수 값은 대소문자를 구분할 수 있습니다. -특정 서브타입이 없는 텍스트 문서들에 대해서는 `text/plain`가 사용되어야 합니다. 특정 혹은 알려진 서브타입이 없는 이진 문서에 대해서는 유사하게, `application/octet-stream`이 사용되어야 합니다. +### 타입 -### 멀티파트 타입 +타입에는 **discrete** 및 **multipart**라는 두 가지 클래스가 있습니다. 개별 타입은 단일 텍스트나 음악 파일, 단일 비디오 등 단일 파일이나 매체를 나타내는 타입입니다. +multipart 타입은 여러 컴포넌트 조각으로 구성된 문서를 나타내며, 각 부분은 고유한 개별 MIME 타입을 가질 수 있고, multipart 타입은 하나의 트랜잭션으로 함께 전송되는 여러 파일을 캡슐화할 수 있습니다. +예를 들어, 이메일에 여러 파일을 첨부할 때 multipart MIME 타입이 사용됩니다. -``` -multipart/form-data -multipart/byteranges -``` +### 개별 타입 -_멀티파트_ 타입은 일반적으로 다른 MIME 타입들을 지닌 개별적인 파트들로 나누어지는 문서의 카테고리를 가리킵니다. 즉 이 타입은 _합성된_ 문서를 나타내는 방법입니다. [HTML Forms](/ko/docs/Web/Guide/HTML/Forms)과 {{HTTPMethod("POST")}} 메서드의 관계 속에서 사용되는 `multipart/form-data` 그리고 전체 문서의 하위 집합만 전송하기 위한 {{HTTPStatus("206")}} `Partial Content` 상태 메시지와 함께 사용되는 `multipart/byteranges`를 제외하고는, HTTP가 멀티파트 문서를 다룰 수 있는 특정한 방법은 존재하지 않습니다: 메시지는 브라우저에 간단히 전달됩니다 (문서를 인라인에 어떻게 디스플레이할지 모르기에, '다른 이름으로 저장' 윈도우를 제시할 겁니다) +현재 IANA에 등록된 개별 타입은 다음과 같습니다. + +- `application` + - : 다른 타입 중 하나에 명시적으로 속하지 않는, 모든 종류의 이진 데이터입니다. + 어떤 방식으로든 실행되거나 해석될 데이터 또는 특정 어플리케이션이나 어플리케이션 범위를 사용해야 하는 이진 데이터 입니다. + 일반 이진 데이터(또는 실제 타입을 알 수 없는 이진 데이터)는 `application/octet-stream`입니다. + 다른 일반적인 예로는 `application/pdf`, `application/pkcs8` 및 `application/zip`을 들 수 있습니다. + [(IANA에서 애플리케이션 타입 레지스트리를 확인하세요)](https://www.iana.org/assignments/media-types/media-types.xhtml#application) +- `audio` + - : 오디오 또는 음악 데이터입니다. 예로는 `audio/mpeg`, + `audio/vorbis`를 들 수 있습니다. + [(IANA에서 오디오 타입 레지스트리를 확인하세요)](https://www.iana.org/assignments/media-types/media-types.xhtml#audio) +- `example` + - : MIME 타입을 사용하는 방법을 보여주는 예제에서, 자리 표시자로 사용하도록 예약되어 있습니다. 이 타입은 샘플 코드 목록 및 문서 외부에서 사용되어선 안 됩니다. + `example`은 하위 타입으로도 사용될 수 있습니다. + 예를 들어, 웹에서 오디오 작업과 관련된 경우, MIME 타입 `audio/example`은 해당 타입이 자리 표시자임을 나타내기 위해 사용될 수 있고, 실제 코드를 사용할 때 적절한 타입으로 대체되어야 합니다. +- `font` + - : 글꼴/서체 데이터입니다. 일반적인 예로 `font/woff`, `font/ttf` 및 `font/otf`를 들 수 있습니다. + [(IANA에서 글꼴 타입 레지스트리를 확인하세요)](https://www.iana.org/assignments/media-types/media-types.xhtml#font) +- `image` + - : 비트맵과 벡터 정지 이미지를 모두 포함하는 이미지 또는 그래픽 데이터 애니메이션 {{Glossary("GIF")}} 또는 APNG와 같은 정지 이미지 형식의 애니메이션 버전입니다. + 일반적인 예로`image/jpeg`, `image/png` 및 `image/svg+xml`를 들 수 있습니다. + [(IANA에서 이미지 타입 레지스트리를 확인하세요)](https://www.iana.org/assignments/media-types/media-types.xhtml#image) +- `model` + - : 3D 객체 또는 화면에 대한 모델 데이터입니다. 일반적인 예로 `model/3mf` 및 `model/vrml`를 들 수 있습니다.. + [(IANA에서 모델 타입 레지스트리를 확인하세요)](https://www.iana.org/assignments/media-types/media-types.xhtml#model) +- `text` + - : 사람이 읽을 수 있는 콘텐츠, 소스 코드 또는 쉼표로 구분된 값 (CSV) 형태 데이터와 같은, 텍스트 형식의 데이터를 가지는 텍스트 전용 데이터입니다. + 예로는 `text/plain`, `text/csv` 및 `text/html`이 있습니다. + [(IANA에서 텍스트 타입 레지스트리를 확인하세요)](https://www.iana.org/assignments/media-types/media-types.xhtml#text) +- `video` + - : MP4 영화(`video/mp4`)와 같은 비디오 데이터 또는 파일입니다. + [(IANA에서 비디오 타입 레지스트리를 확인하세요)](https://www.iana.org/assignments/media-types/media-types.xhtml#video) + +특정 하위 타입이 없는 텍스트 문서의 경우, `text/plain`을 사용해야 합니다. +마찬가지로, 특정 하위 타입이나 알려진 하위 타입이 없는 이진 데이터로 이루어진 문서의 경우, `application/octet-stream`을 사용해야 합니다. + +### Multipart 타입 + +**Multipart** 타입은 일반적으로 다른 MIME 타입들을 지닌 개별적인 파트들로 나누어지는 문서의 그룹을 나타냅니다. 종종 MIME 타입이 다른 부분은 특히 이메일 시나리오(모두 동일한 파일의 일부이며 여러 개의 각각의 파일을 나타냄(**복합 문서**를 의미))에서도 사용할 수 있습니다. + +[HTML Forms](/ko/docs/Learn/Forms) 의 {{HTTPMethod("POST")}} 메서드에서 사용되는 `multipart/form-data`와 문서 일부분을 보내기 위해 {{HTTPStatus("206")}} `Partial Content`를 사용하는 `multipart/byteranges`를 제외하면, HTTP는 다중부분 문서를 특별한 방식으로 처리하지 않습니다. 메시지가 브라우저로 전송됩니다(아마도 문서를 표시하는 방법을 모르는 경우 '다른 이름으로 저장'창을 표시함). + +2개의 다중부분 타입이 있습니다. + +- `message` + - : 다른 메시지를 캡슐화하는 메시지입니다. 예를 들어, 데이터의 일부로 전달된 메시지가 포함되어 있는 이메일을 나타내는 데 사용할 수 있거나 또는 마치 여러 메시지인 것럼 매우 큰 메시지를 청크로 나누어 보낼 수 있습니다. 예를 들어, 데이터의 일부로 전달된 메시지가 포함된 이메일을 나타내는 데 사용할 수 있습니다. 또는 마치 여러 메시지인 것처럼 매우 큰 메시지를 청크로 나누어 보낼 수 있습니다. + 예를 들면, `message/rfc822` (전달되거나 회신된 메시지 인용) 및 `message/partial`을 포함하여 큰 메시지를 자동으로 작은 메시지로 나누어 수신자가 재조립할 수 있도록 합니다. + [(IANA에서 메시지 타입 레지스트리를 확인하세요)](https://www.iana.org/assignments/media-types/media-types.xhtml#message) +- `multipart` + - : 개별적으로 서로 다른 MIME 타입을 가질 수 있는 여러 컴포넌트로 구성된 데이터입니다. + 예를 들어 `multipart/form-data` ({{domxref("FormData")}} API를 사용해 생성된 데이터의 경우) 및 `multipart/byteranges` (defined in {{RFC(7233, "", "5.4.1")}}에 정의되어 있고 {{Glossary("HTTP")}}의 {{HTTPStatus(206)}} "Partial Content"와 함께 사용됩니다. 가져온 데이터는 {{HTTPHeader("Range")}} 헤더를 사용하여 전달되는 것과 같이 콘텐츠의 일부일 뿐입니다). + [(IANA에서 Multipart 타입 레지스트리를 참조하세요)](https://www.iana.org/assignments/media-types/media-types.xhtml#multipart) ## 웹 개발자들을 위한 중요한 MIME 타입 ### `application/octet-stream` -이 타입은 이진 파일을 위한 기본값입니다. 이 타입은 실제로 _잘 알려지지 않은_ 이진 파일을 의미하므로, 브라우저는 보통 자동으로 실행하지 않거나 실행해야 할지 묻기도 합니다. {{HTTPHeader("Content-Disposition")}} 헤더가 값 `attachment` 와 함게 설정되었고 'Save As' 파일을 제안하는지 여부에 따라 브라우저가 그것을 다루게 됩니다. +이 타입은 이진 파일을 위한 기본값입니다. 이 타입은 실제로 '잘 알려지지 않은' 이진 파일을 의미하므로, 브라우저는 보통 자동으로 실행하지 않거나 실행해야 할지 묻기도 합니다. {{HTTPHeader("Content-Disposition")}} 헤더가 값 `attachment` 와 함게 설정되었고 'Save As' 파일을 제안하는지 여부에 따라 브라우저가 그것을 다루게 됩니다. ### `text/plain` -이것은 텍스트 파일에 대한 기본값입니다. 실제로 _알려지지 않은 텍스트_ 파일일지라도 브라우저들은 그것을 디스플레이할 수 있다고 가정합니다. +이것은 텍스트 파일에 대한 기본값입니다. 실제로 '알려지지 않은 텍스트' 파일일지라도 브라우저들은 그것을 보여줄 수 있다고 가정합니다. -> **참고:** `text/plain`이 *모든 종류의 텍스트 데이터*를 의미하지는 않는다는 것을 알아두시기 바랍니다. 만약 브라우저가 특정 종류의 텍스트 데이터를 예상한 경우, 반드시 일치한다고 간주하지 않을 겁니다. 특히, CSS 파일을 선언한 {{HTMLElement("link")}} 엘리먼트로부터 `text/plain` 파일을 다운로드할 경우, `text/plain`으로 표현된다면 브라우저는 그것을 유효한 CSS 파일로 감지하지 않을 겁니다. CSS의 MIME 타입인 `text/css`이 사용되어야 합니다. +> **참고:** `text/plain`이 '모든 종류의 텍스트 데이터'를 의미하지는 않습니다. +> 만약 브라우저가 특정 종류의 텍스트 데이터를 예상한 경우, 반드시 일치한다고 간주하지 않을 겁니다. +> 특히, CSS 파일을 선언한 {{HTMLElement("link")}} 요소로부터 `text/plain` 파일을 다운로드할 경우, `text/plain`으로 표현된다면 브라우저는 그것을 유효한 CSS 파일로 감지하지 않을 겁니다. +> CSS의 MIME 타입인 `text/css`이 사용되어야만 합니다. ### `text/css` -웹 페이지 내에서 보통 인터프리트되어야 하는 모든 CSS 파일들은 `text/css` 파일이 되어야 합니다. 대게 서버들은 `.css` 접미사를 가진 파일들을 CSS 파일이라고 인식하지 못해 `text/plain` 혹은 `application/octet-stream` MIME 타입으로 전송합니다: 이런 경우 대부분의 브라우저들이 CSS 파일이라고 인식하지 못하며 조용히 무시될 겁니다. 올바른 타입으로 CSS 파일을 서브하는데 특별한 주의가 필요합니다. +웹 페이지를 그리는 CSS 파일들은 `text/css` 파일이 **되어야만 합니다**. +서버가 `.css` 접미사를 가진 파일들을 CSS 파일이라고 인식하지 못하면, `text/plain` 또는 `application/octet-stream` MIME 타입으로 전송할지도 모릅니다. +이런 경우 대부분의 브라우저들이 CSS 파일이라고 인식하지 못하며 조용히 무시될 겁니다. ### `text/html` -모든 HTML 컨텐츠는 이 타입과 함께 서브되어야 합니다. `application/xml+html`와 같은 XHTML을 위한 대체 MIME 타입들은 현재에는 대부분 쓸모가 없습니다(HTML5이 이 포맷을 흡수했습니다). +모든 HTML 컨텐츠는 이 타입과 함께 제공되어야 합니다. `application/xml+html`와 같은 XHTML을 위한 대체 MIME 타입들은 현재에는 대부분 사용되지 않습니다. + +### `text/javascript` + +[IANA 미디어 타입](https://www.iana.org/assignments/media-types/media-types.xhtml#text)마다, [RFC 9239](https://www.rfc-editor.org/rfc/rfc9239.html) 및 [HTML 명세](https://html.spec.whatwg.org/multipage/scripting.html#scriptingLanguages:text/javascript), JavaScript 컨텐츠는 MIME 타입 `text/javascript` 사용해서 제공되어야 합니다. +다른 MIME 타입은 JavaScript에 유효한 것으로 간주되지 않으며, `text/javascript` 이외의 MIME 타입을 사용하면 스크립트가 로드되거나 실행되지 않을 수 있습니다. + +일부 JavaScript 콘텐츠는 스크립트 콘텐츠에 대한 문자 집합을 지정하려는 시도로, MIME 타입의 일부로 `charset` 매개변수와 함께 잘못 제공되는 것을 발견할 수 있습니다. +해당 `charset` 매개변수는 JavaScript 콘텐츠에 유효하지 않으며, 대부분의 경우 스크립트 로드에 실패하게 됩니다. + +#### 레거시 JavaScript MIME 타입 + +역사적 이유로 `text/javascript` MIME 타입 외에도 [MIME 스니핑 표준](https://mimesniff.spec.whatwg.org/) (브라우저가 MIME 타입을 해석하고 유효한 타입이 없는 콘텐츠로 무엇을 해야 하는지 파악하는 방법에 대한 정의)을 사용하면 다음 레거시 JavaScript MIME 타입을 사용하여 JavaScript를 제공할 수도 있습니다. + +- `application/javascript` {{deprecated_inline}} +- `application/ecmascript` {{deprecated_inline}} +- `application/x-ecmascript` {{Non-standard_Inline}} +- `application/x-javascript` {{Non-standard_Inline}} +- `text/ecmascript` {{deprecated_inline}} +- `text/javascript1.0` {{Non-standard_Inline}} +- `text/javascript1.1` {{Non-standard_Inline}} +- `text/javascript1.2` {{Non-standard_Inline}} +- `text/javascript1.3` {{Non-standard_Inline}} +- `text/javascript1.4` {{Non-standard_Inline}} +- `text/javascript1.5` {{Non-standard_Inline}} +- `text/jscript` {{Non-standard_Inline}} +- `text/livescript` {{Non-standard_Inline}} +- `text/x-ecmascript` {{Non-standard_Inline}} +- `text/x-javascript` {{Non-standard_Inline}} + +> **참고:** 주어진 {{Glossary("user agent", "사용자 에이전트")}}가 이들 중 일부 또는 전부를 지원할 수 있더라도 `text/javascript`만 사용해야 합니다. +> 현재는 물론 앞으로도 작동이 보장되는 유일한 MIME 타입입니다. ### 이미지 타입 -오직 널리 알려지고 웹에 안전하다고 취급되는 소수의 이미지 타입만이 웹 페이지 내에서 사용될 수 있습니다: +MIME 타입이 `image`인 파일에는 이미지 데이터가 포함되어 있습니다. 하위 타입은 데이터가 나타내는 특정 이미지 파일 형식을 지정합니다. + +다음 이미지 타입은 웹페이지에서 사용하기에 '안전한' 것으로 간주될 만큼 일반적으로 사용됩니다. +- [`image/apng`](/ko/docs/Web/Media/Formats/Image_types#apng_animated_portable_network_graphics): Animated Portable Network Graphics (APNG) +- [`image/avif`](/ko/docs/Web/Media/Formats/Image_types#avif_image) : AV1 이미지 파일 포맷 (AVIF) +- [`image/gif`](/ko/docs/Web/Media/Formats/Image_types#gif_graphics_interchange_format): Graphics Interchange 포맷 (GIF) +- [`image/jpeg`](/ko/docs/Web/Media/Formats/Image_types#jpeg_joint_photographic_experts_group_image): Joint Photographic Expert Group 이미지 (JPEG) +- [`image/png`](/ko/docs/Web/Media/Formats/Image_types#png_portable_network_graphics): Portable Network Graphics (PNG) +- [`image/svg+xml`](/ko/docs/Web/Media/Formats/Image_types#svg_scalable_vector_graphics): Scalable Vector Graphics (SVG) +- [`image/webp`](/ko/docs/Web/Media/Formats/Image_types#webp_image): Web Picture 포맷 (WEBP) + +[이미지 파일 타입 및 포맷 가이드](/ko/docs/Web/Media/Formats/Image_types#common_image_file_types)에서는 다양한 이미지 포맷을 사용해야 하는 경우에 대한 정보와 권장사항을 제공합니다. + +<!-- | MIME 타입 | 이미지 타입 | | --------------- | ------------------------------------------- | | `image/gif` | GIF 이미지 (무손실 압축, PNG에 의해 대체됨) | @@ -97,28 +186,38 @@ _멀티파트_ 타입은 일반적으로 다른 MIME 타입들을 지닌 개별 WebP (`image/webp`) 추가에 대한 논의가 있지만 새로운 타입의 이미지는 코드 베이스 크기의 증가를 불러오므로, 새로운 보안 문제를 야기할 수도 있어서 브라우저 벤더들은 그것을 수용하기 전에 매우 신중한 분위기입니다. -다른 종류의 이미지들은 웹 문서 내에서 찾아볼 수 있습니다. 예를 들어, 많은 브라우저들은 파비콘 혹은 그와 비슷한 아이콘 이미지 타입을 지원합니다. 개별적으로 이런 컨텍스트 내에서, `image/x-icon` MIME 타입을 이용해 지원되고 있습니다. +다른 종류의 이미지들은 웹 문서 내에서 찾아볼 수 있습니다. 예를 들어, 많은 브라우저들은 파비콘 혹은 그와 비슷한 아이콘 이미지 타입을 지원합니다. 개별적으로 이런 컨텍스트 내에서, `image/x-icon` MIME 타입을 이용해 지원되고 있습니다. --> ### 오디오와 비디오 타입 -이미지처럼, HTML은 {{HTMLElement("audio")}}과 {{HTMLElement("video")}} 엘리먼트에 사용하기 위한 지원 타입셋을 정의하지는 않습니다. 그래서 그것들 중에 비교적 작은 그룹이 웹에서 사용될 수 있습니다. [HTML audio 그리고 video 엘리먼트에 의해 지원되는 미디어 포맷](/ko/docs/Web/HTML/Supported_media_formats)에서 사용될 수 있는 코덱과 컨테이너 모두를 설명하고 있습니다. +이미지 경우처럼, HTML은 {{HTMLElement("audio")}}과 {{HTMLElement("video")}} 요소에 사용하기 위한 특정 파일 및 코덱 타입을 지원하도록 요구하지 않으므로 중요합니다. 미디어에 사용할 파일 형식과 코덱을 선택할 때 대상 고객과 사용할 수 있는 브라우저 범위(및 해당 브라우저의 버전)를 고려하세요. + +[미디어 컨테이너 형식 가이드](/ko/docs/Web/Media/Formats/Containers)는 웹 브라우저에서 일반적으로 지원되는 파일 형식 목록을 제공합니다. 특별한 사용 사례에 대한 정보, 단점, 호환성 정보 및 기타 세부 정보가 포함되어 있습니다. + +[오디오 코덱](/ko/docs/Web/Media/Formats/Audio_codecs) 및 [비디오 코덱](/ko/docs/Web/Media/Formats/Video_codecs) 가이드에는 웹 브라우저가 지원하는 다양한 코덱이 나열되어 있습니다. 지원하는 오디오 채널 수, 사용되는 압축의 종류, 유용한 비트 전송률 등과 같은 기술 정보와 함께 호환성 세부 정보를 제공하는 경우가 많습니다. -이런 파일들의 MIME 타입은 대부분 컨테이너 포맷을 나타내며 웹 컨텍스트에서 대부분의 타입들은 다음과 같습니다: +[WebRTC에서 사용하는 코덱](/ko/docs/Web/Media/Formats/WebRTC_codecs) 안내서는 주요 웹 브라우저에서 지원하는 코덱을 구체적으로 다루면서, 확장하므로 지원하는 브라우저 범위에 가장 적합한 코덱을 선택할 수 있습니다. -| MIME 타입 | 오디오 혹은 비디오 타입 | -| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `audio/wave` `audio/wav` `audio/x-wav` `audio/x-pn-wav` | WAVE 컨테이너 포맷 내 오디오 파일. PCM 오디오 코덱 (WAVE codec "1")이 자주 지원되며, 다른 코덱들이 좀 더 제한된 상태로 지원됩니다(PCM 오디오 코덱이 없는 경우). | -| `audio/webm` | WebM 컨테이너 포맷 내 오디오 파일. 가장 일반적인 오디오 코덱인 Vorbis 그리고 Opus이 사용됩니다. | -| `video/webm` | WebM 컨테이너 포맷 내, 오디오를 지원 가능한 비디오 파일. VP8 그리고 VP9이 이 안에서 가장 일반적으로 사용되는 비디오 코덱입니다. 가장 일반적인 오디오 코덱인 Vorbis 그리고 Opus가 사용됩니다. | -| `audio/ogg` | OGG 컨테이너 포맷 내 오디오 파일. 이 컨텐이너 내에서는 Vorbis가 가장 일반적으로 사용되는 오디오 코덱입니다. | -| `video/ogg` | OGG 컨테이너 포맷 내, 오디오를 지원 가능한 비디오 파일. 이 안에서 가장 흔한 비디오 코덱은 Theora 입니다. 흔한 오디오 코덱은 Vorbis입니다. | -| `application/ogg` | OGG 컨테이너 포맷을 사용하는 오디오 혹은 비디오 파일. 이 안에서 가장 흔한 비디오 코덱은 Theora 입니다. 흔한 오디오 코덱은 Vorbis입니다. | +오디오 또는 비디오 파일의 MIME 타입은 일반적으로 컨테이너 형식(파일 타입)을 지정합니다. 선택적 [코덱 매개변수](/ko/docs/Web/Media/Formats/codecs_parameter)를 MIME 타입에 추가하여 사용할 코덱과 미디어 인코딩에 사용됩 옵션(예, 코덱 프로필, 레벨, 기타 정보)을 추가로 지정할 수 있습니다. + +웹 콘텐츠에 사용되는 가장 일반적인 MIME 유형은 다음과 같지만, 사용 가능한 모든 유형의 전체 목록은 아닙니다. 자세한 내용은 [미디어 컨테이너 형식 가이드](/ko/docs/Web/Media/Formats/Containers)를 참조하세요. + +| MIME 타입 | 오디오 및 비디오 타입 | +| ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `audio/wave`, `audio/wav`, `audio/x-wav`, `audio/x-pn-wav` | WAVE 컨테이너 형식의 오디오 파일입니다. PCM 오디오 코덱 (WAVE 코덱 "1")은 종종 지원되지만, 다른 코덱은 지원이 제한됩니다. | +| `audio/webm` | WebM 컨테이너 형식의 오디오 파일입니다. Vorbis 및 Opus는 WebM 명세에서 공식적으로 지원하는 코덱입니다. | +| `video/webm` | WebM 컨테이너 형식의 비디오 파일(오디오 포함 가능) VP8 및 VP9는 가장 일반적인 비디오 코덱입니다. Vorbis 및 Opus는 가장 일반적인 오디오 코덱입니다. | +| `audio/ogg` | Ogg 컨테이너 형식의 오디오 파일입니다. Vorbis는 이러한 컨테이너에 사용되는 가장 일반적인 코덱이지만, Opus는 이제 Ogg에서도 지원됩니다. | +| `video/ogg` | Ogg 컨테이너 형식의 비디오 파일(오디오 포함 가능) Theora는 그 안에서 사용되는 일반적인 비디오 코덱입니다. Vorbis가 일반적으로 오디오 코덱이지만, Opus가 점점 더 보편화되고 있습니다. | +| `application/ogg` | Ogg 컨테이너 형식을 사용하는 오디오 또는 비디오 파일입니다. Theora는 그 안엗서 사용되는 일반적인 비디오 코덱입니다. Vorb is는 일반적인 오디오 코덱입니다. | ### `multipart/form-data` -`multipart/form-data`은 브라우저에서 서버로 [HTML Form](/ko/docs/Web/Guide/HTML/Forms)의 내용을 전송 시 사용할 수 있습니다. 멀티 파트 문서 형식으로써, 경계(이중 대시 `'--'` 로 시작되는 문자열)로 구분되어지는 다른 파트들로 구성됩니다. 각 파트는 그 자체로 개체이며 자신만의 HTTP 헤더를 가지는데, 파일 업로드 필드를 위한 헤더로는 {{HTTPHeader("Content-Disposition")}}, 그리고 가장 일반적인 것 중 하나인 {{HTTPHeader("Content-Type")}}이 있습니다({{HTTPHeader("Content-Length")}}은 경계선이 구분자로 사용되므로 무시됩니다). +`multipart/form-data`은 브라우저에서 서버로 완성된 [HTML Form](/ko/docs/Web/Guide/HTML/Forms)의 내용을 전송 시 사용할 수 있습니다. -``` +다중부분 문서 형식으로써, 경계(이중 대시 `'--'` 로 시작되는 문자열)로 구분되어지는 다른 파트들로 구성됩니다. 각 파트는 그 자체로 개체이며 자신만의 HTTP 헤더를 가지는데, 파일 업로드 필드를 위한 헤더로는 {{HTTPHeader("Content-Disposition")}}, {{HTTPHeader("Content-Type")}}이 있습니다. + +```http Content-Type: multipart/form-data; boundary=aBoundaryString (other headers associated with the multipart document as a whole) @@ -136,20 +235,25 @@ Content-Disposition: form-data; name="myField" --aBoundaryString-- ``` -다음은 HTML form입니다: +다음은 HTML `<form>`입니다: ```html -<form action="http://localhost:8000/" method="post" enctype="multipart/form-data"> - <input type="text" name="myTextField"> - <input type="checkbox" name="myCheckBox">Check</input> - <input type="file" name="myFile"> +<form + action="http://localhost:8000/" + method="post" + enctype="multipart/form-data"> + <label>Name: <input name="myTextField" value="Test" /></label> + <label><input type="checkbox" name="myCheckBox" /> Check</label> + <label> + Upload file: <input type="file" name="myFile" value="test.txt" /> + </label> <button>Send the file</button> </form> ``` -HTML form은 다음 메시지를 전송하게 됩니다: +`<form>`은 다음 메시지를 전송하게 됩니다: -``` +```http POST / HTTP/1.1 Host: localhost:8000 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0 @@ -179,9 +283,11 @@ Simple file. ### `multipart/byteranges` -`multipart/byteranges`는 브라우저로 회신하는 부분적인 응답 전송의 컨텍스트 내에서 사용됩니다. {{HTTPStatus("206")}} `Partial Content` 상태 코드가 전송된 경우, MIME 타입은 문서가 각각의 요청된 범위들 중 하나인 몇 가지 파트들로 구성되어 있음을 알려주기 위해 사용됩니다. 다른 멀티파트 타입처럼, {{HTTPHeader("Content-Type")}}은 경계선 문자열을 정의하기 위해 `boundary` 디렉티브를 사용합니다. 각각의 다른 파트들은 문서의 실제 타입을 가진 {{HTTPHeader("Content-Type")}} 헤더와 그들이 나타내는 범위를 가진 {{HTTPHeader("Content-Range")}}를 지니고 있습니다. +`multipart/byteranges` MIME 타입은 브라우저에 부분적 응답을 보내는 데 사용됩니다. -``` +{{HTTPStatus("206", "206 Partial Content")}} 상태 코드가 전송된 경우, MIME 타입은 문서가 각각의 요청된 범위들 중 하나인 몇 가지 파트들로 구성되어 있음을 알려주기 위해 사용됩니다. 다른 다중부분 타입처럼, {{HTTPHeader("Content-Type")}}은 이 조각들을 분리하기 위해 `boundary` 디렉티브를 사용합니다. 각각의 다른 파트들은 문서의 실제 타입을 가진 {{HTTPHeader("Content-Type")}} 헤더와 그들이 나타내는 범위를 가진 {{HTTPHeader("Content-Range")}}를 지니고 있습니다. + +```http HTTP/1.1 206 Partial Content Accept-Ranges: bytes Content-Type: multipart/byteranges; boundary=3d6b6a416f9b5 @@ -192,7 +298,7 @@ Content-Type: text/html Content-Range: bytes 100-200/1270 eta http-equiv="Content-type" content="text/html; charset=utf-8" /> - <meta name="vieport" content + <meta name="viewport" content --3d6b6a416f9b5 Content-Type: text/html Content-Range: bytes 300-400/1270 @@ -206,17 +312,38 @@ Content-Range: bytes 300-400/1270 ## 정확한 MIME 타입 설정의 중요성 -대부분의 웹 서버들은 기본 타입 중 하나인 `application/octet-stream` MIME 타입을 사용해 알려지지 않은 타입의 리소스를 전송합니다. 보안상의 이유로, 대부분의 브라우저들은 그런 리소스에 대한 사용자화된 기본 동작 설정을 허용하지 않으며 그것을 사용하려면 디스크에 저장할 것을 사용자에게 강제합니다. 정확치 않게 구성된 서버들의 몇 가지 일반적 사례들은 다음의 파일 타입에서 일어납니다: +대부분의 웹 서버들은 기본 타입 중 하나인 `application/octet-stream` MIME 타입을 사용해 알려지지 않은 타입의 리소스를 전송합니다. 보안상의 이유로, 대부분의 브라우저들은 그런 리소스에 대한 사용자 정의된 기본 동작 설정을 허용하지 않으며, 그것을 사용하려면 디스크에 저장해야 합니다. + +자주 발생하는 잘못된 서버 구성입니다. -- 인코딩된 RAR 파일. 이상적인 것은 인코딩된 파일의 실제 타입을 설정 가능한 것입니다; 이런 일은 대게 불가능합니다(서버가 모르는 타입일 수도 있고 이런 파일들은 다른 타입의 몇몇 리소스들을 포함하고 있을 수도 있습니다). 이런 경우에, `application/x-rar-compressed` MIME 타입을 전송하도록 서버를 구성하여 사용자가 그에 대한 유용한 기본적인 동작을 정의하지 않게 될 겁니다. -- 오디오와 비디오 파일. 적합한 MIME 타입을 가진 리소스만이 {{ HTMLElement("video") }} 혹은 {{ HTMLElement("audio") }} 엘리먼트 내에서 인식되어 재생될 수 있을 겁니다. [오디오와 비디오를 위한 정확한 타입 사용](/En/Media_formats_supported_by_the_audio_and_video_elements)을 확인하시기 바랍니다. -- 개인적인 파일 타입. 개인적인 파일 타입을 서브한 경우 특별한 주의를 기울여야 합니다. 특별한 처리가 불가능하므로 가능하면 `application/octet-stream` 사용을 피하시기 바랍니다: 대부분의 브라우저들은 이런 포괄적인 MIME 타입에 대한 ("워드에서 열기"와 같은) 기본적인 동작의 정의를 허용하지 않습니다. +- RAR로 인코딩된 파일. + 이 경우에, 이상적인 부분은 원본 파일의 실제 타입입니다. .RAR 파일은 다양한 타입의 여러 리소스를 보유할 수 있으므로 이는 종종 불가능합니다. + 이 경우는, `application/x-rar-compressed`를 전송하도록 서버를 구성하세요. +- 오디오 및 비디오. + 올바른 MIME 타입을 가진 리소스만 {{HTMLElement("video")}} 또는 {{HTMLElement("audio")}} 요소에서 재생됩니다. + [오디오 및 비디오 미디어 타입](/ko/docs/Web/Media/Formats)을 반드시 정확하게 지정하세요. +- 독점 파일 형식. + 대부분의 브라우저는 이 일반 MIME 타입에 대한 기본 동작(예, "Word에서 열기") 정의를 허용하지 않으므로 `application/octet-stream`을 사용하지 마세요. + `application/vnd.mspowerpoint`와 같은 특정 타입을 사용하면 사용자가 선택한 프레젠테이션 소프트웨어에서 이러한 파일을 자동으로 열 수 있습니다. ## MIME 스니핑 -MIME 타입이 없을 때, 혹은 클라이언트가 타입이 잘못 설정됐다고 판단한 어떤 다른 경우에, 브라우저들은 MIME 스니핑을 시도할 수도 있는데, 이는 리소스를 훑어보고 정확한 MIME 타입을 추측 해내는 것입니다. 각각의 브라우저들은 이런 과정을 다른 방식으로, 다른 환경 속에서 처리해냅니다. 이런 과정에 관한 몇 가지 보안 관련 사항들이 있는데, 몇몇 MIME 타입들은 실행 가능한 컨텐츠를 나타내고 다른 타입들은 그렇지 않기 때문입니다. 서버들은 {{HTTPHeader("Content-Type")}} 중에{{HTTPHeader("X-Content-Type-Options")}}를 전송하여 이런 MIME 스니핑을 차단할 수 있습니다. +MIME 타입이 없거나 브라우저가 MIME 타입이 올바르지 않다고 판단하는 경우, 브라우저는 리소스의 바이트를 보고 올바른 MIME 타입을 추측하는 'MIME 스니핑'을 수행할 수 있습니다. + +각 브라우저는 서로 다른 상황에서 MIME 스니핑을 다르게 수행합니다. (예를 들어, Safari는 전송된 MIME 타입이 적합하지 않은 경우 URL 파일 확장자를 확인합니다) 일부 MIME 타입은 실행 가능한 콘텐츠를 나타내므로 보안 문제가 있습니다. 서버는 {{HTTPHeader("X-Content-Type-Options")}} 헤더를 전송하여 MIME 스니핑을 방지할 수 있습니다. + +## 문서 타입을 전달하는 다른 방법 + +MIME 타입이 문서 타입 정보를 전달하는 유일한 방법은 아닙니다. + +- 특히 Microsoft Windows에서는 파일 이름 접미사가 사용되는 경우가 있습니다. + 모든 운영 체제에서 이러한 접미사를 의미 있는 것으로 간주하는 것은 아니며(예, Linux 및 macOS), 접미사가 정확하다는 보장도 없습니다. +- 매직 넘버. 다양한 형식의 구문을 사용하면 바이트 구조를 보고 파일 타입을 추론할 수 있습니다. + 예를 들어, GIF 파일은 16진수 `47 49 46 38 39` (`GIF89`)로 시작하고, PNG 파일은 `89 50 4E 47` (`.PNG`)로 시작합니다. + 모든 파일 형식에 매직 넘버가 있는 것은 아니므로, 이 역시 100% 신뢰할 수는 없습니다. -## 함께 참고할 내용 +## 같이 보기 +- [웹 미디어 기술](/ko/docs/Web/Media) +- [웹에서 사용되는 미디어 타입 가이드](/ko/docs/Web/Media/Formats) - [서버의 MIME 타입을 적절하게 구성하기](/ko/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types) -- [HTML audio 그리고 video 엘리먼트에서 지원하는 미디어 포맷들](/ko/docs/Web/HTML/Supported_media_formats) diff --git a/files/ko/web/http/headers/cross-origin-resource-policy/index.md b/files/ko/web/http/headers/cross-origin-resource-policy/index.md index c49950679e2143..d8d4cf6eee4f07 100644 --- a/files/ko/web/http/headers/cross-origin-resource-policy/index.md +++ b/files/ko/web/http/headers/cross-origin-resource-policy/index.md @@ -48,6 +48,6 @@ Cross-Origin-Resource-Policy: same-origin ## 같이 보기 -- [교차 출처 리소스 정책(CORP) 설명자](/en-US/docs/Web/HTTP/Cross-Origin_Resource_Policy) +- [교차 출처 리소스 정책(CORP) 설명자](/ko/docs/Web/HTTP/Cross-Origin_Resource_Policy) - [교차 출처 리소스 정책 배포 고려하기](https://resourcepolicy.fyi/) - {{httpheader("Access-Control-Allow-Origin")}} diff --git a/files/ko/web/http/messages/index.md b/files/ko/web/http/messages/index.md index ece893f5babd3d..f78cfddd5be7ac 100644 --- a/files/ko/web/http/messages/index.md +++ b/files/ko/web/http/messages/index.md @@ -1,28 +1,30 @@ --- title: HTTP 메시지 slug: Web/HTTP/Messages +l10n: + sourceCommit: 0880a90f3811475d78bc4b2c344eb4146f25f66c --- {{HTTPSidebar}} -HTTP 메시지는 서버와 클라이언트 간에 데이터가 교환되는 방식입니다. 메시지 타입은 두 가지가 있습니다. 요청(_request)은_ 클라이언트가 서버로 전달해서 서버의 액션이 일어나게끔 하는 메시지고, 응답(*response)은 요청*에 대한 서버의 답변입니다. +HTTP 메시지는 서버와 클라이언트 간에 데이터가 교환되는 방식입니다. 메시지 타입은 두 가지가 있습니다. 요청('request')은 클라이언트가 서버로 전달해서 서버의 액션이 일어나게끔 하는 메시지고, 응답('response')은 요청에 대한 서버의 답변입니다. -HTTP 메시지는 ASCII로 인코딩된 텍스트 정보이며 여러 줄로 되어 있습니다. HTTP 프로토콜 초기 버전과 HTTP/1.1에서는 클라이언트와 서버 사이의 연결을 통해 공개적으로 전달되었습니다. 이렇게 한 때 사람이 읽을 수 있었던 메시지는 HTTP/2에서는 최적화와 성능 향상을 위해 HTTP 프레임으로 나누어집니다. +HTTP 메시지는 ASCII로 인코딩된 텍스트 정보이며, 여러 줄로 되어 있습니다. HTTP 프로토콜 초기 버전과 HTTP/1.1에서는, 클라이언트와 서버 사이의 연결을 통해 공개적으로 전달되었습니다. 이렇게 한 때 사람이 읽을 수 있었던 메시지는 HTTP/2에서는 최적화와 성능 향상을 위해, HTTP 프레임으로 나누어집니다. 웹 개발자, 또는 웹 마스터가 손수 HTTP 메시지를 텍스트로 작성하는 경우는 드뭅니다. 대신에 소프트웨어, 브라우저, 프록시, 또는 웹 서버가 그 일을 합니다. HTTP 메시지는 설정 파일(프록시 혹은 서버의 경우), API(브라우저의 경우), 혹은 다른 인터페이스를 통해 제공됩니다. -![사용자, 스크립트 또는 서버가 생성한 이벤트에서 HTTP/1.x msg가 생성되며, HTTP/2가 사용 중인 경우 HTTP/2 스트림으로 이진 프레임된 다음 전송됩니다.](httpmsg2.png) +![사용자, 스크립트 또는 서버가 생성한 이벤트에서 HTTP/1.x msg가 생성되며, HTTP/2가 사용 중인 경우, HTTP/2 스트림으로 이진 프레임된 다음 전송됩니다.](httpmsg2.png) HTTP/2의 이진 프레이밍 메커니즘(binary framing mechanism)은 사용 중인 API나 설정 파일 등을 변경하지 않아도 되도록 설계 되었기 때문에, 사용자가 보고 이해하기 쉽습니다. HTTP 요청과 응답의 구조는 서로 닮았으며, 그 구조는 다음과 같습니다. -1. 시작 줄(start-line)에는 실행되어야 할 요청, 또은 요청 수행에 대한 성공 또는 실패가 기록되어 있습니다. 이 줄은 항상 한 줄로 끝납니다. -2. 옵션으로 HTTP 헤더 세트가 들어갑니다. 여기에는 요청에 대한 설명, 혹은 메시지 본문에 대한 설명이 들어갑니다. -3. 요청에 대한 모든 메타 정보가 전송되었음을 알리는 빈 줄(blank line)이 삽입됩니다. -4. 요청과 관련된 내용(HTML 폼 콘텐츠 등)이 옵션으로 들어가거나, 응답과 관련된 문서(document)가 들어갑니다. 본문의 존재 유무 및 크기는 첫 줄과 HTTP 헤더에 명시됩니다. +1. 시작 줄('start-line')에는 실행되어야 할 요청, 또은 요청 수행에 대한 성공 또는 실패가 기록되어 있습니다. 이 줄은 항상 한 줄로 끝납니다. +2. 옵션으로 'HTTP 헤더' 세트가 들어갑니다. 여기에는 요청에 대한 설명, 혹은 메시지 본문에 대한 설명이 들어갑니다. +3. 요청에 대한 모든 메타 정보가 전송되었음을 알리는 빈 줄('blank line')이 삽입됩니다. +4. 요청과 관련된 내용(HTML 폼 콘텐츠 등)이 옵션으로 들어가거나, 응답과 관련된 문서가 들어갑니다. 본문의 존재 유무 및 크기는 첫 줄과 HTTP 헤더에 명시됩니다. -HTTP 메시지의 시작 줄과 HTTP 헤더를 묶어서 **요청 헤드(head)** 라고 부르며, 이와 반대로 HTTP 메시지의 페이로드는 *본문(body)*이라고 합니다. +HTTP 메시지의 시작 줄과 HTTP 헤더를 묶어서 '요청 헤드(head)' 라고 부르며, 이와 반대로 HTTP 메시지의 페이로드는 '본문(body)'이라고 합니다. ![요청과 응답은 HTTP에서 공통 구조를 공유합니다](httpmsgstructure2.png) @@ -32,28 +34,32 @@ HTTP 메시지의 시작 줄과 HTTP 헤더를 묶어서 **요청 헤드(head)** HTTP 요청은 서버가 특정 동작을 취하게끔 만들기 위해 클라이언트에서 전송하는 메시지입니다. 시작 줄은 다음과 같이 세 가지 요소로 이루어져 있습니다. -1. 첫번째는 _[HTTP 메서드](/ko/docs/Web/HTTP/Methods)로_, 영어 동사({{HTTPMethod("GET")}}, {{HTTPMethod("PUT")}},{{HTTPMethod("POST")}}) 혹은 명사({{HTTPMethod("HEAD")}}, {{HTTPMethod("OPTIONS")}})를 사용해 서버가 수행해야 할 동작을 나타냅니다. 예를 들어, `GET`은 리소스를 클라이언트로 가져다 달라는 것을 뜻하며, `POST`는 데이터가 서버로 들어가야 함을 의미(리소스를 새로 만들거나 수정하기 위해, 또는 클라이언트로 돌려 보낼 임시 문서를 생성하기 위해)합니다. -2. 두번째로 오는 요청 타겟은 주로 {{glossary("URL")}}, 또는 프로토콜, 포트, 도메인의 절대 경로로 나타낼 수도 있으며 이들은 요청 컨텍스트에 의해 특정지어 집니다. 요청 타겟 포맷은 HTTP 메소드에 따라 달라집니다. 포맷에는 다음과 같은 것들이 있습니다. +1. '[HTTP 메서드](/ko/docs/Web/HTTP/Methods)'로, 영어 동사({{HTTPMethod("GET")}}, {{HTTPMethod("PUT")}},{{HTTPMethod("POST")}}) 혹은 명사({{HTTPMethod("HEAD")}}, {{HTTPMethod("OPTIONS")}})를 사용해 서버가 수행해야 할 동작을 나타냅니다. 예를 들어, `GET`은 리소스를 클라이언트로 가져다 달라는 것을 뜻하며, `POST`는 데이터가 서버로 들어가야 함을 의미(리소스를 새로 만들거나 수정하기 위해, 또는 클라이언트로 돌려 보낼 임시 문서를 생성하기 위해)합니다. +2. '요청 타겟'은 주로 {{glossary("URL")}}, 또는 프로토콜, 포트, 도메인의 절대 경로로 나타낼 수도 있으며 이들은 요청 컨텍스트에 의해 특정지어 집니다. 요청 타겟 포맷은 HTTP 메소드에 따라 달라집니다. 포맷에는 다음과 같은 것들이 있습니다. - - origin 형식: 끝에 `'?'`와 쿼리 문자열이 붙는 절대 경로입니다. 이는 가장 일반적인 형식이며, `GET`, `POST`, `HEAD`, `OPTIONS` 메서드와 함께 사용합니다. - `POST / HTTP 1.1 GET /background.png HTTP/1.0 HEAD /test.html?query=alibaba HTTP/1.1 OPTIONS /anypage.html HTTP/1.0` - - _absolute 형식: 완전한 URL 형식입니다._ 프록시에 연결하는 경우 대부분 `GET`과 함께 사용됩니다. + - 가장 일반적인 형식이고 'origin 형식'으로 알려진 절대 경로입니다. 이 형식은 끝에 `'?'`와 쿼리 문자열이 따라옵니다. `GET`, `POST`, `HEAD`, `OPTIONS` 메서드와 함께 사용합니다. + - `POST / HTTP/1.1` + - `GET /background.png HTTP/1.0` + - `HEAD /test.html?query=alibaba HTTP/1.1` + - `OPTIONS /anypage.html HTTP/1.0` + - 'absolute 형식'으로 알려진 완전한 URL은 프록시에 연결하는 경우 대부분 `GET`과 함께 사용됩니다. `GET http://developer.mozilla.org/ko/docs/Web/HTTP/Messages HTTP/1.1` - - _authority 형식:_ 도메인 이름 및 옵션 포트(`':'`가 앞에 붙습니다)로 이루어진 URL의 authority component 입니다. HTTP 터널을 구축하는 경우에만 `CONNECT`와 함께 사용할 수 있습니다. + - 'authority 형식'으로 알려지고 도메인 이름 및 옵션 포트(`':'`가 앞에 붙습니다)로 이루어진 URL의 인증 컴포넌트 입니다. HTTP 터널을 구축하는 경우에만 `CONNECT`와 함께 사용할 수 있습니다. `CONNECT developer.mozilla.org:80 HTTP/1.1` - - _asterisk 형식:_ `OPTIONS`와 함께 별표(`'*'`) 하나로 간단하게 서버 전체를 나타냅니다. `OPTIONS * HTTP/1.1` + - `OPTIONS`와 함께 별표(`'*'`) 하나로 서버 전체를 나타내는 'asterisk 형식'입니다. + `OPTIONS * HTTP/1.1` -3. 마지막으로 HTTP 버전이 들어갑니다. 메시지의 남은 구조를 결정하기 때문에, 응답 메시지에서 써야 할 HTTP 버전을 알려주는 역할을 합니다. +3. 메시지의 남은 구조를 정의하는 HTTP 버전은 응답 메시지에서 써야 할 HTTP 버전을 알려주는 역할을 합니다. ### 헤더 -요청에 들어가는 [HTTP 헤더](/ko/docs/Web/HTTP/Headers)는 HTTP 헤더의 기본 구조를 따릅니다. 대소문자 구분없는 문자열 다음에 콜론(`':'`)이 붙으며, 그 뒤에 오는 값은 헤더에 따라 달라집니다. 헤더는 값까지 포함해 한 줄로 구성되지만 꽤 길어질 수 있습니다. +요청에 들어가는 [HTTP 헤더](/ko/docs/Web/HTTP/Headers)는 HTTP 헤더의 기본 구조를 따릅니다. 대소문자 구분없는 문자열 다음에 콜론(`':'`)이 붙으며, 그 뒤에 오는 값은 헤더에 따라 달라집니다. 헤더는 값까지 포함해 한 줄로 구성되지만, 꽤 길어질 수 있습니다. 다양한 종류의 요청 헤더가 있는데, 이들은 다음과 같이 몇몇 그룹으로 나눌 수 있습니다. -- General 헤더: {{HTTPHeader("Via")}}와 같은 _헤더는_ 메시지 전체에 적용됩니다. -- Request 헤더: {{HTTPHeader("User-Agent")}}, {{HTTPHeader("Accept-Type")}}와 같은 헤더는 요청의 내용을 좀 더 구체화 시키고({{HTTPHeader("Accept-Language")}}), 컨텍스를 제공하기도 하며({{HTTPHeader("Referer")}}), 조건에 따른 제약 사항을 가하기도 하면서({{HTTPHeader("If-None")}}) 요청 내용을 수정합니다. -- Entity 헤더: {{HTTPHeader("Content-Length")}}와 같은 헤더는 요청 본문에 적용됩니다. 당연히 요청 내에 본문이 없는 경우 entity 헤더는 전송되지 않습니다. +- {{HTTPHeader("Via")}}와 같은 {{glossary("General header", "General 헤더")}}는 메시지 전체에 적용됩니다. +- {{HTTPHeader("User-Agent")}}, {{HTTPHeader("Accept")}}와 같은 {{glossary("Request header", "Request 헤더")}}는 요청의 내용을 좀 더 구체화 시키고({{HTTPHeader("Accept-Language")}}), 컨텍스를 제공하기도 하며({{HTTPHeader("Referer")}}), 조건에 따른 제약 사항을 주기도 하면서({{HTTPHeader("If-None")}}) 요청 내용을 수정합니다. +- 메시지 데이터의 원래 형식과 적용된 인코딩을 설명하는 {{HTTPHeader("Content-Type")}}과 같은 {{glossary("Representation header", "Representation 헤더")}}(메시지에 본문이 있는 경우에만 존재합니다). ![HTTP 요청의 헤더 예시](http_request_headers3.png) @@ -63,20 +69,20 @@ HTTP 요청은 서버가 특정 동작을 취하게끔 만들기 위해 클라 넓게 보면 본문은 두가지 종류로 나뉩니다. -- 단일-리소스 본문(single-resource bodies): 헤더 두 개({{HTTPHeader("Content-Type")}}와 {{HTTPHeader("Content-Length")}})로 정의된 단일 파일로 구성됩니다. -- 다중-리소스 본문(multiple-resource bodies): 멀티파트 본문으로 구성되는 [다중 리소스 본문](/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types#multipartform-data)에서는 파트마다 다른 정보를 지니게 됩니다. 보통 [HTML 폼](/ko/docs/Web/Guide/HTML/Forms)과 관련이 있습니다. +- 헤더 두 개({{HTTPHeader("Content-Type")}}와 {{HTTPHeader("Content-Length")}})로 정의된 단일 파일로 구성되는 단일-리소스 본문(single-resource bodies)입니다. +- 각각 서로 다른 정보를 담고 있는 멀티파트 본문으로 구성되는 [다중 리소스 본문](/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types#multipartform-data)입니다. 보통 [HTML 폼](/ko/docs/Web/Guide/HTML/Forms)과 관련이 있습니다. ## HTTP 응답 ### 상태 줄 -HTTP 응답의 시작 줄은 _상태 줄(status line)_ 이라고 불리며, 다음과 같은 정보를 가지고 있습니다. +HTTP 응답의 시작 줄은 '상태 줄(status line)'' 이라고 불리며, 다음과 같은 정보를 가지고 있습니다. -1. 프로토콜 버전: 보통 `HTTP/1.1`입니다. -2. 상태 코드: 요청의 성공 여부를 나타냅니다. {{HTTPStatus("200")}}, {{HTTPStatus("404")}} 혹은 {{HTTPStatus("302")}}입니다. -3. 상태 텍스트: 짧고 간결하게 상태 코드에 대한 설명을 글로 나타내어 사람들이 HTTP 메시지를 이해할 때 도움이 됩니다. +1. 보통 `HTTP/1.1`인 프로토콜 버전입니다. +2. 요청의 성공 여부를 나타내는 '상태 코드'입니다. 일반적인 상태 코드는 {{HTTPStatus("200")}}, {{HTTPStatus("404")}} 혹은 {{HTTPStatus("302")}}입니다. +3. 사람이 HTTP 메시지를 이해할 때 도움이 되는 상태 코드에 대한 짧고, 순전히 정보 제공 목적의 '상태 텍스트' -상태 줄은 일반적으로 `HTTP/1.1 404 Not Found.` 같이 생겼습니다. +상태 줄은 일반적으로 `HTTP/1.1 404 Not Found.` 같이 표현됩니다. ### 헤더 @@ -84,36 +90,36 @@ HTTP 응답의 시작 줄은 _상태 줄(status line)_ 이라고 불리며, 다 다양한 종류의 응답 헤더가 있는데, 이들은 다음과 같이 몇몇 그룹으로 나눌 수 있습니다. -- General 헤더: {{HTTPHeader("Via")}}와 같은 _헤더는_ 메시지 전체에 적용됩니다. -- Response 헤더: {{HTTPHeader("Vary")}}와 {{HTTPHeader("Accept-Ranges")}}와 같은 헤더는 상태 줄에 미처 들어가지 못했던 서버에 대한 추가 정보를 제공합니다. -- Entity 헤더: {{HTTPHeader("Content-Length")}}와 같은 헤더는 요청 본문에 적용됩니다. 당연히 요청 내에 본문이 없는 경우 entity 헤더는 전송되지 않습니다. +- {{HTTPHeader("Via")}}와 같은 {{glossary("General header", "General 헤더")}}는 메시지 전체에 적용됩니다. +- {{HTTPHeader("Vary")}}와 {{HTTPHeader("Accept-Ranges")}}와 같은 {{glossary("Response header", "Response 헤더")}}는 상태 줄에 포함되지 않은 서버에 대한 추가 정보를 제공합니다. +- 메시지 데이터의 원래 형식과 적용된 인코딩을 설명하는 {{HTTPHeader("Content-Type")}}와 같은 {{glossary("Representation header", "Representation 헤더")}}(메시지에 본문이 있는 경우에만 존재합니다). ![HTTP 응답의 헤더 예제](http_response_headers3.png) ### 본문 -본문은 응답의 마지막 부분에 들어갑니다. 모든 응답에 본문이 들어가지는 않습니다. {{HTTPStatus("201")}}, {{HTTPStatus("204")}}과 같은 상태 코드를 가진 응답에는 보통 본문이 없습니다. +본문은 응답의 마지막 부분에 들어갑니다. 모든 응답에 본문이 들어가지는 않습니다. 해당 페이로드 없이도 요청에 충분히 응답하는 {{HTTPStatus("201")}} **`Created`**, {{HTTPStatus("204")}} **`No Content`**과 같은 상태 코드를 가진 응답에는 보통 본문이 없습니다. 넓게 보면 본문은 세가지 종류로 나뉩니다. -- 이미 길이가 알려진 단일 파일로 구성된 단일-리소스 본문: 헤더 두개({{HTTPHeader("Content-Type")}}와 {{HTTPHeader("Content-Length")}})로 정의 합니다. -- 길이를 모르는 단일 파일로 구성된 단일-리소스 본문: {{HTTPHeader("Transfer-Encoding")}}가 `chunked`로 설정되어 있으며, 파일은 청크로 나뉘어 인코딩 되어 있습니다. -- 서로 다른 정보를 담고 있는 멀티파트로 이루어진 [다중 리소스 본문](/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types#multipartform-data): 이 경우는 상대적으로 위의 두 경우에 비해 보기 힘듭니다. +- {{HTTPHeader("Content-Type")}}와 {{HTTPHeader("Content-Length")}}라는 두 개의 헤더로 정의하는 길이가 알려진 하나의 파일로 구성된 단일-리소스 본문(Single-resource bodies). +- {{HTTPHeader("Transfer-Encoding")}}가 `chunked`로 설정된 청크로 나뉘어 인코딩되는 길이를 모르는 하나의 파일로 구성된 단일-리소스 본문:. +- 서로 다른 정보를 담고 있는 멀티파트 본문으로 이루어진 [다중 리소스 본문](/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types#multipartform-data): 이 경우는 상대적으로 위의 두 경우에 비해 보기 힘듭니다. ## HTTP/2 프레임 -HTTP/1.x 메시지는 성능상의 결함을 몇가지 내포하고 있습니다. +HTTP/1.x 메시지는 몇가지 성능 결함이 있습니다. -- 본문은 압축이 되지만 헤더는 압축이 되지 않습니다. -- 연속된 메시지들은 비슷한 헤더 구조를 띄기 마련인데, 그럼에도 불구하고 메시지마다 반복되어 전송되고 있습니다. -- 다중전송(multiplexing)이 불가능합니다. 서버 하나에 연결을 여러개 열어야 합니다. 적극적인(warm) TCP 연결이 소극적인(cold) TCP 연결보다 효율적인데 말이죠. +- 본문은 압축이 되지만, 헤더는 압축이 되지 않습니다. +- 연속된 메시지들은 비슷한 헤더 구조를 가지지만 메시지마다 반복되어 전송되고 있습니다. +- 다중전송(multiplexing)이 불가능합니다. 서버 하나에 연결을 여러개 열어야 하고, 적극적인(warm) TCP 연결이 소극적인(cold) TCP 연결보다 효율적입니다. -HTTP/2에서는 추가적인 단계가 도입되었습니다. HTTP/1.x 메시지를 프레임으로 나누어 스트림에 끼워 넣는 것입니다. 데이터와 헤더 프레임이 분리 되었기 때문에 헤더를 압축할 수 있습니다. 스트림 여러개를 하나로 묶을 수 있어서(이러한 과정을 멀티플렉싱이라 합니다), 기저에서 수행되는 TCP 연결이 좀 더 효율적이게 이루어집니다. +HTTP/2에서는 추가적인 단계가 도입되었습니다. HTTP/1.x 메시지를 프레임으로 나누어 스트림에 끼워 넣는 것입니다. 데이터와 헤더 프레임이 분리 되었기 때문에, 헤더를 압축할 수 있습니다. 스트림 여러개를 하나로 묶을 수 있어서(이러한 과정을 '멀티플렉싱'이라 합니다), 기저에서 수행되는 TCP 연결이 좀 더 효율적으로 이루어집니다. -![HTTP/2는 HTTP 메시지를 프레임(단일 스트림의 일부)으로 분할하도록 수정하면 더 많은 최적화를 할 수 있습니다.](binary_framing2.png) +![HTTP/2는 HTTP 메시지를 프레임(단일 스트림의 일부)으로 분할하도록 수정하면 더 많은 최적화를 할 수 있습니다](binary_framing2.png) -이제 웹 개발자 입장에서는 HTTP 프레임을 매우 쉽게 살펴볼 수 있게 되었습니다. HTTP 프레임은 HTTP/2에서 추가된 단계이며, HTTP/1.1 메시지와 그 기저를 이루는 전송 프로토콜 사이를 메워주는 존재입니다. 그렇다고 해서 HTTP 프레임 때문에 개발자들이 API를 바꿔야 할 필요는 없습니다. 브라우저와 서버 둘 다 모두 HTTP 프레임을 받아 들일 수 있다면, HTTP/2가 활성화 된 후에 사용될 것입니다. +이제 웹 개발자 입장에서는 HTTP 프레임을 매우 쉽게 살펴볼 수 있게 되었습니다. HTTP 프레임은 HTTP/1.1 메시지와 기저가 되는 전송 프로토콜 사이의 HTTP/2에서 추가된 단계입니다. 그렇다고 해서 HTTP 프레임 때문에 개발자들이 API를 바꿔야 할 필요는 없습니다. 브라우저와 서버 둘 다 모두 HTTP 프레임을 쓸 수 있다면, HTTP/2가 활성화되고 사용됩니다. ## 결론 -HTTP 메시지는 HTTP에서 핵심적인 역할을 합니다. 메시지 구조는 단순하게 이루어져 있으며, 확장성도 매우 좋습니다. HTTP/2 프레이밍 메커니즘 덕분에 HTTP/1.x 구문과 기저가 되는 전송 프로토콜 사이에 새로운 중간 단계가 추가 되었습니다. 프로토콜을 자체적으로 수정하지 않고 이미 입증된 메커니즘을 바탕으로 이뤄낸 것입니다. +HTTP 메시지는 HTTP에서 핵심적인 역할을 합니다. 메시지 구조는 단순하게 이루어져 있으며, 확장성도 매우 좋습니다. HTTP/2 프레이밍 메커니즘 덕분에 HTTP/1.x 구문과 기저가 되는 전송 프로토콜 사이에 새로운 중간 단계가 추가 되었습니다. 프로토콜을 자체적으로 수정하지 않고, 이미 입증된 메커니즘을 바탕으로 이뤄낸 것입니다. diff --git a/files/ko/web/javascript/inheritance_and_the_prototype_chain/index.md b/files/ko/web/javascript/inheritance_and_the_prototype_chain/index.md index 31a08d6836c3e9..6846c667519912 100644 --- a/files/ko/web/javascript/inheritance_and_the_prototype_chain/index.md +++ b/files/ko/web/javascript/inheritance_and_the_prototype_chain/index.md @@ -657,7 +657,7 @@ Object.setPrototypeOf(obj, anotherObj); ### \_\_proto\_\_ 접근자를 사용하는 방법 -모든 객체는 [`Object.prototype.__proto__`](//docs/Web/JavaScript/Reference/Global_Objects/Object/proto) 설정자를 상속하며, 이는 기존 객체의 `[[Prototype]]`을 설정하는 데 사용할 수 있습니다(`__proto__` 키가 객체에서 재정의되지 않은 경우). +모든 객체는 [`Object.prototype.__proto__`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/proto) 설정자를 상속하며, 이는 기존 객체의 `[[Prototype]]`을 설정하는 데 사용할 수 있습니다(`__proto__` 키가 객체에서 재정의되지 않은 경우). > **경고:** `Object.prototype.__proto__` 접근자는 **비표준**이며 더 이상 사용되지 않습니다. 대신 거의 항상 `Object.setPrototypeOf`를 사용해야 합니다. diff --git a/files/ko/web/javascript/reference/functions/default_parameters/index.md b/files/ko/web/javascript/reference/functions/default_parameters/index.md index 039cba18e67a51..63932c50fb0cee 100644 --- a/files/ko/web/javascript/reference/functions/default_parameters/index.md +++ b/files/ko/web/javascript/reference/functions/default_parameters/index.md @@ -1,27 +1,29 @@ --- title: 기본값 매개변수 slug: Web/JavaScript/Reference/Functions/Default_parameters +l10n: + sourceCommit: 9ebec1107f78b1e7ba6b23340d32ccc62f703d72 --- {{jsSidebar("Functions")}} -기본값 함수 매개변수 (**default function parameter**)를 사용하면 값이 없거나 `undefined`가 전달될 경우 이름붙은 매개변수를 기본값으로 초기화할 수 있습니다. +기본값 함수 매개변수 (**default function parameter**)를 사용하면 값이 전달되지 않거나 `undefined`인 경우 명명된 매개변수를 기본값으로 초기화할 수 있습니다. {{EmbedInteractiveExample("pages/js/functions-default.html")}} ## 구문 -```js -function fnName(param1 = defaultValue1, ..., paramN = defaultValueN) { ... } +```js-nolint +function fnName(param1 = defaultValue1, /* …, */ paramN = defaultValueN) { + // … +} ``` ## 설명 JavaScript에서, 함수의 매개변수는 `{{jsxref("undefined")}}`가 기본입니다. 그러나, 일부 상황에서는 다른 기본 값을 설정하는 것이 유용할 수 있습니다. 이때가 바로 기본값 매개변수가 필요할 때 입니다. -과거에 기본값 설정을 위한 일반적인 방법은 함수 내부(body)에서 매개변수 값을 검사해 `undefined`인 경우 값을 할당하는 것이었습니다. - -다음 예제에서, `multiply`호출시 `b`에 할당된 값이 없다면, `b` 값은 `a*b`를 평가할 때 `undefined`일 거고 `multiply` 호출은 `NaN`이 반환됩니다. +다음 예제에서 `multiply`가 호출될 때 `b`에 대한 값이 제공되지 않으면 `a * b`를 평가할 때 `b`의 값은 `undefined`가 되고 `multiply`는 `NaN`을 반환합니다. ```js function multiply(a, b) { @@ -32,7 +34,7 @@ multiply(5, 2); // 10 multiply(5); // NaN ! ``` -이를 방지하기 위해서, 아래 두번째 줄과 같이 `multiply` 함수가 오직 한 개의 인수만 있다면 `b`를 `1`로 설정하는 방식을 사용하곤 했습니다. +과거에 기본값을 설정하는 일반적인 방법은 함수 본문에서 매개변수 값을 테스트하고 `undefined`인 경우 값을 할당하는 것이었습니다. 다음 예제에서는 `multiply`가 하나의 인수로만 호출되는 경우 `b`가 `1`로 설정됩니다. ```js function multiply(a, b) { @@ -44,7 +46,7 @@ multiply(5, 2); // 10 multiply(5); // 5 ``` -ES2015의 기본값 매개변수로 함수 내부 에서의 검사는 더 이상 필요치 않습니다. 이제, 간단히 함수 머리(head)에서 `b`의 기본값으로 `1` 로 설정할 수 있습니다: +기본 매개변수를 사용하면 함수 내부의 검사는 더 이상 필요하지 않습니다. 이제 함수 머리(head)에서 `b`에 `1`을 기본값으로 지정할 수 있습니다. ```js function multiply(a, b = 1) { @@ -56,28 +58,69 @@ multiply(5); // 5 multiply(5, undefined); // 5 ``` +매개변수는 여전히 왼쪽에서 오른쪽으로 설정되어 나중에 기본값이 없는 매개변수가 있더라도 기본값을 덮어씁니다. + +```js +function f(x = 1, y) { + return [x, y]; +} + +f(); // [1, undefined] +f(2); // [2, undefined] +``` + +> **참고:** 첫 번째 기본 매개변수와 그 이후의 모든 매개변수는 함수의 [`length`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/length)에 영향을 미치지 않습니다. + +기본 매개변수 생성자는 함수 본문에서 생성된 범위의 상위인 자체 범위에서 동작합니다. + +즉, 이전 매개변수는 이후 매개변수의 생성자에서 참조할 수 있습니다. 그러나 함수 본문에 선언된 함수와 변수는 기본값 매개변수 생성자에서 참조할 수 없으며, 이를 시도하면 런타임 {{jsxref("ReferenceError")}}가 발생합니다. 여기에는 함수 본문에서 [`var`](/ko/docs/Web/JavaScript/Reference/Statements/var)로 선언된 변수도 포함됩니다. + +예를 들어, 다음 함수는 기본 매개변수 값에 함수 본문의 하위 범위에 대한 접근 권한이 없기 때문에 호출될 때 `ReferenceError`를 발생시킵니다. + +```js example-bad +function f(a = go()) { + function go() { + return ":P"; + } +} + +f(); // ReferenceError: go가 정의되지 않았습니다. +``` + +이 함수는 매개변수 `a`의 값을 출력하는데, 변수 `var a`는 매개변수 목록의 상위 범위가 아닌 함수 본문에 대해 생성된 범위에만 올라가기 때문에 `b`에는 값이 표시되지 않습니다. + +```js example-bad +function f(a, b = () => console.log(a)) { + var a = 1; + b(); +} + +f(); // undefined +f(5); // 5 +``` + ## 예제 -### `undefined` vs. 다른 거짓같은 값(falsy values) 전달하기 +### `undefined` vs 다른 거짓같은 값(falsy values) 전달하기 -아래 예제중 두 번째 호출에서, 설사 두 번째 인수를 호출할 때 명시해서 `undefined` (`null` 혹은 {{glossary("falsy")}} 값이 아니긴 하지만 )로 설정하더라도 , `num` 인수의 값은 여전히 기본값입니다. +아래 예제중 두 번째 호출에서, 첫 번째 인수가 명시적으로 `undefined`(`null` 또는 다른 {{glossary("falsy")}} 값은 아니지만)로 설정되어 있어도 여전히 `num` 인수의 값은 여전히 기본값입니다. ```js function test(num = 1) { console.log(typeof num); } -test(); // 'number' (num 은 1로 설정됨) -test(undefined); // 'number' (num 이 역시 1로 설정됨) +test(); // 'number' (num은 1로 설정됨) +test(undefined); // 'number' (num이 역시 1로 설정됨) -// 다른 falsy values로 테스트 하기: -test(""); // 'string' (num 은 ''로 설정됨) -test(null); // 'object' (num 은 null로 설정됨) +// 다른 falsy values로 테스트 하기 +test(""); // 'string' (num은 ''로 설정됨) +test(null); // 'object' (num은 null로 설정됨) ``` ### 호출 시 평가 -기본 인수는 _호출_ _시_ 에 평가됩니다, 그래서 Python의 경우 와는 달리, 함수가 호출될 때마다 새로운 객체가 생성됩니다. +기본 인수는 호출 시에 평가됩니다. 그래서 Python과 달리 함수가 호출될 때마다 새 객체가 생성됩니다. ```js function append(value, array = []) { @@ -89,7 +132,7 @@ append(1); // [1] append(2); // [2], [1, 2]가 아니라 ``` -이는 심지어 함수 및 변수에도 적용됩니다: +이는 심지어 함수와 변수에도 적용됩니다. ```js function callSomething(thing = something()) { @@ -106,27 +149,26 @@ callSomething(); // 1 callSomething(); // 2 ``` -### 앞쪽 매개변수는 뒷쪽의 매개변수 기본값에 사용할 수 있습니다 +### 이전 매개 변수는 이후 매개 변수의 기본값으로 사용할 수 있습니다 -매개 변수가 여러개일 때 앞쪽에( 왼쪽 부분) 정의된 매개변수는 뒷쪽에 정의된 매개변수의 기본값에 바로 사용할 수 있습니다. +앞서 정의한 매개변수(왼쪽)는 나중에 정의한 매개변수의 기본값으로 사용할 수 있습니다. ```js -function greet(name, greeting, message = greeting + " " + name) { +function greet(name, greeting, message = `${greeting} ${name}`) { return [name, greeting, message]; } -greet("David", "Hi"); // ["David", "Hi", "HiDavid"] +greet("David", "Hi"); // ["David", "Hi", "Hi David"] greet("David", "Hi", "Happy Birthday!"); // ["David", "Hi", "Happy Birthday!"] ``` -이 기능은, 얼마나 많은 경계 조건(edge case)를 다룰수 있는지 보여주는, 아래 예제로 거의 설명 가능합니다. +이 기능은 다음과 같이 대략적으로 계산할 수 있으며, 이는 처리되는 경계 조건(edge case)의 수를 보여줍니다. ```js function go() { return ":P"; } -// 함수 정의가 간단해짐 function withDefaults( a, b = 5, @@ -139,11 +181,9 @@ function withDefaults( return [a, b, c, d, e, f, g]; } -// 함수 정의가 길고 장황함 function withoutDefaults(a, b, c, d, e, f, g) { switch (arguments.length) { case 0: - a; case 1: b = 5; case 2: @@ -156,13 +196,10 @@ function withoutDefaults(a, b, c, d, e, f, g) { f = arguments; case 6: g = this.value; - default: } return [a, b, c, d, e, f, g]; } -// 아래와 같이 함수 호출하면 동일한 결과를 보임 - withDefaults.call({ value: "=^_^=" }); // [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] @@ -170,57 +207,30 @@ withoutDefaults.call({ value: "=^_^=" }); // [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] ``` -### 유효범위 효과 (Scope Effects) - -한개 이상의 매개변수에 기본값이 지정되면 특별히 매개변수 목록내의 식별자들(identifiers) 대상으로, [두번째 스코프](https://tc39.es/ecma262/#sec-functiondeclarationinstantiation) (Environment Record) 가 생성됩니다. - -이 말은 함수 내부에 선언된 함수와 변수들은 매개변수 기본값 초기화시에 참조할 수 없다는 말입니다; 그렇게 하려고 하면 실행시간 에러인 {{jsxref("ReferenceError")}} 를 유발합니다. - -이 말은 또한 함수 내부에서 `var` 로 선언된 변수는 동일한 이름을 가진 매개변수를 가리게 되는, 중첩 `var` 선언 으로 인한 일반적인 동작이 일어나지 않는다는 말입니다. - -아래 함수는 호출되면 `ReferenceError` 를 발생시킵니다. 매개변수 기본값이 함수 내부의 자식 유효범위를 참조할 수 없기 때문입니다. +### 기본값이 할당된 구조화된 매개변수 -```js example-bad -function f(a = go()) { - // `f`가 호출 되면 `ReferenceError` 발생 - function go() { - return ":P"; - } -} -``` +[구조 분해 할당](/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) 구문을 사용하여 기본값 할당을 사용할 수 있습니다. -...그리고 아래 함수는 `undefined` 를 프린트 하는데, `var a` 가 함수 내부 대상의 유효범위내에서만 효과를 가지기 때문입니다. ( 매개변수 목록이 대상인 부모 스코프가 아니라) - -```js example-bad -function f(a, b = () => console.log(a)) { - var a = 1; - b(); // `undefined`를 인쇄하는데, 매개변수 기본값이 자체 스코프에 있기 때문입니다 -} -``` - -### 기본값 매개변수 뒤쪽의 기본값 없는 매개변수 - -매개변수는 여전히 왼쪽에서 오른쪽으로 설정됩니다. 아래 예제에서 뒷쪽에 기본값이 없는 매개변수가 있지만 기본값 매개변수를 덮어씁니다. +이를 수행하는 일반적인 방법은 빈 객체/배열을 구조 분해된 매개변수의 기본값으로 설정하는 것입니다.(예: `[x = 1, y = 2] = []`) 이렇게 하면 함수에 아무 것도 전달하지 않고도 해당 값이 미리 채워져 있을 수 있습니다. ```js -function f(x = 1, y) { - return [x, y]; +function preFilledArray([x = 1, y = 2] = []) { + return x + y; } -f(); // [1, undefined] -f(2); // [2, undefined] -``` +preFilledArray(); // 3 +preFilledArray([]); // 3 +preFilledArray([2]); // 4 +preFilledArray([2, 3]); // 5 -### 기본값 할당 있는 해체된 매개변수 - -기본값 할당을 {{jsxref("Operators/Destructuring_assignment", "destructuring assignment", "", 1)}} 표기와 함께 사용할 수 있습니다: - -```js -function f([x, y] = [1, 2], { z: z } = { z: 3 }) { - return x + y + z; +// 객체에서도 동일하게 작동합니다. +function preFilledObject({ z = 3 } = {}) { + return z; } -f(); // 6 +preFilledObject(); // 3 +preFilledObject({}); // 3 +preFilledObject({ z: 2 }); // 2 ``` ## 명세서 @@ -233,4 +243,7 @@ f(); // 6 ## 참조 -- [Original proposal at ecmascript.org](http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values) +- [함수](/ko/docs/Web/JavaScript/Guide/Functions) +- [함수](/ko/docs/Web/JavaScript/Reference/Functions) +- [나머지 매개변수](/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters) +- [Nullish coalescing operator (`??`)](/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing) diff --git a/files/ko/web/javascript/reference/global_objects/array/from/index.md b/files/ko/web/javascript/reference/global_objects/array/from/index.md index f2e3c76adfce44..8ea0eaac2f3df4 100644 --- a/files/ko/web/javascript/reference/global_objects/array/from/index.md +++ b/files/ko/web/javascript/reference/global_objects/array/from/index.md @@ -1,72 +1,84 @@ --- title: Array.from() slug: Web/JavaScript/Reference/Global_Objects/Array/from +l10n: + sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a --- {{JSRef}} -**`Array.from()`** 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운`Array` 객체를 만듭니다. +**`Array.from()`** 정적 메서드는 [순회 가능](/ko/docs/Web/JavaScript/Reference/Iteration_protocols#순회_가능_프로토콜) 또는 [유사 배열](/ko/docs/Web/JavaScript/Guide/Indexed_collections##유사_배열_객체_다루기) 객체에서 얕게 복사된 새로운 `Array` 인스턴스를 생성합니다. -{{EmbedInteractiveExample("pages/js/array-from.html")}} +{{EmbedInteractiveExample("pages/js/array-from.html", "shorter")}} ## 구문 -```js - Array.from(arrayLike[, mapFn[, thisArg]]) +```js-nolint +Array.from(arrayLike) +Array.from(arrayLike, mapFn) +Array.from(arrayLike, mapFn, thisArg) ``` ### 매개변수 - `arrayLike` - - : 배열로 변환하고자 하는유사 배열 객체나 반복 가능한 객체. -- `mapFn`{{Optional_inline}} - - : 배열의 모든 요소에 대해 호출할 맵핑 함수. -- `thisArg`{{Optional_inline}} - - : `mapFn` 실행 시에 `this`로 사용할 값. + - : 배열로 변환할 순회 가능 또는 유사 배열 객체입니다. +- `mapFn`{{optional_inline}} + - : 배열의 모든 요소에 대해 호출할 함수입니다. 이 함수를 제공하면 배열에 추가할 모든 값이 이 함수를 통해 먼저 전달되고, `mapFn`의 반환 값이 대신 배열에 추가됩니다. 이 함수는 다음 인수를 사용하여 호출됩니다. + - `element` + - : 배열에서 처리 중인 현재 요소. + - `index` + - : 배열에서 처리 중인 현재 요소의 인덱스. +- `thisArg`{{optional_inline}} + - : `mapFn` 실행 시에 `this`로 사용할 값입니다. ### 반환 값 -새로운 {{jsxref("Array")}} 인스턴스. +새로운 {{jsxref("Array")}} 인스턴스입니다. ## 설명 -다음과 같은 경우에 `Array.from()`으로새`Array`를 만들 수 있습니다. +다음과 같은 경우에 `Array.from()`을 사용하면 `Array`를 만들 수 있습니다. + +- [순회 가능](/ko/docs/Web/JavaScript/Reference/Iteration_protocols#순회_가능_프로토콜) 객체({{jsxref("Map")}}, {{jsxref("Set")}}과 같은 객체)인 경우. 또는 객체가 순회 가능이 아니라면, +- 유사 배열 객체(`length` 속성과 인덱싱된 요소가 있는 객체). -- 유사 배열 객체 (`length` 속성과 인덱싱 된 요소를 가진 객체) -- [순회 가능한 객체](/ko/docs/Web/JavaScript/Guide/iterable) ({{jsxref("Map")}}, {{jsxref("Set")}} 등객체의 요소를 얻을 수 있는 객체) +순회 가능이 아니거나 유사 배열이 아닌 일반 객체를 배열로 변환하려면(속성 키, 값 또는 둘을 모두 열거하여) {{jsxref("Object.keys()")}}, {{jsxref("Object.values()")}}, 또는 {{jsxref("Object.entries()")}}를 사용해야 합니다. [비동기 순회 가능](/ko/docs/Web/JavaScript/Reference/Iteration_protocols#비동기_순회자와_비동기_순회_가능_프로토콜)을 배열로 변환하려면 {{jsxref("Array.fromAsync()")}}를 사용합니다. -`Array.from()`은 선택 매개변수인 `mapFn`를 가지는데, 배열(혹은 배열 서브클래스)의 각 요소를{{jsxref("Array.prototype.map", "맵핑", "", 0)}}할 때 사용할 수 있습니다. 즉,`Array.from(obj, mapFn, thisArg)`는 중간에 다른 배열을 생성하지 않는다는 점을 제외하면`Array.from(obj).map(mapFn, thisArg)`와 같습니다. 이 특징은 [typed arrays](/ko/docs/Web/JavaScript/Typed_arrays)와 같은 특정 배열 서브클래스에서 중간 배열 값이 적절한 유형에 맞게 생략되기 때문에 특히 중요합니다. +`Array.from()`은 희소 배열을 생성하지 않습니다. `arrayLike` 객체에 일부 인덱스 속성이 누락된 경우, 새 배열에서 해당 속성은 `undefined`가 됩니다. -`from()` 메서드의 `length` 속성은 1입니다. +`Array.from()`에는 생성되는 배열의 각 요소에 대해 함수를 실행할 수 있는 {{jsxref("Array/map", "map()")}}과 비슷한 선택적 매개변수 `mapFn`이 있습니다. 좀 더 명확하게 설명하자면, `Array.from(obj, mapFn, thisArg)`는 중간 배열을 생성하지 않는다는 점과 배열이 아직 생성 중이기 때문에 전체 배열 없어 두 개의 인수(`element`, `index`)만 받는다는 점을 제외하면 `Array.from(obj).map(mapFn, thisArg)`과 동일한 결과를 가져옵니다. -ES2015 이후, 클래스 구문은 내장 및 새 클래스의 상속을 가능케 했습니다. 그 결과로 `Array.from`과 같은 정적 메서드는 `Array`의 서브클래스에 의해 상속되며, `Array` 대신 자신의 인스턴스를 만듭니다. +> **참고:** 이 동작은 [형식화 배열](/ko/docs/Web/JavaScript/Guide/Typed_arrays)에서 더 중요한데, 중간 배열에는 적절한 형식에 맞게 잘린 값이 있어야 하기 때문입니다. `Array.from()`은 {{jsxref("TypedArray.from()")}}과 동일한 동작을 하도록 구현되었습니다. + +`Array.from()` 메서드는 범용 팩토리 메서드입니다. 예를 들어, `Array`의 하위 클래스가 `from()` 메서드를 상속하는 경우, 상속된 `from()` 메서드는 `Array` 인스턴스 대신 하위 클래스의 새 인스턴스를 반환합니다. 실제로 `this` 값은 새 배열의 길이를 나타내는 단일 인수를 받는 모든 생성자 함수가 될 수 있습니다. 순회 가능이 `arrayLike`로 전달되면 인수 없이 생성자가 호출되고, 배열형 객체가 전달되면 배열형 객체의 [정규화된 length](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#length_속성_일반화)를 사용하여 생성자가 호출됩니다. 최종 `length`는 순회가 완료되면 다시 설정됩니다. `this` 값이 생성자 함수가 아닌 경우, 일반 `Array` 생성자가 대신 사용됩니다. ## 예제 -### `String`에서 배열 만들기 +### String으로 배열 만들기 ```js Array.from("foo"); -// ["f", "o", "o"] +// [ "f", "o", "o" ] ``` -### `Set`에서 배열 만들기 +### Set으로 배열 만들기 ```js -const s = new Set(["foo", window]); -Array.from(s); -// ["foo", window] +const set = new Set(["foo", "bar", "baz", "foo"]); +Array.from(set); +// [ "foo", "bar", "baz" ] ``` -### `Map`에서 배열 만들기 +### Map으로 배열 만들기 ```js -const m = new Map([ +const map = new Map([ [1, 2], [2, 4], [4, 8], ]); -Array.from(m); +Array.from(map); // [[1, 2], [2, 4], [4, 8]] const mapper = new Map([ @@ -80,7 +92,16 @@ Array.from(mapper.keys()); // ['1', '2']; ``` -### 배열 형태를 가진 객체(`arguments`)에서 배열 만들기 +### NodeList로 배열 만들기 + +```js +// DOM 요소의 속성을 기반으로 배열 만들기 +const images = document.querySelectorAll("img"); +const sources = Array.from(images, (image) => image.src); +const insecureSources = sources.filter((link) => link.startsWith("http://")); +``` + +### 유사 배열 객체로 베열 만들기 (arguments) ```js function f() { @@ -89,143 +110,72 @@ function f() { f(1, 2, 3); -// [1, 2, 3] +// [ 1, 2, 3 ] ``` -### `Array.from`과 화살표 함수 사용하기 +### 화살표 함수와 Array.from() 사용하기 ```js -// Using an arrow function as the map function to -// manipulate the elements +// 화살표 함수를 map 함수로 사용하여 요소 조작 Array.from([1, 2, 3], (x) => x + x); // [2, 4, 6] -// Generate a sequence of numbers -// Since the array is initialized with `undefined` on each position, -// the value of `v` below will be `undefined` +// 숫자 시퀀스 생성하기 +// 배열의 각 위치가 `undefined`로 초기화되므로 +// 아래 'v'의 값은 `undefined`가 됩니다. Array.from({ length: 5 }, (v, i) => i); // [0, 1, 2, 3, 4] ``` -### 시퀀스 생성기(range) +### 시퀀스 생성기 (range) ```js -// Sequence generator function (commonly referred to as "range", e.g. Clojure, PHP etc) +// 시퀀스 생성기 함수 (Clojure, PHP 등에선 "range"라고도 함) const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step); -// Generate numbers range 0..4 +// 0..4 범위의 숫자 생성하기 range(0, 4, 1); // [0, 1, 2, 3, 4] -// Generate numbers range 1..10 with step of 2 +// 두 단계씩 1...10 범위의 숫자 생성 range(1, 10, 2); // [1, 3, 5, 7, 9] -// Generate the alphabet using Array.from making use of it being ordered as a sequence +// 시퀀스로 정렬되는 것을 활용하여 `Array.from`으로 알파벳을 생성하기 range("A".charCodeAt(0), "Z".charCodeAt(0), 1).map((x) => String.fromCharCode(x), ); // ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"] ``` -## 폴리필 +### 배열이 아닌 생성자에 from() 호출하기 -`Array.from`은 ECMA-262 표준 제6판에 추가됐습니다.따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 플랫폼에서도`Array.from`을 사용할 수 있습니다. 아래 알고리즘은[`Object`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object)와[`TypeError`](/ko/docs/Web/JavaScript/Reference/Global_Objects/TypeError)가 변형되지 않고,`callback.call`의 계산 값이 원래의[`Function.prototype.call()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call)과 같은 경우ECMA-262 제6판이 명시한 것과 동일합니다. 또한 반복가능자(iterable)는 완벽하게 폴리필 할 수 없기에 본 구현은 ECMA-262 제6판의 제네릭 반복가능자를 지원하지 않습니다. +`from()` 메서드는 새 배열의 `length`를 나타내는 단일 인수를 받아들이는 모든 생성자 함수에서 호출할 수 있습니다. ```js -// Production steps of ECMA-262, Edition 6, 22.1.2.1 -if (!Array.from) { - Array.from = (function () { - var toStr = Object.prototype.toString; - var isCallable = function (fn) { - return typeof fn === "function" || toStr.call(fn) === "[object Function]"; - }; - var toInteger = function (value) { - var number = Number(value); - if (isNaN(number)) { - return 0; - } - if (number === 0 || !isFinite(number)) { - return number; - } - return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number)); - }; - var maxSafeInteger = Math.pow(2, 53) - 1; - var toLength = function (value) { - var len = toInteger(value); - return Math.min(Math.max(len, 0), maxSafeInteger); - }; - - // The length property of the from method is 1. - return function from(arrayLike /*, mapFn, thisArg */) { - // 1. Let C be the this value. - var C = this; - - // 2. Let items be ToObject(arrayLike). - var items = Object(arrayLike); - - // 3. ReturnIfAbrupt(items). - if (arrayLike == null) { - throw new TypeError( - "Array.from requires an array-like object - not null or undefined", - ); - } - - // 4. If mapfn is undefined, then let mapping be false. - var mapFn = arguments.length > 1 ? arguments[1] : void undefined; - var T; - if (typeof mapFn !== "undefined") { - // 5. else - // 5. a If IsCallable(mapfn) is false, throw a TypeError exception. - if (!isCallable(mapFn)) { - throw new TypeError( - "Array.from: when provided, the second argument must be a function", - ); - } - - // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined. - if (arguments.length > 2) { - T = arguments[2]; - } - } - - // 10. Let lenValue be Get(items, "length"). - // 11. Let len be ToLength(lenValue). - var len = toLength(items.length); - - // 13. If IsConstructor(C) is true, then - // 13. a. Let A be the result of calling the [[Construct]] internal method - // of C with an argument list containing the single item len. - // 14. a. Else, Let A be ArrayCreate(len). - var A = isCallable(C) ? Object(new C(len)) : new Array(len); - - // 16. Let k be 0. - var k = 0; - // 17. Repeat, while k < len… (also steps a - h) - var kValue; - while (k < len) { - kValue = items[k]; - if (mapFn) { - A[k] = - typeof T === "undefined" - ? mapFn(kValue, k) - : mapFn.call(T, kValue, k); - } else { - A[k] = kValue; - } - k += 1; - } - // 18. Let putStatus be Put(A, "length", len, true). - A.length = len; - // 20. Return A. - return A; - }; - })(); +function NotArray(len) { + console.log("NotArray called with length", len); } + +// 순회 가능 +console.log(Array.from.call(NotArray, new Set(["foo", "bar", "baz"]))); +// NotArray는 length가 undefined인 상태로 호출됩니다. +// NotArray { '0': 'foo', '1': 'bar', '2': 'baz', length: 3 } + +// 유사 배열 +console.log(Array.from.call(NotArray, { length: 1, 0: "foo" })); +// NotArray는 length가 1인 상태로 호출됩니다. +// NotArray { '0': 'foo', length: 1 } +``` + +`this` 값이 생성자가 아닌 경우, 일반 `Array` 객체가 반환됩니다. + +```js +console.log(Array.from.call({}, { length: 1, 0: "foo" })); // [ 'foo' ] ``` -## 명세 +## 명세서 {{Specifications}} @@ -235,6 +185,11 @@ if (!Array.from) { ## 같이 보기 +- [`core-js`의 `Array.from` 폴리필](https://github.com/zloirock/core-js#ecmascript-array) +- [인덱스 기반 컬렉션](/ko/docs/Web/JavaScript/Guide/Indexed_collections) 안내서 - {{jsxref("Array")}} +- {{jsxref("Array/Array", "Array()")}} +- {{jsxref("Array.of()")}} +- {{jsxref("Array.fromAsync()")}} - {{jsxref("Array.prototype.map()")}} - {{jsxref("TypedArray.from()")}} diff --git a/files/ko/web/javascript/reference/iteration_protocols/index.md b/files/ko/web/javascript/reference/iteration_protocols/index.md index e2807b185e92f1..9a26fb947ee7f0 100644 --- a/files/ko/web/javascript/reference/iteration_protocols/index.md +++ b/files/ko/web/javascript/reference/iteration_protocols/index.md @@ -9,7 +9,7 @@ l10n: **순회 프로토콜**은 새로운 내장 객체 또는 구문이 아닌 프로토콜입니다. 이러한 프로토콜은 몇 가지 규칙에 따라 모든 객체에서 구현될 수 있습니다. -프로토콜은 [순회 가능 프로토콜](#순회_가능_프로토콜)과 [순회자 프로토콜](#순회자_프로토콜)로 두 가지가 있습니다. +프로토콜은 [순회 가능 프로토콜](#순회_가능_프로토콜)과 [반복자 프로토콜](#반복자_프로토콜)로 두 가지가 있습니다. ## 순회 가능 프로토콜 @@ -18,53 +18,53 @@ l10n: **순회 가능**이 되기위해 객체는 반드시 `@@iterator` 메서드를 구현해야 합니다. 즉, 객체(또는 [프로토타입 체인](/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)의 객체 중 하나)에 상수 {{jsxref("Symbol.iterator")}}를 통해 이용할 수 있는 `@@iterator` 키가 있는 속성이 있어야 합니다. - `[Symbol.iterator]` - - : [순회자 프로토콜](#순회자_프로토콜)을 준수하는 객체를 반환하는 인수가 없는 함수. + - : [반복자 프로토콜](#반복자_프로토콜)을 준수하는 객체를 반환하는 인수가 없는 함수. -객체를 순회해야 할 때마다(예: {{jsxref("Statements/for...of", "for...of")}} 루프 시작 시) `@@iterator` 메서드는 인수 전달 없이 호출되고, 반환된 **순회자**는 반복할 값을 가져오는 데 사용됩니다. +객체를 순회해야 할 때마다(예: {{jsxref("Statements/for...of", "for...of")}} 루프 시작 시) `@@iterator` 메서드는 인수 전달 없이 호출되고, 반환된 **반복자**는 반복할 값을 가져오는 데 사용됩니다. 이 인수가 없는 함수는, 순회 가능 객체의 메서드로 호출됩니다. 따라서 함수 내에서 `this` 키워드를 사용하여 순회 가능 객체의 속성에 접근하고 순회 중에 제공할 항목을 결정할 수 있습니다. -이 함수는 평범한 함수이거나 제너레이터 함수일 수 있고, 호출 시 순회자 객체가 반환됩니다. 제너레이터 함수 내에서 각 항목은 `yield`를 사용하여 제공될 수 있습니다. +이 함수는 평범한 함수이거나 제너레이터 함수일 수 있고, 호출 시 반복자 객체가 반환됩니다. 제너레이터 함수 내에서 각 항목은 `yield`를 사용하여 제공될 수 있습니다. -## 순회자 프로토콜 +## 반복자 프로토콜 -**순회자 프로토콜**은 유한하거나 무한한 일련의 값을 생성하는 표준 방법을 정의하고, 모든 값이 생성되었을 때 잠재적으로 반환 값을 정의합니다. +**반복자 프로토콜**은 유한하거나 무한한 일련의 값을 생성하는 표준 방법을 정의하고, 모든 값이 생성되었을 때 잠재적으로 반환 값을 정의합니다. -객체는 다음 의미 체계를 사용하여 `next()` 메서드를 구현할 때 순회자가 됩니다. +객체는 다음 의미 체계를 사용하여 `next()` 메서드를 구현할 때 반복자가 됩니다. - `next()` - - : 0개 또는 1개의 인수를 허용하고 `IteratorResult` 인터페이스(아래 참조)를 준수하는 객체를 반환하는 함수입니다. 내장 언어 기능(`for...of` 등)이 순회자를 사용할 때 객체가 아닌 값(`false` 또는 `undefined` 등)이 반환되면 {{jsxref("TypeError")}} (`"iterator.next() returned a non-object value"`)가 발생합니다. + - : 0개 또는 1개의 인수를 허용하고 `IteratorResult` 인터페이스(아래 참조)를 준수하는 객체를 반환하는 함수입니다. 내장 언어 기능(`for...of` 등)이 반복자를 사용할 때 객체가 아닌 값(`false` 또는 `undefined` 등)이 반환되면 {{jsxref("TypeError")}} (`"iterator.next() returned a non-object value"`)가 발생합니다. -모든 순회자 프로토콜 메서드(`next()`, `return()`, 그리고 `throw()`)는 `IteratorResult` 인터페이스를 구현하는 객체를 반환해야 합니다. 다음 속성이 반드시 있어야 합니다. +모든 반복자 프로토콜 메서드(`next()`, `return()`, 그리고 `throw()`)는 `IteratorResult` 인터페이스를 구현하는 객체를 반환해야 합니다. 다음 속성이 반드시 있어야 합니다. - `done` {{optional_inline}} - - : 불리언 값으로, 순회자가 시퀀스에서 다음 값을 생성할 수 있는 경우엔 `false`입니다. (이는 `done` 속성을 지정하지 않는 것과 같습니다.) + - : 불리언 값으로, 반복자가 시퀀스에서 다음 값을 생성할 수 있는 경우엔 `false`입니다. (이는 `done` 속성을 지정하지 않는 것과 같습니다.) - 순회자가 시퀀스를 완료한 경우에 이 값은 `true`입니다. 이때 `value`는 순회자의 반환 값을 선택적으로 지정합니다. + 반복자가 시퀀스를 완료한 경우에 이 값은 `true`입니다. 이때 `value`는 반복자의 반환 값을 선택적으로 지정합니다. - `value` {{optional_inline}} - - : 순회자가 반환하는 모든 JavaScript 값입니다. `done`이 `true`이면 생략할 수 있습니다. + - : 반복자가 반환하는 모든 JavaScript 값입니다. `done`이 `true`이면 생략할 수 있습니다. 실제로 두 속성이 모두 엄격하게 요구되진 않습니다. 속성이 없는 객체가 반환되면 사실상 `{ done: false, value: undefined }`와 동일합니다. -순회자가 `done: true`로 결과를 반환하면 `next()`에 대한 모든 후속 호출도 `done: true`를 반환할 것으로 예상되지만 이는 언어 수준에서 강제되지 않습니다. +반복자가 `done: true`로 결과를 반환하면 `next()`에 대한 모든 후속 호출도 `done: true`를 반환할 것으로 예상되지만 이는 언어 수준에서 강제되지 않습니다. `next` 메서드는 메서드 본문에서 사용할 수 있는 값을 받을 수 있습니다. 내장 언어 기능은 어떠한 값도 전달하지 않습니다. [제너레이터](/ko/docs/Web/JavaScript/Reference/Global_Objects/Generator)의 `next` 메서드로 전달된 값은 해당 `yield` 표현식의 값이 됩니다. -순회자는 선택적으로 <strong>`return(value)`</strong>와 **`throw(exception)`** 메서드를 구현할 수 있습니다. 이 메서드는 호출될 때 호출자가 순회를 완료했으며, 필요한 정리(예: 데이터베이스 연결 닫기)를 수행할 수 있음을 순회자에게 알립니다. +반복자는 선택적으로 <strong>`return(value)`</strong>와 **`throw(exception)`** 메서드를 구현할 수 있습니다. 이 메서드는 호출될 때 호출자가 순회를 완료했으며, 필요한 정리(예: 데이터베이스 연결 닫기)를 수행할 수 있음을 반복자에게 알립니다. - `return(value)` {{optional_inline}} - - : 0개 또는 1개의 인수를 허용하고 `IteratorResult` 인터페이스를 준수하는 객체를 반환하는 함수입니다. 일반적으로 `value`는 전달된 `vlaue`와 같고 `done`은 `true`입니다. 이 메서드를 호출하면 순회자에게 호출자가 더 이상 `next()`를 호출을 할 의도가 없으며, 정리 작업을 수행할 수 있음을 알립니다. + - : 0개 또는 1개의 인수를 허용하고 `IteratorResult` 인터페이스를 준수하는 객체를 반환하는 함수입니다. 일반적으로 `value`는 전달된 `vlaue`와 같고 `done`은 `true`입니다. 이 메서드를 호출하면 반복자에게 호출자가 더 이상 `next()`를 호출을 할 의도가 없으며, 정리 작업을 수행할 수 있음을 알립니다. - `throw(exception)` {{optional_inline}} - - : 0개 또는 1개의 인수를 허용하고 `IteratorResult` 인터페이스를 준수하는 객체를 반환하는 함수입니다. 일반적으로 `done`은 `true`입니다. 이 메서드를 호출하면 순회자에게 호출자가 오류 조건을 감지했음을 알리며, `exception`은 일반적으로 {{jsxref("Error")}} 인스턴스입니다. + - : 0개 또는 1개의 인수를 허용하고 `IteratorResult` 인터페이스를 준수하는 객체를 반환하는 함수입니다. 일반적으로 `done`은 `true`입니다. 이 메서드를 호출하면 반복자에게 호출자가 오류 조건을 감지했음을 알리며, `exception`은 일반적으로 {{jsxref("Error")}} 인스턴스입니다. -> **참고:** 특정 객체가 순회자 프로토콜을 구현하는지 여부를 반사적으로(즉, 실제로 `next()`를 호출하고 반환된 결과를 확인하지 않고는) 알 수 없습니다. +> **참고:** 특정 객체가 반복자 프로토콜을 구현하는지 여부를 반사적으로(즉, 실제로 `next()`를 호출하고 반환된 결과를 확인하지 않고는) 알 수 없습니다. -순회자를 순회 가능으로 만드는 것은 매우 쉽습니다. `this`를 반환하는 `[@@iterator]()` 메서드를 구현하기만 하면 됩니다. +반복자를 순회 가능으로 만드는 것은 매우 쉽습니다. `this`를 반환하는 `[@@iterator]()` 메서드를 구현하기만 하면 됩니다. ```js -// 순회자 프로토콜과 순회 가능을 모두 만족 +// 반복자 프로토콜과 순회 가능을 모두 만족 const myIterator = { next() { // ... @@ -75,7 +75,7 @@ const myIterator = { }; ``` -이러한 객체를 순회 가능 순회자라고 합니다. 이렇게 하면 순회 가능을 기대하는 다양한 구문에서 순회자를 사용할 수 있습니다. 따라서 순회 가능을 구현하지 않고 순회자 프로토콜을 구현하는 것은 거의 유용하지 않습니다. (실제로 거의 모든 구문과 API는 순회자가 아니라 순회 가능을 기대합니다.) [제너레이터 객체](/ko/docs/Web/JavaScript/Reference/Global_Objects/Generator)가 그 예입니다. +이러한 객체를 순회 가능 반복자라고 합니다. 이렇게 하면 순회 가능을 기대하는 다양한 구문에서 반복자를 사용할 수 있습니다. 따라서 순회 가능을 구현하지 않고 반복자 프로토콜을 구현하는 것은 거의 유용하지 않습니다. (실제로 거의 모든 구문과 API는 반복자가 아니라 순회 가능을 기대합니다.) [제너레이터 객체](/ko/docs/Web/JavaScript/Reference/Global_Objects/Generator)가 그 예입니다. ```js const aGeneratorObject = (function* () { @@ -85,57 +85,57 @@ const aGeneratorObject = (function* () { })(); console.log(typeof aGeneratorObject.next); -// "function" — next 메서드(올바른 결과를 반환)가 있으므로 순회자입니다. +// "function" — next 메서드(올바른 결과를 반환)가 있으므로 반복자입니다. console.log(typeof aGeneratorObject[Symbol.iterator]); -// "function" — @@iterator 메서드(올바른 순회자를 반환)가 있으므로 순회 가능입니다. +// "function" — @@iterator 메서드(올바른 반복자를 반환)가 있으므로 순회 가능입니다. console.log(aGeneratorObject[Symbol.iterator]() === aGeneratorObject); -// true — @@iterator 메서드는 자신(순회자)을 반환하므로 순회 가능 순회자입니다. +// true — @@iterator 메서드는 자신(반복자)을 반환하므로 순회 가능 반복자입니다. ``` -모든 내장 순회자는 `this`를 반환하는 `[@@iterator]()` 메서드를 구현하는 {{jsxref("Iterator", "Iterator.prototype")}}에서 상속되었기 때문에 내장 순회자도 순회 가능입니다. +모든 내장 반복자는 `this`를 반환하는 `[@@iterator]()` 메서드를 구현하는 {{jsxref("Iterator", "Iterator.prototype")}}에서 상속되었기 때문에 내장 반복자도 순회 가능입니다. 그러나 가능하다면 `iterable[Symbol.iterator]`가 [`Set.prototype[@@iterator]()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Set/@@iterator)처럼 항상 처음부터 시작하는 별개의 반복자를 반환하는 것이 좋습니다. -## 비동기 순회자와 비동기 순회 가능 프로토콜 +## 비동기 반복자와 비동기 순회 가능 프로토콜 -**비동기 순회자**와 **비동기 순회 가능** 프로토콜 이라는 비동기 순회에 사용되는 또 다른 프로토콜 쌍이 있습니다. 순회 가능과 순회자 프로토콜과 비교했을 때 매우 유사한 인터페이스를 가지고 있고, 순회자 메서드 호출의 각 반환 값이 프로미스로 래핑된다는 점만 다릅니다. +**비동기 반복자**와 **비동기 순회 가능** 프로토콜 이라는 비동기 순회에 사용되는 또 다른 프로토콜 쌍이 있습니다. 순회 가능과 반복자 프로토콜과 비교했을 때 매우 유사한 인터페이스를 가지고 있고, 반복자 메서드 호출의 각 반환 값이 프로미스로 래핑된다는 점만 다릅니다. 객체는 다음 메서드를 구현할 때 비동기 순회 가능 프로토콜을 구현합니다. - [`[Symbol.asyncIterator]`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/asyncIterator) - - : 비동기 순회자 프로토콜을 준수하는 객체를 반환하는 인수가 없는 함수입니다. + - : 비동기 반복자 프로토콜을 준수하는 객체를 반환하는 인수가 없는 함수입니다. -객체는 다음 메서드를 구현할 때 비동기 순회자 프로토콜을 구현합니다. +객체는 다음 메서드를 구현할 때 비동기 반복자 프로토콜을 구현합니다. - `next()` - - : 0개 또는 1개의 인수를 허용하고 프로미스를 반환하는 함수입니다. 프로미스는 `IteratorResult` 인터페이스를 준수하는 객체로 이행되며, 속성은 동기 순회자와 동일한 의미 체계를 갖습니다. + - : 0개 또는 1개의 인수를 허용하고 프로미스를 반환하는 함수입니다. 프로미스는 `IteratorResult` 인터페이스를 준수하는 객체로 이행되며, 속성은 동기 반복자와 동일한 의미 체계를 갖습니다. - `return(value)` {{optional_inline}} - - : 0개 또는 1개의 인수를 허용하고 프로미스를 반환하는 함수입니다. 프로미스는 `IteratorResult` 인터페이스를 준수하는 객체로 이행되며, 속성은 동기 순회자와 동일한 의미 체계를 갖습니다. + - : 0개 또는 1개의 인수를 허용하고 프로미스를 반환하는 함수입니다. 프로미스는 `IteratorResult` 인터페이스를 준수하는 객체로 이행되며, 속성은 동기 반복자와 동일한 의미 체계를 갖습니다. - `throw(exception)` {{optional_inline}} - - : 0개 또는 1개의 인수를 허용하고 프로미스를 반환하는 함수입니다. 프로미스는 `IteratorResult` 인터페이스를 준수하는 객체로 이행되며, 속성은 동기 순회자와 동일한 의미 체계를 갖습니다. + - : 0개 또는 1개의 인수를 허용하고 프로미스를 반환하는 함수입니다. 프로미스는 `IteratorResult` 인터페이스를 준수하는 객체로 이행되며, 속성은 동기 반복자와 동일한 의미 체계를 갖습니다. ## 언어와 순회 프로토콜 간의 상호 작용 -언어는 순회 가능과 순회자를 생성하거나 소비하는 API를 지정합니다. +언어는 순회 가능과 반복자를 생성하거나 소비하는 API를 지정합니다. ### 내장 순회 가능 {{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, 그리고 [`Intl.Segmenter.prototype.segment()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter/segment)에서 반환된 [`Segments`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter/segment/Segments)는 각각의 `prototype` 객체가 `@@iterator` 메서드를 구현하기 때문에 모두 내장 순회 가능입니다. 또한 [`인수`](/ko/docs/Web/JavaScript/Reference/Functions/arguments) 객체와 {{domxref("NodeList")}}와 같은 일부 DOM 컬렉션 유형도 순회 가능입니다. [`ReadableStream`](/ko/docs/Web/API/ReadableStream)은 이 문서를 작성할 당시의 유일한 내장 비동기 순회 가능입니다. -[제너레이터 함수](/ko/docs/Web/JavaScript/Reference/Statements/function*)는 순회 가능 순회자인 [제너레이터 객체](/ko/docs/Web/JavaScript/Reference/Global_Objects/Generator)를 반환합니다. [비동기 제너레이터 함수](/ko/docs/Web/JavaScript/Reference/Statements/async_function*)는 비동기 순회 가능 순회자인 [비동기 제너레이터 객체](/ko/docs/Web/JavaScript/Reference/Global_Objects/AsyncGenerator)를 반환합니다. +[제너레이터 함수](/ko/docs/Web/JavaScript/Reference/Statements/function*)는 순회 가능 반복자인 [제너레이터 객체](/ko/docs/Web/JavaScript/Reference/Global_Objects/Generator)를 반환합니다. [비동기 제너레이터 함수](/ko/docs/Web/JavaScript/Reference/Statements/async_function*)는 비동기 순회 가능 반복자인 [비동기 제너레이터 객체](/ko/docs/Web/JavaScript/Reference/Global_Objects/AsyncGenerator)를 반환합니다. -내장 순회 가능에서 반환된 순회자는 실제로 모두 앞서 언급한 `[Symbol.iterator]() { return this; }` 메서드를 사용하여 순회 가능 순회자로 만드는 공통 클래스(현재 노출되어있지 않음)를 상속받습니다. 앞으로 이러한 내장 순회자는 `next()` 메서드 외에 추가적으로 순회자 프로토콜에서 필요한 [도우미 메서드](https://github.com/tc39/proposal-iterator-helpers)를 가지고 있을 수 있습니다. 그래픽 콘솔에 로그하여 순회자의 프로토타입 체인을 검사해볼 수 있습니다. +내장 순회 가능에서 반환된 반복자는 실제로 모두 앞서 언급한 `[Symbol.iterator]() { return this; }` 메서드를 사용하여 순회 가능 반복자로 만드는 공통 클래스(현재 노출되어있지 않음)를 상속받습니다. 앞으로 이러한 내장 반복자는 `next()` 메서드 외에 추가적으로 반복자 프로토콜에서 필요한 [도우미 메서드](https://github.com/tc39/proposal-iterator-helpers)를 가지고 있을 수 있습니다. 그래픽 콘솔에 로그하여 반복자의 프로토타입 체인을 검사해볼 수 있습니다. ``` console.log([][Symbol.iterator]()); Array Iterator {} - [[Prototype]]: Array Iterator ==> 모든 배열 순회자가 공유하는 프로토타입입니다. + [[Prototype]]: Array Iterator ==> 모든 배열 반복자가 공유하는 프로토타입입니다. next: ƒ next() Symbol(Symbol.toStringTag): "Array Iterator" - [[Prototype]]: Object ==> 모든 내장 순회자가 공유하는 프로토타입입니다. + [[Prototype]]: Object ==> 모든 내장 반복자가 공유하는 프로토타입입니다. Symbol(Symbol.iterator): ƒ [Symbol.iterator]() [[Prototype]]: Object ==> Object.prototype 입니다. ``` @@ -190,7 +190,7 @@ console.log(gen().next()); // { value: "a", done: false } console.log(a); // "a" ``` -내장 구문이 순회자를 순회하고 마지막 결과의 `done`이 `false`(즉, 순회자가 더 많은 값을 생성할 수 있음)이지만 더 이상 값이 필요하지 않은 경우 `return` 메서드가 있는경우, 해당 메서드가 호출됩니다. 예를 들어 `break` 또는 `return`이 `for...of` 루프에서 발생하거나 모든 식별자가 배열 구조 분해에 이미 바인딩된 경우에 이러한 상황이 발생할 수 있습니다. +내장 구문이 반복자를 순회하고 마지막 결과의 `done`이 `false`(즉, 반복자가 더 많은 값을 생성할 수 있음)이지만 더 이상 값이 필요하지 않은 경우 `return` 메서드가 있는경우, 해당 메서드가 호출됩니다. 예를 들어 `break` 또는 `return`이 `for...of` 루프에서 발생하거나 모든 식별자가 배열 구조 분해에 이미 바인딩된 경우에 이러한 상황이 발생할 수 있습니다. ```js const obj = { @@ -233,7 +233,7 @@ for (const b of obj) { ### 잘못 구성된 순회 가능 -순회 가능의 `@@iterator` 메서드가 순회자 객체를 반환하지 않으면 잘못 구성된 순회 가능으로 간주됩니다. +순회 가능의 `@@iterator` 메서드가 반복자 객체를 반환하지 않으면 잘못 구성된 순회 가능으로 간주됩니다. 이렇게 사용하면 런타임 오류 또는 버그가 발생할 수 있습니다. @@ -261,9 +261,9 @@ const myIterable = { console.log([...myIterable]); // [1, 2, 3] ``` -### 간단한 순회자 +### 간단한 반복자 -순회자는 본래 stateful입니다. 위의 예와 같이 [제너레이터 함수](/ko/docs/Web/JavaScript/Reference/Statements/function*)로 정의하지 않으면, 여러분은 상태를 클로저에 캡슐화하고 싶을 것입니다. +반복자는 본래 stateful입니다. 위의 예와 같이 [제너레이터 함수](/ko/docs/Web/JavaScript/Reference/Statements/function*)로 정의하지 않으면, 여러분은 상태를 클로저에 캡슐화하고 싶을 것입니다. ```js function makeIterator(array) { @@ -289,7 +289,7 @@ console.log(it.next().value); // 'ya' console.log(it.next().done); // true ``` -### 무한 순회자 +### 무한 반복자 ```js function idMaker() { @@ -312,7 +312,7 @@ console.log(it.next().value); // 2 // ... ``` -### 제너레이터로 순회자 정의하기 +### 제너레이터로 반복자 정의하기 ```js function* makeSimpleGenerator(array) { @@ -343,7 +343,7 @@ console.log(it.next().value); // 2 // ... ``` -### 클래스로 순회자 정의하기 +### 클래스로 반복자 정의하기 상태 캡슐화는 [프라이빗 속성](/ko/docs/Web/JavaScript/Reference/Classes/Private_class_fields)으로도 수행할 수 있습니다. @@ -356,7 +356,7 @@ class SimpleClass { } [Symbol.iterator]() { - // 각 순회자에 대해 새 색인을 사용하세요. + // 각 반복자에 대해 새 색인을 사용하세요. // 이렇게 하면 break 사용 또는 동일한 순회 가능의 중첩 루프와 같은 // 사소한 상황에서 순회 가능에 대한 여러 반복이 안전해집니다. let index = 0; @@ -391,7 +391,7 @@ const someString = "hi"; console.log(typeof someString[Symbol.iterator]); // "function" ``` -`String`의 [기본 순회자](/ko/docs/Web/JavaScript/Reference/Global_Objects/String/@@iterator)는 다음과 같이 문자열의 코드 포인트를 하나씩 반환합니다. +`String`의 [기본 반복자](/ko/docs/Web/JavaScript/Reference/Global_Objects/String/@@iterator)는 다음과 같이 문자열의 코드 포인트를 하나씩 반환합니다. ```js const iterator = someString[Symbol.iterator](); @@ -410,7 +410,7 @@ const someString = new String("hi"); someString[Symbol.iterator] = function () { return { - // 단일 요소(문자열 "bye")를 반환하는 순회자 객체 + // 단일 요소(문자열 "bye")를 반환하는 반복자 객체 next() { return this._first ? { value: "bye", done: (this._first = false) } @@ -434,7 +434,7 @@ console.log(`${someString}`); // "hi" ## 같이 보기 -- [순회자와 제너레이터](/ko/docs/Web/JavaScript/Guide/Iterators_and_generators) +- [반복자와 제너레이터](/ko/docs/Web/JavaScript/Guide/Iterators_and_generators) - {{jsxref("Statements/function*", "function*")}} - {{jsxref("Symbol.iterator")}} - {{jsxref("Iterator")}} diff --git a/files/ko/web/performance/how_browsers_work/index.md b/files/ko/web/performance/how_browsers_work/index.md index 204b3097086a14..9ab1ff9a2c2a58 100644 --- a/files/ko/web/performance/how_browsers_work/index.md +++ b/files/ko/web/performance/how_browsers_work/index.md @@ -87,7 +87,7 @@ HTTPS를 이용한 보안성있는 연결을 위해서는 또 다른 "핸드셰 ![TCP slow start](congestioncontrol.jpg) -첫 페이지의 로딩에 관련해서 14kb 법칙을 들어본적이 있나요? TCP의 슬로우 스타트가 초기 응답의 크기가 14kb인 이유입니다. 그리고 웹 최적화를 할 때 초기 14kb 응답을 염두해야하는 것도 이 때문입니다. TCP 슬로우 스타트는 혼잡을 피하기 위해서 네트워크의 용량에 적당한 전송 속도를 찾고자 점진적으로 속도를 높여나갑니다. +첫 페이지의 로딩에 관련해서 14kb 법칙을 들어본적이 있나요? 초기 응답의 크기가 14kb인 이유는 TCP 슬로우 스타트 때문입니다. 그리고 웹 최적화를 할 때 초기 14kb 응답을 염두해야하는 것도 이 때문입니다. TCP 슬로우 스타트는 혼잡을 피하기 위해서 네트워크의 용량에 적당한 전송 속도를 찾고자 점진적으로 속도를 높여나갑니다. ### 혼잡 제어(Congestion control) diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt index e1b5ba69dacf55..944b4cb552aa7d 100644 --- a/files/pt-br/_redirects.txt +++ b/files/pt-br/_redirects.txt @@ -704,7 +704,8 @@ /pt-BR/docs/Web/CSS/CSS_Reference /pt-BR/docs/Web/CSS/Reference /pt-BR/docs/Web/CSS/CSS_Reference/mix-blend-mode /pt-BR/docs/Web/CSS/mix-blend-mode /pt-BR/docs/Web/CSS/CSS_Tipos /pt-BR/docs/Web/CSS/CSS_Types -/pt-BR/docs/Web/CSS/General_sibling_selectors /pt-BR/docs/Web/CSS/General_sibling_combinator +/pt-BR/docs/Web/CSS/General_sibling_combinator /pt-BR/docs/Web/CSS/Subsequent-sibling_combinator +/pt-BR/docs/Web/CSS/General_sibling_selectors /pt-BR/docs/Web/CSS/Subsequent-sibling_combinator /pt-BR/docs/Web/CSS/Getting_Started/JavaScript /pt-BR/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents /pt-BR/docs/Web/CSS/Getting_Started/Lists /pt-BR/docs/Learn/CSS/Styling_text/Styling_lists /pt-BR/docs/Web/CSS/Media_Queries /pt-BR/docs/Web/CSS/CSS_media_queries diff --git a/files/pt-br/_wikihistory.json b/files/pt-br/_wikihistory.json index 646fdee004a9d9..42299b4db3dfe4 100644 --- a/files/pt-br/_wikihistory.json +++ b/files/pt-br/_wikihistory.json @@ -4728,10 +4728,6 @@ "modified": "2020-10-15T22:27:46.661Z", "contributors": ["maxsixth"] }, - "Web/CSS/General_sibling_combinator": { - "modified": "2019-03-23T22:12:07.654Z", - "contributors": ["ExE-Boss", "dineiar", "interaminense"] - }, "Web/CSS/ID_selectors": { "modified": "2019-03-23T22:30:10.383Z", "contributors": ["fcard"] @@ -4793,6 +4789,10 @@ "fvargaspf@gmail.com" ] }, + "Web/CSS/Subsequent-sibling_combinator": { + "modified": "2019-03-23T22:12:07.654Z", + "contributors": ["ExE-Boss", "dineiar", "interaminense"] + }, "Web/CSS/Syntax": { "modified": "2019-03-18T20:58:06.000Z", "contributors": [ diff --git a/files/pt-br/conflicting/web/api/animationevent/animationevent/index.md b/files/pt-br/conflicting/web/api/animationevent/animationevent/index.md index c254416a0e1384..1437cffb870bbe 100644 --- a/files/pt-br/conflicting/web/api/animationevent/animationevent/index.md +++ b/files/pt-br/conflicting/web/api/animationevent/animationevent/index.md @@ -42,7 +42,7 @@ animationEvent.initAnimationEvent(typeArg, canBubbleArg, cancelableArg, animatio ## Especificações -_Esse método é não-padrão e não é parte de qualquer especificação, no entanto ele esteve presente nos primeiros rascunhos de {{SpecName("CSS3 Animations")}}._ +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/conflicting/web/api/customelementregistry/define/index.md b/files/pt-br/conflicting/web/api/customelementregistry/define/index.md index dc98e55883d440..0d87c2042c16df 100644 --- a/files/pt-br/conflicting/web/api/customelementregistry/define/index.md +++ b/files/pt-br/conflicting/web/api/customelementregistry/define/index.md @@ -49,9 +49,7 @@ mytag.textContent = "I am a my-tag element."; ## Especificações -| Especificação | Estado | Comentário | -| ---------------------------------------- | ------------------------------------ | ----------------- | -| {{SpecName('Custom Elements')}} | {{Spec2('Custom Elements')}} | definição inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/conflicting/web/api/geolocation/getcurrentposition/index.md b/files/pt-br/conflicting/web/api/geolocation/getcurrentposition/index.md index 3050b42efcf0eb..e6b3a5de2a4e10 100644 --- a/files/pt-br/conflicting/web/api/geolocation/getcurrentposition/index.md +++ b/files/pt-br/conflicting/web/api/geolocation/getcurrentposition/index.md @@ -22,9 +22,7 @@ A interface `PositionOptions` não implementa ou herda nenhum método. ## Especificações -| Specification | Status | Comment | -| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------ | -| {{SpecName('Geolocation', '#positionoptions', 'PositionOptions')}} | {{Spec2('Geolocation')}} | Initial definition | +{{Specifications}} ## Navegadores compatíveis diff --git a/files/pt-br/conflicting/web/api/htmlslotelement_ded38e17cacb3809f7af4fec22adcc56/index.md b/files/pt-br/conflicting/web/api/htmlslotelement_ded38e17cacb3809f7af4fec22adcc56/index.md index 266f2a0ba63b01..195152d25075a5 100644 --- a/files/pt-br/conflicting/web/api/htmlslotelement_ded38e17cacb3809f7af4fec22adcc56/index.md +++ b/files/pt-br/conflicting/web/api/htmlslotelement_ded38e17cacb3809f7af4fec22adcc56/index.md @@ -22,9 +22,7 @@ myContentObject.select = "h1 .error"; ## Especificações -| Especificações | Status | Commentário | -| -------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('Shadow DOM', '#the-content-element', 'content')}} | {{Spec2('Shadow DOM')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/conflicting/web/api/window/load_event/index.md b/files/pt-br/conflicting/web/api/window/load_event/index.md index b9f855af959c0e..554acc6a6758dd 100644 --- a/files/pt-br/conflicting/web/api/window/load_event/index.md +++ b/files/pt-br/conflicting/web/api/window/load_event/index.md @@ -50,9 +50,7 @@ Existe também os [Gecko-Specific DOM Events](/pt-BR/docs/Web/Events), como o `D ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------- | -| {{SpecName("HTML WHATWG", "webappapis.html#handler-onload", "onload")}} | {{Spec2("HTML WHATWG")}} | Definição inicial | +{{Specifications}} ## Veja também diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/date/toutcstring/index.md b/files/pt-br/conflicting/web/javascript/reference/global_objects/date/toutcstring/index.md index a7fc110a25c2ca..073a87b7c22e6a 100644 --- a/files/pt-br/conflicting/web/javascript/reference/global_objects/date/toutcstring/index.md +++ b/files/pt-br/conflicting/web/javascript/reference/global_objects/date/toutcstring/index.md @@ -34,9 +34,7 @@ console.log(str); // Mon, 18 Dec 1995 17:28:35 GMT ## Especificações -| Especificação | -| -------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-date.prototype.togmtstring', 'Date.prototype.toGMTString')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/string/index.md b/files/pt-br/conflicting/web/javascript/reference/global_objects/string/index.md index 2f38f30cf29c7a..9736f1cb674248 100644 --- a/files/pt-br/conflicting/web/javascript/reference/global_objects/string/index.md +++ b/files/pt-br/conflicting/web/javascript/reference/global_objects/string/index.md @@ -11,12 +11,7 @@ Passando [`null`](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/null) para ## Especificações -| Specification | Status | Comment | -| -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------------------------------------------------- | -| {{SpecName('WebIDL', '#idl-DOMString', 'DOMString')}} | {{Spec2('WebIDL')}} | Reformulação da definição para remover alguns casos estranhos. | -| {{SpecName('DOM3 Core', 'core.html#DOMString', 'DOMString')}} | {{Spec2('DOM3 Core')}} | Nenhuma mudança da {{SpecName('DOM2 Core')}} | -| {{SpecName('DOM2 Core', 'core.html#ID-C74D1578', 'DOMString')}} | {{Spec2('DOM2 Core')}} | Nenhuma mudança da {{SpecName('DOM1')}} | -| {{SpecName('DOM1', 'level-one-core.html#ID-C74D1578', 'DOMString')}} | {{Spec2('DOM1')}} | Definição inicial. | +{{Specifications}} ## Veja também diff --git a/files/pt-br/learn/css/building_blocks/selectors/attribute_selectors/index.md b/files/pt-br/learn/css/building_blocks/selectors/attribute_selectors/index.md index 80f9a93278325e..fa629d45ee7b24 100644 --- a/files/pt-br/learn/css/building_blocks/selectors/attribute_selectors/index.md +++ b/files/pt-br/learn/css/building_blocks/selectors/attribute_selectors/index.md @@ -1,5 +1,5 @@ --- -title: Attribute selectors +title: Seletores de atributo slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors --- @@ -10,26 +10,26 @@ Como você sabe de seu estudo de HTML, os elementos podem ter atributos que forn <table class="learn-box standard-table"> <tbody> <tr> - <th scope="row">Prerequisites:</th> + <th scope="row">Pré-requisitos:</th> <td> - Basic computer literacy, + Conhecimentos básicos em informática, <a - href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software" - >basic software installed</a - >, basic knowledge of + href="/pt-BR/Learn/Getting_started_with_the_web/Installing_basic_software" + >software básico instalado</a + >, conhecimentos básicos de <a - href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files" - >working with files</a - >, HTML basics (study + href="/pt-BR/Learn/Getting_started_with_the_web/Dealing_with_files" + >trabalhando com arquivos</a + >, Basico de HTML (Estude <a href="/pt-BR/docs/Learn/HTML/Introduction_to_HTML" - >Introduction to HTML</a - >), and an idea of how CSS works (study - <a href="/pt-BR/docs/Learn/CSS/First_steps">CSS first steps</a>.) + >Introdução para o HTML</a + >), e uma ideia de como CSS funciona (Estude + <a href="/pt-BR/docs/Learn/CSS/First_steps">CSS primeiros paços</a>.) </td> </tr> <tr> - <th scope="row">Objective:</th> - <td>To learn what attribute selectors are and how to use them.</td> + <th scope="row">Objetivo:</th> + <td>Entender o que são seletores de atributo e como usa-los.</td> </tr> </tbody> </table> @@ -38,7 +38,7 @@ Como você sabe de seu estudo de HTML, os elementos podem ter atributos que forn Esses seletores permitem a seleção de um elemento com base na presença de um atributo sozinho (por exemplo, href) ou em várias correspondências diferentes com o valor do atributo. -| Selector | Example | Description | +| Seletor | Exemplo | Descrição | | ---------------- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | `[attr]` | `a[title]` | Corresponde a elementos com um atributo attr (cujo nome é o valor entre colchetes). | | `[attr=value]` | `a[href="https://example.com"]` | Corresponde a elementos com um atributo attr cujo valor é exatamente value - a string entre aspas. | @@ -57,7 +57,7 @@ No exemplo abaixo você pode ver esses seletores sendo usados. Esses seletores permitem uma correspondência mais avançada de substrings dentro do valor do seu atributo. Por exemplo, se você tivesse classes de `box-warning` e `box-error` e quisesse combinar tudo que começou com a string "box-", você poderia usar `[class^="box-"]` para selecionar os dois (ou `[class|="box"]` como descrito abaixo). -| Selector | Example | Description | +| Seletor | Exemplo | Descrição | | --------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------- | | `[attr^=value]` | `li[class^="box-"]` | Corresponde a elementos com um atributo attr (cujo nome é o valor entre colchetes), cujo valor começa com valor. | | `[attr$=value]` | `li[class$="-box"]` | Corresponde a elementos com um atributo attr cujo valor termina com valor. | @@ -73,7 +73,7 @@ O próximo exemplo mostra o uso desses seletores: {{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}} -## Case-sensitivity +## Sensibilidade à maiúsculas Se você deseja combinar valores de atributo sem distinção entre maiúsculas e minúsculas, você pode usar o valor i antes do colchete de fechamento. Este sinalizador informa ao navegador para corresponder caracteres ASCII sem distinção entre maiúsculas e minúsculas. Sem o sinalizador, os valores serão correspondidos de acordo com a distinção entre maiúsculas e minúsculas do idioma do documento - no caso do HTML, será sensível a maiúsculas e minúsculas. diff --git a/files/pt-br/learn/css/building_blocks/selectors/index.md b/files/pt-br/learn/css/building_blocks/selectors/index.md index e43c7368021849..9722de740ab10f 100644 --- a/files/pt-br/learn/css/building_blocks/selectors/index.md +++ b/files/pt-br/learn/css/building_blocks/selectors/index.md @@ -186,7 +186,7 @@ Você pode dar uma olhada na tabela de referência de seletores abaixo para obte A tabela a seguir fornece uma visão geral dos seletores disponíveis para uso, juntamente com links para as páginas deste guia que mostram como usar cada tipo de seletor. Também incluí um link para a página MDN de cada seletor, onde você pode verificar as informações de suporte do navegador. Você pode usar isso como uma referência para voltar quando precisar consultar os seletores mais tarde no material, ou quando você experimentar CSS em geral. -| Selector | Example | Learn CSS tutorial | +| Seletor | Exemplo | Tutorial CSS | | ------------------------------------------------------------------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------ | | [Type selector](/pt-BR/docs/Web/CSS/Type_selectors) | `h1 { }` | [Type selectors](/pt-BR/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Type_selectors) | | [Universal selector](/pt-BR/docs/Web/CSS/Universal_selectors) | `* { }` | [The universal selector](/pt-BR/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#The_universal_selector) | diff --git a/files/pt-br/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md b/files/pt-br/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md index ca58f881f5f04f..7271fadd32e927 100644 --- a/files/pt-br/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md +++ b/files/pt-br/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md @@ -10,7 +10,7 @@ Nesta lição, vamos analisar alguns dos seletores simples, o qual provavelmente <table> <tbody> <tr> - <th scope="row">Pré-requistos:</th> + <th scope="row">Pré-requisitos:</th> <td>Familiaridade básica com uso de computadores, <a href="/pt-BR/docs/Learn/Getting_started_with_the_web/Installing_basic_software" diff --git a/files/pt-br/learn/html/howto/use_data_attributes/index.md b/files/pt-br/learn/html/howto/use_data_attributes/index.md index fe1b67f3784885..284a483b732873 100644 --- a/files/pt-br/learn/html/howto/use_data_attributes/index.md +++ b/files/pt-br/learn/html/howto/use_data_attributes/index.md @@ -3,7 +3,7 @@ title: Utilizando data attributes slug: Learn/HTML/Howto/Use_data_attributes --- -O [HTML5](/pt-BR/docs/Web/Guide/HTML/HTML5) foi criado pensando na extensibilidade dos dados que precisam ser associados a um determinado elemento mas não necessariamente tem um significado definido. [Atributos data-\*](/pt-BR/docs/Web/HTML/Global_attributes#attr-dataset) nos permite armazenar informações extras em elementos HTML padrões e semânticos, sem a necessidades de hacks como [classList](/pt-BR/docs/Web/API/Element.classList), atributos fora do padrão, propriedades extras no DOM ou o método depreciado [setUserData](/pt-BR/docs/Web/API/Node.setUserData). +O [HTML5](/pt-BR/docs/Web/Guide/HTML/HTML5) foi criado pensando na extensibilidade dos dados que precisam ser associados a um determinado elemento mas não necessariamente tem um significado definido. [Atributos data-\*](/pt-BR/docs/Web/HTML/Global_attributes#dataset) nos permite armazenar informações extras em elementos HTML padrões e semânticos, sem a necessidades de hacks como [classList](/pt-BR/docs/Web/API/Element.classList), atributos fora do padrão, propriedades extras no DOM ou o método depreciado [setUserData](/pt-BR/docs/Web/API/Node.setUserData). ## Sintaxe HTML diff --git a/files/pt-br/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/pt-br/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md index 000479c85b4a93..3bb600845e1d10 100644 --- a/files/pt-br/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md +++ b/files/pt-br/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md @@ -235,17 +235,17 @@ Existem algumas sérias [preocupações de segurança](/pt-BR/docs/Learn/HTML/Mu Este exemplo inclui os fundamentos básicos necessários para usar um `<iframe>`: -- [`allowfullscreen`](/pt-BR/docs/Web/HTML/Element/iframe#attr-allowfullscreen) +- [`allowfullscreen`](/pt-BR/docs/Web/HTML/Element/iframe#allowfullscreen) - : Se definido, ele `<iframe>`poderá ser colocado no modo de tela cheia usando a [API de tela cheia](/pt-BR/docs/Web/API/Fullscreen_API) (um pouco além do escopo deste artigo). -- [`frameborder`](/pt-BR/docs/Web/HTML/Element/iframe#attr-frameborder) +- [`frameborder`](/pt-BR/docs/Web/HTML/Element/iframe#frameborder) - : Se definido como 1, isso indica ao navegador para desenhar uma borda entre esse quadro e outros quadros, que é o comportamento padrão. 0 remove a borda. Usar isso não é mais recomendado, pois o mesmo efeito pode ser melhor alcançado usando em seu [CSS](/pt-BR/docs/Glossary/CSS) .[`border`](/pt-BR/docs/Web/CSS/border)`: none;` -- [`src`](/pt-BR/docs/Web/HTML/Element/iframe#attr-src) +- [`src`](/pt-BR/docs/Web/HTML/Element/iframe#src) - : Este atributo, como [`<video>`](/pt-BR/docs/Web/HTML/Element/video)/ [`<img>`](/pt-BR/docs/Web/HTML/Element/img), contém um caminho apontando para o URL do documento a ser incorporado. -- [`width`](/pt-BR/docs/Web/HTML/Element/iframe#attr-width) e [`height`](/pt-BR/docs/Web/HTML/Element/iframe#attr-height) +- [`width`](/pt-BR/docs/Web/HTML/Element/iframe#width) e [`height`](/pt-BR/docs/Web/HTML/Element/iframe#height) - : Esses atributos especificam a largura e a altura que você deseja que o iframe seja. - Conteúdo alternativo - : Da mesma forma que outros elementos semelhantes [`<video>`](/pt-BR/docs/Web/HTML/Element/video), você pode incluir conteúdo de fallback entre as `<iframe></iframe>`tags de abertura e fechamento que aparecerão se o navegador não suportar `<iframe>`. Nesse caso, incluímos um link para a página. É improvável que você encontre qualquer navegador que não suporte `<iframe>`s atualmente. -- [`sandbox`](/pt-BR/docs/Web/HTML/Element/iframe#attr-sandbox) +- [`sandbox`](/pt-BR/docs/Web/HTML/Element/iframe#sandbox) - : Esse atributo, que funciona em navegadores um pouco mais modernos que o restante dos `<iframe>`recursos (por exemplo, IE 10 e superior), requer configurações de segurança mais elevadas; falaremos mais sobre isso na próxima seção. > **Nota:** Para melhorar a velocidade, é uma boa ideia definir o `src`atributo do iframe com JavaScript após o carregamento do conteúdo principal. Isso torna sua página utilizável mais cedo e diminui o tempo de carregamento da página oficial (uma importante métrica de [SEO](/pt-BR/docs/Glossary/SEO) ). diff --git a/files/pt-br/orphaned/web/api/htmlshadowelement/index.md b/files/pt-br/orphaned/web/api/htmlshadowelement/index.md index 8eb64a0fb9054b..b609b3832415d3 100644 --- a/files/pt-br/orphaned/web/api/htmlshadowelement/index.md +++ b/files/pt-br/orphaned/web/api/htmlshadowelement/index.md @@ -20,9 +20,7 @@ _Esta interface herda os métodos do {{domxref("HTMLElement")}}._ ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------------------- | -------------------------------- | ---------- | -| {{SpecName('Shadow DOM', '#the-shadow-element', 'shadow')}} | {{Spec2('Shadow DOM')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/orphaned/web/api/navigatorid/platform/index.md b/files/pt-br/orphaned/web/api/navigatorid/platform/index.md index 38ccbec5066fa7..407db5bb34cffa 100644 --- a/files/pt-br/orphaned/web/api/navigatorid/platform/index.md +++ b/files/pt-br/orphaned/web/api/navigatorid/platform/index.md @@ -33,9 +33,7 @@ No Firefox, a preferência `general.platform.override` pode ser usada para sobre ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------ | -| {{SpecName('HTML WHATWG', '#dom-navigator-platform', 'NavigatorID.platform')}} | {{Spec2('HTML WHATWG')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade diff --git a/files/pt-br/orphaned/web/api/navigatorid/useragent/index.md b/files/pt-br/orphaned/web/api/navigatorid/useragent/index.md index 84b1897aa31b5b..5b33a0d8a019d6 100644 --- a/files/pt-br/orphaned/web/api/navigatorid/useragent/index.md +++ b/files/pt-br/orphaned/web/api/navigatorid/useragent/index.md @@ -45,9 +45,7 @@ alert(window.navigator.userAgent) ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------ | -| {{SpecName('HTML WHATWG', '#dom-navigator-useragent', 'NavigatorID.userAgent')}} | {{Spec2('HTML WHATWG')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade diff --git a/files/pt-br/orphaned/web/api/navigatoronline/index.md b/files/pt-br/orphaned/web/api/navigatoronline/index.md index 13989c4003f08a..e88918704561e1 100644 --- a/files/pt-br/orphaned/web/api/navigatoronline/index.md +++ b/files/pt-br/orphaned/web/api/navigatoronline/index.md @@ -22,10 +22,7 @@ _A interface **`NavigatorOnLine`** não implementa nem herda nenhum método._ ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', '#navigatoronline', 'NavigatorOnLine')}} | {{Spec2('HTML WHATWG')}} | Nenhuma mudança desde a ultima atualização, do {{SpecName('HTML5 W3C')}} | -| {{SpecName('HTML5 W3C', '#navigatoronline', 'NavigatorOnLine')}} | {{Spec2('HTML5 W3C')}} | Snapshot do {{SpecName('HTML WHATWG')}} com sua especificação inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/orphaned/web/api/navigatoronline/online/index.md b/files/pt-br/orphaned/web/api/navigatoronline/online/index.md index 19f27eedab00d3..b23646b31de7bc 100644 --- a/files/pt-br/orphaned/web/api/navigatoronline/online/index.md +++ b/files/pt-br/orphaned/web/api/navigatoronline/online/index.md @@ -51,9 +51,7 @@ window.addEventListener('online', function(e) { console.log('online'); }); ## Especificações -| Especificações | Status | Comentário | -| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------- | -| {{SpecName("HTML WHATWG", "browsers.html#dom-navigator-online", "navigator.onLine")}} | {{Spec2("HTML WHATWG")}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/orphaned/web/api/navigatorplugins/index.md b/files/pt-br/orphaned/web/api/navigatorplugins/index.md index 0c92e5ad3ca3a0..15ff30f334871f 100644 --- a/files/pt-br/orphaned/web/api/navigatorplugins/index.md +++ b/files/pt-br/orphaned/web/api/navigatorplugins/index.md @@ -23,9 +23,7 @@ A interface NavigatorPlugins* `NavigatorPlugins`* não herda nenhum método. ## Especificações -| Especificação | Estado | Comentário | -| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------ | -| {{SpecName('HTML WHATWG', '#navigatorplugins', 'NavigatorPlugins')}} | {{Spec2('HTML WHATWG')}} | Definição inicial. | +{{Specifications}} ## Navegador compativeis diff --git a/files/pt-br/orphaned/web/api/navigatorplugins/javaenabled/index.md b/files/pt-br/orphaned/web/api/navigatorplugins/javaenabled/index.md index 44af7d14ab71dc..3ca840a18fc5e5 100644 --- a/files/pt-br/orphaned/web/api/navigatorplugins/javaenabled/index.md +++ b/files/pt-br/orphaned/web/api/navigatorplugins/javaenabled/index.md @@ -27,9 +27,7 @@ O valor de retorno para este método indica se a preferência que controla o Jav ## Especificações -| Esécificações | Estado | Comentário | -| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------ | -| {{SpecName('HTML WHATWG', '#dom-navigator-javaenabled', 'NavigatorPlugins.javaEnabled')}} | {{Spec2('HTML WHATWG')}} | Definição inicial. | +{{Specifications}} ## Navegadores compativeis diff --git a/files/pt-br/web/accessibility/aria/attributes/aria-label/index.md b/files/pt-br/web/accessibility/aria/attributes/aria-label/index.md index 53174f07453b06..053d527682724c 100644 --- a/files/pt-br/web/accessibility/aria/attributes/aria-label/index.md +++ b/files/pt-br/web/accessibility/aria/attributes/aria-label/index.md @@ -30,7 +30,7 @@ Nos casos em que um elemento interativo não tem um nome acessível, ou um nome A maior parte do conteúdo tem um nome acessível gerado a partir do conteúdo de texto de seu elemento de encapsulamento imediato. Nomes acessíveis também podem ser criados por certos atributos ou elementos associados. -Por padrão, o nome acessível de um botão é o conteúdo entre as tags {{HTMLElement('button')}} de abertura e fechamento, o nome acessível de uma imagem é o conteúdo de seu [`alt`](/pt-BR/docs/Web /HTML/Element/img#attr-alt) e o nome acessível de uma entrada de formulário é o conteúdo do elemento {{HTMLElement('label')}} associado. +Por padrão, o nome acessível de um botão é o conteúdo entre as tags {{HTMLElement('button')}} de abertura e fechamento, o nome acessível de uma imagem é o conteúdo de seu [`alt`](/pt-BR/docs/Web /HTML/Element/img#alt) e o nome acessível de uma entrada de formulário é o conteúdo do elemento {{HTMLElement('label')}} associado. Se nenhuma dessas opções estiver disponível, ou se o nome acessível padrão não for apropriado, use o atributo `aria-label` para definir o nome acessível de um elemento. diff --git a/files/pt-br/web/api/document/write/index.md b/files/pt-br/web/api/document/write/index.md index b30367194a175d..53e2f9caf625f4 100644 --- a/files/pt-br/web/api/document/write/index.md +++ b/files/pt-br/web/api/document/write/index.md @@ -58,7 +58,7 @@ Se chamar `document.write()` incorporada em uma tag HTML `<script>` embutida, en > **Nota:** `document.write` e {{domxref("document.writeln")}} [não funcionam em documentos XHTML](/pt-BR/docs/Archive/Web/Writing_JavaScript_for_HTML) (você receberá o erro "Operation is not supported" \[`NS_ERROR_DOM_NOT_SUPPORTED_ERR`] no console de erros). Isso acontece ao abrir um arquivo local com a extensão .xhtml ou em qualquer documento exibido com um MIME type `application/xhtml+xml` {{Glossary("MIME type")}}. Mais informações disponíveis em [W3C XHTML FAQ](https://www.w3.org/MarkUp/2004/xhtml-faq#docwrite). -> **Nota:** `document.write` em [deferred](/pt-BR/docs/Web/HTML/Element/script#attr-defer) ou [asynchronous](/pt-BR/docs/Web/HTML/Element/script#attr-async) scripts será ignorado, e você receberá uma mensagem como "A call to `document.write()` from an asynchronously-loaded external script was ignored" no console de erros. +> **Nota:** `document.write` em [deferred](/pt-BR/docs/Web/HTML/Element/script#defer) ou [asynchronous](/pt-BR/docs/Web/HTML/Element/script#async) scripts será ignorado, e você receberá uma mensagem como "A call to `document.write()` from an asynchronously-loaded external script was ignored" no console de erros. > **Nota:** Somente no Edge, chamando `document.write` mais de uma vez em {{HTMLElement("iframe")}} causa o erro "SCRIPT70: Permission denied". diff --git a/files/pt-br/web/api/file/index.md b/files/pt-br/web/api/file/index.md index 847ffe8c8b2c13..7534effbeba8b8 100644 --- a/files/pt-br/web/api/file/index.md +++ b/files/pt-br/web/api/file/index.md @@ -43,9 +43,7 @@ A interface `File` herda as propriedades da interface {{domxref("Blob")}}. ## Especificações -| Especificação | Status | Comentários | -| ------------------------ | --------------------- | ------------------ | -| {{SpecName('File API')}} | {{Spec2('File API')}} | Definição Inicial. | +{{Specifications}} ## Compatibilidade com os Navegadores diff --git a/files/pt-br/web/api/htmlcanvaselement/todataurl/index.md b/files/pt-br/web/api/htmlcanvaselement/todataurl/index.md index fb22b6b172aa28..b1f0580dc2cd0c 100644 --- a/files/pt-br/web/api/htmlcanvaselement/todataurl/index.md +++ b/files/pt-br/web/api/htmlcanvaselement/todataurl/index.md @@ -120,11 +120,7 @@ function removeColors() { ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------------------------------------- | ------------------------ | ------------------------------------------------------------------------------ | -| {{SpecName('HTML WHATWG', "scripting.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}} | {{Spec2('HTML WHATWG')}} | No change since the latest snapshot, {{SpecName('HTML5 W3C')}} | -| {{SpecName('HTML5.1', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}} | {{Spec2('HTML5.1')}} | | -| {{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}} | {{Spec2('HTML5 W3C')}} | Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/--_star_/index.md b/files/pt-br/web/css/--_star_/index.md index 871d06ff64dfa2..35c7e6bc8108e7 100644 --- a/files/pt-br/web/css/--_star_/index.md +++ b/files/pt-br/web/css/--_star_/index.md @@ -78,9 +78,7 @@ Propriedades personalizadas participam na cascata: cada uma delas pode aparecer ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------ | --------------------------- | ------------------ | -| {{SpecName("CSS3 Variables", "#defining-variables", "--*")}} | {{Spec2("CSS3 Variables")}} | Initial definition | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/@charset/index.md b/files/pt-br/web/css/@charset/index.md index 893b6c858986f2..b98256bbeeff29 100644 --- a/files/pt-br/web/css/@charset/index.md +++ b/files/pt-br/web/css/@charset/index.md @@ -41,9 +41,7 @@ onde : ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------- | --------------------- | ---------- | -| {{ SpecName('CSS2.1', 'syndata.html#x57', '@charset') }} | {{ Spec2('CSS2.1') }} | | +{{Specifications}} ## Compatibilidade de navegadores diff --git a/files/pt-br/web/css/@font-face/index.md b/files/pt-br/web/css/@font-face/index.md index d04768ea08a2c3..f6e08c3a6b9126 100644 --- a/files/pt-br/web/css/@font-face/index.md +++ b/files/pt-br/web/css/@font-face/index.md @@ -124,11 +124,7 @@ Neste exemplo, a cópia local do usuário "Helvetica Neue Bold" é usada; se o u ## Especificações -| Especificação | Status | Comentário | -| ----------------------------------------------------------- | ----------------------- | -------------------------------------------------------------------- | -| {{SpecName('WOFF2.0', '', 'WOFF2 font format')}} | {{Spec2('WOFF2.0')}} | Especificação de formato de fonte com novo algoritmo de compactação. | -| {{SpecName('WOFF1.0', '', 'WOFF font format')}} | {{Spec2('WOFF1.0')}} | Especificação de formato | -| {{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}} | {{Spec2('CSS3 Fonts')}} | Definição Inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/@import/index.md b/files/pt-br/web/css/@import/index.md index a3ab42d0116bc9..55e9e9c5736820 100644 --- a/files/pt-br/web/css/@import/index.md +++ b/files/pt-br/web/css/@import/index.md @@ -42,11 +42,7 @@ where: ## Especificações -| Especificação | Situação | Comentário | -| ----------------------------------------------------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS3 Media Queries', '#media0', '@import')}} | {{Spec2('CSS3 Media Queries')}} | Estendeu a sintaxe para apoiar qualquer consulta de mídia e não apenas simples [tipos de mídia (media types)](/pt-BR/docs/Web/CSS/@media#Media_types). | -| {{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}} | {{Spec2('CSS2.1')}} | Adicionado suporte para {{cssxref("<string>")}} para denotar a URL de uma folha de estilo, e obrigatoriedade da regra `@import` no início do documento CSS. | -| {{SpecName('CSS1', '#the-cascade', '@import')}} | {{Spec2('CSS1')}} | Definição inicial | +{{Specifications}} ## Browser compatibilidade diff --git a/files/pt-br/web/css/@media/display-mode/index.md b/files/pt-br/web/css/@media/display-mode/index.md index 553968f78d2c00..2bbdbc7905a883 100644 --- a/files/pt-br/web/css/@media/display-mode/index.md +++ b/files/pt-br/web/css/@media/display-mode/index.md @@ -33,9 +33,7 @@ O recurso `display-mode` é especificado como um valor de uma palavra chave esco ## Especificações -| Specification | Status | Comment | -| --------------------------------------------------------------------------- | --------------------- | ------------------ | -| {{SpecName('Manifest', '#the-display-mode-media-feature', 'display-mode')}} | {{Spec2('Manifest')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/@media/prefers-color-scheme/index.md b/files/pt-br/web/css/@media/prefers-color-scheme/index.md index 9ec6c10254302a..5917a1fd771943 100644 --- a/files/pt-br/web/css/@media/prefers-color-scheme/index.md +++ b/files/pt-br/web/css/@media/prefers-color-scheme/index.md @@ -83,9 +83,7 @@ Os elementos abaixo têm um tema de cores inicial. Eles podem ser mais temático ## Especificações -| Especificação | Estado | Comentários | -| ------------------------------------------------------------------------------------------------- | ------------------------------- | ------------------ | -| {{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}} | {{Spec2('CSS5 Media Queries')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/@page/index.md b/files/pt-br/web/css/@page/index.md index bf067ae4019d5c..ad59d7b272c2ea 100644 --- a/files/pt-br/web/css/@page/index.md +++ b/files/pt-br/web/css/@page/index.md @@ -31,10 +31,7 @@ Podemos fazer referência a vários [pseudo-classes](/pt-BR/docs/CSS/Pseudo-clas ## Especificações -| Specification | Status | Comment | -| ----------------------------------------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------ | -| {{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}} | {{Spec2('CSS3 Paged Media')}} | Sem mudanças para {{SpecName('CSS2.1')}}, though more CSS at-rules can be used inside a `@page`. | -| {{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}} | {{Spec2('CSS2.1')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_colon_active/index.md b/files/pt-br/web/css/_colon_active/index.md index a6bbcddf992803..75422d0d3b2472 100644 --- a/files/pt-br/web/css/_colon_active/index.md +++ b/files/pt-br/web/css/_colon_active/index.md @@ -47,12 +47,7 @@ a:active { ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------- | --------------------------- | ------------------ | -| {{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}} | {{Spec2('CSS4 Selectors')}} | Nenhuma mudança. | -| {{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}} | {{Spec2('CSS3 Selectors')}} | Nenhuma mudança. | -| {{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}} | {{Spec2('CSS2.1')}} | Nenhuma mudança. | -| {{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}} | {{Spec2('CSS1')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_colon_blank/index.md b/files/pt-br/web/css/_colon_blank/index.md index c9ac4dcf005d69..d6e5486e72cc30 100644 --- a/files/pt-br/web/css/_colon_blank/index.md +++ b/files/pt-br/web/css/_colon_blank/index.md @@ -17,9 +17,7 @@ A [pseudo-classe](/pt-BR/docs/Web/CSS/Pseudo-classes) [CSS](/pt-BR/docs/Web/CSS) ## Especificações -| Specification | Status | Comment | -| --------------------------------------------------------- | --------------------------- | ------------------ | -| {{SpecName("CSS4 Selectors", "#blank-pseudo", ":blank")}} | {{Spec2("CSS4 Selectors")}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_colon_checked/index.md b/files/pt-br/web/css/_colon_checked/index.md index 996e32682e28db..9b67f7a28b5b09 100644 --- a/files/pt-br/web/css/_colon_checked/index.md +++ b/files/pt-br/web/css/_colon_checked/index.md @@ -156,13 +156,7 @@ Você também pode usar a pseudo-classe `:checked`aplicada a um radioboxe escond ## Especificações -| Especificação | Estatus | Comentários | -| -------------------------------------------------------------- | ----------------------------- | ---------------------------------------------------- | -| {{ SpecName('HTML WHATWG', '#selector-checked', ':checked') }} | {{ Spec2('HTML WHATWG') }} | Sem mudanças. | -| {{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }} | {{ Spec2('HTML5 W3C') }} | Define a semântica sobre o HTML. | -| {{ SpecName('CSS4 Selectors', '#checked', ':checked') }} | {{ Spec2('CSS4 Selectors') }} | Sem mudanças. | -| {{ SpecName('CSS3 Basic UI', '#pseudo-checked', ':checked') }} | {{ Spec2('CSS3 Basic UI') }} | Link para Seletores nível 3 | -| {{ SpecName('CSS3 Selectors', '#checked', ':checked') }} | {{ Spec2('CSS3 Selectors') }} | Define a pseudo-classe, mas não associação semântica | +{{Specifications}} ## Compatibilidade de navegadores diff --git a/files/pt-br/web/css/_colon_first-child/index.md b/files/pt-br/web/css/_colon_first-child/index.md index a22eaa38e4a340..acffd7b1a9b127 100644 --- a/files/pt-br/web/css/_colon_first-child/index.md +++ b/files/pt-br/web/css/_colon_first-child/index.md @@ -69,10 +69,7 @@ li:first-child { ## Especificações -| Especificação | Status | Comentário | -| ----------------------------------------------------------------------- | ----------------------------- | ------------------ | -| {{ SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child') }} | {{ Spec2('CSS4 Selectors') }} | Sem mudança. | -| {{ SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child') }} | {{ Spec2('CSS3 Selectors') }} | Definição inicial. | +{{Specifications}} ## Browsers compatíveis diff --git a/files/pt-br/web/css/_colon_first-of-type/index.md b/files/pt-br/web/css/_colon_first-of-type/index.md index 383e29fcffe154..d94b37a3bdf0ab 100644 --- a/files/pt-br/web/css/_colon_first-of-type/index.md +++ b/files/pt-br/web/css/_colon_first-of-type/index.md @@ -80,10 +80,7 @@ article :first-of-type { ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------------- | --------------------------- | ----------------------------------------------------------------- | -| {{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}} | {{Spec2('CSS4 Selectors')}} | Os elementos correspondentes não são necessários para ter um pai. | -| {{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}} | {{Spec2('CSS3 Selectors')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_colon_focus-within/index.md b/files/pt-br/web/css/_colon_focus-within/index.md index b94dcf0859ef5b..b29facfb1cc9f7 100644 --- a/files/pt-br/web/css/_colon_focus-within/index.md +++ b/files/pt-br/web/css/_colon_focus-within/index.md @@ -63,9 +63,7 @@ input { ## Especificações -| Especificação | Status | Comentário | -| --------------------------------------------------------------------------- | --------------------------- | ------------------- | -| {{SpecName("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}} | {{Spec2("CSS4 Selectors")}} | Initial definition. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_colon_hover/index.md b/files/pt-br/web/css/_colon_hover/index.md index aeacfa96605e90..b8ef225599f203 100644 --- a/files/pt-br/web/css/_colon_hover/index.md +++ b/files/pt-br/web/css/_colon_hover/index.md @@ -83,11 +83,7 @@ Você pode usar a pseudo-classe `:hover` para construir uma galeria de imagem, e ## Especificações -| Especificação | Status | Comentário | -| --------------------------------------------------------------------------------------- | ----------------------------- | --------------------------------------------- | -| {{ SpecName('CSS4 Selectors', '#hover', ':hover') }} | {{ Spec2('CSS4 Selectors') }} | Pode ser aplicado a qualquer pseudo-elemento. | -| {{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }} | {{ Spec2('CSS3 Selectors') }} | Sem mudança significativa. | -| {{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }} | {{ Spec2('CSS2.1') }} | definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_colon_invalid/index.md b/files/pt-br/web/css/_colon_invalid/index.md index 376668585435a8..871caf87520a58 100644 --- a/files/pt-br/web/css/_colon_invalid/index.md +++ b/files/pt-br/web/css/_colon_invalid/index.md @@ -98,11 +98,7 @@ Você pode desabilitar o "brilho" usando o CSS a seguir, ou substituir completam ## Especificações -| Especificação | Status | Comentário | -| --------------------------------------------------------------- | --------------------------- | ----------------------------------------------------- | -| {{SpecName('HTML WHATWG', '#selector-invalid', ':invalid')}} | {{Spec2('HTML WHATWG')}} | Nenhuma alteração. | -| {{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}} | {{Spec2('HTML5 W3C')}} | Define a semântica do HTML e validação de restrições. | -| {{SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid')}} | {{Spec2('CSS4 Selectors')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_colon_last-child/index.md b/files/pt-br/web/css/_colon_last-child/index.md index 6946db7b4351a5..5eb860001640c6 100644 --- a/files/pt-br/web/css/_colon_last-child/index.md +++ b/files/pt-br/web/css/_colon_last-child/index.md @@ -39,10 +39,7 @@ li:last-child { ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------- | ----------------------------- | ------------------ | -| {{ SpecName('CSS4 Selectors', '#last-child', ':last-child') }} | {{ Spec2('CSS4 Selectors') }} | Sem mudança. | -| {{ SpecName('CSS3 Selectors', '#last-child', ':last-child') }} | {{ Spec2('CSS3 Selectors') }} | Definição inicial. | +{{Specifications}} ## Compatibilidade de navegadores diff --git a/files/pt-br/web/css/_colon_last-of-type/index.md b/files/pt-br/web/css/_colon_last-of-type/index.md index 10cc315968f635..e217adbc6c9182 100644 --- a/files/pt-br/web/css/_colon_last-of-type/index.md +++ b/files/pt-br/web/css/_colon_last-of-type/index.md @@ -49,10 +49,7 @@ p em:last-of-type { ## Especificações -| Specification | Status | Comment | -| ----------------------------------------------------------------------- | --------------------------- | ------------------ | -| {{SpecName('CSS4 Selectors', '#last-of-type-pseudo', ':last-of-type')}} | {{Spec2('CSS4 Selectors')}} | No change | -| {{SpecName('CSS3 Selectors', '#last-of-type-pseudo', ':last-of-type')}} | {{Spec2('CSS3 Selectors')}} | Initial definition | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_colon_link/index.md b/files/pt-br/web/css/_colon_link/index.md index b5aa0dbad9fe3f..99778a8cd7744c 100644 --- a/files/pt-br/web/css/_colon_link/index.md +++ b/files/pt-br/web/css/_colon_link/index.md @@ -22,12 +22,7 @@ a:link { ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------- | ----------------------------- | ------------------------------------------------ | -| {{ SpecName('CSS4 Selectors', '#link', ':link') }} | {{ Spec2('CSS4 Selectors') }} | Nenhuma mudança. | -| {{ SpecName('CSS3 Selectors', '#link', ':link') }} | {{ Spec2('CSS3 Selectors') }} | Nenhuma mudança. | -| {{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }} | {{ Spec2('CSS2.1') }} | Uso estrito ao elemento {{ HTMLElement("a") }} . | -| {{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }} | {{ Spec2('CSS1') }} | Definição Inicial. | +{{Specifications}} ## Compatibilidade do navegador diff --git a/files/pt-br/web/css/_colon_not/index.md b/files/pt-br/web/css/_colon_not/index.md index 8fe405c6731724..32827c30438d53 100644 --- a/files/pt-br/web/css/_colon_not/index.md +++ b/files/pt-br/web/css/_colon_not/index.md @@ -46,10 +46,7 @@ Se obtém resultados como este: ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------- | ----------------------------- | ------------------------------------------------------------ | -| {{ SpecName('CSS4 Selectors', '#negation', ':not()') }} | {{ Spec2('CSS4 Selectors') }} | Extende seus argumentos para permitir seletores não-simples. | -| {{ SpecName('CSS3 Selectors', '#negation', ':not()') }} | {{ Spec2('CSS3 Selectors') }} | Definição inicial. | +{{Specifications}} ## Compatibilidade em Navegadores diff --git a/files/pt-br/web/css/_colon_nth-child/index.md b/files/pt-br/web/css/_colon_nth-child/index.md index eeebac1a825aed..741b954e307eb2 100644 --- a/files/pt-br/web/css/_colon_nth-child/index.md +++ b/files/pt-br/web/css/_colon_nth-child/index.md @@ -154,10 +154,7 @@ div em { ## Especificações -| Especificação | Status | Comentário | -| ----------------------------------------------------------------- | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}} | {{Spec2('CSS4 Selectors')}} | Adiciona a sintaxe `of <selector>` e especifica que os elementos correspondentes ao seletor não precisam ter um elemento pai. | -| {{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}} | {{Spec2('CSS3 Selectors')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_colon_nth-last-child/index.md b/files/pt-br/web/css/_colon_nth-last-child/index.md index 4742fd5a3e0f55..ccd8c3c8734009 100644 --- a/files/pt-br/web/css/_colon_nth-last-child/index.md +++ b/files/pt-br/web/css/_colon_nth-last-child/index.md @@ -104,10 +104,7 @@ tr:nth-last-child(-n + 3) { ## Especificações -| Especificação | Status | Comentário | -| --------------------------------------------------------------------------- | --------------------------- | ----------------------------------------------------------- | -| {{SpecName('CSS4 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}} | {{Spec2('CSS4 Selectors')}} | Elementos correspondentes não precisam ter um elemento-pai. | -| {{SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}} | {{Spec2('CSS3 Selectors')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_colon_nth-of-type/index.md b/files/pt-br/web/css/_colon_nth-of-type/index.md index b58f22d3154932..6adb944739ad5c 100644 --- a/files/pt-br/web/css/_colon_nth-of-type/index.md +++ b/files/pt-br/web/css/_colon_nth-of-type/index.md @@ -67,10 +67,7 @@ p:nth-of-type(1) { ## Especificações -| Especificação | Sitação | Comentário | -| --------------------------------------------------------------------- | --------------------------- | ---------------------------------------------------------------- | -| {{SpecName('CSS4 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}} | {{Spec2('CSS4 Selectors')}} | Não é necessário que os elementos correspondentes tenham um pai. | -| {{SpecName('CSS3 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}} | {{Spec2('CSS3 Selectors')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_colon_only-child/index.md b/files/pt-br/web/css/_colon_only-child/index.md index 18ec5a334a77ab..f9381ddff20157 100644 --- a/files/pt-br/web/css/_colon_only-child/index.md +++ b/files/pt-br/web/css/_colon_only-child/index.md @@ -94,10 +94,7 @@ li:only-child { ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------- | --------------------------- | ---------------------------------------------------------------------- | -| {{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}} | {{Spec2('CSS4 Selectors')}} | Não é necessário que os elementos selecionados tenham um elemento-pai. | -| {{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}} | {{Spec2('CSS3 Selectors')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_colon_optional/index.md b/files/pt-br/web/css/_colon_optional/index.md index 1b71a7537f63a7..026f783f04632a 100644 --- a/files/pt-br/web/css/_colon_optional/index.md +++ b/files/pt-br/web/css/_colon_optional/index.md @@ -37,12 +37,7 @@ Entradas requeridas devem ser indicadas visualmente, utilizando um tratamento qu ## Especificações -| Specification | Status | Comment | -| ---------------------------------------------------------------------- | ----------------------------- | ------------------------------------------------------- | -| {{ SpecName('HTML WHATWG', '#selector-optional', ':optional') }} | {{ Spec2('HTML WHATWG') }} | Sem mudança. | -| {{ SpecName('HTML5 W3C', '#selector-optional', ':optional') }} | {{ Spec2('HTML5 W3C') }} | Define a semântica da validação e da restrição do HTML. | -| {{ SpecName('CSS4 Selectors', '#opt-pseudos', ':optional') }} | {{ Spec2('CSS4 Selectors') }} | Sem mudança. | -| {{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':optional') }} | {{ Spec2('CSS3 Basic UI') }} | Define a pseudo-classe, mas não a semântica associada. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_colon_read-write/index.md b/files/pt-br/web/css/_colon_read-write/index.md index e1d31776474b20..2f239a1f4bae06 100644 --- a/files/pt-br/web/css/_colon_read-write/index.md +++ b/files/pt-br/web/css/_colon_read-write/index.md @@ -82,11 +82,7 @@ p:read-write { ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------- | ----------------------------- | -------------------------------------------------------------- | -| {{ SpecName('HTML WHATWG', '#selector-read-write', ':read-write') }} | {{ Spec2('HTML WHATWG') }} | Nenhuma mudança. | -| {{ SpecName('HTML5 W3C', '#selector-read-write', ':read-write') }} | {{ Spec2('HTML5 W3C') }} | Define a semântica em relação à validação de HTML e restrição. | -| {{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write') }} | {{ Spec2('CSS4 Selectors') }} | Define a pseudo-classe, mas não a semântica associada. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_colon_required/index.md b/files/pt-br/web/css/_colon_required/index.md index 149d7b2829264a..cc7f230c1aae98 100644 --- a/files/pt-br/web/css/_colon_required/index.md +++ b/files/pt-br/web/css/_colon_required/index.md @@ -37,12 +37,7 @@ Se o formulário também possui campos [opcionais](/pt-BR/docs/Web/CSS/:optional ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------- | ----------------------------- | ------------------------------------------------------ | -| {{ SpecName('HTML WHATWG', '#selector-required', ':required') }} | {{ Spec2('HTML WHATWG') }} | Sem mudança. | -| {{ SpecName('HTML5 W3C', '#selector-required', ':required') }} | {{ Spec2('HTML5 W3C') }} | Define a semântica de validação e de restrição HTML. | -| {{ SpecName('CSS4 Selectors', '#opt-pseudos', ':required') }} | {{ Spec2('CSS4 Selectors') }} | Sem mudança. | -| {{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required') }} | {{ Spec2('CSS3 Basic UI') }} | Define a pseudo-classe, mas não a semântica associada. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_colon_target/index.md b/files/pt-br/web/css/_colon_target/index.md index c3c47855118d47..8b01d839370c79 100644 --- a/files/pt-br/web/css/_colon_target/index.md +++ b/files/pt-br/web/css/_colon_target/index.md @@ -191,11 +191,7 @@ Você pode usar a pseudo-classe `:target` para criar uma lightbox sem usar JavaS ## Especificações -| Especificações | Status | Comentário | -| ----------------------------------------------------------------------- | --------------------------- | ------------------------------------ | -| {{SpecName("HTML WHATWG", "browsers.html#selector-target", ":target")}} | {{Spec2("HTML WHATWG")}} | Define semântica específica do HTML. | -| {{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}} | {{Spec2("CSS4 Selectors")}} | Não há mudanças. | -| {{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}} | {{Spec2("CSS3 Selectors")}} | Definição inicial. | +{{Specifications}} ## Navegadores compatíveis diff --git a/files/pt-br/web/css/_colon_valid/index.md b/files/pt-br/web/css/_colon_valid/index.md index b8afc3895334d2..90ed10e0c221ab 100644 --- a/files/pt-br/web/css/_colon_valid/index.md +++ b/files/pt-br/web/css/_colon_valid/index.md @@ -26,11 +26,7 @@ Veja {{cssxref(":invalid")}} para um exemplo. ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------- | --------------------------- | ------------------------------------------------------- | -| {{SpecName('HTML WHATWG', '#selector-valid', ':valid')}} | {{Spec2('HTML WHATWG')}} | Sem alterações. | -| {{SpecName('HTML5 W3C', '#selector-valid', ':valid')}} | {{Spec2('HTML5 W3C')}} | Define a semântica do HTML e a validação de restrições. | -| {{SpecName('CSS4 Selectors', '#validity-pseudos', ':valid')}} | {{Spec2('CSS4 Selectors')}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_colon_visited/index.md b/files/pt-br/web/css/_colon_visited/index.md index 5cca3bd0ff5933..309bb0ac0a0d5f 100644 --- a/files/pt-br/web/css/_colon_visited/index.md +++ b/files/pt-br/web/css/_colon_visited/index.md @@ -88,13 +88,7 @@ a:visited { ## Especificações -| Especificações | Status | Comentário | -| ---------------------------------------------------------------------------- | ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{ SpecName('HTML WHATWG', 'scripting.html#selector-visited', ':visited') }} | {{ Spec2('HTML WHATWG') }} | | -| {{ SpecName('CSS4 Selectors', '#link', ':visited') }} | {{ Spec2('CSS4 Selectors') }} | Sem mudança. | -| {{ SpecName('CSS3 Selectors', '#link', ':visited') }} | {{ Spec2('CSS3 Selectors') }} | Sem mudança. | -| {{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }} | {{ Spec2('CSS2.1') }} | Eleva a restrição para aplicar apenas :visited ao elemento {{HTMLElement ("a")}}. Permite que os navegadores restrinjam seu comportamento por motivos de privacidade. | -| {{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }} | {{ Spec2('CSS1') }} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_doublecolon_after/index.md b/files/pt-br/web/css/_doublecolon_after/index.md index 40ac1a8d4f0366..02cea8b27ef01b 100644 --- a/files/pt-br/web/css/_doublecolon_after/index.md +++ b/files/pt-br/web/css/_doublecolon_after/index.md @@ -78,7 +78,7 @@ Podemos estilizar textos ou imagens na propriedade {{cssxref("content")}} pratic ### Dicas -O exemplo a seguir mostra o uso do `::after` [pseudo-elemento](/pt-BR/docs/Web/CSS/Pseudo-elementos) em conjunto com a expressão CSS [`attr()`](/pt-BR/docs/Web/CSS/attr) e um [atributo data personalizado](/pt-BR/docs/Web/HTML/Global_attributes#attr-dataset) `data-descr` para criar uma _dica_ em forma de glossário feito em CSS puro. Verifique a visualização abaixo, ou veja este exemplo em [página separada.](/files/4591/css-only_tooltips.html) +O exemplo a seguir mostra o uso do `::after` [pseudo-elemento](/pt-BR/docs/Web/CSS/Pseudo-elementos) em conjunto com a expressão CSS [`attr()`](/pt-BR/docs/Web/CSS/attr) e um [atributo data personalizado](/pt-BR/docs/Web/HTML/Global_attributes#dataset) `data-descr` para criar uma _dica_ em forma de glossário feito em CSS puro. Verifique a visualização abaixo, ou veja este exemplo em [página separada.](/files/4591/css-only_tooltips.html) ```html <p> @@ -122,13 +122,7 @@ span[data-descr]:hover::after { ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------------------------ | --------------------------------- | ----------------------------------------------------------------- | -| {{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}} | {{Spec2('CSS4 Pseudo-Elements')}} | Sem mudanças significativas em relação à especificação anterior. | -| {{Specname("CSS3 Transitions", "#animatable-properties", "transitions on pseudo-element properties")}} | {{Spec2("CSS3 Transitions")}} | Permite transições em propriedades definidas em pseudo-elementos. | -| {{Specname("CSS3 Animations", "", "animations on pseudo-element properties")}} | {{Spec2("CSS3 Animations")}} | Permite animações em propriedades definidas em pseudo-elementos. | -| {{SpecName('CSS3 Selectors', '#gen-content', '::after')}} | {{Spec2('CSS3 Selectors')}} | Introduz a sintaxe de dois sinais de dois pontos. | -| {{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}} | {{Spec2('CSS2.1')}} | Definição inicial, usando a sintaxe de um sinal de dois pontos. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_doublecolon_backdrop/index.md b/files/pt-br/web/css/_doublecolon_backdrop/index.md index f1fe14e2bb996c..6885831a6f6bb7 100644 --- a/files/pt-br/web/css/_doublecolon_backdrop/index.md +++ b/files/pt-br/web/css/_doublecolon_backdrop/index.md @@ -13,9 +13,7 @@ Ele não herda de nenhum elemento e também não é herdado. Não há restriçã ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------- | ----------------------- | ----------------- | -| {{SpecName('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}} | {{Spec2('Fullscreen')}} | Definição inicial | +{{Specifications}} ## Copatibilidade com navegadores diff --git a/files/pt-br/web/css/_doublecolon_first-letter/index.md b/files/pt-br/web/css/_doublecolon_first-letter/index.md index d3c111564b78f4..7b8acbd2899a44 100644 --- a/files/pt-br/web/css/_doublecolon_first-letter/index.md +++ b/files/pt-br/web/css/_doublecolon_first-letter/index.md @@ -56,13 +56,7 @@ p::first-letter { ## Especificações -| Especificações | Status | Comentários | -| ---------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}} | {{ Spec2('CSS4 Pseudo-Elements')}} | Propriedades permitidas generalizadas para tipografia, decoração de texto e propriedades de layout embutido, {{ cssxref("opacity") }} e {{ cssxref("box-shadow") }}. | -| {{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-letter')}} | {{ Spec2('CSS3 Text Decoration')}} | Permitido uso de {{cssxref("text-shadow")}} com `::first-letter`. | -| {{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }} | {{ Spec2('CSS3 Selectors') }} | Comportamento definido entre maiúsculas e minúsculas, como nos itens da lista, ou com comportamento específico do idioma (como o dígrafo holandês `IJ`). A sintaxe de dois dois-pontos para pseudo-elementos foi introduzida. | -| {{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }} | {{ Spec2('CSS2.1') }} | Sem mudanças significativas, apesar que CSS nível 2 continuar aceitando apenas um dois-pontos. | -| {{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }} | {{ Spec2('CSS1') }} | Definição inicial de um dois-pontos. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_doublecolon_first-line/index.md b/files/pt-br/web/css/_doublecolon_first-line/index.md index fd1400f50055bd..561a8135a73dc6 100644 --- a/files/pt-br/web/css/_doublecolon_first-line/index.md +++ b/files/pt-br/web/css/_doublecolon_first-line/index.md @@ -66,13 +66,7 @@ Somente um pequeno subconjunto de propriedades CSS pode ser usado com o`::first- ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------------------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| {{SpecName('CSS4 Pseudo-Elements', '#first-line-pseudo', '::first-line')}} | {{Spec2('CSS4 Pseudo-Elements')}} | Define mais estritamente onde `::first-letter` pode ocorrer. Generaliza propriedades permitidas para tipografia, decoração de texto e propriedades de layout embutido e {{cssxref("opacity")}}. Define a herança de`::first-letter`. | -| {{SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow with ::first-line')}} | {{Spec2('CSS3 Text Decoration')}} | Permite o uso de {{cssxref("text-shadow")}} com `::first-letter`. | -| {{SpecName('CSS3 Selectors', '#first-line', '::first-line')}} | {{Spec2('CSS3 Selectors')}} | Introdução da sintaxe de dois-pontos. | -| {{SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line')}} | {{Spec2('CSS2.1')}} | Nenhuma mudança. | -| {{SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line')}} | {{Spec2('CSS1')}} | Definição inicial, usando a sintaxe de dois pontos. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/_doublecolon_selection/index.md b/files/pt-br/web/css/_doublecolon_selection/index.md index 5bc63e150ccd4a..0e37e9a396ce11 100644 --- a/files/pt-br/web/css/_doublecolon_selection/index.md +++ b/files/pt-br/web/css/_doublecolon_selection/index.md @@ -94,11 +94,7 @@ Facilite para os usuários ver e ouvir o conteúdo, incluindo a separação do p ## Especificações -| Especificações | Status | Comentário | -| ----------------------------------------------------------------------------- | --------------------------------- | ------------------ | -| {{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}} | {{Spec2('CSS4 Pseudo-Elements')}} | Definição inicial. | - -> **Nota:** `::selection` estava nos rascunhos do Nível 3 dos Seletores de CSS, mas foi removido na fase Recomendação do Candidato porque estava subespecificado (especialmente com elementos aninhados) e a interoperabilidade não foi alcançada ([com base na lista de discussão de estilos W3C](http://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html)). Ele retornou no [Nível 4 dos Pseudo-Elementos](http://dev.w3.org/csswg/css-pseudo-4/). +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/actual_value/index.md b/files/pt-br/web/css/actual_value/index.md index 0b436850da5dad..2735962290eeb7 100644 --- a/files/pt-br/web/css/actual_value/index.md +++ b/files/pt-br/web/css/actual_value/index.md @@ -9,9 +9,7 @@ The **actual value** of a CSS property is the [used value](/pt-BR/docs/Web/CSS/u ## Especificações -| Especificações | Status | Comentario | -| ------------------------------------------------------------------- | ------------------- | ----------------- | -| {{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}} | {{Spec2('CSS2.1')}} | Definição inicial | +{{Specifications}} ## Veja também diff --git a/files/pt-br/web/css/align-items/index.md b/files/pt-br/web/css/align-items/index.md index 1d5696e2b4cb08..8418067035ceac 100644 --- a/files/pt-br/web/css/align-items/index.md +++ b/files/pt-br/web/css/align-items/index.md @@ -229,12 +229,7 @@ display.addEventListener("change", function (evt) { ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------- | ------------------------------- | ----------------------------------------------- | -| {{SpecName("CSS3 Box Alignment", "#propdef-align-items", "align-items")}} | {{Spec2("CSS3 Box Alignment")}} | Atualização para últimas definições de sintaxe. | -| {{SpecName('CSS3 Flexbox', '#propdef-align-items', 'align-items')}} | {{Spec2('CSS3 Flexbox')}} | Definição inicial | - -{{cssinfo}} +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/align-self/index.md b/files/pt-br/web/css/align-self/index.md index fc9965e83bda1a..aabd18dcd56470 100644 --- a/files/pt-br/web/css/align-self/index.md +++ b/files/pt-br/web/css/align-self/index.md @@ -121,12 +121,7 @@ div:nth-child(3) { ## Especificações -| Especificação | Status | Comentário | -| ----------------------------------------------------------------------- | ------------------------------- | -------------------------------------------- | -| {{SpecName("CSS3 Box Alignment", "#propdef-align-self", "align-self")}} | {{Spec2("CSS3 Box Alignment")}} | Atualiza para últimas definições de sintaxe. | -| {{SpecName("CSS3 Flexbox", "#propdef-align-self", "align-self")}} | {{Spec2("CSS3 Flexbox")}} | Definição inicial. | - -{{cssinfo}} +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/attr/index.md b/files/pt-br/web/css/attr/index.md index 0527508f3f4d34..c68a945346b90a 100644 --- a/files/pt-br/web/css/attr/index.md +++ b/files/pt-br/web/css/attr/index.md @@ -82,10 +82,7 @@ p::before { ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS3 Values', '#attr-notation', 'attr()')}} | {{Spec2('CSS3 Values')}} | Added two optional parameters; can be used on all properties; may return other values than {{cssxref("<string>")}}. These changes are experimental and may be dropped during the CR phase if browser support is too small. | -| {{SpecName('CSS2.1', 'generate.html#x18', 'attr()')}} | {{Spec2('CSS2.1')}} | Limited to the {{cssxref("content")}} property; always return a {{cssxref("<string>")}}. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/attribute_selectors/index.md b/files/pt-br/web/css/attribute_selectors/index.md index 17dbb0ceba9b27..41e55e08479e01 100644 --- a/files/pt-br/web/css/attribute_selectors/index.md +++ b/files/pt-br/web/css/attribute_selectors/index.md @@ -139,11 +139,7 @@ div[data-lang="zh-TW"] { ## Especificações -| Specification | Status | Comment | -| ---------------------------------------------------------------------------------- | --------------------------- | ----------------------------------------------------------------- | -| {{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}} | {{Spec2('CSS4 Selectors')}} | Adiciona um modificador para a seleção do valor do atributo ASCII | -| {{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}} | {{Spec2('CSS3 Selectors')}} | | -| {{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}} | {{Spec2('CSS2.1')}} | Definição Inicial | +{{Specifications}} ## Browser compatibilidade diff --git a/files/pt-br/web/css/backface-visibility/index.md b/files/pt-br/web/css/backface-visibility/index.md index c2fba3f80f4eba..7034ed598fbf09 100644 --- a/files/pt-br/web/css/backface-visibility/index.md +++ b/files/pt-br/web/css/backface-visibility/index.md @@ -186,9 +186,7 @@ td { ## Especificações -| Especificação | Status | Comentário | -| --------------------------------------------------------------------------------------- | ---------------------------- | ----------------- | -| {{SpecName('CSS3 Transforms', '#backface-visibility-property', 'backface-visibility')}} | {{Spec2('CSS3 Transforms')}} | Definição Inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/background-attachment/index.md b/files/pt-br/web/css/background-attachment/index.md index de063c98a42447..d8564bbca93c39 100644 --- a/files/pt-br/web/css/background-attachment/index.md +++ b/files/pt-br/web/css/background-attachment/index.md @@ -99,11 +99,7 @@ p { ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------------------------------- | ----------------------------- | ----------------------------------------------------------------------------------------------- | -| {{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}} | {{Spec2('CSS3 Backgrounds')}} | The shorthand property has been extended to support multiple backgrounds and the `local` value. | -| {{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}} | {{Spec2('CSS2.1')}} | Mudança não significativa. | -| {{SpecName('CSS1', '#background-attachment', 'background-attachment')}} | {{Spec2('CSS1')}} | Mudança não significativa | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/background-blend-mode/index.md b/files/pt-br/web/css/background-blend-mode/index.md index 90c1df8c61ead9..d4379efeae747d 100644 --- a/files/pt-br/web/css/background-blend-mode/index.md +++ b/files/pt-br/web/css/background-blend-mode/index.md @@ -80,9 +80,7 @@ console.log(document.getElementById("div")); ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------------------- | -------------------------- | ------------------ | -| {{ SpecName('Compositing', '#background-blend-mode', 'background-blend-mode') }} | {{ Spec2('Compositing') }} | Initial definition | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/background-clip/index.md b/files/pt-br/web/css/background-clip/index.md index 93840e8a955468..08454c0def08b7 100644 --- a/files/pt-br/web/css/background-clip/index.md +++ b/files/pt-br/web/css/background-clip/index.md @@ -159,9 +159,7 @@ p { ## Especificações -| Especificação | Estado | Comentário | -| --------------------------------------------------------------------------- | ----------------------------- | ---------- | -| {{SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip')}} | {{Spec2('CSS3 Backgrounds')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/background-color/index.md b/files/pt-br/web/css/background-color/index.md index a946d8d6ee486c..f49ee1ff47d9c4 100644 --- a/files/pt-br/web/css/background-color/index.md +++ b/files/pt-br/web/css/background-color/index.md @@ -104,11 +104,7 @@ A cor do contrast é determinada comparando a luminância da cor do texto e da c ## Especificações -| Specification | Comment | Feedback | -| ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}} | Though technically removing the `transparent` keyword, this doesn't change anything as it has been incorporated as a true {{cssxref("<color>")}} | [Backgrounds Level 3 GitHub issues](https://github.com/w3c/csswg-drafts/labels/css-backgrounds-3) | -| {{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}} | | | -| {{SpecName('CSS1', '#background-color', 'background-color')}} | Initial definition | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/background-origin/index.md b/files/pt-br/web/css/background-origin/index.md index c17049518fe613..04a841569dda3b 100644 --- a/files/pt-br/web/css/background-origin/index.md +++ b/files/pt-br/web/css/background-origin/index.md @@ -76,11 +76,7 @@ div { ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------- | ----------------------------- | ------------------- | -| {{SpecName('CSS3 Backgrounds', '#the-background-origin', 'background-origin')}} | {{Spec2('CSS3 Backgrounds')}} | Initial definition. | - -{{cssinfo}} +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/background/index.md b/files/pt-br/web/css/background/index.md index 40bb8fbdcbca73..4ee5173c11cff5 100644 --- a/files/pt-br/web/css/background/index.md +++ b/files/pt-br/web/css/background/index.md @@ -88,11 +88,7 @@ Um ou mais dos seguintes, por qualquer ordem: ## Especificações -| Especificação | estado | Comente | -| --------------------------------------------------------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName ( 'Fundos CSS3', '# a-fundo', 'fundo')}} | {{Spec2 ( 'Fundos CSS3')}} | A propriedade taquigráfica foi estendido para suportar múltiplas origens e a nova {{cssxref("background-size")}}, {{cssxref("background-origem")}} e {{cssxref("background-clip")}} propriedades. | -| {{SpecName ( 'CSS2.1', '# propdef-fundo colors.html', 'background')}} | {{Spec2 ( 'CSS2.1')}} | Não ocorreram alterações significativas | -| {{SpecName ( 'CSS1', '#background', 'background')}} | {{Spec2 ( 'CSS1')}} | definição inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/box-sizing/index.md b/files/pt-br/web/css/box-sizing/index.md index 5122ff8dad46c4..7d184be875a4eb 100644 --- a/files/pt-br/web/css/box-sizing/index.md +++ b/files/pt-br/web/css/box-sizing/index.md @@ -41,9 +41,7 @@ box-sizing: inherit ## Especificações -| Especificação | Situação | Comentário | -| ---------------------------------------------------------- | -------------------------- | ---------- | -| {{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}} | {{Spec2('CSS3 Basic UI')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/calc/index.md b/files/pt-br/web/css/calc/index.md index 0489dee726e09c..390a5cc32765cc 100644 --- a/files/pt-br/web/css/calc/index.md +++ b/files/pt-br/web/css/calc/index.md @@ -130,9 +130,7 @@ Isso garante que o tamanho do texto será redimensionado se a página for amplia ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------- | ------------------------ | ----------------- | -| {{SpecName('CSS3 Values', '#calc-notation', 'calc()')}} | {{Spec2('CSS3 Values')}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/class_selectors/index.md b/files/pt-br/web/css/class_selectors/index.md index da113f9ba2ae20..03e2347cff82b7 100644 --- a/files/pt-br/web/css/class_selectors/index.md +++ b/files/pt-br/web/css/class_selectors/index.md @@ -74,12 +74,7 @@ Observe que isso é o mesmo que [`seletor de atributo`](/pt-BR/docs/Web/CSS/Attr ## Especificações -| Especificação | Status | Comentário | -| --------------------------------------------------------------------- | --------------------------- | ----------------- | -| {{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}} | {{Spec2('CSS4 Selectors')}} | Sem mudança | -| {{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}} | {{Spec2('CSS3 Selectors')}} | | -| {{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}} | {{Spec2('CSS2.1')}} | | -| {{SpecName('CSS1', '#class-as-selector', 'child selectors')}} | {{Spec2('CSS1')}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/clear/index.md b/files/pt-br/web/css/clear/index.md index 6b3bae41e47515..4cc177e9558280 100644 --- a/files/pt-br/web/css/clear/index.md +++ b/files/pt-br/web/css/clear/index.md @@ -207,13 +207,7 @@ p { ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------------- | ----------------------------------- | ----------------------------------------------------- | -| {{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}} | {{Spec2('CSS Logical Properties')}} | Adds the values `inline-start` and `inline-end` | -| {{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}} | {{Spec2('CSS2.1')}} | No significant changes, though details are clarified. | -| {{SpecName('CSS1', '#clear', 'clear')}} | {{Spec2('CSS1')}} | Initial definition | - -{{cssinfo}} +{{Specifications}} ## Compatibilidade dos browsers diff --git a/files/pt-br/web/css/computed_value/index.md b/files/pt-br/web/css/computed_value/index.md index 8514c218b1e7a0..1a043f24363840 100644 --- a/files/pt-br/web/css/computed_value/index.md +++ b/files/pt-br/web/css/computed_value/index.md @@ -24,9 +24,7 @@ The {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API returns ## Especificações -| Especificações | Status | Comentário | -| ----------------------------------------------------------------------- | ------------------- | --------------------- | -| {{SpecName("CSS2.1", "cascade.html#computed-value", "computed value")}} | {{Spec2("CSS2.1")}} | Especificação inicial | +{{Specifications}} ## Veja também diff --git a/files/pt-br/web/css/contain/index.md b/files/pt-br/web/css/contain/index.md index 639d1c1a03e276..f61e9634f6cee3 100644 --- a/files/pt-br/web/css/contain/index.md +++ b/files/pt-br/web/css/contain/index.md @@ -59,9 +59,7 @@ Esta propriedade é útil em páginas que contêm um monte de widgets que são t ## Especificações -| Especificação | Status | Comentário | -| ------------------------------- | ---------------------------- | ------------------ | -| {{SpecName('CSS Containment')}} | {{Spec2('CSS Containment')}} | Initial definition | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/content/index.md b/files/pt-br/web/css/content/index.md index cd7251879258a7..6df2c6e3757995 100644 --- a/files/pt-br/web/css/content/index.md +++ b/files/pt-br/web/css/content/index.md @@ -239,10 +239,7 @@ li { ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------ | ------------------------- | ----------------- | -| {{SpecName("CSS3 Content", "#content-property", "content")}} | {{Spec2("CSS3 Content")}} | | -| {{SpecName("CSS2.1", "generate.html#content", "content")}} | {{Spec2("CSS2.1")}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/css_basic_user_interface/index.md b/files/pt-br/web/css/css_basic_user_interface/index.md index cb476d97a60357..099d542c534a71 100644 --- a/files/pt-br/web/css/css_basic_user_interface/index.md +++ b/files/pt-br/web/css/css_basic_user_interface/index.md @@ -35,8 +35,4 @@ slug: Web/CSS/CSS_basic_user_interface ## Especificações -| Especificação | Status | Comentário | -| --------------------------------- | -------------------------- | ------------------ | -| {{SpecName("CSS4 Basic UI")}} | {{Spec2("CSS4 Basic UI")}} | | -| {{SpecName("CSS3 Basic UI")}} | {{Spec2("CSS3 Basic UI")}} | | -| {{SpecName("CSS2.1", "ui.html")}} | {{Spec2("CSS2.1")}} | Definição inicial. | +{{Specifications}} diff --git a/files/pt-br/web/css/css_box_model/index.md b/files/pt-br/web/css/css_box_model/index.md index 1637d080555f66..748adb35173524 100644 --- a/files/pt-br/web/css/css_box_model/index.md +++ b/files/pt-br/web/css/css_box_model/index.md @@ -62,8 +62,4 @@ slug: Web/CSS/CSS_box_model ## Especificações -| Especificação | Situação | Comentário | -| ---------------------------------- | --------------------- | ------------------ | -| {{SpecName("CSS3 Box")}} | {{Spec2("CSS3 Box")}} | | -| {{SpecName("CSS2.1", "box.html")}} | {{Spec2("CSS2.1")}} | | -| {{SpecName("CSS1")}} | {{Spec2("CSS1")}} | Initial definition | +{{Specifications}} diff --git a/files/pt-br/web/css/css_counter_styles/using_css_counters/index.md b/files/pt-br/web/css/css_counter_styles/using_css_counters/index.md index 2207e325035272..94eb82ed15091a 100644 --- a/files/pt-br/web/css/css_counter_styles/using_css_counters/index.md +++ b/files/pt-br/web/css/css_counter_styles/using_css_counters/index.md @@ -94,9 +94,7 @@ Produz este resultado: ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------------------- | ------------------- | ------- | -| {{SpecName('CSS2.1', 'generate.html#generate.html#counters', 'counter-reset')}} | {{Spec2('CSS2.1')}} | | +{{Specifications}} ## Veja mais diff --git a/files/pt-br/web/css/css_display/index.md b/files/pt-br/web/css/css_display/index.md index c6b9d06b50c58c..ab0f717937e188 100644 --- a/files/pt-br/web/css/css_display/index.md +++ b/files/pt-br/web/css/css_display/index.md @@ -60,13 +60,7 @@ slug: Web/CSS/CSS_display ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------ | ------------------------- | ---------------------------------------------------------------------------------------- | -| {{SpecName("CSS3 Display", "#the-display-properties", "display")}} | {{Spec2("CSS3 Display")}} | Adicionado `run-in`, `flow`, `flow-root`, `contents` e valores de várias palavras-chave. | -| {{SpecName("CSS2.1", "visuren.html#display-prop", "display")}} | {{Spec2("CSS2.1")}} | Adicionados os valores do modelo de tabela e `inline-block`. | -| {{SpecName("CSS1", "#display", "display")}} | {{Spec2("CSS1")}} | Definição inicial. Valores básicos: `none`, `block`, `inline` e `list-item`. | - -Além do nível de especificação de exibição CSS 3, outras especificações definem o comportamento de vários valores da exibição. +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/css_flexible_box_layout/index.md b/files/pt-br/web/css/css_flexible_box_layout/index.md index c22c122e7cdfe6..d02688753e8261 100644 --- a/files/pt-br/web/css/css_flexible_box_layout/index.md +++ b/files/pt-br/web/css/css_flexible_box_layout/index.md @@ -70,9 +70,7 @@ A propriedade `align-content`, `align-self`, `align-items` e `justify-content` a ## Especificações -| Especificação | Status | Comentário | -| ------------------------------ | --------------------------- | ------------------ | -| {{ SpecName('CSS3 Flexbox') }} | {{ Spec2('CSS3 Flexbox') }} | Definição inicial. | +{{Specifications}} ## Veja também diff --git a/files/pt-br/web/css/css_grid_layout/index.md b/files/pt-br/web/css/css_grid_layout/index.md index 93e8098aef112f..be1308b34206da 100644 --- a/files/pt-br/web/css/css_grid_layout/index.md +++ b/files/pt-br/web/css/css_grid_layout/index.md @@ -3,6 +3,8 @@ title: CSS Grid Layout slug: Web/CSS/CSS_grid_layout --- +{{CSSRef}} + > **Nota:** CSS Grid será suportado por vários navegadores até meados de 2017. O suporte em navegadores antigos pode ser obtido habilitando-se uma flag que permite o uso da API. Nesse caso não se esqueça de consultar e fazer referência a cada propriedade e funcionalidade da especificação para certificar-se da sua compatibilidade, bem como para obter maiores informações. **CSS Grid layout** é uma especificação do W3C projetada para proporcionar um método bi-dimensional para criação de layout CSS que oferece a possibilidade de "layoutar" itens da página com uso de linhas e colunas. CSS grid poderá ser usado para obter uma infinidade de diferentes layouts. O diferencial desse método de criação de layouts reside na possibilidade de se dividir uma página em grandes regiões e de se definir o relacionamento em termos de medidas, posicionamento e camadas entre os diferentes componentes da marcação HTML. @@ -97,54 +99,16 @@ Tal como as tabelas, grid layout permite ao autor alinhar os componentes da pág ## Especificações -| Especificação | Status | Comentários | -| --------------------------- | ------------------------ | ------------------ | -| {{ SpecName('CSS3 Grid') }} | {{ Spec2('CSS3 Grid') }} | Definição inicial. | - -1. [**CSS**](/pt-BR/docs/Web/CSS) -2. [**CSS Referência**](/pt-BR/docs/Web/CSS/Reference) -3. [CSS Grid Layout](/pt-BR/docs/Web/CSS/CSS_Grid_Layout) -4. **Guias** - - 1. [Conceitos básicos de grid layout](/pt-BR/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout) - 2. [Relação com outros métodos de layout](/pt-BR/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout) - 3. [Posicionamento baseado em linha](/pt-BR/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid) - 4. [Grid template areas](/pt-BR/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas) - 5. [Layout usando grid lines nomeadas](/pt-BR/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines) - 6. [Posicionamento Automático no grid layout](/pt-BR/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout) - 7. [Alinhamento box no grid layout](/pt-BR/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout) - 8. [Grids, Valores Lógicos e Modos de Escrita](/pt-BR/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes) - 9. [CSS Grid Layout e Acessibilidade](/pt-BR/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility) - 10. [CSS Grid Layout e Aprimoramento Progressivo](/pt-BR/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement) - 11. [Realizando layouts comuns usando CSS Grids](/pt-BR/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout) - -5. **Propriedades** - - 1. [grid](/pt-BR/docs/Web/CSS/grid) - 2. [grid-area](/pt-BR/docs/Web/CSS/grid-area) - 3. [grid-auto-columns](/pt-BR/docs/Web/CSS/grid-auto-columns) - 4. [grid-auto-flow](/pt-BR/docs/Web/CSS/grid-auto-flow) - 5. [grid-auto-rows](/pt-BR/docs/Web/CSS/grid-auto-rows) - 6. [grid-column](/pt-BR/docs/Web/CSS/grid-column) - 7. [grid-column-end](/pt-BR/docs/Web/CSS/grid-column-end) - 8. [grid-column-gap](/pt-BR/docs/Web/CSS/grid-column-gap) - 9. [grid-column-start](/pt-BR/docs/Web/CSS/grid-column-start) - 10. [grid-gap](/pt-BR/docs/Web/CSS/grid-gap) - 11. [grid-row](/pt-BR/docs/Web/CSS/grid-row) - 12. [grid-row-end](/pt-BR/docs/Web/CSS/grid-row-end) - 13. [grid-row-gap](/pt-BR/docs/Web/CSS/grid-row-gap) - 14. [grid-row-start](/pt-BR/docs/Web/CSS/grid-row-start) - 15. [grid-template](/pt-BR/docs/Web/CSS/grid-template) - 16. [grid-template-areas](/pt-BR/docs/Web/CSS/grid-template-areas) - 17. [grid-template-colunms](/pt-BR/docs/Web/CSS/grid-template-columns) - 18. [grid-template-rows](/pt-BR/docs/Web/CSS/grid-template-rows) - -6. **Glossário** - - 1. [Grid lines](/pt-BR/docs/Glossary/Grid_lines) - 2. [Grid tracks](/pt-BR/docs/Glossary/Grid_tracks) - 3. [Grid cell](/pt-BR/docs/Glossary/Grid_cell) - 4. [Grid areas](/pt-BR/docs/Glossary/Grid_areas) - 5. [Gutters](/pt-BR/docs/Glossary/Gutters) - 6. [Grid row](/pt-BR/docs/Glossary/Grid_rows) - 7. [Grid column](/pt-BR/docs/Glossary/Grid_column) +{{Specifications}} + +## Veja também + +- Glossário: + + - [Grid lines](/pt-BR/docs/Glossary/Grid_lines) + - [Grid tracks](/pt-BR/docs/Glossary/Grid_tracks) + - [Grid cell](/pt-BR/docs/Glossary/Grid_cell) + - [Grid areas](/pt-BR/docs/Glossary/Grid_areas) + - [Gutters](/pt-BR/docs/Glossary/Gutters) + - [Grid row](/pt-BR/docs/Glossary/Grid_rows) + - [Grid column](/pt-BR/docs/Glossary/Grid_column) diff --git a/files/pt-br/web/css/css_positioned_layout/index.md b/files/pt-br/web/css/css_positioned_layout/index.md index 71982dede5e3b8..caf47b3fb9a655 100644 --- a/files/pt-br/web/css/css_positioned_layout/index.md +++ b/files/pt-br/web/css/css_positioned_layout/index.md @@ -29,7 +29,4 @@ slug: Web/CSS/CSS_positioned_layout ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------- | ------------------------------- | ---------- | -| {{ SpecName('CSS3 Positioning') }} | {{ Spec2('CSS3 Positioning') }} | | -| {{ SpecName('CSS2.1', 'visuren.html') }} | {{ Spec2('CSS2.1') }} | | +{{Specifications}} diff --git a/files/pt-br/web/css/css_selectors/index.md b/files/pt-br/web/css/css_selectors/index.md index 1097847a6f212b..c3258ba4ac51f1 100644 --- a/files/pt-br/web/css/css_selectors/index.md +++ b/files/pt-br/web/css/css_selectors/index.md @@ -56,9 +56,4 @@ Os Seletores definem quais elementos um conjunto de regras CSS se aplica. ## Especificações -| Especificação | Status | Comentário | -| --------------------------------------- | --------------------------- | ----------------- | -| {{SpecName('CSS4 Selectors')}} | {{Spec2('CSS4 Selectors')}} | | -| {{SpecName('CSS3 Selectors')}} | {{Spec2('CSS3 Selectors')}} | | -| {{SpecName('CSS2.1', 'selector.html')}} | {{Spec2('CSS2.1')}} | | -| {{SpecName('CSS1')}} | {{Spec2('CSS1')}} | Definição inicial | +{{Specifications}} diff --git a/files/pt-br/web/css/css_transitions/using_css_transitions/index.md b/files/pt-br/web/css/css_transitions/using_css_transitions/index.md index e1f7d389220409..4deaa06c6702c6 100644 --- a/files/pt-br/web/css/css_transitions/using_css_transitions/index.md +++ b/files/pt-br/web/css/css_transitions/using_css_transitions/index.md @@ -1127,9 +1127,7 @@ el.addEventListener("transitionstart", signalStart, true); ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------- | ----------------------------- | ----------------- | -| {{SpecName('CSS3 Transitions', '', '')}} | {{Spec2('CSS3 Transitions')}} | Definição Inícial | +{{Specifications}} ## Veja Também diff --git a/files/pt-br/web/css/css_types/index.md b/files/pt-br/web/css/css_types/index.md index 6cbb5ed79cdc51..d841291b4780b9 100644 --- a/files/pt-br/web/css/css_types/index.md +++ b/files/pt-br/web/css/css_types/index.md @@ -37,6 +37,4 @@ Na sintaxe formal, os tipos de dados são indicados pela palavra chave aplicada ## Especificações -| Especificação | Status | Comentário | -| ----------------------------- | -------------------------- | ------------------ | -| {{ SpecName('CSS3 Values') }} | {{ Spec2('CSS3 Values') }} | Definição inicial. | +{{Specifications}} diff --git a/files/pt-br/web/css/descendant_combinator/index.md b/files/pt-br/web/css/descendant_combinator/index.md index f7489862bf312d..cdb97ea77aa8f6 100644 --- a/files/pt-br/web/css/descendant_combinator/index.md +++ b/files/pt-br/web/css/descendant_combinator/index.md @@ -65,12 +65,7 @@ li li { ## Especificações -| Especificação | Status | Comment | -| ------------------------------------------------------------------------------------ | --------------------------- | ------------------ | -| {{SpecName("CSS4 Selectors", "#descendant-combinators", "descendant combinator")}} | {{Spec2("CSS4 Selectors")}} | | -| {{SpecName("CSS3 Selectors", "#descendant-combinators", "descendant combinator")}} | {{Spec2("CSS3 Selectors")}} | | -| {{SpecName("CSS2.1", "selector.html#descendant-selectors", "descendant selectors")}} | {{Spec2("CSS2.1")}} | | -| {{SpecName("CSS1", "#contextual-selectors", "contextual selectors")}} | {{Spec2("CSS1")}} | Initial definition | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/element/index.md b/files/pt-br/web/css/element/index.md index 78ef7f67aaa613..100e5227c17ea1 100644 --- a/files/pt-br/web/css/element/index.md +++ b/files/pt-br/web/css/element/index.md @@ -68,9 +68,7 @@ Esse exemplo usa um elemento {{HTMLElement("button")}} se repetindo como _backgr ## Especificações -| Especificação | Estatus | Comentário | -| ---------------------------------------------------------------------------------------------------- | ------------------------ | ------------------------------- | -| {{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}} | {{Spec2('CSS4 Images')}} | Actualmente adiado para o CSS4. | +{{Specifications}} ## Compatibilidade dos navegadores diff --git a/files/pt-br/web/css/env/index.md b/files/pt-br/web/css/env/index.md index 39c82cef4ecb54..ef35bfd7314e66 100644 --- a/files/pt-br/web/css/env/index.md +++ b/files/pt-br/web/css/env/index.md @@ -103,9 +103,7 @@ A sintaxe _fallback_, como de propriedades customizadas, permite vírgulas. Mas ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------- | --------------------------------------- | ------------------ | -| {{SpecName("CSS3 Environment Variables", "#env-function", "env()")}} | {{Spec2("CSS3 Environment Variables")}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/flex-flow/index.md b/files/pt-br/web/css/flex-flow/index.md index 9b812d626e1029..1927985b7da6ef 100644 --- a/files/pt-br/web/css/flex-flow/index.md +++ b/files/pt-br/web/css/flex-flow/index.md @@ -54,9 +54,7 @@ elemento { ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------- | --------------------------- | ----------------- | -| {{ SpecName('CSS3 Flexbox','#flex-flow-property','flex-flow') }} | {{ Spec2('CSS3 Flexbox') }} | Definição inicial | +{{Specifications}} {{cssinfo}} diff --git a/files/pt-br/web/css/float/index.md b/files/pt-br/web/css/float/index.md index fbd9b62ed6d089..f93b107877cc9c 100644 --- a/files/pt-br/web/css/float/index.md +++ b/files/pt-br/web/css/float/index.md @@ -129,12 +129,7 @@ p.withRedBoxes { ## Especificações -| Especificação | Situação | Comentário | -| ------------------------------------------------------------------------- | ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}} | {{Spec2('CSS Logical Properties')}} | Adiciona os valores `inline-start` e `inline-end`. | -| {{SpecName('CSS3 Box', '#float', 'float')}} | {{Spec2('CSS3 Box')}} | Muitos valores novos, nem todos claramente definidos ainda. Qualquer diferença em comportamento não relacionado a novas funções são involutárias; por favor informe. | -| {{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}} | {{Spec2('CSS2.1')}} | Sem mudanças | -| {{SpecName('CSS1', '#float', 'float')}} | {{Spec2('CSS1')}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/font-feature-settings/index.md b/files/pt-br/web/css/font-feature-settings/index.md index e7ee9e4ea33563..c9001936aff866 100644 --- a/files/pt-br/web/css/font-feature-settings/index.md +++ b/files/pt-br/web/css/font-feature-settings/index.md @@ -96,9 +96,7 @@ td.tabular { ## Especificações -| Especificacão | Estado | Comment | -| ------------------------------------------------------------------------------------- | ----------------------- | ------------------ | -| {{SpecName('CSS3 Fonts', '#propdef-font-feature-settings', 'font-feature-settings')}} | {{Spec2('CSS3 Fonts')}} | Initial definition | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/font-variation-settings/index.md b/files/pt-br/web/css/font-variation-settings/index.md index a681ef629bf0ab..8ba8ef62affad2 100644 --- a/files/pt-br/web/css/font-variation-settings/index.md +++ b/files/pt-br/web/css/font-variation-settings/index.md @@ -79,9 +79,7 @@ O CSS do exemplo a seguir pode ser editado para permitir que você mude os valor ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------------ | -| {{SpecName('CSS4 Fonts', '#low-level-font-variation-settings-control-the-font-variation-settings-property', 'font-variation-settings')}} | {{Spec2('CSS4 Fonts')}} | Initial definition | +{{Specifications}} {{cssinfo}} diff --git a/files/pt-br/web/css/font-weight/index.md b/files/pt-br/web/css/font-weight/index.md index f0beb79a385632..c09e5b5a42be13 100644 --- a/files/pt-br/web/css/font-weight/index.md +++ b/files/pt-br/web/css/font-weight/index.md @@ -153,12 +153,7 @@ span { ## Especificações -| Especificações | Status | Comentário | -| ----------------------------------------------------------------------- | ----------------------------- | ------------------------------------------- | -| {{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}} | {{Spec2('CSS3 Fonts')}} | Sem alterações. | -| {{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}} | {{Spec2('CSS3 Transitions')}} | Permite animação do atributo `font-weight`. | -| {{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}} | {{Spec2('CSS2.1')}} | Sem alterações. | -| {{SpecName('CSS1', '#font-weight', 'font-weight')}} | {{Spec2('CSS1')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/grid-auto-flow/index.md b/files/pt-br/web/css/grid-auto-flow/index.md index f8c0514edfe756..f7a74ceb95c672 100644 --- a/files/pt-br/web/css/grid-auto-flow/index.md +++ b/files/pt-br/web/css/grid-auto-flow/index.md @@ -118,9 +118,7 @@ function changeGridAutoFlow() { ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------- | ---------------------- | ----------------- | -| {{SpecName("CSS3 Grid", "#propdef-grid-auto-flow", "grid-auto-flow")}} | {{Spec2("CSS3 Grid")}} | Definição Inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/grid-template-columns/index.md b/files/pt-br/web/css/grid-template-columns/index.md index e672261686247a..6b39155cb2a7d5 100644 --- a/files/pt-br/web/css/grid-template-columns/index.md +++ b/files/pt-br/web/css/grid-template-columns/index.md @@ -111,9 +111,7 @@ grid-template-columns: unset; ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------ | ---------------------- | ----------------- | -| {{SpecName("CSS3 Grid", "#propdef-grid-template-columns", "grid-template-columns")}} | {{Spec2("CSS3 Grid")}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/grid/index.md b/files/pt-br/web/css/grid/index.md index 9189cca27a0fa9..9fcaa056307fee 100644 --- a/files/pt-br/web/css/grid/index.md +++ b/files/pt-br/web/css/grid/index.md @@ -99,9 +99,7 @@ grid: unset; ## Especificações -| Especificação | Status | Comment | -| -------------------------------------------------- | ---------------------- | ----------------- | -| {{SpecName("CSS3 Grid", "#propdef-grid", "grid")}} | {{Spec2("CSS3 Grid")}} | Definição inicial | +{{Specifications}} {{cssinfo}} diff --git a/files/pt-br/web/css/height/index.md b/files/pt-br/web/css/height/index.md index 92ea2953329e7c..adfe22561bf8f4 100644 --- a/files/pt-br/web/css/height/index.md +++ b/files/pt-br/web/css/height/index.md @@ -104,12 +104,7 @@ div { ## Especificações -| Specification | Status | Comment | -| ---------------------------------------------------------------------- | ----------------------------- | --------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS3 Box', '#the-width-and-height-properties', 'height')}} | {{Spec2('CSS3 Box')}} | Added the `max-content`, `min-content`, `available`, `fit-content`, `border-box`, `content-box` keywords. | -| {{SpecName('CSS3 Transitions', '#animatable-css', 'height')}} | {{Spec2('CSS3 Transitions')}} | Lists `height` as animatable. | -| {{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}} | {{Spec2('CSS2.1')}} | Adds support for the {{cssxref("<length>")}} values and precises on which element it applies to. | -| {{SpecName('CSS1', '#height', 'height')}} | {{Spec2('CSS1')}} | Initial specification. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/hyphens/index.md b/files/pt-br/web/css/hyphens/index.md index e234e1099069e8..f008fad2183718 100644 --- a/files/pt-br/web/css/hyphens/index.md +++ b/files/pt-br/web/css/hyphens/index.md @@ -98,9 +98,7 @@ p.auto { ## Especificações -| Especificação | Condição | Comentário | -| --------------------------------------------------------- | ---------------------- | ------------------ | -| {{SpecName("CSS3 Text", "#hyphens-property", "hyphens")}} | {{Spec2("CSS3 Text")}} | Initial definition | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/id_selectors/index.md b/files/pt-br/web/css/id_selectors/index.md index c98e6e4cc1ff12..e813cfcfc2a9f3 100644 --- a/files/pt-br/web/css/id_selectors/index.md +++ b/files/pt-br/web/css/id_selectors/index.md @@ -36,12 +36,7 @@ span#identificado { ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------- | --------------------------- | ----------------- | -| {{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}} | {{Spec2("CSS4 Selectors")}} | | -| {{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}} | {{Spec2("CSS3 Selectors")}} | | -| {{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}} | {{Spec2("CSS2.1")}} | | -| {{SpecName("CSS1", "#id-as-selector", "ID selectors")}} | {{Spec2("CSS1")}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/image/index.md b/files/pt-br/web/css/image/index.md index 191c0eca197477..ae7e86ac58a027 100644 --- a/files/pt-br/web/css/image/index.md +++ b/files/pt-br/web/css/image/index.md @@ -66,10 +66,7 @@ element(#fakeid) /* Um elemento ID deve ser um ID existente na página. */ ## Especificações -| Especificações | Status | Comentário | -| -------------------------------------------------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS4 Images', '#typedef-image', '<image>')}} | {{Spec2('CSS4 Images')}} | Adiciona {{cssxref("element()")}}, {{cssxref("image()")}}, {{cssxref("conic-gradient()")}}, {{cssxref("repeating-conic-gradient()")}}, e {{cssxref("image-resolution")}}. | -| {{SpecName('CSS3 Images', '#typedef-image', '<image>')}} | {{Spec2('CSS3 Images')}} | Definição inicial. Depois disso, não existe definição explicita do tipo de data `<image>`. Imagens podem ser somente definidas usando a notação funciona `url()` . | +{{Specifications}} ## Compatibilidade do navegador diff --git a/files/pt-br/web/css/initial/index.md b/files/pt-br/web/css/initial/index.md index 383690c16f4d6e..84d49e0de9e443 100644 --- a/files/pt-br/web/css/initial/index.md +++ b/files/pt-br/web/css/initial/index.md @@ -39,10 +39,7 @@ em { ## Especificações -| Specification | Status | Comment | -| ----------------------------------------------------- | ------------------------- | ------------------------ | -| {{ SpecName('CSS4 Cascade', '#initial', 'initial') }} | {{Spec2('CSS4 Cascade')}} | No changes from Level 3. | -| {{ SpecName('CSS3 Cascade', '#initial', 'initial') }} | {{Spec2('CSS3 Cascade')}} | Initial definition. | +{{Specifications}} ## Compatibilidade de navegadores diff --git a/files/pt-br/web/css/inline-size/index.md b/files/pt-br/web/css/inline-size/index.md index 547c040f788a3c..6c64c0b98f0f18 100644 --- a/files/pt-br/web/css/inline-size/index.md +++ b/files/pt-br/web/css/inline-size/index.md @@ -66,9 +66,7 @@ A propriedade `inline-size` aproveita os mesmos valores que as propriedades {{cs ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------------------------- | ----------------------------------- | ----------------- | -| {{SpecName("CSS Logical Properties", "#logical-dimension-properties", "inline-size")}} | {{Spec2("CSS Logical Properties")}} | Definição Inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/isolation/index.md b/files/pt-br/web/css/isolation/index.md index f675c61e1337ae..e98c48ab4cbdc7 100644 --- a/files/pt-br/web/css/isolation/index.md +++ b/files/pt-br/web/css/isolation/index.md @@ -77,9 +77,7 @@ Uma das palavras-chave listadas abaixo. ## Especificações -| Specification | Status | Comment | -| -------------------------------------------------------- | -------------------------- | ------------------ | -| {{ SpecName('Compositing', '#isolation', 'Isolation') }} | {{ Spec2('Compositing') }} | Initial definition | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/line-break/index.md b/files/pt-br/web/css/line-break/index.md index f768e8ef168512..4b87141c4d5604 100644 --- a/files/pt-br/web/css/line-break/index.md +++ b/files/pt-br/web/css/line-break/index.md @@ -39,9 +39,7 @@ line-break: unset; ## Especificações -| Especificações | Status | Comentário | -| --------------------------------------------------------------- | ---------------------- | ----------------- | -| {{SpecName('CSS3 Text', '#line-break-property', 'line-break')}} | {{Spec2('CSS3 Text')}} | Definição inicial | +{{Specifications}} {{cssinfo}} diff --git a/files/pt-br/web/css/margin-bottom/index.md b/files/pt-br/web/css/margin-bottom/index.md index 69b6bea691ecc8..7b1fc5f90f2d76 100644 --- a/files/pt-br/web/css/margin-bottom/index.md +++ b/files/pt-br/web/css/margin-bottom/index.md @@ -95,12 +95,7 @@ div { ## Especificações -| Especificação | Status | Comentário | -| --------------------------------------------------------------------- | ----------------------------- | ----------------------------------------- | -| {{SpecName('CSS3 Box', '#margin-bottom', 'margin-bottom')}} | {{Spec2('CSS3 Box')}} | Nenhuma mudança significativa | -| {{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}} | {{Spec2('CSS3 Transitions')}} | Definir o `margin-bottom` como "animavel" | -| {{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}} | {{Spec2('CSS2.1')}} | Remove seu efeito nos elementos in-line. | -| {{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}} | {{Spec2('CSS1')}} | Definição inicial | +{{Specifications}} {{cssinfo}} diff --git a/files/pt-br/web/css/margin-top/index.md b/files/pt-br/web/css/margin-top/index.md index 6435516e420553..2681c52b1a9402 100644 --- a/files/pt-br/web/css/margin-top/index.md +++ b/files/pt-br/web/css/margin-top/index.md @@ -62,12 +62,7 @@ margin-top: unset; ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------ | ----------------------------- | --------------------------------------- | -| {{SpecName('CSS3 Box', '#the-margin', 'margin-top')}} | {{Spec2('CSS3 Box')}} | Sem mudança significativa. | -| {{SpecName('CSS3 Transitions', '#animatable-css', 'margin-top')}} | {{Spec2('CSS3 Transitions')}} | Define `margin-top` como animável. | -| {{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-top')}} | {{Spec2('CSS2.1')}} | Remove esse efeito em elementos inline. | -| {{SpecName('CSS1', '#margin-top', 'margin-top')}} | {{Spec2('CSS1')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade de navegadores diff --git a/files/pt-br/web/css/margin/index.md b/files/pt-br/web/css/margin/index.md index 32ff99e6fa97b3..144172ea1a1364 100644 --- a/files/pt-br/web/css/margin/index.md +++ b/files/pt-br/web/css/margin/index.md @@ -122,12 +122,7 @@ Contudo, em navegadores antigos, como IE8-9 que não suporta layout flexbox, est ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------- | ------------------------------- | ---------------------------------------- | -| {{ SpecName('CSS3 Box', '#margin', 'margin') }} | {{ Spec2('CSS3 Box') }} | Nenhuma mudança significativa. | -| {{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }} | {{ Spec2('CSS3 Transitions') }} | Define `margin` como animável. | -| {{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }} | {{ Spec2('CSS2.1') }} | Remove seu efeito em elementos _inline_. | -| {{ SpecName('CSS1', '#margin', 'margin') }} | {{ Spec2('CSS1') }} | Definição inicial. | +{{Specifications}} {{cssinfo}} diff --git a/files/pt-br/web/css/mask/index.md b/files/pt-br/web/css/mask/index.md index 7bf3aca3302eec..8fea3c3485aa53 100644 --- a/files/pt-br/web/css/mask/index.md +++ b/files/pt-br/web/css/mask/index.md @@ -55,10 +55,7 @@ Se o valor é um valor URI, o elemento apontado pelo URI é usado como uma másc ## Especificações -| Especificação | Estado | Comentário | -| ----------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| {{SpecName("CSS Masks", "#the-mask", 'mask')}} | {{Spec2("CSS Masks")}} | Estende-se a sua utilização para elementos HTML. Estende sua sintaxe, tornando-a uma simplificação para as novas propriedades da `mask-*` definidos nessa especificação. | -| {{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}} | {{Spec2('SVG1.1')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/min-height/index.md b/files/pt-br/web/css/min-height/index.md index b5bd32520dca63..a596f8e4f1cc79 100644 --- a/files/pt-br/web/css/min-height/index.md +++ b/files/pt-br/web/css/min-height/index.md @@ -58,12 +58,7 @@ form { ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{ SpecName('CSS3 Sizing', '#width-height-keywords', 'min-height') }} | {{ Spec2('CSS3 Sizing') }} | Adds the `max-content`, `min-content`, `fit-content`, and `fill-available` keywords. _Both CSS3 Box and CSS3 Writing Modes drafts defined at some point these keywords. These drafts are superseded by this spec._ | -| {{ SpecName('CSS3 Flexbox', '#min-auto', 'min-height') }} | {{ Spec2('CSS3 Flexbox') }} | An [earlier revision of the spec](https://www.w3.org/TR/2012/CR-css3-flexbox-20120918/) added the `auto` keyword and used it as the initial value. The CSSWG subsequently resolved to revert this change, however. As of March 29, 2013, the latest [Editor's Draft](http://dev.w3.org/csswg/css-flexbox/) doesn't modify the `min-width` property anymore (i.e. it no longer introduces the `auto` value). | -| {{ SpecName('CSS3 Transitions', '#animatable-css', 'min-height') }} | {{ Spec2('CSS3 Transitions') }} | Defines `min-height` as animatable. | -| {{ SpecName('CSS2.1', 'visudet.html#min-max-heights', 'min-height') }} | {{ Spec2('CSS2.1') }} | Initial definition. | +{{Specifications}} ## Navegadores compatíveis diff --git a/files/pt-br/web/css/mix-blend-mode/index.md b/files/pt-br/web/css/mix-blend-mode/index.md index 08dfc25f621e63..6fce0052191b8e 100644 --- a/files/pt-br/web/css/mix-blend-mode/index.md +++ b/files/pt-br/web/css/mix-blend-mode/index.md @@ -69,9 +69,7 @@ circle { ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------ | -------------------------- | ---------------------- | -| {{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }} | {{ Spec2('Compositing') }} | Initial specification. | +{{Specifications}} ## Compatibilidade de navegadores diff --git a/files/pt-br/web/css/number/index.md b/files/pt-br/web/css/number/index.md index 84c5b38baba898..a6bf2f34ef24ae 100644 --- a/files/pt-br/web/css/number/index.md +++ b/files/pt-br/web/css/number/index.md @@ -41,12 +41,7 @@ Quando animado, os valores de `<number>` são interpolados como números reais e ## Especificações -| Especificações | Status | Comentário | -| ---------------------------------------------------------------- | ------------------------ | ----------------------------- | -| {{SpecName("CSS4 Values", "#numbers", "<number>")}} | {{Spec2("CSS4 Values")}} | Nenhuma mudança significante. | -| {{SpecName("CSS3 Values", "#numbers", "<number>")}} | {{Spec2("CSS3 Values")}} | Nenhuma mudança significante. | -| {{SpecName("CSS2.1", "syndata.html#numbers", "<number>")}} | {{Spec2("CSS2.1")}} | Definição explícita. | -| {{SpecName("CSS1", "", "<number>")}} | {{Spec2("CSS1")}} | Definição implícita.. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/offset/index.md b/files/pt-br/web/css/offset/index.md index f713451ede6ffe..dfdb1ca57ee695 100644 --- a/files/pt-br/web/css/offset/index.md +++ b/files/pt-br/web/css/offset/index.md @@ -76,9 +76,7 @@ offset: url(arc.svg) 30deg / 50px 100px; ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------ | -------------------------------- | ----------------- | -| {{SpecName('Motion Path Level 1', '#offset-shorthand', 'offset')}} | {{Spec2('Motion Path Level 1')}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/opacity/index.md b/files/pt-br/web/css/opacity/index.md index cc3cdec6677c4d..17c6f3a51796b0 100644 --- a/files/pt-br/web/css/opacity/index.md +++ b/files/pt-br/web/css/opacity/index.md @@ -113,10 +113,7 @@ img.opacity:hover { ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------- | ----------------------------- | ----------------------------- | -| {{SpecName('CSS3 Transitions', '#animatable-css', 'opacity')}} | {{Spec2('CSS3 Transitions')}} | Define opacity como animável. | -| {{SpecName('CSS3 Colors', '#opacity', 'opacity')}} | {{Spec2('CSS3 Colors')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/outline/index.md b/files/pt-br/web/css/outline/index.md index 8fed72df4538d8..e2698561dac6f4 100644 --- a/files/pt-br/web/css/outline/index.md +++ b/files/pt-br/web/css/outline/index.md @@ -59,10 +59,7 @@ Um, dois ou três valores, dada em ordem arbitrária: ## Especificações -| Especificação | Estado | Comentário | -| ------------------------------------------------------------ | -------------------------- | ------------------ | -| {{SpecName('CSS3 Basic UI', '#outline', 'outline')}} | {{Spec2('CSS3 Basic UI')}} | No change | -| {{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}} | {{Spec2('CSS2.1')}} | Initial definition | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/overflow/index.md b/files/pt-br/web/css/overflow/index.md index ab6d9a95374bfd..b7c8f700272e78 100644 --- a/files/pt-br/web/css/overflow/index.md +++ b/files/pt-br/web/css/overflow/index.md @@ -79,10 +79,7 @@ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolor ## Especificações -| Especificação | Status | Comment | -| ------------------------------------------------------------ | ----------------------- | -------------- | -| {{ SpecName('CSS3 Box', '#overflow1', 'overflow') }} | {{ Spec2('CSS3 Box') }} | Sem alteração. | -| {{ SpecName('CSS2.1', 'visufx.html#overflow', 'overflow') }} | {{ Spec2('CSS2.1') }} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/padding-left/index.md b/files/pt-br/web/css/padding-left/index.md index 11ccf5dc5c1bcd..2adeb4650262aa 100644 --- a/files/pt-br/web/css/padding-left/index.md +++ b/files/pt-br/web/css/padding-left/index.md @@ -46,12 +46,7 @@ padding-left: inherit ## Especificações -| Especificação | Status | Comentário | -| ----------------------------------------------------------------------- | ------------------------------- | -------------------------------------- | -| {{ SpecName('CSS3 Box', '#the-padding', 'padding-left') }} | {{ Spec2('CSS3 Box') }} | Nenhuma mudança. | -| {{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-left') }} | {{ Spec2('CSS3 Transitions') }} | Define `padding-left` como animatable. | -| {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-left') }} | {{ Spec2('CSS2.1') }} | Nenhuma mudança. | -| {{ Specname('CSS1', '#padding-left', 'padding-left') }} | {{ Spec2('CSS1') }} | Definição inicial. | +{{Specifications}} ## Compatibilidade do Navegador diff --git a/files/pt-br/web/css/padding/index.md b/files/pt-br/web/css/padding/index.md index ec847a0192a666..b84464bb10f350 100644 --- a/files/pt-br/web/css/padding/index.md +++ b/files/pt-br/web/css/padding/index.md @@ -110,11 +110,7 @@ h3 { ## Especificações -| Especificação | Status | Observações | -| --------------------------------------------------------------- | ----------------------- | ----------------- | -| {{ SpecName('CSS3 Box', '#the-padding', 'padding') }} | {{ Spec2('CSS3 Box') }} | Sem alteração | -| {{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding') }} | {{ Spec2('CSS2.1') }} | Sem alteração | -| {{ Specname('CSS1', '#padding', 'padding') }} | {{ Spec2('CSS1') }} | Definição inicial | +{{Specifications}} ## Compatibilidade diff --git a/files/pt-br/web/css/pointer-events/index.md b/files/pt-br/web/css/pointer-events/index.md index b72a2f9c53d486..730071b3d5338d 100644 --- a/files/pt-br/web/css/pointer-events/index.md +++ b/files/pt-br/web/css/pointer-events/index.md @@ -98,11 +98,7 @@ Esta propriedade pode também ser usada para alcançar melhores taxas de quadros ## Especificações -| Especificações | Status | Comentário | -| ------------------------------------------------------------------------------- | ------------------- | ---------- | -| {{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}} | {{Spec2('SVG1.1')}} | | - -Se extende para elementos HTML, embora presente nos primeiros rascunhos do Módulo Básico de Interface do Usuário do CSS nivel 3, foi empurrado para o [nível 4](http://wiki.csswg.org/spec/css4-ui#pointer-events). +{{Specifications}} ## Compatibilidade do navegador diff --git a/files/pt-br/web/css/position/index.md b/files/pt-br/web/css/position/index.md index 0d523d2ce22bab..eeef7f2107b42b 100644 --- a/files/pt-br/web/css/position/index.md +++ b/files/pt-br/web/css/position/index.md @@ -329,10 +329,7 @@ Scrolling elements containing `fixed` or `sticky` content can cause performance ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------- | ----------------------------- | ----------------------------- | -| {{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}} | {{Spec2('CSS2.1')}} | | -| {{SpecName('CSS3 Positioning','#position-property','position')}} | {{Spec2('CSS3 Positioning')}} | Adds `sticky` property value. | +{{Specifications}} {{cssinfo}} diff --git a/files/pt-br/web/css/pseudo-classes/index.md b/files/pt-br/web/css/pseudo-classes/index.md index 03749fcfc74fd1..e66851c2258ae1 100644 --- a/files/pt-br/web/css/pseudo-classes/index.md +++ b/files/pt-br/web/css/pseudo-classes/index.md @@ -72,16 +72,7 @@ Assim como nas classes regulares, você pode encadear juntas quantas pseudo-clas ## Especificações -| Especificação | Status | Comentário | -| ------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| {{ SpecName('Fullscreen') }} | {{ Spec2('Fullscreen') }} | Define `:fullscreen`. | -| {{ SpecName('HTML WHATWG') }} | {{ Spec2('HTML WHATWG') }} | Nenhuma mudança de {{ SpecName('HTML5 W3C') }}. | -| {{SpecName('CSS4 Selectors')}} | {{Spec2('CSS4 Selectors')}} | Define `:any-link`, `:local-link`, `:scope`, `:active-drop-target`, `:valid-drop-target`, `:invalid-drop-target`, `:current`, `:past`, `:future`, `:placeholder-shown`, `:user-error`, `:blank`, `:nth-match()`, `:nth-last-match()`, `:nth-column()`, `:nth-last-column()`, e `:matches()`. Nenhuma mudança significante das pseudo-classes definidas em {{SpecName('CSS3 Selectors')}} e {{SpecName('HTML5 W3C')}} (embora o significado semântico que não foram retomadas). | -| {{ SpecName('HTML5 W3C') }} | {{ Spec2('HTML5 W3C') }} | Define o siginificado semântico no contexto do HTML `:link`, `:visited`, `:active`, `:enabled`, `:disabled`, `:checked`, e `:indeterminate`. Define `:default`, `:valid`, `:invalid`, `:in-range`, `:out-of-range`, `:required`, `:optional`, `:read-only`, `:read-write`, e `:dir()`. | -| {{ SpecName('CSS3 Basic UI') }} | {{ Spec2('CSS3 Basic UI') }} | Define `:default`, `:valid`, `:invalid`, `:in-range`, `:out-of-range`, `:required`, `:optional`, `:read-only`, e `:read-write`, mas sem associar significado semântico. | -| {{SpecName('CSS3 Selectors')}} | {{Spec2('CSS3 Selectors')}} | Define `:target`, `:root`, `:nth-child()`, `:nth-last-of-child()`, `:nth-of-type()`, `:nth-last-of-type()`, `:last-child`, `:first-of-type`, `:last-of-type`, `:only-child`, `:only-of-type`, `:empty`, e `:not()`. Denife a sintaxe de `:enabled`, `:disabled`, `:checked`, e `:indeterminate`, mas sem o significado semântico associado. Nenhuma mudança significativa, para as pseudo-classes definidas em {{SpecName('CSS2.1')}}. | -| {{SpecName('CSS2.1')}} | {{Spec2('CSS2.1')}} | Define `:lang()`, `:first-child`, `:hover`, e `:focus`. Nenhuma mudança significativa, para as pseudo-classes definidas em{{SpecName('CSS1')}}. | -| {{SpecName('CSS1')}} | {{Spec2('CSS1')}} | Define `:link`, `:visited`, e `:active`, mas sem o significado semântico associado. | +{{Specifications}} ## Veja também diff --git a/files/pt-br/web/css/ruby-align/index.md b/files/pt-br/web/css/ruby-align/index.md index 64d2bdbbb242b2..89827ed5432e9f 100644 --- a/files/pt-br/web/css/ruby-align/index.md +++ b/files/pt-br/web/css/ruby-align/index.md @@ -130,9 +130,7 @@ Isso dará o seguinte resultado: ## Especificações -| Especificação | Status | Comentário | -| --------------------------------------------------------------- | ---------------------- | ------------------ | -| {{SpecName('CSS3 Ruby', '#ruby-align-property', 'ruby-align')}} | {{Spec2('CSS3 Ruby')}} | Definição inicital | +{{Specifications}} ## Compatilibade de Navegador diff --git a/files/pt-br/web/css/scroll-behavior/index.md b/files/pt-br/web/css/scroll-behavior/index.md index 7b71c40a063ed2..c44c77b2236215 100644 --- a/files/pt-br/web/css/scroll-behavior/index.md +++ b/files/pt-br/web/css/scroll-behavior/index.md @@ -99,9 +99,7 @@ scroll-page { ## Especificações -| Especificações | Status | Comentário | -| ------------------------------------------------------------------------- | ----------------------- | ---------------------- | -| {{SpecName('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}} | {{Spec2('CSSOM View')}} | Especificações inicial | +{{Specifications}} ## Compatibilidade com navegador diff --git a/files/pt-br/web/css/scrollbar-color/index.md b/files/pt-br/web/css/scrollbar-color/index.md index d8ff056da84b78..5e5c8163fd6f5a 100644 --- a/files/pt-br/web/css/scrollbar-color/index.md +++ b/files/pt-br/web/css/scrollbar-color/index.md @@ -84,9 +84,7 @@ When using `scrollbar-color` property with specific color values, authors should ## Especificações -| Specification | Status | Comment | -| --------------------------------------------------------------------- | --------------------------- | ------------------- | -| {{SpecName("CSS Scrollbars", "#scrollbar-color", "scrollbar-color")}} | {{Spec2("CSS Scrollbars")}} | Initial definition. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/specified_value/index.md b/files/pt-br/web/css/specified_value/index.md index 90820002469251..0c64882593203a 100644 --- a/files/pt-br/web/css/specified_value/index.md +++ b/files/pt-br/web/css/specified_value/index.md @@ -13,9 +13,7 @@ O **valor especificado** de uma propriedade CSS está definido em uma de três m ## Especificações -| Especificações | Status | Comentario | -| ------------------------------------------------------------------------ | ------------------- | ----------------- | -| {{SpecName("CSS2.1", "cascade.html#specified-value", "cascaded value")}} | {{Spec2("CSS2.1")}} | Definição inicial | +{{Specifications}} ## Veja também diff --git a/files/pt-br/web/css/general_sibling_combinator/index.md b/files/pt-br/web/css/subsequent-sibling_combinator/index.md similarity index 52% rename from files/pt-br/web/css/general_sibling_combinator/index.md rename to files/pt-br/web/css/subsequent-sibling_combinator/index.md index ec8bc05959fe39..12e6c36fb1999e 100644 --- a/files/pt-br/web/css/general_sibling_combinator/index.md +++ b/files/pt-br/web/css/subsequent-sibling_combinator/index.md @@ -1,6 +1,7 @@ --- title: General sibling selectors -slug: Web/CSS/General_sibling_combinator +slug: Web/CSS/Subsequent-sibling_combinator +original_slug: Web/CSS/General_sibling_combinator --- {{CSSRef("Selectors")}} @@ -36,10 +37,7 @@ p ~ span { ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------------------------------------ | --------------------------- | ----------------------------------------------- | -| {{ SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator') }} | {{Spec2('CSS4 Selectors')}} | Renomeia o combinador como "irmão subsequente". | -| {{ SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator') }} | {{Spec2('CSS3 Selectors')}} | Definição inicial. | +{{Specifications}} ## Navegadores compatíveis diff --git a/files/pt-br/web/css/syntax/index.md b/files/pt-br/web/css/syntax/index.md index a8a26b5fb5081a..8b8e067509477e 100644 --- a/files/pt-br/web/css/syntax/index.md +++ b/files/pt-br/web/css/syntax/index.md @@ -28,7 +28,7 @@ Esses blocos são chamados de **blocos de declaração** e as declarações dent ![css syntax - declarations block.png](/@api/deki/files/6166/=css_syntax_-_declarations_block.png) -> **Nota:** O conteúdo de um bloco de declaração, que é uma lista separada por pontos e vírgulas, sem as chaves, pode ser posto dentro da tag HTML [`style`](/pt-BR/HTML/Global_attributes#attr-style). +> **Nota:** O conteúdo de um bloco de declaração, que é uma lista separada por pontos e vírgulas, sem as chaves, pode ser posto dentro da tag HTML [`style`](/pt-BR/HTML/Global_attributes#style). ## Regras CSS diff --git a/files/pt-br/web/css/text-align/index.md b/files/pt-br/web/css/text-align/index.md index f96827d890fa73..eda14dadad6597 100644 --- a/files/pt-br/web/css/text-align/index.md +++ b/files/pt-br/web/css/text-align/index.md @@ -159,12 +159,7 @@ O modo compátivel-padrão de centralizar um bloco em si sem centralizar seu con ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------- | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS Logical Properties', '#text-align', 'text-align')}} | {{Spec2('CSS Logical Properties')}} | Sem mudanças | -| {{SpecName('CSS3 Text', '#text-align-property', 'text-align')}} | {{Spec2('CSS3 Text')}} | Added the `start`, `end`, and `match-parent` values. Changed the unnamed initial value to `start` (which it was). | -| {{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}} | {{Spec2('CSS2.1')}} | Sem mudanças | -| {{SpecName('CSS1', '#text-align', 'text-align')}} | {{Spec2('CSS1')}} | Definição iniciaç | +{{Specifications}} ## Browser compatibilidade diff --git a/files/pt-br/web/css/text-decoration-style/index.md b/files/pt-br/web/css/text-decoration-style/index.md index 4ae3457bead73e..3bd46b3368eb6a 100644 --- a/files/pt-br/web/css/text-decoration-style/index.md +++ b/files/pt-br/web/css/text-decoration-style/index.md @@ -80,9 +80,7 @@ text-decoration-style: unset; ## Especificações -| Specification | Status | Comment | -| ----------------------------------------------------------------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------ | -| {{ SpecName('CSS3 Text Decoration', '#text-decoration-style', 'text-decoration-style') }} | {{ Spec2('CSS3 Text Decoration') }} | Initial definition. The {{cssxref("text-decoration")}} property wasn't a shorthand before. | +{{Specifications}} ## Browser compatíveis diff --git a/files/pt-br/web/css/text-decoration/index.md b/files/pt-br/web/css/text-decoration/index.md index cc5254a27d539f..eebde2cc3b3b53 100644 --- a/files/pt-br/web/css/text-decoration/index.md +++ b/files/pt-br/web/css/text-decoration/index.md @@ -80,11 +80,7 @@ p.underover { ## Especificações -| Especificação | Status | Comentários | -| ------------------------------------------------------------------------------------ | --------------------------------- | --------------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}} | {{Spec2('CSS3 Text Decoration')}} | Transformado em uma propriedade reduzida. Adicionado suporte para o valor {{cssxref('text-decoration-style')}}. | -| {{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}} | {{Spec2('CSS2.1')}} | Sem mudanças significantes. | -| {{SpecName('CSS1', '#text-decoration', 'text-decoration')}} | {{Spec2('CSS1')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/text-rendering/index.md b/files/pt-br/web/css/text-rendering/index.md index b7a0c319bddf8b..6d4cb353e536d7 100644 --- a/files/pt-br/web/css/text-rendering/index.md +++ b/files/pt-br/web/css/text-rendering/index.md @@ -68,11 +68,7 @@ A opção optimizeSpeed não tem efeito na versão 2.0 do Gecko, devido ao códi ## Especificações -| Specification | Status | Comment | -| --------------------------------------------------------------------------------- | --------------------- | ------- | -| {{ SpecName('SVG1.1', 'painting.html#TextRenderingProperty', 'text-rendering') }} | {{ Spec2('SVG1.1') }} | | - -Essa é uma especificação SVG, e não é definida em nenhum padrão CSS. Gecko (Firefox) e WebKit aplicam a propriedade `text-rendering` para códigos HTML e XML. +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/transform-function/translate/index.md b/files/pt-br/web/css/transform-function/translate/index.md index d5dbfc841be9d0..f537e8718fd8fe 100644 --- a/files/pt-br/web/css/transform-function/translate/index.md +++ b/files/pt-br/web/css/transform-function/translate/index.md @@ -162,9 +162,7 @@ div { ## Especificações -| Especificações | Estado | Comentário | -| ------------------------------------------------------------------------------ | ---------------------------- | ----------------- | -| {{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}} | {{Spec2('CSS3 Transforms')}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/transform-style/index.md b/files/pt-br/web/css/transform-style/index.md index 2af7b64122b447..76ffcad6959db4 100644 --- a/files/pt-br/web/css/transform-style/index.md +++ b/files/pt-br/web/css/transform-style/index.md @@ -37,9 +37,7 @@ transform-style: unset; ## Especificações -| Specification | Status | Comment | -| -------------------------------------------------------------------------------- | ----------------------------- | ------------------- | -| {{SpecName('CSS Transforms 2', '#transform-style-property', 'transform-style')}} | {{Spec2('CSS Transforms 2')}} | Initial definition. | +{{Specifications}} {{cssinfo}} diff --git a/files/pt-br/web/css/transition-delay/index.md b/files/pt-br/web/css/transition-delay/index.md index ac7acd9579a87e..f76608ff03d961 100644 --- a/files/pt-br/web/css/transition-delay/index.md +++ b/files/pt-br/web/css/transition-delay/index.md @@ -327,9 +327,7 @@ var intervalID = window.setInterval(updateTransition, 7000); ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------------------- | ----------------------------- | ----------------- | -| {{SpecName('CSS3 Transitions', '#transition-delay-property', 'transition-delay')}} | {{Spec2('CSS3 Transitions')}} | Definição inicial | +{{Specifications}} {{cssinfo}} diff --git a/files/pt-br/web/css/type_selectors/index.md b/files/pt-br/web/css/type_selectors/index.md index 25b84916a18d60..f48832b772c9b2 100644 --- a/files/pt-br/web/css/type_selectors/index.md +++ b/files/pt-br/web/css/type_selectors/index.md @@ -44,12 +44,7 @@ span { ## Especificações -| Especificação | Status | Comment | -| ----------------------------------------------------------------------------- | --------------------------- | ----------------- | -| {{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}} | {{Spec2('CSS4 Selectors')}} | Sem mudanças | -| {{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}} | {{Spec2('CSS3 Selectors')}} | Sem mudanças | -| {{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}} | {{Spec2('CSS2.1')}} | | -| {{SpecName('CSS1', '#basic-concepts', 'type selectors')}} | {{Spec2('CSS1')}} | Definição Inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/universal_selectors/index.md b/files/pt-br/web/css/universal_selectors/index.md index de5c21d9e902c5..0a3132a88ac299 100644 --- a/files/pt-br/web/css/universal_selectors/index.md +++ b/files/pt-br/web/css/universal_selectors/index.md @@ -72,11 +72,7 @@ O asterisco é opcional para seletores simples. Por exemplo, `*.atencao` e `.ate ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS4 Selectors', '#the-universal-selector', 'Seletor universal')}} | {{Spec2('CSS4 Selectors')}} | Sem mudanças | -| {{SpecName('CSS3 Selectors', '#universal-selector', 'Seletor universal')}} | {{Spec2('CSS3 Selectors')}} | Define o comportamente de acordo com os namespaces e adiciona uma sugestão de que é possivel omitir o seletor em pseudo-elementos | -| {{SpecName('CSS2.1', 'selector.html#universal-selector', 'Seletor universal')}} | {{Spec2('CSS2.1')}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/var/index.md b/files/pt-br/web/css/var/index.md index 1f74c80e956b00..bb196f7aecfec3 100644 --- a/files/pt-br/web/css/var/index.md +++ b/files/pt-br/web/css/var/index.md @@ -59,9 +59,7 @@ body { ## Especificações -| Especificação | Status | Comentário | -| ----------------------------------------------------------- | --------------------------- | ----------------- | -| {{SpecName('CSS3 Variables', '#using-variables', 'var()')}} | {{Spec2('CSS3 Variables')}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/visibility/index.md b/files/pt-br/web/css/visibility/index.md index 53bb214be632bd..8b034cb4ac161b 100644 --- a/files/pt-br/web/css/visibility/index.md +++ b/files/pt-br/web/css/visibility/index.md @@ -127,12 +127,7 @@ td { ## Especificações -| Especificações | Status | Comentários | -| ------------------------------------------------------------------ | ----------------------------- | --------------------------------------------------------- | -| {{SpecName('CSS3 Flexbox', '#visibility-collapse', 'visibility')}} | {{Spec2('CSS3 Flexbox')}} | Defines the `collapse` value as it applies to flex items. | -| {{SpecName('CSS3 Box', '#visibility-prop', 'visibility')}} | {{Spec2('CSS3 Box')}} | Nenhuma alteração. | -| {{SpecName('CSS3 Transitions', '#animatable-css', 'visibility')}} | {{Spec2('CSS3 Transitions')}} | Defines `visibility` as animatable. | -| {{SpecName('CSS2.1', 'visufx.html#visibility', 'visibility')}} | {{Spec2('CSS2.1')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/white-space/index.md b/files/pt-br/web/css/white-space/index.md index 8e6627f030c1bc..f4c9009e944903 100644 --- a/files/pt-br/web/css/white-space/index.md +++ b/files/pt-br/web/css/white-space/index.md @@ -60,10 +60,7 @@ code { ## Especificações -| Especificação | Estado | Comentário | -| ------------------------------------------------------------------- | ---------------------- | -------------------------------------------- | -| {{SpecName('CSS3 Text', '#propdef-white-space', 'white-space')}} | {{Spec2('CSS3 Text')}} | Aumenta a precisão dos algoritmos de quebra. | -| {{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}} | {{Spec2('CSS2.1')}} | Especificação inicial. | +{{Specifications}} ## Compatibilidade de Navegadores diff --git a/files/pt-br/web/css/width/index.md b/files/pt-br/web/css/width/index.md index 0ca6eddd6d58b6..ca3263e9087dd2 100644 --- a/files/pt-br/web/css/width/index.md +++ b/files/pt-br/web/css/width/index.md @@ -165,13 +165,7 @@ p.minblue { ## Especificações -| Especificação | Status | Comentários | -| --------------------------------------------------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS3 Box', '#the-width-and-height-properties', 'width')}} | {{Spec2('CSS3 Box')}} | Adicionadas as palavras-chave `max-content`, `min-content`, `available`, `fit-content`, `border-box`, `content-box` | -| {{SpecName('CSS3 Transitions', '#animatable-css', 'width')}} | {{Spec2('CSS3 Transitions')}} | Lista a largura como animável. | -| {{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}} | {{Spec2('CSS2.1')}} | Determina em qual elemento vai ser aplicado. | -| {{SpecName('CSS1', '#width', 'width')}} | {{Spec2('CSS1')}} | Definição inicial | -| {{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}} | {{Spec2('CSS3 Sizing')}} | Adiciona novas palavras-chave para largura e altura. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/will-change/index.md b/files/pt-br/web/css/will-change/index.md index 8839d99277e4d3..c470518db4e2d6 100644 --- a/files/pt-br/web/css/will-change/index.md +++ b/files/pt-br/web/css/will-change/index.md @@ -92,9 +92,7 @@ Entretanto pode ser apropriado incluir `will-change` no seu estilo css para uma ## Especificações -| Especificação | Estado | Comentário | -| -------------------------------------------------------------- | ---------------------------- | ------------------ | -| {{SpecName('CSS Will Change', '#will-change', 'will-change')}} | {{Spec2('CSS Will Change')}} | Initial definition | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/css/word-break/index.md b/files/pt-br/web/css/word-break/index.md index 39e0fac1f5433d..3fc8e0c7104b2e 100644 --- a/files/pt-br/web/css/word-break/index.md +++ b/files/pt-br/web/css/word-break/index.md @@ -105,9 +105,7 @@ word-break: unset; ## Especificações -| Especificação | Status | Commentário | -| --------------------------------------------------------------- | ---------------------- | ----------------- | -| {{SpecName('CSS3 Text', '#word-break-property', 'word-break')}} | {{Spec2('CSS3 Text')}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/content_categories/index.md b/files/pt-br/web/html/content_categories/index.md index 2630de690ed15d..3421bb0dabc1b0 100644 --- a/files/pt-br/web/html/content_categories/index.md +++ b/files/pt-br/web/html/content_categories/index.md @@ -28,8 +28,8 @@ Elementos pertencentes a categoria de conteúdo de fluxo tipicamente contém tex Alguns outros elementos pertencem a essa categoria, mas somente se uma condição específica é realizada: - {{HTMLElement("area")}}, se for um descendente de um elemento {{HTMLElement("map")}} -- {{HTMLElement("link")}}, se o atributo **[itemprop](/pt-BR/docs/HTML/Global_attributes#attr-itemprop)** estiver presente -- {{HTMLElement("meta")}}, se o atributo **[itemprop](/pt-BR/docs/HTML/Global_attributes#attr-itemprop)** estiver presente +- {{HTMLElement("link")}}, se o atributo **[itemprop](/pt-BR/docs/HTML/Global_attributes#itemprop)** estiver presente +- {{HTMLElement("meta")}}, se o atributo **[itemprop](/pt-BR/docs/HTML/Global_attributes#itemprop)** estiver presente - {{HTMLElement("style")}}, se o atributo [`scoped`](/pt-BR/docs/Web/HTML/Element/style#scoped) estiver presente ### Conteúdo de seccionamento @@ -60,9 +60,9 @@ Alguns outros elementos pertencem a essa categoria, mas somente se uma condiçã - {{HTMLElement("area")}}, se for um descendente de um elemento {{HTMLElement("map")}} - {{HTMLElement("del")}}, se contém somente conteúdo fraseado - {{HTMLElement("ins")}}, se contém somente conteúdo fraseado -- {{HTMLElement("link")}}, se o atributo [**itemprop**](/pt-BR/docs/HTML/Global_attributes#attr-itemprop) estiver presente +- {{HTMLElement("link")}}, se o atributo [**itemprop**](/pt-BR/docs/HTML/Global_attributes#itemprop) estiver presente - {{HTMLElement("map")}}, se contém somente conteúdo fraseado -- {{HTMLElement("meta")}}, se o atributo [**itemprop**](/pt-BR/docs/HTML/Global_attributes#attr-itemprop) estiver presente +- {{HTMLElement("meta")}}, se o atributo [**itemprop**](/pt-BR/docs/HTML/Global_attributes#itemprop) estiver presente ### Conteúdo embutido diff --git a/files/pt-br/web/html/element/a/index.md b/files/pt-br/web/html/element/a/index.md index 0adf5e08a44501..e913e9c9d1f282 100644 --- a/files/pt-br/web/html/element/a/index.md +++ b/files/pt-br/web/html/element/a/index.md @@ -13,7 +13,7 @@ O **elemento** **`<a>`** em **HTML** (ou elemento âncora), com o atributo [`hre Os atributos do elemento incluem os [atributos globais](/pt-BR/docs/Web/HTML/Global_attributes). -- {{HTMLAttrDef("download")}} +- `download` - : Leva o usuário a salvar a URL em vez de navegar até ela. Pode ser usado com ou sem um valor: @@ -29,7 +29,7 @@ Os atributos do elemento incluem os [atributos globais](/pt-BR/docs/Web/HTML/Glo > > - Se `Content-Disposition` tiver um diferente `filename` (nome do arquivo) que `download`, o cabeçalho tem prioridade. (Se `Content-Disposition: inline`, Firefox prioriza o cabeçalho enquanto o Chrome escolhe `download`.) -- {{HTMLAttrDef("href")}} +- `href` - : A URL para a qual o hiperlink aponta. Links não se restrigem a URLs baseadas no protocolo HTTP — eles podem utilizar qualquer tipo de URL suportado pelos browsers: @@ -39,15 +39,15 @@ Os atributos do elemento incluem os [atributos globais](/pt-BR/docs/Web/HTML/Glo - Email addresses with(Endereço de email com) `mailto:` URLs - Alguns navegadores talvez não aguentem certos arranjos em URL, para isso os websites fazem uso do [`registerProtocolHandler()`](/pt-BR/docs/Web/API/Navigator/registerProtocolHandler) -- {{HTMLAttrDef("hreflang")}} +- `hreflang` - : Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as [the global `lang` attribute](/pt-BR/docs/Web/HTML/Global_attributes/lang). -- {{HTMLAttrDef("ping")}} +- `ping` - : Uma lista de URLs separadas por espaços. Quando o link é seguido, o brrowser enviará requisições {{HTTPMethod("POST")}} com o corpo `PING` para as URLs. Typically for tracking. -- {{HTMLAttrDef("referrerpolicy")}}{{Experimental_Inline}} +- `referrerpolicy`{{Experimental_Inline}} - : Quanto do [referrer](/pt-BR/docs/Web/HTTP/Headers/Referer) para ser enviado quando acessar o link. Acesse [`Referrer-Policy`](/pt-BR/docs/Web/HTTP/Headers/Referrer-Policy) para possíveis valores e seus efeitos. -- {{HTMLAttrDef("rel")}} +- `rel` - : The relationship of the linked URL as space-separated [link types](/pt-BR/docs/Web/HTML/Link_types). -- {{HTMLAttrDef("target")}} +- `target` - : Where to display the linked URL, as the name for a _browsing context_ (a tab, window, or `<iframe>`). The following keywords have special meanings for where to load the URL: @@ -60,28 +60,28 @@ Os atributos do elemento incluem os [atributos globais](/pt-BR/docs/Web/HTML/Glo > **Warning:** **Note:** Linking to another page with `target="_blank"` will run the new page in the same process as your page. If the new page executes JavaScript, your page's performance may suffer. This can also be avoided by using `rel="noreferrer noopener"`. -- {{HTMLAttrDef("type")}} +- `type` - : Hints at the linked URL's format with a {{Glossary("MIME type")}}. No built-in functionality. ### Obsolete attributes -- {{HTMLAttrDef("charset")}} +- `charset` - : Hinted at the {{Glossary("character encoding")}} of the linked URL. > **Note:** This attribute is obsolete and **should not be used by authors**. Use the HTTP {{HTTPHeader("Content-Type")}} header on the linked URL. -- {{HTMLAttrDef("coords")}} +- `coords` - : Used with [the `shape` attribute](#shape). A comma-separated list of coordinates. -- {{HTMLAttrDef("name")}} +- `name` - : Was required to define a possible target location in a page. In HTML 4.01, `id` and `name` could both be used on `<a>`, as long as they had identical values. > **Note:** Use the global attribute [`id`](/pt-BR/docs/Web/HTML/Global_attributes#id) instead. -- {{HTMLAttrDef("rev")}} +- `rev` - : Specified a reverse link; the opposite of [the `rel` attribute](#rel). Deprecated for being very confusing. -- {{HTMLAttrDef("shape")}} +- `shape` - : The shape of the hyperlink's region in an image map. diff --git a/files/pt-br/web/html/element/abbr/index.md b/files/pt-br/web/html/element/abbr/index.md index 2ec524ad34c613..e30b9bab71da7d 100644 --- a/files/pt-br/web/html/element/abbr/index.md +++ b/files/pt-br/web/html/element/abbr/index.md @@ -51,11 +51,7 @@ Obama é presidente dos EUA ## Especificações -| Especificação | Estado | Comentário | -| ----------------------------------------------------------------------------------------- | ------------------------ | ---------- | -| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-abbr-element', '<abbr>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'the-abbr-element.html#the-abbr-element', '<abbr>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/address/index.md b/files/pt-br/web/html/element/address/index.md index 54fa5010137c00..dd07e187771728 100644 --- a/files/pt-br/web/html/element/address/index.md +++ b/files/pt-br/web/html/element/address/index.md @@ -51,11 +51,7 @@ Embora o elemento `address` exiba o texto com o mesmo estilo padrão que os elem ## Especificações -| Especificação | Estado | Comentário | -| ----------------------------------------------------------------------------------- | ------------------------ | ---------- | -| {{SpecName('HTML WHATWG', 'sections.html#the-address-element', '<address>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'sections.html#the-address-element', '<address>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '<address>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/area/index.md b/files/pt-br/web/html/element/area/index.md index 65da202f89fb2e..17c07ccc8fe90d 100644 --- a/files/pt-br/web/html/element/area/index.md +++ b/files/pt-br/web/html/element/area/index.md @@ -72,11 +72,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes). ## Especificações -| Especificação | Estado | Comentário | -| ------------------------------------------------------------------------------------------- | ------------------------- | ---------- | -| {{SpecName ('HTML WHATWG', 'a-map-element.html # da-area-elemento', '<area>')}} | {{Spec2 ('HTML WHATWG')}} | | -| {{SpecName ('HTML5 W3C', 'incorporado-content-0.html # da-area-elemento', '<area>')}} | {{Spec2 ('HTML5 W3C')}} | | -| {{SpecName ('HTML4.01', 'struct / objects.html # h-13.6.1', '<area>')}} | {{Spec2 ('HTML4.01')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/aside/index.md b/files/pt-br/web/html/element/aside/index.md index 9f52e5b2f08a1f..15cea7c32da603 100644 --- a/files/pt-br/web/html/element/aside/index.md +++ b/files/pt-br/web/html/element/aside/index.md @@ -31,10 +31,7 @@ Este elemento inclui apenas os [atributos globais](/pt-BR/docs/HTML/Global_attri ## Especificações -| Especificaçao | Status | Comentario | -| ------------------------------------------------------------------------------------------------------------- | ------------------------ | ---------- | -| {{SpecName('HTML WHATWG', 'sections.html#the-aside-element', '<aside>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'the-aside-element.html#the-aside-element', '<aside>')}} {{todo("brokenLink")}} | {{Spec2('HTML5 W3C')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/b/index.md b/files/pt-br/web/html/element/b/index.md index badae871c90cc7..564adee792be1e 100644 --- a/files/pt-br/web/html/element/b/index.md +++ b/files/pt-br/web/html/element/b/index.md @@ -44,11 +44,7 @@ Palavras-chave são exibidas com o estilo padrão do elemento \<b>, provavelment ## Especificações -| Especificaçoes | Estado | Comentário | -| ----------------------------------------------------------------------------------- | ------------------------ | ---------- | -| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-b-element', '<b>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-b-element', '<b>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Navegadores Compatíveis diff --git a/files/pt-br/web/html/element/base/index.md b/files/pt-br/web/html/element/base/index.md index 898b14895b2e6c..ea2000925c5917 100644 --- a/files/pt-br/web/html/element/base/index.md +++ b/files/pt-br/web/html/element/base/index.md @@ -19,9 +19,9 @@ O _elemento HTML Base_ (**\<base>**) especifica o endereço (URL) utilizada por Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes). -- {{htmlattrdef("href")}} +- `href` - : O URL de base para ser usado em todo o documento para endereços URL relativos.Se este atributo for especificado, este elemento deve vir antes de quaisquer outros elementos com atributos cujos valores são URLs.Endereços (URLs) absolutos e relativos são permitidos (mas ver seção nota abaixo). -- {{htmlattrdef("target")}} +- `target` - : Esse elemento é uma palavra-chave que indica o local padrão para exibir o resultado quando os hiperlinks causarem navegações, por elementos que não têm referência alvo explícita. Em HTML5, é um nome ou palavra-chave para um contexto de navegação. (por exemplo, guia, janela, ou frame incorporada). As seguintes formas têm significados específicos: - \_self: Coloca i resultado no mesmo quadro HTML4 ou contexto de navegação, caso HTML5, como o atual. Este valor é o padrão se o atributo não for especificado. - \_blank: Coloca o resultado em uma nova janela HTML4 ou janela no contexto de navegação HTML5. @@ -37,11 +37,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes). ## Especificações -| Especificações | Estado | Comentários | -| ------------------------------------------------------------------------------- | ------------------------ | ----------- | -| {{SpecName('HTML WHATWG', 'semantics.html#the-base-element', '<base>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'document-metadata#the-base-element', '<base>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'struct/links.html#h-12.4', '<base>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Navegadores Compatíveis diff --git a/files/pt-br/web/html/element/bdi/index.md b/files/pt-br/web/html/element/bdi/index.md index 34df5e207ca4c1..58449ddb6af460 100644 --- a/files/pt-br/web/html/element/bdi/index.md +++ b/files/pt-br/web/html/element/bdi/index.md @@ -32,10 +32,7 @@ Como todos os outros elementos do HTML, este elemento tem os atributos globais, ## Especificações -| Specification | Status | Comment | -| --------------------------------------------------------------------------------------- | ------------------------ | ------- | -| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-bdi-element', '<bdi>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'the-bdi-element.html#the-bdi-element', '<bdi>')}} | {{Spec2('HTML5 W3C')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/bdo/index.md b/files/pt-br/web/html/element/bdo/index.md index 3eb7d7b44b746a..3ca1fc5921f48d 100644 --- a/files/pt-br/web/html/element/bdo/index.md +++ b/files/pt-br/web/html/element/bdo/index.md @@ -67,7 +67,7 @@ O **_elemento_ HTML `<bdo>` **(_bidirectional override_) é usado para substitui Os atributos desse elemento incluem os [atributos globais](/pt-BR/docs/HTML/Global_attributes). -- {{htmlattrdef("dir")}} +- `dir` - : Direção de texto neste elemento. Os valores possíveis são: @@ -92,11 +92,7 @@ A especificação HTML 4 não especificam eventos para este elemento; eles foram ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------ | ------------------------ | ---------- | -| {{SpecName('HTML WHATWG', 'semantics.html#the-bdo-element', '<bdo>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-bdo-element', '<bdo>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '<bdo>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/blockquote/index.md b/files/pt-br/web/html/element/blockquote/index.md index 16871fdd99dcc0..98f7edfa853a73 100644 --- a/files/pt-br/web/html/element/blockquote/index.md +++ b/files/pt-br/web/html/element/blockquote/index.md @@ -18,7 +18,7 @@ O Elemento HTML \<blockquote> (ou Elemento HTML de citação de bloco) indica qu Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes). -- {{htmlattrdef("cite")}} +- `cite` - : Uma URL que designa um documento de origem ou mensagem para a informação citada. Este atributo destina-se a apontar para informações explicando o contexto ou a referência para a cotação. ## Notas diff --git a/files/pt-br/web/html/element/body/index.md b/files/pt-br/web/html/element/body/index.md index 393d7e1d0e4a46..a373fc4f8c8b54 100644 --- a/files/pt-br/web/html/element/body/index.md +++ b/files/pt-br/web/html/element/body/index.md @@ -77,70 +77,66 @@ O **elemento** `<body>` do **HTML** representa o conteúdo de um documento HTML. Estes elementos incluem os [atributos globais](/pt-BR/docs/Web/HTML/Global_attributes). -- {{htmlattrdef("alink")}} +- `alink` - : Cor do texto para hyperlinks quando selecionados. Esse método não está em conformidade, utilize a propriedade _{{cssxref("color")}} em conjunto com a pseudo-classe {{cssxref(":active")}}_ -- {{htmlattrdef("background")}} +- `background` - : URI de uma imagem para usar como um papel de parede. Esse método não está em conformidade, utilize a propriedade _CSS {{cssxref("background")}}._ -- {{htmlattrdef("bgcolor")}} +- `bgcolor` - : Cor de fundo do documento. Esse método não está em conformidade, utilize a propriedade _CSS {{cssxref("background-color")}}._ -- {{htmlattrdef("bottommargin")}} +- `bottommargin` - : The margin of the bottom of the body. Esse método não está em conformidade, utilize a propriedade _CSS {{cssxref("margin-bottom")}}._ -- {{htmlattrdef("leftmargin")}} +- `leftmargin` - : The margin of the left of the body. Esse método não está em conformidade, utilize a propriedade _CSS {{cssxref("margin-left")}}._ -- {{htmlattrdef("link")}} +- `link` - : Cor de textos de links não visitados. Esse método não está em conformidade, utilize o _{{cssxref("color")}} em conjunto com a pseudo-classe {{cssxref(":link")}}_ -- {{htmlattrdef("onafterprint")}} +- `onafterprint` - : Função para chamar depois que o usuário solicitou a impressão do documento. -- {{htmlattrdef("onbeforeprint")}} +- `onbeforeprint` - : Função para chamar quando o usuário solicita a impressão do documento. -- {{htmlattrdef("onbeforeunload")}} +- `onbeforeunload` - : Função para chamar quando o documento está prestes a ser descarregado. -- {{htmlattrdef("onblur")}} +- `onblur` - : Função para chamar quando o documento perde foco. -- {{htmlattrdef("onerror")}} +- `onerror` - : Função para chamar quando o documento falha ao carregar corretamente. -- {{htmlattrdef("onfocus")}} +- `onfocus` - : Função para chamar quando o documento recebe foco. -- {{htmlattrdef("onhashchange")}} +- `onhashchange` - : Function to call when the fragment identifier part (starting with the hash (`'#'`) character) of the document's current address has changed. -- {{htmlattrdef("onlanguagechange")}} {{experimental_inline}} +- `onlanguagechange` {{experimental_inline}} - : Function to call when the preferred languages changed. -- {{htmlattrdef("onload")}} +- `onload` - : Função para chamar quando o documento terminar de carregar -- {{htmlattrdef("onmessage")}} +- `onmessage` - : Função para chamar quando o documento receber uma mensagem. -- {{htmlattrdef("onoffline")}} +- `onoffline` - : Função para chamar quando a conexão com a internet falha. -- {{htmlattrdef("ononline")}} +- `ononline` - : Função para chamar quando a conexão com a internet é restaurada. -- {{htmlattrdef("onpopstate")}} +- `onpopstate` - : Function to call when the user has navigated session history. -- {{htmlattrdef("onredo")}} +- `onredo` - : Function to call when the user has moved forward in undo transaction history. -- {{htmlattrdef("onresize")}} +- `onresize` - : Function to call when the document has been resized. -- {{htmlattrdef("onstorage")}} +- `onstorage` - : Function to call when the storage area has changed. -- {{htmlattrdef("onundo")}} +- `onundo` - : Function to call when the user has moved backward in undo transaction history. -- {{htmlattrdef("onunload")}} +- `onunload` - : Function to call when the document is going away. -- {{htmlattrdef("rightmargin")}} +- `rightmargin` - : The margin of the right of the body. _This method is non-conforming, use CSS {{cssxref("margin-right")}} property on the element instead._ -- {{htmlattrdef("text")}} +- `text` - : Foreground color of text. _This method is non-conforming, use CSS {{cssxref("color")}} property on the element instead._ -- {{htmlattrdef("topmargin")}} +- `topmargin` - : The margin of the top of the body. _This method is non-conforming, use CSS {{cssxref("margin-top")}} property on the element instead._ -- {{htmlattrdef("vlink")}} +- `vlink` - : Cor do texto para links já visitados. Esse método não está em conformidade, utilize a propriedade _CSS {{cssxref("color")}} em conjunto com a pseudo-classe {{cssxref(":visited")}}._ ## Especificações -| Especificação | Status | Comentário | -| ----------------------------------------------------------------------------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', 'sections.html#the-body-element', '<body>')}} | {{Spec2('HTML WHATWG')}} | Changed the list of non-conforming features. | -| {{SpecName('HTML5 W3C', 'sections.html#the-body-element', '<body>')}} | {{Spec2('HTML5 W3C')}} | Obsoleted the formerly deprecated attributes. Defined the behavior of the non-conforming and never standardized `margintop`, `marginleft`, `marginright` and `marginbottom`. Added the `on*` attributes. | -| {{SpecName('HTML4.01', 'struct/global.html#h-7.5.1', '<body>')}} | {{Spec2('HTML4.01')}} | Deprecated the `alink`, `background`, `bgcolor`, `link`, `text` and `vlink` attributes. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/br/index.md b/files/pt-br/web/html/element/br/index.md index 94d0c44a0121eb..35a4912d35cfa1 100644 --- a/files/pt-br/web/html/element/br/index.md +++ b/files/pt-br/web/html/element/br/index.md @@ -61,7 +61,7 @@ Não use \<br> para aumentar o espaço entre as linhas de texto; para isso use a Este elemento inclue os [Atributos globais](/pt-BR/docs/HTML/Global_attributes). -- {{htmlattrdef("clear")}} {{Deprecated_Inline}} +- `clear` {{Deprecated_Inline}} - : Indica onde começar a próxima linha depois da quebra. @@ -87,11 +87,7 @@ USA ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------- | ------------------------ | ---------- | -| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-br-element', '<br>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-br-element', '<br>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'struct/text.html#h-9.3.2.1', '<br>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Compatibilidade com o browser diff --git a/files/pt-br/web/html/element/button/index.md b/files/pt-br/web/html/element/button/index.md index d4caaa38d6666f..8d24eaaa377818 100644 --- a/files/pt-br/web/html/element/button/index.md +++ b/files/pt-br/web/html/element/button/index.md @@ -19,21 +19,21 @@ O **Elemento HTML _`<button>`_** representa um botão clicável. Esse elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes). -- {{htmlattrdef("autofocus")}} +- `autofocus` - : Esse atributo booleano permite-o especificar que o botão possuirá o foco de entrada assim que a página carrega, a menos que o usuário sobrecreva esse comportamento digitanto um controle diferente. Apenas um elemento de um documento associado a um formulário pode ter esse atributo específico. -- {{htmlattrdef("autocomplete")}} {{non-standard_inline}} +- `autocomplete` {{non-standard_inline}} - : O uso desse atributo em um {{HTMLElement("button")}} não está padronizado nem dentro das especificações do Firefox. Por padrão, diferente de outros navegadores, o [Firefox persiste com o estado dinâmico desativado](http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) de um {{HTMLElement("button")}} nas páginas carregadas. Definir o valor desse atributo para `off` (ex: `autocomplete="off"`) desabilita esse recurso. Veja [Erro do Firefox 654072](https://bugzil.la/654072). -- {{htmlattrdef("disabled")}} +- `disabled` - : Esse atributo booleano indica que o usuário não poderá interagir com o botão. Se esse atributo não for especificado, o botão herdará a configuração do elemento que o contém, por exemplo {{HTMLElement("fieldset")}}, se não existir nenhum elemento com o atributo **disabled** definido, então o botão estará habilitado. Firefox irá, diferente de outros navegadores, por padrão, [persiste com o estado dinâmico desativado](http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) de um {{HTMLElement("button")}} sob as páginas carregadas. Use o atributo [`autocomplete`](/pt-BR/docs/Web/HTML/Element/button#autocomplete) para controlar esse recurso. -- {{htmlattrdef("form")}} +- `form` - : O elemento de formulário que o botão está associado (é o _formulário proprietário_). O valor do atributo deve ser o atributo **id** de um elemento {{HTMLElement("form")}} no mesmo documento. Se esse atributo não for especificado, o elemento `<button>` deve ser descendente de um elemento de formulário. Esse atributo permite que você coloque elementos `<button>` em qualquer lugar do documento, não apenas como descendente de seus elementos {{HTMLElement("form")}}. -- {{htmlattrdef("formaction")}} +- `formaction` - : A URI de um programa que processa a informação submetida pelo botão. Se especificado, ele sobrescreve o atributo [`action`](/pt-BR/docs/Web/HTML/Element/form#action) do formulário proprietário do botão. -- {{htmlattrdef("formenctype")}} +- `formenctype` - : Se o botão é um botão de envio, esse atributo especifica o tipo de conteúdo que é usado para enviar o formulário para o servidor; Possíveis valores são: @@ -43,7 +43,7 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes). Se esse atributo fro especificado, ele sobrescreve o atributo [`enctype`](/pt-BR/docs/Web/HTML/Element/form#enctype) do formulário proprietário do botão. -- {{htmlattrdef("formmethod")}} +- `formmethod` - : Se o botão for um botão de envio, esse atributo especifica o método HTTP que o navegador usará para enviar o formulário. Possíveis valores são: @@ -52,9 +52,9 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes). Se especificado, esse atributo sobrescreve o atributo [`method`](/pt-BR/docs/Web/HTML/Element/form#method) do formulário proprietário do botão. -- {{htmlattrdef("formnovalidate")}} +- `formnovalidate` - : Se o botão é um botão de envio, esse atributo Booleano especifica que o formulário não é para ser validado quando submetido. Se esse atributo for especificado, ele sobrescreve o atributo [`novalidate`](/pt-BR/docs/Web/HTML/Element/form#novalidate) do formulário proprietário do botão. -- {{htmlattrdef("formtarget")}} +- `formtarget` - : Se o botão é um botão de envio, esse atributo é um nome ou palavra-chave indicando onde exibir a resposta que é recebida após o envio do formulário. Esse é um nome de, ou palavra-chave para, um _contexto de navegação_ (por exemplo, uma aba, janela ou quadro embutido). Se esse atributo é especificado, ele sobrescreve o atributo [`target`](/pt-BR/docs/Web/HTML/Element/form#target) do formulário proprietário do botão. As seguintes palavras-chaves possuem significados especiais: @@ -63,9 +63,9 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes). - `_parent`: Carrega a resposta no contexto de navegação pai do atual. Se não há nenhum pai, essa opção passa a ser o mesmo que `_self`. - `_top`: Carrega a resposta para o contexto de navegação no nível superior (ou seja, o contexto de navegação é um ancestral do atual e não possui nenhum pai). Se não possui nenhum pai, essa opção passa a agir da mesma forma que `_self`. -- {{htmlattrdef("name")}} +- `name` - : O nome do botão que é enviado com os dados do formulário. -- {{htmlattrdef("type")}} +- `type` - : O tipo de botão. O possíveis valores são: @@ -73,7 +73,7 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes). - `reset`: O botão restaura todos os controles para seus valores iniciais. - `button`: O botão não possui comportamento padrão. Ele pode ter scripts do lado do cliente associado com os eventos do elemento, no qual são acionados quando o evento ocorrer. -- {{htmlattrdef("value")}} +- `value` - : O valor inicial do botão. ## Notas @@ -92,11 +92,7 @@ Note que esse botão possui CSS aplicado. ## Especificações -| Especificações | Status | Comentário | -| ------------------------------------------------------------------------------------------- | ------------------------ | ---------- | -| {{SpecName('HTML WHATWG', 'the-button-element.html#the-button-element', '<button>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'forms.html#the-button-element', '<button>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '<button>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/caption/index.md b/files/pt-br/web/html/element/caption/index.md index a0a82d25897f74..6c96a92b7f2395 100644 --- a/files/pt-br/web/html/element/caption/index.md +++ b/files/pt-br/web/html/element/caption/index.md @@ -67,7 +67,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes). Os seguintes atributos são obsoletos e não devem ser usados. Estão documentados abaixo apenas como referência ao atualizar o código, e interesse histórico. -- {{htmlattrdef("align")}} {{deprecated_inline}} +- `align` {{deprecated_inline}} - : Esse atributo [enumerado](/pt-BR/docs/Glossary/Enumerated) indica como a legenda deve ser alinhada em relação à tabela. Ele pode ter um dos seguintes valores: diff --git a/files/pt-br/web/html/element/code/index.md b/files/pt-br/web/html/element/code/index.md index f9f9f985df5188..4f793f7fc5b09c 100644 --- a/files/pt-br/web/html/element/code/index.md +++ b/files/pt-br/web/html/element/code/index.md @@ -87,11 +87,7 @@ Uma regra CSS pode ser definida para o seletor `code` para sobrescrever a fonte ## Especificações -| Especificação | Status | Comentário | -| --------------------------------------------------------------------------------------- | ------------------------ | ---------- | -| {{SpecName('HTML WHATWG', 'semantics.html#the-code-element', '<code>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-code-element', '<code>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<code>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/dd/index.md b/files/pt-br/web/html/element/dd/index.md index bebdb0d2a129b5..fe3c814acaa39f 100644 --- a/files/pt-br/web/html/element/dd/index.md +++ b/files/pt-br/web/html/element/dd/index.md @@ -66,7 +66,7 @@ O **elemento HTML \<dd>** fornece detalhes ou uma definição mais completa do t Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attributes) como seus. -- {{htmlattrdef("nowrap")}} {{Non-standard_inline}} +- `nowrap` {{Non-standard_inline}} - : Se o valor deste atributo for `yes`, o texto de definição não será envolvido. O valor padrão é `no`. ## Exemplo @@ -75,11 +75,7 @@ Para exemplos, veja [os exemplos de \<dl>](/pt-BR/docs/Web/HTML/Element/dl#Exemp ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------- | ------------------------ | ---------- | -| {{SpecName('HTML WHATWG', 'semantics.html#the-dd-element', '<dd>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'grouping-content.html#the-dd-element', '<dd>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dd>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/del/index.md b/files/pt-br/web/html/element/del/index.md index 985eebbc7124b3..5ecdc1909a84b4 100644 --- a/files/pt-br/web/html/element/del/index.md +++ b/files/pt-br/web/html/element/del/index.md @@ -17,9 +17,9 @@ O **elemento** **HTML `<del>`** (ou _Elemento_ _HTML_ _de Texto Excluído_) repr This element includes the [global attributes](/pt-BR/docs/HTML/Global_attributes). -- {{htmlattrdef("cite")}} +- `cite` - : A URI for a resource that explains the change (for example, meeting minutes). -- {{htmlattrdef("datetime")}} +- `datetime` - : This attribute indicates the time and date of the change and must be a [valid date with an optional time string](https://www.w3.org/TR/html5/common-microsyntaxes.html#valid-date-string-with-optional-time). If the value cannot be parsed as a date with an optional time string, the element does not have an associated time stamp. ## Examples diff --git a/files/pt-br/web/html/element/dfn/index.md b/files/pt-br/web/html/element/dfn/index.md index 8e9b600e4719dc..5de9c5b5b1d23e 100644 --- a/files/pt-br/web/html/element/dfn/index.md +++ b/files/pt-br/web/html/element/dfn/index.md @@ -66,11 +66,7 @@ _A Internet_ é um sistema global de redes interconectadas que usam o Internet P ## Especificações -| Especificação | Status | Comentário | -| --------------------------------------------------------------------------------------- | ------------------------ | ---------- | -| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-dfn-element', '<dfn>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-dfn-element', '<dfn>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<dfn>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Navegadores compatíveis diff --git a/files/pt-br/web/html/element/dialog/index.md b/files/pt-br/web/html/element/dialog/index.md index cc3f74326f44c7..0705e725759354 100644 --- a/files/pt-br/web/html/element/dialog/index.md +++ b/files/pt-br/web/html/element/dialog/index.md @@ -55,7 +55,7 @@ O **elemento HTML `<dialog>`** representa uma caixa de diálogo ou outro compone Este elemento inclui os atributos globais. O atributo `tabindex` não deve ser utilizado no elemento `<dialog>`. -- {{htmlattrdef("open")}} +- `open` - : Indica que o Dialog está ativo e pronto para uso. Quando o atributo `open` não for definido, ele não deve ser mostrado ao usuário. ## Notas de uso @@ -132,10 +132,7 @@ Este exemplo abre uma caixa de diálogo contendo um formulário quando o botão ## Especificações -| Especificação | Status | Comentário | -| ----------------------------------------------------------------------------------------- | ------------------------ | ----------------- | -| {{SpecName('HTML WHATWG', 'forms.html#the-dialog-element', '<dialog>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5.2', 'interactive-elements.html#the-dialog-element', '<dialog>')}} | {{Spec2('HTML5.2')}} | Difinição inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/dir/index.md b/files/pt-br/web/html/element/dir/index.md index 2e55ef383581f3..a3ca3e1f196ac2 100644 --- a/files/pt-br/web/html/element/dir/index.md +++ b/files/pt-br/web/html/element/dir/index.md @@ -15,7 +15,7 @@ Este elemento implementa a interface {{domxref("HTMLDirectoryElement")}}. Como todos os outros elementos HTML, este elemento suporta os [global attributes](/pt-BR/docs/HTML/Global_attributes). -- {{htmlattrdef("compact")}} +- `compact` - : Este atributo booleano indica que a lista deve ser renderizada em um estilo compacto. A interpretação deste atributo depende do agente do usuário e não funciona em todos os navegadores. diff --git a/files/pt-br/web/html/element/div/index.md b/files/pt-br/web/html/element/div/index.md index 0a0638f8a32fdb..d8472aace50432 100644 --- a/files/pt-br/web/html/element/div/index.md +++ b/files/pt-br/web/html/element/div/index.md @@ -36,11 +36,7 @@ Qualquer tipo de conteúdo aqui. Como \<p>, \<table>. Você dá o nome! ## Especificações -| Especificação | Status | Comentário | -| ----------------------------------------------------------------------------------- | ------------------------ | ---------- | -| {{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '<div>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '<div>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '<div>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Compatibilidade dos navegadores diff --git a/files/pt-br/web/html/element/dt/index.md b/files/pt-br/web/html/element/dt/index.md index e75b1ad036399f..1e664b94c6ca28 100644 --- a/files/pt-br/web/html/element/dt/index.md +++ b/files/pt-br/web/html/element/dt/index.md @@ -23,11 +23,7 @@ Para exemplo veja [definição de lista](/pt-BR/docs/HTML/Element/dl#Examples). ## Especificações -| Specification | Status | Comment | -| --------------------------------------------------------------------------------- | ------------------------ | ------- | -| {{SpecName('HTML WHATWG', 'grouping-content.html#the-dt-element', '<dt>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'grouping-content.html#the-dt-element', '<dt>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dt>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Navegadores compatíveis diff --git a/files/pt-br/web/html/element/em/index.md b/files/pt-br/web/html/element/em/index.md index 9ae47cc2690158..86e3bdd9cf77fe 100644 --- a/files/pt-br/web/html/element/em/index.md +++ b/files/pt-br/web/html/element/em/index.md @@ -96,11 +96,7 @@ Um exemplo para `<i>` poderia ser: "A _Rainha Mary_ velejou na noite passada". A ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------- | ------------------------ | ---------- | -| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-em-element', '<em>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-em-element', '<em>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<em>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/embed/index.md b/files/pt-br/web/html/element/embed/index.md index e7aee9e549e502..feb1ce02c81197 100644 --- a/files/pt-br/web/html/element/embed/index.md +++ b/files/pt-br/web/html/element/embed/index.md @@ -23,13 +23,13 @@ Lembre-se de que a maioria dos navegadores modernos descontinuou e removeu o sup Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes). -- {{htmlattrdef("height")}} +- `height` - : A altura apresentada do recurso, em [CSS pixels.](https://drafts.csswg.org/css-values/#px) Este deve ser um valor absoluto; porcentagens _não_ são permitidas. -- {{htmlattrdef("src")}} +- `src` - : A URL do recurso que está sendo incorporado. -- {{htmlattrdef("type")}} +- `type` - : O [tipo MIME](/pt-BR/docs/Glossary/MIME_type) a ser usado para a seleção do _plug-in_ de instanciação. -- {{htmlattrdef("width")}} +- `width` - : A largura apresentada do recurso, em CSS pixels. Este deve ser um valor absoluto; porcentagens _não_ são permitidas. ## Exemplo @@ -40,10 +40,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes). ## Especificações -| Specification | Status | Comment | -| ----------------------------------------------------------------------------------------- | ------------------------ | ------- | -| {{SpecName('HTML WHATWG', 'the-iframe-element.html#the-embed-element', '<embed>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'embedded-content-0.html#the-embed-element', '<embed>')}} | {{Spec2('HTML5 W3C')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/fieldset/index.md b/files/pt-br/web/html/element/fieldset/index.md index 0730f3aeab15f3..a4232e018bc289 100644 --- a/files/pt-br/web/html/element/fieldset/index.md +++ b/files/pt-br/web/html/element/fieldset/index.md @@ -60,11 +60,11 @@ O **elemento HTML `<fieldset>`** é usado para agrupar elementos, assim como lab Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes). -- {{htmlattrdef("disabled")}} +- `disabled` - : Se este atributo Booleano está definido, os controles de formulario que são seus descendentes, exceto os descendentes de seu primeiro elemento opcional {{HTMLElement("legend")}}, estarão desativados, i.e., não editável. Eles não receberão qualquer evento de navegação, como clique do mouse ou relacionado com focus. Frequentemente os navegadores mostram tais controles em cinza. -- {{htmlattrdef("form")}} +- `form` - : Este atributo tem o valor do atributo **id** do elemento {{HTMLElement("form")}} com que se relaciona. Seu valor padrão é o **id** do elemento {{HTMLElement("form")}} mais próximo. -- {{htmlattrdef("name")}} +- `name` - : O nome associado com o grupo. @@ -371,12 +371,7 @@ O exemplo a seguinte é feito de puro HTML e CSS. Não contém javascript. ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------------------- | ------------------------ | --------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', 'forms.html#the-fieldset-element', '<fieldset>')}} | {{Spec2('HTML WHATWG')}} | Definição do elemento fieldset | -| {{SpecName('HTML WHATWG', 'rendering.html#the-fieldset-and-legend-elements')}} | {{Spec2('HTML WHATWG')}} | Padrão sugerido de renderização dos elementos fieldset e legend | -| {{SpecName('HTML5 W3C', 'forms.html#the-fieldset-element', '<fieldset>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'interact/forms.html#h-17.10', '<fieldset>')}} | {{Spec2('HTML4.01')}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/figcaption/index.md b/files/pt-br/web/html/element/figcaption/index.md index 7cc2ec8be38cd4..ed1c3da9a6a96c 100644 --- a/files/pt-br/web/html/element/figcaption/index.md +++ b/files/pt-br/web/html/element/figcaption/index.md @@ -46,10 +46,7 @@ Por favor, consulte a página {{HTMLElement("figure")}} para visualizar o exempl ## Especificações -| Especificação | Status | Comentário | -| ----------------------------------------------------------------------------------------------- | ------------------------ | ---------- | -| {{SpecName('HTML WHATWG', 'semantics.html#the-figcaption-element', '<figcaption>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'grouping-content.html#the-figcaption-element', '<figcaption>')}} | {{Spec2('HTML5 W3C')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/head/index.md b/files/pt-br/web/html/element/head/index.md index 4e8665d9217fbe..981fe5081fdd27 100644 --- a/files/pt-br/web/html/element/head/index.md +++ b/files/pt-br/web/html/element/head/index.md @@ -62,7 +62,7 @@ O elemento **HTML `<head>` providencia informações gerais** (metadados) sobre Estes elementos incluem os [atributos globais](/pt-BR/docs/Web/HTML/Global_attributes). -- {{htmlattrdef("profile")}} +- `profile` - : A URIs de um ou mais perfis de metadados , separado por espaço em branco. ## Exemplo diff --git a/files/pt-br/web/html/element/header/index.md b/files/pt-br/web/html/element/header/index.md index 9937d1e9366b09..4578724a393a7d 100644 --- a/files/pt-br/web/html/element/header/index.md +++ b/files/pt-br/web/html/element/header/index.md @@ -34,10 +34,7 @@ Este elemento não possui outros atributos além dos [atributos globais](/pt-BR/ ## Especificações -| Especificação | Status | Comentário | -| --------------------------------------------------------------------------------- | ------------------------ | ---------- | -| {{SpecName('HTML WHATWG', 'sections.html#the-header-element', '<header>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'sections.html#the-header-element', '<header>')}} | {{Spec2('HTML5 W3C')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/heading_elements/index.md b/files/pt-br/web/html/element/heading_elements/index.md index ac3057548e9bfb..ad67602c6e9caf 100644 --- a/files/pt-br/web/html/element/heading_elements/index.md +++ b/files/pt-br/web/html/element/heading_elements/index.md @@ -78,11 +78,7 @@ Em HTML 5, use o elemento {{HTMLElement("section")}} para definir o outline de u ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------ | ---------- | -| {{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/hr/index.md b/files/pt-br/web/html/element/hr/index.md index e7daaf5c531d53..41d2b5bae5ee42 100644 --- a/files/pt-br/web/html/element/hr/index.md +++ b/files/pt-br/web/html/element/hr/index.md @@ -17,15 +17,15 @@ O **elemento HTML `<hr>`** representa uma quebra temática entre elementos de n Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes). -- {{htmlattrdef("align")}} {{deprecated_inline}} {{Non-standard_Inline}} +- `align` {{deprecated_inline}} {{Non-standard_Inline}} - : Define a regra de alinhamento na página. Se nenhum valor for especificado, o valor padrão é `left`. -- {{htmlattrdef("color")}} {{Deprecated_Inline}} {{Non-standard_inline}} +- `color` {{Deprecated_Inline}} {{Non-standard_inline}} - : Denife a regra da cor através do nome da cor ou um valor hexadecimal. -- {{htmlattrdef("noshade")}} {{deprecated_inline}} {{Non-standard_Inline}} +- `noshade` {{deprecated_inline}} {{Non-standard_Inline}} - : Deine a regra para não ter sombreamento. -- {{htmlattrdef("size")}} {{deprecated_inline}} {{Non-standard_Inline}} +- `size` {{deprecated_inline}} {{Non-standard_Inline}} - : Denife a altura, em pixels. -- {{htmlattrdef("width")}} {{deprecated_inline}} {{Non-standard_Inline}} +- `width` {{deprecated_inline}} {{Non-standard_Inline}} - : Define a regra de comprimento na página através de um valor em pixel ou porcentagem. ## Exemplo @@ -58,12 +58,7 @@ Para alterar a aparencia da linha ou as lacunas entre ela e os parágrafos, util ## Especificações -| Especificação | Status | Comentário | -| --------------------------------------------------------------------------------- | ------------------------ | ------------------------------------------------ | -| {{SpecName('HTML WHATWG', 'grouping-content.html#the-hr-element', '<hr>')}} | {{Spec2('HTML WHATWG')}} | Definição do elemento `hr` | -| {{SpecName('HTML WHATWG', 'rendering.html#the-hr-element-0')}} | {{Spec2('HTML WHATWG')}} | Sugestão de renderização padrão do elemento `hr` | -| {{SpecName('HTML5 W3C', 'grouping-content.html#the-hr-element', '<hr>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'present/graphics.html#h-15.3', '<hr>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Compatibilidade nos Navegadores diff --git a/files/pt-br/web/html/element/html/index.md b/files/pt-br/web/html/element/html/index.md index c9b76c31ea9c1a..3d3d1d96daed94 100644 --- a/files/pt-br/web/html/element/html/index.md +++ b/files/pt-br/web/html/element/html/index.md @@ -18,9 +18,9 @@ O elemento **HTML \<html> **(ou _HTML root element_) representa a raiz de um HTM Esse elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes). -- {{htmlattrdef("manifest")}} {{deprecated_inline}} {{Non-standard_Inline}} +- `manifest` {{deprecated_inline}} {{Non-standard_Inline}} - : Especifica a URI de um recurso manifest indicando os recursos que devem ser carregados na memória local. Veja [Recursos offline em Firefox](/pt-BR/docs/HTML/Using_the_application_cache) para detalhes. -- {{htmlattrdef("version")}} {{deprecated_inline}} +- `version` {{deprecated_inline}} - : Especifica a versão da definição de tipo de documento HTML que governa o documento atual. Esse atributo não é necessário, porque é redundante com a informação de versão na declaração de tipo de documento. ## Exemplo @@ -45,11 +45,7 @@ Desde que o elemento `<html>` seja o primeiro em documento outro que comenta, es ## Especificações -| Especificação | Status | Comentário | -| ----------------------------------------------------------------------------------- | ------------------------ | ---------- | -| {{SpecName('HTML WHATWG', 'semantics.html#the-html-element', '<html>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'the-html-element.html#the-html-element', '<html>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'global.html#h-7.3', '<html>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Compatibilidade dos navegadores diff --git a/files/pt-br/web/html/element/i/index.md b/files/pt-br/web/html/element/i/index.md index 2a3ff45750262c..b57619140fc140 100644 --- a/files/pt-br/web/html/element/i/index.md +++ b/files/pt-br/web/html/element/i/index.md @@ -91,11 +91,7 @@ Uma boa ideia é usar o atributo **class** para identificar porque esse elemento ## Especificações -| Especificação | Status | Comentário | -| --------------------------------------------------------------------------------- | ------------------------ | ---------- | -| {{SpecName('HTML WHATWG', 'semantics.html#the-i-element', '<i>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-i-element', '<i>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/iframe/index.md b/files/pt-br/web/html/element/iframe/index.md index 047090a1449649..48b734c2be762c 100644 --- a/files/pt-br/web/html/element/iframe/index.md +++ b/files/pt-br/web/html/element/iframe/index.md @@ -15,33 +15,33 @@ O **elemento** **HTML** **\<iframe>** (ou _elemento HTML_ _inline frame_) repres Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes). -- {{htmlattrdef("align")}} {{deprecated_inline}} +- `align` {{deprecated_inline}} - : O alinhamento deste elemento em relação ao contexto. -- {{htmlattrdef("allowfullscreen")}} +- `allowfullscreen` - : Esse atributo pode ser definido como true se o quadro é permitido para ser colocado em modo de tela cheia, chamando seu método de {{domxref("element.mozRequestFullScreen()")}}. Se isto não estiver definido, o elemento não pode ser colocado em modo de tela cheia. -- {{htmlattrdef("frameborder")}} +- `frameborder` - : O valor 1 (o padrão) pede ao navegador para desenhar uma borda entre este quadro e todos os outros quadros. O valor 0 informa ao navegador para não traçar uma fronteira entre este quadro e outros quadros. -- {{htmlattrdef("height")}} +- `height` - : Indica a altura do quadro HTML 5 em pixels CSS, ou HTML 4 em pixels ou porcentagem. -- {{htmlattrdef("longdesc")}} +- `longdesc` - : Uma URI de uma longa descrição do quadro. Devido à má utilização generalizada, isto não é útil para navegadores não-visuais. -- {{htmlattrdef("marginheight")}} +- `marginheight` - : A quantidade de espaço em pixels entre o conteúdo do quadro e suas margens superior e inferior. -- {{htmlattrdef("marginwidth")}} +- `marginwidth` - : A quantidade de espaço em pixels entre o conteúdo dos quadros e suas margens direita e esquerda. -- {{htmlattrdef("mozallowfullscreen")}} {{non-standard_inline}} {{deprecated_inline}} +- `mozallowfullscreen` {{non-standard_inline}} {{deprecated_inline}} - : Use **`allowfullscreen`** ao invés. Em Gecko 9.0 or later, this attribute can be set to `true` if the frame is allowed to be placed into full screen mode by calling its {{domxref("element.mozRequestFullScreen()")}} method. If this isn't set, the element can't be placed into full screen mode. -- {{htmlattrdef("webkitallowfullscreen")}} {{non-standard_inline}} {{deprecated_inline}} +- `webkitallowfullscreen` {{non-standard_inline}} {{deprecated_inline}} - : Use **`allowfullscreen`** ao invés. No Chrome 17 ou mais novo (e talvez mais antigo), this attribute can be set to `true` if the frame is allowed to be placed into full screen mode by calling its {{domxref("element.webkitRequestFullScreen()")}} method. If this isn't set, the element can't be placed into full screen mode. -- {{htmlattrdef("mozapp")}} {{non-standard_inline}} +- `mozapp` {{non-standard_inline}} - : For frames hosting an [open web app](/pt-BR/docs/Apps), this specifies the URL of the [app manifest](/pt-BR/docs/Apps/Manifest). This ensures that the app is loaded with the right permissions. See [Using the Browser API](/pt-BR/docs/DOM/Using_the_Browser_API) for details. Available in Gecko 13.0 and later. -- {{htmlattrdef("mozbrowser")}} {{non-standard_inline}} +- `mozbrowser` {{non-standard_inline}} - : Indicates that the frame is to appear like a top-level browser window to the embedded content. This means that {{domxref("window.top")}}, {{domxref("window.parent")}}, {{domxref("window.frameElement")}}, etc. will _not_ reflect the frame hierarchy. This allows for a web browser UI to be implemented entirely with web technology, given the right permissions. See [Using the Browser API](/pt-BR/docs/DOM/Using_the_Browser_API) for details. Available in Gecko 13.0 and later. -- {{htmlattrdef("name")}} +- `name` - : A name for the embedded browsing context (or frame). This can be used as the value of the **`target`** attribute of an {{HTMLElement("a")}} or {{HTMLElement("form")}} element, or the formtarget attribute of an {{HTMLElement("input")}} or {{HTMLElement("button")}} element. -- {{htmlattrdef("remote")}} {{non-standard_inline}} +- `remote` {{non-standard_inline}} - : Carrega a página do _frame_ em um processo separado. -- {{htmlattrdef("scrolling")}} +- `scrolling` - : Enumerated attribute indicating when the browser should provide a scroll bar (or other scrolling device) for the frame: @@ -49,7 +49,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes). - `yes`: Sempre mostrar uma barra de rolagem. - `no`: Nunca mostrar uma barra de rolagem. -- {{htmlattrdef("sandbox")}} +- `sandbox` - : If specified as an empty string, this attribute enables extra restrictions on the content that can appear in the inline frame. The value of the attribute can either be an empty string (all the restrictions are applied), or a space-separated list of tokens that lift particular restrictions. Valid tokens are: @@ -66,13 +66,13 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes). > - Sandboxing in general is only of minimal help if the attacker can arrange for the potentially hostile content to be displayed in the user's browser outside a sandboxed `iframe`. It is recommended that such content should be served from a _separate dedicated domain_, to limit the potential damage. > - The `sandbox` attribute is not supported in Internet Explorer 9 and earlier versions, or in Opera. -- {{htmlattrdef("seamless")}} +- `seamless` - : This **Boolean attribute** indicates that the browser should render the inline frame in a way that makes it appear to be part of the containing document, for example by applying CSS styles that apply to the `<iframe>` to the contained document before styles specified in that document, and by opening links in the contained documents in the parent browsing context (unless another setting prevents this). In XHTML, attribute minimization is forbidden, and the seamless attribute must be defined as `<iframe seamless="seamless">`. -- {{htmlattrdef("src")}} +- `src` - : The URL of the page to embed. -- {{htmlattrdef("srcdoc")}} +- `srcdoc` - : The content of the page that the embedded context is to contain. This attribute is expected to be used together with the sandbox and seamless attributes. If a browser supports the `srcdoc` attribute, it will override the content specified in the `src` attribute (if present). If a browser does NOT support the `srcdoc` attribute, it will show the file specified in the `src` attribute instead (if present). -- {{htmlattrdef("width")}} +- `width` - : Indicates the width of the frame HTML 5 in CSS pixels, or HTML 4 in pixels or as a percentage. ## Scripting @@ -131,11 +131,7 @@ Scripts trying to access a frame's content are subject to the [same-origin polic ## Especificações -| Especificação | Status | Comment | -| ------------------------------------------------------------------------------------------- | ------------------------ | ------- | -| {{SpecName('HTML WHATWG', 'the-iframe-element.html#the-iframe-element', '<iframe>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'embedded-content-0.html#the-iframe-element', '<iframe>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'present/frames.html#h-16.5', '<iframe>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Compatibilidade dos navegadores diff --git a/files/pt-br/web/html/element/img/index.md b/files/pt-br/web/html/element/img/index.md index 970e71363218c8..78d5a93b5bb377 100644 --- a/files/pt-br/web/html/element/img/index.md +++ b/files/pt-br/web/html/element/img/index.md @@ -29,17 +29,17 @@ O **elemento** **HTML `<img>` **(or _HTML Image Element_) representa a inserçã Este Elemeto inlcui o [atributo global](/pt-BR/docs/Web/HTML/Global_attributes). -- {{htmlattrdef("align")}} {{deprecated_inline}} +- `align` {{deprecated_inline}} - : The alignment of the image with respect to its surrounding context. Use the {{cssxref('vertical-align')}} CSS property. -- {{htmlattrdef("alt")}} +- `alt` - : Este atributo define um texto alternativo que descreve a imagem. Os Usuários irão ver o texto se a URL da imagem estiver errado, a imagem não está em um dos [formatos suportados](#supported_image_formats) ou até a imagem ser baixada . > **Note:** **Usage note:** Omitting this attribute indicates that the image _is_ a key part of the content, but no textual equivalent is available. Setting this attribute to the empty string indicates that this image is _not_ a key part of the content; non-visual browsers may omit it from rendering. -- {{htmlattrdef("border")}} {{deprecated_inline}} +- `border` {{deprecated_inline}} - : The width of a border around the image. -- {{htmlattrdef("crossorigin")}} +- `crossorigin` - : This enumerated attribute indicates if the fetching of the related image must be done using CORS or not. [CORS-enabled images](/pt-BR/docs/CORS_Enabled_Image) can be reused in the {{HTMLElement("canvas")}} element without being _tainted_. The allowed values are: @@ -50,23 +50,23 @@ Este Elemeto inlcui o [atributo global](/pt-BR/docs/Web/HTML/Global_attributes). When not present, the resource is fetched without a CORS request (i.e. without sending the `Origin:` HTTP header), preventing its non-tainted usage in {{HTMLElement('canvas')}} elements. If invalid, it is handled as if the enumerated keyword **anonymous** was used. See [CORS settings attributes](/pt-BR/docs/HTML/CORS_settings_attributes) for additional information. -- {{htmlattrdef("height")}} +- `height` - : The height of the image in HTML 5 CSS pixels, or HTML 4 in pixels or as a percentage. -- {{htmlattrdef("hspace")}} {{deprecated_inline}} +- `hspace` {{deprecated_inline}} - : The number of pixels of white space to insert to the left and right of the image. -- {{htmlattrdef("ismap")}} +- `ismap` - : This Boolean attribute indicates that the image is part of a server-side map. If so, the precise coordinates of a click are sent to the server. > **Note:** **Usage note:** This attribute is allowed only if the `<img>` element is a descendant of an {{htmlelement("a")}} element with a valid [`href`](/pt-BR/docs/Web/HTML/Element/a#href) attribute. -- {{htmlattrdef("longdesc")}} {{deprecated_inline}} +- `longdesc` {{deprecated_inline}} - : A link to a more detailed description of the image. Possible values are a {{glossary("URL")}} or an element [`id`](/pt-BR/docs/Web/HTML/Global_attributes#id). -- {{htmlattrdef("name")}} {{deprecated_inline}} +- `name` {{deprecated_inline}} - : A name for the element. Use the [`id`](/pt-BR/docs/Web/HTML/Global_attributes#id) attribute instead. -- {{htmlattrdef("src")}} +- `src` - : Image URL, this attribute is obligatory for the `<img>` element. On browsers supporting **srcset**, **src** is ignored if this one is provided. -- {{htmlattrdef("srcset")}} +- `srcset` - : A list of one or more strings separated by commas indicating a set of possible images for the user agent to use. Each string is composed of: @@ -77,15 +77,15 @@ Este Elemeto inlcui o [atributo global](/pt-BR/docs/Web/HTML/Global_attributes). Each string in the list must have at least a width descriptor or a pixel density descriptor to be valid. Among the list, there must be only one string containing the same tuple of width descriptor and pixel density descriptor. The browser chooses the most adequate image to display at a given point of time. -- {{htmlattrdef("width")}} +- `width` - : The width of the image in pixels or percent. -- {{htmlattrdef("usemap")}} +- `usemap` - : The partial URL (starting with '#') of an [image map](/pt-BR/docs/HTML/Element/map) associated with the element. > **Note:** **Usage note:** You cannot use this attribute if the `<img>` element is a descendant of an {{htmlelement("a")}} or {{HTMLElement("button")}} element. -- {{htmlattrdef("vspace")}} {{deprecated_inline}} +- `vspace` {{deprecated_inline}} - : The number of pixels of white space to insert above and below the image. ## Formato de imagens suportadas @@ -196,11 +196,7 @@ O valor do atributo `title` é geralmente mostrado ao usuário como uma dica, qu ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------------------------- | ------------------------ | ------- | -| {{SpecName('HTML WHATWG', 'embedded-content-1.html#the-img-element', '<img>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'embedded-content-0.html#the-img-element', '<img>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'struct/objects.html#h-13.2', '<img>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Compatibilidade dos navegadores diff --git a/files/pt-br/web/html/element/input/checkbox/index.md b/files/pt-br/web/html/element/input/checkbox/index.md index c26104d1ac3c60..8c4ebece139cfb 100644 --- a/files/pt-br/web/html/element/input/checkbox/index.md +++ b/files/pt-br/web/html/element/input/checkbox/index.md @@ -193,7 +193,7 @@ Portanto, neste caso, o `indeterminate`estado é usado para afirmar que a coleta ## Validação -As caixas de seleção suportam [validação](/pt-BR/docs/Web/Guide/HTML/HTML5/Constraint_validation) (oferecidas para todos os [`<input>`](/pt-BR/docs/Web/HTML/Element/input)s). No entanto, a maioria dos {{domxref ("ValidityState")}} s sempre será `false`. Se a caixa de seleção tiver o [`required`](/pt-BR/docs/Web/HTML/Element/input#attr-required) atributo, mas não estiver marcada, ela [`ValidityState.valueMissing`](/pt-BR/docs/Web/API/ValidityState/valueMissing) será `true`. +As caixas de seleção suportam [validação](/pt-BR/docs/Web/Guide/HTML/HTML5/Constraint_validation) (oferecidas para todos os [`<input>`](/pt-BR/docs/Web/HTML/Element/input)s). No entanto, a maioria dos {{domxref ("ValidityState")}} s sempre será `false`. Se a caixa de seleção tiver o [`required`](/pt-BR/docs/Web/HTML/Element/input#required) atributo, mas não estiver marcada, ela [`ValidityState.valueMissing`](/pt-BR/docs/Web/API/ValidityState/valueMissing) será `true`. ## Exemplos @@ -290,11 +290,7 @@ otherCheckbox.onchange = function () { ## Especificações -| Especificação | Status | Comente | -| ------------------------------------------------------------------------------------------------------------------------- | ------------------------- | ------- | -| | | | -| {{SpecName ('HTML WHATWG', 'forms.html # checkbox-state- (tipo = caixa de seleção)', '<input type = "checkbox">')}} | {{Spec2 ('HTML WHATWG')}} | | -| {{SpecName ('HTML5 W3C', 'forms.html # checkbox-state- (tipo = caixa de seleção)', '<input type = "checkbox">')}} | {{Spec2 ('HTML5 W3C')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/input/date/index.md b/files/pt-br/web/html/element/input/date/index.md index eecbb9aad09146..38f6eda30156e4 100644 --- a/files/pt-br/web/html/element/input/date/index.md +++ b/files/pt-br/web/html/element/input/date/index.md @@ -288,17 +288,17 @@ A melhor maneira de lidar com datas nos formulários de um modo entre navegadore Beside the attributes listed below, this element can have any of the [global attributes](/pt-BR/docs/HTML/Global_attributes). -- {{htmlattrdef("mozactionhint")}} {{non-standard_inline}} +- `mozactionhint` {{non-standard_inline}} - : Specifies an "action hint" used to determine how to label the enter key on mobile devices with virtual keyboards. Supported values are `go`, `done`, `next`, `search`, and `send`; these automatically get mapped to the appropriate string (and are case-insensitive). -- {{htmlattrdef("autofocus")}} +- `autofocus` - : This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the **autofocus** attribute, which is a Boolean. It cannot be applied if the **type** attribute is set to `hidden` (that is, you cannot automatically set focus to a hidden control). -- {{htmlattrdef("disabled")}} +- `disabled` - : This Boolean attribute indicates that the form control is not available for interaction. In particular, the `click` event [will not be dispatched](https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute) on disabled controls. Also, a disabled control's value isn't submitted with the form. -- {{htmlattrdef("form")}} +- `form` - : The form element that the input element is associated with (its _form owner_). The value of the attribute must be an **id** of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, this `<input>` element must be a descendant of a {{HTMLElement("form")}} element. This attribute enables you to place `<input>` elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form. -- {{htmlattrdef("formaction")}} +- `formaction` - : The URI of a program that processes the information submitted by the input element, if it is a submit button or image. If specified, it overrides the [`action`](/pt-BR/docs/Web/HTML/Element/form#action) attribute of the element's form owner. -- {{htmlattrdef("formenctype")}} +- `formenctype` - : If the input element is a submit button or image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are: @@ -308,7 +308,7 @@ Beside the attributes listed below, this element can have any of the [global att If this attribute is specified, it overrides the [`enctype`](/pt-BR/docs/Web/HTML/Element/form#enctype) attribute of the element's form owner. -- {{htmlattrdef("formmethod")}} +- `formmethod` - : If the input element is a submit button or image, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are: @@ -317,9 +317,9 @@ Beside the attributes listed below, this element can have any of the [global att If specified, this attribute overrides the [`method`](/pt-BR/docs/Web/HTML/Element/form#method) attribute of the element's form owner. -- {{htmlattrdef("formnovalidate")}} +- `formnovalidate` - : If the input element is a submit button or image, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the [`novalidate`](/pt-BR/docs/Web/HTML/Element/form#novalidate) attribute of the element's form owner. -- {{htmlattrdef("formtarget")}} +- `formtarget` - : If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a _browsing context_ (for example, tab, window, or inline frame). If this attribute is specified, it overrides the [`target`](/pt-BR/docs/Web/HTML/Element/form#target) attribute of the elements's form owner. The following keywords have special meanings: @@ -328,7 +328,7 @@ Beside the attributes listed below, this element can have any of the [global att - `_parent`: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as `_self`. - `_top`: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as `_self`. -- {{htmlattrdef("inputmode")}} +- `inputmode` - : A hint to the browser for which keyboard to display. This attribute applies when the value of the **type** attribute is text, password, email, or url. Possible values are: @@ -344,28 +344,28 @@ Beside the attributes listed below, this element can have any of the [global att - `email`: Email input. Use \<input type="email"> if possible instead. - `url`: URL input. Use \<input type="url"> if possible instead. -- {{htmlattrdef("list")}} +- `list` - : Identifies a list of pre-defined options to suggest to the user. The value must be the **id** of a {{HTMLElement("datalist")}} element in the same document. The browser displays only options that are valid values for this input element. -- {{htmlattrdef("max")}} +- `max` - : The maximum value for this item, which must not be less than its minimum (**min** attribute) value. -- {{htmlattrdef("min")}} +- `min` - : The minimum value for this item, which must not be greater than its maximum (**max** attribute) value. -- {{htmlattrdef("name")}} +- `name` - : The name of the control, which is submitted with the form data. -- {{htmlattrdef("readonly")}} +- `readonly` - : This Boolean attribute indicates that the user cannot modify the value of the control. -- {{htmlattrdef("required")}} +- `required` - : This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the **type** attribute is `hidden`, `image`, or a button type (`submit`, `reset`, or `button`). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate. -- {{htmlattrdef("selectionDirection")}} +- `selectionDirection` - : The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown. -- {{htmlattrdef("spellcheck")}} +- `spellcheck` - : Setting the value of this attribute to `true` indicates that the element needs to have its spelling and grammar checked. The value `default` indicates that the element is to act according to a default behavior, possibly based on the parent element's own `spellcheck` value. The value `false` indicates that the element should not be checked. -- {{htmlattrdef("step")}} +- `step` - : Works with the **min** and **max** attributes to limit the increments at which a numeric or date-time value can be set. It can be the string `any` or a positive floating point number. If this attribute is not set to `any`, the control accepts only values at multiples of the step value greater than the minimum. -- {{htmlattrdef("value")}} +- `value` - : The initial value of the control. This attribute is optional. Note that when reloading the page, Gecko and IE [will ignore the value specified in the HTML source](https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186), if the value was changed before the reload. -- {{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}} +- `x-moz-errormessage` {{non-standard_inline}} - : This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate. ## Examples diff --git a/files/pt-br/web/html/element/input/index.md b/files/pt-br/web/html/element/input/index.md index f1e8f9e4920ac8..ed64d7d04f9f63 100644 --- a/files/pt-br/web/html/element/input/index.md +++ b/files/pt-br/web/html/element/input/index.md @@ -16,7 +16,7 @@ O **elemento HTML `<input>`** é usado para criar controles interativos para for Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Atributos_globais). -- {{htmlattrdef("type")}} +- `type` - : O tipo de controle a ser exibido. O tipo padrão é **text**, se este atributo não for especificado. Os valores possíveis são: @@ -50,7 +50,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Atributos_globais). - `url`: Um campo para editar uma URL. O valor inserido é validado para ser vazio ou uma URL absoluta válida antes de ser enviado. Quebras de linha e espaços em branco antes e após o valor inserido são automaticamente removidos. Você pode usar atributos como **pattern** e **maxlength** para restringir os valores inseridos no controle. As pseudoclasses CSS {{cssxref(":valid")}} e {{cssxref(":invalid")}} são aplicadas apropriadamente. - `week`: Um controle para inserir uma data consistindo de ano da semana e número da semana sem fuso horário. -- {{htmlattrdef("accept")}} +- `accept` - : Se o valor do atributo **type** for `file`, este atributo indica quais tipos de arquivo o servidor aceita; caso contrário, este atributo é ignorado. O valor deve ser uma lista de especificadores de tipo únicos separados por vírgula: @@ -60,9 +60,9 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Atributos_globais). - `video/*` representando arquivos de vídeo - `image/*` representando arquivos de imagem -- {{htmlattrdef("mozactionhint")}} {{non-standard_inline}} +- `mozactionhint` {{non-standard_inline}} - : Especifica uma "dica de ação" usada para determinar como rotular a tecla Enter em dispositivos móveis com teclados virtuais. Os valores suportados são `go`, `done`, `next`, `search` e `send`; estes valores são automaticamente mapeados para o texto apropriado (maiúsculas e minúsculas não são diferenciadas). -- {{htmlattrdef("autocapitalize")}} {{non-standard_inline}} +- `autocapitalize` {{non-standard_inline}} - : Este é um atributo não padronizado usado pelo iOS Safari Mobile que controla se e como o texto deveria ser automaticamente capitalizado conforme o usuário insere/edita. Os valores não obsoletos estão disponíveis no iOS 5 e posteriores. Os valores possíveis são: @@ -73,7 +73,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Atributos_globais). - `on`: {{deprecated_inline()}} Obsoleto desde o iOS 5. - `off`: {{deprecated_inline()}} Obsoleto desde o iOS 5. -- {{htmlattrdef("autocomplete")}} +- `autocomplete` - : Este atributo indica se o valor do controle pode ser completado automaticamente pelo navegador. Este atributo é ignorado se o valor do atributo **type** é `hidden`, `password`, `checkbox`, `radio`, `file` ou um tipo de botão (`button`, `submit`, `reset`, `image`). Os valores possíveis são: @@ -84,34 +84,34 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Atributos_globais). O atributo **autocomplete** também controla se o Firefox vai, ao contrário de outros navegadores, [persistir o estado dinâmico de desabilitado e marcado (se aplicável)](http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) de um {{HTMLElement("input")}} entre carregamentos de página. A funcionalidade de persistir é habilitada por padrão. Definir o valor do atributo **autocomplete** para `off` desabilita esta funcionalidade; isto funciona mesmo quando o atributo **autocomplete** não se aplica ao {{HTMLElement("input")}} por causa de seu **type**. Veja [Erro do Firefox 654072](https://bugzil.la/654072). -- {{htmlattrdef("autocorrect")}} {{non-standard_inline}} +- `autocorrect` {{non-standard_inline}} - : Este é um atributo não padronizado suportado pelo Safari que é usado para controle se a correção automática deveria ser habilitada quando o usuário entra/edita o texto do {{HTMLElement("input")}}. Os valores possíveis são: - `on`: Habilita correção automática - `off`: Desabilita correção automática -- {{htmlattrdef("autofocus")}} +- `autofocus` - : Este atributo booleano permite que você especifique que um controle de formulário deve ter o foco de entrada de dados assim que a página carrega, a não ser que o usuário sobrescreva este comportamento digitando em um controle diferente, por exemplo. Apenas um elemento de formulário em um documento pode ter o atributo **autofocus**, que é booleano. Este atributo não pode ser aplicado se o atributo **type** estiver definido como `hidden` (isto é, você não pode colocar automaticamente o foco em um controle escondido). -- {{htmlattrdef("autosave")}} +- `autosave` - : Este atributo deve ser definido com um valor único. Se o valor do atributo **type** for `search`, termos de busca anteriores serão persistidos no menu entre carregamentos de página. -- {{htmlattrdef("checked")}} +- `checked` - : Quando o valor do atributo **type** é `radio` ou `checkbox`, a presença deste atributo booleano indica que o controle é selecionado por padrão; caso contrário, este atributo é ignorado. O Firefox vai, por padrão, ao contrário de outros navegadores, [persistir o estado dinâmico de marcado](http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) de um {{HTMLElement("input")}} entre carregamentos de página. Use o atributo [`autocomplete`](/pt-BR/docs/Web/HTML/Element/input#autocomplete) para controlar esta funcionalidade. -- {{htmlattrdef("disabled")}} +- `disabled` - : Este atributo booleano indica que o controle de formulário não está disponível para interação. Em particular o evento `click` [não será disparado](https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute) em controles desabilitados. Além disso, o valor de um controle desabilitado não é enviado com o formulário. O Firefox vai, por padrão, ao contrário de outros navegadores, [persistir o estado dinâmico de desabilitado](http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) de um {{HTMLElement("input")}} entre carregamentos de página. Use o atributo [`autocomplete`](/pt-BR/docs/Web/HTML/Element/input#autocomplete) para controlar esta funcionalidade. -- {{htmlattrdef("form")}} +- `form` - : O elemento `<form>` ao qual o elemento `<input>` está associado (seu _formulário dono_). O valor do atributo deve ser um **id** de um elemento {{HTMLElement("form")}}. Este atributo permite que você coloque elementos `<input>` em qualquer lugar num documento, não apenas como descendentes de seus elementos `<form>`. Um `<input>` só pode estar associado a um único formulário. -- {{htmlattrdef("formaction")}} +- `formaction` - : A URI de um programa que processa a informação enviada pelo elemento, se ele for um botão ou uma imagem de envio de formulário. Se especificado, ele sobrescreve o atributo [`action`](/pt-BR/docs/Web/HTML/Element/form#action) do formulário dono do elemento. -- {{htmlattrdef("formenctype")}} +- `formenctype` - : Se o elemento for um botão ou uma imagem de envio de formulário, este atributo especifica o tipo de conteúdo que deve ser usado para enviar o formulário para o servidor. Os valores possíveis são: @@ -121,7 +121,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Atributos_globais). Se este atributo for especificado, ele sobrescreve o atributo [`enctype`](/pt-BR/docs/Web/HTML/Element/form#enctype) do formulário dono do elemento. -- {{htmlattrdef("formmethod")}} +- `formmethod` - : Se o elemento for um botão ou uma imagem de envio de formulário, este atributo especifica o método HTTP que o navegador deve usar para enviar o formulário. Os valores possíveis são: @@ -130,9 +130,9 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Atributos_globais). Se especificado, este atributo sobrescreve o atributo [`method`](/pt-BR/docs/Web/HTML/Element/form#method) do formulário dono do elemento. -- {{htmlattrdef("formnovalidate")}} +- `formnovalidate` - : Se o elemento for um botão ou uma imagem de envio de formulário, este atributo booleano especifica que o formulário não deve ser validado quando enviado. Se especificado, este atributo sobrescreve o atributo [`novalidate`](/pt-BR/docs/Web/HTML/Element/form#novalidate) do formulário dono do elemento. -- {{htmlattrdef("formtarget")}} +- `formtarget` - : Se o elemento for um botão ou uma imagem de envio de formulário, este atributo é um nome ou palavra-chave indicando onde mostrar a resposta recebida após a submissão do formulário. Este é o nome de, ou palavra-chave para, um _contexto de navegação_ (por exemplo aba, janela ou frame inline). Se especificado, este atributo sobrescreve o atributo [`target`](/pt-BR/docs/Web/HTML/Element/form#target) do formulário dono do elemento. As seguintes palavras-chave têm significado especial: @@ -141,11 +141,11 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Atributos_globais). - `_parent`: Carrega a resposta no contexto de navegação pai do atual. Se não houver pai, esta opção tem o mesmo comportamento de `_self`. - `_top`: Carrega a resposta no contexto de navegação raiz (isto é, o contexto de navegação que é ancestral do atual e não tem pai). Se não houver pai, esta opção tem o mesmo comportamento de `_self`. -- {{htmlattrdef("height")}} +- `height` - : Se o valor do atributo **type** for `image`, este atributo define a altura da imagem mostrada para o botão. -- {{htmlattrdef("incremental")}} {{non-standard_inline}} +- `incremental` {{non-standard_inline}} - : Este é um atributo não padronizado suportado pelo Safari que é aplicado somente quando o **type** é `search`. Se o atributo estiver presente, independentemente do valor que ele tiver, o {{HTMLElement("input")}} dispara eventos [`search`](/pt-BR/docs/Web/Events/search) conforme o usuário edita o texto do campo. Este evento somente é disparado um tempo após a última tecla ter sido pressionada; este tempo é definido pela implementação e novas digitações zeram o contador de tempo. Em outras palavras, o disparo do evento é filtrado (_debounced_). Se o atributo não estiver presente, o evento [`search`](/pt-BR/docs/Web/Events/search) só é disparado quando o usuário iniciar explicitamente uma busca (por exemplo, pressionando a tecla Enter enquanto estiver no campo). -- {{htmlattrdef("inputmode")}} +- `inputmode` - : Uma dica para o navegador de qual teclado deve ser mostrado. Este atributo se aplica quando o valor do atributo **type** é `text`, `password`, `email` ou `url`. Os valores possíveis são: @@ -161,54 +161,54 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Atributos_globais). - `email`: Entrada de email. Use `<input type="email">` se possível em vez disso. - `url`: Entrada de URLs. Use `<input type="url">` se possível em vez disso. -- {{htmlattrdef("list")}} +- `list` - : Identifica uma lista de opções pré-definidas de sugestões para o usuário. O valor deve ser o **id** de um elemento {{HTMLElement("datalist")}} no mesmo documento. O navegador mostrará apenas opções que são valores válidos para este elemento. Este atributo é ignorado quando o valor do atributo **type** é `hidden`, `checkbox`, `radio`, `file` ou um tipo de botão. -- {{htmlattrdef("max")}} +- `max` - : O valor máximo (numérico ou data) para este item, que não deve ser menor que seu valor mínimo (atributo **min**). -- {{htmlattrdef("maxlength")}} +- `maxlength` - : Se o valor do atributo **type** for `text`, `email`, `search`, `password`, `tel` ou `url`, este atributo especifica o número máximo de caracteres (em pontos de código Unicode) que o usuário pode inserir; para outros tipos de controle, este atributo é ignorado. Seu valor pode exceder o do atributo **size**. Se não for especificado, o usuário pode inserir uma quantidade ilimitada de caracteres. Especificar um valor negativo resulta no comportamento padrão, isto é, o usuário vai poder inserir um número ilimitado de caracteres. Esta regra só é validada quando o valor do atributo é modificado. -- {{htmlattrdef("min")}} +- `min` - : O valor mínimo (númerico ou data) para este item, que não deve ser maior do que seu máximo (atributo **max**). -- {{htmlattrdef("minlength")}} +- `minlength` - : Se o valor do atributo **type** for `text`, `email`, `search`, `password`, `tel` ou `url`, este atributo especifica o número mínimo de caracteres (em pontos de código Unicode) que o usuário pode inserir; para outros tipos de controle, este atributo é ignorado. -- {{htmlattrdef("multiple")}} +- `multiple` - : Este atributo booleano indica se o usuário pode inserir mais de um valor. Ele é aplicado quando o atributo **type** está definido como `email` ou `file`; em outros casos, é ignorado. -- {{htmlattrdef("name")}} +- `name` - : O nome do controle, que é enviado junto com os dados do formulário. -- {{htmlattrdef("pattern")}} +- `pattern` - : Uma expressão regular usada para validar o valor do controle. O padrão deve casar com o valor completo da entrada, não apenas uma parte. Use o atributo **title** para descrever o padrão para ajudar o usuário. Este atributo é aplicado quando o valor do atributo **type** é `text`, `search`, `tel`, `url` ou `email`; caso contrário ele é ignorado. A linguagem da expressão regular é a mesma do JavaScript. O padrão não deve estar entre barras. -- {{htmlattrdef("placeholder")}} +- `placeholder` - : Uma dica para o usuário do que ele pode inserir no controle. O texto do atributo não deve conter quebras de linha. Este atributo é aplicado quando o valor do atributo **type** é `text`, `search`, `tel`, `url` ou `email`; caso contrário, ele é ignorado. > **Nota:** Não use o atributo `placeholder` no lugar de um elemento {{HTMLElement("label")}}. Os propósitos de cada um são diferentes: o atributo {{HTMLElement("label")}} descreve o papel o elemento do formulário, isto é, ele indica que tipo de informação é esperada. Já o atributo `placeholder` é uma dica sobre o formato que o conteúdo deveria ter. Há casos em que o atributo `placeholder` nunca é exibido para o usuário, portanto o formulário deve ser inteligível sem ele. -- {{htmlattrdef("readonly")}} +- `readonly` - : Este atributo booleano indica que o usuário não pode modificar o valor do controle. Este atributo é ignorado se o valor do atributo **type** for `hidden`, `range`, `color`, `checkbox`, `radio`, `file` ou um tipo de botão. -- {{htmlattrdef("required")}} +- `required` - : Este atributo especifica que o usuário deve preencher o campo com um valor antes de enviar o formulário. Ele não pode ser usado quando o atributo **type** está definido como `hidden`, `image` ou um tipo de botão (`submit`, `reset` ou `button`). As pseudoclasses CSS {{cssxref(":optional")}} e {{cssxref(":required")}} serão aplicadas ao campo como for apropriado. -- {{htmlattrdef("selectionDirection")}} +- `selectionDirection` - : A direção na qual a seleção ocorreu. Vale `forward` se a seleção foi feita no mesmo sentido da escrita do idioma usado ou `backward` se a seleção foi feita na direção oposta. Pode ainda ser `none` se a direção da seleção não for conhecida. -- {{htmlattrdef("size")}} +- `size` - : O tamanho inicial do controle. Este valor é em pixels a não ser que o valor do atributo **type** seja `text` ou `password`. Neste caso, este valor é um número inteiro de caracteres. A partir do HTML5, este atributo é aplicado apenas quando o atributo **type** está definido como `text`, `search`, `tel`, `url`, `email` ou `password`; caso contrário, ele é ignorado. Além disso, o tamanho deve ser maior que zero. Se você não especificar um tamanho, o valor padrão 20 é usado. -- {{htmlattrdef("spellcheck")}} +- `spellcheck` - : Definir o valor deste atributo como `true` indica que o elemento deve passar por um corretor ortográfico e gramatical. O valor `default` indica que o elemento deve agir de acordo com seu comportamento padrão, possivelmente baseado no valor do atributo `spellcheck` de seu elemento pai. O valor `false` indica que o elemento não deve ser verificado. -- {{htmlattrdef("src")}} +- `src` - : Se o valor do atributo **type** for `image`, este atributo especifica uma URI para a localização de uma imagem a ser exibida no botão gráfico; caso contrário, este atributo é ignorado. -- {{htmlattrdef("step")}} +- `step` - : Trabalha junto com os atributos **min** e **max** para limitar os incrementos em que valores numéricos ou datas podem ser alterados. Seu valor pode ser `any` ou um número de ponto flutuante positivo. Se o valor não for `any`, o controle aceita somente valores múltiplos valor do incremento maiores que o mínimo. -- {{htmlattrdef("tabindex")}} +- `tabindex` - : A posição do elemento na ordem de navegação pela tecla Tab no documento atual. -- {{htmlattrdef("value")}} +- `value` - : O valor inicial do controle. Este atributo é opcional exceto quando o valor do atributo **type** for `radio` ou `checkbox`. Note que, quando a página é recarregada, Gecko and IE [ignorarão o valor especificado no código HTML](https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186) se o valor tiver sido alterado antes do recarregamento. -- {{htmlattrdef("width")}} +- `width` - : Se o valor do atributo **type** for `image`, este atributo define a largura da imagem exibida para o botão. -- {{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}} +- `x-moz-errormessage` {{non-standard_inline}} - : Essa extensão da Mozilla permite que você especifique a mensagem de erro a ser exibida quando um campo não valida com sucesso. ## Notas @@ -267,11 +267,7 @@ Você pode usar o atributo [`mozactionhint`](/pt-BR/docs/Web/HTML/Element/input# ## Especificações -| Especificação | Estado | Comentários | -| ---------------------------------------------------------------------------------------- | ------------------------ | ----------- | -| {{SpecName('HTML WHATWG', 'the-input-element.html#the-input-element', '<input>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'forms.html#the-input-element', '<input>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '<form>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/input/password/index.md b/files/pt-br/web/html/element/input/password/index.md index 8bbf7260fda901..0c1e1815e5595a 100644 --- a/files/pt-br/web/html/element/input/password/index.md +++ b/files/pt-br/web/html/element/input/password/index.md @@ -186,7 +186,7 @@ Neste exemplo, são válidos apenas valores consistindo de no mínimo quatro e n {{EmbedLiveSample("Validation_sample1", 600, 40)}} -- {{htmlattrdef("disabled")}} +- `disabled` - : Esse atributo booleano indica que o campo de senha não está disponível para interação. Além disso, os valores dos campos marcados com ele não são enviados com o formulário. ## Exemplos @@ -238,10 +238,7 @@ cpf.oninput = function (event) { ## Especificações -| Especificação | Status | Comentário | -| --------------------------------------------------------------------------------------------------------- | ------------------------ | ----------------- | -| {{SpecName('HTML WHATWG', 'forms.html#password-state-(type=password)', '<input type="password">')}} | {{Spec2('HTML WHATWG')}} | Definição inicial | -| {{SpecName('HTML5.1', 'forms.html#password-state-(type=password)', '<input type="password">')}} | {{Spec2('HTML5.1')}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/label/index.md b/files/pt-br/web/html/element/label/index.md index 2a9233ecf7f79d..6e59b0d3975bd6 100644 --- a/files/pt-br/web/html/element/label/index.md +++ b/files/pt-br/web/html/element/label/index.md @@ -17,15 +17,15 @@ Um **elemento** **HTML `<label>` **representa uma legenda para um item em uma in A tecla de atalho para acessar este elemento a partir do teclado. -- {{htmlattrdef("accesskey")}} +- `accesskey` - : A tecla de atalho para acessar este elemento a partir do teclado. -- {{htmlattrdef("for")}} +- `for` - : O ID de um elemento de formulário relacionados com labelable no mesmo documento como o elemento label. O primeiro elemento tal no documento com uma ID correspondente ao valor do atributo é o controle marcado for este elemento etiqueta. > **Nota:** Um elemento etiqueta pode ter tanto um for o atributo e um elemento de controlo continham, enquanto os pontos de atributo para o elemento de controlo contido. -- {{htmlattrdef("form")}} +- `form` - : O elemento de forma que o elemento label está associado a (seu proprietário formulário). O valor do atributo deve ser uma identificação de um {{HTMLElement ("form")}} elemento no mesmo documento. Se este atributo não for especificado, este elemento \<label> deve ser um descendente de uma {{HTMLElement ("form")}} elemento. Este atributo permite que você coloque elementos do rótulo em qualquer lugar dentro de um documento, e não apenas como descendentes de seus elementos de formulário. ## Exemplo @@ -48,11 +48,7 @@ A tecla de atalho para acessar este elemento a partir do teclado. ## Especificações -| Specification | Status | Comment | -| ---------------------------------------------------------------------------- | ------------------------ | ------- | -| {{SpecName('HTML WHATWG', 'forms.html#the-label-element', '<label>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'forms.html#the-label-element', '<label>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'interact/forms.html#h-17.9.1', '<label>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/li/index.md b/files/pt-br/web/html/element/li/index.md index 38542a123b74f9..07c15ef6a820b4 100644 --- a/files/pt-br/web/html/element/li/index.md +++ b/files/pt-br/web/html/element/li/index.md @@ -17,7 +17,7 @@ O **_elemento_** **_HTML_ `<li>`** (ou a Lista dos Itens de um elemento HTML) é Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attributes). -- {{htmlattrdef("value")}} +- `value` - : Este atributo de número inteiro indica o valor ordinal atual do item na lista, definido pelo elemento {{HTMLElement("ol")}}. O único valor possível para este atributo é um número, ainda que a lista seja exibida com algarismos romanos, ou letras. A lista de itens que virá em seguida continuará a ser numerada a partir desta posição. O atributo **value** não tem significado para listas desordenadas ({{HTMLElement("ul")}}), nem para menus ({{HTMLElement("menu")}}). @@ -25,7 +25,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut > **Nota:** Antes de Gecko 9.0, os valores negativos eram, incorretamente, convertidos a 0. A partir de Gecko 9.0 todos os valores inteiros são analisados corretamente. -- {{htmlattrdef("type")}} {{Deprecated_inline}} +- `type` {{Deprecated_inline}} - : A característica deste atributo é indicar o tipo de numeração: @@ -71,11 +71,7 @@ Para exemplos mais detalhados veja as páginas [\<ol>](/pt-BR/docs/Web/HTML/Elem ## Especificações -| Especificação | Estado | Observação | -| --------------------------------------------------------------------------------- | ------------------------ | ---------- | -| {{SpecName('HTML WHATWG', 'grouping-content.html#the-li-element', '<li>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'the-li-element.html#the-li-element', '<li>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'lists.html#h-10.2', '<li>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/link/index.md b/files/pt-br/web/html/element/link/index.md index 4aed228d4aae49..f54536cc90d662 100644 --- a/files/pt-br/web/html/element/link/index.md +++ b/files/pt-br/web/html/element/link/index.md @@ -17,15 +17,15 @@ O **Elemento HTML _\<link>_** especifica as relações entre o documento atual e Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attributes). -- {{htmlattrdef("as")}} +- `as` - : Esse atributo é usado apenas quando `rel="preload"` foi enviado no elemento `<link>`. Especifica o tipo de conteúdo carregado pelo `<link>`, que é necessário para a priorização do conteúdo, solicitação de correspondência, aplicação de [política de segurança de conteúdo](/pt-BR/docs/Web/HTTP/CSP) correta, e configuração do cabeçalho de pedido {{httpheader("Accept")}} correta. -- {{htmlattrdef("charset")}} +- `charset` - : Este atributo define a codificação de caracteres do recurso vinculado. O valor é umespaço e/ou lista delimitada por vírgulas de conjuntos de caracteres, conformedefinido na RFC 2045. O valor padrão é ISO-8859-1. > **Nota:** Este atributo é obsoleto em HTML5 e **não deve ser usada por autores**. Para atingir seu efeito, use o cabeçalho HTTP Content-Type sobre o recurso vinculado. -- {{htmlattrdef("crossorigin")}} +- `crossorigin` - : Este atributo enumerado indica se a busca da imagem relacionada deve ser feita usando CORS ou não. I-magens de CORS habilitado podem ser reutilizadas no elemento {{HTMLElement("canvas")}} sem ser conta-minado. Os valores permitidos são: @@ -36,7 +36,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut When not present, the resource is fetched without a CORS request (i.e. without sending the `Origin:` HTTP header), preventing its non-tainted used in {{HTMLElement('canvas')}} elements. If invalid, it is handled as if the enumerated keyword **anonymous** was used. See [CORS settings attributes](/pt-BR/docs/Web/HTML/CORS_settings_attributes) for additional information. -- {{htmlattrdef("disabled")}} {{Non-standard_inline}} +- `disabled` {{Non-standard_inline}} - : Este atributo é usado para desativa uma relação com o link. Em conjunto com o script, esse atributo poderia ser usado para ligar e desligar várias relações com stylesheets. @@ -47,11 +47,11 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut > - If the `disabled` attribute has been added directly to the element on the page, do not include the {{HTMLElement("link")}} element instead; > - Set the `disabled` **property** of the `StyleSheet` DOM object via scripting. -- {{htmlattrdef("href")}} +- `href` - : Esse atributo especifica a [URL](/pt-BR/docs/URIs_and_URLs) do recurso vinculado. Uma URL pode ser absolute or relative. -- {{htmlattrdef("hreflang")}} +- `hreflang` - : Esse atributo indica o idioma do recurso vinculado. É meramente consultivo. Os valores permitidos são determindaos por [BCP47](http://www.ietf.org/rfc/bcp/bcp47.txt) para HTML5 e por [RFC1766](http://www.ietf.org/rfc/rfc1766.txt) para HTML 4. Use esse atributo se apenas os atributos [`href`](/pt-BR/docs/Web/HTML/Element/a#href) estiverem presentes. -- {{htmlattrdef("media")}} +- `media` - : This attribute specifies the media which the linked resource applies to. Its value must be a [media query](/pt-BR/docs/CSS/Media_queries). This attribute is mainly useful when linking to external stylesheets by allowing the user agent to pick the best adapted one for the device it runs on. @@ -59,17 +59,17 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut > > - Browsers not supporting the [CSS3 Media Queries](/pt-BR/docs/CSS/Media_queries) won't necessarily recognize the adequate link; do not forget to set fallback links, the restricted set of media queries defined in HTML 4. -- {{htmlattrdef("methods")}} {{Non-standard_inline}} +- `methods` {{Non-standard_inline}} - : The value of this attribute provides information about the functions that might be performed on an object. The values generally are given by the HTTP protocol when it is used, but it might (for similar reasons as for the **title** attribute) be useful to include advisory information in advance in the link. For example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. This attribute is not well understood nor supported, even by the defining browser, Internet Explorer 4. See [Methods Property (MSDN)](http://msdn.microsoft.com/en-us/library/ms534168%28VS.85%29.aspx). -- {{htmlattrdef("rel")}} +- `rel` - : This attribute names a relationship of the linked document to the current document. The attribute must be a space-separated list of the [link types values](/pt-BR/docs/Web/HTML/Link_types). The most common use of this attribute is to specify a link to an external style sheet: the **rel** attribute is set to `stylesheet`, and the **href** attribute is set to the URL of an external style sheet to format the page. WebTV also supports the use of the value `next` for **rel** to preload the next page in a document series. -- {{htmlattrdef("rev")}} +- `rev` - : The value of this attribute shows the relationship of the current document to the linked document, as defined by the [`href`](/pt-BR/docs/Web/HTML/Element/link#href) attribute. The attribute thus defines the reverse relationship compared to the value of the **rel** attribute. [Link types values](/pt-BR/docs/Web/HTML/Link_types) for the attribute are similar to the possible values for [`rel`](/pt-BR/docs/Web/HTML/Element/link#rel). > **Nota:** This attribute is obsolete in HTML5. **Do not use it**. To achieve its effect, use the [`rel`](/pt-BR/docs/Web/HTML/Element/link#rel) attribute with the opposite [link types values](/pt-BR/docs/Web/HTML/Link_types), e.g. made should be replaced by author. Also this attribute doesn't mean _revision_ and must not be used with a version number, which is unfortunately the case on numerous sites. -- {{htmlattrdef("sizes")}} +- `sizes` - : This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the [`rel`](/pt-BR/docs/Web/HTML/Element/link#rel) contains the icon [link types value](/pt-BR/docs/Web/HTML/Link_types). It may have the following values: @@ -79,9 +79,9 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut > **Nota:** Most icon formats are only able to store one single icon; therefore most of the time the [`sizes`](/pt-BR/docs/Web/HTML/Global_attributes#sizes) attribute contains only one entry. > MS's ICO format does, as well as Apple's ICNS. ICO is more ubiquitous, so you should use this format if cross-browser support is a concern (especially for old IE versions). -- {{htmlattrdef("target")}}{{Non-standard_inline}} +- `target`{{Non-standard_inline}} - : Defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource. -- {{htmlattrdef("type")}} +- `type` - : This attribute is used to define the type of the content linked to. The value of the attribute should be a MIME type such as **text/html**, **text/css**, and so on. The common use of this attribute is to define the type of style sheet linked and the most common current value is **text/css**, which indicates a Cascading Style Sheet format. ## Exemplos @@ -140,11 +140,7 @@ Você pode determinar quando um stylesheet foi carregado observando um `load` ev ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------------------------ | ------------------------ | ------- | -| {{SpecName('HTML WHATWG', 'semantics.html#the-link-element', '<link>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'document-metadata.html#the-link-element', '<link>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'struct/links.html#h-12.3', '<link>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/main/index.md b/files/pt-br/web/html/element/main/index.md index acf22e756da7fd..c742a0e8d62005 100644 --- a/files/pt-br/web/html/element/main/index.md +++ b/files/pt-br/web/html/element/main/index.md @@ -55,11 +55,7 @@ Este elemento admite apenas os [atributos globais](/pt-BR/docs/Web/HTML/Global_a ## Especificações -| Especificação | Estado | Comentário | -| ----------------------------------------------------------------------------------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', '#the-main-element', '<main>')}} | {{Spec2('HTML WHATWG')}} | Removida a restrição sobre não usar \<main> como um filho dos elementos {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, ou {{HTMLElement("nav")}}. | -| {{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '<main>')}} | {{Spec2('HTML5.1')}} | Não há mudança na {{SpecName('HTML5 W3C')}} | -| {{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '<main>')}} | {{Spec2('HTML5 W3C')}} | Definição inicial. | +{{Specifications}} ## Navegadores compatíveis diff --git a/files/pt-br/web/html/element/map/index.md b/files/pt-br/web/html/element/map/index.md index 82755950d4c9ae..619e12d067c17d 100644 --- a/files/pt-br/web/html/element/map/index.md +++ b/files/pt-br/web/html/element/map/index.md @@ -31,11 +31,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes). ## Especificações -| Especificação | Estado | Comentário | -| ------------------------------------------------------------------------------------------ | ------------------------- | ---------- | -| {{SpecName ('HTML WHATWG', 'a-map-element.html # the-map-elemento', '<map>')}} | {{Spec2 ('HTML WHATWG')}} | | -| {{SpecName ('HTML5 W3C', 'incorporado-content-0.html # the-map-elemento', '<map>')}} | {{Spec2 ('HTML5 W3C')}} | | -| {{SpecName ('HTML4.01', 'struct / objects.html # h-13.6.1', '<map>')}} | {{Spec2 ('HTML4.01')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/mark/index.md b/files/pt-br/web/html/element/mark/index.md index a19eae4df70935..ad995409170b15 100644 --- a/files/pt-br/web/html/element/mark/index.md +++ b/files/pt-br/web/html/element/mark/index.md @@ -34,10 +34,7 @@ Este elemento inclue apenas [atributos Globais](/pt-BR/docs/HTML/Global_attribut ## Especificações -| Especificações | Status | Comentários | -| ----------------------------------------------------------------------------------------- | ------------------------ | ----------- | -| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-mark-element', '<mark>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'the-mark-element.html#the-mark-element', '<mark>')}} | {{Spec2('HTML5 W3C')}} | | +{{Specifications}} ## Compatibilidade diff --git a/files/pt-br/web/html/element/marquee/index.md b/files/pt-br/web/html/element/marquee/index.md index 2034d0e8dbdab9..548b1232d00948 100644 --- a/files/pt-br/web/html/element/marquee/index.md +++ b/files/pt-br/web/html/element/marquee/index.md @@ -9,36 +9,36 @@ O elemento html \<marquee> é usado para inserir uma área de rolagem de texto"s ## Atributos -- {{htmlattrdef("behavior")}} +- `behavior` - : Define como o texto é rolado dentro da área do letreiro. Os valores possíveis são scroll, slide e alternate. Se nenhum valor for especificado, o valor padrão será scroll. -- {{htmlattrdef("bgcolor")}} +- `bgcolor` - : Define a cor do plano de fundo do letreiro através do nome da cor (ex: red, blue) ou de um valor hexadecimal. -- {{htmlattrdef("direction")}} +- `direction` - : Define a direção da rolagem do texto dentro do letreiro, os possíveis valores são: left, right, up & down. Se nenhum valor for especificado, o valor padrão será "left". -- {{htmlattrdef("height")}} +- `height` - : Define a altura do letreiro em pixeis ou em um valor percentual. -- {{htmlattrdef("hspace")}} +- `hspace` - : Aplica a margem horizontal. -- {{htmlattrdef("loop")}} +- `loop` - : Define o número de repetições da animação do letreiro. Se nenhum valor for especificado assumirá o valor padrão de -1, que significa que a animação será repetida infinitamente. -- {{htmlattrdef("scrollamount")}} +- `scrollamount` - : Define em pixeis o tamanho de rolagem em cada intervalo, o valor padrão é 6. -- {{htmlattrdef("scrolldelay")}} +- `scrolldelay` - : Define o intervalo de tempo entre cada animação de rolagem em milissegundos. O valor padrão é 85. Qualquer valor menor que 60 será ignorado e o valor 60 será usado, a menos que seja especificado como truespeed. -- {{htmlattrdef("truespeed")}} +- `truespeed` - : Por padrão, valores abaixo de 60 milissegundos são ignorados, a menos que o valor truespeed esteja presente, caso esteja estes valores são aceitos. -- {{htmlattrdef("vspace")}} +- `vspace` - : Aplica uma margem vertical em pixeis ou em valor percentual. -- {{htmlattrdef("width")}} +- `width` - : Define a largura em pixeis ou em um valor percentual. ## Event Handlers -- {{htmlattrdef("onbounce")}} +- `onbounce` - : Dispara quando o letreiro alcança o final da sua posição de rolagem. Ele apenas dispara quando o comportamento está configurado como `alternate.` -- {{htmlattrdef("onfinish")}} +- `onfinish` - : Dispara quando o letreiro terminar a quantidade de repetições definida pelo atributo loop. Só pode disparar quando o atributo loop estiver definido para algum número maior que 0, obviamente. -- {{htmlattrdef("onstart")}} +- `onstart` - : Dispara quando o letreiro começa a se mover. ## Métodos diff --git a/files/pt-br/web/html/element/meta/index.md b/files/pt-br/web/html/element/meta/index.md index 45a4474bade6d1..8930969c2a3d59 100644 --- a/files/pt-br/web/html/element/meta/index.md +++ b/files/pt-br/web/html/element/meta/index.md @@ -65,7 +65,7 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut > **Nota:** o atributo global [`name`](/pt-BR/docs/Web/HTML/Element/meta#name) tem um significado específico para o elemento {{HTMLElement("meta")}}, e o atributo [`itemprop`](/pt-BR/docs/Web/HTML/Element/meta#itemprop) não deve ser definido no mesmo elemento`<meta>` que tem algum desses atributos existentes: [`name`](/pt-BR/docs/Web/HTML/Element/meta#name), [`http-equiv`](/pt-BR/docs/Web/HTML/Element/meta#http-equiv) ou [`charset`](/pt-BR/docs/Web/HTML/Element/meta#charset). -- {{htmlattrdef("charset")}} +- `charset` - : Este atributo define a codificação de caracteres usada na página. Pode ser substituído localmente usando o atributo _lang_ em qualquer elemento. Esse atributo é literalmente uma amarra e deve ser um dos _MIME names_ preferidos para uma codificação de caracteres como definido pela IANA ([defined by the IANA](https://www.iana.org/assignments/character-sets)). Embora o padrão não solicite uma codificação específica, ele dá algumas sugestões: @@ -75,16 +75,17 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut - Autores não devem usar CESU-8, UTF-7, BOCU-1 e SCSU, also falling in that category and not intended to be used on the web. Cross-scripting attacks with some of these encodings have been documented. - Autores não devem usar UTF-32 pois nem todos algorítimos de codificação HTML5 conseguem distingui-lo do UTF-16. - > **Note:** **Notas:**- O conjunto de caracteres declarado deve corresponder ao da página. Não há motivo válido para declarar um conjunto de caracteres imprecisos. + > **Nota:** > + > - O conjunto de caracteres declarado deve corresponder ao da página. Não há motivo válido para declarar um conjunto de caracteres imprecisos. > - Esse elemento {{HTMLElement ("meta")}} deve estar dentro do elemento {{HTMLElement ("head")}} e dentro dos primeiros 1024 bytes da página, pois alguns navegadores só olham para esses primeiros bytes antes de escolher um caractere definido para a página. > - Esse elemento {{HTMLElement ("meta")}} é apenas uma parte do algoritmo para determinar o conjunto de caracteres de uma página que os navegadores aplicam. O cabeçalho HTTP Content-Type e quaisquer elementos da BOM têm precedência sobre esse elemento. > - É uma boa prática, e altamente recomendável, definir o conjunto de caracteres usando este atributo. Se nenhum conjunto de caracteres estiver definido para uma página, várias técnicas de scripts cruzados poderão prejudicar o usuário da página, como a técnica de cross-scripting de fallback UTF-7. Sempre definindo esta meta irá proteger contra esses riscos. > - Esse elemento {{HTMLElement("meta")}} é um sinônimo para o pre-HTML5 `<meta http-equiv="Content-Type" content="text/html; charset=IANAcharset">` onde o atributo `IANAcharset` corresponde ao valor equivalente de [`charset`](/pt-BR/docs/Web/HTML/Element/meta#charset). Essa sintaxe ainda é permitida, embora obsoleta e não mais recomendada. -- {{htmlattrdef("content")}} +- `content` - : Esse atributo fornece o valor associado ao atributo [`http-equiv`](/pt-BR/docs/Web/HTML/Element/meta#http-equiv) ou [`name`](/pt-BR/docs/Web/HTML/Element/meta#name), dependendo do contexto. -- {{htmlattrdef("http-equiv")}} +- `http-equiv` - : Este enumerado atributo define a pragma isso pode alterar o comportamento de servers e user-agents. o valor do pragma é definido usando [`content`](/pt-BR/docs/Web/HTML/Element/meta#content) e pode ser um dos seguintes: @@ -92,7 +93,7 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut - : este pragma define a linguagem default da página - > **Note:** não use este pragma, ele esta obsoleto. use o atributo global `lang` no {{HTMLElement("html")}} ao invés deste. + > **Nota:** não use este pragma, ele esta obsoleto. use o atributo global `lang` no {{HTMLElement("html")}} ao invés deste. - `"Content-Security-Policy"` - : Este valor permite os administradores do web site definam uma [política de conteúdo](/pt-BR/docs/Web/Security/CSP/CSP_policy_directives) para a página atual. Com algumas exceções, politicas de conteúdo envolvem especificar origens de servidores e endpoints de scripts permitidos, isso ajuda na defesa de cross-server scripting attacks. @@ -100,8 +101,9 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut - : Esse atributo define o [MIME type](/pt-BR/docs/MIME) e o conjunto de caracteres do documento. Isso segue a mesma sintaxe como o HTTP `content-type` entity-header field, mas isto esta dentro de um elemento HTML, a maioria dos valores não é possível. Sendo assim a sintaxe válida para este conteúdo é a literal string '`text/html`' eventualmente seguido por estes caracteres com a seguinte sintaxe: '`; charset=`_`IANAcharset`_' onde `IANAcharset` é o _MIME preferido nome para um conjunto de caracteres como_ [definido pela IANA.](https://www.iana.org/assignments/character-sets) - > **Note:** **nota de uso:**- Nao use esta pragma ela esta obsoleta. use [`charset`](/pt-BR/docs/Web/HTML/Element/meta#charset) atributo {{HTMLElement("meta")}} element instead. + > **Nota:** > + > - Nao use esta pragma ela esta obsoleta. use [`charset`](/pt-BR/docs/Web/HTML/Element/meta#charset) atributo {{HTMLElement("meta")}} element instead. > - como o {{HTMLElement("meta")}} pode nao ser usado para mudar o tipo de documento no XHTML, ou em um documento de HTML5 seguindo uma syntax de XHTML, nunca marque MIME type para um XHTML MIME type desta forma. isso sera incoerente. > - somente um documento HTML pode usar o content-type, então a maioria disto é redundante: isso porque esta obsoleto e trocado pelo atributo [`charset`](/pt-BR/docs/Web/HTML/Element/meta#charset). @@ -120,15 +122,16 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut > **Nota:** não use este pragma está obsoleto. Use HTTP header set-cookie instead. -- {{htmlattrdef("name")}} +- `name` - : Este atributo define o nome do document-level metadata. Isso não deve ser marcado se um dos atributos [`itemprop`](/pt-BR/docs/Web/HTML/Element/meta#itemprop), [`http-equiv`](/pt-BR/docs/Web/HTML/Element/meta#http-equiv) ou [`charset`](/pt-BR/docs/Web/HTML/Element/meta#charset) já estiver preparado. este document-level metadata name é associado a um valor, contido pelo atributo [`content`](/pt-BR/docs/Web/HTML/Element/meta#content). os possíveis valores para o elemento name são, com seu valor associado, guardado via [`content`](/pt-BR/docs/Web/HTML/Element/meta#content) attribute: - `application-name`, define o nome da aplicação que esta rodando na página; - > **Nota:**- Browsers podem usar isso para identificar a aplicação. isso é diferente do elemento {{HTMLElement("title")}}, que geralmente constituí no nome da aplicação, mas também contém informações específicas como o nome do documento ou status; + > **Nota:** > + > - Browsers podem usar isso para identificar a aplicação. isso é diferente do elemento {{HTMLElement("title")}}, que geralmente constituí no nome da aplicação, mas também contém informações específicas como o nome do documento ou status; > - Webpages simples não deveriam definir application-name meta. - `author`, definindo, em formato livre, o nome do author do documento; @@ -167,8 +170,9 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut | `noimageindex` | previne esta página de aparecer como referencia de alguma imagem indexada | [Google](https://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=79812) | | `nocache` | sinônimo de `noarchive` | [Bing](https://www.bing.com/toolbox/blogs/webmaster/archive/2008/06/03/robots-exclusion-protocol-joining-together-to-provide-better-documentation.aspx) | - > **Note:** **Notes:**- Somente robôs cooperativos seguirão as regras definidas pelo nome do robô. Não espere manter as colheitadeiras de e-mail à distância com isso. + > **Nota:** > + > - Somente robôs cooperativos seguirão as regras definidas pelo nome do robô. Não espere manter as colheitadeiras de e-mail à distância com isso. > - O robô ainda precisa acessar a página para ler o valor meta. Se você quiser mantê-los sob controle, por exemplo, para evitar o consumo de largura de banda, use um arquivo robots.txt (ou em complemento). > - Se você quiser remover a página de um índice, a alteração do meta para `noindex` funcionará, mas somente quando o robô visitar a página novamente. Verifique se o arquivo robots.txt não está impedindo essas visitas. Alguns mecanismos de busca possuem ferramentas para desenvolvedores, permitindo uma remoção rápida de algumas páginas. > - Alguns valores possíveis são mutuamente exclusivos, como usar `index` e `noindex`, ou `follow` e `nofollow`, ao mesmo tempo. Nestes casos, o comportamento do robô é indefinido e pode variar de um para o outro. Então evite esses casos. @@ -193,16 +197,17 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut | ----------------------------------------------------------------------------- | ------------------------ | --------------------------------------------------- | | {{SpecName('CSS3 Device', '#viewport-meta', '<meta name="viewport">')}} | {{Spec2('CSS3 Device')}} | Non-normatively describes the Viewport META element | - > **Note:** **Notes:**- Embora não seja padronizado, esse atributo é usado por diferentes navegadores móveis, como o Safari Mobile, o Firefox para celular ou o Opera Mobile. + > **Nota:** > + > - Embora não seja padronizado, esse atributo é usado por diferentes navegadores móveis, como o Safari Mobile, o Firefox para celular ou o Opera Mobile. > - Os valores padrão podem mudar de um dispositivo e navegador para outro. > - Para aprender sobre esse pragma no Firefox para celular, veja [este artigo](/pt-BR/docs/Mobile/Viewport_meta_tag). -- {{htmlattrdef("scheme")}} +- `scheme` - : Este atributo define o esquema no qual os metadados são descritos. Um esquema é um contexto que leva às interpretações corretas dos [`content`](/pt-BR/docs/Web/HTML/Element/meta#content) valores, como um formato. - > **Note:** **Notes:** Não use este atributo pois esta obsoleto.Não há substituto para isso, pois não houve uso real para isso. Omitir completamente. + > **Nota:** Não use este atributo pois esta obsoleto.Não há substituto para isso, pois não houve uso real para isso. Omitir completamente. ## Notes @@ -226,12 +231,7 @@ Dependendo do conjunto escolhido, o tipo de metadata pode ser uma das seguintes: ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------- | -| {{SpecName('Referrer Policy', '#referrer-policy-delivery-meta', '<meta name="referrer">')}} | {{Spec2('Referrer Policy')}} | Define valores e semantica `<meta name="referrer">`. | -| {{SpecName('HTML WHATWG', 'semantics.html#the-meta-element', '<meta>')}} | {{Spec2('HTML WHATWG')}} | Adiciona o atributo `itemprop` | -| {{SpecName('HTML5 W3C', 'document-metadata.html#the-meta-element', '<meta>')}} | {{Spec2('HTML5 W3C')}} | Adiciona o atributo `charset` | -| {{SpecName('HTML4.01', 'struct/global.html#h-7.4.4.2', '<meta>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/noscript/index.md b/files/pt-br/web/html/element/noscript/index.md index 2348947396463e..704e3001437575 100644 --- a/files/pt-br/web/html/element/noscript/index.md +++ b/files/pt-br/web/html/element/noscript/index.md @@ -43,11 +43,7 @@ Rocks! ## Especificações -| Specification | Status | Comment | -| ---------------------------------------------------------------------------------------- | ------------------------ | ------- | -| {{SpecName('HTML WHATWG', 'scripting-1.html#the-noscript-element', '<noscript>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'scripting-1.html#the-noscript-element', '<noscript>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'interact/scripts.html#h-18.3.1', '<noscript>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/ol/index.md b/files/pt-br/web/html/element/ol/index.md index 3a782bdbbe338d..f685861848474e 100644 --- a/files/pt-br/web/html/element/ol/index.md +++ b/files/pt-br/web/html/element/ol/index.md @@ -21,21 +21,21 @@ Não há limitação para a profundidade e a imbricação das listas definidas c Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes). -- {{htmlattrdef("compact")}} {{Deprecated_inline}} +- `compact` {{Deprecated_inline}} - : Este atributo boleano sugere que a lista deve ser renderizada em um estilo compacto. A interpretação deste atributo depende do perfil de navegação (_user agent_) e não funciona em todos os navegadores. > **Nota:** Não utilize este atributo, pois ele se tornou obsoleto. O elemento {{HTMLElement("ol")}} deve ser estilizado usando [CSS](/pt-BR/docs/CSS). Para dar um efeito semelhante ao do atributo compacto, a propriedade [CSS](/pt-BR/docs/CSS) {{cssxref("line-height")}} pode ser utilizada com o valor de 80%. -- {{htmlattrdef("reversed")}} +- `reversed` - : Este atributo boleano especifica que as partes desta lista serão especificadas em ordem reversa, isto é, a menos importante será listada primeiro. -- {{htmlattrdef("start")}} +- `start` - : Este atributo inteiro especifica o valor inicial para a numeração dos itens da lista. Embora o tipo de ordenação dos elementos possa ser com algarismos romanos, tal como XXXI, ou letras, o valor inicial sempre é representado como um inteiro. Para iniciar a contagem a partir da letra "C", utilize \<ol start="3">. > **Nota:** Este atributo, obsoleto na HTML4, foi reintroduzido na HTML5. -- {{htmlattrdef("type")}} +- `type` - : Indica o tipo de numeração: @@ -139,11 +139,7 @@ A saída HTML acima será: ## Especificações -| Especificação | Situação | Observação | -| ------------------------------------------------------------------------------------- | ------------------------ | ---------- | -| {{SpecName('HTML WHATWG', 'grouping-content.html#the-ol-element', '<ol>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', "grouping-content.html#the-ol-element", "HTMLOListElement")}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '<ol>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Compatibilidede em navegadores diff --git a/files/pt-br/web/html/element/optgroup/index.md b/files/pt-br/web/html/element/optgroup/index.md index 0507cc023cc772..3f6a2e302aa3ee 100644 --- a/files/pt-br/web/html/element/optgroup/index.md +++ b/files/pt-br/web/html/element/optgroup/index.md @@ -19,9 +19,9 @@ Em um Formulário Web, o elemento HTML `<optgroup>` cria um agrupamento de opç Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes). -- {{htmlattrdef("disabled")}} +- `disabled` - : Se este atributo booleano for definido, nenhum dos itens neste **optgroup** poderá ser selecionado. Muitos navegadores marcam como cinza e não permitem que o elemento receba nenhum evento de navegação, como cliques do mouse ou foco. -- {{htmlattrdef("label")}} +- `label` - : É o nome do optgroup, é o que os navegadores irão exibir como rótulo. Este atributo é obrigatório se o elemento for usado. ## Exemplo @@ -49,11 +49,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes). ## Especificações -| Especificação | Status | Comentário | -| ----------------------------------------------------------------------------------------------- | ------------------------ | ---------- | -| {{SpecName('HTML WHATWG', 'the-button-element.html#the-optgroup-element', '<optgroup>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'forms.html#the-optgroup-element', '<optgroup>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<optgroup>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/option/index.md b/files/pt-br/web/html/element/option/index.md index 6414db935ad999..778e9fa3003717 100644 --- a/files/pt-br/web/html/element/option/index.md +++ b/files/pt-br/web/html/element/option/index.md @@ -17,17 +17,17 @@ Em um formulário Web, o **elemento HTML** `<option>` é usado para criar um con Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Atributos_globais). -- {{htmlattrdef("disabled")}} +- `disabled` - : Se este atributo booleano estiver definido, esta opção não é selecionável. Frequentemente navegadores acinzentam este tipo de controle, e ele deixa de receber quaisquer eventos de navegação, como cliques do mouse ou eventos relacionados a foco. Se este atributo não estiver definido, o elemento ainda pode ser desabilitado se um de seus ancestrais é um elemento {{HTMLElement("optgroup")}} desabilitado. -- {{htmlattrdef("label")}} +- `label` - : Este atributo é o texto para o rótulo indicando o significado da opção. Se o atributo **label** não estiver definido, seu valor é o conteúdo de texto do elemento. > **Note:** O atributo **label** é projetado para conter um rótulo curto tipicamente usado num menu hierárquico. O atributo **value** descreve descreve um rótulo maior, designado para ser usado perto de um botão de escolha, por exemplo. -- {{htmlattrdef("selected")}} +- `selected` - : Se presente, este atributo booleano indica que a opção está selecionada inicialmente. Se o elemento `<option>` for descendente de um elemento {{HTMLElement("select")}} cujo atributo [`multiple`](/pt-BR/docs/Web/HTML/Element/select#multiple) não está definido, apenas um único `<option>` deste elemento {{HTMLElement("select")}} pode ter o atributo **selected**. -- {{htmlattrdef("value")}} +- `value` - : O conteúdo textual deste atributo representa o rótulo que explica a opção. Se ele não estiver definido, seu valor padrão é o texto contido no elemento. @@ -39,11 +39,7 @@ Veja os exemplos do elemento {{HTMLElement("select")}}. ## Especificações -| Especificação | Estado | Comentário | -| ------------------------------------------------------------------------------------------- | ------------------------ | ---------- | -| {{SpecName('HTML WHATWG', 'the-button-element.html#the-option-element', '<option>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'forms.html#the-option-element', '<option>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<option>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/p/index.md b/files/pt-br/web/html/element/p/index.md index 3eb2016490362e..f2a4c7b36cbdc9 100644 --- a/files/pt-br/web/html/element/p/index.md +++ b/files/pt-br/web/html/element/p/index.md @@ -123,11 +123,7 @@ p { ## Especificações -| Specification | Status | Comment | -| ----------------------------------------------------------------------------- | ------------------------ | -------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', 'semantics.html#the-p-element', '<p>')}} | {{Spec2('HTML WHATWG')}} | Nenhuma alteração desde a última w3c {{SpecName("HTML5 W3C")}} | -| {{SpecName('HTML5 W3C', 'grouping-content.html#the-p-element', '<p>')}} | {{Spec2('HTML5 W3C')}} | Atributo `align` está obsoleto | -| {{SpecName('HTML4.01', 'struct/text.html#h-9.3.1', '<p>')}} | {{Spec2('HTML4.01')}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/picture/index.md b/files/pt-br/web/html/element/picture/index.md index 46d4213799096d..c94e7b0a2c8828 100644 --- a/files/pt-br/web/html/element/picture/index.md +++ b/files/pt-br/web/html/element/picture/index.md @@ -85,9 +85,7 @@ O atributo `type` lhe permite especificar um tipo MIME para o(s) recurso(s) forn ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------------------------------ | ------------------------ | ------------------ | -| {{SpecName('HTML WHATWG', 'embedded-content.html#the-picture-element','<picture>')}} | {{Spec2('HTML WHATWG')}} | Initial definition | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/pre/index.md b/files/pt-br/web/html/element/pre/index.md index 391a23afd99284..0e7aa706148a94 100644 --- a/files/pt-br/web/html/element/pre/index.md +++ b/files/pt-br/web/html/element/pre/index.md @@ -20,11 +20,11 @@ Esse elemento apenas inclui atributos globais. This element only includes the [global attributes](/pt-BR/docs/HTML/Global_attributes). -- {{htmlattrdef("cols")}} {{non-standard_inline}} +- `cols` {{non-standard_inline}} - : Contains the _preferred_ count of characters that a line should have. It was a non-standard synonym of [`width`](/pt-BR/docs/Web/HTML/Element/pre#width). To achieve such an effect, use CSS styling instead. -- {{htmlattrdef("width")}} +- `width` - : Contains the _preferred_ count of characters that a line should have. Though technically still implemented, this attribute has no visual effect; to achieve such an effect, use CSS styling instead. -- {{htmlattrdef("wrap")}} {{non-standard_inline}} +- `wrap` {{non-standard_inline}} - : Is a _hint_ indicating how the overflow must happen. In modern browser this hint is ignored and no visual effect results in its present; to achieve such an effect, use CSS styling instead. ## Exemplos @@ -48,11 +48,7 @@ body { ## Especificações -| Especificação | Status | Comentário | -| ----------------------------------------------------------------------------------- | ------------------------ | ----------------------------------------------------------- | -| {{SpecName('HTML WHATWG', 'grouping-content.html#the-pre-element', '<pre>')}} | {{Spec2('HTML WHATWG')}} | Nenhuma mudança significante na {{SpecName("HTML WHATWG")}} | -| {{SpecName('HTML5 W3C', 'grouping-content.html#the-pre-element', '<pre>')}} | {{Spec2('HTML5 W3C')}} | Nenhuma mudança significante na {{SpecName("HTML4.01")}} | -| {{SpecName('HTML4.01', 'struct/text.html#h-9.3.4', '<dl>')}} | {{Spec2('HTML4.01')}} | `Atributto cols` obsoleto | +{{Specifications}} ## Compatibilidade de navegador diff --git a/files/pt-br/web/html/element/q/index.md b/files/pt-br/web/html/element/q/index.md index d7c51c54cb99ae..44d216b7ab2130 100644 --- a/files/pt-br/web/html/element/q/index.md +++ b/files/pt-br/web/html/element/q/index.md @@ -58,7 +58,7 @@ slug: Web/HTML/Element/q Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes). -- {{htmlattrdef("cite")}} +- `cite` - : O valor deste atributo é uma URL que designa uma fonte ou mensagem para a informação citada. A intenção deste atributo é indicar a informação e explicar o contexto ou referência para a citação. ## Exemplo @@ -78,11 +78,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes). ## Especificações -| Especificação | Status | Comentário | -| --------------------------------------------------------------------------------- | ------------------------ | ----------------- | -| {{SpecName('HTML WHATWG', 'semantics.html#the-q-element', '<q>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-q-element', '<q>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '<q>')}} | {{Spec2('HTML4.01')}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/ruby/index.md b/files/pt-br/web/html/element/ruby/index.md index 8da16d1450c67e..4fea092c06119c 100644 --- a/files/pt-br/web/html/element/ruby/index.md +++ b/files/pt-br/web/html/element/ruby/index.md @@ -35,10 +35,7 @@ Esse elemento somente inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_ ## Especificações -| Especificação | Status | Comentário | -| ----------------------------------------------------------------------------------------- | ------------------------ | ---------- | -| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-ruby-element', '<ruby>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-ruby-element', '<ruby>')}} | {{Spec2('HTML5 W3C')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/s/index.md b/files/pt-br/web/html/element/s/index.md index 1dfb6472451586..6aa3f8d03c87fe 100644 --- a/files/pt-br/web/html/element/s/index.md +++ b/files/pt-br/web/html/element/s/index.md @@ -110,10 +110,7 @@ Algumas pessoas que usam leitores de tela que desativam deliberadamente o anúnc ## Especificações -| Especificação | Estado | Comentário | -| ------------------------------------------------------------------------------- | ------------------------ | ---------- | -| {{SpecName('HTML WHATWG','semantics.html#the-s-element','s element')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C','text-level-semantics.html#the-s-element','s element')}} | {{Spec2('HTML5 W3C')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/script/index.md b/files/pt-br/web/html/element/script/index.md index 565b30c7dd5f2a..20462439c4c384 100644 --- a/files/pt-br/web/html/element/script/index.md +++ b/files/pt-br/web/html/element/script/index.md @@ -60,7 +60,7 @@ O **elemento HTML `<script>`** é usado para incluir ou referenciar um script ex Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attributes). -- {{htmlattrdef("async")}} +- `async` - : Um atributo booleano indicando que o navegador deve, se possível, executar o script assíncronamente. @@ -70,9 +70,9 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut Veja [Browser compatibility](#browser_compatibility) para notas no suporte do navegador. Veja também [Scripts assíncronos para asm.js](/pt-BR/docs/Games/Techniques/Async_scripts). -- {{htmlattrdef("crossorigin")}} +- `crossorigin` - : Elementos `script` passam o mínimo de informação para {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}} em scripts que não passem na checagem do [CORS](/pt-BR/docs/HTTP_access_control). Para permitir logs de erro para sites que usam domínios diferentes para arquivos estáticos, use esse atributo. Veja [CORS settings attributes](/pt-BR/docs/Web/HTML/CORS_settings_attributes) para uma explicação mais detalhada dos argumentos válidos. -- {{htmlattrdef("defer")}} +- `defer` - : Esse atributo Boleano é usado para indicar ao navegador que o script deve ser executado depois que o documento tenha sido parseado, mas antes de disparar o evento {{event("DOMContentLoaded")}} @@ -82,15 +82,15 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut Para conseguir um efeito similar para scripts inseridos dinamicamente use `async=false`. Scripts com o atributo `defer` vão ser executados na ordem em que aparecem no `document`. -- {{htmlattrdef("integrity")}} +- `integrity` - : Contains inline metadata that a user agent can use to verify that a fetched resource has been delivered free of unexpected manipulation. See [Subresource Integrity](/pt-BR/docs/Web/Security/Subresource_Integrity). -- {{htmlattrdef("nomodule")}} {{experimental_inline}} +- `nomodule` {{experimental_inline}} - : This Boolean attribute is set to indicate that the script should not be executed in browsers that support [ES6 modules](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/) — in effect, this can be used to serve fallback scripts to older browsers that do not support modular JavaScript code. -- {{htmlattrdef("src")}} +- `src` - : This attribute specifies the URI of an external script; this can be used as an alternative to embedding a script directly within a document. If a `script` element has a `src` attribute specified, it should not have a script embedded inside its tags. -- {{htmlattrdef("text")}} +- `text` - : Like the `textContent`attribute, this attribute sets the text content of the element. Unlike the `textContent` attribute, however, this attribute is evaluated as executable code after the node is inserted into the DOM. -- {{htmlattrdef("type")}} +- `type` - : Indicates the type of script represented. The value of this attribute will be in one of the following categories: @@ -104,9 +104,9 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut ### Atributos obsoletos -- {{htmlattrdef("charset")}} {{Deprecated_inline}} +- `charset` {{Deprecated_inline}} - : If present, its value must be an ASCII case-insensitive match for "`utf-8`". Both it's unnecessary to specify the `charset` attribute, because documents must use UTF-8, and the `script` element inherits its character encoding from the document. -- {{htmlattrdef("language")}} {{Deprecated_inline}} +- `language` {{Deprecated_inline}} - : Like the `type` attribute, this attribute identifies the scripting language in use. Unlike the `type` attribute, however, this attribute's possible values were never standardized. The `type` attribute should be used instead. ## Notas diff --git a/files/pt-br/web/html/element/section/index.md b/files/pt-br/web/html/element/section/index.md index 6e60ce02b807fd..f6a257a1fe87a7 100644 --- a/files/pt-br/web/html/element/section/index.md +++ b/files/pt-br/web/html/element/section/index.md @@ -120,11 +120,7 @@ Este elemento inclui apenas os [atributos globais](/pt-BR/docs/Web/HTML/Global_a ## Especificações -| Especificação | Status | Comentários | -| ----------------------------------------------------------------------------------- | ------------------------ | ----------- | -| {{SpecName('HTML WHATWG', 'sections.html#the-section-element', '<section>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5.1', 'sections.html#the-section-element', '<section>')}} | {{Spec2('HTML5.1')}} | | -| {{SpecName('HTML5 W3C', 'sections.html#the-section-element', '<section>')}} | {{Spec2('HTML5 W3C')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/select/index.md b/files/pt-br/web/html/element/select/index.md index fd6658346607f0..85e32007ae34d7 100644 --- a/files/pt-br/web/html/element/select/index.md +++ b/files/pt-br/web/html/element/select/index.md @@ -19,19 +19,19 @@ O elemento HTML _select_ (\<select>) representa um controle que apresenta um men Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Atributos_globais). -- {{htmlattrdef("autofocus")}} +- `autofocus` - : Este atributo permite especificar que um controle de formulário deve ter foco de entrada quando a página é carregada, a não ser que o usuário o substitua, por exemplo digitando em um controle diferente. Somente um elemento de formulário em um documento pode ter o atributo `autofocus`, que é booleano. -- {{htmlattrdef("disabled")}} +- `disabled` - : Este atributo booleano indica que o usuário não pode interagir com o controle. Caso esse atributo não seja especificado, o controle herda a configuração do elemento que o contém, por exemplo o elemento `fieldset`; se não há nenhum elemento que o contém com o atributo `disabled`, então o controle está habilitado. -- {{htmlattrdef("form")}} +- `form` - : O elemento form ao qual o elemento select é associado (algo como "formulário dono" do select). Se este atributo for especificado, seu valor deve ser o ID de um elemento form no mesmo documento. Isso permite que você coloque elementos select em qualquer lugar dentro do documento, e não apenas como descendentes de elementos form. -- {{htmlattrdef("multiple")}} +- `multiple` - : Este atributo booleano indica que várias opções podem ser selecionadas na lista. Se não for especificado, apenas uma opção poderá ser selecionada de cada vez. -- {{htmlattrdef("name")}} +- `name` - : O nome do controle -- {{htmlattrdef("required")}} +- `required` - : Um atributo booleano que indica que uma opção com um valor de string que não esteja vazia deve ser selecionada. -- {{htmlattrdef("size")}} +- `size` - : Se o controle é apresentado como uma list box com scroll, este atributo representa o número de linhas na list box que devem estar visíveis num determinado momento. Os navegadores não são obrigados a apresentar elementos select com uma list box scroll. O valor padrão é 0. > **Note:** **Nota sobre o Firefox:** De acordo com a especificação HTML5, o valor padrão para o size deveria ser 1; no entanto, na prática, notou-se que isso quebrava alguns sites, e nenhum outro navegador faz isso no momento, então a Mozilla escolheu por continuar devolvendo 0 por enquanto no Firefox. @@ -61,11 +61,7 @@ A seguir um exemplo de como simular uma lista de seleção com opções editáve ## Especificações -| Especificação | Estado | Comentários | -| ---------------------------------------------------------------------------- | ---------------------- | ----------- | -| {{SpecName('HTML5 W3C', 'forms.html#the-select-element', '<select>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<select>')}} | {{Spec2('HTML4.01')}} | | -| | | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/span/index.md b/files/pt-br/web/html/element/span/index.md index cce78261127945..1a331b264d6e06 100644 --- a/files/pt-br/web/html/element/span/index.md +++ b/files/pt-br/web/html/element/span/index.md @@ -36,11 +36,7 @@ Some text ## Especificações -| Specification | Status | Comment | -| --------------------------------------------------------------------------------------- | ------------------------ | ------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', 'semantics.html#the-span-element', '<span>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-span-element', '<span>')}} | {{Spec2('HTML5 W3C')}} | A interface com o DOM agora é {{domxref("HTMLSpanElement")}}. | -| {{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '<span>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/strong/index.md b/files/pt-br/web/html/element/strong/index.md index 655164a65919aa..efbd0f99ae01a0 100644 --- a/files/pt-br/web/html/element/strong/index.md +++ b/files/pt-br/web/html/element/strong/index.md @@ -103,11 +103,7 @@ Ao fazer x é **imperativo** que se faça y antes de prosseguir. ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------------- | ------------------------ | ---------- | -| {{SpecName('HTML WHATWG', 'semantics.html#the-strong-element', '<strong>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-strong-element', '<strong>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'struct/text.html#edef-STRONG', '<strong>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Navegadores Compatíveis diff --git a/files/pt-br/web/html/element/style/index.md b/files/pt-br/web/html/element/style/index.md index 7e8702b608fd29..d6de7d0c3f7edd 100644 --- a/files/pt-br/web/html/element/style/index.md +++ b/files/pt-br/web/html/element/style/index.md @@ -69,11 +69,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut ## Especificações -| Specification | Status | Comment | -| ---------------------------------------------------------------------------------- | -------------------------- | ------------------------------------------- | -| {{ SpecName('HTML WHATWG', 'document-metadata.html#the-style-element', 'style') }} | {{ Spec2('HTML WHATWG') }} | No change from {{ SpecName('HTML5 W3C') }}. | -| {{ SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style') }} | {{ Spec2('HTML5 W3C') }} | Added the `scoped` attribute | -| {{ SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style') }} | {{ Spec2('HTML4.01') }} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/template/index.md b/files/pt-br/web/html/element/template/index.md index 0102d2e23955a9..cf1feeebdaaa7a 100644 --- a/files/pt-br/web/html/element/template/index.md +++ b/files/pt-br/web/html/element/template/index.md @@ -148,10 +148,7 @@ table td { ## Especificações -| Especificação | Estado | Comentário | -| --------------------------------------------------------------------------------------- | ------------------------ | ----------------- | -| {{SpecName('HTML WHATWG','/scripting-1.html#the-template-element','template element')}} | {{Spec2('HTML WHATWG')}} | Sem mudanças | -| {{SpecName('HTML5 W3C','/scripting-1.html#the-template-element','template element')}} | {{Spec2('HTML5 W3C')}} | Definição Inicial | +{{Specifications}} ## Compatibilidade de Navegadores diff --git a/files/pt-br/web/html/element/textarea/index.md b/files/pt-br/web/html/element/textarea/index.md index 7051f474a93e11..f148a494e9d859 100644 --- a/files/pt-br/web/html/element/textarea/index.md +++ b/files/pt-br/web/html/element/textarea/index.md @@ -24,7 +24,7 @@ O `<textarea>` O elemento também aceita vários atributos comuns para formar `< Este elemento inclui os atributos globais. -- {{htmlattrdef("autocapitalize")}} {{non-standard_inline}} +- `autocapitalize` {{non-standard_inline}} - : Este é um atributo não padrão suportado pelo WebKit no iOS (portanto, quase todos os navegadores executados no iOS, incluindo Safari, Firefox e Chrome), que controla se e como o valor do texto deve ser automaticamente capitalizado quando é inserido / editado pelo do utilizador. Os valores não preteridos estão disponíveis no iOS 5 e posterior. Os valores possíveis são: @@ -35,7 +35,7 @@ Este elemento inclui os atributos globais. - `on`: {{deprecated_inline()}} Descontinuado desde o iOS 5. - `off`: {{deprecated_inline()}} Descontinuado desde o iOS 5. -- {{htmlattrdef("autocomplete")}} +- `autocomplete` - : Este atributo indica se o valor do controle pode ser preenchido automaticamente pelo navegador. Os valores possíveis são: diff --git a/files/pt-br/web/html/element/tfoot/index.md b/files/pt-br/web/html/element/tfoot/index.md index bd75808f1e90ed..537f7e5bc7c646 100644 --- a/files/pt-br/web/html/element/tfoot/index.md +++ b/files/pt-br/web/html/element/tfoot/index.md @@ -61,7 +61,7 @@ O **`<tfoot>`** é um **elemento HTML** que define um conjunto de linhas as quai Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attributes). -- {{htmlattrdef("align")}} {{Deprecated_inline}} +- `align` {{Deprecated_inline}} - : Estes atributos especificam como será o alinhamento horizontal de cada conteúdo da célula. Os possíveis valores são: @@ -77,7 +77,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut > > - Para obter o mesmo efeito no CSS3, você pode usar os valores [`char`](/pt-BR/docs/Web/HTML/Element/tfoot#char) com o valor de {{cssxref("text-align")}} propriedade {{unimplemented_inline}}. -- {{htmlattrdef("bgcolor")}} {{Non-standard_inline}} +- `bgcolor` {{Non-standard_inline}} - : Este atributo define uma cor de fundo para cada célula da coluna. Cada um dos 6 dígitos define um código hexadecimal no [sRGB](https://www.w3.org/Graphics/Color/sRGB), prefixado pelo '#'. Um desses nomes de cores predefinidos também podem ser usado: @@ -93,19 +93,19 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut > **Note:** Não use este atributo, como não é mais padrão ele não foi implementado em algumas versões do Microsoft Internet Explorer: o elemento {{HTMLElement("tfoot")}} pode ser estilizando com [CSS](/pt-BR/docs/Web/CSS). Para conseguir simular efeitos do atributo **bgcolor** use a propriedade {{cssxref("background-color")}} do [CSS](/pt-BR/docs/Web/CSS) , nos elementos {{HTMLElement("td")}} ou {{HTMLElement("th")}}. -- {{htmlattrdef("char")}} {{Deprecated_inline}} +- `char` {{Deprecated_inline}} - : O elemento é usado para alinhar as células em uma columa. Valores típicos para isso inclui o periódico (.) quando se alinha valores monetários. Se [`align`](/pt-BR/docs/Web/HTML/Element/tfoot#align) não é definido para `char`, este atributo é ignorado > **Nota:** Não use esté atributo, ele é obsoleto (e não é mais suportado) desde da última versão padrão. Em vez disso use [`char`](/pt-BR/docs/Web/HTML/Element/tfoot#char) no CSS3, você pode usar o atributo [`char`](/pt-BR/docs/Web/HTML/Element/tfoot#char) com a propriedade {{cssxref("text-align")}}. -- {{htmlattrdef("charoff")}} {{Deprecated_inline}} +- `charoff` {{Deprecated_inline}} - : O atributo é usado para indicar um número de caracteres para compensar os dados da coluna dos caracteres de alinhamento especificados pelo atributo **char**. > **Nota:** Não use esse atributo o mesmo está obsoleto (e não é mais suportado) na última versão padrão. -- {{htmlattrdef("valign")}} {{Deprecated_inline}} +- `valign` {{Deprecated_inline}} - : O atributo específico para o alinhamento do texto dentro de cada linha da célula do cabeçalho de uma tabela. Possíveis valores para esse atributo são: @@ -122,10 +122,7 @@ Por favor veja a página {{HTMLElement("table")}} para exemplos sobre `<tfoot>`. ## Especificações -| Especificações | Status | Comentários | -| ------------------------------------------------------------------------------- | ------------------------ | ----------- | -| {{SpecName('HTML WHATWG','tables.html#the-tfoot-element','tfoot element')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C','tabular-data.html#the-tfoot-element','tfoot element')}} | {{Spec2('HTML5 W3C')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/th/index.md b/files/pt-br/web/html/element/th/index.md index a9db747415de28..cfd2c3da7b8773 100644 --- a/files/pt-br/web/html/element/th/index.md +++ b/files/pt-br/web/html/element/th/index.md @@ -56,15 +56,15 @@ O **elemento HTML `<th>`** define uma célula cabeçalho do grupo de células de Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attributes). -- {{htmlattrdef("abbr")}} +- `abbr` - : Este atributo contém uma breve descrição do conteúdo da célula. Alguns usuários-agentes, como leitores, pode apresentar essa descrição antes do próprio conteúdo. -- {{htmlattrdef("colspan")}} +- `colspan` - : Este atributo contém um valor inteiro não negativo que indica quantas colunas a célula ocupará. Valor padrão `1`. Valores acima de 1000 são considerados incorretos e serão modificados para o valor padrão `1`. -- {{htmlattrdef("headers")}} +- `headers` - : Este atributo contém uma lista de palavras separadas por espaço, cada uma correspondendo ao atributo **id** dos elementos {{HTMLElement("th")}} que se aplicam a este elemento. -- {{htmlattrdef("rowspan")}} +- `rowspan` - : Este atributo contém um valor inteiro não negativo que indica quantas linhas a célula estende. Valor padrão `1`. Se seu valor é definido como `0`, ele se estende até o final da tabela ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, mesmo que implicitamente definido), que a célula pertence. Não é possível colocar valores superiores a 65534. -- {{htmlattrdef("scope")}} +- `scope` - : Este atributo define as células a que o cabeçalho (definido no elemento {{HTMLElement("th")}}) se relaciona. Possíveis valores: @@ -79,7 +79,7 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut ### Atributos depreciados -- {{htmlattrdef("align")}} +- `align` - : Este atributo especifica como o alinhamento horizontal do conteúdo da célula será tratado. @@ -97,13 +97,13 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut > > - Para alcançar o mesmo efeito que os valor `char`, atribue a {{cssxref("text-align")}} o mesmo valor que você usaria para [`char`](/pt-BR/docs/Web/HTML/Element/th#char). {{unimplemented_inline}} no CSS3. -- {{htmlattrdef("axis")}} +- `axis` - : Este atributo contém uma lista de palavras separadas por espaço. Cada palavra é o `id` de um grupo de células às quais este cabeçalho se aplica. > **Note:** Não use esse atributo, pois ele está obsoleto no padrão mais recente: use o atributo [`scope`](/pt-BR/docs/Web/HTML/Element/th#scope). -- {{htmlattrdef("bgcolor")}} {{Non-standard_inline}} +- `bgcolor` {{Non-standard_inline}} - : Esse atributo define a cor de fundo de cada célula na coluna. Ele consiste de 6 digitos hexadecimais definidos pelo [sRGB](https://www.w3.org/Graphics/Color/sRGB) com o prefixo '#. Nesse atributo pode ser usado dezesseis cores predefinidas: @@ -119,25 +119,25 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut > **Note:** Não use esse atributo como padrão pois não é implementado em algumas versões do Microsoft Internet Explorer: O elemento {{HTMLElement("th")}} deve ser estilizado usando [CSS](/pt-BR/docs/Web/CSS). Para criar um efeito semelhante, use a propriedade {{cssxref("background-color")}} do [CSS](/pt-BR/docs/Web/CSS). -- {{htmlattrdef("char")}} +- `char` - : O conteúdo da célula está alinhado a um caractere. Os valores típicos incluem um ponto (.) para alinhar números ou valores monetários. Se [`align`](/pt-BR/docs/Web/HTML/Element/th#align) não está definido no `char`, o atributo é ignorado. > **Note:** Não use esse atributo, pois ele está obsoleto no padrão mais recente. Para obter o mesmo efeito, você pode especificar o caractere como o primeiro valor da propriedade {{cssxref("text-align")}}, {{unimplemented_inline}} no CSS3. -- {{htmlattrdef("charoff")}} +- `charoff` - : Este atributo é usado para mudar os dados da coluna para a direita do caractere especificado pelo atributo **char**. Seu valor especifica o comprimento desse deslocamento. > **Note:**Não use esse atributo, pois ele está obsoleto no padrão mais recente. -- {{htmlattrdef("height")}} {{Deprecated_inline}} +- `height` {{Deprecated_inline}} - : Esse atributo é usado para definir uma altura recomendada da célula. > **Note:**Não use esse atributo, pois ele está obsoleto no padrão mais recente: use a propriedade CSS {{cssxref("height")}}. -- {{htmlattrdef("valign")}} +- `valign` - : Esse atributo especifica como o texto é alinhado verticalmente na célula. @@ -150,7 +150,7 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut > **Note:** Não use esse atributo, pois ele está obsoleto no padrão mais recente: use a propriedade CSS {{cssxref("vertical-align")}}. -- {{htmlattrdef("width")}} {{Deprecated_inline}} +- `width` {{Deprecated_inline}} - : Este atributo é usado para definir uma largura de célula recomendada. Espaço adicional pode ser adicionado com as propriedades {{domxref("HTMLTableElement.cellSpacing", "cellspacing")}} e {{domxref("HTMLTableElement.cellPadding", "cellpadding")}}, e a largura do elemento {{HTMLElement("col")}} pode criar largura extra. Mas, se a largura de uma coluna for muito estreita para mostrar uma célula específica corretamente, ela será ampliada quando exibida. @@ -162,10 +162,7 @@ Veja {{HTMLElement("table")}} para mais elementos `<th>`. ## Especificações -| Especificações | Estados | Comentário | -| ------------------------------------------------------------------------- | ------------------------ | ---------- | -| {{SpecName('HTML WHATWG','tables.html#the-th-element','th element')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C','tabular-data.html#the-th-element','th element')}} | {{Spec2('HTML5 W3C')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/time/index.md b/files/pt-br/web/html/element/time/index.md index 63cb2ae625bc6f..426c4bbf9d7b73 100644 --- a/files/pt-br/web/html/element/time/index.md +++ b/files/pt-br/web/html/element/time/index.md @@ -26,9 +26,9 @@ Este elemento é destinado a apresentar datas e horas no dispositivo em um forma Como todo outro elemento HTML, este elemento suporta os [atributos globais](/pt-BR/docs/HTML/Global_attributes). -- {{htmlattrdef("datetime")}} +- `datetime` - : Esse atributo indica a hora e a data do elemento e deve ser uma data válida com uma string de tempo opcional. Se o valor não puder ser analisado como uma data com uma string de tempo opcional, o elemento não possui um timestamp associado. -- {{htmlattrdef("pubdate")}} +- `pubdate` - : (This feature is still being discussed by the WHATWG and the W3C HTML5 Working Group.) This Boolean attribute specifies that the date and time given by the element is the publication date of a document. The document it applies to is either the nearest ancestor article element or the document as a whole (if there is no ancestor [article](/pt-BR/docs/HTML/Element/article) element). If true, the `time` element must have a corresponding date. Additionally, each `time` element indicating a publication date must be the only `time` element that does so for that document. ## DOM interface diff --git a/files/pt-br/web/html/element/title/index.md b/files/pt-br/web/html/element/title/index.md index c0c41ee2bab179..e9d65d4027a5fd 100644 --- a/files/pt-br/web/html/element/title/index.md +++ b/files/pt-br/web/html/element/title/index.md @@ -50,11 +50,7 @@ Para ajudar o usuário, atualize o valor do `title` para refletir mudanças sign ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------------------------- | ------------------------ | ---------- | -| {{SpecName('HTML WHATWG', 'semantics.html#the-title-element', '<title>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'document-metadata.html#the-title-element', '<title>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'struct/global.html#h-7.4.2', '<title>')}} | {{Spec2('HTML4.01')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/element/track/index.md b/files/pt-br/web/html/element/track/index.md index bad21b1cc139a1..13c899e8b67eb8 100644 --- a/files/pt-br/web/html/element/track/index.md +++ b/files/pt-br/web/html/element/track/index.md @@ -50,9 +50,9 @@ O **elemento HTML `<track>` **é usado como filho dos elementos de mídia{{HTMLE Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes). -- {{htmlattrdef("default")}} +- `default` - : This attribute indicates that the track should be enabled unless the user's preferences indicate that another track is more appropriate. This may only be used on one `track` element per media element. -- {{htmlattrdef("kind")}} +- `kind` - : How the text track is meant to be used. If omitted the default kind is `subtitles`. If the attribute is not present, it will use the `subtitles`. If the attribute contains an invalid value, it will use `metadata`. (Versions of Chrome earlier than 52 treated an invalid value as `subtitles`.) The following keywords are allowed: @@ -80,11 +80,11 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes). - Tracks used by scripts. Not visible to the user. -- {{htmlattrdef("label")}} +- `label` - : A user-readable title of the text track which is used by the browser when listing available text tracks. -- {{htmlattrdef("src")}} +- `src` - : Address of the track (`.vtt` file). Must be a valid URL. This attribute must be specified and its URL value must have the same origin as the document — unless the {{HTMLElement("audio")}} or {{HTMLElement("video")}} parent element of the `track` element has a [`crossorigin`](/pt-BR/docs/Web/HTML/CORS_settings_attributes) attribute. -- {{htmlattrdef("srclang")}} +- `srclang` - : Language of the track text data. It must be a valid [BCP 47](https://r12a.github.io/app-subtags/) language tag. If the `kind` attribute is set to `subtitles`, then `srclang` must be defined. ## Usage notes diff --git a/files/pt-br/web/html/global_attributes/accesskey/index.md b/files/pt-br/web/html/global_attributes/accesskey/index.md index 67acb1ebd16520..d47790a61bb189 100644 --- a/files/pt-br/web/html/global_attributes/accesskey/index.md +++ b/files/pt-br/web/html/global_attributes/accesskey/index.md @@ -106,13 +106,7 @@ Devido a esses problemas, geralmente não é aconselhável usar o `accesskey`s p ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------ | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}} | {{Spec2('HTML5.2')}} | Comportamento mais realista descrito para o que é implementado na realidade. | -| {{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}} | {{Spec2('HTML WHATWG')}} | Nenhuma alteração das últimas especificações do W3C {{SpecName('HTML5.1')}} . | -| {{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}} | {{Spec2('HTML5.1')}} | Nenhuma alteração em {{SpecName('HTML5 W3C')}}. | -| {{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}} | {{Spec2('HTML5 W3C')}} | A partir da {{SpecName('HTML4.01')}}, vários caracteres podem ser definidios como teclas de atalho. Além disso, pode ser definido em qualquer elemento. | -| {{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}} | {{Spec2('HTML4.01')}} | Suportado apenas em {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} e {{ HTMLElement("textarea") }} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/global_attributes/autocapitalize/index.md b/files/pt-br/web/html/global_attributes/autocapitalize/index.md index ab41dc7efad691..b9cbd7c7df44bb 100644 --- a/files/pt-br/web/html/global_attributes/autocapitalize/index.md +++ b/files/pt-br/web/html/global_attributes/autocapitalize/index.md @@ -18,9 +18,7 @@ O atributo `autocapitalize` nunca ativa a autocapitalização para um elemento { ## Especificações -| Especificação | Estado | Comentário | -| ------------------------------------------------------------------------------------ | ------------------------ | ---------- | -| {{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}} | {{Spec2('HTML WHATWG')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/global_attributes/class/index.md b/files/pt-br/web/html/global_attributes/class/index.md index 5315a1841e166b..23e0986d32f5d1 100644 --- a/files/pt-br/web/html/global_attributes/class/index.md +++ b/files/pt-br/web/html/global_attributes/class/index.md @@ -11,12 +11,7 @@ Apesar da especificação não impor requesitos sobre os nomes de classes, é co ## Especificações -| Especificação | Status | Comentário | -| --------------------------------------------------------------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', "elements.html#classes", "class")}} | {{Spec2('HTML WHATWG')}} | Nenhuma mudança desde o mais recente snapshot, {{SpecName('HTML5.1')}} | -| {{SpecName('HTML5.1', "elements.html#classes", "class")}} | {{Spec2('HTML5.1')}} | Snapshot de {{SpecName('HTML WHATWG')}}, nenhuma mudança desde {{SpecName('HTML5 W3C')}} | -| {{SpecName('HTML5 W3C', "elements.html#classes", "class")}} | {{Spec2('HTML5 W3C')}} | Snapshot de {{SpecName('HTML WHATWG')}}. Apartir de {{SpecName('HTML4.01')}}, `class` é um atributo global verdadeiro. | -| {{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}} | {{Spec2('HTML4.01')}} | Suportado por todos os elementos menos {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, e {{HTMLElement("title")}}. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/global_attributes/contenteditable/index.md b/files/pt-br/web/html/global_attributes/contenteditable/index.md index de6e5e761d823d..bea9534e937f40 100644 --- a/files/pt-br/web/html/global_attributes/contenteditable/index.md +++ b/files/pt-br/web/html/global_attributes/contenteditable/index.md @@ -24,12 +24,7 @@ Você pode definir a cor usada para desenhar a inserção de texto {{Glossary("c ## Especificações -| Especificação | Status | Comentário | -| --------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | ------------------------------------------------------------------------------------- | -| {{SpecName("HTML WHATWG", "editing.html#attr-contenteditable", "contenteditable")}} | {{Spec2("HTML WHATWG")}} | Nenhuma mudança na última instância, {{SpecName("HTML5.2")}} | -| {{SpecName("HTML5.2", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}} | {{Spec2("HTML5.2")}} | Instância de {{SpecName("HTML WHATWG")}}, sem mudanças para {{SpecName("HTML5.1")}} | -| {{SpecName("HTML5.1", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}} | {{Spec2("HTML5.1")}} | Instância de {{SpecName("HTML WHATWG")}}, sem mudanças para {{SpecName("HTML5 W3C")}} | -| {{SpecName("HTML5 W3C", "editing.html#attr-contenteditable", "contenteditable")}} | {{Spec2("HTML5 W3C")}} | Instância de {{SpecName("HTML WHATWG")}}, definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/global_attributes/data-_star_/index.md b/files/pt-br/web/html/global_attributes/data-_star_/index.md index a2e7b5d8ca375c..4f88108c75503e 100644 --- a/files/pt-br/web/html/global_attributes/data-_star_/index.md +++ b/files/pt-br/web/html/global_attributes/data-_star_/index.md @@ -30,11 +30,7 @@ Para adicionar atributos **data-\*** , mesmo os elementos HTML mais comuns podem ## Especificações -| Specification | Status | Comment | -| -------------------------------------------------------------------------------------------------------------- | ------------------------ | --------------------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}} | {{Spec2('HTML WHATWG')}} | No change from latest snapshot, {{SpecName('HTML5.1')}} | -| {{SpecName('HTML5.1', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}} | {{Spec2('HTML5.1')}} | Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}} | -| {{SpecName('HTML5 W3C', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}} | {{Spec2('HTML5 W3C')}} | Snapshot of {{SpecName('HTML WHATWG')}}, initial definition. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/global_attributes/hidden/index.md b/files/pt-br/web/html/global_attributes/hidden/index.md index 2abca93a2decc8..9789b7b714077a 100644 --- a/files/pt-br/web/html/global_attributes/hidden/index.md +++ b/files/pt-br/web/html/global_attributes/hidden/index.md @@ -21,11 +21,7 @@ Similarmente, um elemento canvas com atributo `hidden` poderia ser usado como bu ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------------------ | ------------------------ | -------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}} | {{Spec2('HTML WHATWG')}} | Sem mudanças desde o último snapshot, {{SpecName('HTML5.1')}} | -| {{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}} | {{Spec2('HTML WHATWG')}} | Define o processamento padrão sugerido do atributo hidden usando CSS | -| {{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}} | {{Spec2('HTML5.1')}} | Definição inicial do snapshot de {{SpecName('HTML WHATWG')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/global_attributes/id/index.md b/files/pt-br/web/html/global_attributes/id/index.md index 2f70f222ffeef4..ad922d4bd28933 100644 --- a/files/pt-br/web/html/global_attributes/id/index.md +++ b/files/pt-br/web/html/global_attributes/id/index.md @@ -13,12 +13,7 @@ O valor deste atributo não deve conter lacunas (espaços, tabulações etc.). N ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}} | {{Spec2('HTML WHATWG')}} | Nenhuma mudança desde o mais recente snapshot, {{SpecName('HTML5.1')}} | -| {{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}} | {{Spec2('HTML5.1')}} | Snapshot de {{SpecName('HTML WHATWG')}}, nenhuma mudança desde {{SpecName('HTML5 W3C')}} | -| {{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}} | {{Spec2('HTML5 W3C')}} | Snapshot de {{SpecName('HTML WHATWG')}}, passa a aceitar `'_'`, `'-'` and `'.'` se não estiverem no começo do ID. Se torna um atributo global verdadeiro. | -| {{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}} | {{Spec2('HTML4.01')}} | Suportado por todos os elementos menos {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/global_attributes/index.md b/files/pt-br/web/html/global_attributes/index.md index 3c96161879cc7f..b57a5129a1db34 100644 --- a/files/pt-br/web/html/global_attributes/index.md +++ b/files/pt-br/web/html/global_attributes/index.md @@ -30,7 +30,7 @@ Além dos atributos globais HTML básicos, os seguintes atributos globais també - `false`, indica que o elemento não deve ser editável. - [`contextmenu`](/pt-BR/docs/Web/HTML/Global_attributes/contextmenu) - - : É o **[`id`](#attr-id)** de um {{HTMLElement("menu")}} para usar como o menu contextual para este elemento. + - : É o **[`id`](#id)** de um {{HTMLElement("menu")}} para usar como o menu contextual para este elemento. - [`data-*`](/pt-BR/docs/Web/HTML/Global_attributes/data-*) - : Forma uma classe de atributos, denominado de dados personalizados, que permite troca de informações proprietárias entre o [HTML](/pt-BR/docs/Web/HTML) e a sua representação no [DOM](/pt-BR/docs/Glossary/DOM) pode ser usada por scripts. Todos esses dados personalizados estão disponíveis através da interface do elemento {{domxref("HTMLElement")}} em que o atributo está definido. A propriedade {{domxref("HTMLElement.dataset")}} dá acesso a eles. - [`dir`](/pt-BR/docs/Web/HTML/Global_attributes/dir) @@ -74,7 +74,7 @@ Além dos atributos globais HTML básicos, os seguintes atributos globais també - [`itemtype`](/pt-BR/docs/Web/HTML/Global_attributes/itemtype) {{experimental_inline}} - : Especifica a URL do vocabulário que será usado para definir as propriedades do item na estrutura de dados. [`itemscope`](/pt-BR/docs/Web/HTML/Global_attributes/itemscope) é usado para alterar o escopo na estrutura de dados onde o vocabulário definido por [`itemtype`](/pt-BR/docs/Web/HTML/Global_attributes/itemtype) estará ativo. - [`lang`](/pt-BR/docs/Web/HTML/Global_attributes/lang) - - : Participa da definição do idioma do elemento, o idioma no qual os elementos não-editáveis estão escritos, ou o idioma no qual elementos editáveis devem ser escritos. A Tag contém um único valor no formato definido no documento da IEFT [Tags para Identificação de Idiomas (BCP47)](http://www.ietf.org/rfc/bcp/bcp47.txt). [**xml:lang**](#attr-xml:lang) tem prioridade mais alta que [`lang`](/pt-BR/docs/Web/HTML/Global_attributes/lang). + - : Participa da definição do idioma do elemento, o idioma no qual os elementos não-editáveis estão escritos, ou o idioma no qual elementos editáveis devem ser escritos. A Tag contém um único valor no formato definido no documento da IEFT [Tags para Identificação de Idiomas (BCP47)](http://www.ietf.org/rfc/bcp/bcp47.txt). `xml:lang` tem prioridade mais alta que [`lang`](/pt-BR/docs/Web/HTML/Global_attributes/lang). - [`spellcheck`](/pt-BR/docs/Web/HTML/Global_attributes/spellcheck) {{experimental_inline}} - : É um atributo enumerado que define se o elemento pode ser verificado por errors de ortografia. Pode ter os seguintes valores: @@ -103,12 +103,7 @@ Além dos atributos globais HTML básicos, os seguintes atributos globais també ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------ | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', "dom.html#global-attributes", "Global attributes")}} | {{Spec2('HTML WHATWG')}} | From latest snapshot, {{SpecName('HTML5.1')}}, `itemid`, `itemprop`, `itemref`, `itemscope`, and `itemtype` have been added. | -| {{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}} | {{Spec2('HTML5.1')}} | Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName('HTML5 W3C')}}, `spellcheck`, `draggable`, and `dropzone` have been added. | -| {{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}} | {{Spec2('HTML5 W3C')}} | Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the concept of global attributes is introduced and the `dir`, `lang`, `style`, `id`, `class`, `tabindex`, `accesskey`, and `title` are now true global attributes. `xml:lang` which was initially part of XHTML, is now also part of HTML. `hidden`, `data-*`, `contextmenu`, `contenteditable`, and `translate` have been added. | -| {{SpecName('HTML4.01')}} | {{Spec2('HTML4.01')}} | There are no global attributes defined. Several attributes that will become global attributes in subsequent specifications are defined on a subset of elements. `class` and `style` are supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}. `dir` is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}. `id` is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}. `lang` is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}. `tabindex` is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}. `accesskey` is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} and {{HTMLElement("textarea")}}. `title` is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/global_attributes/lang/index.md b/files/pt-br/web/html/global_attributes/lang/index.md index 5f52755834274a..f93f662da84e5f 100644 --- a/files/pt-br/web/html/global_attributes/lang/index.md +++ b/files/pt-br/web/html/global_attributes/lang/index.md @@ -24,12 +24,7 @@ Para as pseudo-classes CSS {{cssxref(":lang")}}, dois nomes de idiomas inválido ## Especificações -| Specification | Status | Comment | -| -------------------------------------------------------------------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| {{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}} | {{Spec2('HTML WHATWG')}} | Sem mudança até o último registro, {{SpecName('HTML5.1')}} | -| {{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}} | {{Spec2('HTML5.1')}} | Registro de {{SpecName('HTML WHATWG')}}, sem mudança para {{SpecName('HTML5 W3C')}} | -| {{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}} | {{Spec2('HTML5 W3C')}} | Registro de {{SpecName('HTML WHATWG')}}, comportamento com `xml:lang` e algoritmo de determinação definido. Ele também é um atributo global. | -| {{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}} | {{Spec2('HTML4.01')}} | Suportado em todos os elementos, mas {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} e {{HTMLElement("script")}}. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/global_attributes/tabindex/index.md b/files/pt-br/web/html/global_attributes/tabindex/index.md index e2095c6c628c0e..befc4a87bbdc31 100644 --- a/files/pt-br/web/html/global_attributes/tabindex/index.md +++ b/files/pt-br/web/html/global_attributes/tabindex/index.md @@ -24,12 +24,7 @@ Se o atributo `tabindex` for definido em um elemento div {{htmlelement("div")}}, ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', "editing.html#attr-tabindex", "tabindex")}} | {{Spec2('HTML WHATWG')}} | Nenhuma mudança desde o mais recente snapshot, {{SpecName('HTML5.1')}} | -| {{SpecName('HTML5.1', "editing.html#attr-tabindex", "tabindex")}} | {{Spec2('HTML5.1')}} | Snapshot de {{SpecName('HTML WHATWG')}}, nenhuma mudança desde {{SpecName('HTML5 W3C')}} | -| {{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}} | {{Spec2('HTML5 W3C')}} | Snapshot de {{SpecName('HTML WHATWG')}}. Desde {{SpecName("HTML4.01")}}, o atributo agora é suportado em todos os elementos (atributos globais). | -| {{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}} | {{Spec2('HTML4.01')}} | Suportado apenas em {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/global_attributes/title/index.md b/files/pt-br/web/html/global_attributes/title/index.md index 598aa14058394f..65753cf138904a 100644 --- a/files/pt-br/web/html/global_attributes/title/index.md +++ b/files/pt-br/web/html/global_attributes/title/index.md @@ -33,12 +33,7 @@ Este exemplo define um título de duas linhas. ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', "elements.html#the-title-attribute", "title")}} | {{Spec2('HTML WHATWG')}} | No change from latest snapshot, {{SpecName('HTML5.1')}} | -| {{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}} | {{Spec2('HTML5.1')}} | Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}} | -| {{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}} | {{Spec2('HTML5 W3C')}} | Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, it is now a true global attribute. | -| {{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}} | {{Spec2('HTML4.01')}} | Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/html/index.md b/files/pt-br/web/html/index.md index 23fbcee48935ae..43afcfc513dcb0 100644 --- a/files/pt-br/web/html/index.md +++ b/files/pt-br/web/html/index.md @@ -45,7 +45,7 @@ Nossa [Área de Aprendizado de HTML](/pt-BR/docs/Aprender/HTML) apresenta vário ## Tópicos avançados - [Habilitando Imagem CORS](/pt-BR/docs/Web/HTML/CORS_enabled_image) - - : O atributo [`crossorigin`](/pt-BR/docs/Web/HTML/Element/img#attr-crossorigin), em combinação com um cabeçalho [CORS](/pt-BR/docs/Glossary/CORS) adequado, permite definir imagens pelo elemento {{HTMLElement("img")}} para ser carregado de outras fontes em um elemento {{HTMLElement("canvas")}} como se estivessem sendo carregados da fonte atual. + - : O atributo [`crossorigin`](/pt-BR/docs/Web/HTML/Element/img#crossorigin), em combinação com um cabeçalho [CORS](/pt-BR/docs/Glossary/CORS) adequado, permite definir imagens pelo elemento {{HTMLElement("img")}} para ser carregado de outras fontes em um elemento {{HTMLElement("canvas")}} como se estivessem sendo carregados da fonte atual. - [Configuração de atributos CORS](/pt-BR/docs/Web/HTML/CORS_settings_attributes) - : Alguns elementos em HTML que suportam [CORS](/pt-BR/docs/HTTP/Access_control_CORS), como por exemplo o {{HTMLElement("img")}} ou {{HTMLElement("video")}}, têm o atributo `crossorigin` (a propriedade `crossOrigin`), que permite configurar as requisições CORS para os dados recebidos pelo elemento. - [Gerenciamento de foco em HTML](/pt-BR/docs/Web/HTML/Focus_management_in_HTML) diff --git a/files/pt-br/web/http/cors/index.md b/files/pt-br/web/http/cors/index.md index c32598d1798360..7dc8381b3bed3a 100644 --- a/files/pt-br/web/http/cors/index.md +++ b/files/pt-br/web/http/cors/index.md @@ -492,9 +492,7 @@ Examples of this usage can be [found above](#Preflighted_requests). ## Especificações -| Specification | Status | Comment | -| ----------------------------------------------- | ------------------ | -------------------------------------------------------------------------------- | -| {{SpecName('Fetch', '#cors-protocol', 'CORS')}} | {{Spec2('Fetch')}} | New definition; supplants [W3C CORS](https://www.w3.org/TR/cors/) specification. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/http/headers/access-control-allow-credentials/index.md b/files/pt-br/web/http/headers/access-control-allow-credentials/index.md index c621131df237de..c94dc6a56ac5b4 100644 --- a/files/pt-br/web/http/headers/access-control-allow-credentials/index.md +++ b/files/pt-br/web/http/headers/access-control-allow-credentials/index.md @@ -66,9 +66,7 @@ fetch(url, { ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------------------------------------- | ------------------ | ----------------- | -| {{SpecName('Fetch','#http-access-control-allow-credentials', 'Access-Control-Allow-Credentials')}} | {{Spec2("Fetch")}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/http/headers/access-control-allow-headers/index.md b/files/pt-br/web/http/headers/access-control-allow-headers/index.md index a59c7da4edf02b..c06d87e51cf026 100644 --- a/files/pt-br/web/http/headers/access-control-allow-headers/index.md +++ b/files/pt-br/web/http/headers/access-control-allow-headers/index.md @@ -96,9 +96,7 @@ Se o método requisitado não é suportado, o servidor irá responder com um err ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------------ | ------------------ | ----------------- | -| {{SpecName('Fetch','#http-access-control-allow-headers', 'Access-Control-Allow-Headers')}} | {{Spec2("Fetch")}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/http/headers/access-control-allow-methods/index.md b/files/pt-br/web/http/headers/access-control-allow-methods/index.md index 89d7b5e30f3419..58114b97747327 100644 --- a/files/pt-br/web/http/headers/access-control-allow-methods/index.md +++ b/files/pt-br/web/http/headers/access-control-allow-methods/index.md @@ -43,9 +43,7 @@ Access-Control-Allow-Methods: * ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------------ | ------------------ | ----------------- | -| {{SpecName('Fetch','#http-access-control-allow-methods', 'Access-Control-Allow-Methods')}} | {{Spec2("Fetch")}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/http/headers/access-control-allow-origin/index.md b/files/pt-br/web/http/headers/access-control-allow-origin/index.md index 11f3f5981f8dd3..e75a5a428a5386 100644 --- a/files/pt-br/web/http/headers/access-control-allow-origin/index.md +++ b/files/pt-br/web/http/headers/access-control-allow-origin/index.md @@ -59,9 +59,7 @@ Vary: Origin ## Especificações -| Specification | Status | Comment | -| ---------------------------------------------------------------------------------------- | ------------------ | ------------------- | -| {{SpecName('Fetch','#http-access-control-allow-origin', 'Access-Control-Allow-Origin')}} | {{Spec2("Fetch")}} | Initial definition. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/http/headers/access-control-expose-headers/index.md b/files/pt-br/web/http/headers/access-control-expose-headers/index.md index 8628e3bff5ef0b..40dcaf8b37c272 100644 --- a/files/pt-br/web/http/headers/access-control-expose-headers/index.md +++ b/files/pt-br/web/http/headers/access-control-expose-headers/index.md @@ -74,9 +74,7 @@ Access-Control-Expose-Headers: *, Authorization ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------------------------------- | ------------------ | ---------- | -| {{SpecName('Fetch','#http-access-control-expose-headers', 'Access-Control-Expose-Headers')}} | {{Spec2("Fetch")}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/http/headers/access-control-max-age/index.md b/files/pt-br/web/http/headers/access-control-max-age/index.md index b4cfa99791ed39..c09c82b0a7c868 100644 --- a/files/pt-br/web/http/headers/access-control-max-age/index.md +++ b/files/pt-br/web/http/headers/access-control-max-age/index.md @@ -46,9 +46,7 @@ Access-Control-Max-Age: 600 ## Especificações -| Especificação | Status | Comentários | -| ------------------------------------------------------------------------------ | ------------------ | ------------------- | -| {{SpecName('Fetch','#http-access-control-max-age', 'Access-Control-Max-Age')}} | {{Spec2("Fetch")}} | Initial definition. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/http/headers/access-control-request-headers/index.md b/files/pt-br/web/http/headers/access-control-request-headers/index.md index 4198d72f1540d2..f38bfae5f20052 100644 --- a/files/pt-br/web/http/headers/access-control-request-headers/index.md +++ b/files/pt-br/web/http/headers/access-control-request-headers/index.md @@ -39,9 +39,7 @@ Access-Control-Request-Headers: X-PINGOTHER, Content-Type ## Especificações -| Specification | Status | Comment | -| ---------------------------------------------------------------------------------------------- | ------------------ | ------------------ | -| {{SpecName('Fetch','#http-access-control-request-headers', 'Access-Control-Request-Headers')}} | {{Spec2("Fetch")}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/http/headers/access-control-request-method/index.md b/files/pt-br/web/http/headers/access-control-request-method/index.md index caf60f6bd47d1f..68d4cf2b5557c0 100644 --- a/files/pt-br/web/http/headers/access-control-request-method/index.md +++ b/files/pt-br/web/http/headers/access-control-request-method/index.md @@ -39,9 +39,7 @@ Access-Control-Request-Method: POST ## Especificações -| Especificação | Status | Comentários | -| -------------------------------------------------------------------------------------------- | ------------------ | ------------------ | -| {{SpecName('Fetch','#http-access-control-request-method', 'Access-Control-Request-Method')}} | {{Spec2("Fetch")}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/http/headers/content-security-policy-report-only/index.md b/files/pt-br/web/http/headers/content-security-policy-report-only/index.md index 99cd1b32e38f7c..f57b9e22f1d405 100644 --- a/files/pt-br/web/http/headers/content-security-policy-report-only/index.md +++ b/files/pt-br/web/http/headers/content-security-policy-report-only/index.md @@ -119,10 +119,7 @@ Como você pode ver, o relatório inclui o caminho completo para o recurso viola ## Especificações -| Especificação | Status | Comentário | -| ----------------------- | -------------------- | ------------------ | -| {{specName("CSP 3.0")}} | {{Spec2('CSP 3.0')}} | Sem alterações. | -| {{specName("CSP 1.1")}} | {{Spec2('CSP 1.1')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/http/headers/content-security-policy/index.md b/files/pt-br/web/http/headers/content-security-policy/index.md index 79067f01295d98..294d8d55fe0fd2 100644 --- a/files/pt-br/web/http/headers/content-security-policy/index.md +++ b/files/pt-br/web/http/headers/content-security-policy/index.md @@ -188,14 +188,7 @@ Veja as [Mozilla Web Security Guidelines](https://infosec.mozilla.org/guidelines ## Especificações -| Especificação | Status | Comentários | -| ----------------------------------------- | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| {{specName("CSP 3.0")}} | {{Spec2("CSP 3.0")}} | Adiciona `manifest-src`, `navigate-to`, `report-to`, `strict-dynamic`, `worker-src`. Desdeprecia `frame-src`. Deprecia `report-uri` em favor de `report-to`. | -| {{specName("Mixed Content")}} | {{Spec2("Mixed Content")}} | Adiciona `block-all-mixed-content`. | -| {{specName("Subresource Integrity")}} | {{Spec2("Subresource Integrity")}} | Adiciona `require-sri-for`. | -| {{specName("Upgrade Insecure Requests")}} | {{Spec2("Upgrade Insecure Requests")}} | Adiciona `upgrade-insecure-requests`. | -| {{specName("CSP 1.1")}} | {{Spec2("CSP 1.1")}} | Adiciona `base-uri`, `child-src`, `form-action`, `frame-ancestors`, `plugin-types`, `referrer`, and `report-uri`. Deprecia `frame-src`. | -| {{specName("CSP 1.0")}} | {{Spec2("CSP 1.0")}} | Define `connect-src`, `default-src`, `font-src`, `frame-src`, `img-src`, `media-src`, `object-src`, `report-uri`, `sandbox`, `script-src`, e `style-src`. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/http/headers/cross-origin-resource-policy/index.md b/files/pt-br/web/http/headers/cross-origin-resource-policy/index.md index 3b6b62280ec93e..300d8c4f07c51f 100644 --- a/files/pt-br/web/http/headers/cross-origin-resource-policy/index.md +++ b/files/pt-br/web/http/headers/cross-origin-resource-policy/index.md @@ -40,9 +40,7 @@ Para mais exemplos, veja <https://resourcepolicy.fyi/>. ## Especificações -| Especificação | Status | Comentários | -| ------------------------------------------------------------- | ---------------------------------------------------------- | ----------------- | -| {{SpecName("Fetch", '#cross-origin-resource-policy-header')}} | {{Spec2("Fetch", '#cross-origin-resource-policy-header')}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/http/headers/device-memory/index.md b/files/pt-br/web/http/headers/device-memory/index.md index fd3b811459c103..8b7500e83849bf 100644 --- a/files/pt-br/web/http/headers/device-memory/index.md +++ b/files/pt-br/web/http/headers/device-memory/index.md @@ -47,9 +47,7 @@ Device-Memory: 1 ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------- | -------------------------- | ------------------ | -| {{SpecName("Device Memory","#sec-device-memory-client-hint-header","Device-Memory")}} | {{Spec2('Device Memory')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/http/headers/dnt/index.md b/files/pt-br/web/http/headers/dnt/index.md index f9621fb488f0ac..4f311ed1d0fe70 100644 --- a/files/pt-br/web/http/headers/dnt/index.md +++ b/files/pt-br/web/http/headers/dnt/index.md @@ -46,9 +46,7 @@ navigator.doNotTrack; // "0" or "1" ## Especificações -| Especificação | Status | Comentários | -| ---------------------------------------------------------------------------------- | --------------------- | ------------------ | -| {{SpecName('Tracking','#dnt-header-field', 'DNT Header Field for HTTP Requests')}} | {{Spec2("Tracking")}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/http/headers/origin/index.md b/files/pt-br/web/http/headers/origin/index.md index ba231bc7df2bed..1a15a4cae6ef54 100644 --- a/files/pt-br/web/http/headers/origin/index.md +++ b/files/pt-br/web/http/headers/origin/index.md @@ -46,10 +46,7 @@ Origin: https://developer.mozilla.org ## Especificações -| Especificação | Comentários | -| ------------------------------------------------------ | -------------------------------------------------------- | -| {{RFC("6454", "Origin", "7")}} | Conceito da Origem da Internet | -| {{SpecName('Fetch','#origin-header','Origin header')}} | Substitui o cabeçalho `Origin` como definido na RFC6454. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/http/headers/permissions-policy/index.md b/files/pt-br/web/http/headers/permissions-policy/index.md index 7506a78b262368..560f1cca15fd5c 100644 --- a/files/pt-br/web/http/headers/permissions-policy/index.md +++ b/files/pt-br/web/http/headers/permissions-policy/index.md @@ -108,9 +108,7 @@ Especificando a palavra-chave `'none'` para a lista de origem, as funcionalidade ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------------- | --------------------------- | ---------- | -| {{SpecName("Feature Policy","#permissions-policy-http-header-field","Permissions-Policy")}} | {{Spec2("Feature Policy")}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/http/headers/referrer-policy/index.md b/files/pt-br/web/http/headers/referrer-policy/index.md index c69f621d67f442..00d1fafa6899fa 100644 --- a/files/pt-br/web/http/headers/referrer-policy/index.md +++ b/files/pt-br/web/http/headers/referrer-policy/index.md @@ -64,7 +64,7 @@ Referrer-Policy: unsafe-url ## Integração com HTML -Você também pode colocar política de referência dentro do HTML. Por exemplo, você pode colocar uma política de referência para o documento inteiro com um elemento {{HTMLElement("meta")}} com um [nome](/pt-BR/docs/Web/HTML/Element/meta#attr-name) de `referrer`: +Você também pode colocar política de referência dentro do HTML. Por exemplo, você pode colocar uma política de referência para o documento inteiro com um elemento {{HTMLElement("meta")}} com um [nome](/pt-BR/docs/Web/HTML/Element/meta#name) de `referrer`: ```html <meta name="referrer" content="origin" /> diff --git a/files/pt-br/web/http/headers/server-timing/index.md b/files/pt-br/web/http/headers/server-timing/index.md index 0612ef32b907bb..91855715705e86 100644 --- a/files/pt-br/web/http/headers/server-timing/index.md +++ b/files/pt-br/web/http/headers/server-timing/index.md @@ -55,9 +55,7 @@ Em adição tendo o cabeçalho `Server-Timing` de métricas aparecendo nas ferra ## Especificações -| Especificação | Status | Título | -| --------------------------------------------------------------------------------------------- | -------------------------- | ------------------ | -| {{SpecName('Server Timing','#the-server-timing-header-field', 'Server-Timing Header Field')}} | {{Spec2("Server Timing")}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/http/headers/strict-transport-security/index.md b/files/pt-br/web/http/headers/strict-transport-security/index.md index db8b632c313cc8..4f5b719acf9932 100644 --- a/files/pt-br/web/http/headers/strict-transport-security/index.md +++ b/files/pt-br/web/http/headers/strict-transport-security/index.md @@ -78,9 +78,7 @@ Strict-Transport-Security: max-age=31536000; includeSubDomains ## Especificações -| Especificação | Status | Comentário | -| -------------------- | ----------------- | ------------------ | -| {{SpecName('HSTS')}} | {{Spec2('HSTS')}} | Initial definition | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/http/headers/timing-allow-origin/index.md b/files/pt-br/web/http/headers/timing-allow-origin/index.md index ea552150338ad6..349f7548cdaf23 100644 --- a/files/pt-br/web/http/headers/timing-allow-origin/index.md +++ b/files/pt-br/web/http/headers/timing-allow-origin/index.md @@ -50,9 +50,7 @@ Timing-Allow-Origin: https://developer.mozilla.org ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------ | ------------------------------ | ------------------ | -| {{SpecName('Resource Timing 3', '#sec-timing-allow-origin', 'Timing-Allow-Origin')}} | {{Spec2("Resource Timing 3")}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/http/headers/tk/index.md b/files/pt-br/web/http/headers/tk/index.md index d6c046a9f6cf15..1c18a86a5b0276 100644 --- a/files/pt-br/web/http/headers/tk/index.md +++ b/files/pt-br/web/http/headers/tk/index.md @@ -65,9 +65,7 @@ Tk: N ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------- | --------------------- | ------------------ | -| {{SpecName('Tracking','#Tk-header-defn', 'Tk header field')}} | {{Spec2("Tracking")}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/http/headers/upgrade-insecure-requests/index.md b/files/pt-br/web/http/headers/upgrade-insecure-requests/index.md index 8daf44923b234e..e7b22f6aedffe8 100644 --- a/files/pt-br/web/http/headers/upgrade-insecure-requests/index.md +++ b/files/pt-br/web/http/headers/upgrade-insecure-requests/index.md @@ -45,9 +45,7 @@ Vary: Upgrade-Insecure-Requests ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------- | -------------------------------------- | ------------------- | -| {{specName("Upgrade Insecure Requests", "#preference", "upgrade-insecure-requests")}} | {{Spec2('Upgrade Insecure Requests')}} | Initial definition. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/http/headers/x-content-type-options/index.md b/files/pt-br/web/http/headers/x-content-type-options/index.md index 019b639b12d21f..d6de47ef8c0a06 100644 --- a/files/pt-br/web/http/headers/x-content-type-options/index.md +++ b/files/pt-br/web/http/headers/x-content-type-options/index.md @@ -45,9 +45,7 @@ X-Content-Type-Options: nosniff ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------------------------------- | ------------------ | ----------------- | -| {{SpecName("Fetch", "#x-content-type-options-header", "X-Content-Type-Options definition")}} | {{Spec2("Fetch")}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/classes/constructor/index.md b/files/pt-br/web/javascript/reference/classes/constructor/index.md index 5b966719aed31b..2cc9bd0d41966d 100644 --- a/files/pt-br/web/javascript/reference/classes/constructor/index.md +++ b/files/pt-br/web/javascript/reference/classes/constructor/index.md @@ -66,10 +66,7 @@ constructor(...args) { ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------------------------- | -------------------- | ----------------- | -| {{SpecName('ES6', '#sec-static-semantics-constructormethod', 'Constructor Method')}} | {{Spec2('ES6')}} | Definição inicial | -| {{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/classes/extends/index.md b/files/pt-br/web/javascript/reference/classes/extends/index.md index fb25e4b06d0307..6eaf4e668aeafc 100644 --- a/files/pt-br/web/javascript/reference/classes/extends/index.md +++ b/files/pt-br/web/javascript/reference/classes/extends/index.md @@ -93,9 +93,7 @@ Object.getPrototypeOf(nullExtends.prototype); // null ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------- | ---------------- | ------------------ | -| {{SpecName('ES6', '#sec-class-definitions', 'extends')}} | {{Spec2('ES6')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/classes/index.md b/files/pt-br/web/javascript/reference/classes/index.md index 0805152088715e..d7242ecdabd9f7 100644 --- a/files/pt-br/web/javascript/reference/classes/index.md +++ b/files/pt-br/web/javascript/reference/classes/index.md @@ -344,9 +344,7 @@ console.log(humano.falar()); ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------ | ---------------- | ------------------ | -| {{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES6')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/classes/static/index.md b/files/pt-br/web/javascript/reference/classes/static/index.md index f75a88adae452d..4a80b064b22e5d 100644 --- a/files/pt-br/web/javascript/reference/classes/static/index.md +++ b/files/pt-br/web/javascript/reference/classes/static/index.md @@ -96,9 +96,7 @@ console.log(tp.tripple()); //Logs 'tp.tripple is not a function'. ## Especificações -| Especificação | Status | Comentário | -| --------------------------------------------------------------------- | ------------------- | ------------------ | -| {{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2015')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/functions/arguments/index.md b/files/pt-br/web/javascript/reference/functions/arguments/index.md index dc968c8b14be52..35881eadb9634f 100644 --- a/files/pt-br/web/javascript/reference/functions/arguments/index.md +++ b/files/pt-br/web/javascript/reference/functions/arguments/index.md @@ -199,11 +199,7 @@ func(); // undefined ## Especificações -| Especificações | Status | Comentário | -| -------------------------------------------------------------------------------- | ------------------ | ------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial. Implementado em JavaScript 1.1 | -| {{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/functions/arrow_functions/index.md b/files/pt-br/web/javascript/reference/functions/arrow_functions/index.md index c635330a00ed9c..bf94de80b9991e 100644 --- a/files/pt-br/web/javascript/reference/functions/arrow_functions/index.md +++ b/files/pt-br/web/javascript/reference/functions/arrow_functions/index.md @@ -377,10 +377,7 @@ setTimeout( () => { ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------------------------- | -------------------- | ------------------ | -| {{SpecName('ES2015', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}} | {{Spec2('ES2015')}} | Definição inicial. | -| {{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/functions/default_parameters/index.md b/files/pt-br/web/javascript/reference/functions/default_parameters/index.md index 43558e93aa8518..47f7e1a61722b8 100644 --- a/files/pt-br/web/javascript/reference/functions/default_parameters/index.md +++ b/files/pt-br/web/javascript/reference/functions/default_parameters/index.md @@ -198,9 +198,7 @@ f(); // 6 ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------ | ---------------- | ------------------ | -| {{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}} | {{Spec2('ES6')}} | Definição Inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/functions/get/index.md b/files/pt-br/web/javascript/reference/functions/get/index.md index 5f806872012349..88f3fe0305710f 100644 --- a/files/pt-br/web/javascript/reference/functions/get/index.md +++ b/files/pt-br/web/javascript/reference/functions/get/index.md @@ -115,11 +115,7 @@ Para o Firefox, veja também o código do módulo XPCOMUtils.jsm, que define a f ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------ | -------------------- | -------------------------------------------- | -| {{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}} | {{Spec2('ES5.1')}} | Definição inicial. | -| {{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}} | {{Spec2('ES6')}} | Adicionado nomes de propriedades computadas. | -| {{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/functions/index.md b/files/pt-br/web/javascript/reference/functions/index.md index c0f588c282f072..548ef788b4360b 100644 --- a/files/pt-br/web/javascript/reference/functions/index.md +++ b/files/pt-br/web/javascript/reference/functions/index.md @@ -374,11 +374,7 @@ Note that in the `if` test, a reference to `noFunc` is used—there are no brack ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------ | -| ECMAScript 1st Edition. | Standard | Initial definition. Implemented in JavaScript 1.0 | -| {{SpecName('ES5.1', '#sec-13', 'Function Definition')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}} | {{Spec2('ES6')}} | New: Arrow functions, Generator functions, default parameters, rest parameters | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/functions/method_definitions/index.md b/files/pt-br/web/javascript/reference/functions/method_definitions/index.md index 63d064d6f9d0c9..de65ecc50a604b 100644 --- a/files/pt-br/web/javascript/reference/functions/method_definitions/index.md +++ b/files/pt-br/web/javascript/reference/functions/method_definitions/index.md @@ -172,10 +172,7 @@ console.log(bar.foo2()); // 2 ## Especificações -| Especificações | Estado | Comentário | -| ------------------------------------------------------------------------ | -------------------- | ------------------- | -| {{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}} | {{Spec2('ES6')}} | Initial definition. | -| {{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/functions/rest_parameters/index.md b/files/pt-br/web/javascript/reference/functions/rest_parameters/index.md index a911aa82d51cf8..058cacda9c3c0b 100644 --- a/files/pt-br/web/javascript/reference/functions/rest_parameters/index.md +++ b/files/pt-br/web/javascript/reference/functions/rest_parameters/index.md @@ -98,9 +98,7 @@ a fim de usar o objeto `arguments`, você precisará converte-lo para um array a ## Especificações -| Especificações | Status | Comentário | -| ------------------------------------------------------------------------ | ---------------- | ------------------- | -| {{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}} | {{Spec2('ES6')}} | Initial definition. | +{{Specifications}} ## Compatibilidade diff --git a/files/pt-br/web/javascript/reference/global_objects/array/@@iterator/index.md b/files/pt-br/web/javascript/reference/global_objects/array/@@iterator/index.md index 9d423fb72c8c05..6d852ed7a8a45e 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/@@iterator/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/@@iterator/index.md @@ -40,10 +40,7 @@ console.log(eArr.next().value); // p ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------------- | -------------------- | ------------------ | -| {{SpecName('ES6', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}} | {{Spec2('ES6')}} | Definição inicial. | -| {{SpecName('ESDraft', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/array/@@unscopables/index.md b/files/pt-br/web/javascript/reference/global_objects/array/@@unscopables/index.md index c49dbc1dd8e439..b55844fb9814f8 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/@@unscopables/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/@@unscopables/index.md @@ -37,10 +37,7 @@ Object.keys(Array.prototype[Symbol.unscopables]); ## Especificações -| Especificação | Status | Comentário | -| ----------------------------------------------------------------------------------------------- | -------------------- | ------------------- | -| {{SpecName('ES2015', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}} | {{Spec2('ES2015')}} | Initial definition. | -| {{SpecName('ESDraft', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/array/entries/index.md b/files/pt-br/web/javascript/reference/global_objects/array/entries/index.md index 20b2cb17d1a1c2..1443ec354537f3 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/entries/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/entries/index.md @@ -40,10 +40,7 @@ for (let e of eArr) { ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------------------- | -------------------- | ------------------ | -| {{SpecName('ES6', '#sec-array.prototype.entries', 'Array.prototype.entries')}} | {{Spec2('ES6')}} | Definição inicial. | -| {{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/array/every/index.md b/files/pt-br/web/javascript/reference/global_objects/array/every/index.md index c52ef5807ef6a6..77ad5a9ed0b2ed 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/every/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/every/index.md @@ -142,10 +142,7 @@ if (!Array.prototype.every) { ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------------- | ------------------ | -------------------------------------------------- | -| {{SpecName('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}} | {{Spec2('ES5.1')}} | Definição inicial. Implementada no JavaScript 1.6. | -| {{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/array/fill/index.md b/files/pt-br/web/javascript/reference/global_objects/array/fill/index.md index d0a0fb6a033455..e78882e51f04c1 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/fill/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/fill/index.md @@ -96,9 +96,7 @@ if (!Array.prototype.fill) { ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------ | ---------------- | ------------------ | -| {{SpecName('ES6', '#sec-array.prototype.fill', 'Array.prototype.fill')}} | {{Spec2('ES6')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/array/filter/index.md b/files/pt-br/web/javascript/reference/global_objects/array/filter/index.md index 7d5c25d8ba30b4..3095792606cb2b 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/filter/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/filter/index.md @@ -183,10 +183,7 @@ if (!Array.prototype.filter) { ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------------- | ------------------ | -------------------------------------------------- | -| {{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}} | {{Spec2('ES5.1')}} | Definição inicial. Implementada no JavaScript 1.6. | -| {{SpecName('ES6', '#sec-array.prototype.filter', 'Array.prototype.filter')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/array/find/index.md b/files/pt-br/web/javascript/reference/global_objects/array/find/index.md index 2adaa40d8c3efe..1e25c51d336ec2 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/find/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/find/index.md @@ -134,9 +134,7 @@ if (!Array.prototype.find) { ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------ | ---------------- | ------------------ | -| {{SpecName('ES6', '#sec-array.prototype.find', 'Array.prototype.find')}} | {{Spec2('ES6')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/array/findindex/index.md b/files/pt-br/web/javascript/reference/global_objects/array/findindex/index.md index 7d4acb14f72d07..a01c853397d605 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/findindex/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/findindex/index.md @@ -97,10 +97,7 @@ if (!Array.prototype.findIndex) { ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------------------------- | -------------------- | ------------------ | -| {{SpecName('ES6', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}} | {{Spec2('ES6')}} | Definição inicial. | -| {{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/array/index.md b/files/pt-br/web/javascript/reference/global_objects/array/index.md index ca1e2718606bc0..8346102318a236 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/index.md @@ -433,12 +433,7 @@ Saída: ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------ | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial | -| {{SpecName('ES5.1', '#sec-15.4', 'Array')}} | {{Spec2('ES5.1')}} | Novos metodos adicionados: {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}} | -| {{SpecName('ES2015', '#sec-array-objects', 'Array')}} | {{Spec2('ES2015')}} | Novos metodos adicionados: {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}} | -| {{SpecName('ESDraft', '#sec-array-objects', 'Array')}} | {{Spec2('ESDraft')}} | Novo metodo adicionado: {{jsxref("Array.prototype.includes()")}} | +{{Specifications}} ## Compatibilidade com os navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/array/indexof/index.md b/files/pt-br/web/javascript/reference/global_objects/array/indexof/index.md index 1f4250f6462711..246aea88b9ec5a 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/indexof/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/indexof/index.md @@ -153,10 +153,7 @@ if (!Array.prototype.indexOf) { ## Especificações -| Especificação | Status | Comentários | -| ------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------- | -| {{SpecName('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}} | {{Spec2('ES5.1')}} | Definição inicial implementada no Javascript 1.6. | -| {{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/array/isarray/index.md b/files/pt-br/web/javascript/reference/global_objects/array/isarray/index.md index e62a59d7e0ba93..fc858221f2cae9 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/isarray/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/isarray/index.md @@ -62,10 +62,7 @@ if (!Array.isArray) { ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------- | ------------------ | ---------------------------------------------------- | -| {{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}} | {{Spec2('ES5.1')}} | Definição Inicial. Implementado em JavaScript 1.8.5. | -| {{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com o Browser diff --git a/files/pt-br/web/javascript/reference/global_objects/array/join/index.md b/files/pt-br/web/javascript/reference/global_objects/array/join/index.md index ff933d581662f1..c3e11251e1fa53 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/join/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/join/index.md @@ -51,12 +51,7 @@ f(1, "a", true); ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------------- | -------------------- | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial. Implementado em JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/array/keys/index.md b/files/pt-br/web/javascript/reference/global_objects/array/keys/index.md index f3b5d04d6b3123..e4d084ed0a83fd 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/keys/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/keys/index.md @@ -41,9 +41,7 @@ console.log(denseKeys); // [0, 1, 2] ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------ | ---------------- | ------------------ | -| {{SpecName('ES6', '#sec-array.prototype.keys', 'Array.prototype.keys')}} | {{Spec2('ES6')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade de Browser diff --git a/files/pt-br/web/javascript/reference/global_objects/array/lastindexof/index.md b/files/pt-br/web/javascript/reference/global_objects/array/lastindexof/index.md index 099d33dbc06852..46570dd4061d93 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/lastindexof/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/lastindexof/index.md @@ -107,10 +107,7 @@ Novamente, perceba que essa implementação foca na absoluta compatibilidade com ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------------------------- | ------------------ | -------------------------------------------------- | -| {{SpecName('ES5.1', '#sec-15.4.4.15', 'Array.prototype.lastIndexOf')}} | {{Spec2('ES5.1')}} | Definição inicial. Implementado no JavaScript 1.6. | -| {{SpecName('ES6', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/array/length/index.md b/files/pt-br/web/javascript/reference/global_objects/array/length/index.md index b9c36c53b58164..6ce71deab4d290 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/length/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/length/index.md @@ -48,11 +48,7 @@ if (statesUS.length > 50) { ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------------------- | ------------------ | ------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Initial definition. | -| {{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/array/map/index.md b/files/pt-br/web/javascript/reference/global_objects/array/map/index.md index 8b48b6d18d7078..67c3f3bf7184d5 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/map/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/map/index.md @@ -232,10 +232,7 @@ if (!Array.prototype.map) { ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------- | ------------------ | ------------------------------------------------- | -| {{SpecName('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}} | {{Spec2('ES5.1')}} | Definição inicial implementada no JavaScript 1.6. | -| {{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com os browsers diff --git a/files/pt-br/web/javascript/reference/global_objects/array/of/index.md b/files/pt-br/web/javascript/reference/global_objects/array/of/index.md index 437a0ed5af35ce..0b65083259047f 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/of/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/of/index.md @@ -70,9 +70,7 @@ if (!Array.of) { ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------ | ---------------- | ------------------ | -| {{SpecName('ES6', '#sec-array.of', 'Array.of')}} | {{Spec2('ES6')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/array/pop/index.md b/files/pt-br/web/javascript/reference/global_objects/array/pop/index.md index 9d84efc03ad370..020bc0407e077e 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/pop/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/pop/index.md @@ -43,11 +43,7 @@ console.log(meuPeixePop); // 'esturjao' ## Especificações -| Especificação | Estado | Comentário | -| ---------------------------------------------------------------------- | ------------------ | -------------------------------------------------- | -| ECMAScript 3ª Edição | Padrão | Definição inicial. Implementado no JavaScript 1.2. | -| {{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade nos Navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/array/push/index.md b/files/pt-br/web/javascript/reference/global_objects/array/push/index.md index 6764b89285a465..465f031586689a 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/push/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/push/index.md @@ -98,11 +98,7 @@ Observe que, embora `obj` não seja um array, o método `push` aumentou com suce ## Especificações -| Especificação | Estado | Comentário | -| ------------------------------------------------------------------------ | ------------------ | ---------------------------------------------------- | -| ECMAScript 3ª Edição | Padrão | Implementação inicial. Implentado no JavaScript 1.2. | -| {{SpecName('ES5.1', '#sec-15.4.4.7', 'Array.prototype.push')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-array.prototype.push', 'Array.prototype.push')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade em navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/array/reduce/index.md b/files/pt-br/web/javascript/reference/global_objects/array/reduce/index.md index 14c7bb8f828b6f..1ec6b3b5a55c96 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/reduce/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/reduce/index.md @@ -56,7 +56,7 @@ Se a array estiver vazia e o `valorInicial` não tiver sido informado, uma exce Se a array possuir somente um elemento (independente da posição) e o `valorInicial` não tiver sido fornecido, ou se `valorInicial` for fornecido, mas a array estiver vazia, o valor será retornado sem que a função de `callback` seja chamada. -É mais seguro provir um `valorInicial`, porque existem até _quatro_ possíveis saídas sem o `valorInicial`, como mostrado no exemplo: +É mais seguro prover um `valorInicial`, porque existem até _quatro_ possíveis saídas sem o `valorInicial`, como mostrado no exemplo: ```js var maxCallback = (acc, cur) => Math.max(acc.x, cur.x); @@ -99,7 +99,7 @@ Você também pode usar uma {{jsxref("Functions/Arrow_functions", "Arrow Functio [0, 1, 2, 3, 4].reduce((accum, curr) => accum + curr); ``` -Se você informar um valorInicial como o segundo argumento de reduce, o resultado será: +Se você informar um `valorInicial` como o segundo argumento de reduce, o resultado será: ```js [0, 1, 2, 3, 4].reduce(function (acumulador, valorAtual, indice, array) { @@ -141,7 +141,7 @@ var total = [0, 1, 2, 3].reduce( ### Soma de valores de um objeto de um array -Para resumir os valores contidos em um array, você **deve** fornecer um valorInicial, para que cada item passe por sua função. +Para resumir os valores contidos em um array, você **deve** fornecer um `valorInicial`, para que cada item passe por sua função. ```js var valorInicial = 0; @@ -418,10 +418,7 @@ if (!Array.prototype.reduce) { ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------------- | ------------------ | ------------------------------------------------- | -| {{SpecName('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce')}} | {{Spec2('ES5.1')}} | Definição inicial. Implemetada no JavaScript 1.8. | -| {{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/array/reduceright/index.md b/files/pt-br/web/javascript/reference/global_objects/array/reduceright/index.md index 8e721500dc5592..f8b3b346ce6a20 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/reduceright/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/reduceright/index.md @@ -160,10 +160,7 @@ if ("function" !== typeof Array.prototype.reduceRight) { ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------------------------- | ------------------ | -------------------------------------------------- | -| {{SpecName('ES5.1', '#sec-15.4.4.22', 'Array.prototype.reduceRight')}} | {{Spec2('ES5.1')}} | Definição inicial. Implementado em JavaScript 1.8. | -| {{SpecName('ES6', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com os navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/array/reverse/index.md b/files/pt-br/web/javascript/reference/global_objects/array/reverse/index.md index 35537b0bbce45e..5fc7e5ca78f0ce 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/reverse/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/reverse/index.md @@ -38,11 +38,7 @@ console.log(myArray); // ['three', 'two', 'one'] ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------ | ------------------ | -------------------------------------------------- | -| ECMAScript 1ª Edição | Padrão | Definição inicial. Implementado no JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegador diff --git a/files/pt-br/web/javascript/reference/global_objects/array/shift/index.md b/files/pt-br/web/javascript/reference/global_objects/array/shift/index.md index 1253bcae095dff..d459e492754554 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/shift/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/shift/index.md @@ -60,11 +60,7 @@ while ((i = nomes.shift()) !== undefined) { ## Especificações -| Especificação | Estado | Comentário | -| -------------------------------------------------------------------------- | ------------------ | ------------------------------------------------------ | -| ECMAScript 3rd Edition | Standard | Implementação inicial. Implementado no JavaScript 1.2. | -| {{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade de Browser diff --git a/files/pt-br/web/javascript/reference/global_objects/array/slice/index.md b/files/pt-br/web/javascript/reference/global_objects/array/slice/index.md index ef941d6fe19aa0..8347a9d961b8f0 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/slice/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/slice/index.md @@ -194,12 +194,7 @@ Embora os objetos de host (como objetos DOM) não sejam obrigados pela especific ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------ | -------------------- | -------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES6', '#sec-array.prototype.slice', 'Array.prototype.slice')}} | {{Spec2('ES6')}} | | -| {{SpecName('ES5.1', '#sec-15.4.4.10', 'Array.prototype.slice')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES3')}} | {{Spec2('ES3')}} | Definição inicial. Implementada no JavaScript 1.2. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/array/some/index.md b/files/pt-br/web/javascript/reference/global_objects/array/some/index.md index 6eab64c3611bd9..f7701a4dcec759 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/some/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/some/index.md @@ -106,10 +106,7 @@ if (!Array.prototype.some) { ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------------ | ------------------ | -------------------------------------------------- | -| {{SpecName('ES5.1', '#sec-15.4.4.17', 'Array.prototype.some')}} | {{Spec2('ES5.1')}} | Definição inicial. Implementada em JavaScript 1.6. | -| {{SpecName('ES6', '#sec-array.prototype.some', 'Array.prototype.some')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/array/sort/index.md b/files/pt-br/web/javascript/reference/global_objects/array/sort/index.md index e9fd11180e8b4a..37b41a61a2f2a9 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/sort/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/sort/index.md @@ -206,11 +206,7 @@ var result = mapped.map(function (el) { ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------ | ------------------ | ------------------ | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição Inicial. | -| {{SpecName('ES5.1', '#sec-15.4.4.11', 'Array.prototype.sort')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-array.prototype.sort', 'Array.prototype.sort')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/array/splice/index.md b/files/pt-br/web/javascript/reference/global_objects/array/splice/index.md index 9ce1715ada0977..6124329e543b07 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/splice/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/splice/index.md @@ -79,11 +79,7 @@ removed = myFish.splice(3, Number.MAX_VALUE); ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------------- | ------------------ | ------------------------------------------------- | -| ECMAScript 3rd Edition | Padrão | Definição inicial. Implementado no JavaScript 1.2 | -| {{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/array/tolocalestring/index.md b/files/pt-br/web/javascript/reference/global_objects/array/tolocalestring/index.md index 05834e8811dec5..f7e90c63de8a41 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/tolocalestring/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/tolocalestring/index.md @@ -48,11 +48,7 @@ Para mais exemplos, veja as páginas {{jsxref("Intl")}}, {{jsxref("NumberFormat" ## Especificações -| Especificação | Status | Comentários | -| -------------------------------------------------------------------------------------------- | ------------------ | ------------------ | -| {{SpecName('ES3')}} | {{Spec2('ES3')}} | Definição inicial. | -| {{SpecName('ES5.1', '#sec-15.2.4.3', 'Array.prototype.toLocaleString')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/array/tostring/index.md b/files/pt-br/web/javascript/reference/global_objects/array/tostring/index.md index dd010c7d210cbd..b3afb2f6b80d70 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/tostring/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/tostring/index.md @@ -34,11 +34,7 @@ Implementado no JavaScript 1.8.5 (Firefox 4), e compatível com a 5ª versão do ## Especificações -| Especificação | Status | Comentários | -| -------------------------------------------------------------------------------- | ------------------ | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial. Implementado no JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.4.4.2', 'Array.prototype.toString')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-array.prototype.tostring', 'Array.prototype.toString')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Browsers compatíveis diff --git a/files/pt-br/web/javascript/reference/global_objects/array/unshift/index.md b/files/pt-br/web/javascript/reference/global_objects/array/unshift/index.md index 482bfbe3fe0625..ce93e5777fdd48 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/unshift/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/unshift/index.md @@ -47,11 +47,7 @@ arr.unshift([-3]); ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------ | ------------------ | -------------------------------------------------- | -| ECMAScript 3ª Edição | Padrão | Definição inicial. Implementado no JavaScript 1.2. | -| {{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade entre browsers diff --git a/files/pt-br/web/javascript/reference/global_objects/array/values/index.md b/files/pt-br/web/javascript/reference/global_objects/array/values/index.md index 8ceda38a7c23ad..d7c861f6c1fde7 100644 --- a/files/pt-br/web/javascript/reference/global_objects/array/values/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/array/values/index.md @@ -41,9 +41,7 @@ console.log(eArr.next().value); // p ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------------- | ---------------- | ------------------ | -| {{SpecName('ES6', '#sec-array.prototype.values', 'Array.prototype.values')}} | {{Spec2('ES6')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/arraybuffer/index.md b/files/pt-br/web/javascript/reference/global_objects/arraybuffer/index.md index feb753442b645c..51da2e2db7d381 100644 --- a/files/pt-br/web/javascript/reference/global_objects/arraybuffer/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/arraybuffer/index.md @@ -79,11 +79,7 @@ var view = new Int32Array(buffer); ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------- | ------------------------ | --------------------------------------------------------------------- | -| {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Substituído pelo ECMAScript 6 | -| {{SpecName('ES6', '#sec-arraybuffer-constructor', 'ArrayBuffer')}} | {{Spec2('ES6')}} | Definição inicial no ECMA standard. Specified that `new` is required. | -| {{SpecName('ESDraft', '#sec-arraybuffer-constructor', 'ArrayBuffer')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/asyncfunction/index.md b/files/pt-br/web/javascript/reference/global_objects/asyncfunction/index.md index c1c36abc8e0564..3cf8bddb8aecf1 100644 --- a/files/pt-br/web/javascript/reference/global_objects/asyncfunction/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/asyncfunction/index.md @@ -81,9 +81,7 @@ a(10, 20).then((v) => { ## Especificações -| Especificação | Situação | Comentário | -| ------------------------------------------------------------------------------ | -------------------- | ---------------------------- | -| {{SpecName('ESDraft', '#sec-async-function-objects', 'AsyncFunction object')}} | {{Spec2('ESDraft')}} | Definição inicial no ES2017. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/atomics/add/index.md b/files/pt-br/web/javascript/reference/global_objects/atomics/add/index.md index 39649b9b67e449..a817fdb38316a0 100644 --- a/files/pt-br/web/javascript/reference/global_objects/atomics/add/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/atomics/add/index.md @@ -44,9 +44,7 @@ Atomics.load(ta, 0); // 12 ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------- | -------------------- | ---------------------------- | -| {{SpecName('ESDraft', '#sec-atomics.add', 'Atomics.add')}} | {{Spec2('ESDraft')}} | Definição inicial no ES2017. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/atomics/index.md b/files/pt-br/web/javascript/reference/global_objects/atomics/index.md index 2bb8b52d4a182b..fbbd913f5622f0 100644 --- a/files/pt-br/web/javascript/reference/global_objects/atomics/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/atomics/index.md @@ -47,9 +47,7 @@ Os métodos `wait()` e `wake()` são modelados no Linux futexes ("fast user-spac ## Especificações -| Especificações | Status | Comentário | -| ---------------------------------------------------------- | -------------------------- | ------------------ | -| {{SpecName('Shared Memory', '#AtomicsObject', 'Atomics')}} | {{Spec2('Shared Memory')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/boolean/index.md b/files/pt-br/web/javascript/reference/global_objects/boolean/index.md index 4d96bf8e59609d..985ed8f2d25744 100644 --- a/files/pt-br/web/javascript/reference/global_objects/boolean/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/boolean/index.md @@ -108,11 +108,7 @@ var bObjProto = new Boolean({}); ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------ | ------------------ | --------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial. Implementado no Java Script 1.0. | -| {{SpecName('ES5.1', '#sec-15.6', 'Boolean')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-boolean-objects', 'Boolean')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/boolean/tostring/index.md b/files/pt-br/web/javascript/reference/global_objects/boolean/tostring/index.md index 259e7139d51798..849b489611c9c2 100644 --- a/files/pt-br/web/javascript/reference/global_objects/boolean/tostring/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/boolean/tostring/index.md @@ -38,12 +38,7 @@ var myVar = flag.toString(); ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------------------------- | -------------------- | ------------------ | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial. | -| {{SpecName('ES5.1', '#sec-15.6.4.2', 'Boolean.prototype.toString')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/boolean/valueof/index.md b/files/pt-br/web/javascript/reference/global_objects/boolean/valueof/index.md index 2f1e98a64e40f4..b6bc963b4ab302 100644 --- a/files/pt-br/web/javascript/reference/global_objects/boolean/valueof/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/boolean/valueof/index.md @@ -34,11 +34,7 @@ myVar = x.valueOf(); // atribui o valor false à variável myVar ## Especificações -| Especificação | Condição | Comentário | -| ---------------------------------------------------------------------------------- | ------------------ | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial. Implementado no JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.6.4.3', 'Boolean.prototype.valueOf')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-boolean.prototype.valueof', 'Boolean.prototype.valueOf')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/dataview/index.md b/files/pt-br/web/javascript/reference/global_objects/dataview/index.md index e40cb871bab23b..a4a80cbc6dd97b 100644 --- a/files/pt-br/web/javascript/reference/global_objects/dataview/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/dataview/index.md @@ -115,11 +115,7 @@ dv.getInt16(1); //42 ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------- | ------------------------ | ---------------------------------- | -| {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Substituído pelo ECMAScript 6 | -| {{SpecName('ES6', '#sec-dataview-constructor', 'DataView')}} | {{Spec2('ES6')}} | Definição inicial no ECMA standard | -| {{SpecName('ESDraft', '#sec-dataview-constructor', 'DataView')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/@@toprimitive/index.md b/files/pt-br/web/javascript/reference/global_objects/date/@@toprimitive/index.md index 695018b1277184..ee5208145ed9b5 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/@@toprimitive/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/@@toprimitive/index.md @@ -47,9 +47,7 @@ testDate[Symbol.toPrimitive]("default"); ## Especificações -| Especificação | -| -------------------------------------------------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-date.prototype-@@toprimitive', 'Date.prototype.@@toPrimitive')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/getdate/index.md b/files/pt-br/web/javascript/reference/global_objects/date/getdate/index.md index 9d6ae0a7e4e8d5..eb1c04623eecb4 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/getdate/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/getdate/index.md @@ -38,11 +38,7 @@ console.log(day); // 25 ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------------- | ------------------ | -------------------------------------------------- | -| ECMAScript 1st Edition. | Standard | Definição inicial. Implementado em JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.9.5.14', 'Date.prototype.getDate')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/getday/index.md b/files/pt-br/web/javascript/reference/global_objects/date/getday/index.md index 4ffa100ca5b070..1a67857e2ac6b6 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/getday/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/getday/index.md @@ -38,11 +38,7 @@ console.log(weekday); // 1 ## Especificações -| **Especificação** | Status | **Comentário** | -| -------------------------------------------------------------------------- | ------------------ | -------------------------------------------------- | -| ECMAScript 1st Edition. | Standard | Definição inicial. Implementado em JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.16', 'Date.prototype.getDay')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getday', 'Date.prototype.getDay')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/getfullyear/index.md b/files/pt-br/web/javascript/reference/global_objects/date/getfullyear/index.md index e452d4233879f9..d428b956178ad1 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/getfullyear/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/getfullyear/index.md @@ -38,11 +38,7 @@ var year = today.getFullYear(); ## Especificações -| **Especificação** | Status | **Comentário** | -| ------------------------------------------------------------------------------------ | ------------------ | -------------------------------------------------- | -| ECMAScript 1st Edition. | Standard | Definição inicial. Implementado em JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.10', 'Date.prototype.getFullYear')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/gethours/index.md b/files/pt-br/web/javascript/reference/global_objects/date/gethours/index.md index 43011f667dd2c5..bb4f333af273a1 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/gethours/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/gethours/index.md @@ -38,11 +38,7 @@ console.log(hours); // 23 ## Especificações -| **Especificação** | Status | **Comentário** | -| ------------------------------------------------------------------------------ | ------------------ | -------------------------------------------------- | -| ECMAScript 1st Edition. | Standard | Definição inicial. Implementado em JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.18', 'Date.prototype.getHours')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/getmilliseconds/index.md b/files/pt-br/web/javascript/reference/global_objects/date/getmilliseconds/index.md index c7efa47b29785a..26eefbf75efd07 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/getmilliseconds/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/getmilliseconds/index.md @@ -30,12 +30,7 @@ var milliseconds = today.getMilliseconds(); ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------------------------------------ | -------------------- | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial. Implementado no JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.24', 'Date.prototype.getMilliseconds')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/getminutes/index.md b/files/pt-br/web/javascript/reference/global_objects/date/getminutes/index.md index 22eb8100a32812..0a9a08d0124926 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/getminutes/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/getminutes/index.md @@ -34,12 +34,7 @@ console.log(minutes); // 15 ## Especificações -| Specification | Status | Comment | -| -------------------------------------------------------------------------------------- | -------------------- | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial. Implementado no JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.20', 'Date.prototype.getMinutes')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/getmonth/index.md b/files/pt-br/web/javascript/reference/global_objects/date/getmonth/index.md index b719b5e112c983..02f02555d4ba1e 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/getmonth/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/getmonth/index.md @@ -36,11 +36,7 @@ console.log(month); // 11 ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------ | ------------------ | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial. Implementado no JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.12', 'Date.prototype.getMonth')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/gettime/index.md b/files/pt-br/web/javascript/reference/global_objects/date/gettime/index.md index 76bc4567226aa3..85aba5c1e68990 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/gettime/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/gettime/index.md @@ -50,12 +50,7 @@ console.log("Operation took " + (end.getTime() - start.getTime()) + " msec"); ## Especificações -| Specification | Status | Comment | -| -------------------------------------------------------------------------------- | -------------------- | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial. Implementado em JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.9', 'Date.prototype.getTime')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/gettimezoneoffset/index.md b/files/pt-br/web/javascript/reference/global_objects/date/gettimezoneoffset/index.md index 460fb2ada47719..f4e40762701056 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/gettimezoneoffset/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/gettimezoneoffset/index.md @@ -32,11 +32,7 @@ var currentTimeZoneOffsetInHours = x.getTimezoneOffset() / 60; ## Especificações -| Especificação | Situação | comentário | -| ------------------------------------------------------------------------------------------------ | ------------------ | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Initial definition. Implemented in JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.26', 'Date.prototype.getTimezoneOffset')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/getutcdate/index.md b/files/pt-br/web/javascript/reference/global_objects/date/getutcdate/index.md index 589585b629eef8..f474bf2967dee1 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/getutcdate/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/getutcdate/index.md @@ -30,12 +30,7 @@ var day = today.getUTCDate(); ## Especificações -| Specification | Status | Comment | -| -------------------------------------------------------------------------------------- | -------------------- | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial. Implementado no JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.15', 'Date.prototype.getUTCDate')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getutcdate', 'Date.prototype.getUTCDate')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getutcdate', 'Date.prototype.getUTCDate')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/getutcday/index.md b/files/pt-br/web/javascript/reference/global_objects/date/getutcday/index.md index f0f95cc436d541..ee5881d05ad309 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/getutcday/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/getutcday/index.md @@ -34,11 +34,7 @@ var diaDaSemana = hoje.getUTCDay(); ## Especificações -| Especificação | Situação | Comentário | -| -------------------------------------------------------------------------------- | ------------------ | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial. Implementado no JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.17', 'Date.prototype.getUTCDay')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getutcday', 'Date.prototype.getUTCDay')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/getutcfullyear/index.md b/files/pt-br/web/javascript/reference/global_objects/date/getutcfullyear/index.md index e51580a41d4e3e..754163494994e5 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/getutcfullyear/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/getutcfullyear/index.md @@ -36,12 +36,7 @@ var year = today.getUTCFullYear(); ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------------------------------- | -------------------- | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial. Implementado no JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.11', 'Date.prototype.getUTCFullYear')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/getutchours/index.md b/files/pt-br/web/javascript/reference/global_objects/date/getutchours/index.md index 2f30e75c4c2568..2d68a46d821b58 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/getutchours/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/getutchours/index.md @@ -30,9 +30,7 @@ var hours = today.getUTCHours(); ## Especificações -| Especificação | -| ---------------------------------------------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/getutcmilliseconds/index.md b/files/pt-br/web/javascript/reference/global_objects/date/getutcmilliseconds/index.md index 3ab643c65ceee4..f828e3fa5b3df5 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/getutcmilliseconds/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/getutcmilliseconds/index.md @@ -30,12 +30,7 @@ var milissegundos = today.getUTCMilliseconds(); ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------------------------ | -------------------- | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | definição inicial. Implementado no JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.25', 'Date.prototype.getUTCMilliseconds')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getutcmilliseconds', 'Date.prototype.getUTCMilliseconds')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getutcmilliseconds', 'Date.prototype.getUTCMilliseconds')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/getutcminutes/index.md b/files/pt-br/web/javascript/reference/global_objects/date/getutcminutes/index.md index e22e0dc5604040..a2aee2def4aaa9 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/getutcminutes/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/getutcminutes/index.md @@ -32,9 +32,7 @@ var minutes = today.getUTCMinutes(); ## Especificações -| Especificação | -| -------------------------------------------------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-date.prototype.getutcminutes', 'Date.prototype.getUTCMinutes')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/getutcmonth/index.md b/files/pt-br/web/javascript/reference/global_objects/date/getutcmonth/index.md index fdae2dd19ffdc6..4d9936d6ee2da5 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/getutcmonth/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/getutcmonth/index.md @@ -30,12 +30,7 @@ var month = today.getUTCMonth(); ## Especificações -| Specification | Status | Comment | -| ---------------------------------------------------------------------------------------- | -------------------- | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Initial definition. Implemented in JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.13', 'Date.prototype.getUTCMonth')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getutcmonth', 'Date.prototype.getUTCMonth')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getutcmonth', 'Date.prototype.getUTCMonth')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/getutcseconds/index.md b/files/pt-br/web/javascript/reference/global_objects/date/getutcseconds/index.md index b03b9161b4e77d..abf4b78ac3715b 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/getutcseconds/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/getutcseconds/index.md @@ -34,12 +34,7 @@ var seconds = today.getUTCSeconds(); ## Especificações -| Especificação | Estado | Comentário | -| -------------------------------------------------------------------------------------------- | -------------------- | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial. Implementado no JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.23', 'Date.prototype.getUTCSeconds')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getutcseconds', 'Date.prototype.getUTCSeconds')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getutcseconds', 'Date.prototype.getUTCSeconds')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/getyear/index.md b/files/pt-br/web/javascript/reference/global_objects/date/getyear/index.md index d66596808e8d96..6cbcb1b1206e67 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/getyear/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/getyear/index.md @@ -78,11 +78,7 @@ var year = Xmas.getYear(); // returns 95 ## Especificações -| **Especificação** | Status | **Comentário** | -| ---------------------------------------------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------- | -| ECMAScript 1st Edition. | Standard | Definição inicial. Implementado em JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-B.2.4', 'Date.prototype.getYear')}} | {{Spec2('ES5.1')}} | Definido em (informativo) compatibilidade annex. | -| {{SpecName('ES6', '#sec-date.prototype.getyear', 'Date.prototype.getYear')}} | {{Spec2('ES6')}} | Definido em (normativo) annex para funcionalidades adicionais para futuros browsers web. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/index.md b/files/pt-br/web/javascript/reference/global_objects/date/index.md index b448cb608ff655..896fcdf68477fd 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/index.md @@ -167,12 +167,7 @@ retornoDaSuaFuncao = imprimirTempoDecorrido(suaFuncao); ## Especificações -| Especificação | Estado | Comentário | -| ---------------------------------------------------- | -------------------- | -------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-date-objects', 'Date')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES6', '#sec-date-objects', 'Date')}} | {{Spec2('ES6')}} | | -| {{SpecName('ES5.1', '#sec-15.9', 'Date')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial. Implementado no JavaScript 1.1. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/now/index.md b/files/pt-br/web/javascript/reference/global_objects/date/now/index.md index e7997a8bf5d1ba..aa6888e2971037 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/now/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/now/index.md @@ -39,10 +39,7 @@ if (!Date.now) { ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------- | ------------------ | ------------------------------------------------- | -| {{SpecName('ES5.1', '#sec-15.9.4.4', 'Date.now')}} | {{Spec2('ES5.1')}} | Definição inicial. Implementado no JavaScript 1.5 | -| {{SpecName('ES6', '#sec-date.now', 'Date.now')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/setdate/index.md b/files/pt-br/web/javascript/reference/global_objects/date/setdate/index.md index 919cea2474b27a..c47dd53bdf79b7 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/setdate/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/setdate/index.md @@ -48,9 +48,7 @@ theBigDay.setDate(-50); // 1962-08-11 (11th of August 1962) ## Especificações -| Especificação | -| -------------------------------------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/setfullyear/index.md b/files/pt-br/web/javascript/reference/global_objects/date/setfullyear/index.md index b9c3c3fa044758..cb9287ffe3c17f 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/setfullyear/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/setfullyear/index.md @@ -45,9 +45,7 @@ theBigDay.setFullYear(1997); ## Especificações -| Especificação | -| ---------------------------------------------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/sethours/index.md b/files/pt-br/web/javascript/reference/global_objects/date/sethours/index.md index 392deba1c69509..ee1a7429f071b5 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/sethours/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/sethours/index.md @@ -53,9 +53,7 @@ theBigDay.setHours(7); ## Especificações -| Especificação | -| ---------------------------------------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-date.prototype.sethours', 'Date.prototype.setHours')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/setmilliseconds/index.md b/files/pt-br/web/javascript/reference/global_objects/date/setmilliseconds/index.md index b703774d94d1d6..62522a144bf39f 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/setmilliseconds/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/setmilliseconds/index.md @@ -39,9 +39,7 @@ theBigDay.setMilliseconds(100); ## Especificações -| Especificação | -| ------------------------------------------------------------------------------------------------ | -| {{SpecName('ESDraft', '#sec-date.prototype.setmilliseconds', 'Date.prototype.setMilliseconds')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/setminutes/index.md b/files/pt-br/web/javascript/reference/global_objects/date/setminutes/index.md index 76e0e473865d18..7ddb36ae899b26 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/setminutes/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/setminutes/index.md @@ -51,9 +51,7 @@ theBigDay.setMinutes(45); ## Especificações -| Especificação | -| -------------------------------------------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-date.prototype.setminutes', 'Date.prototype.setMinutes')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/setmonth/index.md b/files/pt-br/web/javascript/reference/global_objects/date/setmonth/index.md index e8cac2cdc2d490..59920edaf0752e 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/setmonth/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/setmonth/index.md @@ -56,9 +56,7 @@ console.log(endOfMonth); //Wed Mar 02 2016 00:00:00 ## Especificações -| Especificação | -| ---------------------------------------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/setseconds/index.md b/files/pt-br/web/javascript/reference/global_objects/date/setseconds/index.md index 1134ad8a3a6db6..1a15883def4bfb 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/setseconds/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/setseconds/index.md @@ -49,9 +49,7 @@ theBigDay.setSeconds(30); ## Especificações -| Especificação | -| -------------------------------------------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-date.prototype.setseconds', 'Date.prototype.setSeconds')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/settime/index.md b/files/pt-br/web/javascript/reference/global_objects/date/settime/index.md index be294b085b89e4..50061ab5d5a1fe 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/settime/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/settime/index.md @@ -36,12 +36,7 @@ sameAsBigDay.setTime(theBigDay.getTime()); ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------------------- | -------------------- | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial. Implementado no JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.27', 'Date.prototype.setTime')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.settime', 'Date.prototype.setTime')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.settime', 'Date.prototype.setTime')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/setutcdate/index.md b/files/pt-br/web/javascript/reference/global_objects/date/setutcdate/index.md index e1886b3b2cd510..921f1ec472563f 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/setutcdate/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/setutcdate/index.md @@ -39,9 +39,7 @@ theBigDay.setUTCDate(20); ## Especificações -| Especificação | -| -------------------------------------------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-date.prototype.setutcdate', 'Date.prototype.setUTCDate')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/setutcfullyear/index.md b/files/pt-br/web/javascript/reference/global_objects/date/setutcfullyear/index.md index 85a46d527b5abb..181c4380299b9c 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/setutcfullyear/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/setutcfullyear/index.md @@ -45,9 +45,7 @@ theBigDay.setUTCFullYear(1997); ## Especificações -| Especificação | -| ---------------------------------------------------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-date.prototype.setutcfullyear', 'Date.prototype.setUTCFullYear')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/setutchours/index.md b/files/pt-br/web/javascript/reference/global_objects/date/setutchours/index.md index 1065062d3eb97c..83fa7adbe39678 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/setutchours/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/setutchours/index.md @@ -47,9 +47,7 @@ theBigDay.setUTCHours(8); ## Especificações -| Especificação | -| ---------------------------------------------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-date.prototype.setutchours', 'Date.prototype.setUTCHours')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/setutcmilliseconds/index.md b/files/pt-br/web/javascript/reference/global_objects/date/setutcmilliseconds/index.md index 281526b8c57f93..9f6db7ae786bfe 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/setutcmilliseconds/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/setutcmilliseconds/index.md @@ -39,9 +39,7 @@ theBigDay.setUTCMilliseconds(500); ## Especificações -| Especificação | -| ------------------------------------------------------------------------------------------------------ | -| {{SpecName('ESDraft', '#sec-date.prototype.setutcmilliseconds', 'Date.prototype.setUTCMilliseconds')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/setutcminutes/index.md b/files/pt-br/web/javascript/reference/global_objects/date/setutcminutes/index.md index b2d6c4a68ae97b..6583904be51599 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/setutcminutes/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/setutcminutes/index.md @@ -45,9 +45,7 @@ theBigDay.setUTCMinutes(43); ## Especificações -| Especificação | -| -------------------------------------------------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-date.prototype.setutcminutes', 'Date.prototype.setUTCMinutes')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/setutcmonth/index.md b/files/pt-br/web/javascript/reference/global_objects/date/setutcmonth/index.md index 50177ccbb4a3af..fa48e0674ab960 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/setutcmonth/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/setutcmonth/index.md @@ -43,9 +43,7 @@ theBigDay.setUTCMonth(11); ## Especificações -| Especificação | -| ---------------------------------------------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-date.prototype.setutcmonth', 'Date.prototype.setUTCMonth')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/setutcseconds/index.md b/files/pt-br/web/javascript/reference/global_objects/date/setutcseconds/index.md index c4f115f5732891..7ed095dde9bb23 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/setutcseconds/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/setutcseconds/index.md @@ -43,9 +43,7 @@ theBigDay.setUTCSeconds(20); ## Especificações -| Especificação | -| -------------------------------------------------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-date.prototype.setutcseconds', 'Date.prototype.setUTCSeconds')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/setyear/index.md b/files/pt-br/web/javascript/reference/global_objects/date/setyear/index.md index 9aaa68e1983a90..51b461648dd305 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/setyear/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/setyear/index.md @@ -42,9 +42,7 @@ theBigDay.setYear(2000); ## Especificações -| Especificação | -| -------------------------------------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-date.prototype.setyear', 'Date.prototype.setYear')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/todatestring/index.md b/files/pt-br/web/javascript/reference/global_objects/date/todatestring/index.md index 1aafc8c147f632..d2632743757be2 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/todatestring/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/todatestring/index.md @@ -32,12 +32,7 @@ console.log(d.toDateString()); // exibe Wed Jul 28 1993 no log ## Especificações -| Especificação | Situação | Comentário | -| ------------------------------------------------------------------------------------------ | -------------------- | ------------------ | -| {{SpecName('ES3')}} | {{Spec2('ES3')}} | Definição inicial. | -| {{SpecName('ES5.1', '#sec-15.9.5.3', 'Date.prototype.toDateString')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.todatestring', 'Date.prototype.toDateString')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.todatestring', 'Date.prototype.toDateString')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/toisostring/index.md b/files/pt-br/web/javascript/reference/global_objects/date/toisostring/index.md index 9723fb3a09f166..47ad961606fda3 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/toisostring/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/toisostring/index.md @@ -69,9 +69,7 @@ O exemplo acima usa uma conversão de uma _string_ não-padrão que pode não se ## Especificações -| Especificação | -| ---------------------------------------------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/tojson/index.md b/files/pt-br/web/javascript/reference/global_objects/date/tojson/index.md index dea7965a5ba705..06248eb20e33a9 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/tojson/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/tojson/index.md @@ -36,11 +36,7 @@ console.log(jsonDate); //2015-10-26T07:46:36.611Z ## Especificações -| Especificação | Status | Comentários | -| ------------------------------------------------------------------------------ | -------------------- | ---------------------------------------------------- | -| {{SpecName('ES5.1', '#sec-15.9.5.44', 'Date.prototype.toJSON')}} | {{Spec2('ES5.1')}} | Definição inicial. Implementado no JavaScript 1.8.5. | -| {{SpecName('ES6', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/tolocaledatestring/index.md b/files/pt-br/web/javascript/reference/global_objects/date/tolocaledatestring/index.md index 9bebf24f6e8ed0..450becf20b950d 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/tolocaledatestring/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/tolocaledatestring/index.md @@ -120,15 +120,7 @@ Ao formatar um grande número de datas, é melhor criar um objeto {{jsxref("Glob ## Especificações -| Specification | Status | Comment | -| ----------------------------------------------------------------------------------------------------------- | ------------------------- | -------------------------------------------------- | -| {{SpecName('ES3')}} | {{Spec2('ES3')}} | Definição inicial. Implementada no JavaScript 1.0. | -| {{SpecName('ES5.1', 'sec-15.9.5.6', 'Date.prototype.toLocaleDateString')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.tolocaledatestring', 'Date.prototype.toLocaleDateString')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.tolocaledatestring', 'Date.prototype.toLocaleDateString')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES Int 1.0', '#sec-13.3.2', 'Date.prototype.toLocaleDateString')}} | {{Spec2('ES Int 1.0')}} | Define os argumentos `locales` e `options`. | -| {{SpecName('ES Int 2.0', '#sec-13.3.2', 'Date.prototype.toLocaleDateString')}} | {{Spec2('ES Int 2.0')}} | | -| {{SpecName('ES Int Draft', '#sec-Date.prototype.toLocaleDateString', 'Date.prototype.toLocaleDateString')}} | {{Spec2('ES Int Draft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/tolocaletimestring/index.md b/files/pt-br/web/javascript/reference/global_objects/date/tolocaletimestring/index.md index dd425c5e01c6a5..952b9a2907069e 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/tolocaletimestring/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/tolocaletimestring/index.md @@ -108,15 +108,7 @@ Quando se formata um grande número de datas, é aconselhável criar um objeto { ## Especificações -| Especificação | Status | Comentário | -| ----------------------------------------------------------------------------------------------------------- | ------------------------- | -------------------------------------------------- | -| {{SpecName('ES3')}} | {{Spec2('ES3')}} | Definição inicial, Implementado no JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.7', 'Date.prototype.toLocaleTimeString')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleTimeString')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleTimeString')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES Int 1.0', '#sec-13.3.3', 'Date.prototype.toLocaleTimeString')}} | {{Spec2('ES Int 1.0')}} | Define os argumentos `locales` e `options`. | -| {{SpecName('ES Int 2.0', '#sec-13.3.3', 'Date.prototype.toLocaleTimeString')}} | {{Spec2('ES Int 2.0')}} | | -| {{SpecName('ES Int Draft', '#sec-Date.prototype.toLocaleTimeString', 'Date.prototype.toLocaleTimeString')}} | {{Spec2('ES Int Draft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/tostring/index.md b/files/pt-br/web/javascript/reference/global_objects/date/tostring/index.md index 1cd07891850a32..cf1683692b98c8 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/tostring/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/tostring/index.md @@ -74,9 +74,7 @@ var myVar = x.toString(); // atribui uma string em myVar no mesmo formato que es ## Especificações -| Especificação | -| ---------------------------------------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-date.prototype.tostring', 'Date.prototype.toString')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/totimestring/index.md b/files/pt-br/web/javascript/reference/global_objects/date/totimestring/index.md index c015eb6c9b0f0d..e0aab93e65d1da 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/totimestring/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/totimestring/index.md @@ -38,9 +38,7 @@ console.log(d.toTimeString()); // 14:39:07 GMT-0600 (PDT) ## Especificações -| Especificação | -| ------------------------------------------------------------------------------------------ | -| {{SpecName('ESDraft', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/toutcstring/index.md b/files/pt-br/web/javascript/reference/global_objects/date/toutcstring/index.md index f647e81a39d7df..1fe3c8db7662d6 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/toutcstring/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/toutcstring/index.md @@ -48,9 +48,7 @@ let UTCstring = today.toUTCString(); // Wed, 14 Jun 2017 07:00:00 GMT ## Especificações -| Especificação | -| ---------------------------------------------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/utc/index.md b/files/pt-br/web/javascript/reference/global_objects/date/utc/index.md index edd060fee8662e..3a473eab74bdc7 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/utc/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/utc/index.md @@ -57,11 +57,7 @@ var dataUniversal = new Date(Date.UTC(96, 11, 1, 0, 0, 0)); ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------- | ------------------ | -------------------------------------------------- | -| {{SpecName('ES6', '#sec-date.utc', 'Date.UTC')}} | {{Spec2('ES6')}} | | -| {{SpecName('ES5.1', '#sec-15.9.4.3', 'Date.UTC')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial. Implementado no JavaScript 1.0. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/date/valueof/index.md b/files/pt-br/web/javascript/reference/global_objects/date/valueof/index.md index f332206897c4d9..54ced65b9116e8 100644 --- a/files/pt-br/web/javascript/reference/global_objects/date/valueof/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/date/valueof/index.md @@ -38,9 +38,7 @@ var myVar = x.valueOf(); // atribui -424713600000 to myVar ## Especificações -| Especificação | -| -------------------------------------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-date.prototype.valueof', 'Date.prototype.valueOf')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/decodeuri/index.md b/files/pt-br/web/javascript/reference/global_objects/decodeuri/index.md index 41bc7a59e47dc0..12ac8f5ae13420 100644 --- a/files/pt-br/web/javascript/reference/global_objects/decodeuri/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/decodeuri/index.md @@ -57,12 +57,7 @@ try { ## Especificações -| Specification | Status | Comment | -| ----------------------------------------------------------------- | -------------------- | ------------------ | -| {{SpecName('ES3')}} | {{Spec2('ES3')}} | Definição inicial. | -| {{SpecName('ES5.1', '#sec-15.1.3.1', 'decodeURI')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-decodeuri-encodeduri', 'decodeURI')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-decodeuri-encodeduri', 'decodeURI')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/decodeuricomponent/index.md b/files/pt-br/web/javascript/reference/global_objects/decodeuricomponent/index.md index 5a9a81a815c07d..3f24b13549c9c1 100644 --- a/files/pt-br/web/javascript/reference/global_objects/decodeuricomponent/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/decodeuricomponent/index.md @@ -33,11 +33,7 @@ decodeURIComponent("JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B"); ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------------------------- | ------------------ | ----------------- | -| {{SpecName('ES3')}} | {{Spec2('ES3')}} | Definição inicial | -| {{SpecName('ES5.1', '#sec-15.1.3.2', 'decodeURIComponent')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-decodeuricomponent-encodeduricomponent', 'decodeURIComponent')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/encodeuri/index.md b/files/pt-br/web/javascript/reference/global_objects/encodeuri/index.md index 4b396f5dc2ea00..ecc63a6d43a78b 100644 --- a/files/pt-br/web/javascript/reference/global_objects/encodeuri/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/encodeuri/index.md @@ -91,9 +91,7 @@ function fixedEncodeURI(str) { ## Especificações -| Especificação | -| ---------------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-encodeuri-uri', 'encodeURI')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/encodeuricomponent/index.md b/files/pt-br/web/javascript/reference/global_objects/encodeuricomponent/index.md index b9ad34654c9d98..faf1420030ee01 100644 --- a/files/pt-br/web/javascript/reference/global_objects/encodeuricomponent/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/encodeuricomponent/index.md @@ -78,11 +78,7 @@ function encodeRFC5987ValueChars(str) { ## Especificações -| Especificação | Status | Comentario | -| --------------------------------------------------------------------------------- | ------------------ | ------------------ | -| {{SpecName('ES3')}} | {{Spec2('ES3')}} | Definição Inicial. | -| {{SpecName('ES5.1', '#sec-15.1.3.4', 'encodeURIComponent')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/error/index.md b/files/pt-br/web/javascript/reference/global_objects/error/index.md index 4db99d195a5adf..7adc78efb0ba5e 100644 --- a/files/pt-br/web/javascript/reference/global_objects/error/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/error/index.md @@ -134,11 +134,7 @@ try { ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------- | ------------------ | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial. Implementada no JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.11', 'Error')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-error-objects', 'Error')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/error/tostring/index.md b/files/pt-br/web/javascript/reference/global_objects/error/tostring/index.md index 9f69fa2a32a7f5..07049fbd58b705 100644 --- a/files/pt-br/web/javascript/reference/global_objects/error/tostring/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/error/tostring/index.md @@ -70,9 +70,7 @@ console.log(e.toString()); // 'hello' ## Especificações -| Especificação | -| ------------------------------------------------------------------------------------ | -| {{SpecName('ESDraft', '#sec-error.prototype.tostring', 'Error.prototype.toString')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/escape/index.md b/files/pt-br/web/javascript/reference/global_objects/escape/index.md index 82d5378d0e7032..3618fff3684742 100644 --- a/files/pt-br/web/javascript/reference/global_objects/escape/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/escape/index.md @@ -35,12 +35,7 @@ escape("@*_+-./"); // "@*_+-./" ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial. | -| {{SpecName('ES5.1', '#sec-B.2.1', 'escape')}} | {{Spec2('ES5.1')}} | Definido no (informativo) de compatibilidade Anexo B | -| {{SpecName('ES6', '#sec-escape-string', 'escape')}} | {{Spec2('ES6')}} | Definido no (normativo) Anexo B para recursos adicionais do ECMAScript para navegadores da web | -| {{SpecName('ESDraft', '#sec-escape-string', 'escape')}} | {{Spec2('ESDraft')}} | Definido no (normativa) Anexo B para recursos adicionais do ECMAScript para navegadores da web | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/eval/index.md b/files/pt-br/web/javascript/reference/global_objects/eval/index.md index 60518e18f7f1a9..d18883cb18f258 100644 --- a/files/pt-br/web/javascript/reference/global_objects/eval/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/eval/index.md @@ -169,11 +169,7 @@ var fct2 = eval(fctStr2); // return a function ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------- | ------------------ | ----------------- | -| ECMAScript 1st Edition. | Standard | Definição inicial | -| {{SpecName('ES5.1', '#sec-15.1.2.1', 'eval')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-eval-x', 'eval')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/evalerror/index.md b/files/pt-br/web/javascript/reference/global_objects/evalerror/index.md index e2f5d57fdb939b..076929a231b00f 100644 --- a/files/pt-br/web/javascript/reference/global_objects/evalerror/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/evalerror/index.md @@ -63,12 +63,7 @@ try { ## Especificações -| Especificação | Status | Comentário | -| ----------------------------------------------------------------------------------------------- | -------------------- | --------------------------------------------------------------------------------- | -| {{SpecName('ES3')}} | {{Spec2('ES3')}} | Definição inicial. | -| {{SpecName('ES5.1', '#sec-15.11.6.1', 'EvalError')}} | {{Spec2('ES5.1')}} | Não utilizada na especificação. Presente para compatibilidade com outras versões. | -| {{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}} | {{Spec2('ES6')}} | Não utilizada na especificação. Presente para compatibilidade com outras versões. | -| {{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/float32array/index.md b/files/pt-br/web/javascript/reference/global_objects/float32array/index.md index 37b1dc107d5dc3..bf082e9640e780 100644 --- a/files/pt-br/web/javascript/reference/global_objects/float32array/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/float32array/index.md @@ -146,11 +146,7 @@ var float32 = new Float32Array(iterable); ## Especificações -| Especificação | Status | Comment | -| --------------------------------------------------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ | -| {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Suplantada pelo ECMAScript 2015. | -| {{SpecName('ES6', '#table-49', 'TypedArray constructors')}} | {{Spec2('ES6')}} | Definição inicial no padrão ECMA. Especificado que o `new` é requerido. | -| {{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}} | {{Spec2('ESDraft')}} | O ECMAScript 7 mudou o construtor da Array `Array32Float` para o uso da operação `ToIndex` e ajudar nos construtores sem argumentos. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/function/apply/index.md b/files/pt-br/web/javascript/reference/global_objects/function/apply/index.md index 8aac50a024d99f..35dda01e9e4179 100644 --- a/files/pt-br/web/javascript/reference/global_objects/function/apply/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/function/apply/index.md @@ -146,11 +146,7 @@ Esse método é especialmente útil quando você quer fazer debug de eventos, ou ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------------------- | ------------------ | -------------------------------------------------- | -| ECMAScript 3º Edição. | Padrão | Definição inicial, implementado no JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.3.4.3', 'Function.prototype.apply')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-function.prototype.apply', 'Function.prototype.apply')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/function/bind/index.md b/files/pt-br/web/javascript/reference/global_objects/function/bind/index.md index 523255d35e88af..852880de2da38c 100644 --- a/files/pt-br/web/javascript/reference/global_objects/function/bind/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/function/bind/index.md @@ -234,10 +234,7 @@ Se você escolher utilizar esta implementação parcial, **você não deve confi ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------ | ------------------ | ---------------------------------------------------- | -| {{SpecName('ES5.1', '#sec-15.3.4.5', 'Function.prototype.bind')}} | {{Spec2('ES5.1')}} | Definição inicial. Implementada no JavaScript 1.8.5. | -| {{SpecName('ES6', '#sec-function.prototype.bind', 'Function.prototype.bind')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/function/call/index.md b/files/pt-br/web/javascript/reference/global_objects/function/call/index.md index 737c42005ce230..91a6930da53a34 100644 --- a/files/pt-br/web/javascript/reference/global_objects/function/call/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/function/call/index.md @@ -105,11 +105,7 @@ apresentacao.call(i); // Douglas Crockford é um excelente Desenvolvedor Javascr ## Especificações -| Especificações | Status | Comentário | -| ------------------------------------------------------------------------------ | ------------------ | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial. Implementado no JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.3.4.4', 'Function.prototype.call')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-function.prototype.call', 'Function.prototype.call')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/function/length/index.md b/files/pt-br/web/javascript/reference/global_objects/function/length/index.md index c3f7c1fc3f1238..661bd6230b67cf 100644 --- a/files/pt-br/web/javascript/reference/global_objects/function/length/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/function/length/index.md @@ -36,11 +36,7 @@ console.log( ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------ | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Initial definition. Implemented in JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.3.5.1', 'Function.length')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-function-instances-length', 'Function.length')}} | {{Spec2('ES6')}} | The `configurable` attribute of this property is now `true`. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/function/name/index.md b/files/pt-br/web/javascript/reference/global_objects/function/name/index.md index 9d85f21f73155e..bd5f4a9dbe4d9d 100644 --- a/files/pt-br/web/javascript/reference/global_objects/function/name/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/function/name/index.md @@ -202,10 +202,7 @@ Na versão descomprimida, o programa cai no bloco-verdade e grava o log _'foo' i ## Especificações -| Specification | Status | Comment | -| --------------------------------------------------------------- | -------------------- | ------------------ | -| {{SpecName('ES2015', '#sec-name', 'name')}} | {{Spec2('ES2015')}} | Definição inicial. | -| {{SpecName('ESDraft', '#sec-function-instances-name', 'name')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/function/tostring/index.md b/files/pt-br/web/javascript/reference/global_objects/function/tostring/index.md index d3220a456a5807..43d3c62bd1e566 100644 --- a/files/pt-br/web/javascript/reference/global_objects/function/tostring/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/function/tostring/index.md @@ -116,12 +116,7 @@ Object.getOwnPropertyDescriptor({ ## Especificações -| Especificação | Status | Comentário | -| --------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial. Implementado no JavaScript 1.1. | -| {{SpecName('ES6', '#sec-function.prototype.tostring', 'Function.prototype.toString')}} | {{Spec2('ES6')}} | Mais requisitos específicos foram incluídos para representação de string. | -| [`Function.prototype.toString` revisions proposal](https://tc39.github.io/Function-prototype-toString-revision/#sec-introduction) | Rascunho | Padroniza a função de string navida e fins de linha. | -| {{SpecName('ESDraft', '#sec-function.prototype.tostring', 'Function.prototype.toString')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/generator/index.md b/files/pt-br/web/javascript/reference/global_objects/generator/index.md index 0e3053db8e8499..874872ecc0f510 100644 --- a/files/pt-br/web/javascript/reference/global_objects/generator/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/generator/index.md @@ -79,10 +79,7 @@ console.log(it.next()); // throws StopIteration (Como o generator está fechado) ## Especificações -| Especificações | Status | Comentário | -| ---------------------------------------------------------------------- | -------------------- | ----------------- | -| {{SpecName('ES6', '#sec-generator-objects', 'Generator objects')}} | {{Spec2('ES6')}} | Definição Inicial | -| {{SpecName('ESDraft', '#sec-generator-objects', 'Generator objects')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/infinity/index.md b/files/pt-br/web/javascript/reference/global_objects/infinity/index.md index 4a19a1230154d9..0d01d3afd3059a 100644 --- a/files/pt-br/web/javascript/reference/global_objects/infinity/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/infinity/index.md @@ -27,11 +27,7 @@ Pela especificação ECMAScript 5, `Infinity` é somente leitura (implementado n ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------------------------- | ------------------ | ------------------------------------------------- | -| ECMAScript 1ª Edição. | Padrão | Definição inicial. Implementado no JavaScript 1.3 | -| {{SpecName('ES5.1', '#sec-15.1.1.2', 'Infinity')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade diff --git a/files/pt-br/web/javascript/reference/global_objects/int16array/index.md b/files/pt-br/web/javascript/reference/global_objects/int16array/index.md index 47408c97573bd9..6aa30691078b1d 100644 --- a/files/pt-br/web/javascript/reference/global_objects/int16array/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/int16array/index.md @@ -146,11 +146,7 @@ var int16 = new Int16Array(iterable); ## Especificações -| Especificação | Status | Comentário | -| --------------------------------------------------------------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Substituído pelo ECMAScript 2015. | -| {{SpecName('ES2015', '#table-49', 'TypedArray constructors')}} | {{Spec2('ES2015')}} | Definição inicial em um padrão ECMA. Especificado `new` como requerido. | -| {{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}} | {{Spec2('ESDraft')}} | ECMAScript 2017 mudou o construtor `Int16Array` para usar a operação `ToIndex` e permitir construtores sem argumentos. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/intl/numberformat/index.md b/files/pt-br/web/javascript/reference/global_objects/intl/numberformat/index.md index 35748b5532447c..3a803bc225f862 100644 --- a/files/pt-br/web/javascript/reference/global_objects/intl/numberformat/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/intl/numberformat/index.md @@ -157,11 +157,7 @@ console.log( ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------------- | ------------------------- | ------------------ | -| {{SpecName('ES Int 1.0', '#sec-11.1', 'Intl.NumberFormat')}} | {{Spec2('ES Int 1.0')}} | Definição inicial. | -| {{SpecName('ES Int 2.0', '#sec-11.1', 'Intl.NumberFormat')}} | {{Spec2('ES Int 2.0')}} | | -| {{SpecName('ES Int Draft', '#numberformat-objects', 'Intl.NumberFormat')}} | {{Spec2('ES Int Draft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/isfinite/index.md b/files/pt-br/web/javascript/reference/global_objects/isfinite/index.md index 50cead1e148a1a..c667f5417f1ce9 100644 --- a/files/pt-br/web/javascript/reference/global_objects/isfinite/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/isfinite/index.md @@ -41,11 +41,7 @@ isFinite("0"); // true, teria sido false com o ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------- | ------------------ | ------------------ | -| {{SpecName('ES3')}} | {{Spec2('ES3')}} | Definição inicial. | -| {{SpecName('ES5.1', '#sec-15.1.2.5', 'isFinite')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-isfinite-number', 'isFinite')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Browser compatibilidade diff --git a/files/pt-br/web/javascript/reference/global_objects/json/index.md b/files/pt-br/web/javascript/reference/global_objects/json/index.md index 08f4d4c79d8365..c507df499664f8 100644 --- a/files/pt-br/web/javascript/reference/global_objects/json/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/json/index.md @@ -150,10 +150,7 @@ if (!window.JSON) { ## Especificações -| Especificação | Status | Comentário | -| ----------------------------------------------- | ------------------ | ---------- | -| {{SpecName('ES5.1', '#sec-15.12', 'JSON')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-json-object', 'JSON')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Navegador compatível diff --git a/files/pt-br/web/javascript/reference/global_objects/json/parse/index.md b/files/pt-br/web/javascript/reference/global_objects/json/parse/index.md index ba2a8d5fb87b98..27480b2ca089ba 100644 --- a/files/pt-br/web/javascript/reference/global_objects/json/parse/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/json/parse/index.md @@ -83,11 +83,7 @@ JSON.parse('{"foo" : 1, }'); ## Especificações -| Especificações | Status | Comentário | -| -------------------------------------------------------- | -------------------- | -------------------------------------------------- | -| {{SpecName('ES5.1', '#sec-15.12.2', 'JSON.parse')}} | {{Spec2('ES5.1')}} | Initial definition. Implemented in JavaScript 1.7. | -| {{SpecName('ES6', '#sec-json.parse', 'JSON.parse')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-json.parse', 'JSON.parse')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/json/stringify/index.md b/files/pt-br/web/javascript/reference/global_objects/json/stringify/index.md index 6a241493b11b32..0c6fdcfec2faa5 100644 --- a/files/pt-br/web/javascript/reference/global_objects/json/stringify/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/json/stringify/index.md @@ -175,10 +175,7 @@ console.log(seçãoRestaurada); ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------ | ------------------ | -------------------------------------------------- | -| {{SpecName('ES5.1', '#sec-15.12.3', 'JSON.stringify')}} | {{Spec2('ES5.1')}} | Definição inicial. Implementado em JavaScript 1.7. | -| {{SpecName('ES6', '#sec-json.stringify', 'JSON.stringify')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade em navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/abs/index.md b/files/pt-br/web/javascript/reference/global_objects/math/abs/index.md index cdb2169a95cee1..a33780e8d570d2 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/abs/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/abs/index.md @@ -51,12 +51,7 @@ Math.abs(); // NaN ## Especificações -| Specification | Status | Comment | -| ---------------------------------------------------- | -------------------- | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Initial definition. Implemented in JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.1', 'Math.abs')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.abs', 'Math.abs')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.abs', 'Math.abs')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/acos/index.md b/files/pt-br/web/javascript/reference/global_objects/math/acos/index.md index 4ae90afe576fa2..483d0be893b1da 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/acos/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/acos/index.md @@ -46,12 +46,7 @@ Para valores menores que -1 ou maiores que than 1, `Math.acos()` o método retor ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------ | -------------------- | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Initial definition. Implemented in JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.2', 'Math.acos')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.acos', 'Math.acos')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.acos', 'Math.acos')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/acosh/index.md b/files/pt-br/web/javascript/reference/global_objects/math/acosh/index.md index 4110d22c2b17ad..4d945d4f875207 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/acosh/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/acosh/index.md @@ -60,10 +60,7 @@ Math.acosh = ## Especificações -| Specification | Status | Comment | -| -------------------------------------------------------- | -------------------- | ------------------ | -| {{SpecName('ES6', '#sec-math.acosh', 'Math.acosh')}} | {{Spec2('ES6')}} | Definição inicial. | -| {{SpecName('ESDraft', '#sec-math.acosh', 'Math.acosh')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/asin/index.md b/files/pt-br/web/javascript/reference/global_objects/math/asin/index.md index 2fe46c57167819..e6c9d84a1d6bf9 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/asin/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/asin/index.md @@ -47,12 +47,7 @@ Para valores menores que -1 ou maiores que 1, `Math.asin()` retorna {{jsxref("Na ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------ | -------------------- | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial. Implementado no JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.3', 'Math.asin')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.asin', 'Math.asin')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.asin', 'Math.asin')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/asinh/index.md b/files/pt-br/web/javascript/reference/global_objects/math/asinh/index.md index 59b8857935420f..efe6c0c30c7531 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/asinh/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/asinh/index.md @@ -59,10 +59,7 @@ Apesar de formalmente correta, ela sofre de algumas problemas relacionadas à co ## Especificações -| Specification | Status | Comment | -| -------------------------------------------------------- | -------------------- | ------------------- | -| {{SpecName('ES6', '#sec-math.asinh', 'Math.asinh')}} | {{Spec2('ES6')}} | Initial definition. | -| {{SpecName('ESDraft', '#sec-math.asinh', 'Math.asinh')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/atan/index.md b/files/pt-br/web/javascript/reference/global_objects/math/atan/index.md index 1d5028e53a923f..a6df146b62f730 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/atan/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/atan/index.md @@ -50,12 +50,7 @@ Talvez você queira evitar usar **±**`Infinity` por motivos estéticos. Nesse c ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------ | -------------------- | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial. Implementado em JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.4', 'Math.atan')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.atan', 'Math.atan')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.atan', 'Math.atan')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/atanh/index.md b/files/pt-br/web/javascript/reference/global_objects/math/atanh/index.md index a7f908c5a9926a..5a3c0c183d02cf 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/atanh/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/atanh/index.md @@ -59,10 +59,7 @@ Math.atanh = ## Especificações -| Specification | Status | Comment | -| -------------------------------------------------------- | -------------------- | ------------------ | -| {{SpecName('ES6', '#sec-math.atanh', 'Math.atanh')}} | {{Spec2('ES6')}} | Definição inicial. | -| {{SpecName('ESDraft', '#sec-math.atanh', 'Math.atanh')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/cbrt/index.md b/files/pt-br/web/javascript/reference/global_objects/math/cbrt/index.md index 36657861bc37d5..fdd0156a904baa 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/cbrt/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/cbrt/index.md @@ -59,10 +59,7 @@ if (!Math.cbrt) { ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------ | -------------------- | ----------------- | -| {{SpecName('ES6', '#sec-math.cbrt', 'Math.cbrt')}} | {{Spec2('ES6')}} | Definição inicial | -| {{SpecName('ESDraft', '#sec-math.cbrt', 'Math.cbrt')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/ceil/index.md b/files/pt-br/web/javascript/reference/global_objects/math/ceil/index.md index 1ed35304b46e49..76fb74ec741288 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/ceil/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/ceil/index.md @@ -118,11 +118,7 @@ Math.ceil10(-59, 1); // -50 ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------ | ------------------ | ------------------ | -| ECMAScript 1st Edition. implementado em JavaScript 1.0 | Padrão | Definição inicial. | -| {{SpecName('ES5.1', '#sec-15.8.2.6', 'Math.ceil')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.ceil', 'Math.ceil')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/clz32/index.md b/files/pt-br/web/javascript/reference/global_objects/math/clz32/index.md index 0a579bd2221a65..772235de0511be 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/clz32/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/clz32/index.md @@ -158,9 +158,7 @@ if (!Math.clz32) ## Especificações -| Especificação | -| -------------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-math.clz32', 'Math.clz32')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/cos/index.md b/files/pt-br/web/javascript/reference/global_objects/math/cos/index.md index 46790e078b0983..67b26393090984 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/cos/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/cos/index.md @@ -44,12 +44,7 @@ Math.cos(2 * Math.PI); // 1 ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------- | -------------------- | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Initial definition. Implemented in JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.7', 'Math.cos')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.cos', 'Math.cos')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.cos', 'Math.cos')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/cosh/index.md b/files/pt-br/web/javascript/reference/global_objects/math/cosh/index.md index c433d14259efd2..74799fff4d248c 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/cosh/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/cosh/index.md @@ -65,9 +65,7 @@ Math.cosh = ## Especificações -| Especificações | -| ------------------------------------------------------ | -| {{SpecName('ESDraft', '#sec-math.cosh', 'Math.cosh')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/e/index.md b/files/pt-br/web/javascript/reference/global_objects/math/e/index.md index bdeeacc69a6141..1ca5a5cde607c2 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/e/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/e/index.md @@ -31,12 +31,7 @@ getNapier(); // 2.718281828459045 ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------ | -------------------- | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial. Implementado no JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.1.1', 'Math.E')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.e', 'Math.E')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.e', 'Math.E')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/exp/index.md b/files/pt-br/web/javascript/reference/global_objects/math/exp/index.md index 86f7b3681be9c7..7623b1f6f8c366 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/exp/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/exp/index.md @@ -36,11 +36,7 @@ Math.exp(1); // 2.718281828459045 ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------- | ------------------ | ------------------ | -| 1ª Edição ECMAScript 1st Edition. Implementado em JavaScript 1.0 | Padrão | Definição Inicial. | -| {{SpecName('ES5.1', '#sec-15.8.2.8', 'Math.exp')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.exp', 'Math.exp')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/floor/index.md b/files/pt-br/web/javascript/reference/global_objects/math/floor/index.md index ffa1e38a2f9bec..f6caef71e0aafc 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/floor/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/floor/index.md @@ -108,11 +108,7 @@ Math.ceil10(-59, 1); // -50 ## Especificações -| Specification | Status | Comment | -| ----------------------------------------------------- | ------------------ | ------------------- | -| ECMAScript 1st Edition. Implemented in JavaScript 1.0 | Standard | Initial definition. | -| {{SpecName('ES5.1', '#sec-15.8.2.9', 'Math.floor')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.floor', 'Math.floor')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/hypot/index.md b/files/pt-br/web/javascript/reference/global_objects/math/hypot/index.md index 237d37c8b8e219..00107cabda3864 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/hypot/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/hypot/index.md @@ -77,10 +77,7 @@ Math.hypot = ## Especificações -| Specification | Status | Comment | -| -------------------------------------------------------- | -------------------- | ------------------ | -| {{SpecName('ES2015', '#sec-math.hypot', 'Math.hypot')}} | {{Spec2('ES2015')}} | Definição inicial. | -| {{SpecName('ESDraft', '#sec-math.hypot', 'Math.hypot')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/index.md b/files/pt-br/web/javascript/reference/global_objects/math/index.md index 359dff2ca6415f..41fb6044488953 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/index.md @@ -239,11 +239,7 @@ Ao contrário de outros objetos globais, `Math` não é um construtor. Todas as ## Especificações -| Especificação | Status | Comentário | -| ----------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial, implementado no JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.8', 'Math')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math-object', 'Math')}} | {{Spec2('ES6')}} | Novos métodos adicionados: {{jsxref("Math.log10()", "log10()")}}, {{jsxref("Math.log2()", "log2()")}}, {{jsxref("Math.log1p()", "log1p()")}}, {{jsxref("Math.expm1()", "expm1()")}}, {{jsxref("Math.cosh()", "cosh()")}}, {{jsxref("Math.sinh()", "sinh()")}}, {{jsxref("Math.tanh()", "tanh()")}}, {{jsxref("Math.acosh()", "acosh()")}}, {{jsxref("Math.asinh()", "asinh()")}}, {{jsxref("Math.atanh()", "atanh()")}}, {{jsxref("Math.hypot()", "hypot()")}}, {{jsxref("Math.trunc()", "trunc()")}}, {{jsxref("Math.sign()", "sign()")}}, {{jsxref("Math.imul()", "imul()")}}, {{jsxref("Math.fround()", "fround()")}}, {{jsxref("Math.cbrt()", "cbrt()")}} e {{jsxref("Math.clz32()", "clz32()")}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/ln10/index.md b/files/pt-br/web/javascript/reference/global_objects/math/ln10/index.md index 438e451d00d37f..671f2900ae1a34 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/ln10/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/ln10/index.md @@ -31,12 +31,7 @@ getNatLog10(); // 2.302585092994046 ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------ | -------------------- | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial. Implementado em JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.1.2', 'Math.LN10')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.ln10', 'Math.LN10')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.ln10', 'Math.LN10')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/ln2/index.md b/files/pt-br/web/javascript/reference/global_objects/math/ln2/index.md index e6211812095522..bc05ce13b2d31c 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/ln2/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/ln2/index.md @@ -31,12 +31,7 @@ getNatLog2(); // 0.6931471805599453 ## Especificações -| Specification | Status | Comment | -| ---------------------------------------------------- | -------------------- | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Initial definition. Implemented in JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.1.3', 'Math.LN2')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.ln2', 'Math.LN2')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.ln2', 'Math.LN2')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/log/index.md b/files/pt-br/web/javascript/reference/global_objects/math/log/index.md index aafb024ce13ca2..4e77de1a1b653a 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/log/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/log/index.md @@ -57,12 +57,7 @@ Caso você execute `getBaseLog(10, 1000)` será retornado `2.9999999999999996` d ## Especificações -| Specification | Status | Comment | -| ---------------------------------------------------- | -------------------- | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial. Implementado no JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.10', 'Math.log')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.log', 'Math.log')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.log', 'Math.log')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/log10/index.md b/files/pt-br/web/javascript/reference/global_objects/math/log10/index.md index d6d510e63e5a44..aae4de2adecf0c 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/log10/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/log10/index.md @@ -58,10 +58,7 @@ Math.log10 = ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------- | -------------------- | ------------------- | -| {{SpecName('ES6', '#sec-math.log10', 'Math.log10')}} | {{Spec2('ES6')}} | Initial definition. | -| {{SpecName('ESDraft', '#sec-math.log10', 'Math.log10')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/log10e/index.md b/files/pt-br/web/javascript/reference/global_objects/math/log10e/index.md index 6ac755d63a3bde..118cf95ba4ba67 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/log10e/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/log10e/index.md @@ -31,12 +31,7 @@ getLog10e(); // 0.4342944819032518 ## Especificações -| Specification | Status | Comment | -| ---------------------------------------------------------- | -------------------- | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Initial definition. Implemented in JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.1.5', 'Math.LOG10E')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.log10e', 'Math.LOG10E')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.log10e', 'Math.LOG10E')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/log1p/index.md b/files/pt-br/web/javascript/reference/global_objects/math/log1p/index.md index edf4eb019817ff..3038bacdda4936 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/log1p/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/log1p/index.md @@ -61,10 +61,7 @@ Math.log1p = ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------- | -------------------- | ------------------- | -| {{SpecName('ES2015', '#sec-math.log1p', 'Math.log1p')}} | {{Spec2('ES2015')}} | Initial definition. | -| {{SpecName('ESDraft', '#sec-math.log1p', 'Math.log1p')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/log2/index.md b/files/pt-br/web/javascript/reference/global_objects/math/log2/index.md index 56d28f1a0938c2..f26bce6d87e17b 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/log2/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/log2/index.md @@ -58,10 +58,7 @@ Math.log2 = ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------ | -------------------- | ------------------- | -| {{SpecName('ES2015', '#sec-math.log2', 'Math.log2')}} | {{Spec2('ES2015')}} | Initial definition. | -| {{SpecName('ESDraft', '#sec-math.log2', 'Math.log2')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/log2e/index.md b/files/pt-br/web/javascript/reference/global_objects/math/log2e/index.md index a4a21929006bc9..15b0bca8962227 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/log2e/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/log2e/index.md @@ -31,12 +31,7 @@ getLog2e(); // 1.4426950408889634 ## Especificações -| Specification | Status | Comment | -| -------------------------------------------------------- | -------------------- | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Initial definition. Implemented in JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.1.4', 'Math.LOG2E')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.log2e', 'Math.LOG2E')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.log2e', 'Math.LOG2E')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/max/index.md b/files/pt-br/web/javascript/reference/global_objects/math/max/index.md index ca93c5715c1f02..b96850a6df2d06 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/max/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/max/index.md @@ -73,11 +73,7 @@ Entretanto, tanto spread(`...`) quanto `apply` irão ou falhar ou retornar o res ## Especificações -| Especificação | Status | Comentário | -| ----------------------------------------------------- | ------------------ | ------------------- | -| ECMAScript 1st Edition. Implemented in JavaScript 1.0 | Standard | Initial definition. | -| {{SpecName('ES6', '#sec-15.8.2.11', 'Math.max')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.max', 'Math.max')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/min/index.md b/files/pt-br/web/javascript/reference/global_objects/math/min/index.md index 9ca3fe9ae25f8f..905b7f2327d9c2 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/min/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/min/index.md @@ -59,12 +59,7 @@ var x = Math.min(f(foo), boundary); ## Especificações -| Especificação | Estato | Comentário | -| ---------------------------------------------------- | -------------------- | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | definição inicial. Implementado no JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.12', 'Math.min')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.min', 'Math.min')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.min', 'Math.min')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade do navegador diff --git a/files/pt-br/web/javascript/reference/global_objects/math/pi/index.md b/files/pt-br/web/javascript/reference/global_objects/math/pi/index.md index bab9e39043656d..8eecd97c24be8b 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/pi/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/pi/index.md @@ -33,12 +33,7 @@ calcularCircunferencia(1); // 6.283185307179586 ## Especificações -| Specification | Status | Comment | -| -------------------------------------------------- | -------------------- | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definiçao inicial. Implementado no JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.1.6', 'Math.PI')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.pi', 'Math.PI')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.pi', 'Math.PI')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/pow/index.md b/files/pt-br/web/javascript/reference/global_objects/math/pow/index.md index c105968bcf8492..d0a32698c4f396 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/pow/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/pow/index.md @@ -53,11 +53,7 @@ Math.pow(-7, 1 / 3); // NaN ## Especificações -| Especificação | Status | Comentário | -| --------------------------------------------------- | ------------------ | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição Inicial. Implementado no JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.13', 'Math.pow')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.pow', 'Math.pow')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/random/index.md b/files/pt-br/web/javascript/reference/global_objects/math/random/index.md index cc841d91406d9b..aa93586baac480 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/random/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/random/index.md @@ -71,11 +71,7 @@ function getRandomIntInclusive(min, max) { ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------ | ------------------ | ----------------------------------------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial. JavaScript 1.0 (UNIX Only) / JavaScript 1.1 (Todas plataformas). | -| {{SpecName('ES5.1', '#sec-15.8.2.14', 'Math.random')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.random', 'Math.random')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/round/index.md b/files/pt-br/web/javascript/reference/global_objects/math/round/index.md index ae4cbaf8295c96..04bc540da28e17 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/round/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/round/index.md @@ -147,11 +147,7 @@ myNamespace.round(1234.5678, -1); // 1230 ## Especificações -| Especificação | Status | Comentário | -| ----------------------------------------------------- | ------------------ | ------------------ | -| ECMAScript 1ª Edição. Implementado em JavaScript 1.0. | Padrão | Definição inicial. | -| {{SpecName('ES5.1', '#sec-15.8.2.15', 'Math.round')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.round', 'Math.round')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/sign/index.md b/files/pt-br/web/javascript/reference/global_objects/math/sign/index.md index ce2e813e3e532b..c3a04e0a2ed115 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/sign/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/sign/index.md @@ -82,10 +82,7 @@ No polyfill acima, nenhuma coerção de tipo extra é necessária para tornar nu ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------ | -------------------- | ------------------ | -| {{SpecName('ES6', '#sec-math.sign', 'Math.sign')}} | {{Spec2('ES6')}} | Definição inicial. | -| {{SpecName('ESDraft', '#sec-math.sign', 'Math.sign')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/sin/index.md b/files/pt-br/web/javascript/reference/global_objects/math/sin/index.md index d3e891d541037a..e5564a6c75b554 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/sin/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/sin/index.md @@ -43,12 +43,7 @@ Math.sin(Math.PI / 2); // 1 ## Especificações -| Specification | Status | Comment | -| ---------------------------------------------------- | -------------------- | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial. Implementado no JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.16', 'Math.sin')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.sin', 'Math.sin')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.sin', 'Math.sin')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/sinh/index.md b/files/pt-br/web/javascript/reference/global_objects/math/sinh/index.md index 346d88c9640368..9f822d0eb7b389 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/sinh/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/sinh/index.md @@ -64,10 +64,7 @@ Math.sinh = ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------ | -------------------- | ------------------ | -| {{SpecName('ES2015', '#sec-math.sinh', 'Math.sinh')}} | {{Spec2('ES2015')}} | Definição inicial. | -| {{SpecName('ESDraft', '#sec-math.sinh', 'Math.sinh')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/sqrt/index.md b/files/pt-br/web/javascript/reference/global_objects/math/sqrt/index.md index 2d5ddd13ed15c8..308768fec938ea 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/sqrt/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/sqrt/index.md @@ -45,11 +45,7 @@ Math.sqrt(-1); // NaN ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------- | ------------------ | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição inicial. Implementado no JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.17', 'Math.sqrt')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.sqrt', 'Math.sqrt')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/sqrt1_2/index.md b/files/pt-br/web/javascript/reference/global_objects/math/sqrt1_2/index.md index e2ff9028f63a8a..1e99c46430cd18 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/sqrt1_2/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/sqrt1_2/index.md @@ -31,12 +31,7 @@ getRoot1_2(); // 0.7071067811865476 ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------ | -------------------- | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Initial definition. Implemented in JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.1.7', 'Math.SQRT1_2')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/sqrt2/index.md b/files/pt-br/web/javascript/reference/global_objects/math/sqrt2/index.md index 08213cfc25ce2b..b3a8a3fd84897e 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/sqrt2/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/sqrt2/index.md @@ -31,12 +31,7 @@ getRoot2(); // 1.4142135623730951 ## Especificações -| Specification | Status | Comment | -| -------------------------------------------------------- | -------------------- | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Initial definition. Implemented in JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.1.8', 'Math.SQRT2')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.sqrt2', 'Math.SQRT2')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.sqrt2', 'Math.SQRT2')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/tan/index.md b/files/pt-br/web/javascript/reference/global_objects/math/tan/index.md index c4aa29514b7a56..60a4b75d6e0bd2 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/tan/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/tan/index.md @@ -49,11 +49,7 @@ function getTanDeg(deg) { ## Especificações -| Especificação | Estado | Comentário | -| ------------------------------------------------------ | ------------------ | ------------------ | -| ECMAScript 1st Edition. Implementado em JavaScript 1.0 | Padrão | Definição inicial. | -| {{SpecName('ES5.1', '#sec-15.8.2.18', 'Math.tan')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.tan', 'Math.tan')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/math/trunc/index.md b/files/pt-br/web/javascript/reference/global_objects/math/trunc/index.md index 1e51aaeeafd52b..c86ab0837ee015 100644 --- a/files/pt-br/web/javascript/reference/global_objects/math/trunc/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/math/trunc/index.md @@ -63,9 +63,7 @@ Math.trunc = ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------- | ---------------- | ------------------ | -| {{SpecName('ES6', '#sec-math.trunc', 'Math.trunc')}} | {{Spec2('ES6')}} | Definição inicial. | +{{Specifications}} ## Navegadores compatíveis diff --git a/files/pt-br/web/javascript/reference/global_objects/nan/index.md b/files/pt-br/web/javascript/reference/global_objects/nan/index.md index 5a1f9cd47d3b3b..7eabf1cac03fb6 100644 --- a/files/pt-br/web/javascript/reference/global_objects/nan/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/nan/index.md @@ -38,11 +38,7 @@ isNaN(Number.NaN); // verdadeiro ## Especificações -| Especificação | Status | Comentários | -| ---------------------------------------------------------------------------- | ------------------ | ------------------------------------------------- | -| ECMAScript 1st Edition. | Standard | Definição inicial. Implementado no JavaScript 1.3 | -| {{SpecName('ES5.1', '#sec-15.1.1.1', 'NaN')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-value-properties-of-the-global-object-nan', 'NaN')}} | {{Spec2('ES6')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/number/epsilon/index.md b/files/pt-br/web/javascript/reference/global_objects/number/epsilon/index.md index 7ab45659479165..085ac445a60037 100644 --- a/files/pt-br/web/javascript/reference/global_objects/number/epsilon/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/number/epsilon/index.md @@ -36,9 +36,7 @@ equal = Math.abs(x - y + z) < Number.EPSILON; ## Especificações -| Especificação | -| ---------------------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-number.epsilon', 'Number.EPSILON')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/number/index.md b/files/pt-br/web/javascript/reference/global_objects/number/index.md index 5dfc87446b72ba..b4a4e1ebe1d365 100644 --- a/files/pt-br/web/javascript/reference/global_objects/number/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/number/index.md @@ -124,11 +124,7 @@ Number("100a"); // NaN ## Especificações -| Especificação | Situação | Comentário | -| ---------------------------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------- | -| Primeiro edição ECMAScript. Implementado em JavaScript 1.1 | Padrão | definição inicial. | -| {{SpecName('ES5.1', '#sec-15.7', 'Number')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-number-objects', 'Number')}} | {{Spec2('ES6')}} | Novos métodos e propriedades adicionadas (EPSILON, isFinite, isInteger, isNaN, parseFloat, parseInt) | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/number/isfinite/index.md b/files/pt-br/web/javascript/reference/global_objects/number/isfinite/index.md index 0bfa89aeac1399..eb99308c2871c0 100644 --- a/files/pt-br/web/javascript/reference/global_objects/number/isfinite/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/number/isfinite/index.md @@ -54,10 +54,7 @@ Number.isFinite = ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------- | -------------------- | ------------------- | -| {{SpecName('ES6', '#sec-number.isfinite', 'Number.isInteger')}} | {{Spec2('ES6')}} | Initial definition. | -| {{SpecName('ESDraft', '#sec-number.isfinite', 'Number.isInteger')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/number/isinteger/index.md b/files/pt-br/web/javascript/reference/global_objects/number/isinteger/index.md index 8b1f3317f5b6f5..f7cb4ab301e0c2 100644 --- a/files/pt-br/web/javascript/reference/global_objects/number/isinteger/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/number/isinteger/index.md @@ -62,10 +62,7 @@ Number.isInteger = ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------- | -------------------- | ------------------ | -| {{SpecName('ES6', '#sec-number.isinteger', 'Number.isInteger')}} | {{Spec2('ES6')}} | Definição inicial. | -| {{SpecName('ESDraft', '#sec-number.isinteger', 'Number.isInteger')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/number/isnan/index.md b/files/pt-br/web/javascript/reference/global_objects/number/isnan/index.md index 8cf06fac27b78d..247ab965d0134d 100644 --- a/files/pt-br/web/javascript/reference/global_objects/number/isnan/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/number/isnan/index.md @@ -51,9 +51,7 @@ Number.isNaN("blabla"); // e.g. este teria sido true com isNaN ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------- | ---------------- | ------------------ | -| {{SpecName('ES6', '#sec-number.isnan', 'Number.isnan')}} | {{Spec2('ES6')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/number/issafeinteger/index.md b/files/pt-br/web/javascript/reference/global_objects/number/issafeinteger/index.md index 7a6c69e2742238..b42369a0b5f5c9 100644 --- a/files/pt-br/web/javascript/reference/global_objects/number/issafeinteger/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/number/issafeinteger/index.md @@ -64,10 +64,7 @@ Number.isSafeInteger = ## Especificações -| Especificação | Status | Coméntario | -| ---------------------------------------------------------------------------- | -------------------- | ----------------- | -| {{SpecName('ES2015', '#sec-number.issafeinteger', 'Number.isSafeInteger')}} | {{Spec2('ES2015')}} | Definição inicial | -| {{SpecName('ESDraft', '#sec-number.issafeinteger', 'Number.isSafeInteger')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/number/max_safe_integer/index.md b/files/pt-br/web/javascript/reference/global_objects/number/max_safe_integer/index.md index f045f71f8671d6..e0f46370c92e1a 100644 --- a/files/pt-br/web/javascript/reference/global_objects/number/max_safe_integer/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/number/max_safe_integer/index.md @@ -47,9 +47,7 @@ Number.MAX_SAFE_INTEGER * Number.EPSILON; // 2 ## Especificações -| Especificação | -| ---------------------------------------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-number.max_safe_integer', 'Number.MAX_SAFE_INTEGER')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/number/max_value/index.md b/files/pt-br/web/javascript/reference/global_objects/number/max_value/index.md index a95bdb6dc5ec40..4e74ecac303407 100644 --- a/files/pt-br/web/javascript/reference/global_objects/number/max_value/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/number/max_value/index.md @@ -31,9 +31,7 @@ if (num1 * num2 <= Number.MAX_VALUE) { ## Especificações -| Especificação | -| -------------------------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-number.max_value', 'Number.MAX_VALUE')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/number/min_safe_integer/index.md b/files/pt-br/web/javascript/reference/global_objects/number/min_safe_integer/index.md index 861fa1740e551b..e0f09b5f9c9986 100644 --- a/files/pt-br/web/javascript/reference/global_objects/number/min_safe_integer/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/number/min_safe_integer/index.md @@ -28,9 +28,7 @@ Number.MIN_SAFE_INTEGER; // -9007199254740991 ## Especificações -| Especificação | -| ---------------------------------------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-number.min_safe_integer', 'Number.MIN_SAFE_INTEGER')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/number/min_value/index.md b/files/pt-br/web/javascript/reference/global_objects/number/min_value/index.md index b7b0647d1ac69d..608b38f9da2b7e 100644 --- a/files/pt-br/web/javascript/reference/global_objects/number/min_value/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/number/min_value/index.md @@ -33,9 +33,7 @@ if (num1 / num2 >= Number.MIN_VALUE) { ## Especificações -| Especificação | -| -------------------------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-number.min_value', 'Number.MIN_VALUE')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/number/nan/index.md b/files/pt-br/web/javascript/reference/global_objects/number/nan/index.md index 0d8e93f420b973..76f2d20c836e60 100644 --- a/files/pt-br/web/javascript/reference/global_objects/number/nan/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/number/nan/index.md @@ -13,12 +13,7 @@ Você não precisa criar um objeto {{jsxref("Number")}} para acessar esta propri ## Especificações -| Especificação | Status | Detalhes | -| -------------------------------------------------------- | -------------------- | -------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Definição Inicial. Implementado no JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.7.3.4', 'Number.NaN')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-number.nan', 'Number.NaN')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-number.nan', 'Number.NaN')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/number/negative_infinity/index.md b/files/pt-br/web/javascript/reference/global_objects/number/negative_infinity/index.md index 427865225222d5..7775153f042f5f 100644 --- a/files/pt-br/web/javascript/reference/global_objects/number/negative_infinity/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/number/negative_infinity/index.md @@ -45,9 +45,7 @@ if (smallNumber === Number.NEGATIVE_INFINITY) { ## Especificações -| Especificação | -| ------------------------------------------------------------------------------------ | -| {{SpecName('ESDraft', '#sec-number.negative_infinity', 'Number.NEGATIVE_INFINITY')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/number/parseint/index.md b/files/pt-br/web/javascript/reference/global_objects/number/parseint/index.md index 9f9456da43e834..458adba921cfc5 100644 --- a/files/pt-br/web/javascript/reference/global_objects/number/parseint/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/number/parseint/index.md @@ -50,9 +50,7 @@ e é parte do ECMAScript 2015 (sua proposta é a modularização dos globais). P ## Especificações -| Especificação | -| ------------------------------------------------------------------ | -| {{SpecName('ESDraft', '#sec-number.parseint', 'Number.parseInt')}} | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/number/tofixed/index.md b/files/pt-br/web/javascript/reference/global_objects/number/tofixed/index.md index 7c6aab7c6f33e1..ce2bdafdf92337 100644 --- a/files/pt-br/web/javascript/reference/global_objects/number/tofixed/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/number/tofixed/index.md @@ -53,12 +53,7 @@ numObj.toFixed(6); // Retorna '12345.678900': note que adicionou zeros ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------------------------ | -------------------- | ------------------------------------------------- | -| {{SpecName('ES3')}} | {{Spec2('ES3')}} | Definição incial. Implementada no JavaScript 1.5. | -| {{SpecName('ES5.1', '#sec-15.7.4.5', 'Number.prototype.toFixed')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/javascript/reference/global_objects/number/tolocalestring/index.md b/files/pt-br/web/javascript/reference/global_objects/number/tolocalestring/index.md index 931e5106479fcb..c392ec11b2a499 100644 --- a/files/pt-br/web/javascript/reference/global_objects/number/tolocalestring/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/number/tolocalestring/index.md @@ -126,15 +126,7 @@ Quando formatar uma grande quantidade de números, é melhor criar um objeto {{j ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------------------------- | ------------------------- | -------------------------------------------------- | -| {{SpecName('ES3')}} | {{Spec2('ES3')}} | Definição inicial. Implementado no JavaScript 1.5. | -| {{SpecName('ES5.1', '#sec-15.7.4.3', 'Number.prototype.toLocaleString')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES Int 1.0', '#sec-13.2.1', 'Number.prototype.toLocaleString')}} | {{Spec2('ES Int 1.0')}} | | -| {{SpecName('ES Int 2.0', '#sec-13.2.1', 'Number.prototype.toLocaleString')}} | {{Spec2('ES Int 2.0')}} | | -| {{SpecName('ES Int Draft', '#sec-Number.prototype.toLocaleString', 'Number.prototype.toLocaleString')}} | {{Spec2('ES Int Draft')}} | | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/zh-cn/glossary/css_pixel/index.md b/files/zh-cn/glossary/css_pixel/index.md index b7cc56c1248ab1..8894f00eb2e408 100644 --- a/files/zh-cn/glossary/css_pixel/index.md +++ b/files/zh-cn/glossary/css_pixel/index.md @@ -5,18 +5,8 @@ slug: Glossary/CSS_pixel {{GlossarySidebar}} -**CSS 像素**——在 {{Glossary("CSS")}} 中以 `px` 为后缀——是一个长度单位，大致相当于一个肉眼可以轻松看到的小点的长宽，否则就是尽可能小的长度。根据定义，一个 CSS 像素应当看起来是在距离观察者一臂之遥且像素密度为 96 DPI 的屏幕中的一个物理像素。 +术语 **CSS 像素**与 CSS 绝对长度单位 _px_ 同义——[标准定义](https://drafts.csswg.org/css-values/#absolute-lengths)为 1 CSS 英寸（_in_）的 1/96。 -当然，这一定义，由于一些术语“轻松看到”和“一臂之遥”不精确且因人而异，导致其留下很多解释空间。比如，当一个用户坐在台式机前，屏幕和用户眼睛之间的距离实际上要比手机屏幕和眼睛的距离远。 +## 参见 -因此实际应用中，当使用单位 `px` 时，让 `96px` 的距离等同屏幕上的大约 1 英寸就合格了，无论屏幕的实际像素密度是多少。换句话说，如果一个手机屏幕的像素密度是 266 DPI，且屏幕上一个元素的宽度是 `96px`，那么这个元素的实际宽度会是 266 设备像素（{{Glossary(" device pixels ")}}）。 - -## 深入学习 - -### 技术参考 - -- [CSS Values and Units Module, section 5.2: Absolute Lengths](https://drafts.csswg.org/css-values-3/#absolute-lengths) - -### 在这里学习 - -- [CSS Length Explained](https://hacks.mozilla.org/2013/09/css-length-explained/) on the MDN Hacks Blog +- MDN Hacks Blog 上的 [CSS 长度解释](https://hacks.mozilla.org/2013/09/css-length-explained/) diff --git a/files/zh-cn/learn/css/building_blocks/overflowing_content/index.md b/files/zh-cn/learn/css/building_blocks/overflowing_content/index.md index ea1b08f6a0a2e1..1dbd7072d730b6 100644 --- a/files/zh-cn/learn/css/building_blocks/overflowing_content/index.md +++ b/files/zh-cn/learn/css/building_blocks/overflowing_content/index.md @@ -15,15 +15,14 @@ slug: Learn/CSS/Building_blocks/Overflowing_content 基础的电脑知识，<a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software" >安装了基本的软件</a - >, - <a + >，<a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files" >处理文件</a >的基础知识，HTML 基础（学习 <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML" - >Introduction to HTML</a + >HTML 简介</a >），对 CSS 的工作原理有所了解（学习 - <a href="/zh-CN/docs/Learn/CSS/First_steps">CSS first steps</a>.) + <a href="/zh-CN/docs/Learn/CSS/First_steps">CSS 入门概述</a>）。 </td> </tr> <tr> @@ -35,13 +34,13 @@ slug: Learn/CSS/Building_blocks/Overflowing_content ## 什么是溢出？ -我们知道，CSS 中万物皆盒，因此我们可以通过给{{cssxref("width")}}和{{cssxref("height")}}（或者 {{cssxref("inline-size")}} 和 {{cssxref("block-size")}}）赋值的方式来约束盒子的尺寸。溢出是在你往盒子里面塞太多东西的时候发生的，所以盒子里面的东西也不会老老实实待着。CSS 给了你好几种工具来控制溢出，在学习的早期理解这些概念是很有用的。在你写 CSS 的时候你经常会遇到溢出的情形，尤其是当你以后更加深入到 CSS 布局的时候。 +我们知道，CSS 中万物皆盒，因此我们可以通过给 {{cssxref("width")}} 和 {{cssxref("height")}}（或者 {{cssxref("inline-size")}} 和 {{cssxref("block-size")}}）赋值的方式来约束盒子的尺寸。溢出是在你往盒子里面塞太多东西的时候发生的，所以盒子里面的东西也不会老老实实待着。CSS 给了你好几种工具来控制溢出，在学习的早期理解这些概念是很有用的。在你写 CSS 的时候你经常会遇到溢出的情形，尤其是当你以后更加深入到 CSS 布局的时候。 ## CSS 尽力减少“数据损失” 我们从两个展示了在碰到溢出的时候，CSS 默认会如何处理的例子开始吧。 -第一个例子是，一个盒子，在块方向上已经受到`height`的限制。然后我们已经加了过多的内容，以至于盒子里面没有空间容纳。内容正在从盒子里面溢出，并让自己把盒子下面的段落弄得一团糟。 +第一个例子是，一个盒子，在块方向上已经受到 `height` 的限制。然后我们已经加了过多的内容，以至于盒子里面没有空间容纳。内容正在从盒子里面溢出，并让自己把盒子下面的段落弄得一团糟。 {{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}} @@ -53,52 +52,56 @@ slug: Learn/CSS/Building_blocks/Overflowing_content 只要有可能，CSS 就不会隐藏你的内容，隐藏引起的数据损失通常会造成困扰。在 CSS 的术语里面，这会导致一些内容消失，你的访客可能不会注意到这一点，如果消失的是表格上的提交按钮，没有人能填完这个表格，这是很麻烦的事情！所以 CSS 反而会把它以可见的形式溢出出去。这样做的结果就是，你会看到错误的 CSS 导致的一片混乱，或者最坏的情况也只是你的网站的访客会告诉你有些内容冒了出来，你的网站需要修缮。 -如果你已经用`width`或者`height`限制住了一个盒子，CSS 假定，你知道你在做什么，而且你已经控制住了溢出的隐患。总之，在盒子里面需要放置文本的时候，限制住块方向的尺寸是会引起问题的，因为可能会有比你在设计网站的时候所预计的文本更多的文本，或者文本变大了——比如用户增加字体大小的时候。 +如果你已经用 `width` 或者 `height` 限制住了一个盒子，CSS 假定，你知道你在做什么，而且你已经控制住了溢出的隐患。总之，在盒子里面需要放置文本的时候，限制住块方向的尺寸是会引起问题的，因为可能会有比你在设计网站的时候所预计的文本更多的文本，或者文本变大了——比如用户增加字体大小的时候。 在下面的几节课里，我们会看一下各种不同的控制尺寸的方式，以减少溢出的影响。但是，如果你需要固定的尺寸，你也可以控制溢出表现的形式。那么让我们接着读下去吧！ ## overflow 属性 -{{cssxref("overflow")}}属性是你控制一个元素溢出的方式，它告诉浏览器你想怎样处理溢出。`overflow`的默认值为`visible`，这就是我们的内容溢出的时候，我们在默认情况下看到它们的原因。 +{{cssxref("overflow")}} 属性是你控制一个元素溢出的方式，它告诉浏览器你想怎样处理溢出。`overflow` 的默认值为 `visible`，这就是我们的内容溢出的时候，我们在默认情况下看到它们的原因。 -如果你想在内容溢出的时候把它裁剪掉，你可以在你的盒子上设置`overflow: hidden`。这就会像它表面上所显示的那样作用——隐藏掉溢出。这可能会很自然地让东西消失掉，所以你只应该在判断隐藏内容不会引起问题的时候这样做。 +如果你想在内容溢出的时候把它裁剪掉，你可以在你的盒子上设置 `overflow: hidden`。这就会像它表面上所显示的那样作用——隐藏掉溢出。这可能会很自然地让东西消失掉，所以你只应该在判断隐藏内容不会引起问题的时候这样做。 {{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}} -也许你还会想在有内容溢出的时候加个滚动条？如果你用了`overflow: scroll`，那么你的浏览器总会显示滚动条，即使没有足够多引起溢出的内容。你可能会需要这样的样式，它避免了滚动条在内容变化的时候出现和消失。 +也许你还会想在有内容溢出的时候加个滚动条？如果你用了 `overflow: scroll`，那么你的浏览器总会显示滚动条，即使没有足够多引起溢出的内容。你可能会需要这样的样式，它避免了滚动条在内容变化的时候出现和消失。 **如果你移除了下面的盒子里的一些内容，你可以看一下，滚动条是否还会在没有能滚动的东西的时候保留。** {{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}} -在以上的例子里面，我们仅仅需要在`y`轴方向上滚动，但是我们在两个方向上都有了滚动条。你可以使用{{cssxref("overflow-y")}}属性，设置`overflow-y: scroll`来仅在`y`轴方向滚动。 +在以上的例子里面，我们仅仅需要在 `y` 轴方向上滚动，但是我们在两个方向上都有了滚动条。你可以使用 {{cssxref("overflow-y")}} 属性，设置 `overflow-y: scroll` 来仅在 `y` 轴方向滚动。 {{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}} -你也可以用{{cssxref("overflow-x")}}，以在 x 轴方向上滚动，尽管这不是处理长英文词的好办法！如果你真的需要在小盒子里面和长英文词打交道，那么你可能要了解一下{{cssxref("word-break")}}或者{{cssxref("overflow-wrap")}}属性。除此以外，一些[在 CSS 里面调整大小](/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)这节课里面讨论过的方式可能会帮助你创建可以和有变化容量的内容相协调的盒子。 +你也可以用 {{cssxref("overflow-x")}}，以在 x 轴方向上滚动，尽管这不是处理长英文词的好办法！如果你真的需要在小盒子里面和长英文词打交道，那么你可能要了解一下 {{cssxref("word-break")}} 或者 {{cssxref("overflow-wrap")}} 属性。除此以外，一些[在 CSS 里面调整大小](/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)这节课里面讨论过的方式可能会帮助你创建可以和有变化容量的内容相协调的盒子。 {{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}} -和`scroll`一样，在无论是否有多到需要 用滚动条的内容的时候，页面上都会显示一个滚动条。 +和 `scroll` 一样，在无论是否有多到需要 用滚动条的内容的时候，页面上都会显示一个滚动条。 -> **备注：** 你可以用`overflow`属性指定 x 轴和 y 轴方向的滚动，同时使用两个值进行传递。如果指定了两个关键字，第一个对`overflow-x`生效而第二个对`overflow-y`生效。否则，`overflow-x`和`overflow-y`将会被设置成同样的值。例如，`overflow: scroll hidden`会把`overflow-x`设置成`scroll`，而`overflow-y`则为`hidden`。 +> **备注：** 你可以用 `overflow` 属性指定 x 轴和 y 轴方向的滚动，同时使用两个值进行传递。如果指定了两个关键字，第一个对 `overflow-x `生效而第二个对 `overflow-y` 生效。否则，`overflow-x` 和 `overflow-y` 将会被设置成同样的值。例如，`overflow: scroll hidden` 会把 `overflow-x` 设置成 `scroll`，而 `overflow-y` 则为 `hidden`。 -如果你只是想让滚动条在有比盒子所能装下更多的内容的时候才显示，那么使用`overflow: auto`。此时由浏览器决定是否显示滚动条。桌面浏览器一般仅仅会在有足以引起溢出的内容的时候这么做。 +如果你只是想让滚动条在有比盒子所能装下更多的内容的时候才显示，那么使用 `overflow: auto`。此时由浏览器决定是否显示滚动条。桌面浏览器一般仅仅会在有足以引起溢出的内容的时候这么做。 **在下面的例子里面，移除一些内容，直到能够装在盒子里面，你还会看到滚动条消失了。** -{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}} +{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 700)}} -## 溢出建立了块级排版上下文 +## 溢出建立了区块格式化上下文 -CSS 中有所谓**块级排版上下文**（Block Formatting Context，BFC）**的概念**。现在你不用太过在意，但是你应该知道，在你使用诸如`scroll`或者`auto`的时候，你就建立了一个块级排版上下文。结果就是，你改变了`overflow`的值的话，对应的盒子就变成了更加小巧的状态。在容器之外的东西没法混进容器内，也没有东西可以突出盒子，进入周围的版面。激活了滚动动作，你的盒子里面所有的内容会被收纳，而且不会遮到页面上其他的物件，于是就产生了一个协调的滚动体验。 +CSS 中有所谓[**区块格式化上下文**（Block Formatting Context，BFC）](/zh-CN/docs/Web/Guide/CSS/Block_formatting_context)的概念。现在你不用太过在意，但是你应该知道，在你使用诸如 `scroll` 或者 `auto` 的时候，你就建立了一个块级排版上下文。结果就是，你改变了 `overflow` 的值的话，对应的盒子就变成了更加小巧的状态。在容器之外的东西没法混进容器内，也没有东西可以突出盒子，进入周围的版面。激活了滚动动作，你的盒子里面所有的内容会被收纳，而且不会遮到页面上其他的物件，于是就产生了一个协调的滚动体验。 ## 网页设计时不需要的溢出 -现代网页布局的方式（正如[CSS layout](/zh-CN/docs/Learn/CSS/CSS_layout)模块中所介绍的那些）可以很好地处理溢出。我们不一定能预料到网页上会有多少内容，人们很好地设计它们，使得它们能与这种现状协调。但是在以往，开发者会更多地使用固定高度，尽力让毫无关联的盒子的底部对齐。这是很脆弱的，在旧时的应用里面，你偶尔会遇到一些盒子，它们的内容遮到了页面上的其他内容。如果你看到了，那么你现在应该知道，这就是溢出，理论上你应该能重新排布这些布局，使得它不必依赖于盒子尺寸的调整。 +现代网页布局的方式（正如 [CSS 布局](/zh-CN/docs/Learn/CSS/CSS_layout)模块中所介绍的那些）可以很好地处理溢出。我们不一定能预料到网页上会有多少内容，人们很好地设计它们，使得它们能与这种现状协调。但是在以往，开发者会更多地使用固定高度，尽力让毫无关联的盒子的底部对齐。这是很脆弱的，在旧时的应用里面，你偶尔会遇到一些盒子，它们的内容遮到了页面上的其他内容。如果你看到了，那么你现在应该知道，这就是溢出，理论上你应该能重新排布这些布局，使得它不必依赖于盒子尺寸的调整。 在开发网站的时候，你应该一直把溢出的问题挂在心头，你应该用或多或少的内容测试设计，增加文本的字号，确保你的 CSS 可以正常地协调。改变溢出属性的值，来隐藏内容或者增加滚动条，会是你仅仅在少数特别情况下需要的，例如在你确实需要一个可滚动盒子的时候。 +## 测试你的技能！ + +你已经到了本文的结尾，但你能记住其中重要的信息吗？你可以在继续前进之前进行一些测试来验证你是否记住了这些内容——见[测试你的技能：溢出](/zh-CN/docs/Learn/CSS/Building_blocks/Overflow_Tasks)。 + ## 小结 这节短短的课已经介绍了溢出的概念，你现在明白，CSS 会尽力不让溢出的内容不可见，因为这会造成数据损失。你已经发现，你可以控制住潜在的溢出，同样，你也应该测试你的作品，确保你不会一下子就弄出令人困扰的溢出。 diff --git a/files/zh-cn/learn/forms/sending_forms_through_javascript/index.md b/files/zh-cn/learn/forms/sending_forms_through_javascript/index.md index aac41ba1e028d8..f444d6b6000df6 100644 --- a/files/zh-cn/learn/forms/sending_forms_through_javascript/index.md +++ b/files/zh-cn/learn/forms/sending_forms_through_javascript/index.md @@ -1,79 +1,88 @@ --- title: 使用 JavaScript 发送表单 slug: Learn/Forms/Sending_forms_through_JavaScript +l10n: + sourceCommit: 402d8cd44691881e55bf214a7c0cb02bcb817305 --- {{LearnSidebar}} -正如在[前面的文章](/zh-CN/docs/HTML/Forms/Sending_and_retrieving_form_data)中讲到的，HTML 表单可以声明式地发送一个 HTTP 请求。但也可以通过 JavaScript 来为表单准备用于发送的 HTTP 请求。本文探讨如何做到这一点。 +HTML 表单可以声明式地发送一个 [HTTP](/zh-CN/docs/Web/HTTP) 请求。但也可以通过 JavaScript 来为表单准备用于发送的 HTTP 请求（例如通过 `XMLHttpRequest`）。本文对这些方法进行了探讨。 ## 表单不总是表单 -在渐进式 Web 应用中，使用 [HTML 表单](/zh-CN/docs/Learn/Forms)而不是文字表单让人们来填写变得越来越普遍了——越来越多的开发人员正致力于控制传输数据。 +在渐进式 Web 应用、单页应用和基于框架的应用中，通常会使用 [HTML 表单](/zh-CN/docs/Learn/Forms)来发送数据，而不会在收到响应数据时加载新文档。让我们先来谈谈为什么这需要一种不同的方法。 ### 获得整体界面的控制 -标准的 HTML 表单提交会加载数据要发送到的 URL，这意味着浏览器窗口以整页加载进行导航。可以通过隐藏闪烁和网络滞后来避免整页加载以提供更平滑的体验。 +如前一篇文章所述，标准 HTML 表单提交会加载发送数据的 URL，这意味着浏览器窗口会以全页面加载的方式进行导航。避免全页面加载可以避免网络延迟和可能出现的视觉问题（如闪烁），从而提供更流畅的体验。 -许多现代用户界面只使用 HTML 表单来收集用户的输入。当用户尝试发送数据时，应用程序将在后台采取控制并且异步地传输数据，只更新 UI 中需要更改的部分。 +许多现代用户界面只使用 HTML 表单来收集用户输入，而不是用于数据提交。当用户尝试发送数据时，应用程序会控制并在后台异步传输数据，只更新用户界面中需要更改的部分。 -异步地发送任何数据被称为 [AJAX](/zh-CN/docs/Web/Guide/AJAX)，它代表“**异步 JavaScript 和 XML**”（Asynchronous JavaScript And XML）。 +异步发送任意数据一般称为 [AJAX](/zh-CN/docs/Web/Guide/AJAX)，它代表“**异步 JavaScript 和 XML**”。 ### 表单提交和 AJAX 请求之间的区别？ -{{domxref("XMLHttpRequest")}}（XHR）DOM 对象可以构造 HTTP 请求、发送它们，并获取请求结果。创建之初，{{domxref("XMLHttpRequest")}} 被设计用于将 [XML](/zh-CN/docs/Web/XML) 作为传输数据的格式获取和发送。不过，如今 [JSON](/zh-CN/docs/Glossary/JSON) 已经取代了 XML。但是 XML 和 JSON 都不适合对表单数据请求编码。表单数据（`application/x-www-form-urlencoded`）由 URL 编码的键/值对列表组成。为了传输二进制数据，HTTP 请求被重新整合成 `multipart/form-data` 形式。 +{{domxref("XMLHttpRequest")}}（XHR）DOM 对象可以构建 HTTP 请求、发送请求并获取结果。从历史上看，{{domxref("XMLHttpRequest")}} 是为获取和发送 [XML](/zh-CN/docs/Web/XML) 作为交换格式而设计的，后来这种格式被 [JSON](/zh-CN/docs/Glossary/JSON) 所取代。但是，XML 和 JSON 都不适合表单数据请求编码。表单数据（`application/x-www-form-urlencoded`）由键/值对的 URL 编码列表组成。为了传输二进制数据，HTTP 请求被重塑为 `multipart/form-data`。 -AJAX 技术主要依靠 {{domxref("XMLHttpRequest")}} (XHR) DOM 对象。它 +> **备注：** 如今 [Fetch API](/zh-CN/docs/Web/API/Fetch_API) 常用于取代 XHR——它是 XHR 的更现代、更新的版本，工作原理类似，但有一些优点。你在本文中看到的大部分 XHR 代码都可以换成 Fetch。 -> **备注：** 如今 [Fetch API](/zh-CN/docs/Web/API/Fetch_API) 常用于取代 XHR——它是 XHR 的更现代、更新的版本，其工作原理类似，但具有一些有点。你将在本文中看到的大多数 XHR 代码都可以替换为 Fetch。 +如果你控制了前端（在浏览器中执行的代码）和后端（在服务器上执行的代码），就可以发送 JSON/XML，并随心所欲地处理它们。 -如果你控制前端（在浏览器中执行的代码）和后端（在服务器上执行的代码），则可以发送 JSON/XML 并根据需要处理它们。 +但如果要使用第三方服务，就需要按照服务要求的格式发送数据。 -但是，如果你想使用第三方服务，你就需要根据服务要求的格式发送数据。 - -那么如何发送这样的数据呢？下面介绍了你需要使用的不同技术。 +那么我们应该如何发送这些数据呢？下面将介绍所需要的不同技术。 ## 发送表单数据 -一共有三种方式来发送表单数据：包括两种传统的方法和一种利用 {{domxref("XMLHttpRequest/FormData","formData")}} 对象的新方法。让我们仔细看一下： +一共有三种方式来发送表单数据： + +- 手工构建 `XMLHttpRequest`。 +- 使用独立的 `FormData` 对象。 +- 使用绑定到 `<form>` 元素的 `FormData`。 + +让我们仔细看一下。 -### 构建 XMLHttpRequest +### 手工构建 XMLHttpRequest -{{domxref("XMLHttpRequest")}} 是进行 HTTP 请求的最安全和最可靠的方式。要使用 {{domxref("XMLHttpRequest")}} 发送表单数据，请通过对其进行 URL 编码来准备数据，并遵守表单数据请求的具体细节。 +{{domxref("XMLHttpRequest")}} 是进行 HTTP 请求的最安全可靠的方式。要使用 {{domxref("XMLHttpRequest")}} 发送表单数据，请通过 URL 编码准备数据，并遵守表单数据请求的具体规定。 -让我们重建之前的这个例子： +让我们看个示例： ```html -<button type="button" onclick="sendData({test:'ok'})">点击我！</button> +<button>点我！</button> ``` -正如你所看到的，HTML 实际上没什么改变。不过，JavaScript 变得截然不同了： +这是 JavaScript 代码部分： ```js +const btn = document.querySelector("button"); + function sendData(data) { - var XHR = new XMLHttpRequest(); - var urlEncodedData = ""; - var urlEncodedDataPairs = []; - var name; + console.log("Sending data"); + + const XHR = new XMLHttpRequest(); + + const urlEncodedDataPairs = []; - // 将数据对象转换为URL编码的键/值对数组。 - for (name in data) { + // 将数据对象转换为 URL 编码的键/值对数组。 + for (const [name, value] of Object.entries(data)) { urlEncodedDataPairs.push( - encodeURIComponent(name) + "=" + encodeURIComponent(data[name]), + `${encodeURIComponent(name)}=${encodeURIComponent(value)}`, ); } - // 将配对合并为单个字符串，并将所有%编码的空格替换为 + // 将配对合并为单个字符串，并将所有 % 编码的空格替换为 // “+”字符；匹配浏览器表单提交的行为。 - urlEncodedData = urlEncodedDataPairs.join("&").replace(/%20/g, "+"); + const urlEncodedData = urlEncodedDataPairs.join("&").replace(/%20/g, "+"); // 定义成功数据提交时发生的情况 - XHR.addEventListener("load", function (event) { + XHR.addEventListener("load", (event) => { alert("耶！已发送数据并加载响应。"); }); // 定义错误提示 - XHR.addEventListener("error", function (event) { + XHR.addEventListener("error", (event) => { alert("哎呀！出问题了。"); }); @@ -86,47 +95,53 @@ function sendData(data) { // 最后，发送我们的数据。 XHR.send(urlEncodedData); } + +btn.addEventListener("click", () => { + sendData({ test: "ok" }); +}); ``` -在线演示： +这里是实时演示效果： {{EmbedLiveSample("构建_xmlhttprequest", "100%", 50)}} -> **备注：** 当你想要往第三方网站传输数据时，使用{{domxref("XMLHttpRequest")}}会受到同源策略的影响。如果你需要执行跨域请求，你需要熟悉一下[CORS 和 HTTP 访问控制](/zh-CN/docs/HTTP/Access_control_CORS). +> **备注：** 当你想要往第三方网站传输数据时，使用 {{domxref("XMLHttpRequest")}} 会受到{{glossary('same-origin policy', '同源策略')}}的影响。如果你需要执行跨源请求，你需要熟悉一下 [CORS 和 HTTP 访问控制](/zh-CN/docs/Web/HTTP/CORS)。 -### 使用 XMLHttpRequest 和 the FormData object（表单数据对象） +### 使用 XMLHttpRequest 和 FormData 对象 -手动建立一个 HTTP 请求非常困难。幸运的是，最近的 [XMLHttpRequest 规范](http://www.w3.org/TR/XMLHttpRequest/)提供了一种方便简单的方法 — 利用{{domxref("XMLHttpRequest/FormData","FormData")}}对象来处理表单数据请求。 +手动建立一个 HTTP 请求非常困难。幸运的是，[XMLHttpRequest 规范](https://www.w3.org/TR/XMLHttpRequest/)提供了一种方便简单的方法——利用 {{domxref("FormData","FormData")}} 对象来处理表单数据请求。 -{{domxref("XMLHttpRequest/FormData","FormData")}} 对象可以用来构建用于传输的表单数据，或是获取表单元素中的数据来管理它的发送方式。请注意，{{domxref("XMLHttpRequest/FormData","FormData")}} 对象是“只写”的，这意味着你可以更改它们，但不能检索其内容。 +{{domxref("FormData","FormData")}} 对象可以用来构建用于传输的表单数据，或是获取表单元素中的数据来管理它的发送方式。 -使用这个对象在[Using FormData Objects](/zh-CN/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects)中有详细的介绍，不过这里有两个例子： +该对象的使用详见[使用 FormData 对象](/zh-CN/docs/Web/API/FormData/Using_FormData_Objects)，下面是两个示例： #### 使用一个独立的 FormData 对象 ```html -<button type="button" onclick="sendData({test:'ok'})">点我！</button> +<button>点我！</button> ``` -你应该会觉得那个 HTML 示例很熟悉。 +你应该会觉得那个 HTML 示例很熟悉，现在来展示 JavaScript 代码： ```js +const btn = document.querySelector("button"); + function sendData(data) { - var XHR = new XMLHttpRequest(); - var FD = new FormData(); + const XHR = new XMLHttpRequest(); + const FD = new FormData(); // 把我们的数据添加到这个 FormData 对象中 - for (name in data) { - FD.append(name, data[name]); + for (const [name, value] of Object.entries(data)) { + FD.append(name, value); } // 定义数据成功发送并返回后执行的操作 - XHR.addEventListener("load", function (event) { - alert("Yeah! 已发送数据并加载响应。"); + XHR.addEventListener("load", (event) => { + alert("耶！已发送数据并加载响应。"); }); // 定义发生错误时执行的操作 - XHR.addEventListener("error", function (event) { + XHR.addEventListener("error", (event) => { alert("Oops! 出错了。"); }); @@ -136,22 +151,26 @@ function sendData(data) { // 发送这个 formData 对象，HTTP 请求头会自动设置 XHR.send(FD); } + +btn.addEventListener("click", () => { + sendData({ test: "ok" }); +}); ``` -在线演示： +这里是实时演示效果： {{EmbedLiveSample("使用一个独立的_FormData_对象", "100%", 50)}} #### 使用绑定到表单元素上的 FormData -你也可以把一个 `FormData` 对象绑定到一个 {{HTMLElement("form")}} 元素上。这会创建一个代表表单中包含元素的 `FormData` 。 +你也可以把一个 `FormData` 对象绑定到一个 {{HTMLElement("form")}} 元素上。这会创建一个 `FormData` 对象，表示表单中包含的数据。 这段 HTML 是典型的情况： ```html <form id="myForm"> <label for="myName">告诉我你的名字：</label> - <input id="myName" name="name" value="John" /> + <input id="myName" name="name" value="小明" /> <input type="submit" value="提交" /> </form> ``` @@ -159,20 +178,20 @@ function sendData(data) { 但是 JavaScript 接管了这个表单： ```js -window.addEventListener("load", function () { +window.addEventListener("load", () => { function sendData() { - var XHR = new XMLHttpRequest(); + const XHR = new XMLHttpRequest(); // 我们把这个 FormData 和表单元素绑定在一起。 - var FD = new FormData(form); + const FD = new FormData(form); - // 我们定义了数据成功发送时会发生的事。 - XHR.addEventListener("load", function (event) { + // 我们定义了数据成功发送时会发生的事件 + XHR.addEventListener("load", (event) => { alert(event.target.responseText); }); - // 我们定义了失败的情形下会发生的事 - XHR.addEventListener("error", function (event) { + // 我们定义了失败的情形下会发生的事件 + XHR.addEventListener("error", (event) => { alert("哎呀！出了一些问题。"); }); @@ -183,11 +202,11 @@ window.addEventListener("load", function () { XHR.send(FD); } - // 我们需要获取表单元素 - var form = document.getElementById("myForm"); + // 获取表单元素 + const form = document.getElementById("myForm"); - // ...然后接管表单的提交事件 - form.addEventListener("submit", function (event) { + // 接管表单的 submit 事件 + form.addEventListener("submit", (event) => { event.preventDefault(); sendData(); @@ -195,115 +214,54 @@ window.addEventListener("load", function () { }); ``` -在线演示： +这里是实时演示效果： {{EmbedLiveSample("使用绑定到表单元素上的_FormData", "100%", 50)}} -你甚至可以通过使用表单的{{domxref("HTMLFormElement.elements", "elements")}} 属性来更多的参与此过程，来得到一个包含表单里所有数据元素的列表，并且逐一手动管理他们。想了解更多，请参见示例[访问表单控件](/zh-CN/docs/Web/API/HTMLFormElement/elements#访问表单控件)。 - -### 在隐藏的 iframe 中构建 DOM - -最古老的异步发送表单数据方法是用 DOM API 构建表单，然后将其数据发送到隐藏的 {{HTMLElement("iframe")}}。要获得提交的结果，请获取{{HTMLElement("iframe")}}的内容。 - -> **警告：** 不要使用这项技术。有第三方服务的安全风险，因为它会使你暴露在 [脚本注入攻击](http://en.wikipedia.org/wiki/Cross-site_scripting) 中。如果你使用 HTTPS，它会影响 [同源策略](/zh-CN/docs/JavaScript/Same_origin_policy_for_JavaScript), 这可以使 {{HTMLElement("iframe")}} 内容无法访问。然而，该方法可能是你需要支持很古老的浏览器的唯一选择。 - -下面是个简单的例子： - -```html -<button onclick="sendData({test:'ok'})">点击我！</button> -``` - -所有操作都在下面这段脚本里： - -```js -// 首先创建一个用来发送数据的 iframe. -var iframe = document.createElement("iframe"); -iframe.name = "myTarget"; - -// 然后，将 iframe 附加到主文档 -window.addEventListener("load", function () { - iframe.style.display = "none"; - document.body.appendChild(iframe); -}); - -// 下面这个函数是真正用来发送数据的。 -// 它只有一个参数，一个由键值对填充的对象。 -function sendData(data) { - var name, - form = document.createElement("form"), - node = document.createElement("input"); - - // 定义响应时发生的事件 - iframe.addEventListener("load", function () { - alert("Yeah! Data sent."); - }); - - form.action = "http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi"; - form.target = iframe.name; - - for (name in data) { - node.name = name; - node.value = data[name].toString(); - form.appendChild(node.cloneNode()); - } - - // 表单元素需要附加到主文档中，才可以被发送。 - form.style.display = "none"; - document.body.appendChild(form); - - form.submit(); - - // 表单提交后，就可以删除这个表单，不影响下次的数据发送。 - document.body.removeChild(form); -} -``` - -在线演示： - -{{EmbedLiveSample("在隐藏的 iframe 中构建 DOM", "100%", 50)}} +你甚至可以通过使用表单的 {{domxref("HTMLFormElement.elements", "elements")}} 属性来更多的参与此过程，来得到一个包含表单里所有数据元素的列表，并且逐一手动管理它们。想了解更多，请参见示例[访问表单控件](/zh-CN/docs/Web/API/HTMLFormElement/elements#访问表单控件)。 ## 处理二进制数据 -如果你使用一个含有 `<input type="file">` 组件的表格的 {{domxref("XMLHttpRequest/FormData","FormData")}} 对象，传给代码的数据会被自动处理。但是要手动发送二进制数据的话，还有额外的工作要做。 +如果你使用一个含有 `<input type="file">` 组件的 {{domxref("FormData","FormData")}} 表单对象，数据会被自动处理。但是要手动发送二进制数据的话，还有额外的工作要做。 -在现代网络上，二进制数据有很多来源：例如{{domxref("FileReader")}} API、{{domxref("HTMLCanvasElement","Canvas")}} API、[WebRTC](/zh-CN/docs/WebRTC/navigator.getUserMedia) API，等等。不幸的是，一些过时的浏览器无法访问二进制数据，或是需要非常复杂的工作环境。这些遗留问题已经超出了本文的涵盖范围。如果你想了解更多关于 `FileReader` API 的知识，参阅：[如何在 web 应用程序中使用文件](/zh-CN/docs/Using_files_from_web_applications)。 +在现代网络上，二进制数据有很多来源：例如 {{domxref("FileReader")}}、{{domxref("HTMLCanvasElement","Canvas")}}、[WebRTC](/zh-CN/docs/Web/API/Navigator/getUserMedia)，等等。不幸的是，一些过时的浏览器无法访问二进制数据，或是需要非常复杂的工作环境。这些遗留问题已经超出了本文的涵盖范围。如果你想了解更多关于 `FileReader` API 的知识，参见[如何在 web 应用程序中使用文件](/zh-CN/docs/Web/API/File_API/Using_files_from_web_applications)。 -在 {{domxref("XMLHttpRequest/FormData","formData")}} 的帮助下，发送二进制数据非常简单，使用 `append()` 方法就可以了。如果你必须手动进行，那确实会有一些棘手。 +发送二进制数据最简单的方法是使用 {{domxref("FormData", "FormData")}} 的 `append()` 方法，如上图所示。如果必须手工操作，就比较麻烦了。 -在下面的例子中，我们使用了{{domxref("FileReader")}} API 来访问二进制数据，然后手动构建多重表单数据请求： +在下面的例子中，我们使用了{{domxref("FileReader")}} API 来访问二进制数据，然后手动构建多部分表单数据请求： ```html <form id="myForm"> <p> - <label for="i1">文本数据：</label> - <input id="i1" name="myText" value="一些文本数据" /> + <label for="theText">文本数据：</label> + <input id="theText" name="myText" value="一些文本数据" type="text" /> </p> <p> - <label for="i2">文件数据：</label> - <input id="i2" name="myFile" type="file" /> + <label for="theFile">文件数据：</label> + <input id="theFile" name="myFile" type="file" /> </p> <button>提交！</button> </form> ``` -如你所见，这个 HTML 只是一个标准的 `<form>`。没有什么神奇的事情发生。“魔法”都在 JavaScript 里： +如你所见，这个 HTML 只是一个标准的 `<form>`，没有什么神奇的事情。“魔法”都在 JavaScript 里： ```js // 因为我们想获取 DOM 节点， // 我们在页面加载时初始化我们的脚本。 -window.addEventListener("load", function () { +window.addEventListener("load", () => { // 这些变量用于存储表单数据 - var text = document.getElementById("i1"); - var file = { - dom: document.getElementById("i2"), + const text = document.getElementById("theText"); + const file = { + dom: document.getElementById("theFile"), binary: null, }; // 使用 FileReader API 获取文件内容 - var reader = new FileReader(); + const reader = new FileReader(); // 因为 FileReader 是异步的，会在完成读取文件时存储结果 - reader.addEventListener("load", function () { + reader.addEventListener("load", () => { file.binary = reader.result; }); @@ -313,7 +271,7 @@ window.addEventListener("load", function () { } // 如果没有被选择，一旦用户选择了它，就读取文件。 - file.dom.addEventListener("change", function () { + file.dom.addEventListener("change", () => { if (reader.readyState === FileReader.LOADING) { reader.abort(); } @@ -330,34 +288,30 @@ window.addEventListener("load", function () { return; } - // 要构建我们的多重表单数据请求， + // 要构建我们的多部分表单数据请求， // 我们需要一个 XMLHttpRequest 实例 - var XHR = new XMLHttpRequest(); + const XHR = new XMLHttpRequest(); // 我们需要一个分隔符来定义请求的每一部分。 - var boundary = "blob"; + const boundary = "blob"; // 将我们的主体请求存储于一个字符串中 - var data = ""; + let data = ""; // 所以，如果用户已经选择了一个文件 if (file.dom.files[0]) { // 在请求体中开始新的一部分 - data += "--" + boundary + "\r\n"; + data += `--${boundary}\r\n`; // 把它描述成表单数据 data += "content-disposition: form-data; " + // 定义表单数据的名称 - 'name="' + - file.dom.name + - '"; ' + + `name="${file.dom.name}"; ` + // 提供文件的真实名字 - 'filename="' + - file.dom.files[0].name + - '"\r\n'; + `filename="${file.dom.files[0].name}"\r\n`; // 和文件的 MIME 类型 - data += "Content-Type: " + file.dom.files[0].type + "\r\n"; + data += `Content-Type: ${file.dom.files[0].type}\r\n`; // 元数据和数据之间有一条空行。 data += "\r\n"; @@ -368,10 +322,10 @@ window.addEventListener("load", function () { // 文本数据更简单一些 // 在主体请求中开始一个新的部分 - data += "--" + boundary + "\r\n"; + data += `--${boundary}\r\n`; - // 声明它是表单数据，并命名它 - data += 'content-disposition: form-data; name="' + text.name + '"\r\n'; + // 假设这是表单数据，并命名它 + data += `content-disposition: form-data; name="${text.name}"\r\n`; // 元数据和数据之间有一条空行。 data += "\r\n"; @@ -379,11 +333,11 @@ window.addEventListener("load", function () { data += text.value + "\r\n"; // 一旦完成，“关闭”主体请求 - data += "--" + boundary + "--"; + data += `--${boundary}--`; // 定义成功提交数据执行的语句 - XHR.addEventListener("load", function (event) { - alert("✌！数据已发送且响应已加载。"); + XHR.addEventListener("load", (event) => { + alert("耶！已发送数据并加载响应。"); }); // 定义发生错误时做的事 @@ -394,35 +348,53 @@ window.addEventListener("load", function () { // 建立请求 XHR.open("POST", "https://example.com/cors.php"); - // 添加需要的 HTTP 头部来处理多重表单数据 POST 请求 + // 添加需要的 HTTP 头部来处理多部分表单数据 POST 请求 XHR.setRequestHeader( "Content-Type", - "multipart/form-data; boundary=" + boundary, + `multipart/form-data; boundary=${boundary}`, ); // 最后，发送数据。 XHR.send(data); } - // 访问表单… - var form = document.getElementById("myForm"); + // 获取表单元素 + const form = document.getElementById("theForm"); - // …接管提交事件 - form.addEventListener("submit", function (event) { + // 添加 submit 事件处理器 + form.addEventListener("submit", (event) => { event.preventDefault(); sendData(); }); }); ``` -在线演示： +这里是实时演示效果： {{EmbedLiveSample("处理二进制数据", "100%", 150)}} ## 总结 -取决于不同的浏览器，通过 JavaScript 发送数据可能会很简单，也可能会很困难。{{domxref("XMLHttpRequest/FormData","FormData")}} 对象是通用的答案，所以请毫不犹豫的在旧浏览器上通过 polyfill 使用它： +取决于不同的浏览器和正在处理数据的类型，通过 JavaScript 发送数据可能会很简单，也可能会很困难。{{domxref("FormData","FormData")}} 对象是通用的答案，所以请毫不犹豫地在旧浏览器上通过 [polyfill](https://github.com/jimmywarting/FormData) 使用它： + +## 参见 + +### 学习路径 + +- [你的第一个 HTML 表单](/zh-CN/docs/Learn/Forms/Your_first_form) +- [如何构建 HTML 表单](/zh-CN/docs/Learn/Forms/How_to_structure_a_web_form) +- [原生表单控件](/zh-CN/docs/Learn/Forms/Basic_native_form_controls) +- [HTML5 输入（input）类型](/zh-CN/docs/Learn/Forms/HTML5_input_types) +- [其他表单控件](/zh-CN/docs/Learn/Forms/Other_form_controls) +- [UI 伪类](/zh-CN/docs/Learn/Forms/UI_pseudo-classes) +- [样式化 HTML 表单](/zh-CN/docs/Learn/Forms/Styling_web_forms) +- [表单数据校验](/zh-CN/docs/Learn/Forms/Form_validation) +- [发送表单数据](/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data) + +### 更进一步 -- 此 [gist](https://gist.github.com/3120320) 通过 {{domxref("Using_web_workers","Web Worker")}} polyfill 了 `FormData`。 -- [HTML5-formdata](https://github.com/francois2metz/html5-formdata) 试图 polyfill `FormData` 对象，但是它需要 [File API](http://www.w3.org/TR/FileAPI/) -- 这个 [polyfill](https://github.com/jimmywarting/FormData) 提供了 FormData 所有的大部分新方法（entries, keys, values, 以及对 `for...of` 的支持） +- **使用 JavaScript 发送表单** +- [如何构建自定义表单控件](/zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls) +- [旧式浏览器的 HTML 表单](/zh-CN/docs/Learn/Forms/HTML_forms_in_legacy_browsers) +- [进一步为 HTML 表单添加样式](/zh-CN/docs/Learn/Forms/Advanced_form_styling) +- [表单控件兼容性列表](/zh-CN/docs/Learn/Forms/Property_compatibility_table_for_form_controls) diff --git a/files/zh-cn/web/http/cors/index.md b/files/zh-cn/web/http/cors/index.md index f68f12a719ecbc..341607be18e4a7 100644 --- a/files/zh-cn/web/http/cors/index.md +++ b/files/zh-cn/web/http/cors/index.md @@ -61,8 +61,6 @@ CORS 请求失败会产生错误，但是为了安全，在 JavaScript 代码层 - {{HTTPHeader("Content-Type")}}（需要注意额外的限制） - {{HTTPHeader("Range")}}（只允许[简单的范围标头值](https://fetch.spec.whatwg.org/#simple-range-header-value) 如 `bytes=256-` 或 `bytes=127-255`） -> **备注：** Firefox 还没有将 `Range` 实现为安全的请求标头。参见 [bug 1733981](https://bugzilla.mozilla.org/show_bug.cgi?id=1733981)。 - - {{HTTPHeader("Content-Type")}} 标头所指定的{{Glossary("MIME type","媒体类型")}}的值仅限于下列三者之一： - `text/plain` diff --git a/files/zh-cn/web/http/status/421/index.md b/files/zh-cn/web/http/status/421/index.md new file mode 100644 index 00000000000000..de537fdb975f85 --- /dev/null +++ b/files/zh-cn/web/http/status/421/index.md @@ -0,0 +1,20 @@ +--- +title: 421 Misdirected Request +slug: Web/HTTP/Status/421 +l10n: + sourceCommit: 50a5ce565b2fa0b988b3f5ff90ea4b24b13e4b9d +--- + +{{HTTPSidebar}} + +HTTP **`421 Misdirected Request`** 客户端错误响应状态码表明，请求被定向到一个无法生成响应的服务器。如果连接被重复使用或选择了其他服务，就有可能出现这种情况。 + +## 状态 + +```http +421 Misdirected Request +``` + +## 规范 + +{{Specifications}} diff --git a/files/zh-cn/web/http/status/423/index.md b/files/zh-cn/web/http/status/423/index.md new file mode 100644 index 00000000000000..e4a32cafaf813b --- /dev/null +++ b/files/zh-cn/web/http/status/423/index.md @@ -0,0 +1,37 @@ +--- +title: 423 Locked +slug: Web/HTTP/Status/423 +l10n: + sourceCommit: 50a5ce565b2fa0b988b3f5ff90ea4b24b13e4b9d +--- + +{{HTTPSidebar}} + +> **备注：** *锁定*资源的能力仅限于某些 {{Glossary("WebDAV")}} 服务器。访问网页的浏览器永远不会遇到这种状态代码；在发生错误的情况下，浏览器会将其作为通用的 `400` 状态代码处理。 + +HTTP **`423 Locked`** 错误响应状态码表示暂定目标资源被*锁定*，即无法访问。其内容应包含一些 WebDAV XML 格式的信息。 + +## 状态 + +```http +423 Locked +``` + +### 示例 + +```http +HTTP/1.1 423 Locked +Content-Type: application/xml; charset="utf-8" +Content-Length: xxxx + +<?xml version="1.0" encoding="utf-8" ?> +<D:error xmlns:D="DAV:"> + <D:lock-token-submitted> + <D:href>/workspace/webdav/</D:href> + </D:lock-token-submitted> +</D:error> +``` + +## 规范 + +{{Specifications}} diff --git a/files/zh-cn/web/http/status/424/index.md b/files/zh-cn/web/http/status/424/index.md new file mode 100644 index 00000000000000..52be917478580b --- /dev/null +++ b/files/zh-cn/web/http/status/424/index.md @@ -0,0 +1,26 @@ +--- +title: 424 Failed Dependency +slug: Web/HTTP/Status/424 +l10n: + sourceCommit: 505984d77363cbce87d0b3e2e0607eb662b99a9c +--- + +{{HTTPSidebar}} + +HTTP **`424 Failed Dependency`** 客户端错误响应代码表明，由于请求的操作依赖于另一个操作，且该操作失败，因此无法在资源上执行该方法。 + +普通 web 服务器通常不会返回此状态代码。但其他一些协议，如 {{Glossary("WebDAV")}} 可以返回该状态代码。例如，在 {{Glossary("WebDAV")}} 中，如果发出了 `PROPPATCH` 请求，其中一条命令失败，那么其他命令也会自动以 `424 Failed Dependency` 的形式失败。 + +## 状态 + +```http +424 Failed Dependency +``` + +## 规范 + +{{Specifications}} + +## 参见 + +- {{HTTPStatus("403")}}（Forbidden） diff --git a/files/zh-cn/web/javascript/guide/grammar_and_types/index.md b/files/zh-cn/web/javascript/guide/grammar_and_types/index.md index f58eadae8bd548..d5834757f18637 100644 --- a/files/zh-cn/web/javascript/guide/grammar_and_types/index.md +++ b/files/zh-cn/web/javascript/guide/grammar_and_types/index.md @@ -507,17 +507,24 @@ console.log(car.manyCars.b); // Jeep console.log(car[7]); // Mazda ``` -对象属性名字可以是任意字符串，包括空串。如果对象属性名字不是合法的 javascript 标识符，它必须用""包裹。属性的名字不合法，那么便不能用。访问属性值，而是通过类数组标记 ("\[]") 访问和赋值。 +对象属性名字可以是任意字符串，包括空串。如果对象属性名字不是合法的 javascript {{Glossary("Identifier", "标识符")}}，它必须用引号包裹。 -```js -var unusualPropertyNames = { - "": "An empty string", - "!": "Bang!" +属性的名字不合法，那么便不能用点（`.`）访问属性值。 + +```js-nolint example-bad +const unusualPropertyNames = { + '': '空字符串', + '!': '砰！' } -console.log(unusualPropertyNames.""); // 语法错误：Unexpected string -console.log(unusualPropertyNames[""]); // An empty string -console.log(unusualPropertyNames.!); // 语法错误：Unexpected token ! -console.log(unusualPropertyNames["!"]); // Bang! +console.log(unusualPropertyNames.''); // SyntaxError: Unexpected string +console.log(unusualPropertyNames.!); // SyntaxError: Unexpected token ! +``` + +而是通过方括号表示法（`[]`）来访问。 + +```js example-good +console.log(unusualPropertyNames[""]); // 空字符串 +console.log(unusualPropertyNames["!"]); // 砰！ ``` #### 增强的对象字面量 diff --git a/files/zh-cn/web/javascript/inheritance_and_the_prototype_chain/index.md b/files/zh-cn/web/javascript/inheritance_and_the_prototype_chain/index.md index 5b01b3f7c307d3..891ce697b111aa 100644 --- a/files/zh-cn/web/javascript/inheritance_and_the_prototype_chain/index.md +++ b/files/zh-cn/web/javascript/inheritance_and_the_prototype_chain/index.md @@ -414,7 +414,7 @@ console.log(doSomeInstancing); 如果 `doSomeInstancing` 没有该属性，那么运行时会在 `doSomeInstancing.[[Prototype]]`（也就是 `doSomething.prototype`）中查找该属性。如果 `doSomeInstancing.[[Prototype]]` 有该属性，那么就会使用 `doSomeInstancing.[[Prototype]]` 上的该属性。 -否则，如果 `doSomeInstancing.[[Prototype]]` 没有该属性，那么就会在 `doSomeInstancing.[[Prototype]].[[Prototype]]` 中查找该属性。默认情况下，任何函数的 `prototype` 属性的 `[[Prototype]]` 都是 `Object.prototype`。因此，然后会在 `doSomeInstancing.[[Prototype]].[[Prototype]]`（也就是 `doSomething.prototype.[[Prototype]]`（也就是 `Object.prototype`））上查找该属性。 +否则，如果 `doSomeInstancing.[[Prototype]]` 没有该属性，那么就会在 `doSomeInstancing.[[Prototype]].[[Prototype]]` 中查找该属性。默认情况下，任何函数的 `prototype` 属性的 `[[Prototype]]` 都是 `Object.prototype`。因此会在 `doSomeInstancing.[[Prototype]].[[Prototype]]`（也就是 `doSomething.prototype.[[Prototype]]`（也就是 `Object.prototype`））上查找该属性。 如果在 `doSomeInstancing.[[Prototype]].[[Prototype]]` 中没有找到该属性，那么就会在 `doSomeInstancing.[[Prototype]].[[Prototype]].[[Prototype]]` 中查找该属性。但是，这里有一个问题：`doSomeInstancing.[[Prototype]].[[Prototype]].[[Prototype]]` 不存在，因为 `Object.prototype.[[Prototype]]` 是 `null`。然后，只有在查找完整个 `[[Prototype]]` 链之后，运行时才会断言该属性不存在，并得出该属性的值为 `undefined`。 diff --git a/files/zh-cn/web/javascript/reference/global_objects/map/index.md b/files/zh-cn/web/javascript/reference/global_objects/map/index.md index 97b0956ed213b0..dacdb17bffec29 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/map/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/map/index.md @@ -5,13 +5,13 @@ slug: Web/JavaScript/Reference/Global_Objects/Map {{JSRef}} -**`Map`** 对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者{{Glossary("Primitive", "基本类型")}}）都可以作为一个键或一个值。 +**`Map`** 对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者{{Glossary("Primitive", "原始值")}}）都可以作为键或值。 {{EmbedInteractiveExample("pages/js/map.html", "taller")}} ## 描述 -`Map` 对象是键值对的集合。`Map` 中的一个键**只能出现一次**；它在 `Map` 的集合中是独一无二的。`Map` 对象按键值对迭代——一个 {{jsxref("Statements/for...of", "for...of")}} 循环在每次迭代后会返回一个形式为 `[key，value]` 的数组。迭代按*插入顺序*进行，即键值对按 [`set()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map/set) 方法首次插入到集合中的顺序（也就是说，当调用 `set()` 时，map 中没有具有相同值的键）进行迭代。 +`Map` 对象是键值对的集合。`Map` 中的一个键**只能出现一次**；它在 `Map` 的集合中是独一无二的。`Map` 对象按键值对迭代——一个 {{jsxref("Statements/for...of", "for...of")}} 循环在每次迭代后会返回一个形式为 `[key, value]` 的数组。迭代按*插入顺序*进行，即键值对按 [`set()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map/set) 方法首次插入到集合中的顺序（也就是说，当调用 `set()` 时，map 中没有具有相同值的键）进行迭代。 规范要求 map 实现“平均访问时间与集合中的元素数量呈次线性关系”。因此，它可以在内部表示为哈希表（使用 O(1) 查找）、搜索树（使用 O(log(N)) 查找）或任何其他数据结构，只要复杂度小于 O(N)。 @@ -36,95 +36,107 @@ slug: Web/JavaScript/Reference/Global_Objects/Map <tbody> <tr> <th scope="row">意外的键</th> - <td><code>Map</code> 默认情况不包含任何键。只包含显式插入的键。</td> <td> - <p>一个 <code>Object</code> 有一个原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。</p> + <code>Map</code> 默认不包含任何键。它只包含显式存入的键值对。 + </td> + <td> + <p> + <code>Object</code> 有原型，因此它包含默认的键，如果不小心的话，它们可能会与你自己的键相冲突。 + </p> <div class="notecard note"> - <p><strong>备注：</strong>虽然可以用 {{jsxref("Object.create", "Object.create(null)")}} 来创建一个没有原型的对象，但是这种用法不太常见。</p> + <p> + <strong>备注：</strong>这可以通过使用 {{jsxref("Object.create", "Object.create(null)")}} 来绕过，但很少这样做。 + </p> </div> </td> </tr> + <tr> + <th scope="row">安全性</th> + <td> + <code>Map</code> 可以安全地与用户提供的键值一起使用。 + </td> + <td> + <p> + 在 <code>Object</code> 上设置用户提供的键值对可能会允许攻击者覆盖对象的原型，这可能会导致<a href="https://github.com/eslint-community/eslint-plugin-security/blob/main/docs/the-dangers-of-square-bracket-notation.md">对象注入攻击</a>。就像意外的键问题一样，这也可以通过使用 <code>null</code> 原型对象来缓解。 + </p> + </td> + </tr> <tr> <th scope="row">键的类型</th> - <td>一个 <code>Map</code> 的键可以是<strong>任意值</strong>，包括函数、对象或任意基本类型。</td> - <td>一个 <code>Object</code> 的键必须是一个 {{jsxref("String")}} 或是 {{jsxref("Symbol")}}。</td> + <td> + <code>Map</code> 的键可以为任何值（包括函数、对象或任何原始值）。 + </td> + <td> + <code>Object</code> 的键必须为 {{jsxref("String")}} 或 {{jsxref("Symbol")}}。 + </td> </tr> <tr> <th scope="row">键的顺序</th> <td> - <p><code>Map</code> 中的键是有序的。因此，当迭代的时候，一个 <code>Map</code> 对象以插入的顺序返回键值。</p> + <p> + <code>Map</code> 中的键以简单、直接的方式排序：<code>Map</code> 对象按照插入的顺序迭代条目、键和值。 + </p> </td> <td> - <p>虽然 <code>Object</code> 的键目前是有序的，但并不总是这样，而且这个顺序是复杂的。因此，最好不要依赖属性的顺序。</p> - <p>自 ECMAScript 2015 规范以来，对象的属性被定义为是有序的；ECMAScript 2020 则额外定义了继承属性的顺序。参见 <a href="https://tc39.es/ecma262/#sec-ordinaryownpropertykeys" - >OrdinaryOwnPropertyKeys</a - > - 和 - <a href="https://tc39.es/ecma262/#sec-enumerate-object-properties" - >EnumerateObjectProperties</a - > 抽象规范说明。但是，请注意没有可以迭代对象所有属性的机制，每一种机制只包含了属性的不同子集。（{{jsxref("Statements/for...in","for-in")}} - 仅包含了以字符串为键的属性；{{jsxref("Object.keys")}} - 仅包含了对象自身的、可枚举的、以字符串为键的属性；{{jsxref("Object.getOwnPropertyNames")}} - 包含了所有以字符串为键的属性，即使是不可枚举的；{{jsxref("Object.getOwnPropertySymbols")}} - 与前者类似，但其包含的是以 <code>Symbol</code> 为键的属性，等等。） + <p> + 尽管现在普通的 <code>Object</code> 的键是有序的，但情况并非总是如此，并且其排序比较复杂的。因此，最好不要依赖属性的顺序。 + </p> + <p> + 该顺序最初仅在 ECMAScript 2015 中为自有属性定义；ECMAScript 2020 还定义了继承属性的顺序。但请注意，没有单一机制可以迭代对象的<strong>所有</strong>属性；各种机制各自包含不同的属性子集。（{{jsxref("Statements/for...in", "for-in")}} 仅包含可枚举的字符串键属性；{{jsxref("Object.keys")}} 仅包含可枚举的自有字符串键属性；{{jsxref("Object.getOwnPropertyNames")}} 包括自有的字符串键属性，即使是不可枚举的；{{jsxref("Object.getOwnPropertySymbols")}} 仅对 <code>Symbol</code> 键属性执行相同的操作，等等。） </p> </td> </tr> <tr> - <th scope="row">Size</th> - <td><code>Map</code> 的键值对个数可以轻易地通过 {{jsxref("Map.prototype.size", "size")}} 属性获取。</td> - <td><code>Object</code> 的键值对个数只能手动计算。</td> + <th scope="row"><p>大小</p></th> + <td> + <code>Map</code> 中的项目数量很容易从其 {{jsxref("Map.prototype.size", "size")}} 属性中获得。 + </td> + <td> + 确定 <code>Object</code> 中的项目数量通常更麻烦，效率也较低。一种常见的方法是通过获取 {{jsxref("Object.keys()")}} 返回的数组的{{jsxref("Array/length", "长度", "", 1)}}。 + </td> </tr> <tr> - <th scope="row">迭代</th> - <td><code>Map</code> 是 <a href="/zh-CN/docs/Web/JavaScript/Guide/iterable">可迭代的</a> 的，所以可以直接被迭代。</td> - <td> - <p><code>Object</code> 没有实现 <a - href="/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol" - >迭代协议</a - >，所以使用 JavaSctipt 的 <a href="/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of" - >for...of</a - > 表达式并不能直接迭代对象。</p> - <div class="notecard note"> - <p><strong>备注：</strong></p> - <ul> - <li> - 对象可以实现迭代协议，或者你可以使用 <a - href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys" - ><code>Object.keys</code></a - > 或 <a - href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/entries" - ><code>Object.entries</code></a - >。 - </li> - <li> - <a href="/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in" - >for...in</a - > - 表达式允许你迭代一个对象的<em>可枚举</em>属性。 - </li> - </ul> - </div> - </td> + <th scope="row">迭代</th> + <td> + <code>Map</code> 是<a href="/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols">可迭代对象</a>，所以它可以直接迭代。 + </td> + <td> + <p> + <code>Object</code> 没有实现<a href="/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols#可迭代协议">迭代协议</a>，因此对象默认情况下不能直接通过 JavaScript 的 <a href="/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a> 语句进行迭代。 + </p> + <div class="notecard note"> + <p><strong>备注：</strong></p> + <ul> + <li> + 一个对象可以实现迭代协议，或者你可以使用 <a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys"><code>Object.keys</code></a> 或 <a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/entries"><code>Object.entries</code></a> 来获取一个对象的可迭代对象。 + </li> + <li> + <a href="/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> 语句允许你迭代对象的<em>可枚举</em>属性。 + </li> + </ul> + </div> + </td> </tr> <tr> <th scope="row">性能</th> <td> - <p>在频繁增删键值对的场景下表现更好。</p> + <p>在涉及频繁添加和删除键值对的场景中表现更好。</p> </td> <td> - <p>在频繁添加和删除键值对的场景下未作出优化。</p> + <p>未针对频繁添加和删除键值对进行优化。</p> </td> </tr> <tr> <th scope="row">序列化和解析</th> <td> - <p>没有元素的序列化和解析的支持。</p> - <p>（但是你可以使用携带 <em>replacer</em> 参数的 {{jsxref("JSON.stringify()")}} 创建一个自己的对 <code>Map</code> 的序列化和解析支持。参见 Stack Overflow 上的提问：<a href="https://stackoverflow.com/q/29085197/">How do you JSON.stringify an ES6 Map?</a>）</p> + <p>没有对序列化或解析的原生支持。</p> + <p> + （但你可以通过使用 {{jsxref("JSON.stringify()")}} 及其 <em>replacer</em> 参数和 {{jsxref("JSON.parse()")}} 及其 <em>reviver</em> 参数来为 <code>Map</code> 构建自己的序列化和解析支持。参见 Stack Overflow 问题 <a href="https://stackoverflow.com/q/29085197/">How do you JSON.stringify an ES6 Map?</a>）。 + </p> </td> <td> - <p>原生的由 {{jsxref("Object")}} 到 JSON 的序列化支持，使用 {{jsxref("JSON.stringify()")}}。</p> - <p>原生的由 JSON 到 {{jsxref("Object")}} 的解析支持，使用 {{jsxref("JSON.parse()")}}。</p> + <p>原生支持使用 {{jsxref("JSON.stringify()")}} 序列化 {{jsxref("Object")}} 到 JSON。</p> + <p>原生支持使用 {{jsxref("JSON.parse()")}} 解析 JSON 为 {{jsxref("Object")}}。</p> </td> </tr> </tbody> @@ -166,6 +178,36 @@ contacts.delete("Jessie"); // true console.log(contacts.size); // 1 ``` +### 类 Map 浏览器 API + +**浏览器类 Map 对象**（或称为“maplike 对象”）是其行为在很多方面都类似于 `Map` 的 [Web API](/zh-CN/docs/Web/API) 接口。 + +就像 `Map` 一样，对象中的条目可以以添加的顺序迭代。类似 `Map` 的对象和 `Map` 具有相同的属性和方法。但是，与 `Map` 不同的是，它们仅允许每个条目中的键和值具有特定预定义的类型。 + +允许的类型规范的 IDL 定义给出。例如，{{domxref("RTCStatsReport")}} 是一个类似 `Map` 的对象，必须使用字符串作为键，对象作为值。这是在规范 IDL 中定义的： + +```webidl +interface RTCStatsReport { + readonly maplike<DOMString, object>; +}; +``` + +类 `Map` 对象可以是只读的，也可以是可写的（参见上面 IDL 中的 `readonly` 关键字）。 + +- 只读的类 `Map` 对象具有 [`size`](#map.prototype.size) 属性，以及这些方法：[`entries()`](#map.prototype.entries)、[`forEach()`](#map.prototype.foreach)、[`keys()`](#map.prototype.keys)、[`values()`](#map.prototype.values) 和 [`@@iterator`](#map.prototypeiterator) 。 +- 可写的类 `Map` 对象还额外具有这些方法：[`clear()`](#map.prototype.clear)、[`delete()`](#map.prototype.delete) 和 [`set()`](#map.prototype.set)。 + +除了对键和值类型的限制外，其方法和属性的行为与 `Map` 中的对应实体相同。 + +以下是浏览器中只读的类 `Map` 对象的示例： + +- {{domxref("AudioParamMap")}} +- {{domxref("RTCStatsReport")}} +- {{domxref("EventCounts")}} +- {{domxref("KeyboardLayoutMap")}} +- {{domxref("MIDIInputMap")}} +- {{domxref("MIDIOutputMap")}} + ## 构造函数 - {{jsxref("Map/Map", "Map()")}} @@ -173,13 +215,24 @@ console.log(contacts.size); // 1 ## 静态属性 -- {{jsxref("Map.@@species", "get Map[@@species]")}} +- {{jsxref("Map/@@species", "Map[@@species]")}} - : 用于创建派生对象的构造函数。 +## 静态方法 + +- {{jsxref("Map.groupBy()")}} + - : 根据提供的回调函数返回的值将给定的可迭代对象分组。最终返回的 `Map` 对象使用测试函数返回的唯一值作为键，可用于获取每个组的元素数组。 + ## 实例属性 +这些属性在 `Map.prototype` 上定义，并由所有 `Map` 实例共享。 + +- {{jsxref("Object/constructor", "Map.prototype.constructor")}} + - : 创建实例对象的构造函数。对于 `Map` 实例，初始值为 {{jsxref("Map/Map", "Map")}} 构造函数。 - {{jsxref("Map.prototype.size")}} - : 返回 `Map` 对象中的键值对数量。 +- `Map.prototype[@@toStringTag]` + - : [`@@toStringTag`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) 属性的初始值是字符串 `"Map"`。该属性在 {{jsxref("Object.prototype.toString()")}} 中使用。 ## 实例方法 @@ -187,24 +240,22 @@ console.log(contacts.size); // 1 - : 移除 `Map` 对象中所有的键值对。 - {{jsxref("Map.prototype.delete()")}} - : 移除 `Map` 对象中指定的键值对，如果键值对存在并成功被移除，返回 `true`，否则返回 `false`。调用 `delete` 后再调用 `map.has(key)` 将返回 `false`。 +- {{jsxref("Map.prototype.entries()")}} + - : 返回一个新的迭代器对象，其包含 `Map` 对象中所有键值对 `[key, value]` 二元数组，以插入顺序排列。 +- {{jsxref("Map.prototype.forEach()")}} + - : 以插入顺序为 `Map` 对象中的每个键值对调用一次 `callbackFn`。如果为 `forEach` 提供了 `thisArg` 参数，则它将作为每一次 callback 的 `this` 值。 - {{jsxref("Map.prototype.get()")}} - : 返回与指定的键 `key` 关联的值，若不存在关联的值，则返回 `undefined`。 - {{jsxref("Map.prototype.has()")}} - : 返回一个布尔值，用来表明 `Map` 对象中是否存在与指定的键 `key` 关联的值。 +- {{jsxref("Map.prototype.keys()")}} + - : 返回一个新的迭代器对象，其包含 `Map` 对象中所有元素的键，以插入顺序排列。 - {{jsxref("Map.prototype.set()")}} - : 在 `Map` 对象中设置与指定的键 `key` 关联的值，并返回 `Map` 对象。 -- {{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}} - - - : 返回一个新的迭代对象，其为一个包含 `Map` 对象中所有键值对的 `[key, value]` 数组，并以插入 `Map` 对象的顺序排列。 - -- {{jsxref("Map.prototype.keys()")}} - - : 返回一个新的迭代对象，其中包含 `Map` 对象中所有的键，并以插入 `Map` 对象的顺序排列。 - {{jsxref("Map.prototype.values()")}} - : 返回一个新的迭代对象，其中包含 `Map` 对象中所有的值，并以插入 `Map` 对象的顺序排列。 -- {{jsxref("Map.prototype.entries()")}} - - : 返回一个新的迭代对象，其为一个包含 `Map` 对象中所有键值对的 `[key, value]` 数组，并以插入 `Map` 对象的顺序排列。 -- {{jsxref("Map.prototype.forEach()")}} - - : 以插入的顺序对 `Map` 对象中存在的键值对分别调用一次 `callbackFn`。如果给定了 `thisArg` 参数，这个参数将会是回调函数中 `this` 的值。 +- [`Map.prototype[@@iterator]()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map/@@iterator) + - : 返回一个新的迭代器对象，其包含 `Map` 对象中所有元素 `[key, value]` 二元数组，以插入顺序排列。 ## 示例 @@ -236,7 +287,7 @@ console.log(myMap.get(function () {})); // undefined，因为 keyFunc !== functi ### 将 NaN 作为 Map 的键 -`NaN` 也可以作为 `Map` 对象的键。虽然 `NaN` 与任何值甚至与自己都不相等（`NaN !== NaN` 返回 true），但是因为所有的 `NaN` 的值都是无法区分的，所以下面的例子成立： +{{jsxref("NaN")}} 也可以作为键。虽然 `NaN` 与任何值甚至与自己都不相等（`NaN !== NaN` 返回 true），但是因为所有的 `NaN` 的值都是无法区分的，所以下面的例子成立： ```js const myMap = new Map(); @@ -250,7 +301,7 @@ myMap.get(otherNaN); // "not a number" ``` -### 使用 for...of 方法迭代 Map +### 使用 for...of 迭代 Map `Map` 可以使用 `for...of` 循环来实现迭代： @@ -284,7 +335,7 @@ for (const [key, value] of myMap.entries()) { // 1 = one ``` -### 使用 forEach() 方法迭代 Map +### 使用 forEach() 迭代 Map `Map` 也可以通过 {{jsxref("Map.prototype.forEach", "forEach()")}} 方法迭代： @@ -296,7 +347,7 @@ myMap.forEach((value, key) => { // 1 = one ``` -### Map 与数组的关系 +### Map 与数组对象的关系 ```js const kvArray = [ @@ -304,12 +355,12 @@ const kvArray = [ ["key2", "value2"], ]; -// 使用常规的 Map 构造函数可以将一个二维键值对数组转换成一个 Map 对象 +// 使用常规的 Map 构造函数可以将一个二维的键值对数组转换成一个 Map 对象 const myMap = new Map(kvArray); console.log(myMap.get("key1")); // "value1" -// 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组 +// 使用 Array.from 函数可以将一个 Map 对象转换成一个二维的键值对数组 console.log(Array.from(myMap)); // 输出和 kvArray 相同的数组 // 更简洁的方法来做如上同样的事情，使用展开运算符 @@ -389,8 +440,7 @@ console.log(merged.get(3)); // three ## 参见 -- A polyfill of `Map` is available in - [`core-js`](https://github.com/zloirock/core-js#map) +- [`core-js` 中 `Map` 的 polyfill](https://github.com/zloirock/core-js#map) - {{jsxref("Set")}} - {{jsxref("WeakMap")}} - {{jsxref("WeakSet")}} diff --git a/files/zh-cn/web/javascript/reference/global_objects/number/tostring/index.md b/files/zh-cn/web/javascript/reference/global_objects/number/tostring/index.md index d7aeff63bd3dee..2762c583e7ca8c 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/number/tostring/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/number/tostring/index.md @@ -40,7 +40,7 @@ toString(radix) `0` 和 `-0` 都以 `"0"` 作为其字符串表示。{{jsxref("Infinity")}} 返回 `"Infinity"`，而 {{jsxref("NaN")}} 返回 `"NaN"`。 -如果该数字不是一个整数，则使用小数点 `.` 来分隔小数部分。如果基数为 10，并且数字的大小（忽略符号）大于或等于 10<sup>21</sup> 或小于 10<sup>-6</sup>，则使用[科学计数法](/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#指数)。在这种情况下，返回的字符串总是显式地指定了指数的符号。 +如果该数字不是一个整数，则使用小数点 `.` 来分隔小数部分。如果基数为 10，并且数字的大小（忽略符号）大于或等于 10<sup>21</sup> 或小于 10<sup>-6</sup>，则使用[科学计数法](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#指数)。在这种情况下，返回的字符串总是显式地指定了指数的符号。 ```js console.log((10 ** 21.5).toString()); // "3.1622776601683794e+21" diff --git a/files/zh-cn/web/javascript/reference/global_objects/promise/any/index.md b/files/zh-cn/web/javascript/reference/global_objects/promise/any/index.md index 2ac3ec80717af6..37958672f965e5 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/promise/any/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/promise/any/index.md @@ -25,7 +25,7 @@ Promise.any(iterable) 一个 {{jsxref("Promise")}}，其状态为： - **已拒绝（already rejected）**，如果传入的 `iterable` 为空的话。 -- **异步兑现（asynchronously filfilled）**，当给定的 `iterable` 中的任何一个 Promise 被兑现时，返回的 Promise 就会被兑现。其兑现值是第一个兑现的 Promise 的兑现值。 +- **异步兑现（asynchronously fulfilled）**，当给定的 `iterable` 中的任何一个 Promise 被兑现时，返回的 Promise 就会被兑现。其兑现值是第一个兑现的 Promise 的兑现值。 - **异步拒绝（asynchronously rejected）**，当给定的 `iterable` 中的所有 Promise 都被拒绝时。拒绝原因是一个 {{jsxref("AggregateError")}}，其 `errors` 属性包含一个拒绝原因数组。无论完成顺序如何，这些错误都是按照传入的 Promise 的顺序排序。如果传递的 `iterable` 是非空的，但不包含待定的 Promise，则返回的 Promise 仍然是异步拒绝的（而不是同步拒绝的）。 ## 描述 diff --git a/files/zh-tw/learn/html/howto/index.md b/files/zh-tw/learn/html/howto/index.md index ead4f2fa9fe10a..777bc5d269b61c 100644 --- a/files/zh-tw/learn/html/howto/index.md +++ b/files/zh-tw/learn/html/howto/index.md @@ -45,7 +45,7 @@ HTML 專攻於為文件提供語義資訊，因此 HTML 可以提供使用者更 HTML 只建立文件的基礎架構，可以透過 {{glossary("CSS")}} 或腳本使內容呈現更具互動性。 -- [如何在網頁中使用 CSS](/en-US/docs/Learn/CSS/First_steps/How_CSS_works#how_to_apply_your_css_to_your_html) +- [如何在網頁中使用 CSS](/zh-TW/docs/Learn/CSS/First_steps/How_CSS_works#將_css_套用至_dom) - [如何在網頁中使用 JavaScript](/zh-TW/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage) ### 嵌入內容 diff --git a/files/zh-tw/learn/server-side/django/development_environment/index.md b/files/zh-tw/learn/server-side/django/development_environment/index.md index 6fe14eb9dcb28b..0a195b51ec19d7 100644 --- a/files/zh-tw/learn/server-side/django/development_environment/index.md +++ b/files/zh-tw/learn/server-side/django/development_environment/index.md @@ -46,7 +46,7 @@ Django 如何在安裝和配置方面非常靈活。Django 可以： 每個選項都需要略微不同的配置和設置。以下小節解釋了你的一些選擇。對於本文的其餘部分，我們將介紹 Django 在少見的操作系統上的設置，考量該模塊的其餘部分。 -> **備註：** 其他可能的安裝選項在官方 Django 文檔中介紹。[相應文件點擊這裡](/zh-CN/docs/learn/Server-side/Django/%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83#furtherreading)。 +> **備註：** 其他可能的安裝選項在官方 Django 文檔中介紹。[相應文件點擊這裡](#參見)。 #### 支持哪些操作系統? @@ -388,7 +388,7 @@ Quit the server with CONTROL-C. 在測試部分，您還簡要了解了，我們如何使用`django-admin startproject`，創建一個新的 Django 網站，並使用開發 Web 服務器（`python3 manage.py runserver`）在瀏覽器中運行它。在下一篇文章中，我們將擴展此過程，構建一個簡單、但完整的 Web 應用程序。 -## 參閱 +## 參見 - [Quick Install Guide](https://docs.djangoproject.com/en/2.0/intro/install/) (Django docs) - [How to install Django — Complete guide](https://docs.djangoproject.com/en/2.0/topics/install/) (Django docs) - includes information on how to remove Django diff --git a/files/zh-tw/learn/server-side/express_nodejs/mongoose/index.md b/files/zh-tw/learn/server-side/express_nodejs/mongoose/index.md index fee51e0b95a498..53919cd27229f4 100644 --- a/files/zh-tw/learn/server-side/express_nodejs/mongoose/index.md +++ b/files/zh-tw/learn/server-side/express_nodejs/mongoose/index.md @@ -533,7 +533,7 @@ SomeModel.find(callback_function); ## 安裝 Mongoose -打開命令提示符，並到您創建[本地圖書館骨架網站](/zh-CN/docs/Learn/Server-side/Express_Nodejs/skeleton_website)的目錄。輸入以下命令，安裝 Mongoose（及其依賴項），並將其添加到您的**package.json**文件中，除非您在閱讀上述**Mongoose 入門**時，已經這樣做了。 +打開命令提示符，並到您創建[本地圖書館骨架網站](/zh-TW/docs/Learn/Server-side/Express_Nodejs/skeleton_website)的目錄。輸入以下命令，安裝 Mongoose（及其依賴項），並將其添加到您的**package.json**文件中，除非您在閱讀上述**Mongoose 入門**時，已經這樣做了。 ```bash npm install mongoose diff --git a/files/zh-tw/learn/server-side/express_nodejs/routes/index.md b/files/zh-tw/learn/server-side/express_nodejs/routes/index.md index 41220e525a960b..c2d993623976c4 100644 --- a/files/zh-tw/learn/server-side/express_nodejs/routes/index.md +++ b/files/zh-tw/learn/server-side/express_nodejs/routes/index.md @@ -30,7 +30,7 @@ slug: Learn/Server-side/Express_Nodejs/routes ## 概覽 -在[上一篇教程文章](/zh-CN/docs/Learn/Server-side/Express_Nodejs/mongoose)中，我們定義了 Mongoose 模型，以與數據庫互動，並使用（獨立）腳本創建一些初始庫記錄。現在我們可以編寫代碼，向用戶展示這些信息。我們需要做的第一件事，是確定我們希望能夠在頁面中顯示哪些信息，然後定義適當的 URL，以返回這些資源。然後我們將需要創建路由（URL 處理程序）和視圖（模板）來顯示這些頁面。 +在[上一篇教程文章](/zh-TW/docs/Learn/Server-side/Express_Nodejs/mongoose)中，我們定義了 Mongoose 模型，以與數據庫互動，並使用（獨立）腳本創建一些初始庫記錄。現在我們可以編寫代碼，向用戶展示這些信息。我們需要做的第一件事，是確定我們希望能夠在頁面中顯示哪些信息，然後定義適當的 URL，以返回這些資源。然後我們將需要創建路由（URL 處理程序）和視圖（模板）來顯示這些頁面。 下圖是作為處理 HTTP 請求/響應時，需要實現的主要數據流和事項的提醒。除了視圖和路線之外，圖表還顯示「控制器」 — 實際處理請求的函數，那些與路由請求分開的代碼。 @@ -134,7 +134,7 @@ router.post("/about", function (req, res) { - \* :端點在放置\*字符的地方，可以代換為任意字符串。例如。`'ab\*cd'`的路由路徑，將匹配端點`abcd`, `abXcd`, `abSOMErandomTEXTcd`等。 - () :將一組字符進行匹配，以執行上面三個操作。例如。`'/ab(cd)?e'`，表示以？號對（cd）進行匹配-它會匹配`abe`和`abcde`。（譯註：即（cd）必須為 0 個或 1 個。若為 0，匹配`abe`。若為 1，匹配`abcde`） -路由路徑也可以是[JavaScript 正則表達式](/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions)。例如，下面的路由路徑將與鯰魚`catfish` 和角鯊魚`dogfish`相匹配，但不包括鯰魚`catflap`、鯰魚頭`catfishhead`等。請注意，正則表達式的路徑使用正則表達式語法（它不像以前那樣，是帶引號的字符串）。 +路由路徑也可以是[JavaScript 正則表達式](/zh-TW/docs/Web/JavaScript/Guide/Regular_Expressions)。例如，下面的路由路徑將與鯰魚`catfish` 和角鯊魚`dogfish`相匹配，但不包括鯰魚`catflap`、鯰魚頭`catfishhead`等。請注意，正則表達式的路徑使用正則表達式語法（它不像以前那樣，是帶引號的字符串）。 ```js app.get(/.*fish$/, function (req, res) { diff --git a/files/zh-tw/mozilla/firefox/releases/3/dom_improvements/index.md b/files/zh-tw/mozilla/firefox/releases/3/dom_improvements/index.md index 96e4371fc7f198..027b882607106e 100644 --- a/files/zh-tw/mozilla/firefox/releases/3/dom_improvements/index.md +++ b/files/zh-tw/mozilla/firefox/releases/3/dom_improvements/index.md @@ -23,6 +23,5 @@ Firefox 3 對 DOM 做了一些改善，改善重點之一就是加強對於「 ### 延伸閱讀 -- [Firefox 3 開發人員須知](/zh_tw/docs/Firefox_3_for_developers) -- [Firefox 3 對 CSS 的改善](/zh_tw/docs/Firefox_3_CSS_Improvement) -- [DOM](/zh-TW/docs/DOM) +- [Firefox 3 開發人員須知](/zh-TW/docs/Mozilla/Firefox/Releases/3) +- [DOM](/zh-TW/docs/Web/API/Document_Object_Model) diff --git a/files/zh-tw/web/css/css_grid_layout/index.md b/files/zh-tw/web/css/css_grid_layout/index.md index b8615ad6828c43..1b9d1d39430299 100644 --- a/files/zh-tw/web/css/css_grid_layout/index.md +++ b/files/zh-tw/web/css/css_grid_layout/index.md @@ -7,7 +7,7 @@ slug: Web/CSS/CSS_grid_layout **CSS 格線佈局**長於把頁面的主要區域分離、或是在 HTML 原生語法構建的區域間，定義大小、位置、層次等方面的關聯。 -格線佈局使作者能夠對齊元素為行和列，就像表格一樣，。然而，格線佈局可以更輕易的達成比一般表格更多元化的排版。例如，一個網格容器的子元素可以定位自己和層重疊，類似於 CSS 定位元素。 +格線佈局使作者能夠對齊元素為行和列，就像表格一樣。然而，格線佈局可以更輕易的達成比一般表格更多元化的排版。例如，一個網格容器的子元素可以定位自己和層重疊，類似於 CSS 定位元素。 ## 基本示例