diff --git a/.github/workflows/pr-check-lint_content.yml b/.github/workflows/pr-check-lint_content.yml index 420ece9b848453..db6aa54875f824 100644 --- a/.github/workflows/pr-check-lint_content.yml +++ b/.github/workflows/pr-check-lint_content.yml @@ -32,7 +32,7 @@ jobs: run: | # Use the GitHub API to get the list of changed files # documentation: https://docs.github.com/rest/commits/commits#compare-two-commits - DIFF_DOCUMENTS=$(gh api repos/{owner}/{repo}/compare/${{ env.BASE_SHA }}...${{ env.HEAD_SHA }} \ + DIFF_DOCUMENTS=$(gh api repos/{owner}/{repo}/compare/${BASE_SHA}...${HEAD_SHA} \ --jq '.files | .[] | select(.status|IN("added", "modified", "renamed", "copied", "changed")) | .filename') # filter out files that are not markdown DIFF_DOCUMENTS=$(echo "${DIFF_DOCUMENTS}" | egrep -i ".*\.md$" | xargs) @@ -96,7 +96,7 @@ jobs: # https://docs.github.com/en/actions/using-workflows/workflow-commands-for-github-actions#multiline-strings EOF="$(openssl rand -hex 8)" - files_to_lint="${{ env.DIFF_DOCUMENTS }}" + files_to_lint="${DIFF_DOCUMENTS}" echo "Running markdownlint --fix" MD_LINT_FAILED=false @@ -160,7 +160,7 @@ jobs: env: REVIEWDOG_GITHUB_API_TOKEN: ${{ secrets.GITHUB_TOKEN }} run: | - echo "${{ env.MD_LINT_LOG }}" | \ + echo "${MD_LINT_LOG}" | \ reviewdog \ -efm="%f:%l:%c %m" \ -efm="%f:%l %m" \ @@ -172,8 +172,8 @@ jobs: if: env.FILES_MODIFIED == 'true' || env.MD_LINT_FAILED == 'true' || env.FM_LINT_FAILED == 'true' run: | echo -e "\nLogs from markdownlint:" - echo "${{ env.MD_LINT_LOG }}" + echo "${MD_LINT_LOG}" echo -e "\nLogs from front-matter linter:" - echo "${{ env.FM_LINT_LOG }}" + echo "${FM_LINT_LOG}" echo -e "\nPlease fix all the linting issues mentioned in above logs and in the review comments." exit 1 diff --git a/.github/workflows/pr-test.yml b/.github/workflows/pr-test.yml index 9d764782ab2c92..2f9710626f4117 100644 --- a/.github/workflows/pr-test.yml +++ b/.github/workflows/pr-test.yml @@ -42,7 +42,7 @@ jobs: run: | # Use the GitHub API to get the list of changed files # documentation: https://docs.github.com/rest/commits/commits#compare-two-commits - DIFF_DOCUMENTS=$(gh api repos/{owner}/{repo}/compare/${{ env.BASE_SHA }}...${{ env.HEAD_SHA }} \ + DIFF_DOCUMENTS=$(gh api repos/{owner}/{repo}/compare/${BASE_SHA}...${HEAD_SHA} \ --jq '.files | .[] | select(.status|IN("added", "modified", "renamed", "copied", "changed")) | .filename') # filter out files that are not markdown files @@ -112,23 +112,23 @@ jobs: working-directory: ${{ github.workspace }}/mdn/content run: | - mkdir -p ${{ env.BUILD_OUT_ROOT }} + mkdir -p ${BUILD_OUT_ROOT} # Don't use `yarn build` (from mdn/content) because that one hardcodes # the BUILD_OUT_ROOT and CONTENT_ROOT env vars. - node node_modules/@mdn/yari/build/cli.js ${{ env.GIT_DIFF_CONTENT }} + node node_modules/@mdn/yari/build/cli.js ${GIT_DIFF_CONTENT} echo "Disk usage size of build" - du -sh ${{ env.BUILD_OUT_ROOT }} + du -sh ${BUILD_OUT_ROOT} # Save the PR number into the build - echo ${{ github.event.number }} > ${{ env.BUILD_OUT_ROOT }}/NR + echo ${{ github.event.number }} > ${BUILD_OUT_ROOT}/NR # Download the raw diff blob and store that inside the build # directory. # The purpose of this is for the PR Review Companion to later # be able to use this raw diff file for the benefit of analyzing. - wget https://github.com/${{ github.repository }}/compare/${{ env.BASE_SHA }}...${{ env.HEAD_SHA }}.diff -O ${{ env.BUILD_OUT_ROOT }}/DIFF + wget https://github.com/${{ github.repository }}/compare/${BASE_SHA}...${HEAD_SHA}.diff -O ${BUILD_OUT_ROOT}/DIFF # Set the output variable so the next job could skip if there are no assets echo "has_assets=true" >> "$GITHUB_OUTPUT" @@ -137,9 +137,9 @@ jobs: if: ${{ env.GIT_DIFF_CONTENT }} run: | # Exclude the .map files, as they're used for debugging JS and CSS. - rsync -a --exclude "*.map" ${{ github.workspace }}/mdn/content/node_modules/@mdn/yari/client/build/ ${{ env.BUILD_OUT_ROOT }} + rsync -a --exclude "*.map" ${{ github.workspace }}/mdn/content/node_modules/@mdn/yari/client/build/ ${BUILD_OUT_ROOT} # Show the final disk usage size of the build. - du -sh ${{ env.BUILD_OUT_ROOT }} + du -sh ${BUILD_OUT_ROOT} - uses: actions/upload-artifact@v4 if: ${{ env.GIT_DIFF_CONTENT }} @@ -154,9 +154,9 @@ jobs: CONTENT_TRANSLATED_ROOT: ${{ github.workspace }}/files working-directory: ${{ github.workspace }}/mdn/content run: | - echo ${{ env.GIT_DIFF_FILES }} + echo ${GIT_DIFF_FILES} - yarn filecheck ${{ env.GIT_DIFF_FILES }} + yarn filecheck ${GIT_DIFF_FILES} review: needs: tests diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index ad5291f6fb8ce4..808aa78ab3c224 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -1721,10 +1721,10 @@ /es/docs/Web/API/WebSockets_API/Escribiendo_servidor_WebSocket /es/docs/Web/API/WebSockets_API/Writing_WebSocket_server /es/docs/Web/API/WebSockets_API/Escribiendo_servidores_con_WebSocket /es/docs/Web/API/WebSockets_API/Writing_WebSocket_servers /es/docs/Web/API/Web_Speech_API/Uso_de_la_Web_Speech_API /es/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API -/es/docs/Web/API/Window.clearTimeout /es/docs/Web/API/clearTimeout +/es/docs/Web/API/Window.clearTimeout /es/docs/Web/API/Window/clearTimeout /es/docs/Web/API/Window.navigator /es/docs/Web/API/Window/navigator /es/docs/Web/API/Window.onbeforeunload /es/docs/Web/API/Window/beforeunload_event -/es/docs/Web/API/Window.setTimeout /es/docs/Web/API/setTimeout +/es/docs/Web/API/Window.setTimeout /es/docs/Web/API/Window/setTimeout /es/docs/Web/API/Window/applicationCache /es/docs/orphaned/Web/API/Window/applicationCache /es/docs/Web/API/Window/dialogArguments /es/docs/orphaned/Web/API/Window/dialogArguments /es/docs/Web/API/WindowBase64.atob /es/docs/Web/API/Window/atob @@ -1736,18 +1736,18 @@ /es/docs/Web/API/WindowEventHandlers/onpopstate /es/docs/Web/API/Window/popstate_event /es/docs/Web/API/WindowOrWorkerGlobalScope/atob /es/docs/Web/API/Window/atob /es/docs/Web/API/WindowOrWorkerGlobalScope/caches /es/docs/Web/API/Window/caches -/es/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval /es/docs/Web/API/clearInterval -/es/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout /es/docs/Web/API/clearTimeout -/es/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap /es/docs/Web/API/createImageBitmap +/es/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval /es/docs/Web/API/Window/clearInterval +/es/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout /es/docs/Web/API/Window/clearTimeout +/es/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap /es/docs/Web/API/Window/createImageBitmap /es/docs/Web/API/WindowOrWorkerGlobalScope/fetch /es/docs/Web/API/Window/fetch /es/docs/Web/API/WindowOrWorkerGlobalScope/indexedDB /es/docs/Web/API/Window/indexedDB /es/docs/Web/API/WindowOrWorkerGlobalScope/isSecureContext /es/docs/Web/API/Window/isSecureContext -/es/docs/Web/API/WindowOrWorkerGlobalScope/setInterval /es/docs/Web/API/setInterval -/es/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout /es/docs/Web/API/setTimeout -/es/docs/Web/API/WindowTimers/clearInterval /es/docs/Web/API/clearInterval -/es/docs/Web/API/WindowTimers/clearTimeout /es/docs/Web/API/clearTimeout -/es/docs/Web/API/WindowTimers/setInterval /es/docs/Web/API/setInterval -/es/docs/Web/API/WindowTimers/setTimeout /es/docs/Web/API/setTimeout +/es/docs/Web/API/WindowOrWorkerGlobalScope/setInterval /es/docs/Web/API/Window/setInterval +/es/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout /es/docs/Web/API/Window/setTimeout +/es/docs/Web/API/WindowTimers/clearInterval /es/docs/Web/API/Window/clearInterval +/es/docs/Web/API/WindowTimers/clearTimeout /es/docs/Web/API/Window/clearTimeout +/es/docs/Web/API/WindowTimers/setInterval /es/docs/Web/API/Window/setInterval +/es/docs/Web/API/WindowTimers/setTimeout /es/docs/Web/API/Window/setTimeout /es/docs/Web/API/XMLDocument/async /es/docs/Web/API/XMLDocument /es/docs/Web/API/XMLHttpRequest/FormData /es/docs/Web/API/FormData /es/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest /es/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest @@ -1755,6 +1755,8 @@ /es/docs/Web/API/atob /es/docs/Web/API/Window/atob /es/docs/Web/API/btoa /es/docs/Web/API/Window/btoa /es/docs/Web/API/caches /es/docs/Web/API/Window/caches +/es/docs/Web/API/clearInterval /es/docs/Web/API/Window/clearInterval +/es/docs/Web/API/clearTimeout /es/docs/Web/API/Window/clearTimeout /es/docs/Web/API/console/assert /es/docs/Web/API/console/assert_static /es/docs/Web/API/console/count /es/docs/Web/API/console/count_static /es/docs/Web/API/console/dir /es/docs/Web/API/console/dir_static @@ -1767,12 +1769,15 @@ /es/docs/Web/API/console/timeEnd /es/docs/Web/API/console/timeEnd_static /es/docs/Web/API/console/trace /es/docs/Web/API/console/trace_static /es/docs/Web/API/console/warn /es/docs/Web/API/console/warn_static +/es/docs/Web/API/createImageBitmap /es/docs/Web/API/Window/createImageBitmap /es/docs/Web/API/crypto_property /es/docs/Web/API/Window/crypto /es/docs/Web/API/event.defaultPrevented /es/docs/Web/API/Event/defaultPrevented /es/docs/Web/API/event.which /es/docs/Web/API/UIEvent/which /es/docs/Web/API/fetch /es/docs/Web/API/Window/fetch /es/docs/Web/API/indexedDB /es/docs/Web/API/Window/indexedDB /es/docs/Web/API/isSecureContext /es/docs/Web/API/Window/isSecureContext +/es/docs/Web/API/setInterval /es/docs/Web/API/Window/setInterval +/es/docs/Web/API/setTimeout /es/docs/Web/API/Window/setTimeout /es/docs/Web/Accesibilidad /es/docs/Web/Accessibility /es/docs/Web/Accesibilidad/Comunidad /es/docs/conflicting/Web/Accessibility /es/docs/Web/Accesibilidad/Understanding_WCAG /es/docs/Web/Accessibility/Understanding_WCAG @@ -2199,13 +2204,17 @@ /es/docs/Web/HTML/microformatos /es/docs/Web/HTML/microformats /es/docs/Web/HTML/Índice /es/docs/Web/HTML /es/docs/Web/HTTP/Access_control_CORS /es/docs/Web/HTTP/CORS +/es/docs/Web/HTTP/Basics_of_HTTP /es/docs/conflicting/Web/HTTP /es/docs/Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs /es/docs/Web/URI/Authority/Choosing_between_www_and_non-www_URLs /es/docs/Web/HTTP/Basics_of_HTTP/Data_URIs /es/docs/Web/URI/Schemes/data /es/docs/Web/HTTP/Basics_of_HTTP/Data_URLs /es/docs/Web/URI/Schemes/data /es/docs/Web/HTTP/Basics_of_HTTP/Datos_URIs /es/docs/Web/URI/Schemes/data +/es/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP /es/docs/Web/HTTP/Evolution_of_HTTP /es/docs/Web/HTTP/Basics_of_HTTP/Identificación_recursos_en_la_Web /es/docs/orphaned/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web /es/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web /es/docs/orphaned/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web -/es/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Lista_completa_de_tipos_MIME /es/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types +/es/docs/Web/HTTP/Basics_of_HTTP/MIME_types /es/docs/Web/HTTP/MIME_types +/es/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types /es/docs/Web/HTTP/MIME_types/Common_types +/es/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Lista_completa_de_tipos_MIME /es/docs/Web/HTTP/MIME_types/Common_types /es/docs/Web/HTTP/Gestion_de_la_conexion_en_HTTP_1.x /es/docs/Web/HTTP/Connection_management_in_HTTP_1.x /es/docs/Web/HTTP/Peticiones_condicionales /es/docs/Web/HTTP/Conditional_requests /es/docs/Web/HTTP/Sesión /es/docs/Web/HTTP/Session diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index 4c761971946439..6f362a29aaf10f 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -5460,6 +5460,14 @@ "modified": "2019-03-23T22:30:46.211Z", "contributors": ["khrizenriquez"] }, + "Web/API/Window/clearInterval": { + "modified": "2019-03-23T22:56:16.485Z", + "contributors": ["Guitxo"] + }, + "Web/API/Window/clearTimeout": { + "modified": "2019-06-18T10:20:27.972Z", + "contributors": ["AlePerez92", "fscholz", "basemnassar11", "VictorArias"] + }, "Web/API/Window/close": { "modified": "2020-10-15T21:37:07.614Z", "contributors": ["SphinxKnight", "dgrizzla", "Siro_Diaz"] @@ -5472,6 +5480,10 @@ "modified": "2019-03-23T22:45:47.266Z", "contributors": ["julian3xl"] }, + "Web/API/Window/createImageBitmap": { + "modified": "2020-10-15T22:14:17.553Z", + "contributors": ["Bumxu"] + }, "Web/API/Window/crypto": { "modified": "2020-02-12T20:26:38.795Z", "contributors": ["joseluisq", "AlePerez92", "victorjavierss"] @@ -5635,6 +5647,21 @@ "modified": "2019-03-23T22:57:50.655Z", "contributors": ["svera", "pedromagnus", "develasquez"] }, + "Web/API/Window/setInterval": { + "modified": "2020-08-24T18:02:23.092Z", + "contributors": ["mastertrooper", "Makinita", "Klius", "claudionebbia"] + }, + "Web/API/Window/setTimeout": { + "modified": "2019-03-23T23:17:29.378Z", + "contributors": [ + "BubuAnabelas", + "vltamara", + "nauj27", + "fscholz", + "AshfaqHossain", + "VictorArias" + ] + }, "Web/API/Window/showModalDialog": { "modified": "2019-03-18T20:58:55.311Z", "contributors": ["SphinxKnight", "BubuAnabelas", "Grijander81"] @@ -5707,14 +5734,6 @@ "inma_610" ] }, - "Web/API/clearInterval": { - "modified": "2019-03-23T22:56:16.485Z", - "contributors": ["Guitxo"] - }, - "Web/API/clearTimeout": { - "modified": "2019-06-18T10:20:27.972Z", - "contributors": ["AlePerez92", "fscholz", "basemnassar11", "VictorArias"] - }, "Web/API/console": { "modified": "2019-08-30T08:42:12.082Z", "contributors": ["ajuanjojjj", "fcanellas", "vlguerrero", "chrisdavidmills"] @@ -5767,10 +5786,6 @@ "modified": "2020-10-15T21:53:36.780Z", "contributors": ["juanluisrp", "oderflaj"] }, - "Web/API/createImageBitmap": { - "modified": "2020-10-15T22:14:17.553Z", - "contributors": ["Bumxu"] - }, "Web/API/notification/icon": { "modified": "2019-03-23T22:59:32.492Z", "contributors": ["joxhker"] @@ -5783,21 +5798,6 @@ "modified": "2019-03-23T22:50:37.341Z", "contributors": ["MarkelCuesta", "jezdez", "Davdriver"] }, - "Web/API/setInterval": { - "modified": "2020-08-24T18:02:23.092Z", - "contributors": ["mastertrooper", "Makinita", "Klius", "claudionebbia"] - }, - "Web/API/setTimeout": { - "modified": "2019-03-23T23:17:29.378Z", - "contributors": [ - "BubuAnabelas", - "vltamara", - "nauj27", - "fscholz", - "AshfaqHossain", - "VictorArias" - ] - }, "Web/Accessibility": { "modified": "2020-09-22T14:24:03.363Z", "contributors": [ @@ -9415,34 +9415,6 @@ "DavidPeniafiel" ] }, - "Web/HTTP/Basics_of_HTTP": { - "modified": "2020-04-20T02:59:31.392Z", - "contributors": [ - "obed3113", - "sanxofon", - "Sergio_Gonzalez_Collado", - "cissoid" - ] - }, - "Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP": { - "modified": "2019-03-23T22:10:11.567Z", - "contributors": ["Sergio_Gonzalez_Collado", "ChrisMHM"] - }, - "Web/HTTP/Basics_of_HTTP/MIME_types": { - "modified": "2019-11-18T08:03:54.325Z", - "contributors": [ - "IsaacAaron", - "sanxofon", - "Sergio_Gonzalez_Collado", - "kevinmont", - "juanrarodriguez18", - "strattadb" - ] - }, - "Web/HTTP/Basics_of_HTTP/MIME_types/Common_types": { - "modified": "2020-02-28T13:10:45.613Z", - "contributors": ["chrisdavidmills", "sanxofon", "franklevel", "gabrielnoe"] - }, "Web/HTTP/CORS": { "modified": "2020-08-10T16:23:20.546Z", "contributors": [ @@ -9521,6 +9493,10 @@ "omertafox" ] }, + "Web/HTTP/Evolution_of_HTTP": { + "modified": "2019-03-23T22:10:11.567Z", + "contributors": ["Sergio_Gonzalez_Collado", "ChrisMHM"] + }, "Web/HTTP/Headers": { "modified": "2019-12-10T13:29:15.931Z", "contributors": [ @@ -9719,6 +9695,21 @@ "modified": "2020-10-15T21:59:06.897Z", "contributors": ["JulioMoreyra", "francinysalles", "tonialfaro"] }, + "Web/HTTP/MIME_types": { + "modified": "2019-11-18T08:03:54.325Z", + "contributors": [ + "IsaacAaron", + "sanxofon", + "Sergio_Gonzalez_Collado", + "kevinmont", + "juanrarodriguez18", + "strattadb" + ] + }, + "Web/HTTP/MIME_types/Common_types": { + "modified": "2020-02-28T13:10:45.613Z", + "contributors": ["chrisdavidmills", "sanxofon", "franklevel", "gabrielnoe"] + }, "Web/HTTP/Messages": { "modified": "2019-11-12T11:40:26.816Z", "contributors": [ @@ -14288,6 +14279,15 @@ "Nukeador" ] }, + "conflicting/Web/HTTP": { + "modified": "2020-04-20T02:59:31.392Z", + "contributors": [ + "obed3113", + "sanxofon", + "Sergio_Gonzalez_Collado", + "cissoid" + ] + }, "conflicting/Web/HTTP/Basics_of_HTTP/MIME_types": { "modified": "2019-01-16T15:43:53.805Z", "contributors": [ diff --git a/files/es/web/http/basics_of_http/index.md b/files/es/conflicting/web/http/index.md similarity index 98% rename from files/es/web/http/basics_of_http/index.md rename to files/es/conflicting/web/http/index.md index 89eb19f963bab5..0725dbfefbb528 100644 --- a/files/es/web/http/basics_of_http/index.md +++ b/files/es/conflicting/web/http/index.md @@ -1,6 +1,7 @@ --- title: Conceptos básicos de HTTP -slug: Web/HTTP/Basics_of_HTTP +slug: conflicting/Web/HTTP +original_slug: Web/HTTP/Basics_of_HTTP --- {{HTTPSidebar}} diff --git a/files/es/web/api/clearinterval/index.md b/files/es/web/api/window/clearinterval/index.md similarity index 91% rename from files/es/web/api/clearinterval/index.md rename to files/es/web/api/window/clearinterval/index.md index ccbe3a4985e6e4..3b4dded0ab2388 100644 --- a/files/es/web/api/clearinterval/index.md +++ b/files/es/web/api/window/clearinterval/index.md @@ -1,6 +1,7 @@ --- title: WindowTimers.clearInterval() -slug: Web/API/clearInterval +slug: Web/API/Window/clearInterval +original_slug: Web/API/clearInterval --- {{APIRef("HTML DOM")}} diff --git a/files/es/web/api/cleartimeout/index.md b/files/es/web/api/window/cleartimeout/index.md similarity index 95% rename from files/es/web/api/cleartimeout/index.md rename to files/es/web/api/window/cleartimeout/index.md index 5c77b4c3794950..4aeb0d79f9a9d0 100644 --- a/files/es/web/api/cleartimeout/index.md +++ b/files/es/web/api/window/cleartimeout/index.md @@ -1,6 +1,7 @@ --- title: window.clearTimeout -slug: Web/API/clearTimeout +slug: Web/API/Window/clearTimeout +original_slug: Web/API/clearTimeout --- {{ApiRef}} diff --git a/files/es/web/api/createimagebitmap/index.md b/files/es/web/api/window/createimagebitmap/index.md similarity index 97% rename from files/es/web/api/createimagebitmap/index.md rename to files/es/web/api/window/createimagebitmap/index.md index 43a86129ef01de..51a5e63062eef2 100644 --- a/files/es/web/api/createimagebitmap/index.md +++ b/files/es/web/api/window/createimagebitmap/index.md @@ -1,6 +1,7 @@ --- title: self.createImageBitmap() -slug: Web/API/createImageBitmap +slug: Web/API/Window/createImageBitmap +original_slug: Web/API/createImageBitmap --- {{APIRef("Canvas API")}} diff --git a/files/es/web/api/setinterval/index.md b/files/es/web/api/window/setinterval/index.md similarity index 99% rename from files/es/web/api/setinterval/index.md rename to files/es/web/api/window/setinterval/index.md index ce2b6440455a40..4d8dd57d7f55f7 100644 --- a/files/es/web/api/setinterval/index.md +++ b/files/es/web/api/window/setinterval/index.md @@ -1,6 +1,7 @@ --- title: setInterval() -slug: Web/API/setInterval +slug: Web/API/Window/setInterval +original_slug: Web/API/setInterval l10n: sourceCommit: 0717d1c0a7528b2dd44d065fe90d860e3bdc2e6a --- diff --git a/files/es/web/api/settimeout/index.md b/files/es/web/api/window/settimeout/index.md similarity index 99% rename from files/es/web/api/settimeout/index.md rename to files/es/web/api/window/settimeout/index.md index cf89ebc0e2b596..439fd8524337fd 100644 --- a/files/es/web/api/settimeout/index.md +++ b/files/es/web/api/window/settimeout/index.md @@ -1,6 +1,7 @@ --- title: setTimeout() -slug: Web/API/setTimeout +slug: Web/API/Window/setTimeout +original_slug: Web/API/setTimeout l10n: sourceCommit: 4ba12fec878a1f941492ada3edd467bfd76532cf --- diff --git a/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md index c935c0e7392677..53aa7d02f04716 100644 --- a/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md +++ b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md @@ -91,6 +91,8 @@ Definimos filas y columnas en nuestra cuadrícula con las propiedades {{cssxref( ![](1_grid_track.png) +### Ejemplo básico + Puedo modificar nuestro ejemplo anterior al agregar la propiedad `grid-template-columns`, para así definir el tamaño (ancho) de las vías de cada columna. Ahora he creado una cuadrícula con tres vías por columna de 200 píxeles. Los elementos hijo se posicionarán en esta cuadrícula uno en cada una de las celdas de la cuadrícula. @@ -132,9 +134,9 @@ Ahora he creado una cuadrícula con tres vías por columna de 200 píxeles. Los } ``` -{{ EmbedLiveSample('grid_first', '610', '140') }} +{{ EmbedLiveSample('Ejemplo_basico', '610', '140') }} -### La Unidad fr +### La unidad fr Las vías se pueden definir usando cualquier unidad de medida. Grid también introduce una unidad de longitud adicional para ayudarnos a crear vías de cuadrícula flexibles. La nueva unidad fr representa una fracción del espacio disponible en el contenedor de la cuadrícula. La siguiente definición de cuadrícula crearía tres vias con el mismo ancho, que se expanden y se encogen de acuerdo el espacio disponible. @@ -175,10 +177,22 @@ Las vías se pueden definir usando cualquier unidad de medida. Grid también int } ``` -{{ EmbedLiveSample('La_Unidad_fr', '220', '140') }} +{{ EmbedLiveSample('La_unidad_fr', '220', '140') }} + +### Tamaño desigual En el próximo ejemplo creamos una definición con una vía de `2fr` y luego dos vías de `1fr`. El espacio disponible se divide en cuatro. Dos partes corresponden a la primera vía y una parte a cada una de las dos vias restantes. +```html +
+
One
+
Two
+
Three
+
Four
+
Five
+
+``` + ```css .wrapper { display: grid; @@ -186,7 +200,41 @@ En el próximo ejemplo creamos una definición con una vía de `2fr` y luego dos } ``` -En este ejemplo final mezclamos las vías de tamaño absoluto con unidades de fracción(fr). La primera vía tiene 500 píxeles, por lo que este ancho fijo se sustrae del espacio disponible.El espacio restante se divide en tres y se asigna en proporción a las dos vías flexibles. +```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; +} +``` + +{{ EmbedLiveSample('Tamaño_desigual', '220', '140') }} + +### Mezclando tamanaños absolutos y flexibles + +En este ejemplo final mezclamos las vías de tamaño absoluto con unidades de fracción(fr). La primera vía tiene 500 píxeles, por lo que este ancho fijo se sustrae del espacio disponible. El espacio restante se divide en tres y se asigna en proporción a las dos vías flexibles. + +```html +
+
One
+
Two
+
Three
+
Four
+
Five
+
+``` ```css .wrapper { @@ -195,6 +243,28 @@ En este ejemplo final mezclamos las vías de tamaño absoluto con unidades de fr } ``` +```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; +} +``` + +{{ EmbedLiveSample('Mezclando_tamanaños_absolutos_y_flexibles', '220', '140') }} + ### Listando vías con la notación `repeat()` Las cuadrículas grandes con muchas vías o celdas pueden utilizar la notación `repeat()` con el fin de repetir todas o una sección de la lista de vías. Por ejemplo la definición de cuadrícula: diff --git a/files/es/web/css/text-wrap/index.md b/files/es/web/css/text-wrap/index.md new file mode 100644 index 00000000000000..e200492adfa27f --- /dev/null +++ b/files/es/web/css/text-wrap/index.md @@ -0,0 +1,142 @@ +--- +title: text-wrap +slug: Web/CSS/text-wrap +l10n: + sourceCommit: 4ecbac9e89961a132c1e7f5493ec94f60dcb1ee4 +--- + +{{CSSRef}} + +La propiedad abreviada de CSS **`text-wrap`** controla cómo se envuelve el texto dentro de un elemento. Los diferentes valores proporcionan: + +- Mejoras tipográficas, por ejemplo, longitudes de línea más equilibradas en títulos divididos. +- Una forma de desactivar completamente el ajuste de texto. + +> [!NOTE] +> Las propiedades {{CSSxRef("white-space-collapse")}} y `text-wrap` pueden declararse juntas usando la propiedad abreviada {{CSSxRef("white-space")}}. + +{{EmbedInteractiveExample("pages/css/text-wrap.html")}} + +## Propiedades constituyentes + +Esta propiedad es una abreviatura de las siguientes propiedades de CSS: + +- [`text-wrap-mode`](/es/docs/Web/CSS/text-wrap-mode) +- [`text-wrap-style`](/es/docs/Web/CSS/text-wrap-style) + +## Sintaxis + +```css +/* Valores de palabras clave */ +text-wrap: wrap; +text-wrap: nowrap; +text-wrap: balance; +text-wrap: pretty; +text-wrap: stable; + +/* Valores globales */ +text-wrap: inherit; +text-wrap: initial; +text-wrap: revert; +text-wrap: revert-layer; +text-wrap: unset; +``` + +La propiedad `text-wrap` se especifica como una palabra clave única elegida de la lista de valores a continuación. + +### Valores + +- `wrap` + - : El texto se envuelve en líneas en caracteres apropiados (por ejemplo, espacios en idiomas como el inglés que usan separadores de espacio) para minimizar el desbordamiento. Este es el valor predeterminado. +- `nowrap` + - : El texto no se envuelve en líneas. Desbordará su elemento contenedor en lugar de dividirse en una nueva línea. +- `balance` + - : El texto se envuelve de una manera que equilibra mejor el número de caracteres en cada línea, mejorando la calidad y la legibilidad del diseño. Dado que contar caracteres y equilibrarlos en varias líneas es computacionalmente costoso, este valor solo es compatible con bloques de texto que abarcan un número limitado de líneas (seis o menos para Chromium y diez o menos para Firefox). +- `pretty` + - : Da como resultado el mismo comportamiento que `wrap`, excepto que el agente de usuario utilizará un algoritmo más lento que favorece un mejor diseño sobre la velocidad. Esto está destinado al texto principal donde se prefiere una buena tipografía sobre el rendimiento (por ejemplo, cuando se debe minimizar el número de palabras [huérfanas](/es/docs/Web/CSS/orphans)). +- `stable` + - : Da como resultado el mismo comportamiento que `wrap`, excepto que cuando el usuario está editando el contenido, las líneas que preceden a las líneas que están editando permanecen estáticas en lugar de que todo el bloque de texto se vuelva a ajustar. + +## Descripción + +Hay dos formas en que el texto puede fluir a través de líneas dentro de un bloque de contenido, como un párrafo ({{HTMLElement("p")}}) o encabezados ({{HTMLElement("heading_elements","<h1>–<h6>")}}). Estos son _saltos de línea forzados_, que son controlados por el usuario, y _saltos de línea suaves_, que son controlados por el navegador. La propiedad `text-wrap` se puede usar para indicar al navegador cómo controlar los _saltos de línea suaves_. + +El valor que elija para `text-wrap` depende de cuántas líneas de texto anticipe estilizar, si el texto es `contenteditable` (contenido editable), y si necesita priorizar la apariencia o el rendimiento. + +Cuando el contenido estilizado se limitará a un número corto de líneas, como títulos, leyendas y citas en bloque, se puede agregar `text-wrap: balance` para equilibrar el número de caracteres en cada línea, mejorando la calidad y la legibilidad del diseño. Dado que los navegadores limitan el número de líneas afectadas por esta propiedad, el impacto de este valor en el rendimiento es insignificante. + +Para secciones de texto más largas, se puede usar `text-wrap: pretty`. Tenga en cuenta que `pretty` tiene un efecto negativo en el rendimiento, por lo que solo debe usarse para bloques de texto más largos cuando el diseño es más importante que la velocidad. + +El valor `stable` mejora la experiencia del usuario cuando se usa en [`contenteditable`](/es/docs/Web/HTML/Global_attributes/contenteditable) (contenido que es editable). Este valor asegura que, a medida que el usuario está editando texto, las líneas anteriores en el área que se está editando permanezcan estables. + +## Definición formal + +{{CSSInfo}} + +## Sintaxis formal + +{{CSSSyntax}} + +## Ejemplos + +### Comparación de valores básicos de text-wrap + +#### HTML + +```html +

+ El comportamiento predeterminado; el texto en el título se envuelve + "normalmente" +

+ +

+ En este caso, el texto en el título no se envuelve y desborda el contenedor +

+ +

+ En este caso, el texto en el título está bien equilibrado entre líneas +

+``` + +### CSS + +```css +.wrap { + text-wrap: wrap; +} + +.nowrap { + text-wrap: nowrap; +} + +.balance { + text-wrap: balance; +} + +h2 { + font-size: 2rem; + font-family: sans-serif; +} +``` + +#### Resultado + +El texto en el ejemplo es editable. Cambie el texto, agregando palabras largas, para ver cómo las diferentes longitudes de la línea y las palabras impactan el envoltorio. + +{{EmbedLiveSample("Ejemplos", "100%", 350)}} + +## Especificaciones + +{{Specifications}} + +## Compatibilidad con los navegadores + +{{Compat}} + +## Véase también + +- {{CSSxRef("white-space")}} +- {{CSSxRef("white-space-collapse")}} +- [Módulo de texto CSS](/es/docs/Web/CSS/CSS_text) +- [CSS `text-wrap: balance`](https://developer.chrome.com/docs/css-ui/css-text-wrap-balance) en developer.chrome.com +- [CSS `text-wrap: pretty`](https://developer.chrome.com/blog/css-text-wrap-pretty/) en developer.chrome.com diff --git a/files/es/web/http/basics_of_http/evolution_of_http/index.md b/files/es/web/http/evolution_of_http/index.md similarity index 99% rename from files/es/web/http/basics_of_http/evolution_of_http/index.md rename to files/es/web/http/evolution_of_http/index.md index 1d38c4992f2ce4..4684d6bcd460c4 100644 --- a/files/es/web/http/basics_of_http/evolution_of_http/index.md +++ b/files/es/web/http/evolution_of_http/index.md @@ -1,6 +1,7 @@ --- title: Evolución del protocolo HTTP -slug: Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP +slug: Web/HTTP/Evolution_of_HTTP +original_slug: Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP --- {{HTTPSidebar}} diff --git a/files/es/web/http/basics_of_http/mime_types/common_types/index.md b/files/es/web/http/mime_types/common_types/index.md similarity index 99% rename from files/es/web/http/basics_of_http/mime_types/common_types/index.md rename to files/es/web/http/mime_types/common_types/index.md index c4269f6d809c71..0711b60967a996 100644 --- a/files/es/web/http/basics_of_http/mime_types/common_types/index.md +++ b/files/es/web/http/mime_types/common_types/index.md @@ -1,6 +1,7 @@ --- title: Lista completa de tipos MIME -slug: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types +slug: Web/HTTP/MIME_types/Common_types +original_slug: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types --- {{HTTPSidebar}} diff --git a/files/es/web/http/basics_of_http/mime_types/index.md b/files/es/web/http/mime_types/index.md similarity index 99% rename from files/es/web/http/basics_of_http/mime_types/index.md rename to files/es/web/http/mime_types/index.md index 28f0a23f5a016e..73e89a5546e678 100644 --- a/files/es/web/http/basics_of_http/mime_types/index.md +++ b/files/es/web/http/mime_types/index.md @@ -1,6 +1,7 @@ --- title: Tipos MIME -slug: Web/HTTP/Basics_of_HTTP/MIME_types +slug: Web/HTTP/MIME_types +original_slug: Web/HTTP/Basics_of_HTTP/MIME_types --- {{HTTPSidebar}} diff --git a/files/fr/glossary/developer_tools/index.md b/files/fr/glossary/developer_tools/index.md index 972bf3543e3d92..7b497a3d8f2fe9 100644 --- a/files/fr/glossary/developer_tools/index.md +++ b/files/fr/glossary/developer_tools/index.md @@ -19,6 +19,6 @@ Les navigateurs courants fournissent des outils de développement intégrés, qu - [Outils de développement Firefox](/fr/docs/Outils) sur MDN - [Firebug](https://getfirebug.com/) (ancien outil de développement pour Firefox) -- [Outils de développement Chrome](https://developer.chrome.com/devtools) sur chrome.com +- [Outils de développement Chrome](https://developer.chrome.com/docs/devtools/) sur chrome.com - [Inspecteur web Safari](https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40007874-CH1-SW1) sur apple.com - [Outils de développement Edge](https://docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide) sur microsoft.com diff --git a/files/fr/learn/javascript/objects/basics/index.md b/files/fr/learn/javascript/objects/basics/index.md index d9859e66bf1ecb..afa49259501b79 100644 --- a/files/fr/learn/javascript/objects/basics/index.md +++ b/files/fr/learn/javascript/objects/basics/index.md @@ -77,7 +77,7 @@ var personne = { }; ``` -Après avoir sauvegardé et rafraîchit la page, essayez d'entrer les lignes suivantes dans le champ de saisie `input` : +Après avoir sauvegardé et rafraîchi la page, essayez d'entrer les lignes suivantes dans le champ de saisie `input` : ```js personne.nom; diff --git a/files/fr/mozilla/add-ons/webextensions/api/alarms/alarm/index.md b/files/fr/mozilla/add-ons/webextensions/api/alarms/alarm/index.md index a12ebc083d0722..9d92e9217acf0a 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/alarms/alarm/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/alarms/alarm/index.md @@ -26,6 +26,6 @@ Les valeurs de ce type sont des objets contenant les propriétés suivantes : **Remerciements :** -Cette API est basée sur l'API Chromium [`chrome.alarms`](https://developer.chrome.com/extensions/alarms). +Cette API est basée sur l'API Chromium [`chrome.alarms`](https://developer.chrome.com/docs/extensions/reference/api/alarms). Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/alarms/clear/index.md b/files/fr/mozilla/add-ons/webextensions/api/alarms/clear/index.md index 23ab0623495036..42567c98332796 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/alarms/clear/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/alarms/clear/index.md @@ -43,6 +43,6 @@ clearAlarm.then(onCleared); **Remerciements :** -Cette API est basée sur l'API Chromium [`chrome.alarms`](https://developer.chrome.com/extensions/alarms). +Cette API est basée sur l'API Chromium [`chrome.alarms`](https://developer.chrome.com/docs/extensions/reference/api/alarms). Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/alarms/clearall/index.md b/files/fr/mozilla/add-ons/webextensions/api/alarms/clearall/index.md index acce3f8b37362a..3e57503e890ce6 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/alarms/clearall/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/alarms/clearall/index.md @@ -40,6 +40,6 @@ clearAlarms.then(onClearedAll); > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.alarms`](https://developer.chrome.com/extensions/alarms). +> Cette API est basée sur l'API Chromium [`chrome.alarms`](https://developer.chrome.com/docs/extensions/reference/api/alarms). > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/alarms/create/index.md b/files/fr/mozilla/add-ons/webextensions/api/alarms/create/index.md index a08d58f3d630b3..d16b76f9da209e 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/alarms/create/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/alarms/create/index.md @@ -77,6 +77,6 @@ browser.alarms.create("my-periodic-alarm", { > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.alarms`](https://developer.chrome.com/extensions/alarms). +> Cette API est basée sur l'API Chromium [`chrome.alarms`](https://developer.chrome.com/docs/extensions/reference/api/alarms). > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/alarms/get/index.md b/files/fr/mozilla/add-ons/webextensions/api/alarms/get/index.md index 91468feeea0401..a9444871cb52e9 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/alarms/get/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/alarms/get/index.md @@ -45,6 +45,6 @@ getAlarm.then(gotAlarm); > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.alarms`](https://developer.chrome.com/extensions/alarms). +> Cette API est basée sur l'API Chromium [`chrome.alarms`](https://developer.chrome.com/docs/extensions/reference/api/alarms). > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/alarms/getall/index.md b/files/fr/mozilla/add-ons/webextensions/api/alarms/getall/index.md index ff4ba0f23bd3ee..6c42094dd090e2 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/alarms/getall/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/alarms/getall/index.md @@ -44,6 +44,6 @@ getAlarms.then(gotAll); > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.alarms`](https://developer.chrome.com/extensions/alarms). +> Cette API est basée sur l'API Chromium [`chrome.alarms`](https://developer.chrome.com/docs/extensions/reference/api/alarms). > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/alarms/index.md b/files/fr/mozilla/add-ons/webextensions/api/alarms/index.md index 58c357ff826841..516d177d4e6be2 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/alarms/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/alarms/index.md @@ -40,6 +40,6 @@ Pour pouvoir utiliser cette API, vous devez disposer de la [permission](/fr/Add- > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.alarms`](https://developer.chrome.com/extensions/alarms). +> Cette API est basée sur l'API Chromium [`chrome.alarms`](https://developer.chrome.com/docs/extensions/reference/api/alarms). > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/alarms/onalarm/index.md b/files/fr/mozilla/add-ons/webextensions/api/alarms/onalarm/index.md index 28d64e25559fd7..b3c78ec899567d 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/alarms/onalarm/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/alarms/onalarm/index.md @@ -55,6 +55,6 @@ browser.alarms.onAlarm.addListener(handleAlarm); > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.alarms`](https://developer.chrome.com/extensions/alarms). +> Cette API est basée sur l'API Chromium [`chrome.alarms`](https://developer.chrome.com/docs/extensions/reference/api/alarms). > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenode/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenode/index.md index 9f9337e96ef065..1ba2206dafce8c 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenode/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenode/index.md @@ -40,7 +40,7 @@ Un {{jsxref("object")}} avec les propriétés suivantes : > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/api/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenodeunmodifiable/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenodeunmodifiable/index.md index f533a629cb4ba9..65a72b849791f8 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenodeunmodifiable/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenodeunmodifiable/index.md @@ -19,7 +19,7 @@ Un type **`bookmarks.BookmarkTreeNodeUnmodifiable`** est utilisé pour indiquer > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/api/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/create/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/create/index.md index 04f009323390a0..8937e5ce41de50 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/create/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/create/index.md @@ -54,7 +54,7 @@ createBookmark.then(onCreated); > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/api/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/createdetails/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/createdetails/index.md index aaa311f4490b08..b05f7249aa6a47 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/createdetails/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/createdetails/index.md @@ -30,7 +30,7 @@ Un {{jsxref("object")}} contenant une combinaison des champs suivants : > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/api/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/get/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/get/index.md index bf884367d9e157..a1e7ade30fc328 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/get/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/get/index.md @@ -51,7 +51,7 @@ gettingBookmarks.then(onFulfilled, onRejected); > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/api/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getchildren/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getchildren/index.md index 96c57b3535eb74..717188c0ebb448 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getchildren/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getchildren/index.md @@ -53,7 +53,7 @@ gettingChildren.then(onFulfilled, onRejected); > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/api/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getrecent/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getrecent/index.md index 585c8cc13b63e9..33ac59d87c404e 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getrecent/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getrecent/index.md @@ -53,7 +53,7 @@ gettingRecent.then(onFulfilled, onRejected); > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/api/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getsubtree/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getsubtree/index.md index 85df1e67b816cb..a27bffa95f2c71 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getsubtree/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getsubtree/index.md @@ -73,7 +73,7 @@ gettingSubTree.then(logSubTree, onRejected); > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/api/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/gettree/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/gettree/index.md index 067d1e9aa19c1c..3e1e16e1702121 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/gettree/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/gettree/index.md @@ -69,7 +69,7 @@ gettingTree.then(logTree, onRejected); > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/api/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/index.md index c722d5f5dc70d3..ad2d65b6095ae4 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/index.md @@ -72,7 +72,7 @@ Les extensions ne peuvent pas créer, modifier ou supprimer des signets dans le > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/api/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/move/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/move/index.md index c43da6e79ee0f3..3cd8a75803db69 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/move/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/move/index.md @@ -65,7 +65,7 @@ movingBookmark.then(onMoved, onRejected); > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/api/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onchanged/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onchanged/index.md index 82f661a99c490a..87fd351007aa23 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onchanged/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onchanged/index.md @@ -70,7 +70,7 @@ browser.browserAction.onClicked.addListener(handleClick); > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/api/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onchildrenreordered/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onchildrenreordered/index.md index 6b431446aaf3ed..1b33d31e34f37f 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onchildrenreordered/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onchildrenreordered/index.md @@ -70,7 +70,7 @@ browser.browserAction.onClicked.addListener(handleClick); > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/api/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/oncreated/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/oncreated/index.md index efbdfa92610327..a15341eeb28955 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/oncreated/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/oncreated/index.md @@ -59,7 +59,7 @@ browser.bookmarks.onCreated.addListener(handleCreated); > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/api/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onimportbegan/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onimportbegan/index.md index 696cf5d77456f9..b5528df9c32242 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onimportbegan/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onimportbegan/index.md @@ -60,7 +60,7 @@ browser.browserAction.onClicked.addListener(handleClick); > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/api/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onimportended/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onimportended/index.md index 5d274bcb80d826..38ab5220a775e1 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onimportended/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onimportended/index.md @@ -60,7 +60,7 @@ browser.browserAction.onClicked.addListener(handleClick); > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/api/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onmoved/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onmoved/index.md index e993c9693a4c09..7e3d2feef564fe 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onmoved/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onmoved/index.md @@ -79,7 +79,7 @@ browser.browserAction.onClicked.addListener(handleClick); > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/api/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onremoved/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onremoved/index.md index 12e80182a1c5b3..c77492824e24dd 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onremoved/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onremoved/index.md @@ -75,7 +75,7 @@ browser.browserAction.onClicked.addListener(handleClick); > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/api/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/remove/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/remove/index.md index abcaf1303465c6..b8b1445585e24b 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/remove/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/remove/index.md @@ -54,7 +54,7 @@ removingBookmark.then(onRemoved, onRejected); > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/api/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/removetree/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/removetree/index.md index e340c962121d74..37fd565a342620 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/removetree/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/removetree/index.md @@ -61,7 +61,7 @@ searchingBookmarks.then(removeMDN, onRejected); > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/api/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/search/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/search/index.md index 67821e0f67da51..4de90c7daf1d6c 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/search/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/search/index.md @@ -91,7 +91,7 @@ browser.browserAction.onClicked.addListener(checkActiveTab); > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/api/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/update/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/update/index.md index 2741645f4681b3..83085f1ac9ab52 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/update/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/update/index.md @@ -75,7 +75,7 @@ searching.then(updateFolders, onRejected); > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/api/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/datatypeset/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/datatypeset/index.md index fe4164f7cc9421..6e9707763fa3e9 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/datatypeset/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/datatypeset/index.md @@ -49,7 +49,7 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.browsingData`](https://developer.chrome.com/extensions/browsingData). +> Cette API est basée sur l'API Chromium [`chrome.browsingData`](https://developer.chrome.com/docs/extensions/reference/api/browsingData). > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/index.md index 460dcbbcb16ec5..1fd43105e71841 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/index.md @@ -67,7 +67,7 @@ Pour utiliser cette API, vous devez disposer de l'[API permission](/fr/Add-ons/W > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.browsingData`](https://developer.chrome.com/extensions/browsingData). +> Cette API est basée sur l'API Chromium [`chrome.browsingData`](https://developer.chrome.com/docs/extensions/reference/api/browsingData). > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removaloptions/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removaloptions/index.md index b8eaedccd97a34..0dcb3568750f29 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removaloptions/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removaloptions/index.md @@ -39,7 +39,7 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant > [!NOTE] > -> Cette API est basée sur l'API Chromium [`chrome.browsingData`](https://developer.chrome.com/extensions/browsingData). +> Cette API est basée sur l'API Chromium [`chrome.browsingData`](https://developer.chrome.com/docs/extensions/reference/api/browsingData). + +``` + +## 属性の変更への応答 + +組み込み要素と同様に、カスタム要素も HTML 属性を使用して要素の動作を設定することができます。属性を効果的に使用するには、要素が属性値の変更に対応できなければなりません。これを実現するには、カスタム要素を実装するクラスに以下のメンバーを追加する必要があります。 + +- `observedAttributes` という名前の静的プロパティ。これは、その要素が変更通知を必要とするすべての属性の名前を含む配列でなければなりません。 +- `attributeChangedCallback()` ライフサイクルコールバックの実装。 + +`attributeChangedCallback()` コールバックは、要素の `observedAttributes` プロパティにリストされた名前の属性が追加、修正、削除、置換されるたびに呼び出されます。 + +コールバックには 3 つの引数が渡されます。 + +- 変更された属性の名前。 +- 属性の古い値。 +- 属性の新しい値。 + +例えば、この自律的な要素は `size` 属性を監視し、値が変更された際に新旧の値を記録します。 ```js -class PopupInfo extends HTMLElement { +// 要素のためのクラスを作成 +class MyCustomElement extends HTMLElement { + static observedAttributes = ["size"]; + constructor() { - // コンストラクターでは常に super を最初に呼び出してください super(); + } - // ここに要素の機能を記述します + attributeChangedCallback(name, oldValue, newValue) { + console.log( + `Attribute ${name} has changed from ${oldValue} to ${newValue}.`, + ); } } + +customElements.define("my-custom-element", MyCustomElement); +``` + +要素の HTML 宣言に監視される属性が含まれている場合、その属性が初期化された後に、要素の宣言が最初に解釈された時点で `attributeChangedCallback()` が呼び出されることに +注意してください。 したがって、以下の例では、たとえ属性がその後変更されることがなかったとしても、DOM が解釈された時点で `attributeChangedCallback()` が呼び出されます。 + +```html + ``` -前述のコードスニペットはクラスのコンストラクター ([`constructor()`](/ja/docs/Web/JavaScript/Reference/Classes/constructor)) の定義を含んでいます。ここでは常に [`super()`](/ja/docs/Web/JavaScript/Reference/Operators/super) を最初に呼び出し、正しいプロトタイプチェーンが確立されるようにします。 +`attributeChangedCallback()` の使用を示す完全な例については、このページの[ライフサイクルコールバック](#ライフサイクルコールバックの使用)を参照してください。 + +### カスタム状態と CSS のカスタム状態擬似クラスセレクター + +HTML 要素に組み込まれた要素は、「ホバー」、「無効」、「読み取り専用」など、様々な状態を取ります。。 +これらの状態の一部は、HTML または JavaScript を使用して属性として設定できますが、内部的なものもあり、設定できないものもあります。 +外部または内部に関わらず、これらの状態には通常、特定の状態にある要素を選択し、スタイルを適用するために使用できる対応する [CSS 擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)が存在します。 + +また、自律型カスタム要素（組み込み要素をベースにした要素を除く）では、擬似クラス関数 `:state()` を使用して状態を定義し、それに対して選択を行うこともできます。 +以下のコードでは、内部状態 "`collapsed`" を持つ自律型カスタム要素の例を使用して、その動作を示しています。 -コンストラクターの内部では、その要素のインスタンスが生成されたときに持つすべての機能を定義します。この場合、カスタム要素にシャドウルートを添付し、いくつかの DOM 操作を使用して要素の内部シャドウ DOM 構造を作成します。それをシャドウルートに添付します。そして最後に、いくつかの CSS をシャドウルートに添付してスタイル付けを行います。 +`collapsed` の状態は、要素の外からは見えない論理値プロパティ（セッターとゲッターメソッド付き）として表現されます。 +この状態を CSS で選択できるようにするために、カスタム要素は最初のコンストラクターで {{domxref("HTMLElement.attachInternals()")}} を呼び出し、{{domxref("ElementInternals")}} オブジェクトを装着します。これにより、{{domxref("ElementInternals.states")}} プロパティを通じて {{domxref("CustomStateSet")}} にアクセスできるようになります。 +（内部で）折りたたまれた状態のセッターは、状態が `true` であれば `CustomStateSet` に識別子 `hidden` を追加し、状態が `false` であれば除去します。 識別子は単なる文字列です。この場合、`hidden` と呼びましたが、`collapsed` と読んでも同じように機能します。 ```js -// シャドウルートを生成 -this.attachShadow({ mode: "open" }); // 'this.shadowRoot' を設定して返す - -//（内部の）span 要素を生成 -const wrapper = document.createElement("span"); -wrapper.setAttribute("class", "wrapper"); -const icon = wrapper.appendChild(document.createElement("span")); -icon.setAttribute("class", "icon"); -icon.setAttribute("tabindex", 0); -// アイコンを、定義された属性または既定のアイコンから挿入 -const img = icon.appendChild(document.createElement("img")); -img.src = this.hasAttribute("img") - ? this.getAttribute("img") - : "img/default.png"; -// 画像を追加する際には、常に説明文を含めるようする -img.alt = this.hasAttribute("alt") ? this.getAttribute("alt") : ""; - -const info = wrapper.appendChild(document.createElement("span")); -info.setAttribute("class", "info"); -// 属性の中身を取得し、 info の span の中に入れる -info.textContent = this.getAttribute("data-text"); - -// CSS を作成しシャドウ DOM に割り当てる -const style = document.createElement("style"); -style.textContent = `.wrapper { - /* 簡略化のために CSS は省略 */ -}`; +class MyCustomElement extends HTMLElement { + constructor() { + super(); + this._internals = this.attachInternals(); + } -// 生成された要素をシャドウ DOM に添付する -this.shadowRoot.append(style, wrapper); + get collapsed() { + return this._internals.states.has("hidden"); + } + + set collapsed(flag) { + if (flag) { + // Existence of identifier corresponds to "true" + this._internals.states.add("hidden"); + } else { + // Absence of identifier corresponds to "false" + this._internals.states.delete("hidden"); + } + } +} + +// Register the custom element +customElements.define("my-custom-element", MyCustomElement); +``` + +カスタム要素の `CustomStateSet` (`this._internals.states`) に追加された識別子を使用して、要素のカスタム状態と照合することができます。 +これは、[`:state()`](/ja/docs/Web/CSS/:state) 擬似クラスに識別子を渡すと照合されます。 +例えば、下記では、`hidden` セレクターを使用して、`hidden` 状態が `true`（したがって、要素が`collapsed` 状態）であることを選択し、境界線を削除します。 + +```css +my-custom-element { + border: dashed red; +} +my-custom-element:state(hidden) { + border: none; +} +``` + +`:state()` 擬似クラスを [`:host()`](/ja/docs/Web/CSS/:host_function) 擬似クラス関数内で使用すると、[カスタム要素のシャドウ DOM 内の](/ja/docs/Web/CSS/:state#matching_a_custom_state_in_a_custom_elements_shadow_dom)カスタム状態と照合することもできます。 +さらに、`:state()` 擬似クラスを [`::part()`](/ja/docs/Web/CSS/::part) 擬似要素の後で使用することで、特定の状態にあるカスタム要素の[シャドウパーツ](/ja/docs/Web/CSS/CSS_shadow_parts)と照合することもできます。 + +{{domxref("CustomStateSet")}} には、これがどのように動作するのかを示すいくつかのライブサンプルがあります。 + +## 例 + +このガイドの残りの部分では、いくつかのカスタム要素の例を見ていきます。 これらの例のすべて、およびその他のソースは、[web-components-examples](https://github.com/mdn/web-components-examples) リポジトリーで参照できます。また、すべてをライブで確認するには、 にアクセスしてください。 + +### 自律カスタム要素 + +まず、自律カスタム要素の例を見てみましょう。`` カスタム要素は、画像アイコンとテキスト文字列を属性として取り、アイコンにフォーカスすると、テキストをポップアップ情報ボックスに表示し、さらにコンテキスト内の情報を提供します。 + +- [この例のライブ実行を確認](https://mdn.github.io/web-components-examples/popup-info-box-web-component/) +- [ソースコードを参照](https://github.com/mdn/web-components-examples/tree/main/popup-info-box-web-component) + +最初に {{domxref("HTMLElement")}} クラスを継承して `PopupInfo` というクラスを定義する JavaScript ファイルです。 + +```js +// 要素のためのクラスを作成 +class PopupInfo extends HTMLElement { + constructor() { + // コンストラクターでは super を常に最初に呼び出す + super(); + } + + connectedCallback() { + // シャドウルートを生成 + const shadow = this.attachShadow({ mode: "open" }); + + // span 要素を生成 + const wrapper = document.createElement("span"); + wrapper.setAttribute("class", "wrapper"); + + const icon = document.createElement("span"); + icon.setAttribute("class", "icon"); + icon.setAttribute("tabindex", 0); + + const info = document.createElement("span"); + info.setAttribute("class", "info"); + + // 属性の中身を取得し、情報 span の中に入れる + const text = this.getAttribute("data-text"); + info.textContent = text; + + // アイコンを挿入 + let imgUrl; + if (this.hasAttribute("img")) { + imgUrl = this.getAttribute("img"); + } else { + imgUrl = "img/default.png"; + } + + const img = document.createElement("img"); + img.src = imgUrl; + icon.appendChild(img); + + // いくらかの CSS を生成してシャドウ DOM に適用 + const style = document.createElement("style"); + console.log(style.isConnected); + + style.textContent = ` + .wrapper { + position: relative; + } + + .info { + font-size: 0.8rem; + width: 200px; + display: inline-block; + border: 1px solid black; + padding: 10px; + background: white; + border-radius: 10px; + opacity: 0; + transition: 0.6s all; + position: absolute; + bottom: 20px; + left: 10px; + z-index: 3; + } + + img { + width: 1.2rem; + } + + .icon:hover + .info, .icon:focus + .info { + opacity: 1; + } + `; + + // 生成要素をシャドウ DOM に結びつける + shadow.appendChild(style); + console.log(style.isConnected); + shadow.appendChild(wrapper); + wrapper.appendChild(icon); + wrapper.appendChild(info); + } +} ``` +前述のコードスニペットはクラスのコンストラクター（[`constructor()`](/ja/docs/Web/JavaScript/Reference/Classes/constructor)）の定義を含んでいます。ここでは常に [`super()`](/ja/docs/Web/JavaScript/Reference/Operators/super) を最初に呼び出し、正しいプロトタイプチェーンが確立されるようにします。 + +`connectedCallback()` メソッド内で、要素が DOM に接続された際にその要素が持つすべての機能を定義します。この例では、シャドウルートをカスタム要素に割り当て、DOM 操作を使用して要素の内部シャドウルート構造を作成します（そしてシャドウルートに割り当てます）。最後に、シャドウルートにいくつかの CSS を割り当ててスタイル設定します。要素の属性は DOM に接続されるまで利用できないため、コンストラクターでは処理はうまくいきません。 + 最後に、カスタム要素を `CustomElementRegistry` に登録します。前述の `define()` を使用して、引数で要素名とその機能を定義するクラス名を指定します。 ```js @@ -126,55 +354,157 @@ customElements.define("popup-info", PopupInfo); back of your card."> ``` -> [!NOTE] -> こちらで[完全な JavaScript ソース](https://github.com/mdn/web-components-examples/blob/main/popup-info-box-web-component/main.js) を見ることができます。 - ### 内部スタイルと外部スタイル -上記の例では {{htmlelement("style")}} 要素を用いてシャドウ DOM にスタイルを適用しましたが、代わりに完全に {{htmlelement("link")}} 要素から外部スタイルシートを参照することが可能です。 +上記の例では、{{htmlelement("style")}} 要素を用いてシャドウ DOM にスタイルを適用しましたが、代わりに {{htmlelement("link")}} 要素から外部スタイルシートを参照することが可能です。この例では、外部スタイルシートを使用するように `` カスタム要素を変更します。 -例えば、 [popup-info-box-external-stylesheet](https://mdn.github.io/web-components-examples/popup-info-box-external-stylesheet/) のコードを少し見てみましょう（[ソースコード](https://github.com/mdn/web-components-examples/blob/main/popup-info-box-external-stylesheet/main.js)はこちら）。 +- [この例のライブ実行を確認](https://mdn.github.io/web-components-examples/popup-info-box-external-stylesheet/) +- [ソースコードを参照](https://github.com/mdn/web-components-examples/tree/main/popup-info-box-external-stylesheet) + +こちらがクラス定義です。 ```js -// 外部スタイルシートをシャドウ DOM に適用 -const linkElem = document.createElement("link"); -linkElem.setAttribute("rel", "stylesheet"); -linkElem.setAttribute("href", "style.css"); +// 要素のためのクラスを作成 +class PopupInfo extends HTMLElement { + constructor() { + // コンストラクターでは super を常に最初に呼び出す + super(); + } + + connectedCallback() { + // シャドウルートを生成 + const shadow = this.attachShadow({ mode: "open" }); + + // span 要素を生成 + const wrapper = document.createElement("span"); + wrapper.setAttribute("class", "wrapper"); + + const icon = document.createElement("span"); + icon.setAttribute("class", "icon"); + icon.setAttribute("tabindex", 0); + + const info = document.createElement("span"); + info.setAttribute("class", "info"); + + // 属性の中身を取得し、情報 span の中に入れる + const text = this.getAttribute("data-text"); + info.textContent = text; + + // アイコンを挿入 + let imgUrl; + if (this.hasAttribute("img")) { + imgUrl = this.getAttribute("img"); + } else { + imgUrl = "img/default.png"; + } -// 生成された要素をシャドウ DOM に添付 -shadow.appendChild(linkElem); + const img = document.createElement("img"); + img.src = imgUrl; + icon.appendChild(img); + + // 外部スタイルシートをシャドウ DOM に適用 + const linkElem = document.createElement("link"); + linkElem.setAttribute("rel", "stylesheet"); + linkElem.setAttribute("href", "style.css"); + + // 生成した要素をシャドウ DOM に結びつける + shadow.appendChild(linkElem); + shadow.appendChild(wrapper); + wrapper.appendChild(icon); + wrapper.appendChild(info); + } +} ``` +これは、元の `` の例とほぼ同じですが、外部スタイルシートにリンクするために、シャドウ DOM に追加する {{HTMLElement("link")}} 要素を使用している点が異なります。 + なお、 {{htmlelement("link")}} 要素はシャドウルートの描画をブロックしないので、スタイルシートのロード中にスタイル付けされていないコンテンツ (FOUC) が一瞬表示されるかもしれないことに注意してください。 最近のブラウザーの多くは、共通のノードからクローンされた、あるいは同一のテキストを持つ {{htmlelement("style")}} タグに対して、単一のバッキングスタイルシートを共有できるようにする最適化を実装しています。この最適化によって、外部スタイルでも内部スタイルでも性能は同程度になるはずです。 -### カスタマイズされた組み込み要素 +### カスタム組み込み要素 -ここで、もう 1 つの組み込み要素の例を見てみましょう。 [expanding-list](https://github.com/mdn/web-components-examples/tree/main/expanding-list-web-component) です。（[ライブでも確認してください](https://mdn.github.io/web-components-examples/expanding-list-web-component/)） これにより番号なしリストが展開・収納するメニューになります。 +ここで、もう 1 つの組み込み要素の例を見てみましょう。この例は、組み込みの {{HTMLElement("ul")}} 要素を拡張して、リストアイテムが展開・収納するするようにします。 + +- [この例のライブ実行を確認](https://mdn.github.io/web-components-examples/expanding-list-web-component/) +- [ソースコードを参照](https://github.com/mdn/web-components-examples/tree/main/expanding-list-web-component) + +> [!NOTE] +> カスタム組み込み要素の実装に関する注意事項については、[`is`](/ja/docs/Web/HTML/Global_attributes/is) 属性のリファレンスを参照してください。 まず始めに、これまでと同様の方法でクラス要素を定義します。 ```js +// 要素のためのクラスを作成 class ExpandingList extends HTMLUListElement { constructor() { - // コンストラクターでは常に super を最初に呼び出してください - super(); + // コンストラクターでは super を常に最初に呼び出す + // super() の返値はこの要素への参照 + self = super(); + } - // ここに要素の機能を記述します + connectedCallback() { + // このカスタム ul 要素の子である ul および li 要素を取得する + // li 要素は、その中に ul がある場合、コンテナーとして機能する + const uls = Array.from(self.querySelectorAll("ul")); + const lis = Array.from(self.querySelectorAll("li")); + // すべての子の ul を隠す + // これらのリストは、ユーザーが上位レベルのコンテナーをクリックしたときに表示される + uls.forEach((ul) => { + ul.style.display = "none"; + }); + + // ul内のli要素をそれぞれ見ていく + lis.forEach((li) => { + // この li に ul が子要素としてある場合、クリックハンドラーを追加する + if (li.querySelectorAll("ul").length > 0) { + // スタイル設定で使用できる属性を追加し、 + // 開く・閉じるアイコンを表示させる + li.setAttribute("class", "closed"); + + // li 要素のテキストを新しい span 要素で囲むことで、 + // span にスタイルやイベントハンドラーを割り当てることができる + const childText = li.childNodes[0]; + const newSpan = document.createElement("span"); + + // li から span にテキストをコピーし、カーソルスタイルを設定 + newSpan.textContent = childText.textContent; + newSpan.style.cursor = "pointer"; + + // この span にクリックハンドラーを追加 + newSpan.addEventListener("click", (e) => { + // span 要素の次兄弟要素は ul であるはず + const nextul = e.target.nextElementSibling; + + // 表示状態を切り替え、ul の class 属性を更新 + if (nextul.style.display == "block") { + nextul.style.display = "none"; + nextul.parentNode.setAttribute("class", "closed"); + } else { + nextul.style.display = "block"; + nextul.parentNode.setAttribute("class", "open"); + } + }); + // span を追加し、li から裸のテキストノードを除去 + childText.parentNode.insertBefore(newSpan, childText); + childText.parentNode.removeChild(childText); + } + }); } } ``` -ここでは要素の詳細な機能については説明しませんが、ソースコードからどのように動作するのか確認することができます。これまでと唯一違う点は、 {{domxref("HTMLUListElement")}} インターフェースを継承しており、 {{domxref("HTMLElement")}} ではないことです。そのため、独立した要素ではなく、 {{htmlelement("ul")}} 要素の特徴を備えた上に、定義した機能を持ちます。これこそが、自律カスタム要素ではなくカスタマイズされた組み込み要素である理由です。 +なお、今回は {{domxref("HTMLElement")}} ではなく、{{domxref("HTMLUListElement")}} を拡張しています。 つまり、リストの既定の動作が得られ、独自のカスタマイズのみを実装すればよいということです。 + +前回と同様に、コードのほとんどは `connectedCallback()` ライフサイクルコールバック内にあります。 -次に、以前と同様に `define()` を用いて要素を登録しますが、今回はこのカスタム要素がどの要素から継承したのかという情報をオプションとして渡しています。 +次に、前回と同様に `define()` メソッドを使用して要素を登録しますが、今回は、カスタム要素が継承する要素の詳細を記載した options オブジェクトも含めます。 ```js customElements.define("expanding-list", ExpandingList, { extends: "ul" }); ``` -ウェブ文書内で組み込み要素を使用する場合とはやや異なります。 +ウェブ文書内で組み込み要素を使用すると、また少し違った見え方になります。 ```html
    @@ -184,48 +514,45 @@ customElements.define("expanding-list", ExpandingList, { extends: "ul" }); 通常のように `
      ` を使用していますが、カスタム要素の名前が `is` 属性で指定されています。 -> [!NOTE] -> 繰り返しますが、完全な [JavaScript のソースコード](https://github.com/mdn/web-components-examples/blob/main/expanding-list-web-component/main.js)はこちらにあります。 - -## ライフサイクルコールバックの使用 - -カスタム要素のクラス定義内に、いくつかの異なるコールバックを定義できます。これらは要素のライフサイクルのさまざまな時点で起動します。 +この場合、DOM が完全に解釈された後にカスタム要素を定義するスクリプトが実行されるように保証する必要があります。`connectedCallback()` は展開されたリストが DOM に追加されると同時に呼び出されますが、その時点では子要素はまだ追加されていないため、`querySelectorAll()` の呼び出しでは何も見つかりません。これを保証する一つの方法は、スクリプトを記載する行に [defer](/ja/docs/Web/HTML/Element/script#defer) 属性を追加することです。 -- `connectedCallback`: 文書に接続された要素にカスタム要素が追加されるたびに呼び出されます。これはそのノードが移動するために発生するので、要素の内容が完全に解釈される前に発生することがあります。 - - > **メモ:** `connectedCallback` は要素の接続が終了したときにも呼び出されることがあります。 {{domxref("Node.isConnected")}} を使用して確認してください。 +```html + +``` -- `disconnectedCallback`: カスタム要素が文書の DOM から切断されるたびに呼び出されます。 -- `adoptedCallback`: カスタム要素が新しい文書に移動するたびに呼び出されます。 -- `attributeChangedCallback`: カスタム要素の属性の 1 つが追加、削除、変更されるたびに呼び出されます。どの属性の変更が通知されたかは、静的な get `observedAttributes()` メソッドで指定されます。 +## ライフサイクルコールバック -これらの使用例を見てみましょう。以下のコードは [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/)）。これは、ページ上に一定の大きさの色のついた四角形を生成する些細な例です。カスタム要素は次のようなものです。 +これまでは、`connectedCallback()` というライフサイクルコールバックが 1 つだけ動作しているのを見てきました。最後の例である `` では、他にもいくつか見ていきます。この例では、自律型のカスタム要素 `` を紹介します。これは、名前付きの 2 つの属性 `"size"` および `"color"` によってサイズと色が決定される四角形を描画します。 -```html - -``` +- [この例のライブ実行を確認](https://mdn.github.io/web-components-examples/life-cycle-callbacks/) +- [ソースコードを参照](https://github.com/mdn/web-components-examples/tree/main/life-cycle-callbacks) -クラスのコンストラクターは非常に単純です。ここでは、要素にシャドウ DOM を割り当て、空の {{htmlelement("div")}} および {{htmlelement("style")}} 要素をシャドウルートに追加します。 +クラスのコンストラクターでは、要素にシャドウ DOM を割り当て、空の {{htmlelement("div")}} および {{htmlelement("style")}} 要素をシャドウルートに追加します。 ```js +constructor() { + // コンストラクターでは super を常に最初に呼び出す + super(); + const shadow = this.attachShadow({ mode: "open" }); const div = document.createElement("div"); const style = document.createElement("style"); shadow.appendChild(style); shadow.appendChild(div); +} ``` -この例の主要な機能は `updateStyle()` です。これは要素を取得し、シャドウルートを取得し、その ` + I'm in the shadow DOM + + +
      +I'm not in the shadow DOM ``` -### 内部スタイルと外部スタイル +JavaScript で、シャドウ DOM を作成し、そこに `