diff --git a/.github/workflows/pr-check-lint_content.yml b/.github/workflows/pr-check-lint_content.yml index a505197e579fac8..12a3a039a97efdd 100644 --- a/.github/workflows/pr-check-lint_content.yml +++ b/.github/workflows/pr-check-lint_content.yml @@ -39,14 +39,14 @@ jobs: echo "DIFF_DOCUMENTS=${DIFF_DOCUMENTS}" >> $GITHUB_ENV - name: Checkout HEAD - if: ${{ env.DIFF_DOCUMENTS }} + if: env.DIFF_DOCUMENTS uses: actions/checkout@v4 with: ref: ${{ github.event.pull_request.head.sha }} path: pr_head - name: Get changed content from HEAD - if: ${{ env.DIFF_DOCUMENTS }} + if: env.DIFF_DOCUMENTS run: | git config --global user.email "108879845+mdn-bot@users.noreply.github.com" git config --global user.name "mdn-bot" @@ -62,21 +62,21 @@ jobs: git commit -m "Code from PR head" - name: Setup Node.js environment - if: ${{ env.DIFF_DOCUMENTS }} + if: env.DIFF_DOCUMENTS uses: actions/setup-node@v4 with: node-version-file: ".nvmrc" cache: yarn - name: Install all yarn packages - if: ${{ env.DIFF_DOCUMENTS }} + if: env.DIFF_DOCUMENTS run: yarn --frozen-lockfile env: # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - name: Lint and format markdown files - if: ${{ env.DIFF_DOCUMENTS }} + if: env.DIFF_DOCUMENTS run: | # Generate random delimiter # https://docs.github.com/en/actions/using-workflows/workflow-commands-for-github-actions#multiline-strings @@ -84,6 +84,14 @@ jobs: files_to_lint="$DIFF_DOCUMENTS" + echo "crlf line ending check" + CRLF_FAILED=true + CRLF_LOG=$(git ls-files --eol ${files_to_lint} | grep -E 'w/(mixed|crlf)') || CRLF_FAILED=false + echo "CRLF_LOG<<${EOF}" >> $GITHUB_ENV + echo "${CRLF_LOG}" >> $GITHUB_ENV + echo "${EOF}" >> $GITHUB_ENV + echo "CRLF_FAILED=${CRLF_FAILED}" >> $GITHUB_ENV + echo "Running markdownlint --fix" MD_LINT_FAILED=false MD_LINT_LOG=$(yarn markdownlint-cli2 --fix ${files_to_lint} 2>&1) || MD_LINT_FAILED=true @@ -101,6 +109,12 @@ jobs: echo "FM_LINT_FAILED=${FM_LINT_FAILED}" >> $GITHUB_ENV echo "Running Prettier" + PRETTIER_FAILED=false + PRETTIER_LOG=$(yarn prettier --check ${files_to_lint} 2>&1) || PRETTIER_FAILED=true + echo "PRETTIER_LOG<<${EOF}" >> $GITHUB_ENV + echo "${PRETTIER_LOG}" >> $GITHUB_ENV + echo "${EOF}" >> $GITHUB_ENV + echo "PRETTIER_FAILED=${PRETTIER_FAILED}" >> $GITHUB_ENV yarn prettier -w ${files_to_lint} if [[ -n $(git diff) ]]; then @@ -108,8 +122,10 @@ jobs: fi # info for troubleshooting + echo CRLF_FAILED=${CRLF_FAILED} echo MD_LINT_FAILED=${MD_LINT_FAILED} echo FM_LINT_FAILED=${FM_LINT_FAILED} + echo PRETTIER_FAILED=${PRETTIER_FAILED} git diff - name: Setup reviewdog @@ -147,11 +163,40 @@ jobs: -reporter="github-pr-review" - name: Fail if any issues pending - if: env.FILES_MODIFIED == 'true' || env.MD_LINT_FAILED == 'true' || env.FM_LINT_FAILED == 'true' + if: env.FILES_MODIFIED == 'true' || env.CRLF_FAILED == 'true' || env.MD_LINT_FAILED == 'true' || env.FM_LINT_FAILED == 'true' + env: + CRLF_FAILED: ${{ env.CRLF_FAILED }} + MD_LINT_FAILED: ${{ env.MD_LINT_FAILED }} + FM_LINT_FAILED: ${{ env.FM_LINT_FAILED }} + PRETTIER_FAILED: ${{ env.PRETTIER_FAILED }} + CRLF_LOG: ${{ env.CRLF_LOG }} + MD_LINT_LOG: ${{ env.MD_LINT_LOG }} + FM_LINT_LOG: ${{ env.FM_LINT_LOG }} + PRETTIER_LOG: ${{ env.PRETTIER_LOG }} run: | - echo -e "\nLogs from markdownlint:" - echo "${MD_LINT_LOG}" - echo -e "\nLogs from front-matter linter:" - echo "${FM_LINT_LOG}" - echo -e "\nPlease fix all the linting issues mentioned in above logs and in the review comments." + echo -e "\nPlease fix all the linting issues mentioned in the following logs and in the PR review comments." + + if [[ ${CRLF_FAILED} == 'true' ]]; then + echo -e "\n\n🪵 In the following files make sure all the lines end with only Line Feed (LF) character and not with Carriage Return Line Feed (CRLF) characters:" + echo "${CRLF_LOG}" + echo "For more information refer https://gist.github.com/LunarLambda/3df0840b336a5e314e4ffdac03cbf619 ." + echo "You may use https://app.execeratics.com/LFandCRLFonline/?l=en online tool to convert line endings from CRLF to LF." + fi + + if [[ ${MD_LINT_FAILED} == 'true' ]]; then + echo -e "\n\n🪵 Logs from markdownlint:" + echo "${MD_LINT_LOG}" + fi + + if [[ ${FM_LINT_FAILED} == 'true' ]]; then + echo -e "\n\n🪵 Logs from front-matter linter:" + echo "${FM_LINT_LOG}" + fi + + if [[ ${PRETTIER_FAILED} == 'true' ]]; then + echo -e "\n\n🪵 Logs from Prettier formatter:" + echo "${PRETTIER_LOG}" + echo -e "\nYou can use Prettier playground to format the files online (configuration pre-filled): https://prettier.io/playground/#N4Igxg9gdgLgprEAuEBiABABwIYGd7owAWc6CMAlgE6kBmFANqSTSADQgSaXS7KjYqVCAHcACoIR8U2BiOwBPPhwBGVbGADWcGAGVsAWzgAZClDjIYVAK5xV6rTt04wZgOaWbdkLjgGKnrYccAAemHBUFEawsgAqEVCCFHDStLK+HLjuTACK1hDwyGkMGSAAVrghutlweQUWSMWlAI758GLCmNIgeAC05nAAJkPsIFbYjO4AwhAGBtjIPQwMo1lQbkwAgjBWFCrW7RGm5kXp3kQwBgwA6kQU8LgucLpS9xQAbvcKi2C4yiDvWwASSgw1gujAkW4m1BuhgCiYpxK3kwwl813UmEWqJSEXeFg4Zl8VBgHWwbnmSNKOCoxMW8yomkGoigo1RZhg1wog2IyAAHAAGDg0VrUOBkikLRpnDgwbAqLk8ojIABMHGsvli8tSMpAfhUQ2Gg2M2HW1nJcAAYhAqPMdu5FtgDhAQABfV1AA \n" + fi + exit 1 diff --git a/.github/workflows/pr-review-companion.yml b/.github/workflows/pr-review-companion.yml index ac3ea325f57e526..13b3122ee88106d 100644 --- a/.github/workflows/pr-review-companion.yml +++ b/.github/workflows/pr-review-companion.yml @@ -7,14 +7,14 @@ name: PR review companion on: workflow_run: - workflows: ["PR Test"] + workflows: ["PR Test", "PR Test Legacy"] types: - completed jobs: review: runs-on: ubuntu-latest - if: ${{ github.event.workflow_run.conclusion == 'success' }} + if: github.event.workflow_run.conclusion == 'success' steps: - name: "Download artifact" uses: actions/download-artifact@v4 @@ -26,18 +26,18 @@ jobs: run-id: ${{ github.event.workflow_run.id }} - name: Check for artifacts - if: ${{ hashFiles('build/') != '' }} + if: hashFiles('build/') != '' run: | echo "HAS_ARTIFACT=true" >> "$GITHUB_ENV" - uses: actions/checkout@v4 - if: ${{ env.HAS_ARTIFACT }} + if: env.HAS_ARTIFACT with: repository: mdn/yari path: yari - name: Install Python - if: ${{ env.HAS_ARTIFACT }} + if: env.HAS_ARTIFACT id: setup-python uses: actions/setup-python@v5 with: @@ -45,7 +45,7 @@ jobs: # See https://www.peterbe.com/plog/install-python-poetry-github-actions-faster - name: Load cached ~/.local - if: ${{ env.HAS_ARTIFACT }} + if: env.HAS_ARTIFACT uses: actions/cache@v4 with: path: ~/.local @@ -54,14 +54,14 @@ jobs: key: dotlocal-${{ runner.os }}-${{ steps.setup-python.outputs.python-version }}-0 - name: Install Python poetry - if: ${{ env.HAS_ARTIFACT }} + if: env.HAS_ARTIFACT uses: snok/install-poetry@v1.4 with: virtualenvs-create: true virtualenvs-in-project: true - name: Load cached venv - if: ${{ env.HAS_ARTIFACT }} + if: env.HAS_ARTIFACT id: cached-poetry-dependencies uses: actions/cache@v4 with: @@ -71,19 +71,19 @@ jobs: key: venv-${{ runner.os }}-${{ hashFiles('**/poetry.lock') }}-${{ steps.setup-python.outputs.python-version }}-0 - name: Install poetry dependencies - if: ${{ env.HAS_ARTIFACT && steps.cached-poetry-dependencies.outputs.cache-hit != 'true' }} + if: env.HAS_ARTIFACT && steps.cached-poetry-dependencies.outputs.cache-hit != 'true' run: | cd yari/deployer poetry install --no-interaction --no-root - name: Install Deployer - if: ${{ env.HAS_ARTIFACT }} + if: env.HAS_ARTIFACT run: | cd yari/deployer poetry install --no-interaction - name: Deploy and analyze built content - if: ${{ env.HAS_ARTIFACT }} + if: env.HAS_ARTIFACT env: BUILD_OUT_ROOT: ${{ github.workspace }}/build diff --git a/.github/workflows/pr-test-legacy.yml b/.github/workflows/pr-test-legacy.yml new file mode 100644 index 000000000000000..e390e19231b95bc --- /dev/null +++ b/.github/workflows/pr-test-legacy.yml @@ -0,0 +1,134 @@ +# This file tests more or less everything related to a pull request. All +# in one big job. At the end, if all the testing passes, it proceeds +# to upload all the files that were built to our Dev environment. +# This way, if the tests passed, you'll be able to review the built +# pages on a public URL. + +name: PR Test Legacy + +on: + pull_request: + branches: + - main + +jobs: + tests: + if: github.repository == 'mdn/content' + runs-on: ubuntu-latest + # Set the permissions to `read-all`, preventing the workflow from + # any accidental write access to the repository. + permissions: read-all + env: + BASE_SHA: ${{ github.event.pull_request.base.sha }} + HEAD_SHA: ${{ github.event.pull_request.head.sha }} + # This is the directory where the built files will be placed. + # It's also hardcoded in the `yarn build` command in package.json. + # If you change it here, you must also make the same change in + # package.json. + BUILD_OUT_ROOT: build + + steps: + - uses: actions/checkout@v4 + + - name: Get changed files + 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/${BASE_SHA}...${HEAD_SHA} \ + --jq '.files | .[] | select(.status|IN("added", "modified", "renamed", "copied", "changed")) | .filename') + + # filter out files that are not markdown files + GIT_DIFF_CONTENT=$(echo "${DIFF_DOCUMENTS}" | egrep -i "^files/.*\.(md)$" | xargs) + echo "GIT_DIFF_CONTENT=${GIT_DIFF_CONTENT}" >> $GITHUB_ENV + + # filter out files that are not attachments + GIT_DIFF_FILES=$(echo "${DIFF_DOCUMENTS}" | egrep -i "^files/.*\.(png|jpeg|jpg|gif|svg|webp)$" | xargs) + echo "GIT_DIFF_FILES=${GIT_DIFF_FILES}" >> $GITHUB_ENV + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + - name: Setup Node.js environment + if: env.GIT_DIFF_CONTENT || env.GIT_DIFF_FILES + uses: actions/setup-node@v4 + with: + node-version-file: ".nvmrc" + cache: yarn + + - name: Install all yarn packages + if: env.GIT_DIFF_CONTENT || env.GIT_DIFF_FILES + run: yarn --frozen-lockfile + env: + # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + - name: Build changed content + id: build-content + if: env.GIT_DIFF_CONTENT + env: + CONTENT_ROOT: ${{ github.workspace }}/files + + # This is so that if there's a single 'unsafe_html' flaw, it + # completely fails the build. + # But all other flaws should be 'warn', so that we can include + # information about the flaws when we analyze the built PR. + BUILD_FLAW_LEVELS: "unsafe_html: error, *:warn" + + # Because we build these pages in a way that you get a toolbar, + # so the flaws can be displayed, but we don't want any of the + # other toolbar features like "Fix fixable flaws" or "Quick-edit" + # we set this to disable that stuff. + REACT_APP_CRUD_MODE_READONLY: true + + BUILD_LIVE_SAMPLES_BASE_URL: https://live.mdnyalp.dev + BUILD_LEGACY_LIVE_SAMPLES_BASE_URL: https://live-samples.mdn.allizom.net + + # In these builds, we never care for or need the ability to sign in. + # This environment variable will disable that functionality entirely. + REACT_APP_DISABLE_AUTH: true + + # TODO: This should be implicit when `CI=true` + BUILD_NO_PROGRESSBAR: true + + # Playground + REACT_APP_PLAYGROUND_BASE_HOST: mdnyalp.dev + + run: | + # The reason this script isn't in `package.json` is because + # you don't need that script as a writer. It's only used in CI + # and it can't use the default CONTENT_ROOT that gets set in + # package.json. + yarn build $GIT_DIFF_CONTENT + + echo "Disk usage size of the build" + du -sh $BUILD_OUT_ROOT + + # Save the PR number into the build + 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/${BASE_SHA}...${HEAD_SHA}.diff -O ${BUILD_OUT_ROOT}/DIFF + + - name: Merge static assets with built documents + if: env.GIT_DIFF_CONTENT + run: | + # Exclude the .map files, as they're used for debugging JS and CSS. + rsync -a --exclude "*.map" node_modules/@mdn/yari/client/build/ $BUILD_OUT_ROOT + # Show the final disk usage size of the build. + du -sh $BUILD_OUT_ROOT + + - uses: actions/upload-artifact@v4 + if: env.GIT_DIFF_CONTENT + with: + name: build + path: ${{ env.BUILD_OUT_ROOT }} + + - name: Check changed files + if: env.GIT_DIFF_FILES + run: | + echo $GIT_DIFF_FILES + + export CONTENT_ROOT=$(pwd)/files + yarn filecheck $GIT_DIFF_FILES diff --git a/.github/workflows/pr-test.yml b/.github/workflows/pr-test.yml index 3d39964e3c0dfa0..68f3dc5cd3dba5a 100644 --- a/.github/workflows/pr-test.yml +++ b/.github/workflows/pr-test.yml @@ -48,14 +48,14 @@ jobs: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - name: Setup Node.js environment - if: ${{ env.GIT_DIFF_CONTENT }} || ${{ env.GIT_DIFF_FILES }} + if: env.GIT_DIFF_CONTENT || env.GIT_DIFF_FILES uses: actions/setup-node@v4 with: node-version-file: ".nvmrc" cache: yarn - name: Install all yarn packages - if: ${{ env.GIT_DIFF_CONTENT }} || ${{ env.GIT_DIFF_FILES }} + if: env.GIT_DIFF_CONTENT || env.GIT_DIFF_FILES run: yarn --frozen-lockfile env: # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note @@ -63,7 +63,7 @@ jobs: - name: Build changed content id: build-content - if: ${{ env.GIT_DIFF_CONTENT }} + if: env.GIT_DIFF_CONTENT env: CONTENT_ROOT: ${{ github.workspace }}/files @@ -92,12 +92,19 @@ jobs: # Playground REACT_APP_PLAYGROUND_BASE_HOST: mdnyalp.dev + # rari + LIVE_SAMPLES_BASE_URL: https://live.mdnyalp.dev + INTERACTIVE_EXAMPLES_BASE_URL: https://interactive-examples.mdn.allizom.net + run: | # The reason this script isn't in `package.json` is because # you don't need that script as a writer. It's only used in CI # and it can't use the default CONTENT_ROOT that gets set in # package.json. - yarn build $GIT_DIFF_CONTENT + echo Y|yarn rari update + ARGS=$(echo $GIT_DIFF_CONTENT | sed -E -e "s#(^| )files#\1-f $PWD/files#g") + yarn rari build --no-basic --json-issues --data-issues $ARGS + yarn yari-render-html echo "Disk usage size of the build" du -sh $BUILD_OUT_ROOT @@ -112,7 +119,7 @@ jobs: wget https://github.com/${{ github.repository }}/compare/${BASE_SHA}...${HEAD_SHA}.diff -O ${BUILD_OUT_ROOT}/DIFF - name: Merge static assets with built documents - if: ${{ env.GIT_DIFF_CONTENT }} + if: env.GIT_DIFF_CONTENT run: | # Exclude the .map files, as they're used for debugging JS and CSS. rsync -a --exclude "*.map" node_modules/@mdn/yari/client/build/ $BUILD_OUT_ROOT @@ -120,13 +127,13 @@ jobs: du -sh $BUILD_OUT_ROOT - uses: actions/upload-artifact@v4 - if: ${{ env.GIT_DIFF_CONTENT }} + if: env.GIT_DIFF_CONTENT with: name: build path: ${{ env.BUILD_OUT_ROOT }} - name: Check changed files - if: ${{ env.GIT_DIFF_FILES }} + if: env.GIT_DIFF_FILES run: | echo $GIT_DIFF_FILES diff --git a/.vscode/dictionaries/ignore-list.txt b/.vscode/dictionaries/ignore-list.txt index 0e2e7108138242a..47a0e4a9f06959e 100644 --- a/.vscode/dictionaries/ignore-list.txt +++ b/.vscode/dictionaries/ignore-list.txt @@ -112,9 +112,11 @@ dubby Duden dXNlcm5hbWU6cGFzc3dvcmQ EACC +efregre eirmod elitr ERHGDFy +ertgrth esset essum Ethere @@ -173,6 +175,7 @@ isnt isoff javascripts jdoe +Jgfbgfdgt jngl jnglstore js13kgames @@ -253,6 +256,7 @@ rebum regelialia rheeeeet ricebean +rtgtfghhyj s3pPLMBiTxaQ9kYGzzhZRbK sadipscing sagnarelli @@ -306,6 +310,7 @@ webglsamples webvr weta Whereami +Whereshire wisen wisi Wookie diff --git a/.vscode/dictionaries/proper-names.txt b/.vscode/dictionaries/proper-names.txt index 6afc1f106a836b9..d0b3dd14a522ba2 100644 --- a/.vscode/dictionaries/proper-names.txt +++ b/.vscode/dictionaries/proper-names.txt @@ -76,6 +76,7 @@ Béziers caitmuenster Camino Camtasia +Canva Carakan Cardano carinaanand @@ -567,6 +568,7 @@ Theora Thierry Tidwell Tink +tinypng Titilayo Tokopedia Tomayac diff --git a/.vscode/dictionaries/terms-abbreviations.txt b/.vscode/dictionaries/terms-abbreviations.txt index a5ae1a6c676f117..4863414becb572c 100644 --- a/.vscode/dictionaries/terms-abbreviations.txt +++ b/.vscode/dictionaries/terms-abbreviations.txt @@ -21,6 +21,7 @@ ANMF anonymization antialiasing antitracking +apideck APNG appcontent arcosh @@ -94,7 +95,6 @@ catchable CAVLC CCPA CCPL -CDLR CELP CGATS cheatsheet @@ -529,6 +529,7 @@ quickmenu qvalues QWERTZ randomizer +rari rasterizes RDBMS RDBMSes @@ -562,6 +563,7 @@ retarget retargeted retargeting retargetings +reviewdog RFCOMM RGTC roadmaps @@ -712,6 +714,7 @@ sundried sunsetting supercookie superdomain +superpowered superscaling supersets SVCB @@ -879,6 +882,7 @@ xrayed Xrays XRCPU XSSI +yari yearless Zalgo zoomable diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 7d2992ea16201ee..61c25aad4b1ccdb 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -3597,6 +3597,7 @@ /en-US/docs/Glossary/SSL_Glossary /en-US/docs/Glossary/SSL /en-US/docs/Glossary/Scrollport /en-US/docs/Glossary/Scroll_container /en-US/docs/Glossary/Second-level_Domain /en-US/docs/Glossary/SLD +/en-US/docs/Glossary/Self-Executing_Anonymous_Function /en-US/docs/Glossary/IIFE /en-US/docs/Glossary/Serialize /en-US/docs/Glossary/Serialization /en-US/docs/Glossary/Simple_header /en-US/docs/Glossary/CORS-safelisted_request_header /en-US/docs/Glossary/Simple_response_header /en-US/docs/Glossary/CORS-safelisted_response_header @@ -11765,7 +11766,6 @@ /en-US/docs/Web/CSS/::cue-region /en-US/docs/Web/API/WebVTT_API /en-US/docs/Web/CSS/:@-moz-document /en-US/docs/Web/CSS/@document /en-US/docs/Web/CSS/:any /en-US/docs/Web/CSS/:is -/en-US/docs/Web/CSS/:closed /en-US/docs/Web/CSS/:popover-open /en-US/docs/Web/CSS/:dir() /en-US/docs/Web/CSS/:dir /en-US/docs/Web/CSS/:host() /en-US/docs/Web/CSS/:host_function /en-US/docs/Web/CSS/:lang() /en-US/docs/Web/CSS/:lang @@ -11778,7 +11778,6 @@ /en-US/docs/Web/CSS/:nth-last-col /en-US/docs/Web/CSS/:nth-last-of-type /en-US/docs/Web/CSS/:nth-last-of-type() /en-US/docs/Web/CSS/:nth-last-of-type /en-US/docs/Web/CSS/:nth-of-type() /en-US/docs/Web/CSS/:nth-of-type -/en-US/docs/Web/CSS/:open /en-US/docs/Web/CSS/:popover-open /en-US/docs/Web/CSS/@-moz-document /en-US/docs/Web/CSS/@document /en-US/docs/Web/CSS/@font-face/font-variant /en-US/docs/Web/CSS/@font-face /en-US/docs/Web/CSS/@media/update-frequency /en-US/docs/Web/CSS/@media/update @@ -12792,6 +12791,7 @@ /en-US/docs/Web/JavaScript/Guide/Inheritance_Revisited /en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain /en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain /en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain /en-US/docs/Web/JavaScript/Guide/JavaScript_Overview /en-US/docs/Web/JavaScript/Guide/Introduction +/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates /en-US/docs/Web/JavaScript/Guide/Numbers_and_strings /en-US/docs/Web/JavaScript/Guide/Obsolete_Pages /en-US/docs/Web/JavaScript/Guide /en-US/docs/Web/JavaScript/Guide/Obsolete_Pages/Block_Statement /en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling /en-US/docs/Web/JavaScript/Guide/Obsolete_Pages/Calling_Functions /en-US/docs/Web/JavaScript/Guide/Functions @@ -12877,6 +12877,7 @@ /en-US/docs/Web/JavaScript/Guide/Regular_expressions/Unicode_property_escapes /en-US/docs/Web/JavaScript/Reference/Regular_expressions/Unicode_character_class_escape /en-US/docs/Web/JavaScript/Guide/Sameness /en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness /en-US/docs/Web/JavaScript/Guide/Statements /en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling +/en-US/docs/Web/JavaScript/Guide/Text_formatting /en-US/docs/Web/JavaScript/Guide/Numbers_and_strings /en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol /en-US/docs/Web/JavaScript/Reference/Iteration_protocols /en-US/docs/Web/JavaScript/Guide/The_legacy_Iterator_protocol /en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features /en-US/docs/Web/JavaScript/Guide/Using_native_JSON /en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index 3fd5971032913e9..906cb4966f99e1d 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -4495,10 +4495,6 @@ "modified": "2020-10-05T12:31:04.165Z", "contributors": ["alattalatta", "darby", "klez", "devanshmanu", "jswisher"] }, - "Glossary/Self-Executing_Anonymous_Function": { - "modified": "2019-09-24T05:50:18.861Z", - "contributors": ["natevw", "Porkepix", "chrisdavidmills"] - }, "Glossary/Semantics": { "modified": "2020-11-27T04:59:07.153Z", "contributors": [ @@ -102180,7 +102176,7 @@ "douglasnaphas" ] }, - "Web/JavaScript/Guide/Numbers_and_dates": { + "Web/JavaScript/Guide/Numbers_and_strings": { "modified": "2020-11-14T07:27:01.088Z", "contributors": [ "mfuji09", @@ -102426,31 +102422,6 @@ "jpmedley" ] }, - "Web/JavaScript/Guide/Text_formatting": { - "modified": "2020-05-25T10:48:56.137Z", - "contributors": [ - "fscholz", - "wbamberg", - "bma", - "alattalatta", - "vriojtg", - "sbfraser01", - "chrisdavidmills", - "JigneshMistry", - "stephaniehobson", - "SphinxKnight", - "amir77ameri", - "ThomasEugeneBishop", - "nmve", - "kdex", - "Jeremie", - "danielinux7", - "gportioli", - "xfq", - "mahzaib", - "kscarfone" - ] - }, "Web/JavaScript/Guide/Typed_arrays": { "modified": "2020-10-15T21:04:01.905Z", "contributors": [ diff --git a/files/en-us/games/techniques/tilemaps/square_tilemaps_implementation_colon__scrolling_maps/index.md b/files/en-us/games/techniques/tilemaps/square_tilemaps_implementation_colon__scrolling_maps/index.md index ddbee59cf44ac30..f4e19f9d4010054 100644 --- a/files/en-us/games/techniques/tilemaps/square_tilemaps_implementation_colon__scrolling_maps/index.md +++ b/files/en-us/games/techniques/tilemaps/square_tilemaps_implementation_colon__scrolling_maps/index.md @@ -19,7 +19,7 @@ Regardless of the type of camera, we would always need information regarding its - `x` and `y`: The current position of the camera. In this implementation, we are assuming that `(x,y)` points to the top left corner of visible portion of the map. - `width` and `height`: The size of the camera's viewport. -- `maxX` and `maxY`: The limit for the camera's position — The lower limit will nearly always be (0,0), and in this case the upper limit is equal to the size of the world minus the size of the camera's viewport. +- `maxX` and `maxY`: The limit for the camera's position — The lower limit will nearly always be `(0,0)`, and in this case the upper limit is equal to the size of the world minus the size of the camera's viewport. ## Rendering the map diff --git a/files/en-us/games/tutorials/html5_gamedev_phaser_device_orientation/index.md b/files/en-us/games/tutorials/html5_gamedev_phaser_device_orientation/index.md index 050b19aba30ebe6..9c3107f91442f32 100644 --- a/files/en-us/games/tutorials/html5_gamedev_phaser_device_orientation/index.md +++ b/files/en-us/games/tutorials/html5_gamedev_phaser_device_orientation/index.md @@ -28,7 +28,7 @@ You can open the index file in your favorite browser to launch the game and try - `img`: All the images that we will use in the game. - `src`: The JavaScript files with all the source code of the game defined inside. -- `audio:` The sound files used in the game. +- `audio`: The sound files used in the game. ## Setting up the Canvas diff --git a/files/en-us/glossary/aspect_ratio/index.md b/files/en-us/glossary/aspect_ratio/index.md index c292b90ccdf8da4..d79062177906315 100644 --- a/files/en-us/glossary/aspect_ratio/index.md +++ b/files/en-us/glossary/aspect_ratio/index.md @@ -6,7 +6,7 @@ page-type: glossary-definition {{GlossarySidebar}} -An **aspect ratio** is the proportional relationship between an element or {{glossary("viewport")}}'s width and height, and is represented as a ratio or two numbers. +An **aspect ratio** is the proportional relationship between an element or {{glossary("viewport")}}'s width and height. It is represented as a {{cssxref("ratio")}} of two numbers. Having an aspect ratio, whether it's an inherent aspect ratio like with images and videos or if it's extrinsically set, maintains the intended proportions of an element. You can also query an element or viewport's aspect, which is useful in developing flexible components and layouts. diff --git a/files/en-us/glossary/baseline/typography/index.md b/files/en-us/glossary/baseline/typography/index.md index f7387b5bae6749b..64b22390066d86e 100644 --- a/files/en-us/glossary/baseline/typography/index.md +++ b/files/en-us/glossary/baseline/typography/index.md @@ -14,6 +14,6 @@ Other writing systems have different baselines. For example, Tibetan and similar ## See also -- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment#types_of_alignment) +- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment#types_of_alignment) - [CSS inline layout](/en-US/docs/Web/CSS/CSS_inline_layout) module - [Baseline (Typography)]() on Wikipedia diff --git a/files/en-us/glossary/character_reference/index.md b/files/en-us/glossary/character_reference/index.md index 072822ed0459923..26e40214fa3f89c 100644 --- a/files/en-us/glossary/character_reference/index.md +++ b/files/en-us/glossary/character_reference/index.md @@ -6,7 +6,7 @@ page-type: glossary-definition {{GlossarySidebar}} -An {{glossary("HTML")}} **character reference** is a formatted pattern of characters that is used to represent another character in the rendered web page. +An {{glossary("HTML")}} **character reference** is an {{glossary("escape character", "escape sequence")}} of {{glossary("character", "characters")}} that is used to represent another character in the rendered web page. Character references are used as replacements for characters that are reserved in HTML, such as the less-than (`<`) and greater-than (`>`) symbols used by the HTML parser to identify element {{Glossary('tag','tags')}}, or `"` or `'` within attributes, which may be enclosed by those characters. They can also be used for invisible characters that would otherwise be impossible to type, including non-breaking spaces, control characters like left-to-right and right-to-left marks, and for characters that are hard to type on a standard keyboard. @@ -21,7 +21,7 @@ There are three types of character references: - **Decimal numeric character references** - - : These references start with `&#`, followed by one or more ASCII digits representing the base-ten integer that corresponds to the character's Unicode code point, and ending with `;`. + - : These references start with `&#`, followed by one or more ASCII digits representing the base-ten integer that corresponds to the character's {{glossary("Unicode")}} {{glossary("code point")}}, and ending with `;`. For example, the decimal character reference for `<` is `<`, because the Unicode code point for the symbol is `U+0003C`, and `3C` hexadecimal is 60 in decimal. - **Hexadecimal numeric character reference** @@ -50,3 +50,11 @@ A very small subset of useful named character references along with their unicod | ° | `°` | U+000B0 | The full list of HTML named character references [can found in the HTML specification here](https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references). + +## See also + +- Related glossary terms: + - {{glossary("Character")}} + - {{glossary("Escape character")}} + - {{glossary("Code point")}} + - {{glossary("Unicode")}} diff --git a/files/en-us/glossary/compile/index.md b/files/en-us/glossary/compile/index.md index a5f3e17081c0183..68e311202917679 100644 --- a/files/en-us/glossary/compile/index.md +++ b/files/en-us/glossary/compile/index.md @@ -10,7 +10,7 @@ page-type: glossary-definition Typically, a compiler transforms code written in a higher-level language such as [C++](https://en.wikipedia.org/wiki/C++), [Rust](), or [Java]() into executable (runnable) code — so-called **binary code** or **machine code**. [WebAssembly](/en-US/docs/WebAssembly), for example, is a form of executable binary code that [can be compiled from code written in C++, Rust, C#, Go, Swift, and several other languages](https://webassembly.org/getting-started/developers-guide/) and run on any web page, with most features supported in modern browsers (see [browser compatibility table](/en-US/docs/WebAssembly#browser_compatibility)). -Most compilers perform either ahead-of-time (AOT) compilation or just-in-time (JIT) compilation. +Most compilers perform either ahead-of-time (AOT) compilation or {{glossary("Just In Time Compilation", "just-in-time (JIT)")}} compilation. The GNU `gcc` compiler is one well-known example of an AOT compiler. AOT compilers are typically invoked from the command line in a shell environment (from within a terminal or console) or within an {{Glossary("IDE")}}. @@ -22,3 +22,5 @@ Compilers may also translate among higher-level languages — for example, from - [Compiler](https://en.wikipedia.org/wiki/Compiler) on Wikipedia - [WebAssembly](/en-US/docs/WebAssembly) +- Related glossary terms: + - {{glossary("Just In Time Compilation", "Just-In-Time (JIT)")}} diff --git a/files/en-us/glossary/csr/index.md b/files/en-us/glossary/csr/index.md new file mode 100644 index 000000000000000..3a4900c3847a6e9 --- /dev/null +++ b/files/en-us/glossary/csr/index.md @@ -0,0 +1,46 @@ +--- +title: Client-side rendering (CSR) +slug: Glossary/CSR +page-type: glossary-definition +--- + +{{GlossarySidebar}} + +**Client-side rendering** (CSR) refers to the practice of generating HTML content using JavaScript in the browser. CSR is opposed to {{glossary("SSR", "server-side rendering")}}, where the server generates the HTML content. Both techniques are not mutually exclusive and can be used together in the same application. + +A pure CSR app may return the following HTML content: + +```html + + + + My App + + + +
+ + + +``` + +Then, the actual page content is generated by JavaScript in `bundle.js`, using [DOM manipulation](/en-US/docs/Web/API/Document_Object_Model). + +Benefits of CSR include: + +- Interactivity: any page update, including route transitions, do not require a full page reload. This makes the app feel faster and more responsive. +- Performance: the server only needs to send the initial HTML content and JavaScript assets. Subsequent page updates can be fetched from an API, which can be faster than fetching a full HTML page, and causes less load on the server. + +Both SSR and CSR have their performance tradeoffs, and a mix of SSR and CSR can be used to combine the benefits of both techniques. For example, the server can generate a page skeleton with empty placeholders, and the client can fetch additional data and update the page as needed. + +Note that {{glossary("SPA", "single-page applications")}} do not require the site to be CSR. Modern frameworks, such as [React](/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started), [Vue](/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Vue_getting_started), and [Svelte](/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_getting_started), can be used to build SPAs with SSR capabilities. + +## See also + +- [Introduction to client-side frameworks > server-side rendering](/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction#server-side_rendering) +- [Client-side rendering](https://en.wikipedia.org/wiki/Client-side_rendering) on Wikipedia +- {{glossary("SSR", "Server-side rendering")}} +- {{glossary("SSG", "Static site generator")}} +- {{glossary("SPA", "Single-page application")}} diff --git a/files/en-us/glossary/escape_character/index.md b/files/en-us/glossary/escape_character/index.md new file mode 100644 index 000000000000000..a2073c3ca7372de --- /dev/null +++ b/files/en-us/glossary/escape_character/index.md @@ -0,0 +1,23 @@ +--- +title: Escape character +slug: Glossary/Escape_character +page-type: glossary-definition +--- + +{{GlossarySidebar}} + +An **escape character** is a {{glossary("character")}} that causes one or more characters that follow it to be interpreted differently. This forms an **escape sequence**, which is often used to represent a character that has an alternative meaning when printed literally, such as the quote character in a string literal. Escape sequences can have other usages too, especially in [regular expressions](/en-US/docs/Web/JavaScript/Reference/Regular_expressions#escape_sequences). + +- In JavaScript [regexes](/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Character_escape), [string literals](/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#string_literals), and [identifiers](/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#identifiers), we can use the backslash (`\`) to escape characters like `\'`, `\"`, `\u0026`, etc. +- In CSS identifiers, we can use the backslash (`\`) to escape characters like `\\`, `\n`, `\26`, etc. See [escape characters](/en-US/docs/Web/CSS/ident#escaping_characters) for more information. +- In HTML text content and attribute values, we can use {{glossary("character reference", "character references")}} like `<`, `<`, or `<`. +- In {{glossary("URL", "URLs")}}, we can use the percent sign (`%`) to escape characters like `%20`, `%3C`, `%3E`, etc. + +## See also + +- Related glossary terms: + - {{glossary("Character")}} + - {{glossary("Character reference")}} + - {{glossary("Code point")}} +- [Escape character](https://en.wikipedia.org/wiki/Escape_character) on Wikipedia +- [Escape sequence](https://en.wikipedia.org/wiki/Escape_sequence) on Wikipedia diff --git a/files/en-us/glossary/guaranteed_invalid_value/index.md b/files/en-us/glossary/guaranteed_invalid_value/index.md new file mode 100644 index 000000000000000..4dee2664c7cbc73 --- /dev/null +++ b/files/en-us/glossary/guaranteed_invalid_value/index.md @@ -0,0 +1,17 @@ +--- +title: Guaranteed-invalid value +slug: Glossary/guaranteed_invalid_value +page-type: glossary-definition +--- + +{{GlossarySidebar}} + +In CSS the guaranteed-invalid value is {{CSSXref("initial")}}. + +When a [custom property](/en-US/docs/Web/CSS/--*)'s value is the guaranteed-invalid value, the {{CSSXref("var")}} function cannot use it for substitution. Attempting to do so makes the declaration _invalid at computed-value time_, unless a valid fallback is specified. + +## See also + +- CSS {{CSSXref("initial")}} +- CSS {{CSSXref("var")}} +- [CSS Custom Properties for Cascading Variables Module Level 1 Specification](https://www.w3.org/TR/css-variables-1/#guaranteed-invalid) diff --git a/files/en-us/glossary/head_of_line_blocking/index.md b/files/en-us/glossary/head_of_line_blocking/index.md new file mode 100644 index 000000000000000..dd4cb948a1218b4 --- /dev/null +++ b/files/en-us/glossary/head_of_line_blocking/index.md @@ -0,0 +1,19 @@ +--- +title: Head-of-line blocking +slug: Glossary/Head_of_line_blocking +page-type: glossary-definition +--- + +{{GlossarySidebar}} + +In computer networking, **head-of-line blocking** (_HOL blocking_) refers to a performance bottleneck that occurs when a queue of packets is held up by the first packet in the queue, even though other packets in the queue could be processed. + +In HTTP/1.1, HOL blocking can occur when a client sends multiple requests to a {{glossary("server")}} without waiting for the responses. The server processes the requests in order, but if the response to the first request is delayed, the responses to subsequent requests are also delayed. HTTP/2 addresses this issue through request multiplexing, eliminating HOL blocking in the application layer, but it still exists at the transport ({{glossary("TCP")}}) layer. + +## See also + +- Related glossary terms + - {{glossary("HTTP")}}, {{glossary("HTTP 2", "HTTP/2")}} + - {{glossary("TCP")}} +- [Populating the page: how browsers work](/en-US/docs/Web/Performance/How_browsers_work) +- [Head-of-line blocking](https://en.wikipedia.org/wiki/Head-of-line_blocking) on Wikipedia diff --git a/files/en-us/glossary/http_2/index.md b/files/en-us/glossary/http_2/index.md index 3aa06aa3dc1fd7e..7446d8dc907a269 100644 --- a/files/en-us/glossary/http_2/index.md +++ b/files/en-us/glossary/http_2/index.md @@ -8,7 +8,7 @@ page-type: glossary-definition **HTTP/2** is a major revision of the [HTTP network protocol](/en-US/docs/Web/HTTP). -The primary goals for HTTP/2 are to reduce {{glossary("latency")}} and head-of-line blocking by enabling full request and response multiplexing, minimize protocol overhead via efficient compression of HTTP header fields (HPACK), and support for request prioritization. +The primary goals for HTTP/2 are to reduce {{glossary("latency")}} and {{glossary("head of line blocking", "head-of-line blocking")}} by enabling full request and response multiplexing, minimize protocol overhead via efficient compression of HTTP header fields (HPACK), and support for request prioritization. HTTP/2 also introduced a mechanism called Server Push, which allowed a server to send resources to a client in anticipation that the client would need them very soon. Server Push proved tricky to implement in practice, and has been removed from most major browser engines. diff --git a/files/en-us/glossary/iife/index.md b/files/en-us/glossary/iife/index.md index 51ec1142139f450..990fb2eeaa78b9c 100644 --- a/files/en-us/glossary/iife/index.md +++ b/files/en-us/glossary/iife/index.md @@ -6,155 +6,43 @@ page-type: glossary-definition {{GlossarySidebar}} -An **IIFE** (Immediately Invoked Function Expression) is a {{glossary("JavaScript")}} {{glossary("function")}} that runs as soon as it is defined. -The name IIFE is promoted by Ben Alman in [his blog](https://web.archive.org/web/20171201033208/http://benalman.com/news/2010/11/immediately-invoked-function-expression/#iife). +An **IIFE** (Immediately Invoked Function Expression) is an idiom in which a {{glossary("JavaScript")}} {{glossary("function")}} runs as soon as it is defined. It is also known as a _self-executing anonymous function_. The name IIFE is promoted by Ben Alman in [his blog](https://web.archive.org/web/20171201033208/http://benalman.com/news/2010/11/immediately-invoked-function-expression/#iife). ```js +// standard IIFE (function () { - // … + // statements… })(); +// arrow function variant (() => { - // … + // statements… })(); +// async IIFE (async () => { - // … + // statements… })(); ``` -It is a design pattern which is also known as a {{glossary("Self-Executing Anonymous Function")}} and contains two major parts: +It contains two major parts: -1. The first is the anonymous function with lexical scope enclosed within the [grouping operator](/en-US/docs/Web/JavaScript/Reference/Operators/Grouping) `()`. This prevents accessing variables within the IIFE idiom as well as polluting the global scope. -2. The second part creates the immediately invoked function expression `()` through which the JavaScript engine will directly interpret the function. +1. A [function _expression_](/en-US/docs/Web/JavaScript/Reference/Operators/function). This usually needs to be [enclosed in parentheses](/en-US/docs/Web/JavaScript/Reference/Operators/Grouping) in order to be parsed correctly. +2. Immediately _calling_ the function expression. Arguments may be provided, though IIFEs without arguments are more common. -## Use cases +IIFEs are a common pattern used to execute arbitrarily many statements in their own scope (and possibly return a value), in a location that requires a single expression. They are similar to, but much more powerful than, the [comma operator](/en-US/docs/Web/JavaScript/Reference/Operators/Comma_operator), which can only execute multiple expressions and, therefore, does not provide a way to use local variables or control flow statements. -### Avoid polluting the global namespace +Use cases of IIFEs include: -Because our application could include many functions and global variables from different source files, it's -important to limit the number of global variables. If we have some initiation code that we don't need to use -again, we could use the IIFE pattern. As we will not reuse the code again, using IIFE in this case is better than -using a function declaration or a function expression. +- Avoiding polluting the global namespace by creating a new {{glossary("scope")}}. +- Creating a new async context to use {{jsxref("Operators/await", "await")}} in a non-async context. +- Computing values with complex logic, such as using multiple statements as a single expression. -```js -(() => { - // some initiation code - let firstVariable; - let secondVariable; -})(); - -// firstVariable and secondVariable will be discarded after the function is executed. -``` - -### Execute an async function - -An [`async`](/en-US/docs/Web/JavaScript/Reference/Operators/async_function) IIFE allows you to use [`await`](/en-US/docs/Web/JavaScript/Reference/Operators/await) and [`for-await`](/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of) even in older browsers and JavaScript runtimes that have no [top-level await](/en-US/docs/Web/JavaScript/Reference/Operators/await#top_level_await): - -```js -const getFileStream = async (url) => { - // implementation -}; - -(async () => { - const stream = await getFileStream("https://domain.name/path/file.ext"); - for await (const chunk of stream) { - console.log({ chunk }); - } -})(); -``` - -### The module pattern - -We would also use IIFE to create private and public variables and methods. For a more sophisticated use of the module -pattern and other use of IIFE, you could see the book Learning JavaScript Design Patterns by Addy Osmani. - -```js -const makeWithdraw = (balance) => - ((copyBalance) => { - let balance = copyBalance; // This variable is private - const doBadThings = () => { - console.log("I will do bad things with your money"); - }; - doBadThings(); - return { - withdraw(amount) { - if (balance >= amount) { - balance -= amount; - return balance; - } - return "Insufficient money"; - }, - }; - })(balance); - -const firstAccount = makeWithdraw(100); // "I will do bad things with your money" -console.log(firstAccount.balance); // undefined -console.log(firstAccount.withdraw(20)); // 80 -console.log(firstAccount.withdraw(30)); // 50 -console.log(firstAccount.doBadThings); // undefined; this method is private -const secondAccount = makeWithdraw(20); // "I will do bad things with your money" -console.log(secondAccount.withdraw(30)); // "Insufficient money" -console.log(secondAccount.withdraw(20)); // 0 -``` - -### For loop with var before ES6 - -We could see the following use of IIFE in some old code, before the introduction of the statements **let** and **const** -in **ES6** and the block scope. With the statement **var**, we have only function scopes and the global scope. -Suppose we want to create 2 buttons with the texts Button 0 and Button 1 and when we click -them, we would like them to alert 0 and 1. The following code doesn't work: - -```js -for (var i = 0; i < 2; i++) { - const button = document.createElement("button"); - button.innerText = `Button ${i}`; - button.onclick = function () { - console.log(i); - }; - document.body.appendChild(button); -} -console.log(i); // 2 -``` - -When clicked, both Button 0 and Button 1 alert 2 because `i` is global, -with the last value 2. To fix this problem before ES6, we could use the IIFE pattern: - -```js -for (var i = 0; i < 2; i++) { - const button = document.createElement("button"); - button.innerText = `Button ${i}`; - button.onclick = (function (copyOfI) { - return function () { - console.log(copyOfI); - }; - })(i); - document.body.appendChild(button); -} -console.log(i); // 2 -``` - -When clicked, Buttons 0 and 1 alert 0 and 1. -The variable `i` is globally defined. -Using the statement **let**, we could simply do: - -```js -for (let i = 0; i < 2; i++) { - const button = document.createElement("button"); - button.innerText = `Button ${i}`; - button.onclick = function () { - console.log(i); - }; - document.body.appendChild(button); -} -console.log(i); // Uncaught ReferenceError: i is not defined. -``` - -When clicked, these buttons alert 0 and 1. +For code examples, see the [`function` expression](/en-US/docs/Web/JavaScript/Reference/Operators/function) and [`async function` expression](/en-US/docs/Web/JavaScript/Reference/Operators/async_function) reference pages. ## See also - [IIFE](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression) (Wikipedia) +- [Comma operator](/en-US/docs/Web/JavaScript/Reference/Operators/Comma_operator) - Related glossary terms: - {{Glossary("Function")}} - - {{Glossary("Self-Executing Anonymous Function")}} diff --git a/files/en-us/glossary/just_in_time_compilation/index.md b/files/en-us/glossary/just_in_time_compilation/index.md new file mode 100644 index 000000000000000..4281497be7ad367 --- /dev/null +++ b/files/en-us/glossary/just_in_time_compilation/index.md @@ -0,0 +1,19 @@ +--- +title: Just-In-Time Compilation (JIT) +slug: Glossary/Just_In_Time_Compilation +page-type: glossary-definition +--- + +{{GlossarySidebar}} + +**JIT** (_Just-In-Time Compilation_) is a {{glossary("compile", "compilation")}} process in which code is translated from an intermediate representation or a higher-level language (e.g., {{glossary("JavaScript")}} or Java bytecode) into machine code _at runtime_, rather than prior to execution. This approach combines the benefits of both interpretation and ahead-of-time (AOT) compilation. + +JIT compilers typically continuously analyze the code as it is executed, identifying parts of the code that are executed frequently (hot spots). If the speedup gains outweigh the compilation overhead, then the JIT compilers will compile those parts into machine code. The compiled code is then executed directly by the processor, which can result in significant performance improvements. + +JIT is commonly used in modern {{glossary("browser", "web browsers")}} to optimize the performance of JavaScript code. + +## See also + +- [Just-In-Time Compilation](https://en.wikipedia.org/wiki/Just-in-time_compilation) on Wikipedia +- Related glossary terms: + - {{glossary("compile")}} diff --git a/files/en-us/glossary/pop/index.md b/files/en-us/glossary/pop/index.md index 68605bdffe1507b..bc049706f51332e 100644 --- a/files/en-us/glossary/pop/index.md +++ b/files/en-us/glossary/pop/index.md @@ -16,5 +16,5 @@ Clients usually retrieve all messages and then delete them from the server, but - [RFC 1734](https://datatracker.ietf.org/doc/html/rfc1734) (Specification of POP3 authentication mechanism) - [RFC 1939](https://datatracker.ietf.org/doc/html/rfc1939) (Specification of POP3) - [RFC 2449](https://datatracker.ietf.org/doc/html/rfc2449) (Specification of POP3 extension mechanism) -- Related glossary terms:: +- Related glossary terms: - {{Glossary("IMAP")}} diff --git a/files/en-us/glossary/same-origin_policy/index.md b/files/en-us/glossary/same-origin_policy/index.md index a322d7ae3fd0336..5c1956cbd943544 100644 --- a/files/en-us/glossary/same-origin_policy/index.md +++ b/files/en-us/glossary/same-origin_policy/index.md @@ -13,6 +13,6 @@ It helps isolate potentially malicious documents, reducing possible attack vecto ## See also - [Same-origin policy](/en-US/docs/Web/Security/Same-origin_policy) -- Related glossary terms:: +- Related glossary terms: - {{Glossary("CORS")}} - {{Glossary("origin")}} diff --git a/files/en-us/glossary/self-executing_anonymous_function/index.md b/files/en-us/glossary/self-executing_anonymous_function/index.md deleted file mode 100644 index a8ba7a1241c3ab4..000000000000000 --- a/files/en-us/glossary/self-executing_anonymous_function/index.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Self-Executing Anonymous Function -slug: Glossary/Self-Executing_Anonymous_Function -page-type: glossary-definition ---- - -{{GlossarySidebar}} - -A {{glossary("JavaScript")}} {{glossary("function")}} that runs as soon as it is defined. Also known as an {{glossary("IIFE")}} (Immediately Invoked Function Expression). - -See the IIFE glossary page linked above for more information. diff --git a/files/en-us/glossary/ssr/index.md b/files/en-us/glossary/ssr/index.md new file mode 100644 index 000000000000000..ca01a8dc5a79d93 --- /dev/null +++ b/files/en-us/glossary/ssr/index.md @@ -0,0 +1,29 @@ +--- +title: Server-side rendering (SSR) +slug: Glossary/SSR +page-type: glossary-definition +--- + +{{GlossarySidebar}} + +**Server-side rendering** (SSR) refers to the practice of generating HTML content on the server and sending it to the client. SSR is opposed to {{glossary("CSR", "client-side rendering")}}, where the client generates the HTML content using JavaScript. Both techniques are not mutually exclusive and can be used together in the same application. + +A {{glossary("SSG", "static site")}} can be considered as SSR (and can be generated using SSR infrastructure), but there are nuanced differences. Content of a static site is generated at build time, not at request time. Static sites often do not need to be deployed on a server at all, and can be served from a {{glossary("CDN")}}. + +The SSR/CSR distinction is more meaningful for sites with dynamic content, for example live-updating or user-specific content. In these cases, for every request, the server generates the HTML content on-the-fly because it is unrealistic to pregenerate every possible page. The HTML file contains near-complete page content, and any JavaScript asset is only to enable interactivity. + +Benefits of SSR include: + +- Accessibility: the page is (somewhat) usable without JavaScript, for example if Internet is slow, the user has disabled JavaScript, or the browser is old and JavaScript fails to run. However, any interactivity or client-side logic will not work. +- Crawler-friendliness: search engines, social media crawlers, and other bots can easily read the content without needing to execute JavaScript. Note that major search engines are capable of executing JavaScript so pure CSR sites can still be indexed, but social media crawlers usually cannot. +- Performance: the server can know ahead-of-time what content is needed and can fetch all necessary data at once, compared to CSR where the client is often only aware of further dependencies when it renders the initial page, causing a waterfall of requests. + +Both SSR and CSR have their performance tradeoffs, and a mix of SSR and CSR can be used to combine the benefits of both techniques. For example, the server can generate a page skeleton with empty placeholders, and the client can fetch additional data and update the page as needed. + +## See also + +- [Introduction to client-side frameworks > server-side rendering](/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction#server-side_rendering) +- [Server-side scripting](https://en.wikipedia.org/wiki/Server-side_scripting) on Wikipedia +- {{glossary("CSR", "Client-side rendering")}} +- {{glossary("SSG", "Static site generator")}} +- {{glossary("SPA", "Single-page application")}} diff --git a/files/en-us/glossary/style_origin/index.md b/files/en-us/glossary/style_origin/index.md index 544218916dd592b..c81c01f650d9898 100644 --- a/files/en-us/glossary/style_origin/index.md +++ b/files/en-us/glossary/style_origin/index.md @@ -19,4 +19,4 @@ The style origins are used to determine where to stop rolling back (or backtrack ## See also -- [CSS Cascading and Inheritance: Cascading Origins](https://drafts.csswg.org/css-cascade-4/#cascading-origins) +- [CSS cascading and inheritance: Cascading Origins](https://drafts.csswg.org/css-cascade-4/#cascading-origins) diff --git a/files/en-us/glossary/time_to_first_byte/index.md b/files/en-us/glossary/time_to_first_byte/index.md index af1e0a5afb123b5..76f6eccbcc6fede 100644 --- a/files/en-us/glossary/time_to_first_byte/index.md +++ b/files/en-us/glossary/time_to_first_byte/index.md @@ -8,14 +8,17 @@ page-type: glossary-definition **Time to First Byte** (TTFB) refers to the time between the browser requesting a page and when it receives the first byte of information from the server. This time includes {{Glossary("DNS")}} lookup and establishing the connection using a {{Glossary("TCP")}} handshake and {{Glossary("TLS")}} handshake if the request is made over {{Glossary("HTTPS")}}. -TTFB is the time it takes between the start of the request and the start of the response, in milliseconds: +TTFB is the time it takes between the start of the request and the start of the response, in milliseconds. This can be measured using the `{{domxref("PerformanceResourceTiming.requestStart", "requestStart")}}` attribute of {{domxref("PerformanceNavigationTiming")}}: -```plain -TTFB = responseStart - navigationStart +```javascript +const ttfb = performance.getEntriesByType("navigation")[0].responseStart; ``` +> [!NOTE] +> For sites using {{HTTPStatus("103", "103 Early Hints")}}, TTFB is typically the _first bytes_ (after any redirects) — and so, the 103 interim response. Site owners wishing to measure the time until the final response should use `{{domxref("PerformanceResourceTiming.finalResponseHeadersStart", "finalResponseHeadersStart")}}`, where supported. + ## See also - [A typical HTTP session](/en-US/docs/Web/HTTP/Session) - [PerformanceResourceTiming](/en-US/docs/Web/API/PerformanceResourceTiming) -- [PerformanceTiming](/en-US/docs/Web/API/PerformanceTiming) +- [PerformanceNavigationTiming](/en-US/docs/Web/API/PerformanceNavigationTiming) diff --git a/files/en-us/learn_web_development/core/accessibility/html/index.md b/files/en-us/learn_web_development/core/accessibility/html/index.md index 347f10138095f12..080ea658d3043c6 100644 --- a/files/en-us/learn_web_development/core/accessibility/html/index.md +++ b/files/en-us/learn_web_development/core/accessibility/html/index.md @@ -497,9 +497,9 @@ This highlights the importance of not only using meaningful file names in case s Note that the contents of the `alt` attribute should always provide a direct representation of the image and what it conveys visually. The alt should be brief and concise and include all the information conveyed in the image that is not duplicated in the surrounding text. -The content of the `alt` attribute for a single image differs based on the context. For example, if the photo of Fluffy is an avatar next to a review for Yuckymeat dog food, `alt="Fluffy"` is appropriate. If the photo is part of Fluffy's adoption page for the animal rescue society, information conveyed in the image that is relevant for a prospective dog parent that is not duplicated in the surrounding text should be included. A longer description, such as `alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth."` is appropriate. As the surrounding text likely has Fluffy's size and breed, that is not included in the `alt`. However, as the dog's biography likely doesn't include hair length, colors, or toy preferences, which the potential parent needs to know, it is included. Is the image outdoors, or does Fluffy have a red collar with a blue leash? Not important in terms of adopting the pet and therefore not included. All information image conveys that a sited user can access and is relevant to the context is what needs to be conveyed; nothing more. Keep it short, precise, and useful. +The content of the `alt` attribute for a single image differs based on the context. For example, if the photo of Fluffy is an avatar next to a review for Yuckymeat dog food, `alt="Fluffy"` is appropriate. If the photo is part of Fluffy's adoption page for the animal rescue society, information conveyed in the image that is relevant for a prospective dog parent that is not duplicated in the surrounding text should be included. A longer description, such as `alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth."` is appropriate. As the surrounding text likely has Fluffy's size and breed, that is not included in the `alt`. However, as the dog's biography likely doesn't include hair length, colors, or toy preferences, which the potential parent needs to know, it is included. Is the image outdoors, or does Fluffy have a red collar with a blue leash? Not important in terms of adopting the pet and therefore not included. All information image conveys that a sighted user can access and is relevant to the context is what needs to be conveyed; nothing more. Keep it short, precise, and useful. -Any personal knowledge or extra description shouldn't be included here, as it is not useful for people who have not seen the image before. If the ball is Fluffy's favorite toy or if the sited user can't know that from the image, then don't include it. +Any personal knowledge or extra description shouldn't be included here, as it is not useful for people who have not seen the image before. If the ball is Fluffy's favorite toy or if a sighted user can't know that from the image, then don't include it. One thing to consider is whether your images have meaning inside your content, or whether they are purely for visual decoration, and thus have no meaning. If they are decorative, it is better to write an empty text as a value for `alt` attribute (see [Empty alt attributes](#empty_alt_attributes)) or to just include them in the page as CSS background images. diff --git a/files/en-us/learn_web_development/core/css_layout/responsive_design/index.md b/files/en-us/learn_web_development/core/css_layout/responsive_design/index.md index ba03e630a3ea7f6..63fb1effba1c1e2 100644 --- a/files/en-us/learn_web_development/core/css_layout/responsive_design/index.md +++ b/files/en-us/learn_web_development/core/css_layout/responsive_design/index.md @@ -309,6 +309,7 @@ On mobile the heading is smaller, but on desktop, we see the larger heading size ```html live-sample___type-rwd
+

Watch my size!

This layout is responsive. See what happens if you make the browser window wider or narrow. diff --git a/files/en-us/learn_web_development/core/design_for_developers/index.md b/files/en-us/learn_web_development/core/design_for_developers/index.md index 4a20aac1e88c942..34b8ad9b7065577 100644 --- a/files/en-us/learn_web_development/core/design_for_developers/index.md +++ b/files/en-us/learn_web_development/core/design_for_developers/index.md @@ -63,7 +63,7 @@ Learning outcomes: Resources: - [Accessibility overview](/en-US/docs/Learn_web_development/Core/Accessibility) -- [Inclusive design principles](https://inclusivedesignprinciples.org/), inclusivedesignprinciples.org +- [Inclusive design principles](https://inclusivedesignprinciples.info/), inclusivedesignprinciples.info ## Design briefs diff --git a/files/en-us/learn_web_development/core/index.md b/files/en-us/learn_web_development/core/index.md index d1afa4efcf0f066..cafd7f7b370cdca 100644 --- a/files/en-us/learn_web_development/core/index.md +++ b/files/en-us/learn_web_development/core/index.md @@ -32,7 +32,7 @@ In particular, if you've never done any coding before, we'd recommend the [Your - : Access to web content such as public services, education, e-commerce sites, and entertainment is a human right. No one should be excluded based on disability, race, geography, or other human characteristics. This module discusses the best practices and techniques you should learn to make your websites as accessible as possible. - [Design for developers](/en-US/docs/Learn_web_development/Core/Design_for_developers) - : The idea of this module is to (re-)introduce developers to design thinking. They may not want to work as designers, but having some basic user experience and design theory is good for everyone involved in building websites, no matter what their role. At the very least, even the most technical, "non-designer" developer should understand design briefs, why things are designed as they are, and be able to get into the mindset of the user. And it'll help them make their portfolios look better. -- [Version_control](/en-US/docs/Learn_web_development/Core/Version_control) +- [Version control](/en-US/docs/Learn_web_development/Core/Version_control) - : Version control tools are an essential part of modern workflows, for backing up and collaborating on codebases. This module takes you through the essentials of version control using Git and GitHub. ## See also diff --git a/files/en-us/learn_web_development/core/scripting/functions/index.md b/files/en-us/learn_web_development/core/scripting/functions/index.md index de9bb13e58fd42f..bcf8de7975872bf 100644 --- a/files/en-us/learn_web_development/core/scripting/functions/index.md +++ b/files/en-us/learn_web_development/core/scripting/functions/index.md @@ -356,7 +356,9 @@ function greeting() { } ``` -Both functions you want to call are called `greeting()`, but you can only ever access the `first.js` file's `greeting()` function (the second one is ignored). In addition, an error results when attempting (in the `second.js` file) to assign a new value to the `name` variable — because it was already declared with `const`, and so can't be reassigned. +You will see that the second script does not load and run at all, and an error is printed in the console: `Uncaught SyntaxError: Identifier 'name' has already been declared`. This is because the `name` constant is already declared in `first.js`, and you can't declare the same constant twice in the same scope. Because the second script did not load, the `greeting()` function from `second.js` is not available to be called. Therefore, you will see an alert box displaying `Hello Chris: welcome to our company.`. + +Try removing the second `const name = "Zaptec";` line from `second.js` and reloading the page. Now both scripts execute, and the alert box says `Our company is called Chris.`. Functions are allowed to be redeclared, and the last declaration gets used. The previous declarations are effectively overwritten. > [!NOTE] > You can see this example [running live on GitHub](https://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html) (see also the [source code](https://github.com/mdn/learning-area/tree/main/javascript/building-blocks/functions)). diff --git a/files/en-us/learn_web_development/core/scripting/index.md b/files/en-us/learn_web_development/core/scripting/index.md index 356a33666ad4a13..7122a2b90620b08 100644 --- a/files/en-us/learn_web_development/core/scripting/index.md +++ b/files/en-us/learn_web_development/core/scripting/index.md @@ -12,7 +12,7 @@ JavaScript is a huge topic, with so many different features, styles, and techniq ## Prerequisites -Before starting this module, you don't need any previous JavaScript knowledge, but you should have worked through the previous modules in the course. You should have at least know [HTML](/en-US/docs/Learn_web_development/Core/Structuring_content) and the [basic fundamentals of CSS](/en-US/docs/Learn_web_development/Core/Styling_basics). +Before starting this module, you don't need any previous JavaScript knowledge, but you should have worked through the previous modules in the course. You should at least know [HTML](/en-US/docs/Learn_web_development/Core/Structuring_content) and the [basic fundamentals of CSS](/en-US/docs/Learn_web_development/Core/Styling_basics). > [!NOTE] > If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as [JSBin](https://jsbin.com/) or [Glitch](https://glitch.com/). diff --git a/files/en-us/learn_web_development/core/scripting/math/index.md b/files/en-us/learn_web_development/core/scripting/math/index.md index a819a8b331c0b1f..816315c3ae72519 100644 --- a/files/en-us/learn_web_development/core/scripting/math/index.md +++ b/files/en-us/learn_web_development/core/scripting/math/index.md @@ -456,7 +456,7 @@ In the next article, we'll explore text and how JavaScript allows us to manipula ## See also -- [Numbers and dates](/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates) +- [Numbers and strings](/en-US/docs/Web/JavaScript/Guide/Numbers_and_strings) - [Expressions and operators](/en-US/docs/Web/JavaScript/Guide/Expressions_and_operators) {{PreviousMenuNext("Learn_web_development/Core/Scripting/Variables", "Learn_web_development/Core/Scripting/Strings", "Learn_web_development/Core/Scripting")}} diff --git a/files/en-us/learn_web_development/core/scripting/what_went_wrong/index.md b/files/en-us/learn_web_development/core/scripting/what_went_wrong/index.md index 1ef1a9a2ae1cfbe..b62bb416046297d 100644 --- a/files/en-us/learn_web_development/core/scripting/what_went_wrong/index.md +++ b/files/en-us/learn_web_development/core/scripting/what_went_wrong/index.md @@ -34,7 +34,7 @@ When you built up the "Guess the number" game in the previous article, you may h Generally speaking, when you do something wrong in code, there are two main types of error that you'll come across: -- **Syntax errors**: These are spelling errors in your code that actually cause the program not to run at all, or stop working part way through — you will usually be provided with some error messages too. These are usually okay to fix, as long as you are familiar with the right tools and know what the error messages mean! +- **Syntax errors**: These are spelling errors in your code that actually cause the program not to run at all, or stop working part way through — you will usually be provided with some error messages too. These are usually not too hard to fix, as long as you are familiar with the right tools and know what the error messages mean! - **Logic errors**: These are errors where the syntax is actually correct but the code is not what you intended it to be, meaning that program runs successfully but gives incorrect results. These are often harder to fix than syntax errors, as there usually isn't an error message to direct you to the source of the error. Okay, so it's not quite _that_ simple — there are some other differentiators as you drill down deeper. But the above classifications will do at this early stage in your career. We'll look at both of these types going forward. diff --git a/files/en-us/learn_web_development/core/structuring_content/index.md b/files/en-us/learn_web_development/core/structuring_content/index.md index 9e1123c63bd8b1f..716b7d617c0c98c 100644 --- a/files/en-us/learn_web_development/core/structuring_content/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/index.md @@ -71,7 +71,7 @@ These tutorials are not part of the learning pathway, but they are interesting n - : [Scrimba's](https://scrimba.com?via=mdn) _Learn HTML and CSS_ course teaches you HTML and CSS through building and deploying five awesome projects, with fun interactive lessons and challenges taught by knowledgeable teachers. - [The basics of semantic HTML](https://v2.scrimba.com/the-frontend-developer-career-path-c0j/~0xid?via=mdn), Scrimba _MDN Curriculum partner_ - : This interactive lesson provides a useful description of HTML, with particular emphasis on why the _semantic_ aspect of it is important. -- [Learn HTML](https://v2.scrimba.com/the-frontend-developer-career-path-c0j/~0xid?via=mdn), Codecademy +- [Learn HTML](https://www.codecademy.com/learn/learn-html), Codecademy - : Another useful (and free resource) for learning HTML basics. {{NextMenu("Learn_web_development/Core/Structuring_content/Basic_HTML_syntax", "Learn_web_development/Core")}} diff --git a/files/en-us/learn_web_development/core/structuring_content/table_accessibility/index.md b/files/en-us/learn_web_development/core/structuring_content/table_accessibility/index.md index 3a4801bbb43ec32..67e5f223cb4d376 100644 --- a/files/en-us/learn_web_development/core/structuring_content/table_accessibility/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/table_accessibility/index.md @@ -25,8 +25,8 @@ In the previous article, we looked at one of the most important features for mak Learning outcomes:

    -
  • An understanding of the accessibility issues associated with tables.
  • -
  • Adding captions to tables.
  • +
  • An understanding of the accessibility issues associated with tables.
    • +
  • Adding captions to tables.
  • Better table structuring with head, body, and footer.
  • Creating further association between headers and cells with the scope, id, and headers attributes.
diff --git a/files/en-us/learn_web_development/core/styling_basics/box_model_tasks/index.md b/files/en-us/learn_web_development/core/styling_basics/box_model_tasks/index.md index 468cd9ca466e059..114d570c404f8c6 100644 --- a/files/en-us/learn_web_development/core/styling_basics/box_model_tasks/index.md +++ b/files/en-us/learn_web_development/core/styling_basics/box_model_tasks/index.md @@ -51,13 +51,12 @@ body {
Click here to show the solution -You will need to increase the height and width of the second block, to add the size of the padding and border: +You will need to increase the width of the second block, to add the size of the padding and border: ```css .alternate { box-sizing: border-box; width: 390px; - height: 240px; } ``` diff --git a/files/en-us/learn_web_development/core/styling_basics/cascade_tasks/index.md b/files/en-us/learn_web_development/core/styling_basics/cascade_tasks/index.md index bad02f26b80cbb6..95a0b07bc9c5c14 100644 --- a/files/en-us/learn_web_development/core/styling_basics/cascade_tasks/index.md +++ b/files/en-us/learn_web_development/core/styling_basics/cascade_tasks/index.md @@ -68,7 +68,9 @@ Then you need to remember there are special keyword values for all properties. I ## Task 2 -In this task, we want you to make your changes by leveraging the [order of cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts#order_of_cascade_layers) section. Edit an existing declaration, without touching the lightgreen declaration, using the cascade layer order to make the links rebeccapurple. +In this task, we want you to manipulate the cascade layer order to color the links `rebeccapurple`. No editing the `lightgreen` declaration! + +This task is a stretch goal — it requires knowledge of cascade layers, which we didn't cover in the [Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) article. You can find the information you need to attempt this task at [Cascade layers > Determining the precedence based on the order of layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers#determining_the_precedence_based_on_the_order_of_layers). Your final result should look like the image below: diff --git a/files/en-us/learn_web_development/core/styling_basics/cool-looking_box/index.md b/files/en-us/learn_web_development/core/styling_basics/cool-looking_box/index.md index 19d773535cdef61..d69f49b9487921b 100644 --- a/files/en-us/learn_web_development/core/styling_basics/cool-looking_box/index.md +++ b/files/en-us/learn_web_development/core/styling_basics/cool-looking_box/index.md @@ -8,13 +8,59 @@ page-type: learn-module-assessment {{PreviousMenuNext("Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper", "Learn_web_development/Core/Text_styling", "Learn_web_development/Core/Styling_basics")}} -In this challenge, you'll get some more practice in creating cool-looking boxes by trying to create an eye-catching box. +In this assessment, you'll get some more practice in creating cool-looking boxes by trying to create an eye-catching box. + + + + + + + + + + + + +
Prerequisites: + Before attempting this assessment you should have already worked + through all the articles in this module. +
Objective: + To test comprehension of the CSS box model and other box-related + features such as borders and backgrounds. +
## Starting point -To start this challenge, you should: +To get this assessment started, you should: -- Make local copies of the starting [HTML](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/cool-information-box-start/index.html) and [CSS](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/cool-information-box-start/style.css) — save them as `index.html` and `style.css` in a new directory. +- Save the HTML and CSS shown below as two separate files — `index.html` and `style.css` — in a new directory. + +### HTML + +```html + + + + + + Cool box + + + +
This is a cool box
+ + +``` + +### CSS + +```css +html { + font-family: sans-serif; +} + +/* Your CSS below here */ +``` Alternatively, you could use an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/). You could paste the HTML and fill in the CSS into one of these online editors. diff --git a/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md b/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md index 2e5a4f65516d0fa..40b1474079e9a95 100644 --- a/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md +++ b/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md @@ -49,7 +49,7 @@ Let's start by taking a quick look at the key things we are dealing with, then w ### Cascade -Stylesheets [**cascade**](/en-US/docs/Web/CSS/Cascade) — at a very simple level, this means that the origin, the cascade layer, and the order of CSS rules matter. When two rules both have equal specificity, the one that is defined last in the stylesheet is the one that will be used. +Stylesheets [**cascade**](/en-US/docs/Web/CSS/Cascade) — at a very simple level, this means that the origin and the order of CSS rules matter. When two rules both have equal specificity, the one that is defined last in the stylesheet is the one that will be used. There are other concepts that have an effect, such as [cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers), but these are more advanced and we won't cover them in any detail here. In the below example, we have two rules that could apply to the `

` element. The `

` content ends up being colored blue. This is because both the rules are from the same source, have an identical element selector, and therefore, carry the same specificity, but the last one in the source order wins. @@ -479,18 +479,16 @@ Let's walk through this to see what's happening — try removing some of the pro 4. The 2nd element _does_ get the red background color, but no border. Why? Because of the `!important` flag in the second rule. Adding the `!important` flag after `border: none` means that this declaration will win over the `border` value in the previous rule, even though the ID selector has higher specificity. > [!NOTE] -> The only way to override an important declaration is to include another important declaration with the _same specificity_ later in the source order, or one with higher specificity, or to include an important declaration in a prior cascade layer (we haven't covered cascade layers yet). +> The only way to override an important declaration is to include another important declaration with the _same specificity_ later in the source order, or one with higher specificity. One situation in which you may have to use the `!important` flag is when you are working on a CMS where you can't edit the core CSS modules, and you really want to override an inline style or an important declaration that can't be overridden in any other way. But really, don't use it if you can avoid it. ## The effect of CSS location -Finally, it is important to note that the precedence of a CSS declaration depends on what stylesheet and cascade layer it is specified in. +Finally, it is important to note that the precedence of a CSS declaration depends on what stylesheet it is specified in. It is possible for users to set custom stylesheets to override the developer's styles. For example, a visually impaired user might want to set the font size on all web pages they visit to be double the normal size to allow for easier reading. -It is also possible to declare developer styles in cascade layers: you can make non-layered styles override styles declared in layers or you can make styles declared in later layers override styles from earlier declared layers. For example, as a developer you may not be able to edit a third-party stylesheet, but you can import the external stylesheet into a cascade layer so that all of your styles easily override the imported styles without worrying about third-party selector specificity. - ### Order of overriding declarations Conflicting declarations will be applied in the following order, with later ones overriding earlier ones: diff --git a/files/en-us/learn_web_development/core/styling_basics/values_and_units/index.md b/files/en-us/learn_web_development/core/styling_basics/values_and_units/index.md index 2c4b3fb81afe275..3beb6dabebec850 100644 --- a/files/en-us/learn_web_development/core/styling_basics/values_and_units/index.md +++ b/files/en-us/learn_web_development/core/styling_basics/values_and_units/index.md @@ -43,7 +43,7 @@ In this lesson, we will take a look at some of the most frequently used value ty In CSS specifications and on the property pages here on MDN you will be able to spot value types as they will be surrounded by angle brackets (`<`, `>`), such as [``](/en-US/docs/Web/CSS/color_value) or {{cssxref("length")}}. When you see the value type `` as valid for a particular property, that means you can use any valid color as a value for that property, as listed on the [``](/en-US/docs/Web/CSS/color_value) reference page. -Sometimes value types and properties can have the same, or similar names — For example, there is a {{cssxref("color")}} property and a [``](/en-US/docs/Web/CSS/color_value) data type. You can use the angle brackets to determine which one you are studying in each case. HTML elements also use angle brackets, but it should be clear from the context which one you are looking at. If yo are not sure, try searching for it on MDN. +Sometimes value types and properties can have the same, or similar names — For example, there is a {{cssxref("color")}} property and a [``](/en-US/docs/Web/CSS/color_value) data type. You can use the angle brackets to determine which one you are studying in each case. HTML elements also use angle brackets, but it should be clear from the context which one you are looking at. If you are not sure, try searching for it on MDN. > [!NOTE] > You'll see CSS value types referred to as _data types_. The terms are basically interchangeable — when you see something in CSS referred to as a data type, it is really just a fancy way of saying value type. The term _value_ refers to any particular expression supported by a value type that you choose to use. diff --git a/files/en-us/learn_web_development/core/version_control/index.md b/files/en-us/learn_web_development/core/version_control/index.md index 774f30545c5a9f1..8fb838923b3c330 100644 --- a/files/en-us/learn_web_development/core/version_control/index.md +++ b/files/en-us/learn_web_development/core/version_control/index.md @@ -8,33 +8,33 @@ page-type: learn-module {{PreviousMenu("Learn_web_development/Core/Design_for_developers", "Learn_web_development/Core")}} -Version control tools are an essential part of modern workflows, for backing up and collaborating on codebases. This module takes you through the essentials of version control using Git and GitHub. +Version control tools (often called **Version Control Systems**, or **VCS**) are an essential part of modern workflows, for backing up and collaborating on codebases. This module takes you through the essentials of version control using Git and GitHub. ## Overview -VCSes are essential for software development: +Version control tools are essential for software development: - It is rare that you will work on a project completely on your own, and as soon as you start working with other people you start to run the risk of conflicting with each other's work — this is when both of you try to update the same piece of code at the same time. You need to have some kind of mechanism in place to manage the occurrences, and help avoid loss of work as a result. - When working on a project on your own or with others, you'll want to be able to back up the code in a central place, so it is not lost if your computer breaks. - You will also want to be able to roll back to earlier versions if a problem is later discovered. You might have started doing this in your own work by creating different versions of the same file, e.g. `myCode.js`, `myCode_v2.js`, `myCode_v3.js`, `myCode_final.js`, `myCode_really_really_final.js`, etc., but this is really error-prone and unreliable. - Different team members will commonly want to create their own separate versions of the code (called **branches** in Git), work on a new feature in that version, and then get it merged in a controlled manner (in GitHub we use **pull requests**) with the master version when they are done with it. -VCSes provide tools to meet the above needs. [Git](https://git-scm.com/) is an example of a VCS, and [GitHub](https://github.com/) is a website + infrastructure that provides a Git server plus a number of really useful tools for working with git repositories individually or in teams, such as reporting issues with the code, reviewing tools, project management features such as assigning tasks and task statuses, and more. +Version control tools meet the above needs. [Git](https://git-scm.com/) is an example of a version control tool, and [GitHub](https://github.com/) is a website + infrastructure that provides a Git server plus a number of really useful tools for working with git repositories individually or in teams, such as reporting issues with the code, reviewing tools, project management features such as assigning tasks and task statuses, and more. > [!NOTE] -> Git is actually a _distributed_ version control system, meaning that a complete copy of the repository containing the codebase is made on your computer (and everyone else's). You make changes to your own copy and then push those changes back up to the server, where an administrator will decide whether to merge your changes with the master copy. +> Git is actually a _distributed_ version control tools, meaning that a complete copy of the repository containing the codebase is made on your computer (and everyone else's). You make changes to your own copy and then push those changes back up to the server, where an administrator will decide whether to merge your changes with the master copy. ## Prerequisites To use Git and GitHub, you need: - A desktop computer with Git installed on it (see the [Git downloads page](https://git-scm.com/downloads)). -- A tool to use Git. Depending on how you like to work, you could use a [Git GUI client](https://git-scm.com/downloads/guis/) (we'd recommend GitHub Desktop, SourceTree or Git Kraken) or just stick to using a terminal window. In fact, it is probably useful for you to get to know at least the basics of git terminal commands, even if you intend to use a GUI. +- A tool to use Git. Depending on how you like to work, you could use a [Git GUI client](https://git-scm.com/downloads/guis/) (we'd recommend [GitHub Desktop](https://desktop.github.com/download/), [SourceTree](https://www.sourcetreeapp.com/) or [Git Kraken](https://www.gitkraken.com/)) or just stick to using a terminal window. In fact, it is probably useful for you to get to know at least the basics of git terminal commands, even if you intend to use a GUI. - A [GitHub account](https://github.com/signup). If you haven't already got one, sign up now using the provided link. -In terms of prerequisite knowledge, you don't need to know anything about web development, Git/GitHub, or VCSes to start this module. However, it is recommended that you know some coding so that you have reasonable computer literacy, and some code to store in your repositories! +In terms of prerequisite knowledge, you don't need to know anything about web development, Git/GitHub, or version control to start this module. However, it is recommended that you know some coding so that you have reasonable computer literacy, and some code to store in your repositories! -It is also preferable that you have some basic terminal knowledge, so for example moving between directories, creating files, and modifying the system `PATH`. +It is also preferable that you have some basic terminal knowledge, so for example moving between directories and creating files. You can find out all the basics in our [Command line crash course](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line). > [!NOTE] > GitHub is not the only site/toolset you can use with Git. There are other alternatives such as [GitLab](https://about.gitlab.com/) that you could try, and you could also try setting your own Git server up and using it instead of GitHub. We've only stuck with GitHub in this course to provide a single way that works. @@ -61,7 +61,7 @@ Note that the links below take you to resources on external sites. Eventually, w - [Hello, World (from GitHub)](https://docs.github.com/en/get-started/start-your-journey/hello-world) - : This is a good place to start — this practical guide gets you to jump right into using GitHub, learning the basics of Git such as creating repositories and branches, making commits, and opening and merging pull requests. - [Git Handbook (from GitHub)](https://docs.github.com/en/get-started/using-git/about-git) - - : This Git Handbook goes into a little more depth, explaining what a VCS is, what a repository is, how the basic GitHub model works, Git commands and examples, and more. + - : This Git Handbook goes into a little more depth, explaining what a version control tool is, what a repository is, how the basic GitHub model works, Git commands and examples, and more. - [Forking Projects (from GitHub)](https://docs.github.com/en/get-started/exploring-projects-on-github/contributing-to-a-project) - : Forking projects is essential when you want to contribute to someone else's code. This guide explains how. - [About Pull Requests (from GitHub)](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests) diff --git a/files/en-us/learn_web_development/extensions/forms/form_validation/index.md b/files/en-us/learn_web_development/extensions/forms/form_validation/index.md index 661b127e80a3f09..980e67017fc1fd5 100644 --- a/files/en-us/learn_web_development/extensions/forms/form_validation/index.md +++ b/files/en-us/learn_web_development/extensions/forms/form_validation/index.md @@ -714,9 +714,9 @@ The HTML is almost the same; we just removed the HTML validation features.

+ +

@@ -740,7 +740,7 @@ p * { display: block; } -input#mail { +input { appearance: none; width: 100%; border: 1px solid #333; @@ -753,20 +753,20 @@ input#mail { } /* invalid fields */ -input#mail.invalid { - border-color: #900; +input.invalid { + border: 2px solid #900; background-color: #fdd; } input:focus.invalid { outline: none; + /* make sure keyboard-only users see a change when focusing */ + border-style: dashed; } /* error messages */ -.error { +#error { width: 100%; - padding: 0; - font-size: 80%; color: white; background-color: #900; @@ -774,8 +774,8 @@ input:focus.invalid { box-sizing: border-box; } -.error.active { - padding: 0.3em; +.active { + padding: 0.3rem; } ``` @@ -784,54 +784,69 @@ The big changes are in the JavaScript code, which needs to do much more heavy li ```js const form = document.querySelector("form"); const email = document.getElementById("mail"); -const error = email.nextElementSibling; +const error = document.getElementById("error"); -// As per the HTML Specification +// Regular expression for email validation as per HTML specification const emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; -// Now we can rebuild our validation constraint -// Because we do not rely on CSS pseudo-class, we have to -// explicitly set the valid/invalid class on our email field -window.addEventListener("load", () => { - // Here, we test if the field is empty (remember, the field is not required) - // If it is not, we check if its content is a well-formed email address. - const isValid = email.value.length === 0 || emailRegExp.test(email.value); +// Check if the email is valid +const isValidEmail = () => { + const validity = email.value.length !== 0 && emailRegExp.test(email.value); + return validity; +}; + +// Update email input class based on validity +const setEmailClass = (isValid) => { email.className = isValid ? "valid" : "invalid"; -}); +}; -// This defines what happens when the user types in the field -email.addEventListener("input", () => { - const isValid = email.value.length === 0 || emailRegExp.test(email.value); - if (isValid) { - email.className = "valid"; +// Update error message and visibility +const updateError = (isValidInput) => { + if (isValidInput) { error.textContent = ""; - error.className = "error"; + error.removeAttribute("class"); } else { - email.className = "invalid"; + error.textContent = "I expect an email, darling!"; + error.setAttribute("class", "active"); } -}); - -// This defines what happens when the user tries to submit the data -form.addEventListener("submit", (event) => { +}; + +// Initialize email validity on page load +const initializeValidation = () => { + const emailInput = isValidEmail(); + setEmailClass(emailInput); +}; + +// Handle input event to update email validity +const handleInput = () => { + const emailInput = isValidEmail(); + setEmailClass(emailInput); + updateError(emailInput); +}; + +// Handle form submission to show error if email is invalid +const handleSubmit = (event) => { event.preventDefault(); - const isValid = email.value.length === 0 || emailRegExp.test(email.value); - if (!isValid) { - email.className = "invalid"; - error.textContent = "I expect an email, darling!"; - error.className = "error active"; - } else { - email.className = "valid"; - error.textContent = ""; - error.className = "error"; - } -}); + const emailInput = isValidEmail(); + setEmailClass(emailInput); + updateError(emailInput); +}; + +// Now we can rebuild our validation constraint +// Because we do not rely on CSS pseudo-class, we have to +// explicitly set the valid/invalid class on our email field +window.addEventListener("load", initializeValidation); +// This defines what happens when the user types in the field +email.addEventListener("input", handleInput); +// This defines what happens when the user tries to submit the data +form.addEventListener("submit", handleSubmit); ``` The result looks like this: -{{EmbedLiveSample("An_example_that_doesnt_use_the_constraint_validation_API", "100%", 130)}} +{{EmbedLiveSample("An_example_that_doesnt_use_the_constraint_validation_API", "100%", 150)}} As you can see, it's not that hard to build a validation system on your own. The difficult part is to make it generic enough to use both cross-platform and on any form you might create. There are many libraries available to perform form validation, such as [Validate.js](https://rickharrison.github.io/validate.js/). diff --git a/files/en-us/learn_web_development/extensions/forms/ui_pseudo-classes/index.md b/files/en-us/learn_web_development/extensions/forms/ui_pseudo-classes/index.md index cd5b27db7814b69..d99a25a0c77d2c0 100644 --- a/files/en-us/learn_web_development/extensions/forms/ui_pseudo-classes/index.md +++ b/files/en-us/learn_web_development/extensions/forms/ui_pseudo-classes/index.md @@ -118,7 +118,7 @@ In previous articles, we've seen the usage of [generated content](/en-US/docs/We The idea is that we can use the [`::before`](/en-US/docs/Web/CSS/::before) and [`::after`](/en-US/docs/Web/CSS/::after) pseudo-elements along with the [`content`](/en-US/docs/Web/CSS/content) property to make a chunk of content appear before or after the affected element. The chunk of content is not added to the DOM, so it may be invisible to some screen readers. Because it is a pseudo-element, it can be targeted with styles in the same way that any actual DOM node can. -This is really useful when you want to add a visual indicator to an element, such as a label or icon, when alternative indicators are also available to ensure accessibility for all users. For example, in our [custom radio buttons example](https://mdn.github.io/learning-area/html/forms/styling-examples/radios-styled.html), we use generated content to handle the placement and animation of the a custom radio button's inner circle when a radio button is selected: +This is really useful when you want to add a visual indicator to an element, such as a label or icon, when alternative indicators are also available to ensure accessibility for all users. For example, in our [custom radio buttons example](https://mdn.github.io/learning-area/html/forms/styling-examples/radios-styled.html), we use generated content to handle the placement and animation of the custom radio button's inner circle when a radio button is selected: ```css input[type="radio"]::before { diff --git a/files/en-us/learn_web_development/extensions/server-side/django/development_environment/index.md b/files/en-us/learn_web_development/extensions/server-side/django/development_environment/index.md index 94392fb9ee045e5..0436dcd9942771e 100644 --- a/files/en-us/learn_web_development/extensions/server-side/django/development_environment/index.md +++ b/files/en-us/learn_web_development/extensions/server-side/django/development_environment/index.md @@ -426,8 +426,7 @@ In addition to branches, it is possible to create `tags` on any branch and later ### Create an account and repository on GitHub -First we will create a free account on GitHub. -With a free account you can't create private repos, but you can create as many _public_ repositories ("repos") as you like. +First we will create an account on GitHub (this is free). Then we create and configure a repository named "django_local_library" for storing the [Local library website](/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website) as we evolve it in the rest of this tutorial. The steps are: diff --git a/files/en-us/learn_web_development/getting_started/environment_setup/browsing_the_web/index.md b/files/en-us/learn_web_development/getting_started/environment_setup/browsing_the_web/index.md index 10798da468ff001..62c37f3bc54d5a3 100644 --- a/files/en-us/learn_web_development/getting_started/environment_setup/browsing_the_web/index.md +++ b/files/en-us/learn_web_development/getting_started/environment_setup/browsing_the_web/index.md @@ -8,13 +8,12 @@ page-type: tutorial-chapter {{PreviousMenuNext("Learn_web_development/Getting_started/Environment_setup/Installing_software", "Learn_web_development/Getting_started/Environment_setup/Code_editors", "Learn_web_development/Getting_started/Environment_setup")}} -> [!NOTE] -> The content in this article is currently incomplete, sorry about that! We are working hard to improve the MDN Learn Web Development section, and we will have places marked as incomplete ("TODO") finished soon. - -By this point in the module, you should have at least two web browsers installed on your computer. This article goes a little deeper into using browsers, looking at how a web browser works, the difference between some of the common items you'll interact with, and how to search for information. +By this point in the module, you should have multiple modern web browsers installed on your computer or other available devices. This article goes deeper into using browsers, looking at how a web browser works, the difference between some of the everyday things you'll interact with, and how to search for information. > [!NOTE] -> If you don't have any browsers installed beyond the default one that came with your device, get some more installed. See [Installing modern web browsers](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software#installing_modern_web_browsers). +> If you don't have any browsers installed beyond the default ones that came with your devices, install some others. See [Modern web browsers](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software#modern_web_browsers) for more information. + +As with any area of knowledge, the web comes with a lot of jargon and technical terminology. Don't worry: We won't overwhelm you with all of it upfront (you can check the [glossary](/en-US/docs/Glossary) if you're curious). However, there are some basic terms you need to understand from the beginning since you'll hear these expressions all the time. We introduce some important terms below. @@ -28,8 +27,8 @@ By this point in the module, you should have at least two web browsers installed @@ -37,26 +36,18 @@ By this point in the module, you should have at least two web browsers installed
Learning outcomes:
    -
  • How a web browser works at a basic level
  • The difference between a web browser, a website, and a search engine.
    • +
  • How a web browser works at a basic level.
  • Searching for information.
-## How the web works: the basics - -TODO - ## The difference between web page, website, web server, and search engine -In this section, we describe various web-related concepts: web pages, websites, web servers, and search engines. These terms are often confused by newcomers to the web or are incorrectly used. Let's make sure you know what they each mean! - -As with any area of knowledge, the web comes with a lot of jargon. Don't worry. We won't overwhelm you with all of it (we have a [glossary](/en-US/docs/Glossary) if you're curious). However, there are a few basic terms you need to understand at the outset since you'll hear these expressions all the time as you read on. It's easy to mix these terms since they refer to related but different functionalities. You'll sometimes see these terms misused in news reports and elsewhere, so getting them mixed up is understandable. - -We'll cover these terms and technologies in more detail as we explore further, but these quick definitions will be a great start for you: +We will start by describing various web-related concepts: web pages, websites, web servers, and search engines. These terms are often confused by newcomers to the web or are incorrectly used. Let's make sure you know what they each mean! Let's start with some definitions: -- web page - - : A document which can be displayed in a web browser such as Firefox, Google Chrome, Opera, Microsoft Edge, or Apple Safari. These are also often called just "pages." -- website - - : A collection of web pages which are grouped together and usually connected together in various ways. Often called a "website" or a "site." -- web server +- **Web page** + - : A document that can be displayed in a web {{Glossary("browser")}}. These are also often called just "pages". Such documents are written in the {{Glossary("HTML")}} language (which we look at in more detail later on). +- **Website** + - : A collection of web pages grouped together into a single resourse, with links connecting them together. Often called a "site". +- **Web server** - : A computer that hosts a website on the Internet. -- search engine - - : A web service that helps you find other web pages, such as Google, Bing, Yahoo, or DuckDuckGo. Search engines are normally accessed through a web browser (e.g. you can perform search engine searches directly in the address bar of Firefox, Chrome, etc.) or through a web page (e.g. [bing.com](https://www.bing.com/) or [duckduckgo.com](https://duckduckgo.com/)). +- **Search engine** + - : A web service that helps you find other web pages, such as Google, Bing, Yahoo, or DuckDuckGo. Search engines are normally accessed through a web browser (for example, you can perform search engine searches directly in the address bar of Firefox, Chrome, etc.) or through a web page (for example, [bing.com](https://www.bing.com/) or [duckduckgo.com](https://duckduckgo.com/)). Let's look at an analogy — a public library. This is what you would generally do when visiting a library: @@ -64,41 +55,56 @@ Let's look at an analogy — a public library. This is what you would generally 2. Make a note of the catalog number of the book. 3. Go to the particular section containing the book, find the right catalog number, and get the book. -Let's compare the library with a web server: +Let's compare a public library with the web: - The library is like a web server. It has several sections, which is similar to a web server hosting multiple websites. - The different sections (science, math, history, etc.) in the library are like websites. Each section is like a unique website (two sections do not contain the same books). -- The books in each section are like webpages. One website may have several webpages, e.g., the Science section (the website) will have books on heat, sound, thermodynamics, statics, etc. (the webpages). Webpages can each be found at a unique location (URL). +- The books in each section are like web pages. One website may have several web pages, for example, the Science section (the website) will have books on heat, sound, thermodynamics, statics, etc. - The search index is like the search engine. Each book has its own unique location in the library (two books cannot be kept at the same place) which is specified by the catalog number. +Let's now take the time to look at each term in a little bit more detail. + ### Web page -A **web page** is a simple document displayable by a {{Glossary("browser")}}. Such documents are written in the {{Glossary("HTML")}} language (which we look into in more detail in [other articles](/en-US/docs/Web/HTML)). A web page can embed a variety of different types of resources such as: +A **web page** is a simple document displayable by a browser. A web page can embed a variety of different types of resources such as: -- _style information_ — controlling a page's look-and-feel -- _scripts_ — which add interactivity to the page -- _media_ — images, sounds, and videos. +- _Style information_ — controlling a page's look-and-feel. +- _Scripts_ — which add interactivity to the page. +- _Media_ — images, sounds, and videos. > [!NOTE] -> Browsers can also display other documents such as {{Glossary("PDF")}} files or images, but the term **web page** specifically refers to HTML documents. Otherwise, we only use the term **document**. +> Browsers can also display other documents such as {{Glossary("PDF")}} files and other resources such as images or videos, but the term **web page** specifically refers to HTML documents. -All web pages available on the web are reachable through a unique address. To access a page, just type its address in your browser address bar: +All web pages can each be found at a unique location (web address, also called a [URL](/en-US/docs/Glossary/URL)). To access a page, just type its address in your browser address bar: ![Example of a web page address in the browser address bar](web-page.jpg) +> [!CALLOUT] +> +> **Try it out** +> +> Try loading one of your favorite websites in a browser now. + ### Website -A _website_ is a collection of linked web pages (plus their associated resources) that share a unique domain name. Each web page of a given website provides explicit links—most of the time in the form of clickable portions of text—that allow the user to move from one page of the website to another. +A _website_ is a collection of linked web pages (plus their associated resources) that share a unique [domain name](/en-US/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_domain_name). Each web page of a given website provides explicit links—most of the time in the form of clickable portions of text—that allow the user to move from one page of the website to another. -To access a website, type its domain name in your browser address bar, and the browser will display the website's main web page, or _homepage_ (casually referred as "the home"): +When you load your favorite website in a browser, it tends to first display the website's main web page, or _homepage_ (casually referred to as "home"): ![Example of a website domain name in the browser address bar](web-site.jpg) -Note that it is also possible to have a _single-page website_: a site that consists of a single web page which is dynamically updated with new content when needed. +> [!CALLOUT] +> +> **Try it out** +> +> Try clicking some menu items or links to look at some different pages on your favorite website. + +> [!NOTE] +> It is also possible to have a [_single-page app_](/en-US/docs/Glossary/SPA): a website that consists of a single web page that is dynamically updated with new content when needed. ### Web server -A _web server_ is a computer hosting one or more _websites_. "Hosting" means that all the _web pages_ and their supporting files are available on that computer. The _web server_ will send any _web page_ from the _website_ it is hosting to any user's browser, per user request. +A _web server_ is a computer hosting one or more _websites_. "Hosting" means that all the _web pages_ and their associated files are available on that computer. The _web server_ will send web page files it is hosting to a user's browser when they attempt to load it. Don't confuse _websites_ and _web servers_. For example, if you hear someone say, "My website is not responding", it actually means that the _web server_ is not responding and therefore the _website_ is not available. More importantly, since a web server can host multiple websites, the term _web server_ is never used to designate a website, as it could cause great confusion. In our previous example, if we said, "My web server is not responding", it means that multiple websites on that web server are not available. @@ -106,16 +112,106 @@ Don't confuse _websites_ and _web servers_. For example, if you hear someone say Search engines are a common source of confusion on the web. A search engine is a special kind of website that helps users find web pages from _other_ websites. -There are plenty out there: [Google](https://www.google.com/), [Bing](https://www.bing.com/), [Yandex](https://yandex.com/), [DuckDuckGo](https://duckduckgo.com/), and many more. Some are generic, some are specialized about certain topics. +There are plenty out there: [Google](https://www.google.com/), [Bing](https://www.bing.com/), [Yandex](https://yandex.com/), [DuckDuckGo](https://duckduckgo.com/), and many more. Some are generic, some are specialized around certain topics. + +Many beginners on the web confuse search engines and browsers. Let's make it clear: A _browser_ is a piece of software that retrieves and displays web pages; a _search engine_ is a website that helps people find web pages from other websites. The confusion arises because, the first time someone launches a browser, the browser often displays a search engine's homepage or a search box allowing them to search for a term using that search engine. Most browsers also allow their users to use a search engine by typing search terms directly into the browser address bar. -Many beginners on the web confuse search engines and browsers. Let's make it clear: A **_browser_** is a piece of software that retrieves and displays web pages; a **_search engine_** is a website that helps people find web pages from other websites. The confusion arises because, the first time someone launches a browser, the browser displays a search engine's homepage. This makes sense, because, obviously, the first thing you want to do with a browser is to find a web page to display. Don't confuse the infrastructure (e.g., the browser) with the service (e.g., the search engine). The distinction will help you quite a bit, but even some professionals speak loosely, so don't feel anxious about it. +This all makes sense because the first thing people tend to want to do with a browser is find a web page to display. Don't confuse the software (the browser) with the service (the search engine). Here is an instance of Firefox showing a Google search box as its default startup page: ![Example of Firefox nightly displaying a custom Google page as default](search-engine.jpg) +> [!CALLOUT] +> +> **Try it out** +> +> Do a search in a search engine by: +> +> - Going to a search engine homepage and entering a search term. +> - Entering a search term into the browser address bar. + +## How the web works: the basics + +In many parts of the world, the web has become just as essential a tool to our everyday lives as cutlery, bicycles and cars, or toothbrushes. If that sounds unrealistic to you, just think about how often you use a website or mobile phone app each day! Even if you are not typing a web address into a web browser to access content or services, the chances are that the app you are making use of is probably using web technology behind the scenes to grab data to present to you. + +When you access the web, quite a lot happens between your first interaction (for example, typing a web address (URL) into a browser and pressing Enter/Return) and the result of your action being presented to you (for example, the website appearing in your web browser): + +1. The web browser requests the resource (for example, a web page, some data, or an image or video) you want to access from the web server it is stored on. Such requests (and the resulting responses) are made using a technology called [HTTP](/en-US/docs/Glossary/HTTP) (Hypertext Transfer Protocol), which uses a language of verbs (such as **GET**) to describe what should happen. +2. If the request is successful, the web server sends an HTTP response back to the web browser containing the requested resource. +3. In some cases, the requested resource will then fire off more HTTP requests, which will result in more responses. For example: + 1. When a website is loaded, initially the main index HTML file of the site's home page is requested. + 2. When that file is received by the browser, it will start to parse it, and will probably find instructions to make more requests. As discussed above, these might be for files to embed such as images, style information, scripts, and so on. +4. When all of the resources have been requested, the web browser parses and renders them as required, before displaying the result to the user. + +This description of how the web works is heavily simplified, but it is all you really need to know at this point. You will find a more detailed account of how web pages are requested and rendered by a web browser in our [Web standards](/en-US/docs/Learn_web_development/Getting_started/Web_standards) module, slightly later on. + +For now, try opening a web browser and loading up a couple of your favorite sites, thinking about the above steps as you do so. + ## Searching for information -TODO +As a web developer, you will spend a lot of time searching for information, from syntax you can't remember to solutions to specific problems. It is therefore a good idea to learn how to effectively search the web. + +If you are looking for general information about a specific web technology feature, you should type the name of the feature into the MDN search box. For example, try typing `box model`, `fetch()` or `video element` into the the search box and see what comes up. If you don't find the information you need, try expanding your search — try your search term in a search engine. + +If you are looking for a solution to a specific problem, such as `how to print out the fibonacci sequence with JavaScript` or `how to calculate whether a number is a prime number with JavaScript`, it is a good idea to search on a website such as [StackOverflow](https://stackoverflow.com), which is a community dedicated to answering programming problems. Again, try using a general search engine if a specific site doesn't give you a helpful answer. + +> [!CALLOUT] +> +> **Try it out** +> +> Try some searches, as indicated above: +> +> - Begin by searching for the exact terms we've included above. +> - Next, move on to searching for some topics of your own that you'd like to learn about. Try using more and less specific searches and different related terms to see what works best. +> - See our [Search tips](#search_tips) for more things to try. + +### Using AI + +AI-generated search results are a very popular way of receiving information. They basically provide a superpowered search: they do a lot of searching in the background, before compiling the results into a single, easily-digestible answer. Common choices are [ChatGPT](https://chatgpt.com), [Google Gemini](https://gemini.google.com/app), and [Microsoft Copilot](https://copilot.microsoft.com), accessed either directly in a chat format, or via AI-powered in-app help or automation systems. + +When learning to code, AI chat prompts can be useful in a variety of ways: + +- Doing conventional searches, like the examples above. +- Figuring out bugs in a block of code. If you are getting frustrated because your code is not working, you can paste your code into an AI chat prompt, preceeded by a question such as `Where is the mistake in this code?` +- Generating an optimized version of a specific block of code. This can be useful when you've written a block of code that works, but you want to find out how it could be done more efficiently, or in a more robust way that solves more use cases. +- Providing advice on how to do something. For example, if you don't just want to know where the bug is in a block of code, but instead you want advice on what strategy to use to debug it. + +> [!CALLOUT] +> +> **Try it out** +> +> Try using a couple of AI tools to do some searches. + +### A cautionary tale + +In truth, AI can do so much that you may start to wonder why you need to learn to code. + +But wait! The following is important: **You still need to understand what you are trying to do at a high level, what the code is doing, and where each piece of code needs to be used**. If you don't, you won't be very useful when trying to solve real-world problems. This means that you still need to learn to code. AI can be a really useful tool to help you find answers more quickly, but if you just type every question you are asked into an AI prompt, you won't understand how anything works. + +In addition: + +- AI tools present their answers in a confident, authoritative voice, but they can often be misleading or just plain wrong. Some of the errors they make can be very subtle. They don't have any innate intelligence of their own — they are basically advanced pattern matching tools. AI tools compile their answers from other sources out there, so will hoover up wrong information as well as correct information. Even two correct sources can be combined to create an answer that is incorrect. +- Newer information may not be available, or answers may be skewed to older and more prevalent documentation, so "how to do X in JS" might give you outdated guidance. + +As a result, you need to be careful to check the answers they give you, and not just trust everything without question. + +**When you are learning, spend time trying to solve the problem yourself before searching for an answer, whether you are using AI or a conventional search engine. It will make you a better developer.** + +### Search tips + +- You should include the language you are using in the search term, as shown in the examples above. If you just typed in `how to print out the fibonacci sequence`, you would likely end up with several solutions in Python, C++, Java, Ruby, or other languages — not quite as helpful when you are trying to learn JavaScript! +- When you find a useful answer, bookmark or make a copy of it somewhere so you can find it again later. You'll be amazed how many times you run into the same problem. +- If your code is returning a specific error message, try entering the error into a search engine or AI prompt. Other people will probably have already tackled the same error in the past and recorded solutions publicly somewhere. +- If possible, stick with recommended sites like MDN and [StackOverflow](https://stackoverflow.com). +- There are many advanced search techniques you can use in search engines that will give you better results than just typing a plain search term. Typing in a plain search term such as `ant fish cheese` will return results that contain any combination of those words. However, most search engines support variations of the following formats: + + - Typing in `"ant fish cheese"` (with the quotes) will only return results that contain that exact phrase. + - `"ant cheese" -fish` will return results that contain `ant` and/or `cheese` but not `fish`. + - `ant OR cheese` will only return results with one term or the other, not both. From our testing, this one only seemed to work effectively in Google. + - `intitle:cheese` will only return results that have "cheese" in the main title of the page. + + > [!NOTE] + > There are many other techniques you can use in various different search engines. Try seeing what others you can find — some useful resources are [Refine Google Searches](https://support.google.com/websearch/answer/2466433?hl=en), [How to use advanced syntax on DuckDuckGo Search](https://duckduckgo.com/duckduckgo-help-pages/results/syntax/), and [Microsoft: Advanced search options](https://support.microsoft.com/en-us/topic/advanced-search-options-b92e25f1-0085-4271-bdf9-14aaea720930). {{PreviousMenuNext("Learn_web_development/Getting_started/Environment_setup/Installing_software", "Learn_web_development/Getting_started/Environment_setup/Code_editors", "Learn_web_development/Getting_started/Environment_setup")}} diff --git a/files/en-us/learn_web_development/getting_started/environment_setup/code_editors/index.md b/files/en-us/learn_web_development/getting_started/environment_setup/code_editors/index.md index 14ca4772b0e78f9..5996e7a997b65a2 100644 --- a/files/en-us/learn_web_development/getting_started/environment_setup/code_editors/index.md +++ b/files/en-us/learn_web_development/getting_started/environment_setup/code_editors/index.md @@ -8,9 +8,6 @@ page-type: tutorial-chapter {{PreviousMenuNext("Learn_web_development/Getting_started/Environment_setup/Browsing_the_web", "Learn_web_development/Getting_started/Environment_setup/Dealing_with_files", "Learn_web_development/Getting_started/Environment_setup")}} -> [!NOTE] -> The content in this article is currently incomplete, sorry about that! We are working hard to improve the MDN Learn Web Development section, and we will have places marked as incomplete ("TODO") finished soon. - Previously, we told you to install a code editor, as you'll need one to work through this pathway. In this article we look at code editors in more detail, giving you an idea of what they can do for you. @@ -27,7 +24,7 @@ Previously, we told you to install a code editor, as you'll need one to work thr
  • What code editors are available and what is suitable for your purposes.
  • What a basic code editor can do.
    • -
  • What code editor extensions can do.
    • +
  • What code editor extensions can do and how to install one.
@@ -36,29 +33,161 @@ Previously, we told you to install a code editor, as you'll need one to work thr ## What code editors are available? -Binary file editors like Microsoft Word are unsuitable for editing code. You need something that cleanly handles and outputs plain text. +Before starting to code, you may have had some experience working on text documents in a program like Microsoft Word. You might also be wondering whether you can work with code in these same programs. Unfortunately, the answer is "not really": -Default OS plain text editors can be OK, for example, TextEdit on macOS, or Notepad on Windows, but they also have limitations. +- Programs like Microsoft Word are **Binary file** editors; their files contain a non-text format that can only be understood by those programs. Website source code, on the other hand, is stored as plain text. +- Word _can_ open and edit plain text files, but it doesn't handle them very well. It doesn't have a featureset designed for working with code — it is for writing documents such as letters and reports. You need a program that is designed to cleanly handle and output plain text, and work with code. -You are better off with a fully-fledged code editor like [Visual Studio Code](https://code.visualstudio.com/) (multiplatform, free), Sublime Text (multiplatform, not free) or Notepad++ (Windows, free). We would recommend Visual Studio Code, as it is the editor we mostly use. If you want to use another code editor, that's fine. It won't work exactly the same way as Visual Studio Code, but many of the core features will probably be similar. +You probably already have a plain text editor on your computer. By default, Windows includes [Notepad](https://en.wikipedia.org/wiki/Microsoft_Notepad) and macOS comes with [TextEdit](https://en.wikipedia.org/wiki/TextEdit). Linux distros vary; the Ubuntu 22.04 LTS release comes with [GNOME Text Editor](https://en.wikipedia.org/wiki/GNOME_Text_Editor) by default. Default OS plain text editors can be OK, but they also have a limited feature set. -Integrated Development Environments (IDEs) such as Visual Studio (Windows, not free), NetBeans (multiplatform, free), and WebStorm (multiplatform, not free) tend to have more features than simple code editors but tend to be more complex than what you need at this stage in your learning journey. +You are better off with a fully-fledged code editor like [Visual Studio Code](https://code.visualstudio.com/) (multiplatform, free), [Sublime Text](https://www.sublimetext.com/) (multiplatform, not free), or [Notepad++](https://notepad-plus-plus.org/) (Windows, free). + +We would recommend Visual Studio Code (VS Code), as it is the editor we mostly use. If you do not already have VS Code (or another code editor) installed, you should [install it before proceeding](https://code.visualstudio.com/). + +> [!NOTE] +> Integrated Development Environments (IDEs) such as [NetBeans](https://netbeans.apache.org/front/main/index.html) (multiplatform, free), and [WebStorm](https://www.jetbrains.com/webstorm/) (multiplatform, not free) tend to have more features than simple code editors but tend to be more complex than what you need at this stage in your learning journey. ## Basic code editor functionality -- Open and edit code files. -- Syntax highlighting. -- Auto-indentation and other simple syntax fixes. -- Code completion and help. -- Find and replace, often with the ability to use regular expressions to make the functionality more powerful (e.g. keep a specific string beginning and end, but replace the substring in between). -- Integration with version control is often provided (see the [Version control module](/en-US/docs/Learn_web_development/Core/Version_control)). +In this section, we'll look at some of the most significant functionality that you will find in code editors, describing how they can help you with your coding work. + +> [!NOTE] +> The sections below only scratch the surface of what a code editor can do. For a more complete feature list, see the [Visual Studio Code documentation](https://code.visualstudio.com/docs) (or search the web for your chosen code editor's documentation if you are using something different). + +> [!NOTE] +> If you are a keyboard-only user, be aware that VS Code has a powerful set of keyboard shortcuts. See the VS Code [Keyboard Shortcuts Reference](https://code.visualstudio.com/docs/getstarted/keybindings#_keyboard-shortcuts-reference). + +### Opening and editing files + +This may seem like an obvious point, but installing a code editor is useful because it will give you a single app that will open all code files you may want to use through your development work. There is nothing more annoying than double-clicking a file on your computer and having it open in a random, unrelated app, or having your operating system tell you it doesn't recognize that file. + +This should all happen automatically when installing VS Code, but if you still have problems with certain file types, you can manually set them to open via that app. This can vary depending on your operating system, so to find out, go to your favorite search engine and search for "choose what application opens a file type <OS-name-and-number>" — for example, "choose what application opens a file type windows 11" if you are on Windows 11. + +You can find a lot more information about opening and editing files and folders in our next article. + +### Syntax highlighting + +Code editors like VS Code provide syntax highlighting — that is, recognized code features have different parts shown in different colors. This makes code much easier to read than coloring it all in one color. Let's use the following JavaScript function as an example: + +```js +function createGreeting(name) { + const greeting = `Hello, ${name}!`; + return greeting; +} +``` + +You don't need to understand what this code is doing for now, but you can already see what syntax highlighting looks like above. Yes, we also provide syntax highlighting on MDN! + +Let's try an exercise in VS Code: + +1. Copy the above code example to your clipboard (MDN code blocks have a copy icon in the top-right corner that you can press to do this). +2. Open VS Code and create a new file by choosing _File_ > _New File..._ +3. Inside the new file, click the _Select a language_ text, then choose _JavaScript_ from the drop-down menu that opens up. +4. Paste the code into the new file to see what VS Code's JavaScript syntax highlighting looks like. + +VS Code provides other syntax features too. For example: + +- You'll see a thin vertical line traveling down from the `function` keyword to the closing curly brace (`}`) — these lines are used to mark different [indentation](https://en.wikipedia.org/wiki/Indentation_style) levels in code, making it easier to identify where blocks begin and end. +- Also try moving the flashing text cursor over the opening or closing curly brace (`{` or `}`) — you'll see both of them highlighted. This also helps identify the start and end of blocks, and is useful when are trying to find where you are missing a character when you have a more complicated structure with lots of nested blocks. This highlighting also works with other delimiters such as parentheses (`(` and `)`) and square brackets (`[` and `]`). + +### Code completion/suggestion + +When you type code into a code editor, it will often be able to suggest what you should type next, and fill in some boilerplate for you (which means standard code that will always be the same). + +Try this out now in VS Code: + +1. Go back to the JavaScript file you created in the previous section. +2. Go to the bottom of the file and press Enter/Return a couple of times to make sure you are on a new line. +3. Start typing in "function" — a list of options should appear in a list to the right of your text. +4. Select the _function_ option with _Function Statement_ written to the right of it. It will fill in the following code for you: + + ```js-nolint + function name(params) { + + } + ``` + +5. Click inside the function, on the blank line between the two curly braces. Start typing in "document" and you'll again be given a list of options. Select the first one. This is a reference to the {{domxref("Document")}} object (again, don't worry about what this means for now). +6. Right after `document`, type a dot (`.`) — you will again get a list of options, this time containing all of the properties and methods available on the `document` object! + +That's enough for now. Let's move on. + +### Debugging help + +Code editors can't automatically fix all of your code problems, but they can certainly help you to find typos and other simple errors. Let's look at a couple of examples. + +1. Go back to your JavaScript file and delete all the code you currently have in there. Replace it with the following: + + ```js-nolint example-bad + function createGreeting(name) { + const greeting = `Hello, ${Name}!`; + return greeting; + } + + const helloChris = createGreeting("Chris); + + console.log(helloChris; + ``` + +2. The little cross icon to the right of the above code listing is MDN's way of indicating a bad code example, and quite rightly — there are three errors in the above code! Have a look at VS Code's highlighting to see if you can spot how it has highlighted the errors, then we'll walk through and fix them together. +3. The first error is that we've used `name` on the first line, but `Name` on the second line to refer to the same variable. This is a problem because JavaScript is case sensitive and therefore regards these as two different names. VS Code has highlighted this in two different ways — by coloring `name` dark gray to indicate that the value is declared but never used (often a good indication that you've made a typo somewhere), and by putting three dots underneath `Name` to indicate that it has a suggestion for you on how to improve the code (in this case by asking if you meant to write `name`). To fix this error, change `Name` to `name`. + > [!NOTE] + > You can hover over each of the indicated highlights with the mouse pointer to get more information. +4. The second error is in the sixth line, where we write `"Chris`. In JavaScript, a piece of text (known as a **string**) must be wrapped in two quote marks, but the second one is missing. VS Code has highlighted this by underlining the text where the error is first noticed (it might not be the exact place where the error actually is) with a squiggly red line, much like the one used in Microsoft Word to highlight spelling mistakes. To fix this, update `"Chris` to `"Chris"`. +5. On the last line, a small bit of red squiggly underline remains near the end, even after we've fixed the previous error. This is because of the third error — in JavaScript, an opening bracket always needs an accompanying closing bracket. Fix this by updating `(helloChris` to `(helloChris)`. + +### Search and replace + +Every worthwhile code editor has a robust search and replace function. This is useful for example if you find out that an error is occurring in a specific function and you want to find it in your code, or if you decide to change the name of a variable and need to make sure it gets changed in all places that reference it. + +The concept of search and replace should be fairly familiar to you if you've used a computer previously, but let's explore it quickly for completeness: + +1. Go back to your JavaScript file in VS Code and open the find and replace panel in find mode by choosing _Edit_ > _Find_ from the menu. +2. Type `createGreeting` into the _Find_ box — you'll see that both instances are highlighted, and you can move between them with the up and down arrows in the panel. The current actively highlighted instance has the brighter highlight. +3. Now open the find and replace panel in replace mode by choosing _Edit_ > _Replace_ from the menu, or by clicking the arrow to the left of the _Find_ box. +4. Type `sayHello` into the _Replace_ box that should now be visible. +5. You can now replace all instances of `createGreeting` in the code with `sayHello` using the two buttons to the right of the _Replace_ box. The left button moves to the next instance of the search string with one click and replaces it with a second click. The right button replaces all instances with a single click. + +VS Code has many powerful find and replace features — see [Find and replace](https://code.visualstudio.com/docs/editor/codebasics#_find-and-replace). ## Enhancing your code editor with extensions -- Language-specific extensions such as code completion, highlighting, linting, and debugging. This can apply to specific languages such as JavaScript, Python, or Go, or language/framework abstractions such as [TypeScript](https://www.typescriptlang.org/) or [JSX](https://react.dev/learn/writing-markup-with-jsx). -- GitHub/version control extensions, if not provided by default. -- Theme and color scheme extensions. -- Productivity extensions like code snippets and scaffolding generators. -- AI-powered code suggestion tools such as GitHub Copilot. Be aware that, while useful, AI tools have no reasoning skill, and frequently provide answers that are misleading or just plain wrong. You shouldn't just assume that AI answers are correct, and test them/verify them with other sources. +Most code editors have an extension or plugin system to allow you to add functionality to the program that is not available to it by default. These can do a variety of tasks, such as: + +- Enable code competition, linting, or debugging functionality for languages not supported by default, or provide additional functionality for those that are. +- Allow you to use the functionality of other tools from right inside the code editor, such as version control tools or local testing servers. +- Provide additional user interface or code highlighting themes/color schemes. +- Suggest code snippets to fulfill requirements. These can be generated from static templates, or via AI tools. Using AI to generate code snippets has many of the same advantages and caveats as using it to generate search results (see [Searching for information > Using AI](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web#using_ai) for more infomation). + +VS Code extensions are managed via the Extensions Marketplace panel in VS Code, accessed via the _View_ > _Extensions_ menu. Let's explore it now. + +1. Open the Extensions Marketplace panel. +2. In the _Search..._ box at the top of the panel, type in "JavaScript" to see what JavaScript-related extensions are available. Try clicking on a few of the search results that appear to see the kinds of things they do. Don't install any of them for now. +3. Instead, let's install an extension that is easy to understand and will be useful for pretty much any code file you work on in this set of modules. Type "Prettier" into the _Search..._ box and click the _Prettier - code formatter_ result. When the [Prettier](https://prettier.io/) extension is installed, it can be used to format your code each time you save a file, making your code much easier to read as a result. +4. Click the _Install_ button on the _Extension_ tab. Close the tab when installation is finished. +5. To get Prettier to work, you need to update a couple of settings. Open the VS Code Settings tab (_Code_ > _Settings..._ > _Settings_ on macOS, _File_ > _Preferences_ > _Settings_ on Windows). +6. In the _Search settings_ box at the top, type "formatter" to filter the settings list and just show the ones that contain "formatter". +7. Find the _Editor: Default Formatter_ option, and select the _Prettier - Code formatter_ option from the associated drop-down. +8. Find the _Editor: Format On Save_ option and enable it by clicking its checkbox. +9. Close the _Settings_ tab. + +That's all the setup done; let's see Prettier in action. + +1. Go back to your JavaScript file's tab and save it (_File_ > _Save_). The file needs to be saved for Prettier to work. Call it `test.js`. The location you save it in doesn't really matter. +2. Replace the current contents with the following code: + + ```js-nolint example-bad + function sayHello(name){const greeting = `Hello, ${name}!`; + return greeting;} + ``` + +3. Save the file again; at this point, Prettier should reformat the code nicely, like this: + + ```js + function sayHello(name) { + const greeting = `Hello, ${name}!`; + return greeting; + } + ``` {{PreviousMenuNext("Learn_web_development/Getting_started/Environment_setup/Browsing_the_web", "Learn_web_development/Getting_started/Environment_setup/Dealing_with_files", "Learn_web_development/Getting_started/Environment_setup")}} diff --git a/files/en-us/learn_web_development/getting_started/environment_setup/command_line/index.md b/files/en-us/learn_web_development/getting_started/environment_setup/command_line/index.md index e6c6208348580e8..7fb26ae4e393a94 100644 --- a/files/en-us/learn_web_development/getting_started/environment_setup/command_line/index.md +++ b/files/en-us/learn_web_development/getting_started/environment_setup/command_line/index.md @@ -87,7 +87,7 @@ The terminal is available on macOS at `Applications/Utilities/Terminal`. As with some other programming tools, using the terminal (or command line) on Windows has traditionally not been as simple or easy as on other operating systems. But things are getting better. -Windows has traditionally had its own terminal-like program called `cmd` ("the command prompt") for a long time, but this definitely doesn't have parity with Unix commands, and is equivalent to the old-style Windows DOS prompt. +Windows has traditionally had its own terminal-like program called `cmd` ("the command prompt") for a long time, but this doesn't have parity with Unix commands, and is equivalent to the old-style Windows DOS prompt. Better programs exist for providing a terminal experience on Windows, such as PowerShell ([see here to find installers](https://github.com/PowerShell/PowerShell)), and Gitbash (which comes as part of the [git for Windows](https://gitforwindows.org/) toolset). @@ -113,7 +113,7 @@ Enough talk — let's start looking at some terminal commands! Out of the box, h - Navigate your computer's file system along with base-level tasks such as create, copy, rename, and delete: - - Move around your directory structure: `cd` + - Move around your directory (folder) structure: `cd` - Create directories: `mkdir` - Create files (and modify their metadata): `touch` - Copy files or directories: `cp` @@ -132,7 +132,10 @@ Let's move forward and look at using a few of these tools on the command line. B ### Navigation on the command line -When you visit the command line you will inevitably need to navigate to a particular directory to "do something". All the operating systems (assuming a default setup) will launch their terminal program in your "home" directory, and from there you're likely to want to move to a different place. +When you visit the command line you will inevitably need to navigate to a particular directory to "do something". All the operating systems (assuming a default setup) will launch their terminal program in your _Home_ directory, and from there you're likely to want to move to a different place. + +> [!NOTE] +> "Directory" is the technical term for what we called "folder" in the previous article. When looking at the file structure inside a user interface (UI), the term "folder" makes more sense, as the icons used look like old-school physical storage folders. However, you tend to hear the term "directory" used frequently as well, especially when talking about manipulating files using the command line. There are nuances, but the two terms basically mean the same thing. The `cd` command lets you Change Directory. Technically, cd isn't a program but a built-in. This means your operating system provides it out of the box, and also that you can't accidentally delete it — thank goodness! You don't need to worry too much about whether a command is built-in or not, but bear in mind that built-ins appear on all unix-based systems. @@ -157,7 +160,7 @@ cd .. If the directory you want to go to is nested deep, you need to know the path to get to it. This usually becomes easier as you get more familiar with the structure of your file system, but if you are not sure of the path you can usually figure it out with a combination of the `ls` command (see below), and by clicking around in your Explorer/Finder window to see where a directory is, relative to where you currently are. -For example, if you wanted to go to a directory called `src`, located inside a directory called `project`, located on the `Desktop`, you could type these three commands to get there from your home folder: +For example, if you wanted to go to a directory called `src`, located inside a directory called `project`, located on the _Desktop_, you could type these three commands to get there from your _Home_ directory: ```bash cd Desktop @@ -298,7 +301,7 @@ curl https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/ Your output should look something like this (`curl` will first output some download counters and suchlike): ```bash -location: /en-US/docs/Web/API/fetch +location: /en-US/docs/Web/API/Window/fetch ``` Although contrived, we could take this result a little further and transform the `location:` line contents, adding the base origin to the start of each one so that we get complete URLs printed out. @@ -313,7 +316,7 @@ curl https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/ Your final output should look something like this: ```bash -https://developer.mozilla.org/en-US/docs/Web/API/fetch +https://developer.mozilla.org/en-US/docs/Web/API/Window/fetch ``` By combining these commands we've customized the output to show the full URLs that the Mozilla server is redirecting through when we request the `/docs/Web/API/WindowOrWorkerGlobalScope/fetch` URL. @@ -332,10 +335,10 @@ Install npm on your system now, by going to the URL above and downloading and ru ![the Node.js installer on windows, showing the option to include npm](npm-install-option.png) -Although we'll look at a number of different tools in the next article onwards, we'll cut our teeth on [Prettier](https://prettier.io/). -Prettier is an opinionated code formatter that only has a "few options". -Fewer options tends to mean simpler. -Given how tooling can sometimes get out of hand in terms of complexity, "few options" can be very appealing. +We'll again use [Prettier](https://prettier.io/) as an example here. We showed how to install it as a VS Code extension in our [Code editors](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors#enhancing_your_code_editor_with_extensions) article. Here we'll show you how to install it as a command line tool. + +> [!NOTE] +> Prettier is an opinionated code formatter that only has a "few options". Fewer options tends to mean simpler. Given how tooling can sometimes get out of hand in terms of complexity, "few options" can be very appealing. ### Where to install our CLI tools? diff --git a/files/en-us/learn_web_development/getting_started/environment_setup/dealing_with_files/file-explorer.png b/files/en-us/learn_web_development/getting_started/environment_setup/dealing_with_files/file-explorer.png new file mode 100644 index 000000000000000..49819eb934413b2 Binary files /dev/null and b/files/en-us/learn_web_development/getting_started/environment_setup/dealing_with_files/file-explorer.png differ diff --git a/files/en-us/learn_web_development/getting_started/environment_setup/dealing_with_files/finder.png b/files/en-us/learn_web_development/getting_started/environment_setup/dealing_with_files/finder.png new file mode 100644 index 000000000000000..7934aec787a4331 Binary files /dev/null and b/files/en-us/learn_web_development/getting_started/environment_setup/dealing_with_files/finder.png differ diff --git a/files/en-us/learn_web_development/getting_started/environment_setup/dealing_with_files/index.md b/files/en-us/learn_web_development/getting_started/environment_setup/dealing_with_files/index.md index 5ac10c42ea78941..138139994dbb03a 100644 --- a/files/en-us/learn_web_development/getting_started/environment_setup/dealing_with_files/index.md +++ b/files/en-us/learn_web_development/getting_started/environment_setup/dealing_with_files/index.md @@ -8,82 +8,200 @@ page-type: tutorial-chapter {{PreviousMenuNext("Learn_web_development/Getting_started/Environment_setup/Code_editors", "Learn_web_development/Getting_started/Environment_setup/Command_line", "Learn_web_development/Getting_started/Environment_setup")}} -A website consists of many files: text content, code, stylesheets, media content, and so on. When you're building a website, you need to assemble these files into a sensible structure on your local computer, make sure they can talk to one another, and get all your content looking right before you eventually [upload them to a server](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website). This article discusses some issues you should be aware of with file systems so you can set up a sensible file structure for your website. +A website consists of many files: text content, code, stylesheets, media content, and so on. When you're building a website, you need to assemble these files into a sensible structure on your local computer, make sure they can talk to one another, and get all your content looking right before eventually putting them on a server for the world to see. This article explains how to use your computer's file explorer user interface (UI) and set up a sensible file structure for a website.
Prerequisites: - Basic familiarity with your computer operating system and the basic software you will use to build a website. + Basic familiarity with your computer operating system (OS) and the basic software you will use to build a website.
Learning outcomes:
    -
  • Basic explorer/finder usage.
    • -
  • Standard folder structure.
    • -
  • File naming best practices for the web — no spaces, lowercase, choosing a reasonable separator like a hyphen or underscore.
    • -
  • Basic file organization best practices.
    • -
  • Creating, moving, and deleting files and folders using Explorer/Finder.
    • -
  • Searching for files and folders.
    • -
  • Dealing with file extensions (e.g. turning off "Hide extensions for known file types" in Windows, showing dot files (.env, etc.)).
    • -
  • Learning how file types are associated with applications.
    • +
  • Manipulating files and folders.
    • +
  • Naming best practices.
    • +
  • Standard website folder structure.
    • +
  • Handling file paths
    • +
  • Dealing with file extensions.
-## Where should your website live on your computer? +## Manipulating files and folders -When you are working on a website locally on your computer, you should keep all the related files in a single folder that mirrors the published website's file structure on the server. This folder can live anywhere you like, but you should put it somewhere where you can easily find it, maybe on your Desktop, in your Home folder, or at the root of your hard drive. +There are many different ways to create and edit the files and folders contained on your computer. You can do it via your computer's command line/terminal using a series of text commands, which you'll learn more about in the next article. However, many people find it easier to start learning about file systems visually, which is what we'll discuss here. Modern operating systems (OSes) have a robust file system user interface (UI) that you can use to manipulate files and folders as needed. -In general, you should: +On macOS for example, you have the Finder program: -1. Choose a place to store your projects. This is where all your website projects will live. -2. Inside this first folder, create other folders to store each project in. For example, you could call your first project `test-site` (or something more imaginative). +![The macOS Finder application, showing the contents of a typical Home folder](finder.png) -Choose a place now to store you projects. Inside your chosen place, create a new folder called `web-projects`. +Whereas Windows has the File Explorer: -## An aside on casing and spacing +![The Windows File Explorer application, showing the contents of a typical Home folder](file-explorer.png) -You'll notice that throughout MDN, we ask you to name folders and files completely in lowercase with no spaces. This is because: +> [!NOTE] +> This guide was written using Windows 11 and macOS 15. You may be using a different OS version, or a different OS altogether, in which case the experience may differ slightly. There are plenty of guides on the web on basic OS usage — we encourage you to search the web for information on your particular OS. + +### Basic structure + +Most modern operating systems have a `Users` folder, which contains a folder for each user account that exists on the system, also known as the user's _Home_ folder. This is usually represented by a house icon to make it easier to find. In turn, the _Home_ folder will contain other important standard folders (and files) relevant to that user in particular, such as _Documents_, _Music_, etc. There are a lot of other files and folders on your computer as well, but don't worry about those for now. + +The currently-logged-in user will by default only be able to access their own _Home_ folder. + +You should create project files relating to your work somewhere inside in your _Home_ folder, perhaps inside _Documents_. This makes sense, as web page files are often referred to as _documents_. + +> [!WARNING] +> If you start creating and editing files in other places on your system (for example, areas that control the operating system or important applications), you might break something. For the moment, stick to creating and editing files inside your _Home_ folder. + +### Creating a folder + +Let's create a new folder to store all of our web projects. + +1. In your file system UI, click on your _Home_ folder, then double-click your _Documents_ folder. +2. Create a new folder in this location called `web-projects`: + 1. On Windows, this can be done by selecting the _New_ button in the File Explorer window and selecting _Folder_ (or pressing Ctrl + Shift + N), typing in `web-projects` as the name of the new folder icon that appears, and pressing Enter/Return. + 2. On macOS, this can be done by selecting _File_ > _New Folder_ on the Finder menu (or pressing Cmd + Shift + N) — you'll see a new folder appear called _untitled folder_. Click on the folder name to start editing it, type in `web-projects`, and press Enter/Return. + +If you make a typo, you can edit the folder name to correct it (this also works with files): + +- On Windows, right-click the folder, select _Rename_ from the menu, then edit it. Some Windows versions have a simplified menu that shows initially — you might have to right-click, then select _Show more options_, then select _Rename_! +- On macOS, click on/select the folder name to edit it. + +### Opening a project folder and creating files in VS Code + +While you can create text files inside the OS file system UI, it is generally easier and less error-prone to create them inside your code editor. In fact, VS Code has its own file explorer that allows you to create all the folders and files you need for your web projects. + +So why did we put you through the trouble of creating a folder using the OS file system UI? Because VS Code needs to be pointed to an initial top-level folder! + +It is also useful to understand a little bit of how your OS file system is structured. This will become more useful as you start to use more complex tools later on. + +Let's open our `web-projects` folder in VS Code now: + +1. Open VS Code. +2. Select _File_ > _Open Folder..._ from the menu. + > [!NOTE] + > If you are a keyboard user, you can run the _Open Folder_ command in Windows by holding down the Ctrl key and pressing K then O. The easiest way for a macOS user to do this is to open the _Command Palette_ with Cmd + Shift + P, type in "Open Folder" to filter the command list, use the cursor keys to move down to _File: Open Folder_, then press Enter. +3. A mini-version of the OS file system UI will appear. Use it to find your `web-projects` folder, select it, then press the _Select Folder_ button. +4. You will be presented with a dialog box entitled _Do you trust the authors of the files in this folder?_ Read this carefully to understand what it is about. At the moment, you are the only person who will be creating files in this folder, so you can click _Yes, I trust the authors_. + +You should see your `web-projects` folder open in the VS Code _EXPLORER_ pane, as shown below: + +![The VS Code Explorer panel, showing an empty folder called web-projects](vs-code-explorer.png) + +> [!WARNING] +> Again, make sure you stick to editing your own files inside your _Home_ folder for now, to avoid causing any problems with your system. + +#### An aside on keyboard navigation in VS Code + +VS Code, while not perfect by any means, has an extensive set of keyboard shortcuts. Throughout this article we've tried to include useful ones where possible, but you can find more comprehensive lists at the VS Code [Keyboard Shortcuts Reference](https://code.visualstudio.com/docs/getstarted/keybindings#_keyboard-shortcuts-reference). + +In general, if you want to navigate VS Code via the keyboard, you can press the Tab key to move around different areas of the UI (Shift + Tab will move you to a previous tab focus position). If there are multiple buttons in a tab focus position, you can use the cursor keys to move between them. + +If you are currently editing a file, the tab key won't navigate around the UI — it will add tab characters into the file. To move out of the file you are editing over to the _EXPLORER_ pane, you can press Cmd + Shift + E on macOS, or Ctrl + Shift + E on Windows. + +To move back to the file editor pane and start moving between the different files open in different tabs, hold down the Ctrl key and use Tab and Shift + Tab to move up and down the list of open tabs (on both macOS and Windows). Once you've highlighted the file you want to edit, release the keys to move to that tab. + +#### Creating a file -1. Many computers, particularly web servers, are case-sensitive. So for example, if you put an image on your website at `test-site/MyImage.jpg` and then in a different file you try to reference the image with `test-site/myimage.jpg`, it may not work. -2. There are many ways in which using spaces in file names creates issues: - - When you invoke commands in the commend line, you have to put quotes around file names with spaces in them, or the path will be interpreted as two separate items. - - Some programming languages (for example, Python) do not work well with spaces in file names in certain circumstances (for example, if these files are modules to be imported). +From here, you can create new files and folders using the relevant buttons at the top of the _EXPLORER_ pane. -File names also map to URLs. For example, if you have a file called `my_file.html` at the root of your server-served directory, generally it will be accessible at `https://example.com/my_file.html` by most web servers' default behavior. Some servers will replace the spaces in your filenames with "%20" (the character code for spaces in URLs), which can create subtle bugs with some server-side logic if they assume that file names and URLs match perfectly. +1. Create a new file by clicking the _New File..._ icon (or Tab to it and press Enter/Return). +2. Enter the file name as "index.html" in the text entry box that appears, and press Enter/Return. -Instead of spaces, many developers use a separator character such as a hyphen (`-`) or underscore (`_`). It's advisable to separate words with hyphens rather than underscores: `my-file.html` vs. `my_file.html`. The [Google search engine treats a hyphen as a word separator but does not regard an underscore that way](https://developers.google.com/search/docs/crawling-indexing/url-structure). This can be remedied by configuring your server to replace underscores with hyphens, but that's extra work and more bug-prone with diverging file names and URLs. +> [!NOTE] +> Don't use the buttons at the top of the _Welcome_ tab to create files and folders, as they work a bit differently. In fact, you can close the _Welcome_ tab, as you don't need it. Do this by clicking the "x" at the right-hand-side of the tab, or by pressing Cmd + W on macOS (Ctrl + W on Windows). + +At this point, go back to your OS file system UI, go into your `web-projects` folder by double-clicking it, and you should see your `index.html` file there as well. VS Code is using the underlying OS file system, not using some weird file system of its own. + +### Moving index.html to its own sub-folder + +You can create folders inside other folders (called _sub-folders_) as many levels deep as you want. You can also move files (and folders) inside other folders by dragging and dropping them on top of that folder. + +Let's explore this, and in the process, move our `index.html` file inside its own sub-folder. We don't really want it sat inside the main `web-projects` folder. + +1. Create a new folder inside `web-projects`, using the VS Code _EXPLORER_ pane's _New Folder..._ button. +2. Name it `test-site`. +3. You should now be able to drag the `index.html` file and drop it on top of the `test-site` folder to move the file inside the folder. + > [!NOTE] + > If you are a keyboard user, you can do this by following these steps: + > + > 1. Use the up and down arrow keys to move the focus outline over the `index.html` file. + > 2. Press Cmd + X on macOS (Ctrl + X on Windows) to select the file for moving. + > 3. Use the arrow keys to move the focus outline over the folder. + > 4. Press Cmd + V on macOS (Ctrl + V on Windows) to move the file into that folder. + +There is way more we could include about using OS file system UIs and VS Code, but we have limited space, so we'll leave it there for now. This has given you enough information to get started, and we encourage you to search the web for information on how to do other things with files and folders. -It is best to get into the habit of writing your folder and file names in lowercase with no spaces and with words separated by hyphens, at least until you know what you're doing. That way, you'll encounter fewer problems down the road. +Let's move on to a brief discussion of website structure. ## What structure should a website have? -Next, let's look at what structures websites generally have. The most common things we'll have on any website project we create are an index HTML file and folders to contain images, style files, and script files: +When you are working on websites locally (on your computer), you should keep all the related files for each site in a single folder. In turn, you should keep all your website folders in one central folder, so they are all easy to find. + +Earlier in the article, we instructed you to create a central folder called `web-projects` to store all your website projects. We also got you to create a subfolder called `test-site` with an empty `index.html` file inside it. + +Let's add some more features inside `test-site` to demonstrate a typical website structure; in the next module, we'll get you to build up a complete website example inside it. The most common things any website project will contain are an index HTML file and folders to contain images, style files, and script files: 1. **`index.html`**: This file will generally contain your homepage content, that is, the text and images that people see when they first go to your site. 2. **`images` folder**: This folder will contain all the images that you use on your site. 3. **`styles` folder**: This folder will contain the CSS code used to style your content (for example, setting text and background colors). -4. **`scripts` folder**: This folder will contain all the JavaScript code used to add interactive functionality to your site (e.g. buttons that load data when clicked). +4. **`scripts` folder**: This folder will contain all the JavaScript code used to add interactive functionality to your site (for example, defining what happens when buttons are clicked). + +> [!CALLOUT] +> +> **Try it out** +> +> You should already have an `index.html` file inside `test-site`. Create the `images`, `styles`, and `scripts` folders inside it now. + +## File names + +There are generally two parts to a file name — the **name** and the **extension**. Take the file we created above — `index.html`: + +- The name in this case is `index`. File names can generally contain whatever characters you like, although different computer systems will have various restrictions on the characters that can be used. It is better to stick to numbers and letters, at least to begin with. In addition, systems may give special meaning to certain names or parts of names — as we've already said, `index` files tend to be recognized as the main homepage file of a website. +- The file extension identifies the type of file we are dealing with, and is used by computer systems to identify what kind of content it can expect in the file, which program it should use to open the file, etc. in this case, the extension is `.html`, which means the file should contain plain text, and more specifically, HTML code. Because of the extension, your computer knows that when you try to open the file it should open it using your default text editor, which should be VS Code if you followed all our instructions up to now. -![A file structure in macOS finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file](file-structure.png) +It is not true in all cases, but most files need an extension to be handled properly. Removing or changing the file extension is likely to cause errors, so you shouldn't alter it unless you really know what you are doing. > [!NOTE] -> On Windows computers, you might have trouble seeing the file names, because Windows has an option called **Hide extensions for known file types** turned on by default. Generally, you can turn this off by going to Windows Explorer, selecting the **Folder options…** option, unchecking the **Hide extensions for known file types** check box, then clicking **OK**. For more specific information covering your version of Windows, you can search on the web. +> It is possible to put more than one dot in a file name, for example `my.cats.html`. In such cases, the last dot is assumed to be the start of the file extension. + +On Windows computers, you might have trouble seeing the extensions of some files, because Windows has an option called **Hide extensions for known file types** turned on by default. You can turn this off by going to File Explorer, selecting the **Folder options…** option, unchecking the **Hide extensions for known file types** check box, then clicking **OK**. For more specific information covering your version of Windows, you can search on the web. + +### Best practices for naming files + +As you follow this course, you'll notice that we always ask you to name folders and files completely in lowercase with no spaces. There are many ways in which using spaces in file and folder names creates issues — some of the more common ones are as follows: + +1. Many computer systems, including most web servers, are case-sensitive. So for example, if you put an image on your website at `test-site/images/MyImage.jpg` and then in a different file you try to reference the image with `test-site/images/myimage.jpg`, it may not work. +2. When you invoke commands on the command line, you have to put quotes around file names with spaces in them, otherwise they will be interpreted as two separate items. +3. Some programming languages (for example, Python) do not work well with spaces in file names in certain circumstances (for example, if these files are modules to be imported). +4. File names commonly map to web addresses/URLs. If you, for example, have a file called `my file.html` in your server's root folder, generally it will be accessible at a URL like `https://example.com/my%20file.html`. Web servers usually replace the spaces in filenames with `%20` (because URLs are {{Glossary("Percent-encoding", "percent-encoded")}}), which can create subtle bugs with some systems if they assume that file names and URLs match perfectly. + +Instead of spaces, many developers use a separator character such as a hyphen (`-`) rather than a space — for example `my-file.html` rather than `my file.html`. This is a good practice. + +It is best to get into the habit of writing your folder and file names in lowercase with no spaces and with words separated by hyphens, at least until you know what you're doing. That way, you'll encounter fewer problems further down the road. + +> [!NOTE] +> You can find more best practices for file names and URLs in [URL structure best practices for Google](https://developers.google.com/search/docs/crawling-indexing/url-structure). ## File paths -To reference one file from another, you have to provide a file path — basically a route, so one file knows where another one is. For example, when creating a web page containing an image, your web page code will need to contain a file path indicating the location of the image you want to display. Let's create a basic example of this. You might not understand what this all means for now, but that's fine. +To reference one file from another, you have to provide a file path — basically a route, so one file knows where another one is. For example, when creating a web page containing an image, your web page code will need to contain a file path indicating the location of the image you want to display. + +Let's work through a basic example of this. You might not understand what this all means for now, but that's fine. + +1. Search the web for an image you like (for example, using a service like [Google Images](https://www.google.com/imghp)) and download it. Alternatively, you can just grab our [Firefox icon image](https://raw.githubusercontent.com/mdn/beginner-html-site/refs/heads/main/images/firefox-icon.png) to use for this example. +2. Put the image inside your _images_ folder. +3. Make sure the image file is called something short and simple, with no spaces in it. For example, `firefox-icon.png` is good, and `cat.jpg` is good, but `efregre^%^£$£@%$^&YTJgfbgfdgt54656756_ertgrth-rtgtfghhyj.png` is not good. Also make sure that you preserve the file extension. -1. Inside your `web-projects` folder, create a new folder called `path-example`. -2. Go to [Google Images](https://www.google.com/imghp), choose an image you like, and download it. -3. Inside your `path-example` folder, create a new folder called `images`. Put your downloaded image inside this folder. -4. Create a new file called `index.html`, and insert the following code into the file exactly as shown: +Now we'll add content to the `index.html` file to allow it to locate the image file and display it. + +1. Open your `index.html` in VS Code, and insert the following content into the file exactly as shown below. This is HTML, the language we use to define and structure web page content. You'll learn a lot more about this very soon! ```html @@ -99,22 +217,22 @@ To reference one file from another, you have to provide a file path — basicall ``` -5. The line `My test image` is the HTML code that inserts an image into the page. We need to tell the HTML where the image is. The image is inside the _images_ directory, which is in the same directory as `index.html`. To walk down the file structure from `index.html` to our image, the file path we'd need is `images/your-image-filename`. For example, if our image was called `firefox-icon.png`, the file path would be `images/firefox-icon.png`. -6. Insert the file path into your HTML code between the double quote marks of the `src=""` code. -7. Save your HTML file, then load it in your web browser (for example, by double-clicking the file). You should see your new webpage displaying your image! +2. The line `My test image` is the HTML code that inserts an image into the page. We need to tell the HTML where the image is. The image is inside the _images_ folder, which is in the same folder as `index.html`. To walk down the file structure from `index.html` to our image, the file path we'd need is `images/your-image-filename`. For example, if your image was called `firefox-icon.png`, the file path would be `images/firefox-icon.png`. +3. Insert the file path into your HTML code between the double quote marks of `src=""`. +4. Save your HTML file, then load it in your web browser. You can do this by Ctrl/right-clicking the HTML file, then choosing _Open With_ and selecting a web browser from the resulting sub-menu. You could also open your file system UI and a web browser window on the same screen, and drag and drop the HTML file over the top of the web browser window. + +You should see a basic webpage displaying your image! ![A screenshot of our basic website showing just the Firefox logo - a flaming fox wrapping the world](website-screenshot.png) -Some general rules for file paths: +### General rules for file paths -- To link to a target file in the same directory as the invoking HTML file, just use the filename, e.g. `my-image.jpg`. -- To reference a file in a subdirectory, write the directory name in front of the path, plus a forward slash, e.g. `subdirectory/my-image.jpg`. -- To link to a target file in the directory **above** the invoking HTML file, write two dots. So for example, if `index.html` was inside a subfolder of `test-site` and `my-image.jpg` was inside `test-site`, you could reference `my-image.jpg` from `index.html` using `../my-image.jpg`. -- You can combine these as much as you like, for example `../subdirectory/another-subdirectory/my-image.jpg`. +- To link to a target file in the same folder as the invoking HTML file, just use the filename, for example `my-image.jpg`. +- To reference a file in a sub-folder, write the folder name in front of the path, plus a forward slash, for example `subfolder/my-image.jpg`. +- To link to a target file in the folder **above** the invoking HTML file, write two dots. So for example, if `index.html` was inside a subfolder of `test-site` and `my-image.jpg` was inside `test-site`, you could reference `my-image.jpg` from `index.html` using `../my-image.jpg`. +- You can combine these as much as you like, for example `../subfolder/another-subfolder/my-image.jpg`. > [!NOTE] > The Windows file system tends to use backslashes, not forward slashes, e.g. `C:\Windows`. This doesn't matter in HTML — even if you are developing your website on Windows, you should still use forward slashes in your code. -For now, this is about all you need to know. - {{PreviousMenuNext("Learn_web_development/Getting_started/Environment_setup/Code_editors", "Learn_web_development/Getting_started/Environment_setup/Command_line", "Learn_web_development/Getting_started/Environment_setup")}} diff --git a/files/en-us/learn_web_development/getting_started/environment_setup/dealing_with_files/vs-code-explorer.png b/files/en-us/learn_web_development/getting_started/environment_setup/dealing_with_files/vs-code-explorer.png new file mode 100644 index 000000000000000..353d2569dd12737 Binary files /dev/null and b/files/en-us/learn_web_development/getting_started/environment_setup/dealing_with_files/vs-code-explorer.png differ diff --git a/files/en-us/learn_web_development/getting_started/environment_setup/installing_software/index.md b/files/en-us/learn_web_development/getting_started/environment_setup/installing_software/index.md index 598913442e2f506..33a4082ad8c4510 100644 --- a/files/en-us/learn_web_development/getting_started/environment_setup/installing_software/index.md +++ b/files/en-us/learn_web_development/getting_started/environment_setup/installing_software/index.md @@ -8,7 +8,7 @@ page-type: tutorial-chapter {{NextMenu("Learn_web_development/Getting_started/Environment_setup/Browsing_the_web", "Learn_web_development/Getting_started/Environment_setup")}} -In this article, we show you what tools you need to do simple web development and how to install them properly. We'll set you up with the bare minimum of tools for now, including a code editor and some modern web browsers. +In this article, we discuss what software you need to do simple web development and what you need to install now, including a code editor and some modern web browsers. @@ -23,42 +23,86 @@ In this article, we show you what tools you need to do simple web development an
  • Understand what software you need to get started.
    • -
  • Install basic software.
    • -
  • Understand in general what software professional web developers use.
    • +
  • Install a code editor, some modern browsers, and a local testing server.
    • +
  • Explore options for other common types of apps.
-## Installing a code editor +## Code editors -You probably already have a basic text editor on your computer. By default Windows includes [Notepad](https://en.wikipedia.org/wiki/Microsoft_Notepad) and macOS comes with [TextEdit](https://en.wikipedia.org/wiki/TextEdit). Linux distros vary; the Ubuntu 22.04 LTS release comes with [GNOME Text Editor](https://en.wikipedia.org/wiki/GNOME_Text_Editor) by default. +A decent code editor is one of the most important things for any developer to have available on their machine. As well as being the place where you write your code, code editors have a whole host of other functionality available. We have dedicated an entire article to code editors later on in the series. -For web development, you can probably do better than Notepad or TextEdit. We recommend starting with [Visual Studio Code](https://code.visualstudio.com/), which is a free editor that offers live previews, code hints, and many other features. +For now, we would recommend that you install [Visual Studio Code](https://code.visualstudio.com/), as it is available across different platforms, has a great feature set and support, and is the editor we mostly use. You should install this now to follow along with the rest of this article. -## Installing modern web browsers +## Modern web browsers -For now, we'll install a couple of desktop web browsers to test our code in. If possible, make sure you have one browser from each line installed and available to test on (so you don't just test in multiple browsers based on the same rendering engine): +Having modern web browsers available to you is essential for web development so that you can test your websites or apps on the browsers your visitors use to access them. You also need to keep your web browsers up-to-date so that they support the latest web technologies and have the latest security fixes applied. -- Chromium: [Chrome](https://www.google.com/chrome/), [Opera](https://www.opera.com/), [Brave](https://brave.com/), [Microsoft Edge](https://www.microsoft.com/en-us/edge) -- Gecko: [Firefox](https://www.mozilla.org/en-US/firefox/new/) -- WebKit: [Safari](https://www.apple.com/safari/) (macOS and iOS only) +> [!NOTE] +> Most browsers tend to install updates automatically, applying the changes when they are restarted. You can usually check for updates on the browser "About" page, for example available in the menu at _Firefox_ > _About Firefox_ or _Chrome_ > _About Google Chrome_ on Firefox/Chrome for macOS, or the menu icon > _Help_ > _About Firefox_ or menu icon > _Help_ > _About Google Chrome_ on Firefox/Chrome for Windows. -## Installing a local web server +For now, you should install a couple of desktop and mobile/alternative device browsers to test your code in. You'll most commonly come across web browsers on desktop, laptop, and mobile devices, but you will also come across web browsers on other devices such as tablets, watches, and TVs. If possible, make sure you have one browser from each line installed and available to test on (so you don't just test in multiple browsers based on the same rendering engine): -Some examples will need to be run by a web server to work successfully. You can find out how to do this in [How do you set up a local testing server?](/en-US/docs/Learn_web_development/Howto/Tools_and_setup/set_up_a_local_testing_server) +- Desktop browsers: + - Chromium: [Google Chrome](https://www.google.com/chrome/), [Opera](https://www.opera.com/browsers/opera), [Brave](https://brave.com/download/), [Microsoft Edge](https://www.microsoft.com/en-us/edge), [Vivaldi](https://vivaldi.com/). + - Gecko: [Mozilla Firefox](https://www.mozilla.org/en-US/firefox/new/). + - WebKit: [Apple Safari](https://www.apple.com/safari/). +- Mobile/alternative device browsers: + - Chromium (Android): [Google Chrome](https://www.google.com/chrome/go-mobile/), [Opera](https://www.opera.com/browsers/opera), [Brave](https://brave.com/download/), [Microsoft Edge](https://www.microsoft.com/en-us/edge/mobile), [Samsung Internet](https://www.samsung.com/us/support/owners/app/samsung-internet), [Vivaldi](https://vivaldi.com/android/). + - Gecko (Android): [Mozilla Firefox](https://www.mozilla.org/en-US/firefox/browsers/mobile/android/). + - WebKit (iOS): [Apple Safari](https://www.apple.com/safari/). + > [!NOTE] + > Most of the Android browsers listed above have iOS versions, but these were historically all powered by Apple's WebKit engine under the hood due to Apple's App Store rules. At the of writing, browsers are starting to create versions of their iOS browsers based on their own rendering engines, due to regulatory changes. See [Apple is finally allowing full versions of Chrome and Firefox to run on the iPhone](https://www.theverge.com/2024/1/25/24050478/apple-ios-17-4-browser-engines-eu). -## What tools do the professionals use? +## Local web servers -The following looks like a scary list, but fortunately, you can get started in web development without knowing anything about most of these. +Normally, when you type in a web address in a browser to load a website, the files that are combined to render that site by your browser are fetched from a remote web server hosted on a server computer somewhere else in the world. You'll learn more about how this works in the next article in the series. -- **A computer**. Maybe that sounds obvious to some people, but some of you are reading this article on your phone or a library computer. For serious web development, it's better to invest in a desktop or laptop computer running Windows, macOS or Linux. -- **A text editor**, to write code in. This could be a text editor (e.g. [Visual Studio Code](https://code.visualstudio.com/), [Notepad++](https://notepad-plus-plus.org/), [Sublime Text](https://www.sublimetext.com/), [GNU Emacs](https://www.gnu.org/software/emacs/), or [VIM](https://www.vim.org/)), or a hybrid editor (e.g. [Dreamweaver](https://www.adobe.com/products/dreamweaver.html) or [WebStorm](https://www.jetbrains.com/webstorm/)). Office document editors are not suitable for this use, as they rely on hidden elements that interfere with the rendering engines used by web browsers. -- **Web browsers**, to test code in. Currently, the most-used browsers are [Firefox](https://www.mozilla.org/en-US/firefox/new/), [Chrome](https://www.google.com/chrome/), [Safari](https://www.apple.com/safari/), and [Microsoft Edge](https://www.microsoft.com/en-us/edge). You should also test how your site performs on mobile devices and on any other browsers your target audience may be using. [Lynx](https://lynx.browser.org/), a text-based terminal web browser, is great for seeing how your site is experienced by visually-impaired users. -- **A graphics editor**, like [GIMP](https://www.gimp.org/), [Figma](https://www.figma.com/), [Paint.NET](https://www.getpaint.net/), [Photoshop](https://www.adobe.com/products/photoshop.html), [Sketch](https://www.sketch.com/) or [XD](https://helpx.adobe.com/support/xd.html), to make images or graphics for your web pages. -- **A version control system**, to manage files on servers, collaborate on a project with a team, share code and assets and avoid editing conflicts. Right now, [Git](https://git-scm.com/) is the most popular version control system along with the [GitHub](https://github.com/) or [GitLab](https://about.gitlab.com/) hosting service. +When creating a website locally (on your own machine), you can often load up the main HTML index file directly in a browser to test it. However, some examples will need to be run through a locally-installed web server to work successfully. -For more information about other project-specific tools, especially for client-side web development, see [Understanding client-side web development tools](/en-US/docs/Learn_web_development/Extensions/Client-side_tools). +One of the easiest options we've found to make a local server available is to use a code editor extension — this way, it is available right inside your code editor. Do the following inside Visual Studio Code: + +1. Open the _Extensions_ pane using the _View_ > _Extensions_ menu option. +2. In the "Search..." box at the top of this pane, type in "live preview". The top search result should be the [_Live Preview_](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server) extension, created by Microsoft. +3. Click on that option to open up a page of information about it, which includes how to use it. +4. Press the _Install_ button to install the extension. +5. Now, when you are working on an HTML file in the editor, you should be able to click the "Show Preview" button to open the live example up in a separate tab. + +The above option is simple, but not that flexible. In future, you may want to made a more flexible local server option available that can be used to load examples in any browser you have available. For other options (and more background information around why local servers are necessary), see [How do you set up a local testing server?](/en-US/docs/Learn_web_development/Howto/Tools_and_setup/set_up_a_local_testing_server). + +## Graphics editors + +Web developers are often required to manipulate image files for use on the websites they create. This can often mean designing/creating graphic assets, but equally, the graphics are often provided by a graphic designer (this could be a team mate or a third-party), in which case the web developer may be called upon to crop or resize the files they receive. + +None of the learning articles on MDN require you to create your own graphics, although a few of them may require you to manipulate the files that we provide. + +There are many graphic editing tools available. We would recommend that you don't spend money on an expensive commercial product until further along in your learning journey, _if_ you feel that you really need it. There are many free software tools and online services that will probably be good enough for now. + +For example: + +- macOS comes with a tool called [Preview](https://support.apple.com/en-gb/guide/preview/welcome/mac). This is mainly used for viewing images and PDFs, but it also has some really useful features for editing images, including resizing, rotating, cropping, annotating, and converting between different file types. +- The built-in Windows [Photos app](https://support.microsoft.com/en-gb/windows/manage-photos-and-videos-with-microsoft-photos-app-c0c6422f-d4cb-2e3d-eb65-7069071b2f9b) comes with many similar features. +- The [tinypng](https://tinypng.com/) website, provides a free service allowing you to compress PNGs, JPEGs, and more. This is a very common task you'll have to do when preparing assets for use on a website. + +If you have more substantial graphics editing/creation needs, you'll want a fully-fledged graphics package. In terms of commercial offerings, [Adobe Photoshop](https://www.adobe.com/products/photoshop.html) has long been the industry standard, and there are also popular relative newcomers such as [Figma](https://www.figma.com/), [Sketch](https://www.sketch.com/), and [Canva](https://www.canva.com). + +If your budget is limited, most of the above apps have trials or free modes there are worth exploring. There are also some well-regarded free apps available such as [GIMP](https://www.gimp.org/), [Adobe Express](https://www.adobe.com/express/), and [Paint.NET](https://www.getpaint.net/). + +## Version control tools + +**Version control** tools are used by developers to manage files on servers, collaborate on a project with a team, share code and assets, and avoid editing conflicts. Right now, [Git](https://git-scm.com/) is the most popular version control system along with hosting services such as [GitHub](https://github.com/) or [GitLab](https://about.gitlab.com/). + +While version control tools are essential for web development teams, you don't need to worry about them right now. We've got a module dedicated to [Version control](/en-US/docs/Learn_web_development/Core/Version_control) near the end of our Core modules series. + +## Site deployment apps + +After you've finished developing a website or app (on your local computer, or perhaps on a development server), you'll want to put it onto a remote web server so that your users can type in the web address associated with it, and view it on the web! + +There are various ways you can do this, from buying hosting and using an [SFTP app](/en-US/docs/Learn_web_development/Howto/Tools_and_setup/Upload_files_to_a_web_server#sftp), using a service like [GitHub Pages](https://pages.github.com/) or [Netlify](https://www.netlify.com/), or even setting up a quick demo to share with others using something like [Glitch](https://glitch.com/) or [CodePen](https://codepen.io/). + +Such a list of options might seem overwhelming, but don't worry — you don't need to know anything about publishing websites right now. We'll look at this topic many times later in the course. You'll get practical experience of it soon enough, in our [Your first website](/en-US/docs/Learn_web_development/Getting_started/Your_first_website) module. {{NextMenu("Learn_web_development/Getting_started/Environment_setup/Browsing_the_web", "Learn_web_development/Getting_started/Environment_setup")}} diff --git a/files/en-us/learn_web_development/getting_started/web_standards/how_the_web_works/index.md b/files/en-us/learn_web_development/getting_started/web_standards/how_the_web_works/index.md index f0ba295b81ccfad..f72effa27991066 100644 --- a/files/en-us/learn_web_development/getting_started/web_standards/how_the_web_works/index.md +++ b/files/en-us/learn_web_development/getting_started/web_standards/how_the_web_works/index.md @@ -8,7 +8,7 @@ page-type: tutorial-chapter {{NextMenu("Learn_web_development/Getting_started/Web_standards/The_Web_standards_model", "Learn_web_development/Getting_started/Web_standards")}} -_How the web works_ provides a simplified view of what happens when you view a webpage in a web browser on your computer or phone. +_How the web works_ provides a description of what happens when you view a webpage in a web browser on your computer or phone. This theory is not essential to writing web code in the short term, but before long you'll really start to benefit from understanding what's happening in the background. diff --git a/files/en-us/learn_web_development/getting_started/web_standards/the_web_standards_model/index.md b/files/en-us/learn_web_development/getting_started/web_standards/the_web_standards_model/index.md index 18a7515962b12b7..7cc3aa8a6eb6348 100644 --- a/files/en-us/learn_web_development/getting_started/web_standards/the_web_standards_model/index.md +++ b/files/en-us/learn_web_development/getting_started/web_standards/the_web_standards_model/index.md @@ -8,10 +8,7 @@ page-type: tutorial-chapter {{PreviousMenuNext("Learn_web_development/Getting_started/Web_standards/How_the_web_works", "Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites", "Learn_web_development/Getting_started/Web_standards")}} -> [!NOTE] -> The content in this article is currently incomplete, sorry about that! We are working hard to improve the MDN Learn Web Development section, and we will have places marked as incomplete ("TODO") finished soon. - -This article provides some useful background on the web and web standards — how they came about, what web standard technologies are, and how they work together. +This article provides some useful background on the web and web standards — how they came about, what web standards technologies are, and how they work together. @@ -25,9 +22,8 @@ This article provides some useful background on the web and web standards — ho @@ -56,14 +56,14 @@ The `SVGAnimatedInteger` interface is used for attributes of basic type [\ - + - + @@ -160,7 +160,7 @@ An `SVGNumberList` is indexable and can be accessed like an array. @@ -256,7 +256,7 @@ An `SVGNumberList` is indexable and can be accessed like an array. @@ -282,7 +282,7 @@ An `SVGNumberList` is indexable and can be accessed like an array. diff --git a/files/en-us/web/api/svgnumberlist/initialize/index.md b/files/en-us/web/api/svgnumberlist/initialize/index.md new file mode 100644 index 000000000000000..ed66f1ffc7522d5 --- /dev/null +++ b/files/en-us/web/api/svgnumberlist/initialize/index.md @@ -0,0 +1,45 @@ +--- +title: "SVGNumberList: initialize() method" +short-title: initialize() +slug: Web/API/SVGNumberList/initialize +page-type: web-api-instance-method +browser-compat: api.SVGNumberList.initialize +--- + +{{APIRef("SVG")}} + +The `initialize()` method of the {{domxref("SVGNumberList")}} interface clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter. + +If the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. + +## Syntax + +```js-nolint +SVGNumberList.initialize(newItem) +``` + +### Parameters + +- `newItem` + - : An {{domxref("SVGNumber")}} item that is inserted into the list. + +### Return value + +An {{domxref("SVGNumber")}} object; the item inserted into the list. + +### Exceptions + +- `NoModificationAllowedError` {{domxref("DOMException")}} + - : Thrown if {{domxref("SVGNumberList")}} corresponds to a read-only attribute or when the object itself is read-only. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGNumber")}} diff --git a/files/en-us/web/api/svgnumberlist/insertitembefore/index.md b/files/en-us/web/api/svgnumberlist/insertitembefore/index.md new file mode 100644 index 000000000000000..123382a3355e14a --- /dev/null +++ b/files/en-us/web/api/svgnumberlist/insertitembefore/index.md @@ -0,0 +1,55 @@ +--- +title: "SVGNumberList: insertItemBefore() method" +short-title: insertItemBefore() +slug: Web/API/SVGNumberList/insertItemBefore +page-type: web-api-instance-method +browser-compat: api.SVGNumberList.insertItemBefore +--- + +{{APIRef("SVG")}} + +The `insertItemBefore()` method of the {{domxref("SVGNumberList")}} interface inserts a new item into the list at the specified position. + +The first item is indexed at `0`. The inserted item is the item itself and not a copy. + +- If `newItem` is already in a list, it is removed from its previous list before it is inserted into this list. + +- If the item is already in this list, note that the `index` of the item to insert before is before the removal of the item. + +- If the `index` is equal to `0`, then the new item is inserted at the front of the list. + +- If the `index` is greater than or equal to {{domxref("SVGNumberList.numberOfItems", "numberOfItems")}}, then the new item is appended to the end of the list. + +## Syntax + +```js-nolint +SVGNumberList.insertItemBefore(newItem, index) +``` + +### Parameters + +- `newItem` + - : An {{domxref("SVGNumber")}} item that is inserted into the list. +- `index` + - : An integer; the index where the new item should be inserted as an unsigned long. + +### Return value + +An {{domxref("SVGNumber")}} object; the inserted item from the list. + +### Exceptions + +- `NoModificationAllowedError` {{domxref("DOMException")}} + - : Thrown if {{domxref("SVGNumberList")}} corresponds to a read-only attribute or when the object itself is read-only. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGNumber")}} diff --git a/files/en-us/web/api/svgnumberlist/length/index.md b/files/en-us/web/api/svgnumberlist/length/index.md new file mode 100644 index 000000000000000..e7776d8b58144f7 --- /dev/null +++ b/files/en-us/web/api/svgnumberlist/length/index.md @@ -0,0 +1,28 @@ +--- +title: "SVGNumberList: length property" +short-title: length +slug: Web/API/SVGNumberList/length +page-type: web-api-instance-property +browser-compat: api.SVGNumberList.length +--- + +{{APIRef("SVG")}} + +The **`length`** read-only property of the {{domxref("SVGNumberList")}} interface represents the number of items in the list. + +## Value + +An integer; the number of {{domxref("SVGNumber")}} objects in the list as an unsigned long. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGNumber")}} +- {{domxref("SVGNumberList.numberOfItems")}} (alias property) diff --git a/files/en-us/web/api/svgnumberlist/numberofitems/index.md b/files/en-us/web/api/svgnumberlist/numberofitems/index.md new file mode 100644 index 000000000000000..a3f29eec871fbba --- /dev/null +++ b/files/en-us/web/api/svgnumberlist/numberofitems/index.md @@ -0,0 +1,27 @@ +--- +title: "SVGNumberList: numberOfItems property" +short-title: numberOfItems +slug: Web/API/SVGNumberList/numberOfItems +page-type: web-api-instance-property +browser-compat: api.SVGNumberList.numberOfItems +--- + +{{APIRef("SVG")}} + +The **`numberOfItems`** read-only property of the {{domxref("SVGNumberList")}} interface represents the number of items in the list. + +## Value + +An integer; the number of {{domxref("SVGNumber")}} objects in the list as an unsigned long. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGNumber")}} diff --git a/files/en-us/web/api/svgnumberlist/removeitem/index.md b/files/en-us/web/api/svgnumberlist/removeitem/index.md new file mode 100644 index 000000000000000..8e829dd384341b6 --- /dev/null +++ b/files/en-us/web/api/svgnumberlist/removeitem/index.md @@ -0,0 +1,50 @@ +--- +title: "SVGNumberList: removeItem() method" +short-title: removeItem() +slug: Web/API/SVGNumberList/removeItem +page-type: web-api-instance-method +browser-compat: api.SVGNumberList.removeItem +--- + +{{APIRef("SVG")}} + +The `removeItem()` method of the {{domxref("SVGNumberList")}} interface removes an existing item from the list. + +## Syntax + +```js-nolint +SVGNumberList.removeItem(index) +``` + +### Parameters + +- `index` + - : An integer; the index of the item to be removed as an unsigned long. + +### Return value + +An {{domxref("SVGNumber")}} object; the removed item from the list. + +### Exceptions + +This method may raise a {{domxref("DOMException")}} of one of the following types: + +- `NoModificationAllowedError` {{domxref("DOMException")}} + + - : Thrown if {{domxref("SVGNumberList")}} corresponds to a read-only attribute or when the object itself is read-only. + +- `IndexSizeError` {{domxref("DOMException")}} + - : Thrown if the index number is greater than or equal to {{domxref("SVGNumberList.numberOfItems", "numberOfItems")}}. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGNumber")}} +- {{domxref("SVGNumberList.numberOfItems")}} diff --git a/files/en-us/web/api/svgnumberlist/replaceitem/index.md b/files/en-us/web/api/svgnumberlist/replaceitem/index.md new file mode 100644 index 000000000000000..bfbd1e5fb4289e6 --- /dev/null +++ b/files/en-us/web/api/svgnumberlist/replaceitem/index.md @@ -0,0 +1,58 @@ +--- +title: "SVGNumberList: replaceItem() method" +short-title: replaceItem() +slug: Web/API/SVGNumberList/replaceItem +page-type: web-api-instance-method +browser-compat: api.SVGNumberList.replaceItem +--- + +{{APIRef("SVG")}} + +The `replaceItem()` method of the {{domxref("SVGNumberList")}} interface replaces an existing item in the list with a new item. + +The inserted item is the item itself and not a copy. + +- If `newItem` is already in a list, it is removed from its previous list before it is inserted into this list. + +- If the item is already in this list, note that the `index` of the item to replace is before the removal of the item. + +## Syntax + +```js-nolint +SVGNumberList.replaceItem(newItem, index) +``` + +### Parameters + +- `newItem` + - : A {{domxref("SVGNumber")}} item that is inserted into the list. +- `index` + - : An integer; the index where the new item should replace the existing one, as an unsigned long. + +### Return value + +An {{domxref("SVGNumber")}} object; the inserted item from the list. + +### Exceptions + +This method may raise a {{domxref("DOMException")}} of one of the following types: + +- `NoModificationAllowedError` {{domxref("DOMException")}} + + - : Thrown if {{domxref("SVGNumberList")}} corresponds to a read-only attribute or when the object itself is read-only. + +- `IndexSizeError` {{domxref("DOMException")}} + - : Thrown if the index number is greater than or equal to {{domxref("SVGNumberList.numberOfItems", "numberOfItems")}}. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGNumber")}} +- {{domxref("SVGNumberList.numberOfItems")}} diff --git a/files/en-us/web/api/svgpatternelement/patterncontentunits/index.md b/files/en-us/web/api/svgpatternelement/patterncontentunits/index.md new file mode 100644 index 000000000000000..970fc8f040f2a13 --- /dev/null +++ b/files/en-us/web/api/svgpatternelement/patterncontentunits/index.md @@ -0,0 +1,64 @@ +--- +title: "SVGPatternElement: patternContentUnits property" +short-title: patternContentUnits +slug: Web/API/SVGPatternElement/patternContentUnits +page-type: web-api-instance-property +browser-compat: api.SVGPatternElement.patternContentUnits +--- + +{{APIRef("SVG")}} + +The **`patternContentUnits`** read-only property of the {{domxref("SVGPatternElement")}} interface reflects the {{SVGAttr("patternContentUnits")}} attribute of the given {{SVGElement("pattern")}} element. It specifies the coordinate system for the pattern content and takes one of the constants defined in {{domxref("SVGUnitTypes")}}. + +## Value + +An {{domxref("SVGAnimatedEnumeration")}} object. + +## Example + +Given the following SVG: + +```html + + + + + + + + + + + + +``` + +We can access the `patternContentUnits` attribute: + +```js +const patterns = document.querySelectorAll("pattern"); + +console.log(patterns[0].patternContentUnits.baseVal); // output: 1 (SVGUnitTypes.USERSPACEONUSE) +console.log(patterns[1].patternContentUnits.baseVal); // output: 2 (SVGUnitTypes.OBJECTBOUNDINGBOX) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedEnumeration")}} +- {{domxref("SVGUnitTypes")}} diff --git a/files/en-us/web/api/svgpatternelement/patterntransform/index.md b/files/en-us/web/api/svgpatternelement/patterntransform/index.md new file mode 100644 index 000000000000000..4c8c82cb8d7391b --- /dev/null +++ b/files/en-us/web/api/svgpatternelement/patterntransform/index.md @@ -0,0 +1,52 @@ +--- +title: "SVGPatternElement: patternTransform property" +short-title: patternTransform +slug: Web/API/SVGPatternElement/patternTransform +page-type: web-api-instance-property +browser-compat: api.SVGPatternElement.patternTransform +--- + +{{APIRef("SVG")}} + +The **`patternTransform`** read-only property of the {{domxref("SVGPatternElement")}} interface reflects the {{SVGAttr("patternTransform")}} attribute of the given {{SVGElement("pattern")}} element. This property holds the transformation applied to the pattern itself, allowing for operations like `translate`, `rotate`, `scale`, and `skew`. + +## Value + +An {{domxref("SVGAnimatedTransformList")}} object. + +## Example + +In this example, the pattern is rotated by 20 degrees, skewed on the X-axis by 30 degrees, and scaled by a factor of 1 horizontally and 0.5 vertically: + +```html + + + + + + + + + +``` + +{{EmbedLiveSample("Examples", '100%', 300)}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedEnumeration")}} +- {{domxref("SVGUnitTypes")}} diff --git a/files/en-us/web/api/svgpatternelement/patternunits/index.md b/files/en-us/web/api/svgpatternelement/patternunits/index.md new file mode 100644 index 000000000000000..ef257df8031bed0 --- /dev/null +++ b/files/en-us/web/api/svgpatternelement/patternunits/index.md @@ -0,0 +1,60 @@ +--- +title: "SVGPatternElement: patternUnits property" +short-title: patternUnits +slug: Web/API/SVGPatternElement/patternUnits +page-type: web-api-instance-property +browser-compat: api.SVGPatternElement.patternUnits +--- + +{{APIRef("SVG")}} + +The **`patternUnits`** read-only property of the {{domxref("SVGPatternElement")}} interface reflects the {{SVGAttr("patternUnits")}} attribute of the given {{SVGElement("pattern")}} element. It specifies the coordinate system for the pattern content and takes one of the constants defined in {{domxref("SVGUnitTypes")}}. + +## Value + +An {{domxref("SVGAnimatedEnumeration")}} object. + +## Example + +Given the following SVG: + +```html + + + + + + + + + + + + +``` + +We can access the `patternUnits` attribute: + +```js +const patterns = document.querySelectorAll("pattern"); + +console.log(patterns[0].patternUnits.baseVal); // output: 1 (SVGUnitTypes.USERSPACEONUSE) +console.log(patterns[1].patternUnits.baseVal); // output: 2 (SVGUnitTypes.OBJECTBOUNDINGBOX) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedEnumeration")}} +- {{domxref("SVGUnitTypes")}} diff --git a/files/en-us/web/api/svgpolygonelement/animatedpoints/index.md b/files/en-us/web/api/svgpolygonelement/animatedpoints/index.md new file mode 100644 index 000000000000000..2928b888ed6a661 --- /dev/null +++ b/files/en-us/web/api/svgpolygonelement/animatedpoints/index.md @@ -0,0 +1,46 @@ +--- +title: "SVGPolygonElement: animatedPoints property" +short-title: animatedPoints +slug: Web/API/SVGPolygonElement/animatedPoints +page-type: web-api-instance-property +browser-compat: api.SVGPolygonElement.animatedPoints +--- + +{{APIRef("SVG")}} + +The **`animatedPoints`** read-only property of the {{domxref("SVGPolygonElement")}} interface reflects the animated value of the element's {{SVGAttr("points")}} attribute. If the {{SVGAttr("points")}} attribute is not being animated, it contains the same value as the `points` property. + +## Value + +A {{DOMxRef("SVGPointList")}} object. + +## Examples + +### Accessing the `animatedPoints` property + +```html + + + + + +``` + +```js +const polygonElement = document.getElementById("myPolygon"); + +// Access the animatedPoints property +console.dir(polygonElement.animatedPoints); // Output: SVGPointList object +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgpolygonelement/points/index.md b/files/en-us/web/api/svgpolygonelement/points/index.md new file mode 100644 index 000000000000000..241d00840037c74 --- /dev/null +++ b/files/en-us/web/api/svgpolygonelement/points/index.md @@ -0,0 +1,40 @@ +--- +title: "SVGPolygonElement: points property" +short-title: points +slug: Web/API/SVGPolygonElement/points +page-type: web-api-instance-property +browser-compat: api.SVGPolygonElement.points +--- + +{{APIRef("SVG")}} + +The **`points`** read-only property of the {{domxref("SVGPolygonElement")}} interface reflects the base (i.e., static) value of the element's {{SVGAttr("points")}} attribute. Modifications via the {{DOMxRef("SVGPointList")}} object are reflected in the {{SVGAttr("points")}} attribute, and vice versa. + +## Value + +A {{DOMxRef("SVGPointList")}} object. + +## Examples + +### Accessing the `points` property + +```html + + + +``` + +```js +const polygonElement = document.getElementById("myPolygon"); + +// Access the points property +console.dir(polygonElement.points); // Output: SVGPointList object containing points (100,10), (150,50), (100,90), (50,50) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgradialgradientelement/cx/index.md b/files/en-us/web/api/svgradialgradientelement/cx/index.md new file mode 100644 index 000000000000000..b60e3f0c18502e3 --- /dev/null +++ b/files/en-us/web/api/svgradialgradientelement/cx/index.md @@ -0,0 +1,62 @@ +--- +title: "SVGRadialGradientElement: cx property" +short-title: cx +slug: Web/API/SVGRadialGradientElement/cx +page-type: web-api-instance-property +browser-compat: api.SVGRadialGradientElement.cx +--- + +{{APIRef("SVG")}} + +The **`cx`** read-only property of the {{domxref("SVGRadialGradientElement")}} interface describes the x-axis coordinate of the center of the radial gradient as an {{domxref("SVGAnimatedLength")}}. It reflects the computed value of the {{SVGAttr("cx")}} attribute on the {{SVGElement("radialGradient")}} element. + +The attribute value is a [``](/en-US/docs/Web/SVG/Content_type#length), [``](/en-US/docs/Web/SVG/Content_type#percentage), or [``](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the x-coordinate of the radial gradient's center in the user coordinate system. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +Given the following SVG: + +```html + + + + + + + + + + + + + + +``` + +We can access the computed values of the `cx` attributes: + +```js +const radialGradients = document.querySelectorAll("radialGradient"); +const cxGradient1 = radialGradients[0].cx; +const cxGradient2 = radialGradients[1].cx; + +console.dir(cxGradient1.baseVal.value); // output: 50 +console.dir(cxGradient2.baseVal.value); // output: 50 (25% of 200) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGRadialGradientElement.cy")}} +- {{domxref("SVGAnimatedLength.baseVal")}} diff --git a/files/en-us/web/api/svgradialgradientelement/cy/index.md b/files/en-us/web/api/svgradialgradientelement/cy/index.md new file mode 100644 index 000000000000000..6b31ea643b02aec --- /dev/null +++ b/files/en-us/web/api/svgradialgradientelement/cy/index.md @@ -0,0 +1,62 @@ +--- +title: "SVGRadialGradientElement: cy property" +short-title: cy +slug: Web/API/SVGRadialGradientElement/cy +page-type: web-api-instance-property +browser-compat: api.SVGRadialGradientElement.cy +--- + +{{APIRef("SVG")}} + +The **`cy`** read-only property of the {{domxref("SVGRadialGradientElement")}} interface describes the y-axis coordinate of the center of the radial gradient as an {{domxref("SVGAnimatedLength")}}. It reflects the computed value of the {{SVGAttr("cy")}} attribute on the {{SVGElement("radialGradient")}} element. + +The attribute value is a [``](/en-US/docs/Web/SVG/Content_type#length), [``](/en-US/docs/Web/SVG/Content_type#percentage), or [``](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the y-coordinate of the radial gradient's center in the user coordinate system. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +Given the following SVG: + +```html + + + + + + + + + + + + + + +``` + +We can access the computed values of the `cx` attributes: + +```js +const radialGradients = document.querySelectorAll("radialGradient"); +const cyGradient1 = radialGradients[0].cy; +const cyGradient2 = radialGradients[1].cy; + +console.dir(cyGradient1.baseVal.value); // output: 75 +console.dir(cyGradient2.baseVal.value); // output: 100 (50% of 200) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGRadialGradientElement.cx")}} +- {{domxref("SVGAnimatedLength.baseVal")}} diff --git a/files/en-us/web/api/svgradialgradientelement/fx/index.md b/files/en-us/web/api/svgradialgradientelement/fx/index.md new file mode 100644 index 000000000000000..4e0690a54781c38 --- /dev/null +++ b/files/en-us/web/api/svgradialgradientelement/fx/index.md @@ -0,0 +1,62 @@ +--- +title: "SVGRadialGradientElement: fx property" +short-title: fx +slug: Web/API/SVGRadialGradientElement/fx +page-type: web-api-instance-property +browser-compat: api.SVGRadialGradientElement.fx +--- + +{{APIRef("SVG")}} + +The **`fx`** read-only property of the {{domxref("SVGRadialGradientElement")}} interface describes the x-axis coordinate of the focal point of the radial gradient as an {{domxref("SVGAnimatedLength")}}. It reflects the computed value of the {{SVGAttr("fx")}} attribute on the {{SVGElement("radialGradient")}} element. + +The attribute value is a [``](/en-US/docs/Web/SVG/Content_type#length), [``](/en-US/docs/Web/SVG/Content_type#percentage), or [``](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the x-coordinate of the focal point of the radial gradient in the user coordinate system. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +Given the following SVG: + +```html + + + + + + + + + + + + + + +``` + +We can access the computed values of the `fx` attributes: + +```js +const radialGradients = document.querySelectorAll("radialGradient"); +const fxGradient1 = radialGradients[0].fx; +const fxGradient2 = radialGradients[1].fx; + +console.dir(fxGradient1.baseVal.value); // output: 30 +console.dir(fxGradient2.baseVal.value); // output: 20 (10% of 200) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGRadialGradientElement.fy")}} +- {{domxref("SVGAnimatedLength.baseVal")}} diff --git a/files/en-us/web/api/svgradialgradientelement/fy/index.md b/files/en-us/web/api/svgradialgradientelement/fy/index.md new file mode 100644 index 000000000000000..96e39a0c9cce1e0 --- /dev/null +++ b/files/en-us/web/api/svgradialgradientelement/fy/index.md @@ -0,0 +1,62 @@ +--- +title: "SVGRadialGradientElement: fy property" +short-title: fy +slug: Web/API/SVGRadialGradientElement/fy +page-type: web-api-instance-property +browser-compat: api.SVGRadialGradientElement.fy +--- + +{{APIRef("SVG")}} + +The **`fy`** read-only property of the {{domxref("SVGRadialGradientElement")}} interface describes the y-axis coordinate of the focal point of the radial gradient as an {{domxref("SVGAnimatedLength")}}. It reflects the computed value of the {{SVGAttr("fy")}} attribute on the {{SVGElement("radialGradient")}} element. + +The attribute value is a [``](/en-US/docs/Web/SVG/Content_type#length), [``](/en-US/docs/Web/SVG/Content_type#percentage), or [``](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the y-coordinate of the focal point of the radial gradient in the user coordinate system. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +Given the following SVG: + +```html + + + + + + + + + + + + + + +``` + +We can access the computed values of the `fy` attributes: + +```js +const radialGradients = document.querySelectorAll("radialGradient"); +const fyGradient1 = radialGradients[0].fy; +const fyGradient2 = radialGradients[1].fy; + +console.dir(fyGradient1.baseVal.value); // output: 60 +console.dir(fyGradient2.baseVal.value); // output: 80 (40% of 200) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGRadialGradientElement.fx")}} +- {{domxref("SVGAnimatedLength.baseVal")}} diff --git a/files/en-us/web/api/svgradialgradientelement/r/index.md b/files/en-us/web/api/svgradialgradientelement/r/index.md new file mode 100644 index 000000000000000..44eac95bc98a152 --- /dev/null +++ b/files/en-us/web/api/svgradialgradientelement/r/index.md @@ -0,0 +1,62 @@ +--- +title: "SVGRadialGradientElement: r property" +short-title: r +slug: Web/API/SVGRadialGradientElement/r +page-type: web-api-instance-property +browser-compat: api.SVGRadialGradientElement.r +--- + +{{APIRef("SVG")}} + +The **`r`** read-only property of the {{domxref("SVGRadialGradientElement")}} interface describes the radius of the radial gradient as an {{domxref("SVGAnimatedLength")}}. It reflects the computed value of the {{SVGAttr("r")}} attribute on the {{SVGElement("radialGradient")}} element. + +The attribute value is a [``](/en-US/docs/Web/SVG/Content_type#length), [``](/en-US/docs/Web/SVG/Content_type#percentage), or [``](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the radius of the radial gradient in the user coordinate system. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +Given the following SVG: + +```html + + + + + + + + + + + + + + +``` + +We can access the computed values of the `r` attributes: + +```js +const radialGradients = document.querySelectorAll("radialGradient"); +const rGradient1 = radialGradients[0].r; +const rGradient2 = radialGradients[1].r; + +console.dir(rGradient1.baseVal.value); // output: 30 +console.dir(rGradient2.baseVal.value); // output: 20 (10% of 200) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{SVGAttr("r")}} +- {{domxref("SVGAnimatedLength.baseVal")}} diff --git a/files/en-us/web/api/svgrect/height/index.md b/files/en-us/web/api/svgrect/height/index.md new file mode 100644 index 000000000000000..1594ae2991672d8 --- /dev/null +++ b/files/en-us/web/api/svgrect/height/index.md @@ -0,0 +1,86 @@ +--- +title: "SVGRect: height property" +short-title: height +slug: Web/API/SVGRect/height +page-type: web-api-instance-property +browser-compat: api.SVGRect.height +--- + +{{APIRef("SVG")}} + +The **`height`** property of the {{domxref("SVGRect")}} interface is an alias for the {{DOMXref("DOMRect.height")}} property. It describes the vertical size of the element. It reflects the SVG element's {{SVGattr("height")}} attribute and the CSS {{cssxref("height")}} property. + +The height is a length; it is the distance from the top of element to the bottom of the element in the the user coordinate system. Its syntax is the same as that for [``](/en-US/docs/Web/SVG/Content_type#length). + +## Usage context + +
Learning outcomes:
    +
  • Web standards, and the key principles they are built on.
  • How standards bodies operate — for example the W3C, WHATWG, TC39, and Khronos Group; the process of standards creation.
    • -
  • The lifecycle of web standards features.
    • -
  • The key principles web standards are built on.
  • The main web standards technologies, and how they work together.
  • Web best practices.
@@ -38,64 +34,98 @@ This article provides some useful background on the web and web standards — ho ## Brief history of the web -We'll keep this very brief, as there are many (more) detailed accounts of the web's history out there, which we'll link to later on (also try searching for "history of the web" in your favorite search engine and see what you get, if you are interested in more detail.) +In the late 1960s, the US military developed a communication network called [ARPANET](/en-US/docs/Glossary/Arpanet). This can be considered a forerunner of the **internet**, as it worked on [packet switching](https://en.wikipedia.org/wiki/Packet_switching), and featured the first implementation of the [TCP/IP](https://en.wikipedia.org/wiki/Internet_protocol_suite) protocol suite. These two technologies form the basis of the infrastructure that the internet is built on. -In the late 1960s, the US military developed a communication network called [ARPANET](/en-US/docs/Glossary/Arpanet). This can be considered a forerunner of the Web, as it worked on [packet switching](https://en.wikipedia.org/wiki/Packet_switching), and featured the first implementation of the [TCP/IP](https://en.wikipedia.org/wiki/Internet_protocol_suite) protocol suite. These two technologies form the basis of the infrastructure that the internet is built on. - -In 1980, Tim Berners-Lee (often referred to as TimBL) wrote a notebook program called ENQUIRE, which featured the concept of links between different nodes. Sound familiar? +In 1980, [Tim Berners-Lee](https://en.wikipedia.org/wiki/Tim_Berners-Lee) (often referred to as TimBL) wrote a notebook program called ENQUIRE, which featured the concept of links between different nodes. Sound familiar? Fast forward to 1989, and TimBL wrote [Information Management: A Proposal](https://www.w3.org/History/1989/proposal.html) and HyperText at CERN; these two publications together provided the background for how the web would work. They received a fair amount of interest, enough to convince TimBL's bosses to allow him to go ahead and create a global hypertext system. -By late 1990, TimBL had created all the things needed to run the first version of the web — [HTTP](/en-US/docs/Web/HTTP), [HTML](/en-US/docs/Web/HTML), the first web browser, which was called [WorldWideWeb](https://en.wikipedia.org/wiki/WorldWideWeb), an HTTP server, and some web pages to look at. +By 1990-91, TimBL had created all the things needed to run the first version of the **World Wide Web** (generally referred to as the **web**) — [HTTP](/en-US/docs/Web/HTTP), [HTML](/en-US/docs/Web/HTML), the first web browser, which was called [WorldWideWeb](https://en.wikipedia.org/wiki/WorldWideWeb), a web server, and some web pages to look at. + +> [!NOTE] +> People sometimes use "the web" and "the internet" interchangeably, but they are different things. The internet is the infrastructure that enables information to be transported around the world between different servers and clients, whereas the web is a system built on top of the internet. The web defines types of information (content and code) that are transported via the internet and communications protocols to manage that transport. + +In 1994, TimBL founded the [World Wide Web Consortium](https://en.wikipedia.org/wiki/World_Wide_Web_Consortium) (W3C), an organization that brings together representatives from many different companies to work together on the creation of web technologies. The W3C worked on standardizing and improving existing web technologies such as HTML and HTTP, and creating new technologies such as [CSS](/en-US/docs/Web/CSS) and [JavaScript](/en-US/docs/Web/JavaScript). CSS and JavaScript in particular were vital for giving the web styling and interactivity, making it look more like the web we know today. -In the next few years that followed, the web exploded, with multiple browsers being released, thousands of web servers being set up, and millions of web pages being created. OK, that's a very simple summary of what happened, but we did promise you a brief summary. +In the next few years that followed, the web exploded, with multiple browsers being released, thousands of web servers being set up, and millions of web pages being created. Other standards organizations also appeared to help standardize different aspects of web technologies. -One last significant data point to share is that in 1994, TimBL founded the [World Wide Web Consortium](https://en.wikipedia.org/wiki/World_Wide_Web_Consortium) (W3C), an organization that brings together representatives from many different technology companies to work together on the creation of web technology specifications. After that other technologies followed such as [CSS](/en-US/docs/Web/CSS) and [JavaScript](/en-US/docs/Web/JavaScript), and the web started to look more like the web we know today. +> [!NOTE] +> If you are interested in reading a more detailed account of web history, try searching for "history of the web" in your favorite [search engine](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web#search_engine) and see what you can find. ## Web standards -**Web standards** are the technologies we use to build websites. These standards exist as long technical documents called specifications, which detail exactly how the technology should work. These documents are not very useful for learning how to use the technologies they describe (this is why we have sites like MDN Web Docs), but instead are intended to be used by software engineers to implement these technologies (usually in web browsers). +**Web standards** are the technologies we use to build websites. These standards exist as long technical documents called specifications, which detail exactly how the technology should work. These documents are not very useful for learning how to use the technologies they describe (this is why we have sites like MDN Web Docs). Instead, they are intended to be used by software engineers to implement these technologies (usually in web browsers). + +### Standards bodies and processes + +Web standards are created by standards bodies — institutions that invite groups of people from different technology companies to come together and agree on how the technologies should work in the best way to fulfill all of their use cases. + +The W3C is the best known web standards body, but there are others. For example: + +- [WHATWG](https://whatwg.org/) maintains the [HTML Living Standard](https://html.spec.whatwg.org/multipage/), which describes exactly how HTML (all the HTML elements, and their associated APIs, and other surrounding technologies) should be implemented. +- [TC39](https://tc39.es/) and [ECMA](https://ecma-international.org/) specify and publish the standard for ECMAScript, which modern JavaScript is based on. +- [Khronos](https://www.khronos.org/) publish technologies for 3D graphics, such as WebGL. + +The full processes by which standards are created can get deep and complex. However, unless you want to create your own web technology features, you don't need to understand most of it. If you want to contribute to the discussion around new technologies and provide feedback, it is usually a matter of joining the relevant mailing list or other discussion mechanism. Standards discussions are carried out in public, hence the term ["Open" standards](#open_standards). + +For now, we'll give you a general, high-level understanding of how standards processes work: + +1. Someone notices the need for a new web standard feature that will make developers' lives easier. For example, maybe there is a common pattern that is commonly used in web user interfaces, but it is a pain to implement. A dedicated CSS feature would make it much easier. The someone could be anyone — an individual developer, or an engineer working for a big tech company. +2. The person discusses this feature with other developers, browser engineers, etc., and starts to create interest in implementing the feature. Usually they write an explainer document that explains the need for the feature and how it will work, and a code demo that shows what the feature would look like in action. +3. If there is enough interest in the feature, it is formally discussed inside the relevant standards body working group. For example, CSS features are usually discussed by the [CSS Working Group](https://www.w3.org/groups/wg/css/) (WG) (see also the [CSS Working Group Wikipedia page](https://en.wikipedia.org/wiki/CSS_Working_Group) for a bit more description and history). Before a new web technology is accepted, it must be rigorously evaluated to make sure it is good for the web — for example, it doesn't introduce any security problems, it is [accessible and compatible](#accessible_and_interoperable) with other web technologies, and it doesn't rely on patents. +4. To prove out the feature, several things happen. These points can all happen around the same time as Point 3., or even before (browser vendors sometimes implement proprietary/non-standard features and then attempt to standardize them afterwards): + + 1. One or more browser vendors will implement an experimental version of the new feature, often disabled by default, but which can be enabled by people who want to test it and provide feedback. + 2. A working group member will also add it to a technology specification so that browser vendors are able to implement it consistently. + 3. They will also seek out feedback from other browser vendors to see what issues they have with the proposal, and how likely they are to implement it. These are called Standards positions. See for example [Mozilla Standards Positions](https://mozilla.github.io/standards-positions/). + 4. Involved individuals will also write an extensive suite of tests to demonstrate that the feature works as described. -For example, the [HTML Living Standard](https://html.spec.whatwg.org/multipage/) describes exactly how HTML (all the HTML elements, and their associated APIs, and other surrounding technologies) should be implemented. +5. Eventually, if all is well, the feature will be implemented across all browsers and can start being used when creating websites. -Web standards are created by standards bodies — institutions that invite groups of people from different technology companies to come together and agree on how the technologies should work in the best way to fulfill all of their use cases. The W3C is the best known web standards body, but there are others such as the [WHATWG](https://whatwg.org/) (who maintain the living standards for the HTML language), [ECMA](https://ecma-international.org/) (who publish the standard for ECMAScript, which JavaScript is based on), [Khronos](https://www.khronos.org/) (who publish technologies for 3D graphics, such as WebGL), and others. +> [!NOTE] +> It is perfectly possible that the people suggesting the feature, implementing it in a browser, creating the specification, writing tests, and collecting feedback on it, are the same person/people. + +You can find more information on specific standards body processes. See for example: -### Web standards key principles +- [W3C Process Document](https://www.w3.org/policies/process/) +- [WHATWG — Working Mode](https://whatwg.org/working-mode) +- [The TC39 Process](https://tc39.es/process-document/) -The basic principles of the web: +## Web standards key principles -- Open to contribute and use. -- Not patent-encumbered or controlled by a single private entity. +The key principles of the web, which make the web a unique and exciting industry to get involved in, are as follows: + +- Open to contribute and use, and therefore not patent-encumbered or controlled by a single private entity. - Accessible and interoperable. - They don't break the web. -This basis means that the web is a unique and exciting industry to get involved in. +Let's look at each of these in a little more detail. ### "Open" standards -One of the key aspects of web standards, which TimBL and the W3C agreed on from the start, is that the web (and web technologies) should be free to both contribute and use, and not encumbered by patents/licensing. Therefore anyone can write the code to build a website for free, and anyone can contribute to the standards creation process, where the specs are written. - -Because web technologies are created openly, in collaboration between many different companies, it means that no one company gets to control them, which is a really good thing. You wouldn't want a single company suddenly deciding to put the entire web behind a paywall, or releasing a new version of HTML that everyone has to buy to continue making websites, or worse still, just deciding they aren't interested any more and just turning it off. +One of the key aspects of web standards, which TimBL and the W3C agreed on from the start, is that the web (and web technologies) should be **open**. This means they free to both contribute to and use, and not encumbered by patents/licensing. This is important — if a web technology relies on patented/licensed technologies to function, the patent/owner can then charge implementing browser vendors potentially large amounts of of money, and those costs would then be passed onto the browser users. -This allows the web to remain a freely-available public resource. +In addition, because web technologies are created openly, in collaboration between many different companies, it means that no one company gets to control them, which is a really good thing. You wouldn't want a single company suddenly deciding to put the entire web behind a paywall, or releasing a new version of HTML that everyone has to buy to continue making websites, or worse still, deciding they aren't interested any more and just turning it off. -### Don't break the web +Open standards enable the web to remain a freely-available public resource, where anyone can write the code to build a website for free, and anyone can contribute to the standards creation process. -Another phrase you'll hear around open web standards is "don't break the web" — the idea is that any new web technology that is introduced should be backwards compatible with what went before it (i.e. old websites will still continue to work), and forwards compatible (future technologies in turn will be compatible with what we currently have). As you go through the learning material presented here, you'll start to learn how this is made possible with some very clever design and implementation work. +### Accessible and interoperable -## Standards bodies +The web and web browsers are fundamentally designed so that web content is **accessible** to people with disabilities. It was originally envisaged as a great leveller, enabling people to access information regardless of circumstance. This means that, for example: -[W3C](https://www.w3.org/), [WHATWG](https://whatwg.org/), [TC39](https://tc39.es/), and [Khronos Group](https://www.khronos.org/) +- People who are unable to use a mouse or pointing device can use the keyboard to navigate the web. +- People who are visually impaired can magnify content, or use a program called a **screen reader** to read content out to them and describe controls in a way that makes sense. -The full W3C standards process is deep and academic. For now, you should understand how different individuals and companies get involved in the standards process. +> [!NOTE] +> You'll learn more about [Accessibility](/en-US/docs/Learn_web_development/Core/Accessibility) later on in the learning pathway. - +In addition, web technologies are intended to be **interoperable**. Because web technologies are implemented according to published standards, browsers should provide the same rendered output for a given input (for example, HTML, CSS, or JS code) — in other words, a website should work consistently across multiple browsers. -## The web standards lifecycle +### Don't break the web -The different maturity stages are designed to weed out issues (e.g. interoperability issues, patent issues). +Another phrase you'll hear around open web standards is "don't break the web". The idea behind this is that any new web technology should be backwards compatible with what went before it, so existing websites will continue to work in the same way as they did before. - +Web browser vendors should be able to implement new web technologies without causing a difference in rendering or functionality that would cause their users to think a website is broken and try another browser as a result. ## Overview of modern web technologies @@ -107,7 +137,7 @@ There are a number of technologies to learn if you want to be a front-end web de - HTML is for structure and semantics (meaning). - CSS is for styling and layout. -- JavaScript is for controlling dynamic behavior. +- JavaScript and APIs are for controlling dynamic behavior. #### HTML @@ -125,7 +155,7 @@ If we adopted a house-building analogy, HTML would be like the foundations and w #### CSS -Cascading Style Sheets (**CSS**) is a rule-based language used to apply styles to your HTML — for example, setting text and background colors, adding borders, animating things, or laying out a page in a certain way. As a simple example, the following code would turn our HTML paragraph red: +Cascading Style Sheets (**CSS**) is a rule-based language used to apply styles to your HTML — for example, setting text and background colors, adding borders, animating things, or laying out a page in a certain way. As a simple example, the following code would turn all HTML paragraphs red: ```css p { @@ -135,30 +165,32 @@ p { In the house analogy, CSS is like the paint, wallpaper, carpets and paintings you'd use to make the house look nice. -#### JavaScript +#### JavaScript (and APIs) -**JavaScript** is the programming language we use to add interactivity to websites, from dynamic style switching, to fetching updates from the server, right through to complex 3D graphics. The following simple JavaScript will store a reference to our paragraph in memory and change the text inside it: +**JavaScript** is the programming language we use to add interactivity to websites, from dynamic style switching, to fetching updates from the server, right through to complex 3D graphics. The following simple JavaScript store a reference to a paragraph in memory and change the text inside it: ```js let pElem = document.querySelector("p"); pElem.textContent = "We changed the text!"; ``` -In the house analogy, JavaScript is like the cooker, TV, Microwave, or hairdryer — the things that give your house useful functionality. +You'll also hear the term **APIs** along with JavaScript. API stands for **Application Programming Interface**. In general terms, an API is a bit of code that allows you to control other more complex bits of code or other functionality on your computer (such as hardware devices like your webcam or microphone) in a manageable way. -#### Separating the layers +For example, writing your own interface to communicate with your webcam and capture a video stream from it, but the JavaScript [`getUserMedia()`](/en-US/docs/Web/API/MediaDevices/getUserMedia#examples) API method allows you to do this fairly easily. It does all the hard work for you, behind the scenes, so you don't need to reinvent the wheel each time. -Separating the technology layers is a good idea, for: +The simple code snippet above also uses an API. [`querySelector()`](/en-US/docs/Web/API/Document/querySelector) and [`textContent`](/en-US/docs/Web/API/Node/textContent) are both parts of the [Document Object Model (DOM)](/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting) family of APIs, which allow you to use JavaScript to manipulate web documents. -- Code management and comprehension. -- Teamwork/separation of roles. -- Performance. +In the house analogy, JavaScript is like the cooker, TV, Microwave, or hairdryer — the things that give your house useful functionality. + +### Other web technologies -In reality, the separation is not always clear. It is an ideal to aim for where possible rather than an absolute. +There are other technologies used on the web, for example: -- A prime example is the case of using JavaScript to dynamically update CSS styling on-the-fly in response to app state changes, user choices, etc. -- Often this is done by modifying the Element.style.x properties, which results in inline CSS being injected into HTML. A better strategy is to add/change classes on elements to avoid inline CSS. -- Much more severe is the case of JavaScript frameworks that use various HTML-in-JavaScript or CSS-in-JavaScript custom syntax, which results in a lot of mixing of syntax types. +- [HTTP](/en-US/docs/Web/HTTP) for communicating between clients and servers, as mentioned earlier. +- [SVG](/en-US/docs/Web/SVG) for creating and manipulating vector graphics. +- [MathML](/en-US/docs/Web/MathML) for describing mathematical formulae. + +However, HTML, CSS, and JavaScript by far the most important technologies to learn, so we will focus mainly on those in our learning pathway. ### Tools @@ -166,44 +198,45 @@ Once you've learned the "raw" technologies that can be used to build web pages ( - The [developer tools](/en-US/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools) inside modern browsers that can be used to debug your code. - [Testing tools](/en-US/docs/Learn_web_development/Extensions/Testing) that can be used to run tests to show whether your code is behaving as you intended it to. -- Libraries and frameworks built on top of JavaScript that allow you to build certain types of website much more quickly and effectively. -- So-called "Linters", which take a set of rules, look at your code, and highlight places where you haven't followed the rules properly. -- Minifiers, which remove all the whitespace from your code files to make it so that they are smaller and therefore download from the server more quickly. +- [Frameworks and libraries](/en-US/docs/Learn_web_development/Core/Frameworks_libraries) built on top of JavaScript that allow you to build certain types of website much more quickly and effectively. +- So-called **Linters** and **formatters**, which take a set of rules for coding style, look at your code, and update your code to follow those rules. Prettier, which you [met earlier in the course](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors#enhancing_your_code_editor_with_extensions), is an example of a formatter. ### Server-side languages and frameworks HTML, CSS, and JavaScript are front-end (or client-side) languages, which means they are run by the browser to produce a website front-end that your users can use. -There are another class of languages called back-end (or server-side) languages, meaning that they are run on the server before the result is then sent to the browser to be displayed. A typical use for a server-side language is to get some data out of a database and generate some HTML to contain the data, before then sending the HTML over to the browser to display it to the user. +There are another class of languages called back-end (or server-side) languages, meaning that they are run on the server before the result is then sent to the browser to be displayed. A typical use for a server-side language is to get some data out of a database, generate some HTML to contain the data, then send the HTML over to the browser to display it to the user. -Example server-side frameworks include ASP.NET (in C#), Django (in Python), Laravel (in PHP), and Next.js (in JavaScript). +Example server-side frameworks include ASP.NET (C#), Django (Python), Laravel (PHP), and Next.js (JavaScript). ## Web best practices -We have briefly talked about the technologies that you'll use to build websites. Now let's discuss the best practices you should employ to make sure you are using those technologies in the best way that you can. +We have briefly talked about the technologies that you'll use to build websites. Now let's discuss the best practices that web developers generally employ to ensure that their websites are usable by as many people as possible. When doing web development, the main cause of uncertainty comes from the fact that you don't know what combination of technology each user will use to view your website: - User 1 might be looking at it on an iPhone, with a small, narrow screen. - User 2 might be looking at it on a Windows laptop with a widescreen monitor attached to it. -- User 3 might be blind, and using a screen reader to read the web page out to them. +- User 3 might be visually impaired, and using a screen reader to read and interact with the web page. - User 4 might be using a really old desktop machine that can't run modern browsers. -Because you don't know exactly what your users will use, you need to design defensively — make your website as flexible as possible, so that all of the above users can make use of it, even if they might not all get the same experience. In short, we are trying to make the web work for all, as much as possible. - -You'll come across the below concepts at some point in your studies. - -- **Progressive enhancement** is the practice of creating a minimal experience that provides the essential functionality to all users, and layering on a better experience and other enhancements in browsers that can support them. Progressive enhancement is often seen as unimportant, because browsers tend to support new features more consistently these days, and people tend to have faster internet connections. However, you should think about examples relevant to the modern day — cutting down on decoration to make a mobile experience smoother and save on data, or providing a simpler, lower-bandwidth experience for users in developing countries who might still pay for home internet by the megabyte. -- **Cross-browser compatibility** is the practice of trying to make sure your webpage works across as many devices as possible. This includes using technologies that all the browsers support, delivering better experiences to browsers that can handle them (progressive enhancement), and/or writing code so that it falls back to a simpler but still usable experience in older browsers (graceful degradation). It also involves a lot of testing to see if anything fails in certain browsers, and then more work to fix those failures. -- **Responsive web design** is the practice of making your functionality and layouts flexible so they can automatically adapt to different browsers. An obvious example is a website that is laid out one way in a widescreen browser on the desktop, but displays as a more compact, single-column layout on mobile phone browsers. Try adjusting the width of your browser window now, and see what happens. -- **Performance** means getting websites to load as quickly as possible, but also making them intuitive and easy to use so that users don't get frustrated and go somewhere else. -- **Accessibility** means making your websites usable by as many different kinds of people as possible (related concepts are diversity and inclusion, and inclusive design). This includes people with visual impairments, hearing impairments, cognitive disabilities, or physical disabilities. It also goes beyond people with disabilities — how about young or old people, people from different cultures, people using mobile devices, or people with unreliable or slow network connections? -- **Internationalization** means making websites usable by people from different cultures, who speak different languages to your own. There are technical considerations here (such as altering your layout so that it still works OK for right-to-left, or even vertical languages), and human ones (such as using simple, non-slang language so that people who have your language as their second or third language are more likely to understand your text). -- **Privacy & Security**. These two concepts are related but different. Privacy refers to allowing people to go about their business privately and not spying on them or collecting more of their data than you absolutely need to. Security refers to constructing your website in a secure way so that malicious users cannot steal information contained on it from you or your users. - -## See also - -- [History of the World Wide Web](https://en.wikipedia.org/wiki/History_of_the_World_Wide_Web) -- [How does the internet work?](/en-US/docs/Learn_web_development/Howto/Web_mechanics/How_does_the_Internet_work) +Because you don't know exactly what your users will use, you need to design defensively — make your website as flexible as possible, so that all of the above users can make use of it, even if they might not all get the same experience. + +You'll come across the below concepts at some point in your studies, which represent best practices your websites should ideally adhere to. Don't worry about these too much for now. Throughout most of the course we try to teach these implicitly, meaning that when we teach you HTML, CSS, and JavaScript, our examples will follow the best practices where possible. Later on in your learning journey you will likely explore explicit teachings in these areas. + +- **Progressive enhancement** + - : Creating a minimal experience that provides the essential functionality to all users, and layering on a better experience and other enhancements in browsers that can support them. Progressive enhancement is often seen as unimportant, because browsers tend to support new features more consistently these days, and people tend to have faster internet connections with higher limits on data usage. However, consider examples like cutting down on decoration to make a mobile experience smoother and save on data or providing a lighter, low-bandwidth experience for users who pay by the megabyte or have metered connections. +- **Cross-browser compatibility** + - : Trying to make sure your webpage works across as many devices as possible. This includes using technologies that all the browsers support, delivering better experiences to browsers that can handle them (progressive enhancement), and/or writing code so that it falls back to a simpler but still usable experience in older browsers (termed **graceful degradation**). It also requires testing to see if anything fails in certain browsers, and then more work to fix those failures. +- **Separating the layers** + - : Putting your content (HTML), styling (CSS), and behavior (JavaScript) in different code files, rather than lumping them all together in the same place. This is a good idea for many reasons, including code management and comprehension and teamwork/separation of roles. In reality, the separation is not always clear. It is an ideal to aim for where possible, rather than an absolute. +- **Responsive web design** + - : Making your functionality and layouts flexible so they can automatically adapt to different browsers. An obvious example is a website that is laid out one way in a widescreen browser on the desktop, but displays as a more compact, single-column layout on mobile phone browsers. Try adjusting the width of your browser window now, and see what happens to the site layout. +- **Performance** + - : Getting websites to load as quickly as possible, but also making them intuitive and easy to use so that users don't get frustrated and go somewhere else. +- **Internationalization** + - : Making websites usable by people from different cultures, who speak different languages to your own. There are technical considerations here (such as altering your layout so that it still works OK for right-to-left or top-to-bottom languages), and human ones (such as using simple, non-slang language so that diverse cultures are more likely to understand your text). +- **Privacy** & **Security** + - : These two concepts are related but different. Privacy refers to allowing people to go about their business privately and not spying on them or collecting more of their data than you absolutely need to. Security refers to constructing your website in a secure way so that malicious users cannot steal information contained on it from you or your users. {{PreviousMenuNext("Learn_web_development/Getting_started/Web_standards/How_the_web_works", "Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites", "Learn_web_development/Getting_started/Web_standards")}} diff --git a/files/en-us/learn_web_development/getting_started/your_first_website/creating_the_content/index.md b/files/en-us/learn_web_development/getting_started/your_first_website/creating_the_content/index.md index 541f2ebb8b0dc95..2af7d144a658776 100644 --- a/files/en-us/learn_web_development/getting_started/your_first_website/creating_the_content/index.md +++ b/files/en-us/learn_web_development/getting_started/your_first_website/creating_the_content/index.md @@ -156,7 +156,7 @@ The keywords for alt text are "descriptive text". The alt text you write should Let's get your image displaying now. 1. Inside the `first-website` folder, Create a new folder called `images`, and put the image you chose in the previous example inside this folder. -2. Inside the `` tag's `alt` attribute value, enter the path to your image. It is inside a folder called `images`, which is inside the same directory as your `index.html` file, therefore the path will be `images/` plus the name of your image. For example, if your image was called `firefox-icon.png`, your `src` attribute would look like this: `src="images/firefox-icon.png"`. +2. Inside the `` tag's `src` attribute value, enter the path to your image. It is inside a folder called `images`, which is inside the same directory as your `index.html` file, therefore the path will be `images/` plus the name of your image. For example, if your image was called `firefox-icon.png`, your `src` attribute would look like this: `src="images/firefox-icon.png"`. 3. replace the `alt` attribute value — `My test image` — with some text that better describes your image. 4. Open your `index.html` file inside a web browser. You should see your image displayed. If not, check your `` element against our code above; make sure it is not missing any of the syntax, such as the quote marks. Make sure the image filename is correct. diff --git a/files/en-us/learn_web_development/howto/tools_and_setup/set_up_a_local_testing_server/index.md b/files/en-us/learn_web_development/howto/tools_and_setup/set_up_a_local_testing_server/index.md index 74451dfee5520f0..c0f201c9f30d7b8 100644 --- a/files/en-us/learn_web_development/howto/tools_and_setup/set_up_a_local_testing_server/index.md +++ b/files/en-us/learn_web_development/howto/tools_and_setup/set_up_a_local_testing_server/index.md @@ -52,9 +52,10 @@ To get around the problem of async requests, we need to test such examples by ru If you only need HTML, CSS and JavaScript, and no server-side language, the easiest way may be to check for extensions in your code editor. As well as automating installation and set-up for your local HTTP server, they also integrate nicely with your code editors. Testing local files in an HTTP server may be one click away. -For VS Code, you can check the following free extension: +For VS Code, try out the following free extensions: -- `vscode-preview-server`. You can check it on its [home page](https://marketplace.visualstudio.com/items?itemName=yuichinukiyama.vscode-preview-server). +- [Live Preview](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server) +- [Preview on Web Server](https://marketplace.visualstudio.com/items?itemName=yuichinukiyama.vscode-preview-server) ### Using Node.js diff --git a/files/en-us/mozilla/add-ons/webextensions/api/browseraction/seticon/index.md b/files/en-us/mozilla/add-ons/webextensions/api/browseraction/seticon/index.md index 2e7d602304cce3e..528db7dc16eb48b 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/browseraction/seticon/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/browseraction/seticon/index.md @@ -38,7 +38,7 @@ let settingIcon = browser.browserAction.setIcon( Use a dictionary object to specify multiple `ImageData` objects in different sizes, so the icon does not have to be scaled for a device with a different pixel density. If `imageData` is a dictionary, the value of each property is an `ImageData` object, and its name is its size, like this: ```js - let settingIcon = browser.action.setIcon({ + let settingIcon = browser.browserAction.setIcon({ imageData: { 16: image16, 32: image32, @@ -55,7 +55,7 @@ let settingIcon = browser.browserAction.setIcon( Use a dictionary object to specify multiple icon files in different sizes, so the icon does not have to be scaled for a device with a different pixel density. If `path` is a dictionary, the value of each property is a relative path, and its name is its size, like this: ```js - let settingIcon = browser.action.setIcon({ + let settingIcon = browser.browserAction.setIcon({ path: { 16: "path/to/image16.jpg", 32: "path/to/image32.jpg", diff --git a/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/index.md b/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/index.md index 9139b6745bc6055..2531e47ebd64c1e 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/index.md @@ -24,7 +24,7 @@ The `"declarativeNetRequestFeedback"` permission is required to use {{WebExtAPIR The declarative rules are defined by four fields: - `id` – An ID that uniquely identifies a rule within a ruleset. Mandatory and should be >= 1. -- `priority` – The rule priority. When specified, it should be >= 1. Defaults to 1. See [Matching precedents](#matching_precedents) for details on how priority affects which rules are applied. +- `priority` – The rule priority. When specified, it should be >= 1. Defaults to 1. See [Matching precedence](#matching_precedence) for details on how priority affects which rules are applied. - `condition` – The {{WebExtAPIRef("declarativeNetRequest.RuleCondition","condition")}} under which this rule is triggered. - `action` – The {{WebExtAPIRef("declarativeNetRequest.RuleAction","action")}} to take when the rule is matched. Rules can do one of these things: - block a network request. @@ -115,7 +115,7 @@ The number of dynamic and session-scoped rules an extension can add is limited t - In Safari and up to Chrome 119 and Firefox 127, the value of {{WebExtAPIRef("declarativeNetRequest.MAX_NUMBER_OF_DYNAMIC_AND_SESSION_RULES","MAX_NUMBER_OF_DYNAMIC_AND_SESSION_RULES")}}. - From Chrome 120 and Firefox 128, the values of {{WebExtAPIRef("declarativeNetRequest.MAX_NUMBER_OF_DYNAMIC_RULES","MAX_NUMBER_OF_DYNAMIC_RULES")}} and {{WebExtAPIRef("declarativeNetRequest.MAX_NUMBER_OF_SESSION_RULES","MAX_NUMBER_OF_SESSION_RULES")}} -## Matching precedents +## Matching precedence When the browser evaluates how to handle requests, it checks each extension's rules that have a condition that matches the request and chooses the one to consider applying as follows: diff --git a/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/modifyheaderinfo/index.md b/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/modifyheaderinfo/index.md index 628a353b9679426..4d3993facdd1fcc 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/modifyheaderinfo/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/modifyheaderinfo/index.md @@ -13,7 +13,7 @@ The request or response header to modify for a request, declared in the `rule.ac Each object describes one header modification. To modify multiple headers, multiple objects can be specified in these arrays, or across multiple rules. -Matching `modifyHeaders` rules are applied in the order described at [Matching precedents](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest#matching_precedents). +Matching `modifyHeaders` rules are applied in the order described at [Matching precedence](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest#matching_precedence). Within each extension, all `modifyHeaders` rules with a priority lower than or equal to matching `allow` or `allowAllRequests` rules are ignored. If multiple `modifyHeaders` rules specify the same header, the resulting modification for the header is determined based on the priority of each rule and the operations specified: diff --git a/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/rule/index.md b/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/rule/index.md index 98e1029faaa30f4..7beec4ee35f2398 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/rule/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/rule/index.md @@ -22,7 +22,7 @@ Values of this type are objects. They contain these properties: - `id` - : `number`. An ID that uniquely identifies a rule within a ruleset. Mandatory and should be >= 1. - `priority` {{optional_inline}} - - : `number`. Rule priority. Defaults to 1. When specified, should be >= 1. See [Matching precedents](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest#matching_precedents) for details on how priority affects which rules are applied. + - : `number`. Rule priority. Defaults to 1. When specified, should be >= 1. See [Matching precedence](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest#matching_precedence) for details on how priority affects which rules are applied. {{WebExtExamples("h2")}} diff --git a/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/ruleaction/index.md b/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/ruleaction/index.md index 97fc5cee5e3f785..2153f0c8b730dfb 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/ruleaction/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/ruleaction/index.md @@ -20,7 +20,7 @@ Values of this type are objects. They contain these properties: - `responseHeaders` {{optional_inline}} - : {{WebExtAPIRef("declarativeNetRequest.ModifyHeaderInfo")}}. The response headers to modify for the request. Only valid if `type` is `"modifyHeaders"`. - `type` - - : A `string`. The type of action to perform. Possible values are `"block"`, `"redirect"`, `"allow"`, `"upgradeScheme"`, `"modifyHeaders"`, and `"allowAllRequests"`. The use of the `"redirect"` and `"modifyHeaders"` actions require [host permissions](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#host_permissions) for the request and request initiator. The "block" and "upgradeScheme" actions also require host permissions unless the "declarativeNetRequest" permission is specified. Without these permissions, matching rules are ignored. See [Permissions at declarativeNetRequest](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest#permissions) for more information. More details about the effects of rule actions are provided in [Matching precedents](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest#matching_precedents). + - : A `string`. The type of action to perform. Possible values are `"block"`, `"redirect"`, `"allow"`, `"upgradeScheme"`, `"modifyHeaders"`, and `"allowAllRequests"`. The use of the `"redirect"` and `"modifyHeaders"` actions require [host permissions](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#host_permissions) for the request and request initiator. The "block" and "upgradeScheme" actions also require host permissions unless the "declarativeNetRequest" permission is specified. Without these permissions, matching rules are ignored. See [Permissions at declarativeNetRequest](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest#permissions) for more information. More details about the effects of rule actions are provided in [Matching precedence](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest#matching_precedence). {{WebExtExamples("h2")}} diff --git a/files/en-us/mozilla/add-ons/webextensions/api/omnibox/ondeletesuggestion/index.md b/files/en-us/mozilla/add-ons/webextensions/api/omnibox/ondeletesuggestion/index.md index 6c22fd866ddbe7b..dcefd3d7eda221b 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/omnibox/ondeletesuggestion/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/omnibox/ondeletesuggestion/index.md @@ -8,7 +8,7 @@ browser-compat: webextensions.api.omnibox.onDeleteSuggestion {{AddonSidebar}} Fired whenever the user deletes a suggestion. -A suggestion can be deleted when {{WebExtAPIRef("omnibox.SuggestResult","SuggestResult")}}`.deletable` is set to true. +A suggestion can be deleted when the property `deletable` of a {{WebExtAPIRef("omnibox.SuggestResult","SuggestResult")}} is set to true. ## Syntax @@ -54,5 +54,3 @@ browser.omnibox.onDeleteSuggestion.addListener(logDeletedSuggestion); > [!NOTE] > This API is based on Chromium's [`chrome.omnibox`](https://developer.chrome.com/docs/extensions/reference/api/omnibox) API. -> -> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License. diff --git a/files/en-us/mozilla/add-ons/webextensions/api/pageaction/seticon/index.md b/files/en-us/mozilla/add-ons/webextensions/api/pageaction/seticon/index.md index c1be69c07a2eaca..11e01053be312a1 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/pageaction/seticon/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/pageaction/seticon/index.md @@ -36,7 +36,7 @@ let settingIcon = browser.pageAction.setIcon( Use a dictionary object to specify multiple `ImageData` objects in different sizes, so the icon does not have to be scaled for a device with a different pixel density. If `imageData` is a dictionary, the value of each property is an `ImageData` object, and its name is its size, like this: ```js - let settingIcon = browser.action.setIcon({ + let settingIcon = browser.pageAction.setIcon({ imageData: { 16: image16, 32: image32, @@ -53,7 +53,7 @@ let settingIcon = browser.pageAction.setIcon( Use a dictionary object to specify multiple icon files in different sizes, so the icon does not have to be scaled for a device with a different pixel density. If `path` is a dictionary, the value of each property is a relative path, and its name is its size, like this: ```js - let settingIcon = browser.action.setIcon({ + let settingIcon = browser.pageAction.setIcon({ path: { 16: "path/to/image16.jpg", 32: "path/to/image32.jpg", diff --git a/files/en-us/mozilla/add-ons/webextensions/api/runtime/getbrowserinfo/index.md b/files/en-us/mozilla/add-ons/webextensions/api/runtime/getbrowserinfo/index.md index aa951383c114954..4cc47005c00baa3 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/runtime/getbrowserinfo/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/runtime/getbrowserinfo/index.md @@ -52,6 +52,3 @@ gettingInfo.then(gotBrowserInfo); ## Browser compatibility {{Compat}} - -> [!NOTE] -> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License. diff --git a/files/en-us/mozilla/add-ons/webextensions/api/runtime/getframeid/index.md b/files/en-us/mozilla/add-ons/webextensions/api/runtime/getframeid/index.md index b87bd3a538ff0c4..e2ad495a9dc6cab 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/runtime/getframeid/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/runtime/getframeid/index.md @@ -57,6 +57,3 @@ visit(window); ## Browser compatibility {{Compat}} - -> [!NOTE] -> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License. diff --git a/files/en-us/mozilla/add-ons/webextensions/api/sidebaraction/seticon/index.md b/files/en-us/mozilla/add-ons/webextensions/api/sidebaraction/seticon/index.md index 02a6adb07378efd..02a51f72ba741ce 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/sidebaraction/seticon/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/sidebaraction/seticon/index.md @@ -48,7 +48,7 @@ let settingIcon = browser.sidebarAction.setIcon( Use a dictionary object to specify multiple `ImageData` objects in different sizes, so the icon does not have to be scaled for a device with a different pixel density. If `imageData` is a dictionary, the value of each property is an `ImageData` object, and its name is its size, like this: ```js - let settingIcon = browser.action.setIcon({ + let settingIcon = browser.sidebarAction.setIcon({ imageData: { 16: image16, 32: image32, @@ -65,7 +65,7 @@ let settingIcon = browser.sidebarAction.setIcon( Use a dictionary object to specify multiple icon files in different sizes, so the icon does not have to be scaled for a device with a different pixel density. If `path` is a dictionary, the value of each property is a relative path, and its name is its size, like this: ```js - let settingIcon = browser.action.setIcon({ + let settingIcon = browser.sidebarAction.setIcon({ path: { 16: "path/to/image16.jpg", 32: "path/to/image32.jpg", diff --git a/files/en-us/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.md b/files/en-us/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.md index a4e1e1a586ddf3d..94558a98729e656 100644 --- a/files/en-us/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.md @@ -8,9 +8,6 @@ page-type: guide {{WebExtAllCompatTables}} -> [!NOTE] -> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License. - ## See also - [Browser compatibility for manifest.json](/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json) diff --git a/files/en-us/mozilla/firefox/releases/130/index.md b/files/en-us/mozilla/firefox/releases/130/index.md index e14e9dedb38a8b5..ea0b860d2be5395 100644 --- a/files/en-us/mozilla/firefox/releases/130/index.md +++ b/files/en-us/mozilla/firefox/releases/130/index.md @@ -13,7 +13,7 @@ This article provides information about the changes in Firefox 130 that affect d ### HTML - The [`name`](/en-US/docs/Web/HTML/Element/details#name) attribute of the `
` element now allows the grouping of `
` elements, where only one element within a group can be open at a time. This allows you to create an exclusive accordion without using JavaScript ([Firefox bug 1856460](https://bugzil.la/1856460) and [Firefox bug 1909613](https://bugzil.la/1909613)). -- The [`dir`](/en-US/docs/Web/HTML/Global_attributes/dir) and [`lang`](/en-US/docs/Web/HTML/Global_attributes/lang) [global attributes](/en-US/docs/Web/HTML/Global_attributes) now have improved inheritance, including how they work with [shadow DOM](/en-US/docs/Web/API/Web_components/Using_shadow_DOM#attribute_inheritance) ([Firefox bug 1876163](https://bugzil.la/1876163). +- The [`dir`](/en-US/docs/Web/HTML/Global_attributes/dir) and [`lang`](/en-US/docs/Web/HTML/Global_attributes/lang) [global attributes](/en-US/docs/Web/HTML/Global_attributes) now have improved inheritance, including how they work with [shadow DOM](/en-US/docs/Web/API/Web_components/Using_shadow_DOM#attribute_inheritance) ([Firefox bug 1876163](https://bugzil.la/1876163)). ### CSS diff --git a/files/en-us/mozilla/firefox/releases/134/index.md b/files/en-us/mozilla/firefox/releases/134/index.md index c0205f1b0429f48..6fbc363d6211579 100644 --- a/files/en-us/mozilla/firefox/releases/134/index.md +++ b/files/en-us/mozilla/firefox/releases/134/index.md @@ -6,22 +6,18 @@ page-type: firefox-release-notes {{FirefoxSidebar}} -This article provides information about the changes in Firefox 134 that affect developers. Firefox 134 is the current [Beta version of Firefox](https://www.mozilla.org/en-US/firefox/channel/desktop/#beta) and ships on [January 7, 2025](https://whattrainisitnow.com/release/?version=134). +This article provides information about the changes in Firefox 134 that affect developers. Firefox 134 was released on [January 7, 2025](https://whattrainisitnow.com/release/?version=134). ## Changes for web developers -### Developer Tools - ### HTML -#### Removals +No notable changes ### CSS - The {{CSSXRef("align-self")}} and {{CSSXRef("justify-self")}} CSS properties and {{CSSXRef("place-self")}} CSS shorthand property are now supported for [absolutely positioned](/en-US/docs/Learn_web_development/Core/CSS_layout/Positioning#absolute_positioning) elements. ([Firefox bug 1920160](https://bugzil.la/1920160)). -#### Removals - ### JavaScript - Support for the {{jsxref("RegExp.escape()")}} static method that can be used to escape any potential regex syntax characters in a string, returning a new string that can be safely used as a [literal](/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Literal_character) pattern for the {{jsxref("RegExp/RegExp", "RegExp()")}} constructor. ([Firefox bug 1918235](https://bugzil.la/1918235)). @@ -29,20 +25,6 @@ This article provides information about the changes in Firefox 134 that affect d The method takes a callback of any kind (a function that returns or throws, synchronously or asynchronously) and wraps its result in a {{jsxref("Promise")}}. This allows you to use promise semantics ({{jsxref("Promise.then", ".then()")}}, {{jsxref("Promise.catch", ".catch()")}}) to handle the result from any kind of method. ([Firefox bug 1917879](https://bugzil.la/1917879) and [Firefox bug 1905364](https://bugzil.la/1905364)). -#### Removals - -### SVG - -#### Removals - -### HTTP - -#### Removals - -### Security - -#### Removals - ### APIs - The [`PushManager.supportedContentEncodings`](/en-US/docs/Web/API/PushManager/supportedContentEncodings_static) static method is now supported for getting the allowed algorithms for encrypting the payload of a [push message](/en-US/docs/Web/API/Push_API). ([Firefox bug 1497430](https://bugzil.la/1497430)). @@ -55,25 +37,21 @@ This article provides information about the changes in Firefox 134 that affect d - WebRTC simulcast of screen-shared video with the [VP8 codec](/en-US/docs/Web/Media/Formats/Video_codecs#vp8) is now supported (simulcast from other video sources has been enabled for a long time). More precisely, {{domxref("MediaStreamTrack")}} objects for screen and window capture (for example, from {{domxref("MediaDevices.getDisplayMedia()")}}), can now be encoded as multiple simulcast layers when using VP8. ([Firefox bug 1692873](https://bugzil.la/1692873)). -#### Removals - -### WebAssembly - -#### Removals - ### WebDriver conformance (WebDriver BiDi, Marionette) -#### General - #### WebDriver BiDi -#### Marionette - -## Changes for add-on developers +- Implemented the `browser.getClientWindows` command, which allows to retrieve information about the currently opened browser windows ([Firefox bug 1855025](https://bugzilla.mozilla.org/show_bug.cgi?id=1855025)) +- Added support for the `initiatorType` and `destination` fields to all network events ([Firefox bug 1904892](https://bugzilla.mozilla.org/show_bug.cgi?id=1904892) and [Firefox bug 1933331](https://bugzilla.mozilla.org/show_bug.cgi?id=1933331)). They allow to understand why and how the request was created. +- The `browsingContext.navigationStarted` event is no longer emitted when the initial about:blank page is loaded for a new top-level browsing context ([Firefox bug 1922014](https://bugzilla.mozilla.org/show_bug.cgi?id=1922014)) +- We fixed a bug where the `requestTime` of network events would sometimes be set to 0 ([Firefox bug 1930849](https://bugzilla.mozilla.org/show_bug.cgi?id=1930849)) +- The `browsingContext.traverseHistory` command can now only be used with top-level browsing contexts ([Firefox bug 1924859](https://bugzilla.mozilla.org/show_bug.cgi?id=1924859)) +- Improved the reliability of commands sent during a navigation, for instance when a browsing context is being replaced ([Firefox bug 1927073](https://bugzilla.mozilla.org/show_bug.cgi?id=1927073)). -### Removals +#### Marionette -### Other +- The `Addon:Install` and `Addon:Uninstall` commands are now available for GeckoView (Firefox for Android) ([Firefox bug 1806135](https://bugzilla.mozilla.org/show_bug.cgi?id=1806135)). +- The `Addon:Install` command can now be used to install extensions enabled in Private Browsing mode ([Firefox bug 1810718](https://bugzilla.mozilla.org/show_bug.cgi?id=1810718)) ## Experimental web features diff --git a/files/en-us/mozilla/firefox/releases/135/index.md b/files/en-us/mozilla/firefox/releases/135/index.md index 7072fc11aeff79a..279cf708730dc07 100644 --- a/files/en-us/mozilla/firefox/releases/135/index.md +++ b/files/en-us/mozilla/firefox/releases/135/index.md @@ -6,7 +6,7 @@ page-type: firefox-release-notes {{FirefoxSidebar}} -This article provides information about the changes in Firefox 135 that affect developers. Firefox 135 is the current [Nightly version of Firefox](https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly) and ships on [February 4, 2025](https://whattrainisitnow.com/release/?version=135). +This article provides information about the changes in Firefox 135 that affect developers. Firefox 135 is the current [Beta version of Firefox](https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly) and ships on [February 4, 2025](https://whattrainisitnow.com/release/?version=135). ## Changes for web developers diff --git a/files/en-us/mozilla/firefox/releases/136/index.md b/files/en-us/mozilla/firefox/releases/136/index.md new file mode 100644 index 000000000000000..a045afac490c79f --- /dev/null +++ b/files/en-us/mozilla/firefox/releases/136/index.md @@ -0,0 +1,71 @@ +--- +title: Firefox 136 for developers +slug: Mozilla/Firefox/Releases/136 +page-type: firefox-release-notes +--- + +{{FirefoxSidebar}} + +This article provides information about the changes in Firefox 136 that affect developers. Firefox 136 is the current [Nightly version of Firefox](https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly) and ships on [March 4, 2025](https://whattrainisitnow.com/release/?version=136). + +## Changes for web developers + +### Developer Tools + +### HTML + +#### Removals + +### CSS + +#### Removals + +### JavaScript + +#### Removals + +### SVG + +#### Removals + +### HTTP + +#### Removals + +### Security + +#### Removals + +### APIs + +#### DOM + +#### Media, WebRTC, and Web Audio + +#### Removals + +### WebAssembly + +#### Removals + +### WebDriver conformance (WebDriver BiDi, Marionette) + +#### General + +#### WebDriver BiDi + +#### Marionette + +## Changes for add-on developers + +### Removals + +### Other + +## Experimental web features + +These features are newly shipped in Firefox 136 but are disabled by default. To experiment with them, search for the appropriate preference on the `about:config` page and set it to `true`. You can find more such features on the [Experimental features](/en-US/docs/Mozilla/Firefox/Experimental_features) page. + +## Older versions + +{{Firefox_for_developers}} diff --git a/files/en-us/mozilla/firefox/releases/61/index.md b/files/en-us/mozilla/firefox/releases/61/index.md index 70885cc7f3ca58e..f63a36bf024c7a5 100644 --- a/files/en-us/mozilla/firefox/releases/61/index.md +++ b/files/en-us/mozilla/firefox/releases/61/index.md @@ -36,7 +36,7 @@ _No changes._ - CSS parsing has been parallelized ([Firefox bug 1346988](https://bugzil.la/1346988)). - Support for {{cssxref("font-variation-settings")}} and {{cssxref("font-optical-sizing")}} has been enabled by default ([Firefox bug 1447163](https://bugzil.la/1447163)). -- The `grid-gap`, `grid-row-gap`, and `grid-column-gap` properties have been renamed to {{cssxref("gap")}}, {{cssxref("row-gap")}}, and {{cssxref("column-gap")}}, as they are no longer grid-specific ([Firefox bug 1398482](https://bugzil.la/1398482)). See [Box alignment; Gaps between boxes](/en-US/docs/Web/CSS/CSS_box_alignment#gaps_between_boxes) for additional details. The old names have been kept as aliases for web compatibility purposes. +- The `grid-gap`, `grid-row-gap`, and `grid-column-gap` properties have been renamed to {{cssxref("gap")}}, {{cssxref("row-gap")}}, and {{cssxref("column-gap")}}, as they are no longer grid-specific ([Firefox bug 1398482](https://bugzil.la/1398482)). See [Box alignment; Gaps between boxes](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment#gaps_between_boxes) for additional details. The old names have been kept as aliases for web compatibility purposes. - The {{cssxref("flex-basis")}} `content` value is now supported ([Firefox bug 1105111](https://bugzil.la/1105111)). - Percentage values of {{cssxref("column-gap")}} are now supported in [CSS multi-column layout](/en-US/docs/Web/CSS/CSS_multicol_layout) ([Firefox bug 1398537](https://bugzil.la/1398537)). - The CSS {{cssxref(":host")}} pseudo-class is now supported; this selects a custom element from inside its shadow DOM ([Firefox bug 992245](https://bugzil.la/992245)). diff --git a/files/en-us/web/accessibility/aria/attributes/aria-expanded/index.md b/files/en-us/web/accessibility/aria/attributes/aria-expanded/index.md index acc73e3c176f5d0..92c071f4502a693 100644 --- a/files/en-us/web/accessibility/aria/attributes/aria-expanded/index.md +++ b/files/en-us/web/accessibility/aria/attributes/aria-expanded/index.md @@ -21,16 +21,16 @@ Use the `aria-owns` property on the elements that own expandable grouping contai ### Buttons -A button that opens a widget should have `aria-controls` set to the [`id`](/en-US/docs/Web/HTML/Global_attributes/id) of the expandable widget and `aria-expanded` set to the current state of the widget. +A button that toggles a widget should have `aria-controls` set to the [`id`](/en-US/docs/Web/HTML/Global_attributes/id) of the toggled widget and `aria-expanded` set to the current state of the widget. ```html - + ``` When the widget is visible, the controlling object relays that information via having `aria-expanded="true"` set on it. The accessible name of the controlling object should reflect this change. ```html - + ``` ### Menu diff --git a/files/en-us/web/accessibility/aria/attributes/aria-valuenow/index.md b/files/en-us/web/accessibility/aria/attributes/aria-valuenow/index.md index aab9d21454c80dc..7c8469cf80ce081 100644 --- a/files/en-us/web/accessibility/aria/attributes/aria-valuenow/index.md +++ b/files/en-us/web/accessibility/aria/attributes/aria-valuenow/index.md @@ -74,12 +74,8 @@ When the value to be announced, either the actual value or the value as a percen The first rule of ARIA use is "if you can use a native feature with the semantics and behavior you require already built in, instead of repurposing an element and **adding** an ARIA role, state or property to make it accessible, then do so." ```html -
    -
  • readonly long baseVal
    • +
  • long baseVal
  • readonly long animVal
baseVal{{domxref("SVGAnimatedInteger.baseVal", "baseVal")}} long The base value of the given attribute before applying any animations.
animVal{{domxref("SVGAnimatedInteger.animVal", "animVal")}} long If the given attribute or property is being animated, contains the diff --git a/files/en-us/web/api/svganimatedpreserveaspectratio/animval/index.md b/files/en-us/web/api/svganimatedpreserveaspectratio/animval/index.md new file mode 100644 index 000000000000000..13a1862f9a1a375 --- /dev/null +++ b/files/en-us/web/api/svganimatedpreserveaspectratio/animval/index.md @@ -0,0 +1,73 @@ +--- +title: "SVGAnimatedPreserveAspectRatio: animVal property" +short-title: animVal +slug: Web/API/SVGAnimatedPreserveAspectRatio/animVal +page-type: web-api-instance-property +browser-compat: api.SVGAnimatedPreserveAspectRatio.animVal +--- + +{{APIRef("SVG")}} + +The **`animVal`** read-only property of the {{domxref("SVGAnimatedPreserveAspectRatio")}} interface represents the value of the {{SVGAttr("preserveAspectRatio")}} attribute of an SVG element after any animations or transformations are applied. + +## Value + +An {{domxref("SVGPreserveAspectRatio")}} object. + +## Examples + +Consider the following SVG: + +```html + + + + + +``` + +This example defines an `` element which animates its `preserveAspectRatio` attribute. The animation runs once and sets the `fill` attribute to `"freeze"`, so the effect of the animation is persisted after the animation finishes. + +We run the following code immediately when page loads: + +```js +const image = document.querySelector("#myImage"); +const baseVal = image.preserveAspectRatio.baseVal; +const animVal = image.preserveAspectRatio.animVal; + +console.log(baseVal.meetOrSlice); // Output: 1 (SVG_MEETORSLICE_MEET) +console.log(animVal.meetOrSlice); // Output: 1 (SVG_MEETORSLICE_MEET) +``` + +If we log the values of `animVal.meetOrSlice` and `baseVal.meetOrSlice` again after the animation has finished, we will see the following: + +```js +console.log(baseVal.meetOrSlice); // Output: 1 (SVG_MEETORSLICE_MEET) +console.log(animVal.meetOrSlice); // Output: 2 (SVG_MEETORSLICE_SLICE) +``` + +Note that if we set `fill` to `"remove"` (or remove `fill` entirely, since `"remove"` is the default) then the animation effects will be removed when the animation is complete, and `animVal.meetOrSlice` will then revert to `1`. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGPreserveAspectRatio")}} +- {{domxref("SVGElement")}} diff --git a/files/en-us/web/api/svganimatedpreserveaspectratio/baseval/index.md b/files/en-us/web/api/svganimatedpreserveaspectratio/baseval/index.md new file mode 100644 index 000000000000000..068e715b46edc5d --- /dev/null +++ b/files/en-us/web/api/svganimatedpreserveaspectratio/baseval/index.md @@ -0,0 +1,73 @@ +--- +title: "SVGAnimatedPreserveAspectRatio: baseVal property" +short-title: baseVal +slug: Web/API/SVGAnimatedPreserveAspectRatio/baseVal +page-type: web-api-instance-property +browser-compat: api.SVGAnimatedPreserveAspectRatio.baseVal +--- + +{{APIRef("SVG")}} + +The **`baseVal`** read-only property of the {{domxref("SVGAnimatedPreserveAspectRatio")}} interface represents the base (non-animated) value of the {{SVGAttr("preserveAspectRatio")}} attribute of an SVG element. + +## Value + +An {{domxref("SVGPreserveAspectRatio")}} object. + +## Examples + +Consider the following SVG: + +```html + + + + + +``` + +This example defines an `` element which animates its `preserveAspectRatio` attribute. The animation runs once and sets the `fill` attribute to `"freeze"`, so the effect of the animation is persisted after the animation finishes. + +We run the following code immediately when page loads: + +```js +const image = document.querySelector("#myImage"); +const baseVal = image.preserveAspectRatio.baseVal; +const animVal = image.preserveAspectRatio.animVal; + +console.log(baseVal.meetOrSlice); // Output: 1 (SVG_MEETORSLICE_MEET) +console.log(animVal.meetOrSlice); // Output: 1 (SVG_MEETORSLICE_MEET) +``` + +If we log the values of `animVal.meetOrSlice` and `baseVal.meetOrSlice` again after the animation has finished, we will see the following: + +```js +console.log(baseVal.meetOrSlice); // Output: 1 (SVG_MEETORSLICE_MEET) +console.log(animVal.meetOrSlice); // Output: 2 (SVG_MEETORSLICE_SLICE) +``` + +Note that if we set `fill` to `"remove"` (or remove `fill` entirely, since `"remove"` is the default) then the animation effects will be removed when the animation is complete, and `animVal.meetOrSlice` will then revert to `1`. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGPreserveAspectRatio")}} +- {{domxref("SVGElement")}} diff --git a/files/en-us/web/api/svganimatedpreserveaspectratio/index.md b/files/en-us/web/api/svganimatedpreserveaspectratio/index.md index c5031424e626822..61f4cbba4604866 100644 --- a/files/en-us/web/api/svganimatedpreserveaspectratio/index.md +++ b/files/en-us/web/api/svganimatedpreserveaspectratio/index.md @@ -46,9 +46,9 @@ The `SVGAnimatedPreserveAspectRatio` interface is used for attributes of type {{ ## Instance properties -- {{domxref("SVGAnimatedPreserveAspectRatio.baseVal")}} {{ReadOnlyInline}} +- {{domxref("SVGAnimatedPreserveAspectRatio.baseVal", "baseVal")}} {{ReadOnlyInline}} - : A {{domxref("SVGPreserveAspectRatio")}} that represents the base value of the given attribute before applying any animations. -- {{domxref("SVGAnimatedPreserveAspectRatio.animVal")}} {{ReadOnlyInline}} +- {{domxref("SVGAnimatedPreserveAspectRatio.animVal", "animVal")}} {{ReadOnlyInline}} - : A {{domxref("SVGPreserveAspectRatio")}} that represents the current animated value of the given attribute. If the given attribute is not currently being animated, then the {{ domxref("SVGPreserveAspectRatio") }} will have the same contents as `baseVal`. The object referenced by `animVal` is always distinct from the one referenced by `baseVal`, even when the attribute is not animated. ## Instance methods diff --git a/files/en-us/web/api/svganimationelement/getcurrenttime/index.md b/files/en-us/web/api/svganimationelement/getcurrenttime/index.md new file mode 100644 index 000000000000000..2253aa5f722d8e5 --- /dev/null +++ b/files/en-us/web/api/svganimationelement/getcurrenttime/index.md @@ -0,0 +1,67 @@ +--- +title: "SVGAnimationElement: getCurrentTime() method" +short-title: getCurrentTime() +slug: Web/API/SVGAnimationElement/getCurrentTime +page-type: web-api-instance-method +browser-compat: api.SVGAnimationElement.getCurrentTime +--- + +{{APIRef("SVG")}} + +The {{domxref("SVGAnimationElement")}} method `getCurrentTime()` returns a float representing the current time in seconds relative to time zero for the given time container. + +Time zero refers to the moment when the time container begins its timeline. It acts as the starting reference point for all animations within that container. + +A time container is an element or context that defines a local timeline for one or more animations. Animations inside the time container are measured relative to its timeline. If a time container is delayed, paused, or manipulated, all animations within it adjust accordingly. + +## Syntax + +```js-nolint +getCurrentTime() +``` + +### Parameters + +None ({{jsxref('undefined')}}). + +### Return value + +A float. + +## Examples + +This example demonstrates how the `getCurrentTime()` method retrieves the time elapsed since the time container's time zero. + +```html + + + + + +``` + +```js +const animationElement = document.querySelector("animate"); + +setInterval(() => { + const currentTime = animationElement.getCurrentTime(); + console.log( + `Current time relative to the time container: ${currentTime} seconds`, + ); +}, 1000); +``` + +The animation starts at `time zero = 0` and runs indefinitely, and the `getCurrentTime()` value increments continuously within the context of the time container. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svganimationelement/getsimpleduration/index.md b/files/en-us/web/api/svganimationelement/getsimpleduration/index.md new file mode 100644 index 000000000000000..fbc4d9a13ac199a --- /dev/null +++ b/files/en-us/web/api/svganimationelement/getsimpleduration/index.md @@ -0,0 +1,68 @@ +--- +title: "SVGAnimationElement: getSimpleDuration() method" +short-title: getSimpleDuration() +slug: Web/API/SVGAnimationElement/getSimpleDuration +page-type: web-api-instance-method +browser-compat: api.SVGAnimationElement.getSimpleDuration +--- + +{{APIRef("SVG")}} + +The {{domxref("SVGAnimationElement")}} method `getSimpleDuration()` returns a float representing the number of seconds for the simple duration for this animation. + +Simple duration refers to the length of time an animation is supposed to run for a single iteration, without considering repeats, restarts, or extensions. + +This property reflects the {{SVGAttr("dur")}} attribute of the {{SVGElement("animate")}}, {{SVGElement("animateMotion")}} or {{SVGElement("animateTransform")}} element. + +## Syntax + +```js-nolint +getSimpleDuration() +``` + +### Parameters + +None ({{jsxref('undefined')}}). + +### Return value + +A float. + +### Exceptions + +- `NotSupportedError` {{domxref("DOMException")}} + - : Thrown if the `SVGAnimationElement`'s simple duration is undefined (e.g., the end time is indefinite). This happens when the {{SVGAttr("dur")}} attribute is set to `indefinite` or is undefined, as then the simple duration is considered undefined. + +## Examples + +This example demonstrates how the `dur="3s"` attribute defines a simple duration of 3 seconds. + +```html + + + + + +``` + +```js +const animationElement = document.querySelector("animate"); + +const simpleDuration = animationElement.getSimpleDuration(); +console.log(`The simple duration is: ${simpleDuration} seconds`); // Output: 3 +``` + +Since `repeatCount="indefinite"` specifies continuous looping, the effective duration is infinite, but the simple duration remains 3 seconds per iteration. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svganimationelement/getstarttime/index.md b/files/en-us/web/api/svganimationelement/getstarttime/index.md new file mode 100644 index 000000000000000..5e6135ff188fedf --- /dev/null +++ b/files/en-us/web/api/svganimationelement/getstarttime/index.md @@ -0,0 +1,69 @@ +--- +title: "SVGAnimationElement: getStartTime() method" +short-title: getStartTime() +slug: Web/API/SVGAnimationElement/getStartTime +page-type: web-api-instance-method +browser-compat: api.SVGAnimationElement.getStartTime +--- + +{{APIRef("SVG")}} + +The {{domxref("SVGAnimationElement")}} method `getStartTime()` returns a float representing the start time, in seconds, for this animation element's current interval, if it exists, regardless of whether the interval has begun yet. + +The start time returned by `getStartTime()` is measured in seconds relative to the time container's time zero. + +Time zero refers to the moment when the time container begins its timeline. It acts as the starting reference point for all animations within that container. + +A time container is an element or context that defines a local timeline for one or more animations. Animations inside the time container are measured relative to its timeline. If a time container is delayed, paused, or manipulated, all animations within it adjust accordingly. + +This property reflects the {{SVGAttr("begin")}} attribute of the {{SVGElement("animate")}}, {{SVGElement("animateMotion")}} or {{SVGElement("animateTransform")}} element. + +## Syntax + +```js-nolint +getStartTime() +``` + +### Parameters + +None ({{jsxref('undefined')}}). + +### Return value + +A float. + +### Exceptions + +- `InvalidStateError` {{domxref("DOMException")}} + - : Thrown if the `SVGAnimationElement` has no current interval. This happens when the animation element's {{SVGAttr("begin")}} time has not been reached or defined, thus the `getStartTime()` method cannot determine a valid start time. An example can be when the animation is set to start at `begin="click"`, but the user has not yet clicked to trigger it. + +## Examples + +This example demonstrates how `begin="3s"` attribute makes the animation start 3 seconds after the time container's timeline begins. + +```html + + + + + +``` + +```js +const animationElement = document.querySelector("animate"); + +const startTime = animationElement.getStartTime(); +console.log( + `The animation starts at: ${startTime} seconds relative to the time container's timeline`, +); // Output: 3 +``` + +The `getStartTime()` method returns `3.0` because that is the time relative to the time container's time zero. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgcomponenttransferfunctionelement/amplitude/index.md b/files/en-us/web/api/svgcomponenttransferfunctionelement/amplitude/index.md new file mode 100644 index 000000000000000..02724a7a95d503f --- /dev/null +++ b/files/en-us/web/api/svgcomponenttransferfunctionelement/amplitude/index.md @@ -0,0 +1,23 @@ +--- +title: "SVGComponentTransferFunctionElement: amplitude property" +short-title: amplitude +slug: Web/API/SVGComponentTransferFunctionElement/amplitude +page-type: web-api-instance-property +browser-compat: api.SVGComponentTransferFunctionElement.amplitude +--- + +{{APIRef("SVG")}} + +The **`amplitude`** read-only property of the {{domxref("SVGComponentTransferFunctionElement")}} interface reflects the {{SVGAttr("amplitude")}} attribute of the given element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgcomponenttransferfunctionelement/exponent/index.md b/files/en-us/web/api/svgcomponenttransferfunctionelement/exponent/index.md new file mode 100644 index 000000000000000..5ced26c616fcd7b --- /dev/null +++ b/files/en-us/web/api/svgcomponenttransferfunctionelement/exponent/index.md @@ -0,0 +1,23 @@ +--- +title: "SVGComponentTransferFunctionElement: exponent property" +short-title: exponent +slug: Web/API/SVGComponentTransferFunctionElement/exponent +page-type: web-api-instance-property +browser-compat: api.SVGComponentTransferFunctionElement.exponent +--- + +{{APIRef("SVG")}} + +The **`exponent`** read-only property of the {{domxref("SVGComponentTransferFunctionElement")}} interface reflects the {{SVGAttr("exponent")}} attribute of the given element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgcomponenttransferfunctionelement/intercept/index.md b/files/en-us/web/api/svgcomponenttransferfunctionelement/intercept/index.md new file mode 100644 index 000000000000000..516f59a69ce78b4 --- /dev/null +++ b/files/en-us/web/api/svgcomponenttransferfunctionelement/intercept/index.md @@ -0,0 +1,23 @@ +--- +title: "SVGComponentTransferFunctionElement: intercept property" +short-title: intercept +slug: Web/API/SVGComponentTransferFunctionElement/intercept +page-type: web-api-instance-property +browser-compat: api.SVGComponentTransferFunctionElement.intercept +--- + +{{APIRef("SVG")}} + +The **`intercept`** read-only property of the {{domxref("SVGComponentTransferFunctionElement")}} interface reflects the {{SVGAttr("intercept")}} attribute of the given element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgcomponenttransferfunctionelement/offset/index.md b/files/en-us/web/api/svgcomponenttransferfunctionelement/offset/index.md new file mode 100644 index 000000000000000..55950baf17755e3 --- /dev/null +++ b/files/en-us/web/api/svgcomponenttransferfunctionelement/offset/index.md @@ -0,0 +1,23 @@ +--- +title: "SVGComponentTransferFunctionElement: offset property" +short-title: offset +slug: Web/API/SVGComponentTransferFunctionElement/offset +page-type: web-api-instance-property +browser-compat: api.SVGComponentTransferFunctionElement.offset +--- + +{{APIRef("SVG")}} + +The **`offset`** read-only property of the {{domxref("SVGComponentTransferFunctionElement")}} interface reflects the {{SVGAttr("offset")}} attribute of the given element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgcomponenttransferfunctionelement/slope/index.md b/files/en-us/web/api/svgcomponenttransferfunctionelement/slope/index.md new file mode 100644 index 000000000000000..876106fd19bf173 --- /dev/null +++ b/files/en-us/web/api/svgcomponenttransferfunctionelement/slope/index.md @@ -0,0 +1,23 @@ +--- +title: "SVGComponentTransferFunctionElement: slope property" +short-title: slope +slug: Web/API/SVGComponentTransferFunctionElement/slope +page-type: web-api-instance-property +browser-compat: api.SVGComponentTransferFunctionElement.slope +--- + +{{APIRef("SVG")}} + +The **`slope`** read-only property of the {{domxref("SVGComponentTransferFunctionElement")}} interface reflects the {{SVGAttr("slope")}} attribute of the given element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgcomponenttransferfunctionelement/tablevalues/index.md b/files/en-us/web/api/svgcomponenttransferfunctionelement/tablevalues/index.md new file mode 100644 index 000000000000000..3ccbe62cc9d9e55 --- /dev/null +++ b/files/en-us/web/api/svgcomponenttransferfunctionelement/tablevalues/index.md @@ -0,0 +1,23 @@ +--- +title: "SVGComponentTransferFunctionElement: tableValues property" +short-title: tableValues +slug: Web/API/SVGComponentTransferFunctionElement/tableValues +page-type: web-api-instance-property +browser-compat: api.SVGComponentTransferFunctionElement.tableValues +--- + +{{APIRef("SVG")}} + +The **`tableValues`** read-only property of the {{domxref("SVGComponentTransferFunctionElement")}} interface reflects the {{SVGAttr("tableValues")}} attribute of the given element. + +## Value + +An {{domxref("SVGAnimatedNumberList")}} object. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgcomponenttransferfunctionelement/type/index.md b/files/en-us/web/api/svgcomponenttransferfunctionelement/type/index.md new file mode 100644 index 000000000000000..1b948de6afad577 --- /dev/null +++ b/files/en-us/web/api/svgcomponenttransferfunctionelement/type/index.md @@ -0,0 +1,23 @@ +--- +title: "SVGComponentTransferFunctionElement: type property" +short-title: type +slug: Web/API/SVGComponentTransferFunctionElement/type +page-type: web-api-instance-property +browser-compat: api.SVGComponentTransferFunctionElement.type +--- + +{{APIRef("SVG")}} + +The **`type`** read-only property of the {{domxref("SVGComponentTransferFunctionElement")}} interface reflects the {{SVGAttr("type")}} attribute of the given element. It takes one of the [`SVG_FECOMPONENTTRANSFER_TYPE_*`](/en-US/docs/Web/API/SVGComponentTransferFunctionElement#constants) constants defined on this interface. + +## Value + +An {{domxref("SVGAnimatedEnumeration")}} object. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgelement/blur/index.md b/files/en-us/web/api/svgelement/blur/index.md new file mode 100644 index 000000000000000..1b44132a11cf3c1 --- /dev/null +++ b/files/en-us/web/api/svgelement/blur/index.md @@ -0,0 +1,70 @@ +--- +title: "SVGElement: blur() method" +short-title: blur() +slug: Web/API/SVGElement/blur +page-type: web-api-instance-method +browser-compat: api.SVGElement.blur +--- + +{{APIRef("SVG")}} + +The **`SVGElement.blur()`** method removes keyboard focus from the current SVG element. + +## Syntax + +```js-nolint +blur() +``` + +### Parameters + +None. + +### Return value + +None ({{jsxref("undefined")}}). + +## Examples + +### Remove focus from an SVG circle element + +#### HTML + +```html + + + + + +``` + +#### JavaScript + +```js +const circle = document.getElementById("myCircle"); +const focusButton = document.getElementById("focusButton"); +const blurButton = document.getElementById("blurButton"); + +// Focus the circle when the "Focus" button is clicked +focusButton.addEventListener("click", () => { + circle.focus(); +}); + +// Blur the circle when the "Blur" button is clicked +blurButton.addEventListener("click", () => { + circle.blur(); +}); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGElement.focus")}} makes the element the current keyboard focus. +- {{domxref("HTMLElement.blur")}} a similar method for HTML elements. diff --git a/files/en-us/web/api/svgelement/focus/index.md b/files/en-us/web/api/svgelement/focus/index.md new file mode 100644 index 000000000000000..ff818f8eb9aa7a5 --- /dev/null +++ b/files/en-us/web/api/svgelement/focus/index.md @@ -0,0 +1,79 @@ +--- +title: "SVGElement: focus() method" +short-title: focus() +slug: Web/API/SVGElement/focus +page-type: web-api-instance-method +browser-compat: api.SVGElement.focus +--- + +{{APIRef("SVG")}} + +The **`SVGElement.focus()`** method sets focus on the specified SVG element, if it can be focused. +The focused element is the element that will receive keyboard and similar events by default. + +By default the browser will scroll the element into view after focusing it, and it may also provide visible indication of the focused element (typically by displaying a "focus ring" around the element). +Parameter options are provided to disable the default scrolling and force visible indication on elements. + +## Syntax + +```js-nolint +focus() +focus(options) +``` + +### Parameters + +- `options` {{optional_inline}} + + - : An optional object for controlling aspects of the focusing process. + This object may contain the following properties: + + - `preventScroll` {{optional_inline}} + - : A boolean value indicating whether or not the browser should scroll the document to bring the newly-focused element into view. + A value of `false` for `preventScroll` (the default) means that the browser will scroll the element into view after focusing it. + If `preventScroll` is set to `true`, no scrolling will occur. + +### Return value + +None ({{jsxref("undefined")}}). + +## Examples + +### Focusing an SVG element + +This example uses a button to set the focus on an SVG circle element. + +#### HTML + +```html + + + + +``` + +#### JavaScript + +```js +document.getElementById("focusButton").addEventListener("click", () => { + const circle = document.getElementById("myCircle"); + circle.focus(); +}); +``` + +## Specifications + +{{Specifications}} + +## Notes + +- If you call `SVGElement.focus()` from a mousedown event handler, you must call `event.preventDefault()` to keep the focus from leaving the `SVGElement` + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGElement.blur")}} to remove the focus from an element. +- {{domxref("HTMLElement.focus")}} a similar method for HTML elements. diff --git a/files/en-us/web/api/svgelement/index.md b/files/en-us/web/api/svgelement/index.md index 1aafa542875d266..245371a9d80c80c 100644 --- a/files/en-us/web/api/svgelement/index.md +++ b/files/en-us/web/api/svgelement/index.md @@ -21,6 +21,10 @@ _Also inherits properties from the {{DOMxRef("Element")}} interface._ - : A {{DOMxRef("DOMStringMap")}} object which provides a list of key/value pairs of named data attributes which correspond to [custom data attributes](/en-US/docs/Learn_web_development/Howto/Solve_HTML_problems/Use_data_attributes) attached to the element. These can also be defined in SVG using attributes of the form {{SVGAttr("data-*")}}, where `*` is the key name for the pair. This works just like HTML's {{DOMxRef("HTMLElement.dataset")}} property and HTML's [`data-*`](/en-US/docs/Web/HTML/Global_attributes/data-*) global attribute. - {{DOMxRef("SVGElement.className")}} {{Deprecated_Inline}} {{ReadOnlyInline}} - : An {{DOMxRef("SVGAnimatedString")}} that reflects the value of the {{SVGAttr("class")}} attribute on the given element, or the empty string if `class` is not present. This attribute is deprecated and may be removed in a future version of this specification. Authors are advised to use {{DOMxRef("Element.classList")}} instead. +- {{DOMxRef("SVGElement.blur")}} + - : Removes keyboard focus from the currently focused element. +- {{DOMxRef("SVGElement.focus")}} + - : Makes the element the current keyboard focus. - {{DOMxRef("SVGElement.nonce")}} - : Returns the cryptographic number used once that is used by Content Security Policy to determine whether a given fetch will be allowed to proceed. - {{DOMxRef("SVGElement.ownerSVGElement")}} {{ReadOnlyInline}} diff --git a/files/en-us/web/api/svgelement/nonce/index.md b/files/en-us/web/api/svgelement/nonce/index.md new file mode 100644 index 000000000000000..40f7764caef4411 --- /dev/null +++ b/files/en-us/web/api/svgelement/nonce/index.md @@ -0,0 +1,54 @@ +--- +title: "SVGElement: nonce property" +short-title: nonce +slug: Web/API/SVGElement/nonce +page-type: web-api-instance-property +browser-compat: api.SVGElement.nonce +--- + +{{APIRef("SVG")}} + +The **`nonce`** property of the {{DOMxRef("SVGElement")}} interface returns the nonce that is used by [Content Security Policy](/en-US/docs/Web/HTTP/CSP) to determine whether a given fetch will be allowed to proceed. + +## Value + +A String; the cryptographic nonce, or an empty string if no nonce is set. + +## Examples + +### Retrieving a nonce value + +In the past, not all browsers supported the `nonce` IDL attribute, so a workaround is to try to use [`getAttribute`](/en-US/docs/Web/API/Element/getAttribute) as a fallback: + +```js +const svg = document.querySelector("svg"); +const nonce = svg.nonce || svg.getAttribute("nonce"); + +// Modern browsers hide the nonce attribute from getAttribute() +console.log(nonce); // Prefer using `svg.nonce` +``` + +However, recent browsers version hide `nonce` values that are accessed this way (an empty string will be returned). The IDL property (`svg['nonce']`) will be the only way to access nonces. + +Nonce hiding helps prevent attackers from exfiltrating nonce data via mechanisms that can grab data from content attributes like this CSS selector: + +```css example-bad +svg[nonce~="whatever"] { + background: url("https://evil.com/nonce?whatever"); +} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLElement.nonce")}} a similar method for HTML elements. +- [`nonce` global attribute](/en-US/docs/Web/HTML/Global_attributes/nonce) +- [Content Security Policy](/en-US/docs/Web/HTTP/CSP) +- CSP: {{CSP("script-src")}} diff --git a/files/en-us/web/api/svgelement/ownersvgelement/index.md b/files/en-us/web/api/svgelement/ownersvgelement/index.md new file mode 100644 index 000000000000000..60ccb22953916ae --- /dev/null +++ b/files/en-us/web/api/svgelement/ownersvgelement/index.md @@ -0,0 +1,46 @@ +--- +title: "SVGElement: ownerSVGElement property" +short-title: ownerSVGElement +slug: Web/API/SVGElement/ownerSVGElement +page-type: web-api-instance-property +browser-compat: api.SVGElement.ownerSVGElement +--- + +{{APIRef("SVG")}} + +The **`ownerSVGElement`** property of the {{DOMxRef("SVGElement")}} interface reflects the nearest ancestor {{SVGElement("svg")}} element. `null` if the given element is the outermost `` element. + +## Value + +An {{DOMxRef("SVGSVGElement")}}. + +## Examples + +### Checking the owner `` element + +```html + + + + + +``` + +```js +const circle = document.getElementById("circle1"); +const ownerSVG = circle.ownerSVGElement; + +if (ownerSVG) { + console.log(`The circle's owner has the ID: ${ownerSVG.id}`); +} else { + console.log("This element is the outermost ."); +} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgelement/tabindex/index.md b/files/en-us/web/api/svgelement/tabindex/index.md new file mode 100644 index 000000000000000..302e734bdad8539 --- /dev/null +++ b/files/en-us/web/api/svgelement/tabindex/index.md @@ -0,0 +1,70 @@ +--- +title: "SVGElement: tabIndex property" +short-title: tabIndex +slug: Web/API/SVGElement/tabIndex +page-type: web-api-instance-property +browser-compat: api.SVGElement.tabIndex +--- + +{{APIRef("SVG")}} + +The **`tabIndex`** property of the {{DOMxRef("SVGElement")}} interface represents the tab order of the current SVG element. + +Tab order is as follows: + +1. Elements with a positive `tabIndex`. Elements that have identical + `tabIndex` values should be navigated in the order they appear. Navigation + proceeds from the lowest `tabIndex` to the highest `tabIndex`. +2. Elements that do not support the `tabIndex` attribute or support it and + assign `tabIndex` to `0`, in the order they appear. + +Elements that are disabled do not participate in the tabbing order. + +Values don't need to be sequential, nor must they begin with any particular value. They +may even be negative, though each browser trims very large values. + +## Value + +An integer. + +## Examples + +### Setting the `tabIndex` property + +```html + + + + + + +``` + +```js +const svg1 = document.getElementById("svg1"); +const svg2 = document.getElementById("svg2"); + +// Access and modify the tabIndex +console.log(svg1.tabIndex); // 2 +svg2.tabIndex = 1; // Add svg2 to the tab order before svg1 + +// Programmatically focus on an element with negative tabIndex +svg1.tabIndex = -1; +svg1.focus(); // Works, even though it is not in the tabbing order +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLElement.tabIndex")}} a similar method for HTML elements. +- [Accessibility of keyboard-navigable JavaScript widgets](/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets) +- The HTML + [`tabindex`](/en-US/docs/Web/HTML/Global_attributes/tabindex) + global attribute. diff --git a/files/en-us/web/api/svgelement/viewportelement/index.md b/files/en-us/web/api/svgelement/viewportelement/index.md new file mode 100644 index 000000000000000..67c40ebe3cf819c --- /dev/null +++ b/files/en-us/web/api/svgelement/viewportelement/index.md @@ -0,0 +1,49 @@ +--- +title: "SVGElement: viewportElement property" +short-title: viewportElement +slug: Web/API/SVGElement/viewportElement +page-type: web-api-instance-property +browser-compat: api.SVGElement.viewportElement +--- + +{{APIRef("SVG")}} + +The **`viewportElement`** property of the {{DOMxRef("SVGElement")}} interface represents the `SVGElement` which established the current viewport. Often the nearest ancestor {{SVGElement("svg")}} element. `null` if the given element is the outermost `` element. + +## Value + +An {{DOMxRef("SVGElement")}}. + +## Examples + +### Retrieving the `viewportElement` + +```html + + + + + +``` + +```js +const circle = document.getElementById("circle"); +const innerSvg = document.getElementById("innerSvg"); +const outerSvg = document.getElementById("outerSvg"); + +console.log(circle.viewportElement); // Output: ... +console.log(innerSvg.viewportElement); // Output: ... +console.log(outerSvg.viewportElement); // Output: null +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGElement.ownerSVGElement")}}: Retrieves the nearest ancestor `` element for the current SVG element. diff --git a/files/en-us/web/api/svgfecolormatrixelement/in1/index.md b/files/en-us/web/api/svgfecolormatrixelement/in1/index.md new file mode 100644 index 000000000000000..b830c1f1464a6a7 --- /dev/null +++ b/files/en-us/web/api/svgfecolormatrixelement/in1/index.md @@ -0,0 +1,68 @@ +--- +title: "SVGFEColorMatrixElement: in1 property" +short-title: in1 +slug: Web/API/SVGFEColorMatrixElement/in1 +page-type: web-api-instance-property +browser-compat: api.SVGFEColorMatrixElement.in1 +--- + +{{APIRef("SVG")}} + +The **`in1`** read-only property of the {{domxref("SVGFEColorMatrixElement")}} interface reflects the {{SVGAttr("in")}} attribute of the given element. + +## Value + +An {{domxref("SVGAnimatedString")}} object. + +## Examples + +In this example, two {{SVGElement("feColorMatrix")}} elements are defined in a filter, each with a different `in` attribute. + +```html + + + + + + + + +``` + +We can access the `in` attribute: + +```js +const colorMatrices = document.querySelectorAll("feColorMatrix"); + +console.log(colorMatrices[0].in1.baseVal); // Output: "SourceGraphic" +console.log(colorMatrices[1].in1.baseVal); // Output: "BackgroundImage" +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedString")}} diff --git a/files/en-us/web/api/svgfecolormatrixelement/type/index.md b/files/en-us/web/api/svgfecolormatrixelement/type/index.md new file mode 100644 index 000000000000000..b64d612612fc5bc --- /dev/null +++ b/files/en-us/web/api/svgfecolormatrixelement/type/index.md @@ -0,0 +1,58 @@ +--- +title: "SVGFEColorMatrixElement: type property" +short-title: type +slug: Web/API/SVGFEColorMatrixElement/type +page-type: web-api-instance-property +browser-compat: api.SVGFEColorMatrixElement.type +--- + +{{APIRef("SVG")}} + +The **`type`** read-only property of the {{domxref("SVGFEColorMatrixElement")}} interface reflects the {{SVGAttr("type")}} attribute of the given element. It takes one of the `SVG_FECOLORMATRIX_TYPE_*` constants defined on this interface. + +## Value + +An {{domxref("SVGAnimatedEnumeration")}} object. + +## Examples + +### Accessing the `type` property + +```html + + + + + + + + +``` + +```js +const colorMatrices = document.querySelectorAll("feColorMatrix"); + +console.log(colorMatrices[0].type.baseVal); // Output: 1 (SVG_FECOLORMATRIX_TYPE_MATRIX) +console.log(colorMatrices[1].type.baseVal); // Output: 2 (SVG_FECOLORMATRIX_TYPE_SATURATE) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgfecolormatrixelement/values/index.md b/files/en-us/web/api/svgfecolormatrixelement/values/index.md new file mode 100644 index 000000000000000..a8d232ff63ea3bc --- /dev/null +++ b/files/en-us/web/api/svgfecolormatrixelement/values/index.md @@ -0,0 +1,50 @@ +--- +title: "SVGFEColorMatrixElement: values property" +short-title: values +slug: Web/API/SVGFEColorMatrixElement/values +page-type: web-api-instance-property +browser-compat: api.SVGFEColorMatrixElement.values +--- + +{{APIRef("SVG")}} + +The **`values`** read-only property of the {{domxref("SVGFEColorMatrixElement")}} interface reflects the {{SVGAttr("values")}} attribute of the given element. + +## Value + +An {{domxref("SVGAnimatedNumberList")}} object. + +## Examples + +### Accessing the `values` property + +```html + + + + + + +``` + +```js +const colorMatrix = document.querySelector("feColorMatrix"); + +console.dir(colorMatrix.values.baseVal); // Output: SVGAnimatedNumberList object +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgfediffuselightingelement/diffuseconstant/index.md b/files/en-us/web/api/svgfediffuselightingelement/diffuseconstant/index.md new file mode 100644 index 000000000000000..f23a1311b9f2498 --- /dev/null +++ b/files/en-us/web/api/svgfediffuselightingelement/diffuseconstant/index.md @@ -0,0 +1,59 @@ +--- +title: "SVGFEDiffuseLightingElement: diffuseConstant property" +short-title: diffuseConstant +slug: Web/API/SVGFEDiffuseLightingElement/diffuseConstant +page-type: web-api-instance-property +browser-compat: api.SVGFEDiffuseLightingElement.diffuseConstant +--- + +{{APIRef("SVG")}} + +The **`diffuseConstant`** read-only property of the {{domxref("SVGFEDiffuseLightingElement")}} interface reflects the {{SVGAttr("diffuseConstant")}} attribute of the given {{SVGElement("feDiffuseLighting")}} element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Examples + +### Access the `diffuseConstant` property + +```html + + + + + + + + + + +``` + +```js +const diffuseLighting = document.querySelector("feDiffuseLighting"); + +console.log(diffuseLighting.diffuseConstant.baseVal); // Output: 1.5 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedNumber")}} diff --git a/files/en-us/web/api/svgfediffuselightingelement/height/index.md b/files/en-us/web/api/svgfediffuselightingelement/height/index.md new file mode 100644 index 000000000000000..16d2cdcfe38261f --- /dev/null +++ b/files/en-us/web/api/svgfediffuselightingelement/height/index.md @@ -0,0 +1,41 @@ +--- +title: "SVGFEDiffuseLightingElement: height property" +short-title: height +slug: Web/API/SVGFEDiffuseLightingElement/height +page-type: web-api-instance-property +browser-compat: api.SVGFEDiffuseLightingElement.height +--- + +{{APIRef("SVG")}} + +The **`height`** read-only property of the {{domxref("SVGFEDiffuseLightingElement")}} interface describes the vertical size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGElement("feDiffuseLighting")}} element's {{SVGAttr("height")}} filter primitive attribute. The filter lights an image using the alpha channel as a bump map. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or a [``](/en-US/docs/Web/SVG/Content_type#percentage) relative to the height of the filter region. The default value is `100%`. The property value is a length in user coordinate system units. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feDiffuseLighting = document.querySelector("feDiffuseLighting"); +const verticalSize = feDiffuseLighting.height; +console.log(verticalSize.baseVal.value); // the `height` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEDiffuseLightingElement.width")}} +- {{domxref("SVGFESpecularLightingElement")}} +- {{SVGElement("feSpecularLighting")}} +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfediffuselightingelement/in1/index.md b/files/en-us/web/api/svgfediffuselightingelement/in1/index.md new file mode 100644 index 000000000000000..5b5eb51ea5e2ce8 --- /dev/null +++ b/files/en-us/web/api/svgfediffuselightingelement/in1/index.md @@ -0,0 +1,62 @@ +--- +title: "SVGFEDiffuseLightingElement: in1 property" +short-title: in1 +slug: Web/API/SVGFEDiffuseLightingElement/in1 +page-type: web-api-instance-property +browser-compat: api.SVGFEDiffuseLightingElement.in1 +--- + +{{APIRef("SVG")}} + +The **`in1`** read-only property of the {{domxref("SVGFEDiffuseLightingElement")}} interface reflects the {{SVGAttr("in")}} attribute of the given {{SVGElement("feDiffuseLighting")}} element. + +## Value + +An {{domxref("SVGAnimatedString")}} object. + +## Examples + +### Accessing the `in` Property of `feDiffuseLighting` Element + +```html + + + + + + + + + + +``` + +We can access the `in` attribute of the `feDiffuseLighting` element. + +```js +const diffuseLighting = document.querySelector("feDiffuseLighting"); + +console.log(diffuseLighting.in1.baseVal); // Output: "SourceGraphic" +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedString")}} diff --git a/files/en-us/web/api/svgfediffuselightingelement/kernelunitlengthx/index.md b/files/en-us/web/api/svgfediffuselightingelement/kernelunitlengthx/index.md new file mode 100644 index 000000000000000..81411a969f9fc28 --- /dev/null +++ b/files/en-us/web/api/svgfediffuselightingelement/kernelunitlengthx/index.md @@ -0,0 +1,27 @@ +--- +title: "SVGFEDiffuseLightingElement: kernelUnitLengthX property" +short-title: kernelUnitLengthX +slug: Web/API/SVGFEDiffuseLightingElement/kernelUnitLengthX +page-type: web-api-instance-property +browser-compat: api.SVGFEDiffuseLightingElement.kernelUnitLengthX +--- + +{{APIRef("SVG")}} + +The **`kernelUnitLengthX`** read-only property of the {{domxref("SVGFEDiffuseLightingElement")}} interface reflects the X component of the {{SVGAttr("kernelUnitLength")}} attribute of the given {{SVGElement("feDiffuseLighting")}} element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedNumber")}} diff --git a/files/en-us/web/api/svgfediffuselightingelement/kernelunitlengthy/index.md b/files/en-us/web/api/svgfediffuselightingelement/kernelunitlengthy/index.md new file mode 100644 index 000000000000000..ed79711edab25d2 --- /dev/null +++ b/files/en-us/web/api/svgfediffuselightingelement/kernelunitlengthy/index.md @@ -0,0 +1,27 @@ +--- +title: "SVGFEDiffuseLightingElement: kernelUnitLengthY property" +short-title: kernelUnitLengthY +slug: Web/API/SVGFEDiffuseLightingElement/kernelUnitLengthY +page-type: web-api-instance-property +browser-compat: api.SVGFEDiffuseLightingElement.kernelUnitLengthY +--- + +{{APIRef("SVG")}} + +The **`kernelUnitLengthY`** read-only property of the {{domxref("SVGFEDiffuseLightingElement")}} interface reflects the Y component of the {{SVGAttr("kernelUnitLength")}} attribute of the given {{SVGElement("feDiffuseLighting")}} element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedNumber")}} diff --git a/files/en-us/web/api/svgfediffuselightingelement/result/index.md b/files/en-us/web/api/svgfediffuselightingelement/result/index.md new file mode 100644 index 000000000000000..971b4dfcde8009b --- /dev/null +++ b/files/en-us/web/api/svgfediffuselightingelement/result/index.md @@ -0,0 +1,44 @@ +--- +title: "SVGFEDiffuseLightingElement: result property" +short-title: result +slug: Web/API/SVGFEDiffuseLightingElement/result +page-type: web-api-instance-property +browser-compat: api.SVGFEDiffuseLightingElement.result +--- + +{{APIRef("SVG")}} + +The **`result`** read-only property of the {{domxref("SVGFEDiffuseLightingElement")}} interface describes the assigned name of an SVG filter primitive as a {{domxref("SVGAnimatedString")}}. + +It reflects the {{SVGElement("feDiffuseLighting")}} element's {{SVGAttr("result")}} attribute. The filter lights an image using the alpha channel as a bump map. The attribute value is a {{cssxref("custom-ident")}}. If supplied, then graphics that result from processing this filter primitive can be referenced by an {{SVGAttr("in")}} attribute on a subsequent filter primitive within the same {{SVGElement("filter")}} element. + +If no `result` attribute is defined, the filter's `result.baseVal` and `result.animVal` are empty strings, and the output of the `` filter will only be available for re-use as the implicit input into the next filter primitive if that filter primitive provides no value for its `in` attribute. + +## Value + +An {{domxref("SVGAnimatedString")}}. + +## Example + +```js +const feDiffuseLightingElement = document.querySelector("feDiffuseLighting"); +const filterName = feDiffuseLightingElement.result; +console.log(filterName.baseVa); // the filter's assigned name +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEDiffuseLightingElement.in1")}} +- {{cssxref("custom-ident")}} data type +- {{domxref("SVGFESpecularLightingElement")}} +- {{SVGElement("feSpecularLighting")}} +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfediffuselightingelement/surfacescale/index.md b/files/en-us/web/api/svgfediffuselightingelement/surfacescale/index.md new file mode 100644 index 000000000000000..3e3fc9d441f4622 --- /dev/null +++ b/files/en-us/web/api/svgfediffuselightingelement/surfacescale/index.md @@ -0,0 +1,59 @@ +--- +title: "SVGFEDiffuseLightingElement: surfaceScale property" +short-title: surfaceScale +slug: Web/API/SVGFEDiffuseLightingElement/surfaceScale +page-type: web-api-instance-property +browser-compat: api.SVGFEDiffuseLightingElement.surfaceScale +--- + +{{APIRef("SVG")}} + +The **`surfaceScale`** read-only property of the {{domxref("SVGFEDiffuseLightingElement")}} interface reflects the {{SVGAttr("surfaceScale")}} attribute of the given {{SVGElement("feDiffuseLighting")}} element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Examples + +### Access the `surfaceScale` property + +```html + + + + + + + + + + +``` + +```js +const diffuseLighting = document.querySelector("feDiffuseLighting"); + +console.log(diffuseLighting.surfaceScale.baseVal); // Output: 2 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedNumber")}} diff --git a/files/en-us/web/api/svgfediffuselightingelement/width/index.md b/files/en-us/web/api/svgfediffuselightingelement/width/index.md new file mode 100644 index 000000000000000..931670b8b6f512b --- /dev/null +++ b/files/en-us/web/api/svgfediffuselightingelement/width/index.md @@ -0,0 +1,41 @@ +--- +title: "SVGFEDiffuseLightingElement: width property" +short-title: width +slug: Web/API/SVGFEDiffuseLightingElement/width +page-type: web-api-instance-property +browser-compat: api.SVGFEDiffuseLightingElement.width +--- + +{{APIRef("SVG")}} + +The **`width`** read-only property of the {{domxref("SVGFEDiffuseLightingElement")}} interface describes the horizontal size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGElement("feDiffuseLighting")}} element's {{SVGAttr("width")}} filter primitive attribute. The filter lights an image using the alpha channel as a bump map. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or a [``](/en-US/docs/Web/SVG/Content_type#percentage) relative to the width of the filter region. The default value is `100%`. The property value is a length in user coordinate system units. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feDiffuseLighting = document.querySelector("feDiffuseLighting"); +const horizontalSize = feDiffuseLighting.width; +console.log(horizontalSize.baseVal.value); // the `width` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEDiffuseLightingElement.height")}} +- {{domxref("SVGFESpecularLightingElement")}} +- {{SVGElement("feSpecularLighting")}} +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfediffuselightingelement/x/index.md b/files/en-us/web/api/svgfediffuselightingelement/x/index.md new file mode 100644 index 000000000000000..b7f6f4e9a3e9e11 --- /dev/null +++ b/files/en-us/web/api/svgfediffuselightingelement/x/index.md @@ -0,0 +1,41 @@ +--- +title: "SVGFEDiffuseLightingElement: x property" +short-title: x +slug: Web/API/SVGFEDiffuseLightingElement/x +page-type: web-api-instance-property +browser-compat: api.SVGFEDiffuseLightingElement.x +--- + +{{APIRef("SVG")}} + +The **`x`** read-only property of the {{domxref("SVGFEDiffuseLightingElement")}} interface describes the horizontal coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGElement("feDiffuseLighting")}} element's {{SVGAttr("x")}} filter primitive attribute value. The filter lights an image using the alpha channel as a bump map. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or [``](/en-US/docs/Web/SVG/Content_type#percentage). The `` is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the x-axis. If the `x` attribute is a percent value, the property value is relative to the width of the filter region in user coordinate system units. The default value is `0`. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feDiffuseLighting = document.querySelector("feDiffuseLighting"); +const leftPosition = feDiffuseLighting.x; +console.log(leftPosition.baseVal.value); // the `x` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEDiffuseLightingElement.y")}} +- {{domxref("SVGFESpecularLightingElement")}} +- {{SVGElement("feSpecularLighting")}} +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfediffuselightingelement/y/index.md b/files/en-us/web/api/svgfediffuselightingelement/y/index.md new file mode 100644 index 000000000000000..6ad9d4ba321d15d --- /dev/null +++ b/files/en-us/web/api/svgfediffuselightingelement/y/index.md @@ -0,0 +1,41 @@ +--- +title: "SVGFEDiffuseLightingElement: y property" +short-title: "y" +slug: Web/API/SVGFEDiffuseLightingElement/y +page-type: web-api-instance-property +browser-compat: api.SVGFEDiffuseLightingElement.y +--- + +{{APIRef("SVG")}} + +The **`y`** read-only property of the {{domxref("SVGFEDiffuseLightingElement")}} interface describes the vertical coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGElement("feDiffuseLighting")}} element's {{SVGAttr("y")}} filter primitive attribute value. The filter lights an image using the alpha channel as a bump map. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or [``](/en-US/docs/Web/SVG/Content_type#percentage). The `` is a length in the user coordinate system that is the given distance from the origin of the filter along the y-axis. If the `y` attribute is a percent value, the property value is a relative to the height of the filter region in user coordinate system units. The default value is `0`. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feDiffuseLighting = document.querySelector("feDiffuseLighting"); +const topPosition = feDiffuseLighting.y; +console.log(topPosition.baseVal.value); // the `y` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEDiffuseLightingElement.x")}} +- {{domxref("SVGFESpecularLightingElement")}} +- {{SVGElement("feSpecularLighting")}} +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfedistantlightelement/azimuth/index.md b/files/en-us/web/api/svgfedistantlightelement/azimuth/index.md new file mode 100644 index 000000000000000..b40bcdec2d0c635 --- /dev/null +++ b/files/en-us/web/api/svgfedistantlightelement/azimuth/index.md @@ -0,0 +1,57 @@ +--- +title: "SVGFEDistantLightElement: azimuth property" +short-title: azimuth +slug: Web/API/SVGFEDistantLightElement/azimuth +page-type: web-api-instance-property +browser-compat: api.SVGFEDistantLightElement.azimuth +--- + +{{APIRef("SVG")}} + +The **`azimuth`** read-only property of the {{domxref("SVGFEDistantLightElement")}} interface reflects the {{SVGAttr("azimuth")}} attribute of the given {{SVGElement("feDistantLight")}} element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Examples + +### Accessing the `azimuth` Property + +```html + + + + + + + + + + + +``` + +```js +const distantLight = document.querySelector("feDistantLight"); + +console.log(distantLight.azimuth.baseVal); // Output: 45 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedNumber")}} diff --git a/files/en-us/web/api/svgfedistantlightelement/elevation/index.md b/files/en-us/web/api/svgfedistantlightelement/elevation/index.md new file mode 100644 index 000000000000000..436158510cfe9bb --- /dev/null +++ b/files/en-us/web/api/svgfedistantlightelement/elevation/index.md @@ -0,0 +1,57 @@ +--- +title: "SVGFEDistantLightElement: elevation property" +short-title: elevation +slug: Web/API/SVGFEDistantLightElement/elevation +page-type: web-api-instance-property +browser-compat: api.SVGFEDistantLightElement.elevation +--- + +{{APIRef("SVG")}} + +The **`elevation`** read-only property of the {{domxref("SVGFEDistantLightElement")}} interface reflects the {{SVGAttr("elevation")}} attribute of the given {{SVGElement("feDistantLight")}} element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Examples + +### Accessing the `elevation` Property + +```html + + + + + + + + + + + +``` + +```js +const distantLight = document.querySelector("feDistantLight"); + +console.log(distantLight.elevation.baseVal); // Output: 30 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedNumber")}} diff --git a/files/en-us/web/api/svgfedropshadowelement/height/index.md b/files/en-us/web/api/svgfedropshadowelement/height/index.md new file mode 100644 index 000000000000000..d5f087cd8a336f4 --- /dev/null +++ b/files/en-us/web/api/svgfedropshadowelement/height/index.md @@ -0,0 +1,42 @@ +--- +title: "SVGFEDropShadowElement: height property" +short-title: height +slug: Web/API/SVGFEDropShadowElement/height +page-type: web-api-instance-property +browser-compat: api.SVGFEDropShadowElement.height +--- + +{{APIRef("SVG")}} + +The **`height`** read-only property of the {{domxref("SVGFEDropShadowElement")}} interface describes the vertical size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("height")}} filter primitive attribute. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or a [``](/en-US/docs/Web/SVG/Content_type#percentage) relative to the height of the filter region. The default value is `100%`. The property value is a length in user coordinate system units. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feDropShadow = document.querySelector("feDropShadow"); +const verticalSize = feDropShadow.height; +console.log(verticalSize.baseVal.value); // the `height` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEDropShadowElement.width")}} +- CSS {{cssxref("filter-function/drop-shadow", "drop-shadow()")}} function +- CSS {{cssxref("box-shadow")}} property +- CSS {{cssxref("text-shadow")}} property +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfedropshadowelement/result/index.md b/files/en-us/web/api/svgfedropshadowelement/result/index.md new file mode 100644 index 000000000000000..4c9929942652c7d --- /dev/null +++ b/files/en-us/web/api/svgfedropshadowelement/result/index.md @@ -0,0 +1,45 @@ +--- +title: "SVGFEDropShadowElement: result property" +short-title: result +slug: Web/API/SVGFEDropShadowElement/result +page-type: web-api-instance-property +browser-compat: api.SVGFEDropShadowElement.result +--- + +{{APIRef("SVG")}} + +The **`result`** read-only property of the {{domxref("SVGFEDropShadowElement")}} interface describes the assigned name of an SVG filter primitive as a {{domxref("SVGAnimatedString")}}. + +It reflects the {{SVGAttr("result")}} attribute. The attribute value is a {{cssxref("custom-ident")}}. If supplied, then graphics that result from processing this filter primitive can be referenced by an {{SVGAttr("in")}} attribute on a subsequent filter primitive within the same {{SVGElement("filter")}} element. + +If no `result` attribute is defined, the filter's `result.baseVal` and `result.animVal` are empty strings, and the output of the `` filter will only be available for re-use as the implicit input into the next filter primitive if that filter primitive provides no value for its `in` attribute. + +## Value + +An {{domxref("SVGAnimatedString")}}. + +## Example + +```js +const feDropShadowElement = document.querySelector("feDropShadow"); +const filterName = feDropShadowElement.result; +console.log(filterName.baseVal); // the filter's assigned name +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEDropShadowElement.in1")}} +- {{cssxref("custom-ident")}} data type +- CSS {{cssxref("filter-function/drop-shadow", "drop-shadow()")}} function +- CSS {{cssxref("box-shadow")}} property +- CSS {{cssxref("text-shadow")}} property +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfedropshadowelement/width/index.md b/files/en-us/web/api/svgfedropshadowelement/width/index.md new file mode 100644 index 000000000000000..d698a58b79e7281 --- /dev/null +++ b/files/en-us/web/api/svgfedropshadowelement/width/index.md @@ -0,0 +1,42 @@ +--- +title: "SVGFEDropShadowElement: width property" +short-title: width +slug: Web/API/SVGFEDropShadowElement/width +page-type: web-api-instance-property +browser-compat: api.SVGFEDropShadowElement.width +--- + +{{APIRef("SVG")}} + +The **`width`** read-only property of the {{domxref("SVGFEDropShadowElement")}} interface describes the horizontal size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("width")}} filter primitive attribute. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or a [``](/en-US/docs/Web/SVG/Content_type#percentage) relative to the width of the filter region. The default value is `100%`. The property value is a length in user coordinate system units. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feDropShadow = document.querySelector("feDropShadow"); +const horizontalSize = feDropShadow.width; +console.log(horizontalSize.baseVal.value); // the `width` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEDropShadowElement.height")}} +- CSS {{cssxref("filter-function/drop-shadow", "drop-shadow()")}} function +- CSS {{cssxref("box-shadow")}} property +- CSS {{cssxref("text-shadow")}} property +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfedropshadowelement/x/index.md b/files/en-us/web/api/svgfedropshadowelement/x/index.md new file mode 100644 index 000000000000000..0f90d3d2a9b177a --- /dev/null +++ b/files/en-us/web/api/svgfedropshadowelement/x/index.md @@ -0,0 +1,42 @@ +--- +title: "SVGFEDropShadowElement: x property" +short-title: x +slug: Web/API/SVGFEDropShadowElement/x +page-type: web-api-instance-property +browser-compat: api.SVGFEDropShadowElement.x +--- + +{{APIRef("SVG")}} + +The **`x`** read-only property of the {{domxref("SVGFEDropShadowElement")}} interface describes the horizontal coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("x")}} attribute of the {{SVGElement("feDropShadow")}} element, which creates a drop shadow of an input image. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or [``](/en-US/docs/Web/SVG/Content_type#percentage). The `` is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the x-axis. If the `x` attribute is a percent value, the property value is relative to the width of the filter region in user coordinate system units. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feDropShadow = document.querySelector("feDropShadow"); +const leftPosition = feDropShadow.x; +console.log(leftPosition.baseVal.value); // the `x` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEDropShadowElement.y")}} +- CSS {{cssxref("filter-function/drop-shadow", "drop-shadow()")}} function +- CSS {{cssxref("box-shadow")}} property +- CSS {{cssxref("text-shadow")}} property +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfedropshadowelement/y/index.md b/files/en-us/web/api/svgfedropshadowelement/y/index.md new file mode 100644 index 000000000000000..d832badd3549e92 --- /dev/null +++ b/files/en-us/web/api/svgfedropshadowelement/y/index.md @@ -0,0 +1,42 @@ +--- +title: "SVGFEDropShadowElement: y property" +short-title: "y" +slug: Web/API/SVGFEDropShadowElement/y +page-type: web-api-instance-property +browser-compat: api.SVGFEDropShadowElement.y +--- + +{{APIRef("SVG")}} + +The **`y`** read-only property of the {{domxref("SVGFEDropShadowElement")}} interface describes the vertical coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("y")}} attribute of the {{SVGElement("feDropShadow")}} element, which creates a drop shadow of an input image. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or [``](/en-US/docs/Web/SVG/Content_type#percentage). The `` is a length in the user coordinate system that is the given distance from the origin of the filter along the y-axis. If the `y` attribute is a percent value, the property value is a relative to the height of the filter region in user coordinate system units. The default value is `0`. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feDropShadow = document.querySelector("feDropShadow"); +const topPosition = feDropShadow.y; +console.log(topPosition.baseVal.value); // the `y` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEDropShadowElement.x")}} +- CSS {{cssxref("filter-function/drop-shadow", "drop-shadow()")}} function +- CSS {{cssxref("box-shadow")}} property +- CSS {{cssxref("text-shadow")}} property +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfefloodelement/height/index.md b/files/en-us/web/api/svgfefloodelement/height/index.md new file mode 100644 index 000000000000000..f935e4e67b6829b --- /dev/null +++ b/files/en-us/web/api/svgfefloodelement/height/index.md @@ -0,0 +1,39 @@ +--- +title: "SVGFEFloodElement: height property" +short-title: height +slug: Web/API/SVGFEFloodElement/height +page-type: web-api-instance-property +browser-compat: api.SVGFEFloodElement.height +--- + +{{APIRef("SVG")}} + +The **`height`** read-only property of the {{domxref("SVGFEFloodElement")}} interface describes the vertical size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("height")}} attribute of the {{SVGElement("feFlood")}} element, which fills an SVG filter subregion with the color and opacity defined by {{SVGAttr("flood-color")}} and {{SVGAttr("flood-opacity")}}. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or a [``](/en-US/docs/Web/SVG/Content_type#percentage) relative to the height of the filter region. The default value is `100%`. The property value is a length in user coordinate system units. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feFlood = document.querySelector("feFlood"); +const verticalSize = feFlood.height; +console.log(verticalSize.baseVal.value); // the `height` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEFloodElement.width")}}- [SVG filter tutorial](/en-US/docs/Web/SVG/Tutorial/SVG_Filters_Tutorial) +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfefloodelement/result/index.md b/files/en-us/web/api/svgfefloodelement/result/index.md new file mode 100644 index 000000000000000..804bbd5873981d8 --- /dev/null +++ b/files/en-us/web/api/svgfefloodelement/result/index.md @@ -0,0 +1,42 @@ +--- +title: "SVGFEFloodElement: result property" +short-title: result +slug: Web/API/SVGFEFloodElement/result +page-type: web-api-instance-property +browser-compat: api.SVGFEFloodElement.result +--- + +{{APIRef("SVG")}} + +The **`result`** read-only property of the {{domxref("SVGFEFloodElement")}} interface describes the assigned name of an SVG filter primitive as a {{domxref("SVGAnimatedString")}}. + +It reflects the {{SVGAttr("result")}} attribute of the {{SVGElement("feFlood")}} element, which fills an SVG filter subregion with the color and opacity defined by {{SVGAttr("flood-color")}} and {{SVGAttr("flood-opacity")}}. The attribute value is a {{cssxref("custom-ident")}}. If supplied, then graphics that result from processing this filter primitive can be referenced by an {{SVGAttr("in")}} attribute on a subsequent filter primitive within the same {{SVGElement("filter")}} element. + +If no `result` attribute is defined, the filter's `result.baseVal` and `result.animVal` are empty strings, and the output of the `` filter will only be available for re-use as the implicit input into the next filter primitive if that filter primitive provides no value for its `in` attribute. + +## Value + +An {{domxref("SVGAnimatedString")}}. + +## Example + +```js +const feFloodElement = document.querySelector("feFlood"); +const filterName = feFloodElement.result; +console.log(filterName.baseVa); // the filter's assigned name +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEFloodElement.in1")}} +- {{cssxref("custom-ident")}} data type- [SVG filter tutorial](/en-US/docs/Web/SVG/Tutorial/SVG_Filters_Tutorial) +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfefloodelement/width/index.md b/files/en-us/web/api/svgfefloodelement/width/index.md new file mode 100644 index 000000000000000..d5a079a6e13c514 --- /dev/null +++ b/files/en-us/web/api/svgfefloodelement/width/index.md @@ -0,0 +1,39 @@ +--- +title: "SVGFEFloodElement: width property" +short-title: width +slug: Web/API/SVGFEFloodElement/width +page-type: web-api-instance-property +browser-compat: api.SVGFEFloodElement.width +--- + +{{APIRef("SVG")}} + +The **`width`** read-only property of the {{domxref("SVGFEFloodElement")}} interface describes the horizontal size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("width")}} attribute of the {{SVGElement("feFlood")}} element, which fills an SVG filter subregion with the color and opacity defined by {{SVGAttr("flood-color")}} and {{SVGAttr("flood-opacity")}}. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or a [``](/en-US/docs/Web/SVG/Content_type#percentage) relative to the width of the filter region. The default value is `100%`. The property value is a length in user coordinate system units. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feFlood = document.querySelector("feFlood"); +const horizontalSize = feFlood.width; +console.log(horizontalSize.baseVal.value); // the `width` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEFloodElement.height")}}- [SVG filter tutorial](/en-US/docs/Web/SVG/Tutorial/SVG_Filters_Tutorial) +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfefloodelement/x/index.md b/files/en-us/web/api/svgfefloodelement/x/index.md new file mode 100644 index 000000000000000..c673bb66201ef62 --- /dev/null +++ b/files/en-us/web/api/svgfefloodelement/x/index.md @@ -0,0 +1,39 @@ +--- +title: "SVGFEFloodElement: x property" +short-title: x +slug: Web/API/SVGFEFloodElement/x +page-type: web-api-instance-property +browser-compat: api.SVGFEFloodElement.x +--- + +{{APIRef("SVG")}} + +The **`x`** read-only property of the {{domxref("SVGFEFloodElement")}} interface describes the horizontal coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("x")}} attribute of the {{SVGElement("feFlood")}} element, which fills an SVG filter subregion with the color and opacity defined by {{SVGAttr("flood-color")}} and {{SVGAttr("flood-opacity")}}. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or [``](/en-US/docs/Web/SVG/Content_type#percentage). The `` is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the x-axis. If the `x` attribute is a percent value, the property value is relative to the width of the filter region in user coordinate system units. The default value is `0`. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feFlood = document.querySelector("feFlood"); +const leftPosition = feFlood.x; +console.log(leftPosition.baseVal.value); // the `x` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEFloodElement.y")}}- [SVG filter tutorial](/en-US/docs/Web/SVG/Tutorial/SVG_Filters_Tutorial) +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfefloodelement/y/index.md b/files/en-us/web/api/svgfefloodelement/y/index.md new file mode 100644 index 000000000000000..87575c7c87fa047 --- /dev/null +++ b/files/en-us/web/api/svgfefloodelement/y/index.md @@ -0,0 +1,39 @@ +--- +title: "SVGFEFloodElement: y property" +short-title: "y" +slug: Web/API/SVGFEFloodElement/y +page-type: web-api-instance-property +browser-compat: api.SVGFEFloodElement.y +--- + +{{APIRef("SVG")}} + +The **`y`** read-only property of the {{domxref("SVGFEFloodElement")}} interface describes the vertical coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("y")}} attribute of the {{SVGElement("feFlood")}} element, which fills an SVG filter subregion with the color and opacity defined by {{SVGAttr("flood-color")}} and {{SVGAttr("flood-opacity")}}. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or [``](/en-US/docs/Web/SVG/Content_type#percentage). The `` is a length in the user coordinate system that is the given distance from the origin of the filter along the y-axis. If the `y` attribute is a percent value, the property value is relative to the height of the filter region in user coordinate system units. The default value is `0`. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feFlood = document.querySelector("feFlood"); +const topPosition = feFlood.y; +console.log(topPosition.baseVal.value); // the `y` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEFloodElement.x")}}- [SVG filter tutorial](/en-US/docs/Web/SVG/Tutorial/SVG_Filters_Tutorial) +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfegaussianblurelement/height/index.md b/files/en-us/web/api/svgfegaussianblurelement/height/index.md new file mode 100644 index 000000000000000..dc2abaeb028750b --- /dev/null +++ b/files/en-us/web/api/svgfegaussianblurelement/height/index.md @@ -0,0 +1,41 @@ +--- +title: "SVGFEGaussianBlurElement: height property" +short-title: height +slug: Web/API/SVGFEGaussianBlurElement/height +page-type: web-api-instance-property +browser-compat: api.SVGFEGaussianBlurElement.height +--- + +{{APIRef("SVG")}} + +The **`height`** read-only property of the {{domxref("SVGFEGaussianBlurElement")}} interface describes the vertical size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("height")}} attribute of the {{SVGElement("feGaussianBlur")}} element, which blurs an input image. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or a [``](/en-US/docs/Web/SVG/Content_type#percentage) relative to the height of the filter region. The default value is `100%`. The property value is a length in user coordinate system units. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feGaussianBlur = document.querySelector("feGaussianBlur"); +const verticalSize = feGaussianBlur.height; +console.log(verticalSize.baseVal.value); // the `height` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEGaussianBlurElement.width")}} +- [SVG filter tutorial](/en-US/docs/Web/SVG/Tutorial/SVG_Filters_Tutorial) +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("filter-function/blur", "blur()")}} function +- [CSS filter effects](/en-US/docs/Web/CSS/CSS_filter_effects) module- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfegaussianblurelement/in1/index.md b/files/en-us/web/api/svgfegaussianblurelement/in1/index.md new file mode 100644 index 000000000000000..1da29a77fef9528 --- /dev/null +++ b/files/en-us/web/api/svgfegaussianblurelement/in1/index.md @@ -0,0 +1,78 @@ +--- +title: "SVGFEGaussianBlurElement: in1 property" +short-title: in1 +slug: Web/API/SVGFEGaussianBlurElement/in1 +page-type: web-api-instance-property +browser-compat: api.SVGFEGaussianBlurElement.in1 +--- + +{{APIRef("SVG")}} + +The **`in1`** read-only property of the {{domxref("SVGFEGaussianBlurElement")}} interface reflects the {{SVGAttr("in")}} attribute of the given {{SVGElement("feGaussianBlur")}} element. + +## Value + +An {{domxref("SVGAnimatedString")}} object. + +## Examples + +In this example, two {{SVGElement("feGaussianBlur")}} elements are defined in a filter, each with a different `in` attribute. + +```html + + + + + + + + + + + + + + + + +``` + +We can access the `in` attribute: + +```js +// Get all feGaussianBlur elements +const gaussianBlurs = document.querySelectorAll("feGaussianBlur"); + +// Access the 'in' attribute values +console.log(gaussianBlurs[0].in1.baseVal); // Output: "SourceGraphic" +console.log(gaussianBlurs[1].in1.baseVal); // Output: "BackgroundImage" +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedString")}} diff --git a/files/en-us/web/api/svgfegaussianblurelement/result/index.md b/files/en-us/web/api/svgfegaussianblurelement/result/index.md new file mode 100644 index 000000000000000..3d01fcf8e81b44b --- /dev/null +++ b/files/en-us/web/api/svgfegaussianblurelement/result/index.md @@ -0,0 +1,44 @@ +--- +title: "SVGFEGaussianBlurElement: result property" +short-title: result +slug: Web/API/SVGFEGaussianBlurElement/result +page-type: web-api-instance-property +browser-compat: api.SVGFEGaussianBlurElement.result +--- + +{{APIRef("SVG")}} + +The **`result`** read-only property of the {{domxref("SVGFEGaussianBlurElement")}} interface describes the assigned name of an SVG filter primitive as a {{domxref("SVGAnimatedString")}}. + +It reflects the {{SVGAttr("result")}} attribute of the {{SVGElement("feGaussianBlur")}} element, which blurs an input image. The attribute value is a {{cssxref("custom-ident")}}. If supplied, then graphics that result from processing this filter primitive can be referenced by an {{SVGAttr("in")}} attribute on a subsequent filter primitive within the same {{SVGElement("filter")}} element. + +If no `result` attribute is defined, the filter's `result.baseVal` and `result.animVal` are empty strings, and the output of the `` filter will only be available for re-use as the implicit input into the next filter primitive if that filter primitive provides no value for its `in` attribute. + +## Value + +An {{domxref("SVGAnimatedString")}}. + +## Example + +```js +const feGaussianBlurElement = document.querySelector("feGaussianBlur"); +const filterName = feGaussianBlurElement.result; +console.log(filterName.baseVal); // the filter's assigned name +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEGaussianBlurElement.in1")}} +- {{cssxref("custom-ident")}} data type +- [SVG filter tutorial](/en-US/docs/Web/SVG/Tutorial/SVG_Filters_Tutorial) +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("filter-function/blur", "blur()")}} function +- [CSS filter effects](/en-US/docs/Web/CSS/CSS_filter_effects) module- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfegaussianblurelement/setstddeviation/index.md b/files/en-us/web/api/svgfegaussianblurelement/setstddeviation/index.md new file mode 100644 index 000000000000000..81d619b5e7120d5 --- /dev/null +++ b/files/en-us/web/api/svgfegaussianblurelement/setstddeviation/index.md @@ -0,0 +1,80 @@ +--- +title: "SVGFEGaussianBlurElement: setStdDeviation() method" +short-title: setStdDeviation() +slug: Web/API/SVGFEGaussianBlurElement/setStdDeviation +page-type: web-api-instance-method +browser-compat: api.SVGFEGaussianBlurElement.setStdDeviation +--- + +{{APIRef("SVG")}} + +The `setStdDeviation()` method of the {{domxref("SVGFEGaussianBlurElement")}} interface sets the values for the {{SVGAttr("stdDeviation")}} attribute. + +## Syntax + +```js-nolint +SVGFEGaussianBlurElement.setStdDeviation(x, y) +``` + +### Parameters + +- `x` + - : A float representing X component of the {{SVGAttr("stdDeviation")}} attribute. +- `y` + - : A float representing Y component of the {{SVGAttr("stdDeviation")}} attribute. + +### Return value + +None ({{jsxref('undefined')}}). + +## Examples + +### Using `setStdDeviation()` + +```html + + + + + + + + + + + + + +``` + +```js +// Get the feGaussianBlur element +const gaussianBlur = document.querySelector("feGaussianBlur"); + +// Button to trigger the update +document.getElementById("updateBlur").addEventListener("click", () => { + // Change the standard deviation (blur radius) of the blur effect + gaussianBlur.setStdDeviation(15, 20); // Update to X: 15, Y: 20 +}); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedLength")}} diff --git a/files/en-us/web/api/svgfegaussianblurelement/stddeviationx/index.md b/files/en-us/web/api/svgfegaussianblurelement/stddeviationx/index.md new file mode 100644 index 000000000000000..307f172de1b5b17 --- /dev/null +++ b/files/en-us/web/api/svgfegaussianblurelement/stddeviationx/index.md @@ -0,0 +1,62 @@ +--- +title: "SVGFEGaussianBlurElement: stdDeviationX property" +short-title: stdDeviationX +slug: Web/API/SVGFEGaussianBlurElement/stdDeviationX +page-type: web-api-instance-property +browser-compat: api.SVGFEGaussianBlurElement.stdDeviationX +--- + +{{APIRef("SVG")}} + +The **`stdDeviationX`** read-only property of the {{domxref("SVGFEGaussianBlurElement")}} interface reflects the (possibly automatically computed) X component of the {{SVGAttr("stdDeviation")}} attribute of the given {{SVGElement("feGaussianBlur")}} element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Examples + +### Accessing the `stdDeviationX` attribute + +```html + + + + + + + + + + + +``` + +```js +// Select the feGaussianBlur element +const gaussianBlur = document.querySelector("feGaussianBlur"); + +// Access the stdDeviationX value +console.log(gaussianBlur.stdDeviationX.baseVal); // Output: 5 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedNumber")}} diff --git a/files/en-us/web/api/svgfegaussianblurelement/stddeviationy/index.md b/files/en-us/web/api/svgfegaussianblurelement/stddeviationy/index.md new file mode 100644 index 000000000000000..c0a50d43b9c1799 --- /dev/null +++ b/files/en-us/web/api/svgfegaussianblurelement/stddeviationy/index.md @@ -0,0 +1,62 @@ +--- +title: "SVGFEGaussianBlurElement: stdDeviationY property" +short-title: stdDeviationY +slug: Web/API/SVGFEGaussianBlurElement/stdDeviationY +page-type: web-api-instance-property +browser-compat: api.SVGFEGaussianBlurElement.stdDeviationY +--- + +{{APIRef("SVG")}} + +The **`stdDeviationY`** read-only property of the {{domxref("SVGFEGaussianBlurElement")}} interface reflects the (possibly automatically computed) Y component of the {{SVGAttr("stdDeviation")}} attribute of the given {{SVGElement("feGaussianBlur")}} element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Examples + +### Accessing the `stdDeviationY` attribute + +```html + + + + + + + + + + + +``` + +```js +// Select the feGaussianBlur element +const gaussianBlur = document.querySelector("feGaussianBlur"); + +// Access the stdDeviationY value +console.log(gaussianBlur.stdDeviationY.baseVal); // Output: 10 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedNumber")}} diff --git a/files/en-us/web/api/svgfegaussianblurelement/width/index.md b/files/en-us/web/api/svgfegaussianblurelement/width/index.md new file mode 100644 index 000000000000000..0fac3976f3fc340 --- /dev/null +++ b/files/en-us/web/api/svgfegaussianblurelement/width/index.md @@ -0,0 +1,41 @@ +--- +title: "SVGFEGaussianBlurElement: width property" +short-title: width +slug: Web/API/SVGFEGaussianBlurElement/width +page-type: web-api-instance-property +browser-compat: api.SVGFEGaussianBlurElement.width +--- + +{{APIRef("SVG")}} + +The **`width`** read-only property of the {{domxref("SVGFEGaussianBlurElement")}} interface describes the horizontal size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("width")}} attribute of the {{SVGElement("feGaussianBlur")}} element, which blurs an input image. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or a [``](/en-US/docs/Web/SVG/Content_type#percentage) relative to the width of the filter region. The default value is `100%`. The property value is a length in user coordinate system units. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feGaussianBlur = document.querySelector("feGaussianBlur"); +const horizontalSize = feGaussianBlur.width; +console.log(horizontalSize.baseVal.value); // the `width` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEGaussianBlurElement.height")}} +- [SVG filter tutorial](/en-US/docs/Web/SVG/Tutorial/SVG_Filters_Tutorial) +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("filter-function/blur", "blur()")}} function +- [CSS filter effects](/en-US/docs/Web/CSS/CSS_filter_effects) module- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfegaussianblurelement/x/index.md b/files/en-us/web/api/svgfegaussianblurelement/x/index.md new file mode 100644 index 000000000000000..dc482de3e9ecfdf --- /dev/null +++ b/files/en-us/web/api/svgfegaussianblurelement/x/index.md @@ -0,0 +1,41 @@ +--- +title: "SVGFEGaussianBlurElement: x property" +short-title: x +slug: Web/API/SVGFEGaussianBlurElement/x +page-type: web-api-instance-property +browser-compat: api.SVGFEGaussianBlurElement.x +--- + +{{APIRef("SVG")}} + +The **`x`** read-only property of the {{domxref("SVGFEGaussianBlurElement")}} interface describes the horizontal coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("x")}} attribute of the {{SVGElement("feGaussianBlur")}} element, which blurs an input image. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or [``](/en-US/docs/Web/SVG/Content_type#percentage). The `` is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the x-axis. If the `x` attribute is a percent value, the property value is relative to the width of the filter region in user coordinate system units. The default value is `0`. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feGaussianBlur = document.querySelector("feGaussianBlur"); +const leftPosition = feGaussianBlur.x; +console.log(leftPosition.baseVal.value); // the `x` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEGaussianBlurElement.y")}} +- [SVG filter tutorial](/en-US/docs/Web/SVG/Tutorial/SVG_Filters_Tutorial) +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("filter-function/blur", "blur()")}} function +- [CSS filter effects](/en-US/docs/Web/CSS/CSS_filter_effects) module- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfegaussianblurelement/y/index.md b/files/en-us/web/api/svgfegaussianblurelement/y/index.md new file mode 100644 index 000000000000000..08b33a566fe3569 --- /dev/null +++ b/files/en-us/web/api/svgfegaussianblurelement/y/index.md @@ -0,0 +1,41 @@ +--- +title: "SVGFEGaussianBlurElement: y property" +short-title: "y" +slug: Web/API/SVGFEGaussianBlurElement/y +page-type: web-api-instance-property +browser-compat: api.SVGFEGaussianBlurElement.y +--- + +{{APIRef("SVG")}} + +The **`y`** read-only property of the {{domxref("SVGFEGaussianBlurElement")}} interface describes the vertical coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("y")}} attribute of the {{SVGElement("feGaussianBlur")}} element, which blurs an input image. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or [``](/en-US/docs/Web/SVG/Content_type#percentage). The `` is a length in the user coordinate system that is the given distance from the origin of the filter along the y-axis. If the `y` attribute is a percent value, the property value is relative to the height of the filter region in user coordinate system units. The default value is `0`. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feGaussianBlur = document.querySelector("feGaussianBlur"); +const topPosition = feGaussianBlur.y; +console.log(topPosition.baseVal.value); // the `y` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEGaussianBlurElement.x")}} +- [SVG filter tutorial](/en-US/docs/Web/SVG/Tutorial/SVG_Filters_Tutorial) +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("filter-function/blur", "blur()")}} function +- [CSS filter effects](/en-US/docs/Web/CSS/CSS_filter_effects) module- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfeimageelement/height/index.md b/files/en-us/web/api/svgfeimageelement/height/index.md new file mode 100644 index 000000000000000..2c47ea0376016dd --- /dev/null +++ b/files/en-us/web/api/svgfeimageelement/height/index.md @@ -0,0 +1,41 @@ +--- +title: "SVGFEImageElement: height property" +short-title: height +slug: Web/API/SVGFEImageElement/height +page-type: web-api-instance-property +browser-compat: api.SVGFEImageElement.height +--- + +{{APIRef("SVG")}} + +The **`height`** read-only property of the {{domxref("SVGFEImageElement")}} interface describes the vertical size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("height")}} attribute of the {{SVGElement("feImage")}} element, which fetches image data from an external source and provides the pixel data as output. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or a [``](/en-US/docs/Web/SVG/Content_type#percentage) relative to the height of the filter region. The default value is `100%`. The property value is a length in user coordinate system units. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feImage = document.querySelector("feImage"); +const verticalSize = feImage.height; +console.log(verticalSize.baseVal.value); // the `height` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEImageElement.width")}} +- [SVG tutorial: Filter effects](/en-US/docs/Web/SVG/Tutorial/Filter_effects) +- [SVG Filter primitive attributes](/en-US/docs/Web/SVG/Attribute#filters_attributes) +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfeimageelement/result/index.md b/files/en-us/web/api/svgfeimageelement/result/index.md new file mode 100644 index 000000000000000..a9ad51092eae563 --- /dev/null +++ b/files/en-us/web/api/svgfeimageelement/result/index.md @@ -0,0 +1,44 @@ +--- +title: "SVGFEImageElement: result property" +short-title: result +slug: Web/API/SVGFEImageElement/result +page-type: web-api-instance-property +browser-compat: api.SVGFEImageElement.result +--- + +{{APIRef("SVG")}} + +The **`result`** read-only property of the {{domxref("SVGFEImageElement")}} interface describes the assigned name of an SVG filter primitive as a {{domxref("SVGAnimatedString")}}. + +It reflects the {{SVGAttr("result")}} attribute of the {{SVGElement("feImage")}} element, which fetches image data from an external source and provides the pixel data as output. The attribute value is a {{cssxref("custom-ident")}}. If supplied, then graphics that result from processing this filter primitive can be referenced by an {{SVGAttr("in")}} attribute on a subsequent filter primitive within the same {{SVGElement("filter")}} element. + +If no `result` attribute is defined, the filter's `result.baseVal` and `result.animVal` are empty strings, and the output of the `` filter will only be available for re-use as the implicit input into the next filter primitive if that filter primitive provides no value for its `in` attribute. + +## Value + +An {{domxref("SVGAnimatedString")}}. + +## Example + +```js +const feImageElement = document.querySelector("feImage"); +const filterName = feImageElement.result; +console.log(filterName.baseVa); // the filter's assigned name +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEImageElement.in1")}} +- {{cssxref("custom-ident")}} data type +- [SVG tutorial: Filter effects](/en-US/docs/Web/SVG/Tutorial/Filter_effects) +- [SVG Filter primitive attributes](/en-US/docs/Web/SVG/Attribute#filters_attributes) +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfeimageelement/width/index.md b/files/en-us/web/api/svgfeimageelement/width/index.md new file mode 100644 index 000000000000000..f667080121025a5 --- /dev/null +++ b/files/en-us/web/api/svgfeimageelement/width/index.md @@ -0,0 +1,41 @@ +--- +title: "SVGFEImageElement: width property" +short-title: width +slug: Web/API/SVGFEImageElement/width +page-type: web-api-instance-property +browser-compat: api.SVGFEImageElement.width +--- + +{{APIRef("SVG")}} + +The **`width`** read-only property of the {{domxref("SVGFEImageElement")}} interface describes the horizontal size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("width")}} attribute of the {{SVGElement("feImage")}} element, which fetches image data from an external source and provides the pixel data as output. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or a [``](/en-US/docs/Web/SVG/Content_type#percentage) relative to the width of the filter region. The default value is `100%`. The property value is a length in user coordinate system units. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feImage = document.querySelector("feImage"); +const horizontalSize = feImage.width; +console.log(horizontalSize.baseVal.value); // the `width` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEImageElement.height")}} +- [SVG tutorial: Filter effects](/en-US/docs/Web/SVG/Tutorial/Filter_effects) +- [SVG Filter primitive attributes](/en-US/docs/Web/SVG/Attribute#filters_attributes) +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfeimageelement/x/index.md b/files/en-us/web/api/svgfeimageelement/x/index.md new file mode 100644 index 000000000000000..321363c515ddacc --- /dev/null +++ b/files/en-us/web/api/svgfeimageelement/x/index.md @@ -0,0 +1,41 @@ +--- +title: "SVGFEImageElement: x property" +short-title: x +slug: Web/API/SVGFEImageElement/x +page-type: web-api-instance-property +browser-compat: api.SVGFEImageElement.x +--- + +{{APIRef("SVG")}} + +The **`x`** read-only property of the {{domxref("SVGFEImageElement")}} interface describes the horizontal coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("x")}} attribute of the {{SVGElement("feImage")}} element, which fetches image data from an external source and provides the pixel data as output. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or [``](/en-US/docs/Web/SVG/Content_type#percentage). The `` is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the x-axis. If the `x` attribute is a percent value, the property value is relative to the width of the filter region in user coordinate system units. The default value is `0`. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feImage = document.querySelector("feImage"); +const leftPosition = feImage.x; +console.log(leftPosition.baseVal.value); // the `x` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEImageElement.y")}} +- [SVG tutorial: Filter effects](/en-US/docs/Web/SVG/Tutorial/Filter_effects) +- [SVG Filter primitive attributes](/en-US/docs/Web/SVG/Attribute#filters_attributes) +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfeimageelement/y/index.md b/files/en-us/web/api/svgfeimageelement/y/index.md new file mode 100644 index 000000000000000..48f7d9c48bc90f8 --- /dev/null +++ b/files/en-us/web/api/svgfeimageelement/y/index.md @@ -0,0 +1,41 @@ +--- +title: "SVGFEImageElement: y property" +short-title: "y" +slug: Web/API/SVGFEImageElement/y +page-type: web-api-instance-property +browser-compat: api.SVGFEImageElement.y +--- + +{{APIRef("SVG")}} + +The **`y`** read-only property of the {{domxref("SVGFEImageElement")}} interface describes the vertical coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("y")}} attribute of the {{SVGElement("feImage")}} element, which fetches image data from an external source and provides the pixel data as output. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or [``](/en-US/docs/Web/SVG/Content_type#percentage). The `` is a length in the user coordinate system that is the given distance from the origin of the filter along the y-axis. If the `y` attribute is a percent value, the property value is a relative to the height of the filter region in user coordinate system units. The default value is `0`. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feImage = document.querySelector("feImage"); +const topPosition = feImage.y; +console.log(topPosition.baseVal.value); // the `y` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEImageElement.x")}} +- [SVG tutorial: Filter effects](/en-US/docs/Web/SVG/Tutorial/Filter_effects) +- [SVG Filter primitive attributes](/en-US/docs/Web/SVG/Attribute#filters_attributes) +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfemergeelement/height/index.md b/files/en-us/web/api/svgfemergeelement/height/index.md new file mode 100644 index 000000000000000..37550aa607ed393 --- /dev/null +++ b/files/en-us/web/api/svgfemergeelement/height/index.md @@ -0,0 +1,37 @@ +--- +title: "SVGFEMergeElement: height property" +short-title: height +slug: Web/API/SVGFEMergeElement/height +page-type: web-api-instance-property +browser-compat: api.SVGFEMergeElement.height +--- + +{{APIRef("SVG")}} + +The **`height`** read-only property of the {{domxref("SVGFEMergeElement")}} interface describes the vertical size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("height")}} attribute of the {{SVGElement("feMerge")}} element. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or a [``](/en-US/docs/Web/SVG/Content_type#percentage) relative to the height of the filter region. The default value is `100%`. The property value is a length in user coordinate system units. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feMerge = document.querySelector("feMerge"); +const verticalSize = feMerge.height; +console.log(verticalSize.baseVal.value); // the `height` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEMergeElement.width")}} diff --git a/files/en-us/web/api/svgfemergeelement/result/index.md b/files/en-us/web/api/svgfemergeelement/result/index.md new file mode 100644 index 000000000000000..1fc990946a3d5f4 --- /dev/null +++ b/files/en-us/web/api/svgfemergeelement/result/index.md @@ -0,0 +1,40 @@ +--- +title: "SVGFEMergeElement: result property" +short-title: result +slug: Web/API/SVGFEMergeElement/result +page-type: web-api-instance-property +browser-compat: api.SVGFEMergeElement.result +--- + +{{APIRef("SVG")}} + +The **`result`** read-only property of the {{domxref("SVGFEMergeElement")}} interface describes the assigned name of an SVG filter primitive as a {{domxref("SVGAnimatedString")}}. + +It reflects the {{SVGAttr("result")}} attribute of the {{SVGElement("feMerge")}} element. The attribute value is a {{cssxref("custom-ident")}}. If supplied, then graphics that result from processing this filter primitive can be referenced by an {{SVGAttr("in")}} attribute on a subsequent filter primitive within the same {{SVGElement("filter")}} element. + +If no `result` attribute is defined, the filter's `result.baseVal` and `result.animVal` are empty strings, and the output of the `` filter will only be available for re-use as the implicit input into the next filter primitive if that filter primitive provides no value for its `in` attribute. + +## Value + +An {{domxref("SVGAnimatedString")}}. + +## Example + +```js +const feMergeElement = document.querySelector("feMerge"); +const filterName = feMergeElement.result; +console.log(filterName.baseVal); // the filter's assigned name +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEMergeNodeElement.in1")}} +- {{cssxref("custom-ident")}} data type diff --git a/files/en-us/web/api/svgfemergeelement/width/index.md b/files/en-us/web/api/svgfemergeelement/width/index.md new file mode 100644 index 000000000000000..576b60896fc5807 --- /dev/null +++ b/files/en-us/web/api/svgfemergeelement/width/index.md @@ -0,0 +1,37 @@ +--- +title: "SVGFEMergeElement: width property" +short-title: width +slug: Web/API/SVGFEMergeElement/width +page-type: web-api-instance-property +browser-compat: api.SVGFEMergeElement.width +--- + +{{APIRef("SVG")}} + +The **`width`** read-only property of the {{domxref("SVGFEMergeElement")}} interface describes the horizontal size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("width")}} attribute of the {{SVGElement("feMerge")}} element. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or a [``](/en-US/docs/Web/SVG/Content_type#percentage) relative to the width of the filter region. The default value is `100%`. The property value is a length in user coordinate system units. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feMerge = document.querySelector("feMerge"); +const horizontalSize = feMerge.width; +console.log(horizontalSize.baseVal.value); // the `width` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEMergeElement.height")}} diff --git a/files/en-us/web/api/svgfemergeelement/x/index.md b/files/en-us/web/api/svgfemergeelement/x/index.md new file mode 100644 index 000000000000000..3e6ab2a710ee096 --- /dev/null +++ b/files/en-us/web/api/svgfemergeelement/x/index.md @@ -0,0 +1,37 @@ +--- +title: "SVGFEMergeElement: x property" +short-title: x +slug: Web/API/SVGFEMergeElement/x +page-type: web-api-instance-property +browser-compat: api.SVGFEMergeElement.x +--- + +{{APIRef("SVG")}} + +The **`x`** read-only property of the {{domxref("SVGFEMergeElement")}} interface describes the horizontal coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("x")}} attribute of the {{SVGElement("feMerge")}} element. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or [``](/en-US/docs/Web/SVG/Content_type#percentage). The `` is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the x-axis. If the `x` attribute is a percent value, the property value is relative to the width of the filter region in user coordinate system units. The default value is `0`. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feMerge = document.querySelector("feMerge"); +const leftPosition = feMerge.x; +console.log(leftPosition.baseVal.value); // the `x` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEMergeElement.y")}} diff --git a/files/en-us/web/api/svgfemergeelement/y/index.md b/files/en-us/web/api/svgfemergeelement/y/index.md new file mode 100644 index 000000000000000..8741bc723db9661 --- /dev/null +++ b/files/en-us/web/api/svgfemergeelement/y/index.md @@ -0,0 +1,37 @@ +--- +title: "SVGFEMergeElement: y property" +short-title: "y" +slug: Web/API/SVGFEMergeElement/y +page-type: web-api-instance-property +browser-compat: api.SVGFEMergeElement.y +--- + +{{APIRef("SVG")}} + +The **`y`** read-only property of the {{domxref("SVGFEMergeElement")}} interface describes the vertical coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("y")}} attribute of the {{SVGElement("feMerge")}} element. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or [``](/en-US/docs/Web/SVG/Content_type#percentage). The `` is a length in the user coordinate system that is the given distance from the origin of the filter along the y-axis. If the `y` attribute is a percent value, the property value is a relative to the height of the filter region in user coordinate system units. The default value is `0`. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feMerge = document.querySelector("feMerge"); +const topPosition = feMerge.y; +console.log(topPosition.baseVal.value); // the `y` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEMergeElement.x")}} diff --git a/files/en-us/web/api/svgfemergenodeelement/in1/index.md b/files/en-us/web/api/svgfemergenodeelement/in1/index.md new file mode 100644 index 000000000000000..9c2e43189eec4bd --- /dev/null +++ b/files/en-us/web/api/svgfemergenodeelement/in1/index.md @@ -0,0 +1,60 @@ +--- +title: "SVGFEMergeNodeElement: in1 property" +short-title: in1 +slug: Web/API/SVGFEMergeNodeElement/in1 +page-type: web-api-instance-property +browser-compat: api.SVGFEMergeNodeElement.in1 +--- + +{{APIRef("SVG")}} + +The **`in1`** read-only property of the {{domxref("SVGFEMergeNodeElement")}} interface reflects the {{SVGAttr("in")}} attribute of the given {{SVGElement("feMergeNode")}} element. + +## Value + +An {{domxref("SVGAnimatedString")}} object. + +## Examples + +### Accessing the `in` Property of `feMergeNode` Element + +```html + + + + + + + + + + + + +``` + +We can access the `in` attribute of the `feMergeNode` element. + +```js +// Select the first feMergeNode element +const mergeNode = document.querySelector("feMergeNode"); +console.log(mergeNode.in1.baseVal); // Output: "SourceGraphic" +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedString")}} diff --git a/files/en-us/web/api/svgfemorphologyelement/in1/index.md b/files/en-us/web/api/svgfemorphologyelement/in1/index.md new file mode 100644 index 000000000000000..5a3bfc3eccac373 --- /dev/null +++ b/files/en-us/web/api/svgfemorphologyelement/in1/index.md @@ -0,0 +1,57 @@ +--- +title: "SVGFEMorphologyElement: in1 property" +short-title: in1 +slug: Web/API/SVGFEMorphologyElement/in1 +page-type: web-api-instance-property +browser-compat: api.SVGFEMorphologyElement.in1 +--- + +{{APIRef("SVG")}} + +The **`in1`** read-only property of the {{domxref("SVGFEMorphologyElement")}} interface reflects the {{SVGAttr("in")}} attribute of the given {{SVGElement("feMorphology")}} element. + +## Value + +An {{domxref("SVGAnimatedString")}} object. + +## Examples + +### Accessing the `in` Property of `feMorphology` Element + +```html + + + + + + + + + +``` + +We can access the `in` attribute of the `feMorphology` element. + +```js +// Select the feMorphology element +const morphologyNode = document.querySelector("feMorphology"); +console.log(morphologyNode.in1.baseVal); // Output: "SourceGraphic" +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedString")}} diff --git a/files/en-us/web/api/svgfemorphologyelement/operator/index.md b/files/en-us/web/api/svgfemorphologyelement/operator/index.md new file mode 100644 index 000000000000000..538fc75dc8a3502 --- /dev/null +++ b/files/en-us/web/api/svgfemorphologyelement/operator/index.md @@ -0,0 +1,59 @@ +--- +title: "SVGFEMorphologyElement: operator property" +short-title: operator +slug: Web/API/SVGFEMorphologyElement/operator +page-type: web-api-instance-property +browser-compat: api.SVGFEMorphologyElement.operator +--- + +{{APIRef("SVG")}} + +The **`operator`** read-only property of the {{domxref("SVGFEMorphologyElement")}} interface reflects the {{SVGAttr("operator")}} attribute of the given {{SVGElement("feMorphology")}} element. It takes one of the `SVG_MORPHOLOGY_OPERATOR_*` constants defined on this interface. + +## Value + +An {{domxref("SVGAnimatedEnumeration")}} object. + +## Examples + +### Accessing the `operator` Property + +```html + + + + + + + + + +``` + +```js +// Select the feMorphology element +const morphologyNode = document.querySelector("feMorphology"); + +// Access the 'operator' property +const operatorEnum = morphologyNode.operator.baseVal; + +console.log(operatorEnum); // Output: 2 (SVG_MORPHOLOGY_OPERATOR_DILATE) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedEnumeration")}} diff --git a/files/en-us/web/api/svgfemorphologyelement/radiusx/index.md b/files/en-us/web/api/svgfemorphologyelement/radiusx/index.md new file mode 100644 index 000000000000000..fa557ea0ba7d3d6 --- /dev/null +++ b/files/en-us/web/api/svgfemorphologyelement/radiusx/index.md @@ -0,0 +1,59 @@ +--- +title: "SVGFEMorphologyElement: radiusX property" +short-title: radiusX +slug: Web/API/SVGFEMorphologyElement/radiusX +page-type: web-api-instance-property +browser-compat: api.SVGFEMorphologyElement.radiusX +--- + +{{APIRef("SVG")}} + +The **`radiusX`** read-only property of the {{domxref("SVGFEMorphologyElement")}} interface reflects the X component of the {{SVGAttr("radius")}} attribute of the given {{SVGElement("feMorphology")}} element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Examples + +### Accessing the `radiusX` Property + +```html + + + + + + + + + +``` + +```js +// Select the feMorphology element +const morphologyNode = document.querySelector("feMorphology"); + +// Access the radiusX property +const radiusX = morphologyNode.radiusX.baseVal; + +console.log(`The X radius is: ${radiusX}`); // Output: 5 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedNumber")}} diff --git a/files/en-us/web/api/svgfemorphologyelement/radiusy/index.md b/files/en-us/web/api/svgfemorphologyelement/radiusy/index.md new file mode 100644 index 000000000000000..e01ba6bddde2bda --- /dev/null +++ b/files/en-us/web/api/svgfemorphologyelement/radiusy/index.md @@ -0,0 +1,59 @@ +--- +title: "SVGFEMorphologyElement: radiusY property" +short-title: radiusY +slug: Web/API/SVGFEMorphologyElement/radiusY +page-type: web-api-instance-property +browser-compat: api.SVGFEMorphologyElement.radiusY +--- + +{{APIRef("SVG")}} + +The **`radiusY`** read-only property of the {{domxref("SVGFEMorphologyElement")}} interface reflects the Y component of the {{SVGAttr("radius")}} attribute of the given {{SVGElement("feMorphology")}} element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Examples + +### Accessing the `radiusY` Property + +```html + + + + + + + + + +``` + +```js +// Select the feMorphology element +const morphologyNode = document.querySelector("feMorphology"); + +// Access the radiusY property +const radiusY = morphologyNode.radiusY.baseVal; + +console.log(`The Y radius is: ${radiusY}`); // Output: 3 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedNumber")}} diff --git a/files/en-us/web/api/svgfepointlightelement/x/index.md b/files/en-us/web/api/svgfepointlightelement/x/index.md new file mode 100644 index 000000000000000..34c71943e856892 --- /dev/null +++ b/files/en-us/web/api/svgfepointlightelement/x/index.md @@ -0,0 +1,40 @@ +--- +title: "SVGFEPointLightElement: x property" +short-title: x +slug: Web/API/SVGFEPointLightElement/x +page-type: web-api-instance-property +browser-compat: api.SVGFEPointLightElement.x +--- + +{{APIRef("SVG")}} + +The **`x`** read-only property of the {{domxref("SVGFEPointLightElement")}} interface describes the horizontal coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedNumber")}}. + +It reflects the {{SVGAttr("x")}} attribute of the {{SVGElement("fePointLight")}} element, which can be used to define the light source in a point light effect. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#number). The default value is `0`. + +## Value + +An {{domxref("SVGAnimatedNumber")}}. + +## Example + +```js +const fePointLight = document.querySelector("fePointLight"); +const leftPosition = fePointLight.x; +console.log(leftPosition.baseVal.value); // the `x` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEPointLightElement.y")}} +- {{domxref("SVGFEPointLightElement.z")}} +- {{domxref("SVGFEDistantLightElement")}} +- {{domxref("SVGFESpotLightElement")}} diff --git a/files/en-us/web/api/svgfepointlightelement/y/index.md b/files/en-us/web/api/svgfepointlightelement/y/index.md new file mode 100644 index 000000000000000..e789e8820eaeecf --- /dev/null +++ b/files/en-us/web/api/svgfepointlightelement/y/index.md @@ -0,0 +1,40 @@ +--- +title: "SVGFEPointLightElement: y property" +short-title: "y" +slug: Web/API/SVGFEPointLightElement/y +page-type: web-api-instance-property +browser-compat: api.SVGFEPointLightElement.y +--- + +{{APIRef("SVG")}} + +The **`y`** read-only property of the {{domxref("SVGFEPointLightElement")}} interface describes the vertical coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedNumber")}}. + +It reflects the {{SVGAttr("y")}} attribute of the {{SVGElement("fePointLight")}} element, which can be used to define the light source in a point light effect. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#number). The default value is `0`. + +## Value + +An {{domxref("SVGAnimatedNumber")}}. + +## Example + +```js +const fePointLight = document.querySelector("fePointLight"); +const topPosition = fePointLight.y; +console.log(topPosition.baseVal.value); // the `y` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEPointLightElement.x")}} +- {{domxref("SVGFEPointLightElement.z")}} +- {{domxref("SVGFEDistantLightElement")}} +- {{domxref("SVGFESpotLightElement")}} diff --git a/files/en-us/web/api/svgfepointlightelement/z/index.md b/files/en-us/web/api/svgfepointlightelement/z/index.md new file mode 100644 index 000000000000000..4c3700613e2ba9c --- /dev/null +++ b/files/en-us/web/api/svgfepointlightelement/z/index.md @@ -0,0 +1,40 @@ +--- +title: "SVGFEPointLightElement: z property" +short-title: z +slug: Web/API/SVGFEPointLightElement/z +page-type: web-api-instance-property +browser-compat: api.SVGFEPointLightElement.z +--- + +{{APIRef("SVG")}} + +The **`z`** read-only property of the {{domxref("SVGFEPointLightElement")}} interface describes the z-axis value of the position of an SVG filter primitive as a {{domxref("SVGAnimatedNumber")}}. A positive Z-axis comes out towards the person viewing the content. + +It reflects the {{SVGAttr("z")}} attribute of the {{SVGElement("fePointLight")}} element, which can be used to define the light source in a point light effect. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#number). The default value is `0`. + +## Value + +An {{domxref("SVGAnimatedNumber")}}. + +## Example + +```js +const fePointLight = document.querySelector("fePointLight"); +const zVal = fePointLight.z; +console.log(zVal.baseVal.value); // the `z` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEPointLightElement.x")}} +- {{domxref("SVGFEPointLightElement.y")}} +- {{domxref("SVGFEDistantLightElement")}} +- {{domxref("SVGFESpotLightElement")}} diff --git a/files/en-us/web/api/svgfespecularlightingelement/height/index.md b/files/en-us/web/api/svgfespecularlightingelement/height/index.md new file mode 100644 index 000000000000000..89087ac9690d639 --- /dev/null +++ b/files/en-us/web/api/svgfespecularlightingelement/height/index.md @@ -0,0 +1,39 @@ +--- +title: "SVGFESpecularLightingElement: height property" +short-title: height +slug: Web/API/SVGFESpecularLightingElement/height +page-type: web-api-instance-property +browser-compat: api.SVGFESpecularLightingElement.height +--- + +{{APIRef("SVG")}} + +The **`height`** read-only property of the {{domxref("SVGFESpecularLightingElement")}} interface describes the vertical size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("height")}} attribute of the {{SVGElement("feSpecularLighting")}} element, which lights a source graphic using the alpha channel as a bump map. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or a [``](/en-US/docs/Web/SVG/Content_type#percentage) relative to the height of the filter region. The default value is `100%`. The property value is a length in user coordinate system units. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feSpecularLighting = document.querySelector("feSpecularLighting"); +const verticalSize = feSpecularLighting.height; +console.log(verticalSize.baseVal.value); // the `height` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFESpecularLightingElement.width")}} +- {{domxref("SVGFEDiffuseLightingElement")}} +- CSS {{cssxref("lighting-color")}} property diff --git a/files/en-us/web/api/svgfespecularlightingelement/in1/index.md b/files/en-us/web/api/svgfespecularlightingelement/in1/index.md new file mode 100644 index 000000000000000..a1b51607e9e03ca --- /dev/null +++ b/files/en-us/web/api/svgfespecularlightingelement/in1/index.md @@ -0,0 +1,65 @@ +--- +title: "SVGFESpecularLightingElement: in1 property" +short-title: in1 +slug: Web/API/SVGFESpecularLightingElement/in1 +page-type: web-api-instance-property +browser-compat: api.SVGFESpecularLightingElement.in1 +--- + +{{APIRef("SVG")}} + +The **`in1`** read-only property of the {{domxref("SVGFESpecularLightingElement")}} interface reflects the {{SVGAttr("in")}} attribute of the given {{SVGElement("feSpecularLighting")}} element. + +## Value + +An {{domxref("SVGAnimatedString")}} object. + +## Examples + +### Accessing the `in` Property of `feSpecularLighting` Element + +```html + + + + + + + + + + + +``` + +We can access the `in` attribute of the `feSpecularLighting` element. + +```js +// Select the feSpecularLighting element +const specularLightingElement = document.querySelector("feSpecularLighting"); + +// Access the in1 property +console.log(specularLightingElement.in1.baseVal); // Output: "SourceGraphic" +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedString")}} diff --git a/files/en-us/web/api/svgfespecularlightingelement/result/index.md b/files/en-us/web/api/svgfespecularlightingelement/result/index.md new file mode 100644 index 000000000000000..61b0538ca73caad --- /dev/null +++ b/files/en-us/web/api/svgfespecularlightingelement/result/index.md @@ -0,0 +1,42 @@ +--- +title: "SVGFESpecularLightingElement: result property" +short-title: result +slug: Web/API/SVGFESpecularLightingElement/result +page-type: web-api-instance-property +browser-compat: api.SVGFESpecularLightingElement.result +--- + +{{APIRef("SVG")}} + +The **`result`** read-only property of the {{domxref("SVGFESpecularLightingElement")}} interface describes the assigned name of an SVG filter primitive as a {{domxref("SVGAnimatedString")}}. + +It reflects the {{SVGAttr("result")}} attribute of the {{SVGElement("feSpecularLighting")}} element, which lights a source graphic using the alpha channel as a bump map. The attribute value is a {{cssxref("custom-ident")}}. If supplied, then graphics that result from processing this filter primitive can be referenced by an {{SVGAttr("in")}} attribute on a subsequent filter primitive within the same {{SVGElement("filter")}} element. + +If no `result` attribute is defined, the filter's `result.baseVal` and `result.animVal` are empty strings, and the output of the `` filter will only be available for re-use as the implicit input into the next filter primitive if that filter primitive provides no value for its `in` attribute. + +## Value + +An {{domxref("SVGAnimatedString")}}. + +## Example + +```js +const feSpecularLightingElement = document.querySelector("feSpecularLighting"); +const filterName = feSpecularLightingElement.result; +console.log(filterName.baseVal); // the filter's assigned name +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFESpecularLightingElement.in1")}} +- {{cssxref("custom-ident")}} data type +- {{domxref("SVGFEDiffuseLightingElement")}} +- CSS {{cssxref("lighting-color")}} property diff --git a/files/en-us/web/api/svgfespecularlightingelement/specularconstant/index.md b/files/en-us/web/api/svgfespecularlightingelement/specularconstant/index.md new file mode 100644 index 000000000000000..46964337d9ea282 --- /dev/null +++ b/files/en-us/web/api/svgfespecularlightingelement/specularconstant/index.md @@ -0,0 +1,62 @@ +--- +title: "SVGFESpecularLightingElement: specularConstant property" +short-title: specularConstant +slug: Web/API/SVGFESpecularLightingElement/specularConstant +page-type: web-api-instance-property +browser-compat: api.SVGFESpecularLightingElement.specularConstant +--- + +{{APIRef("SVG")}} + +The **`specularConstant`** read-only property of the {{domxref("SVGFESpecularLightingElement")}} interface reflects the {{SVGAttr("specularConstant")}} attribute of the given {{SVGElement("feSpecularLighting")}} element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Examples + +### Accessing the `specularConstant` Property + +```html + + + + + + + + + + + +``` + +```js +// Select the feSpecularLighting element +const specularLightingElement = document.querySelector("feSpecularLighting"); + +// Access the specularConstant property +console.log(specularLightingElement.specularConstant.baseVal); // Output: 0.5 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedNumber")}} diff --git a/files/en-us/web/api/svgfespecularlightingelement/specularexponent/index.md b/files/en-us/web/api/svgfespecularlightingelement/specularexponent/index.md new file mode 100644 index 000000000000000..e6c24bbd479af76 --- /dev/null +++ b/files/en-us/web/api/svgfespecularlightingelement/specularexponent/index.md @@ -0,0 +1,62 @@ +--- +title: "SVGFESpecularLightingElement: specularExponent property" +short-title: specularExponent +slug: Web/API/SVGFESpecularLightingElement/specularExponent +page-type: web-api-instance-property +browser-compat: api.SVGFESpecularLightingElement.specularExponent +--- + +{{APIRef("SVG")}} + +The **`specularExponent`** read-only property of the {{domxref("SVGFESpecularLightingElement")}} interface reflects the {{SVGAttr("specularExponent")}} attribute of the given {{SVGElement("feSpecularLighting")}} element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Examples + +### Accessing the `specularExponent` Property + +```html + + + + + + + + + + + +``` + +```js +// Select the feSpecularLighting element +const specularLightingElement = document.querySelector("feSpecularLighting"); + +// Access the specularExponent property +console.log(specularLightingElement.specularExponent.baseVal); // Output: 40 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedNumber")}} diff --git a/files/en-us/web/api/svgfespecularlightingelement/surfacescale/index.md b/files/en-us/web/api/svgfespecularlightingelement/surfacescale/index.md new file mode 100644 index 000000000000000..a5217881bdcf11a --- /dev/null +++ b/files/en-us/web/api/svgfespecularlightingelement/surfacescale/index.md @@ -0,0 +1,63 @@ +--- +title: "SVGFESpecularLightingElement: surfaceScale property" +short-title: surfaceScale +slug: Web/API/SVGFESpecularLightingElement/surfaceScale +page-type: web-api-instance-property +browser-compat: api.SVGFESpecularLightingElement.surfaceScale +--- + +{{APIRef("SVG")}} + +The **`surfaceScale`** read-only property of the {{domxref("SVGFESpecularLightingElement")}} interface reflects the {{SVGAttr("surfaceScale")}} attribute of the given {{SVGElement("feSpecularLighting")}} element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Examples + +### Accessing the `surfaceScale` Property + +```html + + + + + + + + + + + +``` + +```js +// Select the feSpecularLighting element +const specularLightingElement = document.querySelector("feSpecularLighting"); + +// Access the surfaceScale property +console.log(specularLightingElement.surfaceScale.baseVal); // Output: 3 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedNumber")}} diff --git a/files/en-us/web/api/svgfespecularlightingelement/width/index.md b/files/en-us/web/api/svgfespecularlightingelement/width/index.md new file mode 100644 index 000000000000000..8427ce4f8f798bc --- /dev/null +++ b/files/en-us/web/api/svgfespecularlightingelement/width/index.md @@ -0,0 +1,39 @@ +--- +title: "SVGFESpecularLightingElement: width property" +short-title: width +slug: Web/API/SVGFESpecularLightingElement/width +page-type: web-api-instance-property +browser-compat: api.SVGFESpecularLightingElement.width +--- + +{{APIRef("SVG")}} + +The **`width`** read-only property of the {{domxref("SVGFESpecularLightingElement")}} interface describes the horizontal size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("width")}} attribute of the {{SVGElement("feSpecularLighting")}} element, which lights a source graphic using the alpha channel as a bump map. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or a [``](/en-US/docs/Web/SVG/Content_type#percentage) relative to the width of the filter region. The default value is `100%`. The property value is a length in user coordinate system units. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feSpecularLighting = document.querySelector("feSpecularLighting"); +const horizontalSize = feSpecularLighting.width; +console.log(horizontalSize.baseVal.value); // the `width` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFESpecularLightingElement.height")}} +- {{domxref("SVGFEDiffuseLightingElement")}} +- CSS {{cssxref("lighting-color")}} property diff --git a/files/en-us/web/api/svgfespecularlightingelement/x/index.md b/files/en-us/web/api/svgfespecularlightingelement/x/index.md new file mode 100644 index 000000000000000..621b2ab9820b5d5 --- /dev/null +++ b/files/en-us/web/api/svgfespecularlightingelement/x/index.md @@ -0,0 +1,39 @@ +--- +title: "SVGFESpecularLightingElement: x property" +short-title: x +slug: Web/API/SVGFESpecularLightingElement/x +page-type: web-api-instance-property +browser-compat: api.SVGFESpecularLightingElement.x +--- + +{{APIRef("SVG")}} + +The **`x`** read-only property of the {{domxref("SVGFESpecularLightingElement")}} interface describes the horizontal coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("x")}} attribute of the {{SVGElement("feSpecularLighting")}} element, which lights a source graphic using the alpha channel as a bump map. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or [``](/en-US/docs/Web/SVG/Content_type#percentage). The `` is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the x-axis. If the `x` attribute is a percent value, the property value is relative to the width of the filter region in user coordinate system units. The default value is `0`. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feSpecularLighting = document.querySelector("feSpecularLighting"); +const leftPosition = feSpecularLighting.x; +console.log(leftPosition.baseVal.value); // the `x` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFESpecularLightingElement.y")}} +- {{domxref("SVGFEDiffuseLightingElement")}} +- CSS {{cssxref("lighting-color")}} property diff --git a/files/en-us/web/api/svgfespecularlightingelement/y/index.md b/files/en-us/web/api/svgfespecularlightingelement/y/index.md new file mode 100644 index 000000000000000..ee0b8f635090ad3 --- /dev/null +++ b/files/en-us/web/api/svgfespecularlightingelement/y/index.md @@ -0,0 +1,39 @@ +--- +title: "SVGFESpecularLightingElement: y property" +short-title: "y" +slug: Web/API/SVGFESpecularLightingElement/y +page-type: web-api-instance-property +browser-compat: api.SVGFESpecularLightingElement.y +--- + +{{APIRef("SVG")}} + +The **`y`** read-only property of the {{domxref("SVGFESpecularLightingElement")}} interface describes the vertical coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("y")}} attribute of the {{SVGElement("feSpecularLighting")}} element, which lights a source graphic using the alpha channel as a bump map. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or [``](/en-US/docs/Web/SVG/Content_type#percentage). The `` is a length in the user coordinate system that is the given distance from the origin of the filter along the y-axis. If the `y` attribute is a percent value, the property value is a relative to the height of the filter region in user coordinate system units. The default value is `0`. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feSpecularLighting = document.querySelector("feSpecularLighting"); +const topPosition = feSpecularLighting.y; +console.log(topPosition.baseVal.value); // the `y` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFESpecularLightingElement.x")}} +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfespotlightelement/x/index.md b/files/en-us/web/api/svgfespotlightelement/x/index.md new file mode 100644 index 000000000000000..ed1f3f0e2d892ec --- /dev/null +++ b/files/en-us/web/api/svgfespotlightelement/x/index.md @@ -0,0 +1,40 @@ +--- +title: "SVGFESpotLightElement: x property" +short-title: x +slug: Web/API/SVGFESpotLightElement/x +page-type: web-api-instance-property +browser-compat: api.SVGFESpotLightElement.x +--- + +{{APIRef("SVG")}} + +The **`x`** read-only property of the {{domxref("SVGFESpotLightElement")}} interface describes the horizontal coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedNumber")}}. + +It reflects the {{SVGAttr("x")}} attribute of the {{SVGElement("feSpotLight")}} element., which can be used to define the light source in a spotlight effect. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#number). The default value is `0`. + +## Value + +An {{domxref("SVGAnimatedNumber")}}. + +## Example + +```js +const feSpotLight = document.querySelector("feSpotLight"); +const leftPosition = feSpotLight.x; +console.log(leftPosition.baseVal.value); // the `x` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFESpotLightElement.y")}} +- {{domxref("SVGFESpotLightElement.z")}} +- {{domxref("SVGFEDistantLightElement")}} +- {{domxref("SVGFEPointLightElement")}} diff --git a/files/en-us/web/api/svgfespotlightelement/y/index.md b/files/en-us/web/api/svgfespotlightelement/y/index.md new file mode 100644 index 000000000000000..75f931c50c4cff8 --- /dev/null +++ b/files/en-us/web/api/svgfespotlightelement/y/index.md @@ -0,0 +1,40 @@ +--- +title: "SVGFESpotLightElement: y property" +short-title: "y" +slug: Web/API/SVGFESpotLightElement/y +page-type: web-api-instance-property +browser-compat: api.SVGFESpotLightElement.y +--- + +{{APIRef("SVG")}} + +The **`y`** read-only property of the {{domxref("SVGFESpotLightElement")}} interface describes the vertical coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedNumber")}}. + +It reflects the {{SVGAttr("y")}} attribute of the {{SVGElement("feSpotLight")}} element., which can be used to define the light source in a spotlight effect. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#number). The default value is `0`. + +## Value + +An {{domxref("SVGAnimatedNumber")}}. + +## Example + +```js +const feSpotLight = document.querySelector("feSpotLight"); +const topPosition = feSpotLight.y; +console.log(topPosition.baseVal.value); // the `y` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFESpotLightElement.x")}} +- {{domxref("SVGFESpotLightElement.z")}} +- {{domxref("SVGFEDistantLightElement")}} +- {{domxref("SVGFEPointLightElement")}} diff --git a/files/en-us/web/api/svgfespotlightelement/z/index.md b/files/en-us/web/api/svgfespotlightelement/z/index.md new file mode 100644 index 000000000000000..e9bce8fdade293f --- /dev/null +++ b/files/en-us/web/api/svgfespotlightelement/z/index.md @@ -0,0 +1,40 @@ +--- +title: "SVGFESpotLightElement: z property" +short-title: z +slug: Web/API/SVGFESpotLightElement/z +page-type: web-api-instance-property +browser-compat: api.SVGFESpotLightElement.z +--- + +{{APIRef("SVG")}} + +The **`z`** read-only property of the {{domxref("SVGFESpotLightElement")}} interface describes the z-axis value of the position of an SVG filter primitive as a {{domxref("SVGAnimatedNumber")}}. A positive Z-axis comes out towards the person viewing the content. + +It reflects the {{SVGAttr("z")}} attribute of the {{SVGElement("feSpotLight")}} element, which can be used to define the light source in a spotlight effect. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#number). The default value is `0`. + +## Value + +An {{domxref("SVGAnimatedNumber")}}. + +## Example + +```js +const feSpotLight = document.querySelector("feSpotLight"); +const zVal = feSpotLight.z; +console.log(zVal.baseVal.value); // the `z` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFESpotLightElement.x")}} +- {{domxref("SVGFESpotLightElement.y")}} +- {{domxref("SVGFEDistantLightElement")}} +- {{domxref("SVGFEPointLightElement")}} diff --git a/files/en-us/web/api/svgfilterelement/filterunits/index.md b/files/en-us/web/api/svgfilterelement/filterunits/index.md new file mode 100644 index 000000000000000..d514a418e3d4d45 --- /dev/null +++ b/files/en-us/web/api/svgfilterelement/filterunits/index.md @@ -0,0 +1,63 @@ +--- +title: "SVGFilterElement: filterUnits property" +short-title: filterUnits +slug: Web/API/SVGFilterElement/filterUnits +page-type: web-api-instance-property +browser-compat: api.SVGFilterElement.filterUnits +--- + +{{APIRef("SVG")}} + +The **`filterUnits`** read-only property of the {{domxref("SVGFilterElement")}} interface reflects the {{SVGAttr("filterUnits")}} attribute of the given {{SVGElement("filter")}} element. It takes one of the `SVG_UNIT_TYPE_*` constants defined in {{domxref("SVGUnitTypes")}}. + +## Value + +An {{domxref("SVGAnimatedEnumeration")}}. + +## Examples + +### Accessing the `filterUnits` property + +```html + + + + + + + + +``` + +```js +const filterElement = document.querySelector("filter"); + +// Access the filterUnits property +console.log(filterElement.filterUnits.baseVal); // Output: 1 (SVG_UNIT_TYPE_USERSPACEONUSE) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFilterElement.primitiveUnits")}} +- {{domxref("SVGUnitTypes")}} +- [SVG filter primitive attributes](/en-US/docs/Web/SVG/Attribute#filters_attributes) diff --git a/files/en-us/web/api/svgfilterelement/height/index.md b/files/en-us/web/api/svgfilterelement/height/index.md new file mode 100644 index 000000000000000..05665449cb9fab1 --- /dev/null +++ b/files/en-us/web/api/svgfilterelement/height/index.md @@ -0,0 +1,40 @@ +--- +title: "SVGFilterElement: height property" +short-title: height +slug: Web/API/SVGFilterElement/height +page-type: web-api-instance-property +browser-compat: api.SVGFilterElement.height +--- + +{{APIRef("SVG")}} + +The **`height`** read-only property of the {{domxref("SVGFilterElement")}} interface describes the vertical size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("height")}} attribute of the {{SVGElement("filter")}} element. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or a [``](/en-US/docs/Web/SVG/Content_type#percentage) relative to the height of the filter region. The default value is `100%`. The property value is a length in user coordinate system units. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const filter = document.querySelector("filter"); +const verticalSize = filter.height; +console.log(verticalSize.baseVal.value); // the `height` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [SVG tutorial: Filter effects](/en-US/docs/Web/SVG/Tutorial/Filter_effects) +- [SVG filter primitive attributes](/en-US/docs/Web/SVG/Attribute#filters_attributes) +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfilterelement/href/index.md b/files/en-us/web/api/svgfilterelement/href/index.md new file mode 100644 index 000000000000000..7d0b2dfd8d6136d --- /dev/null +++ b/files/en-us/web/api/svgfilterelement/href/index.md @@ -0,0 +1,55 @@ +--- +title: "SVGFilterElement: href property" +short-title: href +slug: Web/API/SVGFilterElement/href +page-type: web-api-instance-property +browser-compat: api.SVGFilterElement.href +--- + +{{APIRef("SVG")}} + +The **`href`** read-only property of the {{domxref("SVGFilterElement")}} interface reflects the {{SVGAttr("href")}} or {{SVGAttr("xlink:href")}} {{deprecated_inline}} attribute of the given {{SVGElement("filter")}} element. + +## Value + +An {{domxref("SVGAnimatedString")}}. + +## Examples + +### Accessing the `href` property + +```html + + + + + + + + +``` + +```js +const filterElement = document.querySelector("filter"); + +// Access the href property +console.log(filterElement.href.baseVal); // Output: "#myFilter" +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- SVG {{SVGAttr("href")}} attribute diff --git a/files/en-us/web/api/svgfilterelement/primitiveunits/index.md b/files/en-us/web/api/svgfilterelement/primitiveunits/index.md new file mode 100644 index 000000000000000..020eac465f33db9 --- /dev/null +++ b/files/en-us/web/api/svgfilterelement/primitiveunits/index.md @@ -0,0 +1,61 @@ +--- +title: "SVGFilterElement: primitiveUnits property" +short-title: primitiveUnits +slug: Web/API/SVGFilterElement/primitiveUnits +page-type: web-api-instance-property +browser-compat: api.SVGFilterElement.primitiveUnits +--- + +{{APIRef("SVG")}} + +The **`primitiveUnits`** read-only property of the {{domxref("SVGFilterElement")}} interface reflects the {{SVGAttr("primitiveUnits")}} attribute of the given {{SVGElement("filter")}} element. It takes one of the `SVG_UNIT_TYPE_*` constants defined in {{domxref("SVGUnitTypes")}}. + +## Value + +An {{domxref("SVGAnimatedEnumeration")}} object. + +## Examples + +### Accessing the `primitiveUnits` property + +```html + + + + + + + + +``` + +```js +const filterElement = document.querySelector("filter"); + +// Access the primitiveUnits property +console.log(filterElement.primitiveUnits.baseVal); // Output: 1 (SVG_UNIT_TYPE_USERSPACEONUSE) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFilterElement.filterUnits")}} diff --git a/files/en-us/web/api/svgfilterelement/width/index.md b/files/en-us/web/api/svgfilterelement/width/index.md new file mode 100644 index 000000000000000..64c99da8be4e1af --- /dev/null +++ b/files/en-us/web/api/svgfilterelement/width/index.md @@ -0,0 +1,40 @@ +--- +title: "SVGFilterElement: width property" +short-title: width +slug: Web/API/SVGFilterElement/width +page-type: web-api-instance-property +browser-compat: api.SVGFilterElement.width +--- + +{{APIRef("SVG")}} + +The **`width`** read-only property of the {{domxref("SVGFilterElement")}} interface describes the horizontal size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("width")}} attribute of the {{SVGElement("filter")}} element. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or a [``](/en-US/docs/Web/SVG/Content_type#percentage) relative to the width of the filter region. The default value is `100%`. The property value is a length in user coordinate system units. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const filter = document.querySelector("filter"); +const horizontalSize = filter.width; +console.log(horizontalSize.baseVal.value); // the `width` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [SVG tutorial: Filter effects](/en-US/docs/Web/SVG/Tutorial/Filter_effects) +- [SVG Filter primitive attributes](/en-US/docs/Web/SVG/Attribute#filters_attributes) +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfilterelement/x/index.md b/files/en-us/web/api/svgfilterelement/x/index.md new file mode 100644 index 000000000000000..1b4a420a5e7cde3 --- /dev/null +++ b/files/en-us/web/api/svgfilterelement/x/index.md @@ -0,0 +1,40 @@ +--- +title: "SVGFilterElement: x property" +short-title: x +slug: Web/API/SVGFilterElement/x +page-type: web-api-instance-property +browser-compat: api.SVGFilterElement.x +--- + +{{APIRef("SVG")}} + +The **`x`** read-only property of the {{domxref("SVGFilterElement")}} interface describes the horizontal coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("x")}} attribute of the {{SVGElement("filter")}} element. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or [``](/en-US/docs/Web/SVG/Content_type#percentage). The `` is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the x-axis. If the `x` attribute is a percent value, the property value is relative to the width of the filter region in user coordinate system units. The default value is `0`. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const filter = document.querySelector("filter"); +const leftPosition = filter.x; +console.log(leftPosition.baseVal.value); // the `x` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [SVG tutorial: Filter effects](/en-US/docs/Web/SVG/Tutorial/Filter_effects) +- [SVG Filter primitive attributes](/en-US/docs/Web/SVG/Attribute#filters_attributes) +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfilterelement/y/index.md b/files/en-us/web/api/svgfilterelement/y/index.md new file mode 100644 index 000000000000000..7678901d9c0899e --- /dev/null +++ b/files/en-us/web/api/svgfilterelement/y/index.md @@ -0,0 +1,40 @@ +--- +title: "SVGFilterElement: y property" +short-title: "y" +slug: Web/API/SVGFilterElement/y +page-type: web-api-instance-property +browser-compat: api.SVGFilterElement.y +--- + +{{APIRef("SVG")}} + +The **`y`** read-only property of the {{domxref("SVGFilterElement")}} interface describes the vertical coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("y")}} attribute of the {{SVGElement("filter")}} element. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or [``](/en-US/docs/Web/SVG/Content_type#percentage). The `` is a length in the user coordinate system that is the given distance from the origin of the filter along the y-axis. If the `y` attribute is a percent value, the property value is a relative to the height of the filter region in user coordinate system units. The default value is `0`. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const filter = document.querySelector("filter"); +const topPosition = filter.y; +console.log(topPosition.baseVal.value); // the `y` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [SVG tutorial: Filter effects](/en-US/docs/Web/SVG/Tutorial/Filter_effects) +- [SVG Filter primitive attributes](/en-US/docs/Web/SVG/Attribute#filters_attributes) +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svggradientelement/gradienttransform/index.md b/files/en-us/web/api/svggradientelement/gradienttransform/index.md new file mode 100644 index 000000000000000..a4c0be2b505ce30 --- /dev/null +++ b/files/en-us/web/api/svggradientelement/gradienttransform/index.md @@ -0,0 +1,46 @@ +--- +title: "SVGGradientElement: gradientTransform property" +short-title: gradientTransform +slug: Web/API/SVGGradientElement/gradientTransform +page-type: web-api-instance-property +browser-compat: api.SVGGradientElement.gradientTransform +--- + +{{APIRef("SVG")}} + +The **`gradientTransform`** read-only property of the {{domxref("SVGGradientElement")}} interface reflects the {{SVGAttr("gradientTransform")}} attribute of the given element. + +## Value + +An {{domxref("SVGAnimatedTransformList")}}. + +## Examples + +### Accessing the `gradientTransform` property + +```html + + + + + + + + + +``` + +```js +// Accessing the gradientTransform property +const gradient = document.getElementById("gradient3"); +console.dir(gradient.gradientTransform.baseVal); +// Output: SVGTransformList object +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svggradientelement/gradientunits/index.md b/files/en-us/web/api/svggradientelement/gradientunits/index.md new file mode 100644 index 000000000000000..721c9d911b1db62 --- /dev/null +++ b/files/en-us/web/api/svggradientelement/gradientunits/index.md @@ -0,0 +1,44 @@ +--- +title: "SVGGradientElement: gradientUnits property" +short-title: gradientUnits +slug: Web/API/SVGGradientElement/gradientUnits +page-type: web-api-instance-property +browser-compat: api.SVGGradientElement.gradientUnits +--- + +{{APIRef("SVG")}} + +The **`gradientUnits`** read-only property of the {{domxref("SVGGradientElement")}} interface reflects the {{SVGAttr("gradientUnits")}} attribute of the given element. It takes one of the `SVG_UNIT_TYPE_*` constants defined in {{domxref("SVGUnitTypes")}}. + +## Value + +An {{domxref("SVGAnimatedEnumeration")}}. + +## Examples + +### Accessing the `gradientUnits` property + +```html + + + + + + + + + +``` + +```js +const gradient = document.getElementById("gradient1"); +console.log(gradient.gradientUnits.baseVal); // Output: 1 (SVG_UNIT_TYPE_USERSPACEONUSE) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svggradientelement/href/index.md b/files/en-us/web/api/svggradientelement/href/index.md new file mode 100644 index 000000000000000..895f4532b73f407 --- /dev/null +++ b/files/en-us/web/api/svggradientelement/href/index.md @@ -0,0 +1,45 @@ +--- +title: "SVGGradientElement: href property" +short-title: href +slug: Web/API/SVGGradientElement/href +page-type: web-api-instance-property +browser-compat: api.SVGGradientElement.href +--- + +{{APIRef("SVG")}} + +The **`href`** read-only property of the {{domxref("SVGGradientElement")}} interface reflects the {{SVGAttr("href")}} or {{SVGAttr("xlink:href")}} {{deprecated_inline}} attribute of the given element. + +## Value + +An {{domxref("SVGAnimatedString")}}. + +## Examples + +### Accessing the `href` property + +```html + + + + + + + + + + +``` + +```js +const gradient = document.getElementById("gradient2"); +console.log(gradient.href.baseVal); // Output: "#gradient1" +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svggradientelement/spreadmethod/index.md b/files/en-us/web/api/svggradientelement/spreadmethod/index.md new file mode 100644 index 000000000000000..c5e34a826cf15ee --- /dev/null +++ b/files/en-us/web/api/svggradientelement/spreadmethod/index.md @@ -0,0 +1,45 @@ +--- +title: "SVGGradientElement: spreadMethod property" +short-title: spreadMethod +slug: Web/API/SVGGradientElement/spreadMethod +page-type: web-api-instance-property +browser-compat: api.SVGGradientElement.spreadMethod +--- + +{{APIRef("SVG")}} + +The **`spreadMethod`** read-only property of the {{domxref("SVGGradientElement")}} interface reflects the {{SVGAttr("spreadMethod")}} attribute of the given element. It takes one of the `SVG_SPREADMETHOD_*` constants defined on this interface. + +## Value + +An {{domxref("SVGAnimatedEnumeration")}}. + +## Examples + +### Accessing the `spreadMethod` property + +```html + + + + + + + + + + +``` + +```js +const gradient = document.getElementById("gradient2"); +console.log(gradient.spreadMethod.baseVal); // Output: 2 (SVG_SPREADMETHOD_REFLECT) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgimageelement/href/index.md b/files/en-us/web/api/svgimageelement/href/index.md new file mode 100644 index 000000000000000..eaa392056cad51c --- /dev/null +++ b/files/en-us/web/api/svgimageelement/href/index.md @@ -0,0 +1,37 @@ +--- +title: "SVGImageElement: href property" +short-title: href +slug: Web/API/SVGImageElement/href +page-type: web-api-instance-property +browser-compat: api.SVGImageElement.href +--- + +{{APIRef("SVG")}} + +The **`href`** read-only property of the {{domxref("SVGImageElement")}} interface reflects the {{SVGAttr("href")}} or {{SVGAttr("xlink:href")}} {{deprecated_inline}} attribute of the given {{SVGElement("image")}} element. + +## Value + +An {{domxref("SVGAnimatedString")}} object. + +## Examples + +### Accessing the `href` property + +```js +// Get the SVG image element +const imageElement = document.querySelector("image"); + +// Access the href property +const href = imageElement.href.baseVal; + +console.log(href); // Output: The href value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svglineargradientelement/x1/index.md b/files/en-us/web/api/svglineargradientelement/x1/index.md new file mode 100644 index 000000000000000..abd9eb101c60b79 --- /dev/null +++ b/files/en-us/web/api/svglineargradientelement/x1/index.md @@ -0,0 +1,62 @@ +--- +title: "SVGLinearGradientElement: x1 property" +short-title: x1 +slug: Web/API/SVGLinearGradientElement/x1 +page-type: web-api-instance-property +browser-compat: api.SVGLinearGradientElement.x1 +--- + +{{APIRef("SVG")}} + +The **`x1`** read-only property of the {{domxref("SVGLinearGradientElement")}} interface describes the x-axis coordinate of the start point of the gradient as an {{domxref("SVGAnimatedLength")}}. It reflects the computed value of the {{SVGAttr("x1")}} attribute on the {{SVGElement("linearGradient")}} element. + +The attribute value is a [``](/en-US/docs/Web/SVG/Content_type#length), [``](/en-US/docs/Web/SVG/Content_type#percentage), or [``](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the x-coordinate of the gradient's starting point in the user coordinate system. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +Given the following SVG: + +```html + + + + + + + + + + + + + + +``` + +We can access the computed values of the `x1` attributes: + +```js +const linearGradients = document.querySelectorAll("linearGradient"); +const x1Gradient1 = linearGradients[0].x1; +const x1Gradient2 = linearGradients[1].x1; + +console.dir(x1Gradient1.baseVal.value); // output: 100 (50% of 200) +console.dir(x1Gradient2.baseVal.value); // output: 50 (25% of 200) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGLinearGradientElement.x2")}} +- {{domxref("SVGAnimatedLength.baseVal")}} diff --git a/files/en-us/web/api/svglineargradientelement/x2/index.md b/files/en-us/web/api/svglineargradientelement/x2/index.md new file mode 100644 index 000000000000000..125c0e754358dd5 --- /dev/null +++ b/files/en-us/web/api/svglineargradientelement/x2/index.md @@ -0,0 +1,62 @@ +--- +title: "SVGLinearGradientElement: x2 property" +short-title: x2 +slug: Web/API/SVGLinearGradientElement/x2 +page-type: web-api-instance-property +browser-compat: api.SVGLinearGradientElement.x2 +--- + +{{APIRef("SVG")}} + +The **`x2`** read-only property of the {{domxref("SVGLinearGradientElement")}} interface describes the x-axis coordinate of the start point of the gradient as an {{domxref("SVGAnimatedLength")}}. It reflects the computed value of the {{SVGAttr("x2")}} attribute on the {{SVGElement("linearGradient")}} element. + +The attribute value is a [``](/en-US/docs/Web/SVG/Content_type#length), [``](/en-US/docs/Web/SVG/Content_type#percentage), or [``](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the x-coordinate of the gradient's end point in the user coordinate system. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +Given the following SVG: + +```html + + + + + + + + + + + + + + +``` + +We can access the computed values of the `x2` attributes: + +```js +const linearGradients = document.querySelectorAll("linearGradient"); +const x2Gradient1 = linearGradients[0].x2; +const x2Gradient2 = linearGradients[1].x2; + +console.dir(x2Gradient1.baseVal.value); // output: 100 (50% of 200) +console.dir(x2Gradient2.baseVal.value); // output: 150 (75% of 200) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGLinearGradientElement.x1")}} +- {{domxref("SVGAnimatedLength.baseVal")}} diff --git a/files/en-us/web/api/svglineargradientelement/y1/index.md b/files/en-us/web/api/svglineargradientelement/y1/index.md new file mode 100644 index 000000000000000..0c10de7f07b6ab8 --- /dev/null +++ b/files/en-us/web/api/svglineargradientelement/y1/index.md @@ -0,0 +1,62 @@ +--- +title: "SVGLinearGradientElement: y1 property" +short-title: y1 +slug: Web/API/SVGLinearGradientElement/y1 +page-type: web-api-instance-property +browser-compat: api.SVGLinearGradientElement.y1 +--- + +{{APIRef("SVG")}} + +The **`y1`** read-only property of the {{domxref("SVGLinearGradientElement")}} interface describes the y-axis coordinate of the start point of the gradient as an {{domxref("SVGAnimatedLength")}}. It reflects the computed value of the {{SVGAttr("y1")}} attribute on the {{SVGElement("linearGradient")}} element. + +The attribute value is a [``](/en-US/docs/Web/SVG/Content_type#length), [``](/en-US/docs/Web/SVG/Content_type#percentage), or [``](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the y-coordinate of the gradient's starting point in the user coordinate system. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +Given the following SVG: + +```html + + + + + + + + + + + + + + +``` + +We can access the computed values of the `y1` attributes: + +```js +const linearGradients = document.querySelectorAll("linearGradient"); +const y1Gradient1 = linearGradients[0].y1; +const y1Gradient2 = linearGradients[1].y1; + +console.dir(y1Gradient1.baseVal.value); // output: 0 (0% of 200) +console.dir(y1Gradient2.baseVal.value); // output: 0 (0% of 200) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGLinearGradientElement.y2")}} +- {{domxref("SVGAnimatedLength.baseVal")}} diff --git a/files/en-us/web/api/svglineargradientelement/y2/index.md b/files/en-us/web/api/svglineargradientelement/y2/index.md new file mode 100644 index 000000000000000..51b7b7ff9f32978 --- /dev/null +++ b/files/en-us/web/api/svglineargradientelement/y2/index.md @@ -0,0 +1,62 @@ +--- +title: "SVGLinearGradientElement: y2 property" +short-title: y2 +slug: Web/API/SVGLinearGradientElement/y2 +page-type: web-api-instance-property +browser-compat: api.SVGLinearGradientElement.y2 +--- + +{{APIRef("SVG")}} + +The **`y2`** read-only property of the {{domxref("SVGLinearGradientElement")}} interface describes the y-axis coordinate of the start point of the gradient as an {{domxref("SVGAnimatedLength")}}. It reflects the computed value of the {{SVGAttr("y2")}} attribute on the {{SVGElement("linearGradient")}} element. + +The attribute value is a [``](/en-US/docs/Web/SVG/Content_type#length), [``](/en-US/docs/Web/SVG/Content_type#percentage), or [``](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the y-coordinate of the gradient's end point in the user coordinate system. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +Given the following SVG: + +```html + + + + + + + + + + + + + + +``` + +We can access the computed values of the `y2` attributes: + +```js +const linearGradients = document.querySelectorAll("linearGradient"); +const y2Gradient1 = linearGradients[0].y2; +const y2Gradient2 = linearGradients[1].y2; + +console.dir(y2Gradient1.baseVal.value); // output: 200 (100% of 200) +console.dir(y2Gradient2.baseVal.value); // output: 200 (100% of 200) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGLinearGradientElement.y1")}} +- {{domxref("SVGAnimatedLength.baseVal")}} diff --git a/files/en-us/web/api/svglineelement/x1/index.md b/files/en-us/web/api/svglineelement/x1/index.md new file mode 100644 index 000000000000000..7c949f84723f2ad --- /dev/null +++ b/files/en-us/web/api/svglineelement/x1/index.md @@ -0,0 +1,51 @@ +--- +title: "SVGLineElement: x1 property" +short-title: x1 +slug: Web/API/SVGLineElement/x1 +page-type: web-api-instance-property +browser-compat: api.SVGLineElement.x1 +--- + +{{APIRef("SVG")}} + +The **`x1`** read-only property of the {{domxref("SVGLineElement")}} interface describes the start of the SVG line along the x-axis as an {{domxref("SVGAnimatedLength")}}. It reflects the {{SVGElement("line")}} element's {{SVGAttr("x1")}} geometric attribute. + +The attribute value is a [``](/en-US/docs/Web/SVG/Content_type#length), [``](/en-US/docs/Web/SVG/Content_type#percentage), or [``](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is that start position as a length along the x-axis in user coordinate system units. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +Given the following SVG: + +```html + + + + +``` + +We can access the computed values of the `x1` attributes: + +```js +const lines = document.querySelectorAll("line"); +const x1Pos0 = lines[0].x1; +const x1Pos1 = lines[1].x1; +console.dir(x1Pos0.baseVal.value); // output: 20 (the value of `x1`) +console.dir(x1Pos1.baseVal.value); // output: 45 (15% of 300) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGLineElement.x2")}} +- {{domxref("SVGAnimatedLength.baseVal")}} diff --git a/files/en-us/web/api/svglineelement/x2/index.md b/files/en-us/web/api/svglineelement/x2/index.md new file mode 100644 index 000000000000000..c9c9d8214501baa --- /dev/null +++ b/files/en-us/web/api/svglineelement/x2/index.md @@ -0,0 +1,51 @@ +--- +title: "SVGLineElement: x2 property" +short-title: x2 +slug: Web/API/SVGLineElement/x2 +page-type: web-api-instance-property +browser-compat: api.SVGLineElement.x2 +--- + +{{APIRef("SVG")}} + +The **`x2`** read-only property of the {{domxref("SVGLineElement")}} interface describes the x-axis coordinate value of the end of a line as an {{domxref("SVGAnimatedLength")}}. It reflects the {{SVGElement("line")}} element's {{SVGAttr("x2")}} geometric attribute. + +The attribute value is a [``](/en-US/docs/Web/SVG/Content_type#length), [``](/en-US/docs/Web/SVG/Content_type#percentage), or [``](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is that end position along the x-axis in user coordinate system units. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +Given the following SVG: + +```html + + + + +``` + +We can access the computed values of the `x2` attributes: + +```js +const lines = document.querySelectorAll("line"); +const x2Pos0 = lines[0].x2; +const x2Pos1 = lines[1].x2; +console.dir(x2Pos0.baseVal.value); // output: 40 (the value of `x2`) +console.dir(x2Pos1.baseVal.value); // output: 90 (30% of 300) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGLineElement.y2")}} +- {{domxref("SVGAnimatedLength.baseVal")}} diff --git a/files/en-us/web/api/svglineelement/y1/index.md b/files/en-us/web/api/svglineelement/y1/index.md new file mode 100644 index 000000000000000..7919bfd75f795e4 --- /dev/null +++ b/files/en-us/web/api/svglineelement/y1/index.md @@ -0,0 +1,51 @@ +--- +title: "SVGLineElement: y1 property" +short-title: y1 +slug: Web/API/SVGLineElement/y1 +page-type: web-api-instance-property +browser-compat: api.SVGLineElement.y1 +--- + +{{APIRef("SVG")}} + +The **`y1`** read-only property of the {{domxref("SVGLineElement")}} interface describes the start of the SVG line along the y-axis as an {{domxref("SVGAnimatedLength")}}. It reflects the {{SVGElement("line")}} element's {{SVGAttr("y1")}} geometric attribute. + +The attribute value is a [``](/en-US/docs/Web/SVG/Content_type#length), [``](/en-US/docs/Web/SVG/Content_type#percentage), or [``](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is that start position as a length along the y-axis in user coordinate system units. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +Given the following SVG: + +```html + + + + +``` + +We can access the computed values of the `y1` attributes: + +```js +const lines = document.querySelectorAll("line"); +const y1Pos0 = lines[0].y1; +const y1Pos1 = lines[1].y1; +console.dir(y1Pos0.baseVal.value); // output: 30 (the value of `y1`) +console.dir(y1Pos1.baseVal.value); // output: 10 (5% of 200) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGLineElement.y2")}} +- {{domxref("SVGAnimatedLength.baseVal")}} diff --git a/files/en-us/web/api/svglineelement/y2/index.md b/files/en-us/web/api/svglineelement/y2/index.md new file mode 100644 index 000000000000000..e20cc64e71435a4 --- /dev/null +++ b/files/en-us/web/api/svglineelement/y2/index.md @@ -0,0 +1,51 @@ +--- +title: "SVGLineElement: y2 property" +short-title: y2 +slug: Web/API/SVGLineElement/y2 +page-type: web-api-instance-property +browser-compat: api.SVGLineElement.y2 +--- + +{{APIRef("SVG")}} + +The **`y2`** read-only property of the {{domxref("SVGLineElement")}} interface describes the v-axis coordinate value of the end of a line as an {{domxref("SVGAnimatedLength")}}. It reflects the {{SVGElement("line")}} element's {{SVGAttr("y2")}} geometric attribute. + +The attribute value is a [``](/en-US/docs/Web/SVG/Content_type#length), [``](/en-US/docs/Web/SVG/Content_type#percentage), or [``](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is that end position along the y-axis in user coordinate system units. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +Given the following SVG: + +```html + + + + +``` + +We can access the computed values of the `y2` attributes: + +```js +const lines = document.querySelectorAll("line"); +const y2Pos0 = lines[0].y2; +const y2Pos1 = lines[1].y2; +console.dir(y2Pos0.baseVal.value); // output: 50 (the value of `y2`) +console.dir(y2Pos1.baseVal.value); // output: 120 (60% of 200) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGLineElement.x2")}} +- {{domxref("SVGAnimatedLength.baseVal")}} diff --git a/files/en-us/web/api/svgnumberlist/appenditem/index.md b/files/en-us/web/api/svgnumberlist/appenditem/index.md new file mode 100644 index 000000000000000..590a0df17c1b43e --- /dev/null +++ b/files/en-us/web/api/svgnumberlist/appenditem/index.md @@ -0,0 +1,48 @@ +--- +title: "SVGNumberList: appendItem() method" +short-title: appendItem() +slug: Web/API/SVGNumberList/appendItem +page-type: web-api-instance-method +browser-compat: api.SVGNumberList.appendItem +--- + +{{APIRef("SVG")}} + +The `appendItem()` method of the {{domxref("SVGNumberList")}} interface inserts a new item at the end of the list. + +The inserted item is the item itself and not a copy. + +- If `newItem` is already in a list, it is removed from its previous list before it is inserted into this list. + +## Syntax + +```js-nolint +SVGNumberList.appendItem(newItem) +``` + +### Parameters + +- `newItem` + - : An {{domxref("SVGNumber")}} item that is appended to the list. + +### Return value + +An {{domxref("SVGNumber")}} object; the appended item from the list. + +### Exceptions + +- `NoModificationAllowedError` {{domxref("DOMException")}} + - : Thrown if {{domxref("SVGNumberList")}} corresponds to a read-only attribute or when the object itself is read-only. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGNumber")}} +- {{domxref("SVGNumberList.numberOfItems")}} diff --git a/files/en-us/web/api/svgnumberlist/clear/index.md b/files/en-us/web/api/svgnumberlist/clear/index.md new file mode 100644 index 000000000000000..9e59e20076333ac --- /dev/null +++ b/files/en-us/web/api/svgnumberlist/clear/index.md @@ -0,0 +1,42 @@ +--- +title: "SVGNumberList: clear() method" +short-title: clear() +slug: Web/API/SVGNumberList/clear +page-type: web-api-instance-method +browser-compat: api.SVGNumberList.clear +--- + +{{APIRef("SVG")}} + +The `clear()` method of the {{domxref("SVGNumberList")}} interface clears all existing current items from the list, with the result being an empty list. + +## Syntax + +```js-nolint +SVGNumberList.clear() +``` + +### Parameters + +None. + +### Return value + +None ({{jsxref('undefined')}}). + +### Exceptions + +- `NoModificationAllowedError` {{domxref("DOMException")}} + - : Thrown if {{domxref("SVGNumberList")}} corresponds to a read-only attribute or when the object itself is read-only. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGNumber")}} diff --git a/files/en-us/web/api/svgnumberlist/getitem/index.md b/files/en-us/web/api/svgnumberlist/getitem/index.md new file mode 100644 index 000000000000000..f04cc9a1846b579 --- /dev/null +++ b/files/en-us/web/api/svgnumberlist/getitem/index.md @@ -0,0 +1,47 @@ +--- +title: "SVGNumberList: getItem() method" +short-title: getItem() +slug: Web/API/SVGNumberList/getItem +page-type: web-api-instance-method +browser-compat: api.SVGNumberList.getItem +--- + +{{APIRef("SVG")}} + +The `getItem()` method of the {{domxref("SVGNumberList")}} interface returns the specified item from the list. + +The returned item is the item itself and not a copy. Any changes made to the item are immediately reflected in the list. + +The first item is indexed at `0`. + +## Syntax + +```js-nolint +SVGNumberList.getItem(index) +``` + +### Parameters + +- `index` + - : An integer; the index of the specified item as an unsigned long. + +### Return value + +An {{domxref("SVGNumber")}} object; the specified item from the list. + +### Exceptions + +- `NoModificationAllowedError` {{domxref("DOMException")}} + - : Thrown if {{domxref("SVGNumberList")}} corresponds to a read-only attribute or when the object itself is read-only. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGNumber")}} diff --git a/files/en-us/web/api/svgnumberlist/index.md b/files/en-us/web/api/svgnumberlist/index.md index e03cf7ee80b1859..bbae7dd99189ade 100644 --- a/files/en-us/web/api/svgnumberlist/index.md +++ b/files/en-us/web/api/svgnumberlist/index.md @@ -92,10 +92,10 @@ An `SVGNumberList` is indexable and can be accessed like an array. ## Instance properties -| Name | Type | Description | -| ------------------------------------ | ------------- | -------------------------------- | -| `numberOfItems` | unsigned long | The number of items in the list. | -| `length` {{ non-standard_inline() }} | unsigned long | The number of items in the list. | +| Name | Type | Description | +| ----------------------------------------------------------- | ------------- | -------------------------------- | +| {{domxref("SVGNumberList.numberOfItems", "numberOfItems")}} | unsigned long | The number of items in the list. | +| {{domxref("SVGNumberList.length", "length")}} | unsigned long | The number of items in the list. | ## Instance methods @@ -110,7 +110,7 @@ An `SVGNumberList` is indexable and can be accessed like an array.
-
clear() + {{domxref("SVGNumberList.clear", "clear")}}() 		void @@ -132,7 +132,7 @@ An `SVGNumberList` is indexable and can be accessed like an array.
initialize(in {{ domxref("SVGNumber") }} + >{{domxref("SVGNumberList.initialize", "initialize")}}(in {{ domxref("SVGNumber") }} newItem)
- getItem(in unsigned long index) + {{domxref("SVGNumberList.getItem", "getItem")}}(in unsigned long index) {{ domxref("SVGNumber") }} @@ -184,7 +184,7 @@ An `SVGNumberList` is indexable and can be accessed like an array.
insertItemBefore(in + >{{domxref("SVGNumberList.insertItemBefore", "insertItemBefore")}}(in {{ domxref("SVGNumber") }} newItem, in unsigned long index) @@ -222,7 +222,7 @@ An `SVGNumberList` is indexable and can be accessed like an array.
replaceItem(in {{ domxref("SVGNumber") }} + >{{domxref("SVGNumberList.replaceItem", "replaceItem")}}(in {{ domxref("SVGNumber") }} newItem, in unsigned long index)
removeItem(in unsigned long index){{domxref("SVGNumberList.removeItem", "removeItem")}}(in unsigned long index) {{ domxref("SVGNumber") }}
appendItem(in {{ domxref("SVGNumber") }} + >{{domxref("SVGNumberList.appendItem", "appendItem")}}(in {{ domxref("SVGNumber") }} newItem)
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nameheight
Value + + <length> | <percentage> + +
Initial0
Applies to + {{ SVGElement("mask") }}, + {{ SVGElement("svg") }}, + {{ SVGElement("rect") }}, + {{ SVGElement("image") }}, + {{ SVGElement("foreignObject") }} +
Inheritedno
Percentages + refer to the size of the SVG viewport +
Mediavisual
Computed valueabsolute length or percentage
Animatableyes
+ +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{DOMXref("DOMRect.height")}} +- {{domxref("SVGRect.width")}} diff --git a/files/en-us/web/api/svgrect/index.md b/files/en-us/web/api/svgrect/index.md index 7cc775d14be3468..bcb5049c6651fda 100644 --- a/files/en-us/web/api/svgrect/index.md +++ b/files/en-us/web/api/svgrect/index.md @@ -7,9 +7,9 @@ browser-compat: api.SVGRect {{APIRef("SVG")}} -The **`SVGRect`** represents a rectangle. Rectangles consist of an `x` and `y` coordinate pair identifying a minimum `x` value, a minimum `y` value, and a `width` and `height`, which are constrained to be non-negative. +The **`SVGRect`**, an alias for {{DOMXref("DOMRect")}}, represents a rectangle. Rectangles consist of an `x` and `y` coordinate pair identifying a minimum `x` value, a minimum `y` value, and a `width` and `height`, which are constrained to be non-negative. -An **`SVGRect`** object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown. +An `SVGRect` object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown. ## Instance properties @@ -33,3 +33,9 @@ None. ## Browser compatibility {{Compat}} + +## See also + +- {{DOMXref("DOMRect")}} +- {{DOMXref("DOMPoint")}} alias {{DOMXref("SVGPoint")}} +- {{DOMXref("DOMMatrix")}} alias {{DOMXref("SVGMatrix")}} diff --git a/files/en-us/web/api/svgrect/width/index.md b/files/en-us/web/api/svgrect/width/index.md new file mode 100644 index 000000000000000..273dc53f8e395b1 --- /dev/null +++ b/files/en-us/web/api/svgrect/width/index.md @@ -0,0 +1,86 @@ +--- +title: "SVGRect: width property" +short-title: width +slug: Web/API/SVGRect/width +page-type: web-api-instance-property +browser-compat: api.SVGRect.width +--- + +{{APIRef("SVG")}} + +The **`width`** property of the {{domxref("SVGRect")}} interface is an alias for the {{DOMXref("DOMRect.width")}} property. It describes the horizontal size of the element. It reflects the SVG element's {{SVGattr("width")}} attribute and the CSS {{cssxref("width")}} property. + +The width is a length; it is the distance from the left of element to the right of the element in the the user coordinate system. Its syntax is the same as that for [``](/en-US/docs/Web/SVG/Content_type#length). + +## Usage context + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Namewidth
Value + + <length> | <percentage> + +
Initial0
Applies to + {{ SVGElement("mask") }}, + {{ SVGElement("svg") }}, + {{ SVGElement("rect") }}, + {{ SVGElement("image") }}, + {{ SVGElement("foreignObject") }} +
Inheritedno
Percentages + refer to the size of the SVG viewport +
Mediavisual
Computed valueabsolute length or percentage
Animatableyes
+ +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{DOMXref("DOMRect.width")}} +- {{domxref("SVGRect.height")}} diff --git a/files/en-us/web/api/svgrect/y/index.md b/files/en-us/web/api/svgrect/y/index.md new file mode 100644 index 000000000000000..332cb757e5a89d9 --- /dev/null +++ b/files/en-us/web/api/svgrect/y/index.md @@ -0,0 +1,86 @@ +--- +title: "SVGRect: y property" +short-title: "y" +slug: Web/API/SVGRect/y +page-type: web-api-instance-property +browser-compat: api.SVGRect.y +--- + +{{APIRef("SVG")}} + +The **`y`** property of the {{domxref("SVGRect")}} interface is an alias for the {{DOMXref("DOMRect.y")}} property. It describes the vertical coordinate of the position of the element. It reflects the SVG element's {{SVGattr("y")}} attribute and the CSS {{cssxref("y")}} property. + +A `` is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the relevant axis (the y-axis for Y coordinates, the x-axis for X coordinates). Its syntax is the same as that for [``](/en-US/docs/Web/SVG/Content_type#length). + +## Usage context + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Namey
Value + + <length> | <percentage> + +
Initial0
Applies to + {{ SVGElement("mask") }}, + {{ SVGElement("svg") }}, + {{ SVGElement("rect") }}, + {{ SVGElement("image") }}, + {{ SVGElement("foreignObject") }} +
Inheritedno
Percentages + refer to the size of the SVG viewport +
Mediavisual
Computed valueabsolute length or percentage
Animatableyes
+ +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{DOMXref("DOMRect.y")}} +- {{domxref("SVGRect.x")}} diff --git a/files/en-us/web/api/svgrectelement/height/index.md b/files/en-us/web/api/svgrectelement/height/index.md new file mode 100644 index 000000000000000..232742d56ae3137 --- /dev/null +++ b/files/en-us/web/api/svgrectelement/height/index.md @@ -0,0 +1,38 @@ +--- +title: "SVGRectElement: height property" +short-title: height +slug: Web/API/SVGRectElement/height +page-type: web-api-instance-property +browser-compat: api.SVGRectElement.height +--- + +{{APIRef("SVG")}} + +The **`height`** read-only property of the {{domxref("SVGRectElement")}} interface describes the vertical size of an SVG rectangle as a {{domxref("SVGAnimatedLength")}}. The length is in user coordinate system units along the y-axis. Its syntax is the same as that for [``](/en-US/docs/Web/SVG/Content_type#length). + +It reflects the {{SVGElement("rect")}} element's {{SVGAttr("height")}} presentational attribute. The CSS {{cssxref("height")}} property takes precedence over the SVG `height` presentational attribute, so the value may not reflect the elements actual size. The default value is `0`. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const rectangle = document.querySelector("rect"); +const rectHeight = rectangle.height; +console.log(rectHeight.baseVal.value); // the `height` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{DOMXref("DOMRect.height")}} +- {{domxref("SVGRectElement.width")}} diff --git a/files/en-us/web/api/svgrectelement/rx/index.md b/files/en-us/web/api/svgrectelement/rx/index.md new file mode 100644 index 000000000000000..49bc9b3497717dc --- /dev/null +++ b/files/en-us/web/api/svgrectelement/rx/index.md @@ -0,0 +1,50 @@ +--- +title: "SVGRectElement: rx property" +short-title: rx +slug: Web/API/SVGRectElement/rx +page-type: web-api-instance-property +browser-compat: api.SVGRectElement.rx +--- + +{{APIRef("SVG")}} + +The **`rx`** read-only property of the {{domxref("SVGRectElement")}} interface describes the horizontal curve of the corners of an SVG rectangle as a {{domxref("SVGAnimatedLength")}}. The length is in user coordinate system units along the x-axis. Its syntax is the same as that for [``](/en-US/docs/Web/SVG/Content_type#length). + +It reflects the {{SVGElement("rect")}} element's {{SVGAttr("rx")}} presentational attribute. The CSS {{cssxref("rx")}} property takes precedence over the SVG `rx` presentational attribute, so the value may not reflect the actual size of the rounded corners. The default value is `0`, which draws a rectangle with square corners. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +Given the following SVG: + +```html + + + + +``` + +We can access the computed values of the `rx` attributes: + +```js +const rectangles = document.querySelectorAll("rect"); +const rxSize0 = rectangle[0].rx; +const rxSize1 = rectangle[1].rx; +console.log(rxSize0.baseVal.value); // output: 15 (the value of `rx`) +console.log(rxSize1.baseVal.value); // output: 45 (15% of 300) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGRectElement.ry")}} diff --git a/files/en-us/web/api/svgrectelement/ry/index.md b/files/en-us/web/api/svgrectelement/ry/index.md new file mode 100644 index 000000000000000..f39b4a6c3070d23 --- /dev/null +++ b/files/en-us/web/api/svgrectelement/ry/index.md @@ -0,0 +1,50 @@ +--- +title: "SVGRectElement: ry property" +short-title: ry +slug: Web/API/SVGRectElement/ry +page-type: web-api-instance-property +browser-compat: api.SVGRectElement.ry +--- + +{{APIRef("SVG")}} + +The **`ry`** read-only property of the {{domxref("SVGRectElement")}} interface describes the vertical curve of the corners of an SVG rectangle as a {{domxref("SVGAnimatedLength")}}. The length is in user coordinate system units along the y-axis. Its syntax is the same as that for [``](/en-US/docs/Web/SVG/Content_type#length). + +It reflects the {{SVGElement("rect")}} element's {{SVGAttr("ry")}} presentational attribute. The CSS {{cssxref("ry")}} property takes precedence over the SVG `ry` presentational attribute, so the value may not reflect the actual size of the rounded corners. The default value is `0`, which draws a rectangle with square corners. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +Given the following SVG: + +```html + + + + +``` + +We can access the computed values of the `ry` attributes: + +```js +const rectangles = document.querySelectorAll("rect"); +const rySize0 = rectangle[0].ry; +const rySize1 = rectangle[1].ry; +console.log(rySize0.baseVal.value); // output: 15 (the value of `ry`) +console.log(rySize1.baseVal.value); // output: 30 (15% of 200) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGRectElement.rx")}} diff --git a/files/en-us/web/api/svgrectelement/width/index.md b/files/en-us/web/api/svgrectelement/width/index.md new file mode 100644 index 000000000000000..2d37e76a07c9308 --- /dev/null +++ b/files/en-us/web/api/svgrectelement/width/index.md @@ -0,0 +1,38 @@ +--- +title: "SVGRectElement: width property" +short-title: width +slug: Web/API/SVGRectElement/width +page-type: web-api-instance-property +browser-compat: api.SVGRectElement.width +--- + +{{APIRef("SVG")}} + +The **`width`** read-only property of the {{domxref("SVGRectElement")}} interface describes the horizontal size of an SVG rectangle as a {{domxref("SVGAnimatedLength")}}. The length is in user coordinate system units along the x-axis. Its syntax is the same as that for [``](/en-US/docs/Web/SVG/Content_type#length). + +It reflects the {{SVGElement("rect")}} element's {{SVGAttr("width")}} presentational attribute. The CSS {{cssxref("width")}} property takes precedence over the SVG `width` presentational attribute, so the value may not reflect the elements actual size. The default value is `0`. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const rectangle = document.querySelector("rect"); +const rectWidth = rectangle.width; +console.log(rectWidth.baseVal.value); // the `width` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{DOMXref("DOMRect.width")}} +- {{domxref("SVGRectElement.height")}} diff --git a/files/en-us/web/api/svgrectelement/x/index.md b/files/en-us/web/api/svgrectelement/x/index.md new file mode 100644 index 000000000000000..31a563ec42b5e41 --- /dev/null +++ b/files/en-us/web/api/svgrectelement/x/index.md @@ -0,0 +1,38 @@ +--- +title: "SVGRectElement: x property" +short-title: x +slug: Web/API/SVGRectElement/x +page-type: web-api-instance-property +browser-compat: api.SVGRectElement.x +--- + +{{APIRef("SVG")}} + +The **`x`** read-only property of the {{domxref("SVGRectElement")}} interface describes the horizontal coordinate of the position of an SVG rectangle as a {{domxref("SVGAnimatedLength")}}. The `` is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the x-axis. Its syntax is the same as that for [``](/en-US/docs/Web/SVG/Content_type#length). + +It reflects the {{SVGElement("rect")}} element's {{SVGAttr("x")}} geometric attribute value. The CSS {{cssxref("x")}} property takes precedence over the SVG `x` geometric attribute, so the value may not reflect the element's appearance. The default value is `0`. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const rectangle = document.querySelector("rect"); +const leftPosition = rectangle.x; +console.log(leftPosition.baseVal.value); // the `x` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{DOMXref("DOMRect.x")}} +- {{domxref("SVGRectElement.y")}} diff --git a/files/en-us/web/api/svgrectelement/y/index.md b/files/en-us/web/api/svgrectelement/y/index.md new file mode 100644 index 000000000000000..95089c363769bc0 --- /dev/null +++ b/files/en-us/web/api/svgrectelement/y/index.md @@ -0,0 +1,38 @@ +--- +title: "SVGRectElement: y property" +short-title: "y" +slug: Web/API/SVGRectElement/y +page-type: web-api-instance-property +browser-compat: api.SVGRectElement.y +--- + +{{APIRef("SVG")}} + +The **`y`** read-only property of the {{domxref("SVGRectElement")}} interface describes the vertical coordinate of the position of an SVG rectangle as a {{domxref("SVGAnimatedLength")}}. The `` is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the y-axis. Its syntax is the same as that for [``](/en-US/docs/Web/SVG/Content_type#length). + +It reflects the {{SVGElement("rect")}} element's {{SVGAttr("y")}} geometric attribute value. The CSS {{cssxref("y")}} property takes precedence over the SVG `y` attribute, so the value may not reflect the element's appearance. The default value is `0`. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const rectangle = document.querySelector("rect"); +const topPosition = rectangle.y; +console.log(topPosition.baseVal.value); // the `y` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{DOMXref("DOMRect.y")}} +- {{domxref("SVGRectElement.x")}} diff --git a/files/en-us/web/api/svgstopelement/offset/index.md b/files/en-us/web/api/svgstopelement/offset/index.md new file mode 100644 index 000000000000000..3d1b5fbd5defa2c --- /dev/null +++ b/files/en-us/web/api/svgstopelement/offset/index.md @@ -0,0 +1,46 @@ +--- +title: "SVGStopElement: offset property" +short-title: offset +slug: Web/API/SVGStopElement/offset +page-type: web-api-instance-property +browser-compat: api.SVGStopElement.offset +--- + +{{APIRef("SVG")}} + +The **`offset`** read-only property of the {{domxref("SVGStopElement")}} interface reflects the {{SVGAttr("offset")}} attribute of the given {{SVGElement("stop")}} element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Examples + +### Accessing the `offset` property + +```html + + + + + + + + + +``` + +```js +const stopElement = document.querySelector("stop"); + +// Access the offset property +console.log(stopElement.offset.baseVal); // Output: 0 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgsymbolelement/index.md b/files/en-us/web/api/svgsymbolelement/index.md index 5226650ec579275..b03648d706b088f 100644 --- a/files/en-us/web/api/svgsymbolelement/index.md +++ b/files/en-us/web/api/svgsymbolelement/index.md @@ -13,7 +13,12 @@ The **`SVGSymbolElement`** interface corresponds to the {{SVGElement("symbol")}} ## Instance properties -_This interface doesn't implement any specific properties, but inherits properties from its parent interface, {{domxref("SVGGraphicsElement")}}._ +_This interface also inherits properties from its parent interface, {{domxref("SVGGraphicsElement")}}._ + +- {{domxref("SVGSymbolElement.viewBox")}} {{ReadOnlyInline}} + - : An {{domxref("SVGAnimatedRect")}} corresponding to the {{SVGAttr("viewBox")}} attribute of the given {{SVGElement("symbol")}} element. +- {{domxref("SVGSymbolElement.preserveAspectRatio")}} {{ReadOnlyInline}} + - : An {{domxref("SVGAnimatedPreserveAspectRatio")}} corresponding to the {{SVGAttr("preserveAspectRatio")}} attribute of the given {{SVGElement("symbol")}} element. ## Instance methods diff --git a/files/en-us/web/api/svgsymbolelement/preserveaspectratio/index.md b/files/en-us/web/api/svgsymbolelement/preserveaspectratio/index.md new file mode 100644 index 000000000000000..30a296117c846fa --- /dev/null +++ b/files/en-us/web/api/svgsymbolelement/preserveaspectratio/index.md @@ -0,0 +1,57 @@ +--- +title: "SVGSymbolElement: preserveAspectRatio property" +short-title: preserveAspectRatio +slug: Web/API/SVGSymbolElement/preserveAspectRatio +page-type: web-api-instance-property +browser-compat: api.SVGSymbolElement.preserveAspectRatio +--- + +{{APIRef("SVG")}} + +The **`preserveAspectRatio`** read-only property of the {{domxref("SVGSymbolElement")}} interface reflects the {{SVGAttr("preserveAspectRatio")}} attribute of the given {{SVGElement("symbol")}} element. It defines how the `symbol`'s content should be scaled to fit the given space, preserving its aspect ratio. + +## Value + +An {{domxref("SVGAnimatedPreserveAspectRatio")}} object. + +## Examples + +Given the following SVG, we can use the `preserveAspectRatio` property to retrieve the scaling behavior for the `symbol` element: + +```html + + + + + + + + +``` + +We can access the `preserveAspectRatio` attribute: + +```js +const symbolElement = document.getElementById("exampleSymbol"); + +// Access the preserveAspectRatio property +const aspectRatio = symbolElement.preserveAspectRatio.baseVal; + +console.log(aspectRatio.align); // Output: 2 (xMinYMin) +console.log(aspectRatio.meetOrSlice); // Output: 1 (meet) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{SVGAttr("preserveAspectRatio")}} diff --git a/files/en-us/web/api/svgsymbolelement/viewbox/index.md b/files/en-us/web/api/svgsymbolelement/viewbox/index.md new file mode 100644 index 000000000000000..84df3a69be5b9fc --- /dev/null +++ b/files/en-us/web/api/svgsymbolelement/viewbox/index.md @@ -0,0 +1,54 @@ +--- +title: "SVGSymbolElement: viewBox property" +short-title: viewBox +slug: Web/API/SVGSymbolElement/viewBox +page-type: web-api-instance-property +browser-compat: api.SVGSymbolElement.viewBox +--- + +{{APIRef("SVG")}} + +The **`viewBox`** read-only property of the {{domxref("SVGSymbolElement")}} interface reflects the {{SVGAttr("viewBox")}} attribute of the given {{SVGElement("symbol")}} element. + +## Value + +An {{domxref("SVGAnimatedRect")}} object. + +## Examples + +### Accessing the `viewBox` Property + +```html + + + + + + + + +``` + +```js +const symbolElement = document.getElementById("exampleSymbol"); + +// Access the viewBox property +const viewBox = symbolElement.viewBox.baseVal; + +console.log(viewBox.x); // Output: 0 +console.log(viewBox.y); // Output: 0 +console.log(viewBox.width); // Output: 100 +console.log(viewBox.height); // Output: 100 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{SVGAttr("viewBox")}} diff --git a/files/en-us/web/api/svgtextcontentelement/getcharnumatposition/index.md b/files/en-us/web/api/svgtextcontentelement/getcharnumatposition/index.md new file mode 100644 index 000000000000000..ca285086cfbd524 --- /dev/null +++ b/files/en-us/web/api/svgtextcontentelement/getcharnumatposition/index.md @@ -0,0 +1,64 @@ +--- +title: "SVGTextContentElement: getCharNumAtPosition() method" +short-title: getCharNumAtPosition() +slug: Web/API/SVGTextContentElement/getCharNumAtPosition +page-type: web-api-instance-method +browser-compat: api.SVGTextContentElement.getCharNumAtPosition +--- + +{{APIRef("SVG")}} + +The `getCharNumAtPosition()` method of the {{domxref("SVGTextContentElement")}} interface represents the character which caused a text glyph to be rendered at a given position in the coordinate system. Because the relationship between characters and glyphs is not one-to-one, only the first character of the relevant typographic character is returned. + +If no character is found at the specified position, `-1` is returned. + +## Syntax + +```js-nolint +SVGTextContentElement.getCharNumAtPosition(point) +``` + +### Parameters + +- `point` + - : An {{domxref("DOMPoint")}} object; the coordinates (x, y) where the position of the character is to be checked in the user coordinate space. + +### Return value + +A long; the index of the character that corresponds to the position. + +## Examples + +### Finding the Character at a Specific Position + +```html + + Hello, SVG World! + +``` + +```js +const textElement = document.getElementById("exampleText"); + +// Create a DOMPoint for the position (30, 40) +const point = new DOMPoint(30, 40); + +// Get the character at the specified position +const charIndex = textElement.getCharNumAtPosition(point); + +console.log(charIndex); // Output: 2 (for character "l") + +// Check with a point where no character is present +const offPoint = new DOMPoint(300, 40); +const offCharIndex = textElement.getCharNumAtPosition(offPoint); + +console.log(offCharIndex); // Output: -1 (no character found) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgtextcontentelement/getcomputedtextlength/index.md b/files/en-us/web/api/svgtextcontentelement/getcomputedtextlength/index.md new file mode 100644 index 000000000000000..59b10b4d593e60e --- /dev/null +++ b/files/en-us/web/api/svgtextcontentelement/getcomputedtextlength/index.md @@ -0,0 +1,52 @@ +--- +title: "SVGTextContentElement: getComputedTextLength() method" +short-title: getComputedTextLength() +slug: Web/API/SVGTextContentElement/getComputedTextLength +page-type: web-api-instance-method +browser-compat: api.SVGTextContentElement.getComputedTextLength +--- + +{{APIRef("SVG")}} + +The `getComputedTextLength()` method of the {{domxref("SVGTextContentElement")}} interface represents the computed length for the text within the element. + +## Syntax + +```js-nolint +SVGTextContentElement.getComputedTextLength() +``` + +### Parameters + +None. + +### Return value + +A float. + +## Examples + +### Computing the text length + +```html + + Hello, SVG World! + +``` + +```js +const textElement = document.getElementById("exampleText"); + +// Get the computed text length +const textLength = textElement.getComputedTextLength(); + +console.log(textLength); // Output: 124.5 (e.g. depends on font size and text content) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgtextcontentelement/getendpositionofchar/index.md b/files/en-us/web/api/svgtextcontentelement/getendpositionofchar/index.md new file mode 100644 index 000000000000000..b4d01c172f868ad --- /dev/null +++ b/files/en-us/web/api/svgtextcontentelement/getendpositionofchar/index.md @@ -0,0 +1,59 @@ +--- +title: "SVGTextContentElement: getEndPositionOfChar() method" +short-title: getEndPositionOfChar() +slug: Web/API/SVGTextContentElement/getEndPositionOfChar +page-type: web-api-instance-method +browser-compat: api.SVGTextContentElement.getEndPositionOfChar +--- + +{{APIRef("SVG")}} + +The `getEndPositionOfChar()` method of the {{domxref("SVGTextContentElement")}} interface returns the trailing position of a typographic character after text layout has been performed. + +## Syntax + +```js-nolint +SVGTextContentElement.getEndPositionOfChar(index) +``` + +### Parameters + +- `index` + - : An `integer`; the index of the character. + +### Return value + +A {{domxref("DOMPoint")}} object; the position of the character in user coordinates. + +### Exceptions + +- `IndexSizeError` {{domxref("DOMException")}} + - : Thrown if no character is found at `index`. + +## Examples + +### Getting the End Position of a Character + +```html + + Hello, SVG World! + +``` + +```js +const textElement = document.getElementById("exampleText"); + +// Get the end position of the character at index 0 (the first character) +const position = textElement.getEndPositionOfChar(0); + +// Get the x and y coordinates of the first character +console.log(position.x, position.y); // Output: 21.5 50 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgtextcontentelement/getextentofchar/index.md b/files/en-us/web/api/svgtextcontentelement/getextentofchar/index.md new file mode 100644 index 000000000000000..28973530ece7aeb --- /dev/null +++ b/files/en-us/web/api/svgtextcontentelement/getextentofchar/index.md @@ -0,0 +1,63 @@ +--- +title: "SVGTextContentElement: getExtentOfChar() method" +short-title: getExtentOfChar() +slug: Web/API/SVGTextContentElement/getExtentOfChar +page-type: web-api-instance-method +browser-compat: api.SVGTextContentElement.getExtentOfChar +--- + +{{APIRef("SVG")}} + +The `getExtentOfChar()` method of the {{domxref("SVGTextContentElement")}} interface the represents computed tight bounding box of the glyph cell that corresponds to a given typographic character. + +## Syntax + +```js-nolint +SVGTextContentElement.getExtentOfChar(index) +``` + +### Parameters + +- `index` + - : An `integer`; the index of the character. + +### Return value + +A {{domxref("DOMRect")}} object; the tight bounding box of the specified character. + +### Exceptions + +- `IndexSizeError` {{domxref("DOMException")}} + - : Thrown if no character is found at `index`. + +## Examples + +### Getting the Extent of a Character + +```html + + Hello, SVG World! + +``` + +```js +const textElement = document.getElementById("exampleText"); + +// Get the extent (bounding box) of the character at index 0 (the first character) +const extent = textElement.getExtentOfChar(0); + +// The bounding box of the first character +console.dir(extent); // Output: DOMRect { x: 10, y: 38, width: 11.55, height: 16 } +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("DOMRect")}} diff --git a/files/en-us/web/api/svgtextcontentelement/getnumberofchars/index.md b/files/en-us/web/api/svgtextcontentelement/getnumberofchars/index.md new file mode 100644 index 000000000000000..f848287a3610246 --- /dev/null +++ b/files/en-us/web/api/svgtextcontentelement/getnumberofchars/index.md @@ -0,0 +1,52 @@ +--- +title: "SVGTextContentElement: getNumberOfChars() method" +short-title: getNumberOfChars() +slug: Web/API/SVGTextContentElement/getNumberOfChars +page-type: web-api-instance-method +browser-compat: api.SVGTextContentElement.getNumberOfChars +--- + +{{APIRef("SVG")}} + +The `getNumberOfChars()` method of the {{domxref("SVGTextContentElement")}} interface represents the total number of addressable characters available for rendering within the current element, regardless of whether they will be rendered. + +## Syntax + +```js-nolint +SVGTextContentElement.getNumberOfChars() +``` + +### Parameters + +None. + +### Return value + +A long. + +## Examples + +### Counting Characters in a Text Element + +```html + + Hello, SVG World! + +``` + +```js +const textElement = document.getElementById("exampleText"); + +// Get the number of characters in the text element +const charCount = textElement.getNumberOfChars(); + +console.log(charCount); // Output: 17 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgtextcontentelement/getrotationofchar/index.md b/files/en-us/web/api/svgtextcontentelement/getrotationofchar/index.md new file mode 100644 index 000000000000000..04dc7ba8d694ac4 --- /dev/null +++ b/files/en-us/web/api/svgtextcontentelement/getrotationofchar/index.md @@ -0,0 +1,64 @@ +--- +title: "SVGTextContentElement: getRotationOfChar() method" +short-title: getRotationOfChar() +slug: Web/API/SVGTextContentElement/getRotationOfChar +page-type: web-api-instance-method +browser-compat: api.SVGTextContentElement.getRotationOfChar +--- + +{{APIRef("SVG")}} + +The `getRotationOfChar()` method of the {{domxref("SVGTextContentElement")}} interface the represents the rotation of a typographic character. + +## Syntax + +```js-nolint +SVGTextContentElement.getRotationOfChar(index) +``` + +### Parameters + +- `index` + - : An `integer`; the index of the character. + +### Return value + +A float; the rotation angle of the character in degrees. + +### Exceptions + +- `IndexSizeError` {{domxref("DOMException")}} + - : Thrown if no character is found at `index`. + +## Examples + +### Getting the Rotation of a Character + +```html + + + Hello, SVG + + +``` + +```js +const textElement = document.getElementById("exampleText"); + +// Get the rotation of the first character "H" +const rotation = textElement.getRotationOfChar(0); + +console.log(extent); // Output: 90 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [`writing-mode`](/en-US/docs/Web/CSS/writing-mode) diff --git a/files/en-us/web/api/svgtextcontentelement/getstartpositionofchar/index.md b/files/en-us/web/api/svgtextcontentelement/getstartpositionofchar/index.md new file mode 100644 index 000000000000000..00c6a23d6998cf3 --- /dev/null +++ b/files/en-us/web/api/svgtextcontentelement/getstartpositionofchar/index.md @@ -0,0 +1,59 @@ +--- +title: "SVGTextContentElement: getStartPositionOfChar() method" +short-title: getStartPositionOfChar() +slug: Web/API/SVGTextContentElement/getStartPositionOfChar +page-type: web-api-instance-method +browser-compat: api.SVGTextContentElement.getStartPositionOfChar +--- + +{{APIRef("SVG")}} + +The `getStartPositionOfChar()` method of the {{domxref("SVGTextContentElement")}} interface returns the position of a typographic character after text layout has been performed. + +## Syntax + +```js-nolint +SVGTextContentElement.getStartPositionOfChar(index) +``` + +### Parameters + +- `index` + - : An `integer`; the index of the character. + +### Return value + +A {{domxref("DOMPoint")}} object; the position of the character in user coordinates. + +### Exceptions + +- `IndexSizeError` {{domxref("DOMException")}} + - : Thrown if no character is found at `index`. + +## Examples + +### Getting the Position of a Character + +```html + + Hello, SVG World! + +``` + +```js +const textElement = document.getElementById("exampleText"); + +// Get the position of the character at index 0 (the first character) +const position = textElement.getStartPositionOfChar(0); + +// Get the x and y coordinates of the first character +console.log(position.x, position.y); // Output: 10 50 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgtextcontentelement/getsubstringlength/index.md b/files/en-us/web/api/svgtextcontentelement/getsubstringlength/index.md new file mode 100644 index 000000000000000..0a46e5ac9a3007e --- /dev/null +++ b/files/en-us/web/api/svgtextcontentelement/getsubstringlength/index.md @@ -0,0 +1,62 @@ +--- +title: "SVGTextContentElement: getSubStringLength() method" +short-title: getSubStringLength() +slug: Web/API/SVGTextContentElement/getSubStringLength +page-type: web-api-instance-method +browser-compat: api.SVGTextContentElement.getSubStringLength +--- + +{{APIRef("SVG")}} + +The `getSubStringLength()` method of the {{domxref("SVGTextContentElement")}} interface represents the computed length of the formatted text advance distance for a substring of text within the element. + +Note that this method only accounts for the widths of the glyphs in the substring and any extra spacing inserted by the CSS [`letter-spacing`](/en-US/docs/Web/CSS/letter-spacing) and [`word-spacing`](/en-US/docs/Web/CSS/word-spacing) properties. Visual spacing adjustments made by the [`x`](/en-US/docs/Web/CSS/x) attribute are ignored. + +## Syntax + +```js-nolint +SVGTextContentElement.getSubStringLength(index, length) +``` + +### Parameters + +- `index` + - : An `integer`; the start index of the substring. +- `length` + - : An `integer`; the number of characters to include in the substring. + +### Return value + +A float. + +### Exceptions + +- `IndexSizeError` {{domxref("DOMException")}} + - : Thrown if the `index` is greater than the highest index or `length` is negative. + +## Examples + +### Getting the Length of a Substring + +```html + + Hello, SVG World! + +``` + +```js +const textElement = document.getElementById("exampleText"); + +// Get the length of a substring starting at character 0 with 5 characters +const substringLength = textElement.getSubStringLength(0, 5); + +console.log(substringLength); // Output: 35.55 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgtextcontentelement/index.md b/files/en-us/web/api/svgtextcontentelement/index.md index c341a21aef6315b..68fe1f93690b209 100644 --- a/files/en-us/web/api/svgtextcontentelement/index.md +++ b/files/en-us/web/api/svgtextcontentelement/index.md @@ -76,7 +76,7 @@ _This interface also inherits methods from its parent, {{domxref("SVGGraphicsEle - {{domxref("SVGTextContentElement.getRotationOfChar()")}} - : Returns a float representing the rotation of typographic character. - {{domxref("SVGTextContentElement.getCharNumAtPosition()")}} - - : Returns a long representing the character which caused a text glyph to be rendered at a given position in the coordinate system. Because the relationship between characters and glyphs is not one-to-one, only the first character of the relevant typographic character is returned + - : Returns a long representing the character which caused a text glyph to be rendered at a given position in the coordinate system. Because the relationship between characters and glyphs is not one-to-one, only the first character of the relevant typographic character is returned. - {{domxref("SVGTextContentElement.selectSubString()")}} {{deprecated_inline}} - : Selects text within the element. diff --git a/files/en-us/web/api/svgtextcontentelement/lengthadjust/index.md b/files/en-us/web/api/svgtextcontentelement/lengthadjust/index.md new file mode 100644 index 000000000000000..020b95797347489 --- /dev/null +++ b/files/en-us/web/api/svgtextcontentelement/lengthadjust/index.md @@ -0,0 +1,50 @@ +--- +title: "SVGTextContentElement: lengthAdjust property" +short-title: lengthAdjust +slug: Web/API/SVGTextContentElement/lengthAdjust +page-type: web-api-instance-property +browser-compat: api.SVGTextContentElement.lengthAdjust +--- + +{{APIRef("SVG")}} + +The **`lengthAdjust`** read-only property of the {{domxref("SVGTextContentElement")}} interface reflects the {{SVGAttr("lengthAdjust")}} attribute of the given element. It takes one of the `LENGTHADJUST_*` constants defined on this interface. + +## Value + +An {{domxref("SVGAnimatedEnumeration")}}. + +## Examples + +### Accessing the `lengthAdjust` Property + +```html + + + Hello, SVG! + + +``` + +```js +const textElement = document.getElementById("myText"); + +// Access the `lengthAdjust` property +const lengthAdjust = textElement.lengthAdjust; + +// Log the base value of the `lengthAdjust` attribute +console.log(lengthAdjust.baseVal); // Output: 1 (e.g. LENGTHADJUST_SPACING) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{SVGAttr("lengthAdjust")}} +- {{domxref("SVGAnimatedEnumeration")}} diff --git a/files/en-us/web/api/svgtextcontentelement/textlength/index.md b/files/en-us/web/api/svgtextcontentelement/textlength/index.md new file mode 100644 index 000000000000000..282a3cc64325c4e --- /dev/null +++ b/files/en-us/web/api/svgtextcontentelement/textlength/index.md @@ -0,0 +1,50 @@ +--- +title: "SVGTextContentElement: textLength property" +short-title: textLength +slug: Web/API/SVGTextContentElement/textLength +page-type: web-api-instance-property +browser-compat: api.SVGTextContentElement.textLength +--- + +{{APIRef("SVG")}} + +The **`textLength`** read-only property of the {{domxref("SVGTextContentElement")}} interface reflects the {{SVGAttr("textLength")}} attribute of the given element. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Examples + +### Accessing the `textLength` Property + +```html + + + Hello, SVG! + + +``` + +```js +const textElement = document.getElementById("myText"); + +// Access the textLength property +const animatedLength = textElement.textLength; + +// The base value of the textLength attribute +console.log(animatedLength.baseVal.value); // Output: 100 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{SVGAttr("textLength")}} +- {{domxref("SVGAnimatedLength")}} diff --git a/files/en-us/web/api/svgtextpathelement/href/index.md b/files/en-us/web/api/svgtextpathelement/href/index.md new file mode 100644 index 000000000000000..aefd56a519d61aa --- /dev/null +++ b/files/en-us/web/api/svgtextpathelement/href/index.md @@ -0,0 +1,51 @@ +--- +title: "SVGTextPathElement: href property" +short-title: href +slug: Web/API/SVGTextPathElement/href +page-type: web-api-instance-property +browser-compat: api.SVGTextPathElement.href +--- + +{{APIRef("SVG")}} + +The **`href`** read-only property of the {{domxref("SVGTextPathElement")}} interface reflects the {{SVGAttr("href")}} attribute (or the deprecated {{SVGAttr("xlink:href")}} attribute) of the given {{SVGElement("textPath")}} element. + +## Value + +An {{domxref("SVGAnimatedString")}} object. + +## Examples + +### Accessing the `href` property + +```html + + + + + + + This text follows a path! + + + +``` + +```js +const textPath = document.getElementById("myTextPath"); + +// Access the href property +console.log(textPath.href.baseVal); // Output: "#myPath" +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- SVG {{SVGAttr("href")}} attribute diff --git a/files/en-us/web/api/svgtextpathelement/method/index.md b/files/en-us/web/api/svgtextpathelement/method/index.md new file mode 100644 index 000000000000000..53072a3a2439935 --- /dev/null +++ b/files/en-us/web/api/svgtextpathelement/method/index.md @@ -0,0 +1,52 @@ +--- +title: "SVGTextPathElement: method property" +short-title: method +slug: Web/API/SVGTextPathElement/method +page-type: web-api-instance-property +browser-compat: api.SVGTextPathElement.method +--- + +{{APIRef("SVG")}} + +The **`method`** read-only property of the {{domxref("SVGTextPathElement")}} interface reflects the {{SVGAttr("method")}} attribute of the given {{SVGElement("textPath")}} element. It takes one of the [`TEXTPATH_METHODTYPE_*` constants](/en-US/docs/Web/API/SVGTextPathElement#method_types) defined on this interface. + +## Value + +An {{domxref("SVGAnimatedEnumeration")}} object. + +## Examples + +### Accessing the `method` property + +```html + + + + + + + This text follows a path! + + + +``` + +```js +const textPath = document.getElementById("myTextPath"); + +// Access the method property +console.log(textPath.method.baseVal); // Output: 1 (TEXTPATH_METHODTYPE_ALIGN) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGTextPathElement.spacing")}} +- [`SVGTextPathElement` method types](/en-US/docs/Web/API/SVGTextPathElement#method_types) diff --git a/files/en-us/web/api/svgtextpathelement/spacing/index.md b/files/en-us/web/api/svgtextpathelement/spacing/index.md new file mode 100644 index 000000000000000..bfef01984afceef --- /dev/null +++ b/files/en-us/web/api/svgtextpathelement/spacing/index.md @@ -0,0 +1,52 @@ +--- +title: "SVGTextPathElement: spacing property" +short-title: spacing +slug: Web/API/SVGTextPathElement/spacing +page-type: web-api-instance-property +browser-compat: api.SVGTextPathElement.spacing +--- + +{{APIRef("SVG")}} + +The **`spacing`** read-only property of the {{domxref("SVGTextPathElement")}} interface reflects the {{SVGAttr("spacing")}} attribute of the given {{SVGElement("textPath")}} element. It takes one of the [`TEXTPATH_SPACINGTYPE_*` constants](/en-US/docs/Web/API/SVGTextPathElement#spacing_types) defined on this interface. + +## Value + +An {{domxref("SVGAnimatedEnumeration")}} object. + +## Examples + +### Accessing the `spacing` property + +```html + + + + + + + This text follows a path! + + + +``` + +```js +const textPath = document.getElementById("myTextPath"); + +// Access the spacing property +console.log(textPath.spacing.baseVal); // Output: 1 (TEXTPATH_SPACINGTYPE_AUTO) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGTextPathElement.method")}} +- [`SVGTextPathElement` spacing types](/en-US/docs/Web/API/SVGTextPathElement#spacing_types) diff --git a/files/en-us/web/api/svgtextpathelement/startoffset/index.md b/files/en-us/web/api/svgtextpathelement/startoffset/index.md new file mode 100644 index 000000000000000..b217586e42456d9 --- /dev/null +++ b/files/en-us/web/api/svgtextpathelement/startoffset/index.md @@ -0,0 +1,51 @@ +--- +title: "SVGTextPathElement: startOffset property" +short-title: startOffset +slug: Web/API/SVGTextPathElement/startOffset +page-type: web-api-instance-property +browser-compat: api.SVGTextPathElement.startOffset +--- + +{{APIRef("SVG")}} + +The **`startOffset`** read-only property of the {{domxref("SVGTextPathElement")}} interface reflects the X component of the {{SVGAttr("startOffset")}} attribute of the given {{SVGElement("textPath")}}, which defines an offset from the start of the path for the initial current text position along the path after converting the path to the `` element's coordinate system. + +## Value + +An {{domxref("SVGAnimatedLength")}} object. + +## Examples + +### Accessing the `startOffset` property + +```html + + + + + + + This text follows a path! + + + +``` + +```js +const textPath = document.getElementById("myTextPath"); + +// Access the startOffset property +console.log(textPath.startOffset.baseVal.valueAsString); // Output: "25%" +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- SVG {{SVGAttr("startOffset")}} attribute diff --git a/files/en-us/web/api/svgtransform/angle/index.md b/files/en-us/web/api/svgtransform/angle/index.md new file mode 100644 index 000000000000000..ee729f1b5a82323 --- /dev/null +++ b/files/en-us/web/api/svgtransform/angle/index.md @@ -0,0 +1,50 @@ +--- +title: "SVGTransform: angle property" +short-title: angle +slug: Web/API/SVGTransform/angle +page-type: web-api-instance-property +browser-compat: api.SVGTransform.angle +--- + +{{APIRef("SVG")}} + +The **`angle`** read-only property of the {{domxref("SVGTransform")}} interface represents the angle of the transformation in degrees. + +For `SVG_TRANSFORM_ROTATE`, `SVG_TRANSFORM_SKEWX`, and `SVG_TRANSFORM_SKEWY`, `angle` reflects the transformation's rotation or skewing angle. + +For `SVG_TRANSFORM_MATRIX`, `SVG_TRANSFORM_TRANSLATE` and `SVG_TRANSFORM_SCALE`, `angle` will be zero. + +## Value + +An `integer`; the angle value in degrees as a float. + +## Examples + +### Accessing the `angle` property + +```html + + + +``` + +```js +const rect = document.getElementById("rect"); +const transformList = rect.transform.baseVal; + +// Create and add a rotation transform +const rotateTransform = rect.ownerSVGElement.createSVGTransform(); +rotateTransform.setRotate(45, 100, 100); // Rotate 45 degrees +transformList.appendItem(rotateTransform); + +// Access the angle property +console.log(transformList.getItem(0).angle); // Output: 45 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgtransform/index.md b/files/en-us/web/api/svgtransform/index.md index ca72d9081fd9ec2..e002dee8c8b06ba 100644 --- a/files/en-us/web/api/svgtransform/index.md +++ b/files/en-us/web/api/svgtransform/index.md @@ -143,7 +143,7 @@ An `SVGTransform` object can be designated as read only, which means that attemp - type + {{domxref("SVGTransform.type", "type")}} unsigned short The type of the value as specified by one of the SVG_TRANSFORM_* @@ -151,7 +151,7 @@ An `SVGTransform` object can be designated as read only, which means that attemp - angle + {{domxref("SVGTransform.angle", "angle")}} float A convenience attribute for SVG_TRANSFORM_ROTATE, @@ -163,7 +163,7 @@ An `SVGTransform` object can be designated as read only, which means that attemp - matrix + {{domxref("SVGTransform.matrix", "matrix")}} {{ domxref("DOMMatrix") }}

@@ -220,7 +220,7 @@ An `SVGTransform` object can be designated as read only, which means that attemp setMatrix(in {{ domxref("DOMMatrix") }} + >{{domxref("SVGTransform.setMatrix", "setMatrix")}}(in {{ domxref("DOMMatrix") }} matrix) @@ -245,7 +245,7 @@ An `SVGTransform` object can be designated as read only, which means that attemp setTranslate(in float tx, in float + >{{domxref("SVGTransform.setTranslate", "setTranslate")}}(in float tx, in float ty) @@ -270,7 +270,7 @@ An `SVGTransform` object can be designated as read only, which means that attemp setScale(in float sx, in float + >{{domxref("SVGTransform.setScale", "setScale")}}(in float sx, in float sy) @@ -295,7 +295,7 @@ An `SVGTransform` object can be designated as read only, which means that attemp setRotate(in float angle, in float + >{{domxref("SVGTransform.setRotate", "setRotate")}}(in float angle, in float cx, in float cy) @@ -320,7 +320,7 @@ An `SVGTransform` object can be designated as read only, which means that attemp - setSkewX(in float angle) + {{domxref("SVGTransform.setSkewX", "setSkewX")}}(in float angle) void @@ -341,7 +341,7 @@ An `SVGTransform` object can be designated as read only, which means that attemp - setSkewY(in float angle) + {{domxref("SVGTransform.setSkewY", "setSkewY")}}(in float angle) void diff --git a/files/en-us/web/api/svgtransform/matrix/index.md b/files/en-us/web/api/svgtransform/matrix/index.md new file mode 100644 index 000000000000000..5b0171d51f54245 --- /dev/null +++ b/files/en-us/web/api/svgtransform/matrix/index.md @@ -0,0 +1,91 @@ +--- +title: "SVGTransform: matrix property" +short-title: matrix +slug: Web/API/SVGTransform/matrix +page-type: web-api-instance-property +browser-compat: api.SVGTransform.matrix +--- + +{{APIRef("SVG")}} + +The **`matrix`** read-only property of the {{domxref("SVGTransform")}} interface represents the transformation matrix that corresponds to the transformation `type`. + +In case the `matrix` object is changed directly (i.e., without using the methods on the `SVGTransform` interface itself) then the `type` of the `SVGTransform` changes to `SVG_TRANSFORM_MATRIX`. + +- For `SVG_TRANSFORM_MATRIX`, the matrix contains the a, b, c, d, e, f values supplied by the user. + +- For `SVG_TRANSFORM_TRANSLATE`, e and f represent the translation amounts (a=1, b=0, c=0 and d=1). + +- For `SVG_TRANSFORM_SCALE`, a and d represent the scale amounts (b=0, c=0, e=0 and f=0). + +- For `SVG_TRANSFORM_SKEWX` and `SVG_TRANSFORM_SKEWY`, a, b, c and d represent the matrix which will result in the given skew (e=0 and f=0). + +- For `SVG_TRANSFORM_ROTATE`, a, b, c, d, e and f together represent the matrix which will result in the given rotation. When the rotation is around the center point (0, 0), e and f will be zero. + +## Value + +A live {{domxref("DOMMatrix")}} object. + +## Examples + +### Accessing and Modifying the Matrix + +```html + + + +``` + +```js +const rect = document.getElementById("rect"); +const transformList = rect.transform.baseVal; + +// Create and add a rotation transform +const rotateTransform = rect.ownerSVGElement.createSVGTransform(); +rotateTransform.setRotate(30, 100, 100); // Rotate 30 degrees +transformList.appendItem(rotateTransform); + +// Access the matrix +const matrix = transformList.getItem(0).matrix; +console.log(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f); + +// Modify the matrix directly +matrix.a = 2; // Double the horizontal scaling +console.log(transformList.getItem(0).type); // Output: 1 (SVG_TRANSFORM_MATRIX) +``` + +### Understanding Transformation Types + +```html + + + +``` + +```js +const rect = document.getElementById("rect"); +const transformList = rect.transform.baseVal; + +// Apply a translation transform +const translateTransform = rect.ownerSVGElement.createSVGTransform(); +translateTransform.setTranslate(20, 30); +transformList.appendItem(translateTransform); + +// Access the matrix +const matrix = transformList.getItem(0).matrix; +console.log(matrix.e, matrix.f); // Output: 20, 30 +console.log(transformList.getItem(0).type); // Output: 2 (SVG_TRANSFORM_TRANSLATE) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGTransform.type")}} +- {{domxref("DOMMatrix")}} diff --git a/files/en-us/web/api/svgtransform/setmatrix/index.md b/files/en-us/web/api/svgtransform/setmatrix/index.md new file mode 100644 index 000000000000000..593d6a4bf296179 --- /dev/null +++ b/files/en-us/web/api/svgtransform/setmatrix/index.md @@ -0,0 +1,67 @@ +--- +title: "SVGTransform: setMatrix() method" +short-title: setMatrix() +slug: Web/API/SVGTransform/setMatrix +page-type: web-api-instance-method +browser-compat: api.SVGTransform.setMatrix +--- + +{{APIRef("SVG")}} + +The `setMatrix()` method of the {{domxref("SVGTransform")}} interface sets the transform type to `SVG_TRANSFORM_MATRIX`, with parameter `matrix` defining the new transformation. + +Note that the values from the parameter `matrix` are copied, meaning changes to the `matrix` object after calling this method will not affect the transformation. + +## Syntax + +```js-nolint +SVGTransform.setMatrix(matrix) +``` + +### Parameters + +- `matrix` + - : A live {{domxref("DOMMatrix")}} object defining the new transformation matrix to apply. + +### Return value + +None ({{jsxref('undefined')}}). + +### Exceptions + +- `NoModificationAllowedError` {{domxref("DOMException")}} + - : Thrown if the attribute or the {{domxref("SVGTransform")}} object is read-only. + +## Examples + +### Setting a Transformation Matrix + +```js +// Get an SVG element and create a transform object +const svgElement = document.querySelector("svg"); +const transform = svgElement.createSVGTransform(); + +// Create a DOMMatrix with specific values +const matrix = new DOMMatrix(); +matrix.a = 1; // Scale X +matrix.d = 1; // Scale Y +matrix.e = 50; // Translate X +matrix.f = 50; // Translate Y + +// Set the transform to the new matrix +transform.setMatrix(matrix); + +console.dir(transform.matrix); // Output: SVGMatrix { a: 1, b: 0, c: 0, d: 1, e: 50, f: 50 } +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See Also + +- {{domxref("DOMMatrix")}} diff --git a/files/en-us/web/api/svgtransform/setrotate/index.md b/files/en-us/web/api/svgtransform/setrotate/index.md new file mode 100644 index 000000000000000..4a106f34e427131 --- /dev/null +++ b/files/en-us/web/api/svgtransform/setrotate/index.md @@ -0,0 +1,63 @@ +--- +title: "SVGTransform: setRotate() method" +short-title: setRotate() +slug: Web/API/SVGTransform/setRotate +page-type: web-api-instance-method +browser-compat: api.SVGTransform.setRotate +--- + +{{APIRef("SVG")}} + +The `setRotate()` method of the {{domxref("SVGTransform")}} interface sets the transform type to `SVG_TRANSFORM_ROTATE`, with parameter `angle` defining the rotation angle and parameters `cx` and `cy` defining the optional center of rotation. + +## Syntax + +```js-nolint +SVGTransform.setRotate(angle, cx, cy) +``` + +### Parameters + +- `angle` + - : A float defining the rotation angle in degrees. +- `cx` {{optional_inline}} + - : A float defining the X-coordinate of the center of rotation. Defaults to `0`. +- `cy` {{optional_inline}} + - : A float defining the Y-coordinate of the center of rotation. Defaults to `0`. + +### Return value + +None ({{jsxref('undefined')}}). + +### Exceptions + +- `NoModificationAllowedError` {{domxref("DOMException")}} + - : Thrown if the attribute or the {{domxref("SVGTransform")}} object is read-only. + +## Examples + +### Rotating an SVG Element + +```js +// Select an SVG element and create a transform object +const svgElement = document.querySelector("svg"); +const transform = svgElement.createSVGTransform(); + +// Set a rotation of 45 degrees +transform.setRotate(45, 0, 0); + +// Output the rotation angle +console.log(`Rotation Angle: ${transform.angle}`); // Output: 45 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGTransform.angle")}} diff --git a/files/en-us/web/api/svgtransform/setscale/index.md b/files/en-us/web/api/svgtransform/setscale/index.md new file mode 100644 index 000000000000000..cf6b7d1bfc314b3 --- /dev/null +++ b/files/en-us/web/api/svgtransform/setscale/index.md @@ -0,0 +1,58 @@ +--- +title: "SVGTransform: setScale() method" +short-title: setScale() +slug: Web/API/SVGTransform/setScale +page-type: web-api-instance-method +browser-compat: api.SVGTransform.setScale +--- + +{{APIRef("SVG")}} + +The `setScale()` method of the {{domxref("SVGTransform")}} interface sets the transform type to `SVG_TRANSFORM_SCALE`, with parameters `sx` and `sy` defining the scale amounts. + +## Syntax + +```js-nolint +SVGTransform.setScale(sx, sy) +``` + +### Parameters + +- `sx` + - : A float defining the scale amount along the X-axis. +- `sy` + - : A float defining the scale amount along the Y-axis. + +### Return value + +None ({{jsxref('undefined')}}). + +### Exceptions + +- `NoModificationAllowedError` {{domxref("DOMException")}} + - : Thrown if the attribute or the {{domxref("SVGTransform")}} object is read-only. + +## Examples + +### Scaling an SVG Element + +```js +// Select an SVG element and create a transform object +const svgElement = document.querySelector("svg"); +const transform = svgElement.createSVGTransform(); + +// Set the scale values for the transform +transform.setScale(2, 3); + +// Output the scale details +console.log(`Scale X: ${transform.matrix.a}`); // Output: 2 +console.log(`Scale Y: ${transform.matrix.d}`); // Output: 3 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgtransform/setskewx/index.md b/files/en-us/web/api/svgtransform/setskewx/index.md new file mode 100644 index 000000000000000..693f670ffbce40c --- /dev/null +++ b/files/en-us/web/api/svgtransform/setskewx/index.md @@ -0,0 +1,59 @@ +--- +title: "SVGTransform: setSkewX() method" +short-title: setSkewX() +slug: Web/API/SVGTransform/setSkewX +page-type: web-api-instance-method +browser-compat: api.SVGTransform.setSkewX +--- + +{{APIRef("SVG")}} + +The `setSkewX()` method of the {{domxref("SVGTransform")}} interface sets the transform type to `SVG_TRANSFORM_SKEWX`, with parameter `angle` defining the amount of skew along the X-axis. + +## Syntax + +```js-nolint +SVGTransform.setSkewX(angle) +``` + +### Parameters + +- `angle` + - : A float defining the amount of skew in degrees. + +### Return value + +None ({{jsxref('undefined')}}). + +### Exceptions + +- `NoModificationAllowedError` {{domxref("DOMException")}} + - : Thrown if the attribute or the {{domxref("SVGTransform")}} object is read-only. + +## Examples + +### Skewing an SVG Element Along the X-Axis + +```js +// Select an SVG element and create a transform object +const svgElement = document.querySelector("svg"); +const transform = svgElement.createSVGTransform(); + +// Apply a skew of 30 degrees along the X-axis +transform.setSkewX(30); + +// Log the applied transformation angle +console.log(`Skew Angle: ${transform.angle}`); // Output: 30 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGTransform.angle")}} diff --git a/files/en-us/web/api/svgtransform/setskewy/index.md b/files/en-us/web/api/svgtransform/setskewy/index.md new file mode 100644 index 000000000000000..1b9d64197d06ee4 --- /dev/null +++ b/files/en-us/web/api/svgtransform/setskewy/index.md @@ -0,0 +1,59 @@ +--- +title: "SVGTransform: setSkewY() method" +short-title: setSkewY() +slug: Web/API/SVGTransform/setSkewY +page-type: web-api-instance-method +browser-compat: api.SVGTransform.setSkewY +--- + +{{APIRef("SVG")}} + +The `setSkewY()` method of the {{domxref("SVGTransform")}} interface sets the transform type to `SVG_TRANSFORM_SKEWY`, with parameter `angle` defining the amount of skew along the Y-axis. + +## Syntax + +```js-nolint +SVGTransform.setSkewY(angle) +``` + +### Parameters + +- `angle` + - : A float defining the amount of skew in degrees. + +### Return value + +None ({{jsxref('undefined')}}). + +### Exceptions + +- `NoModificationAllowedError` {{domxref("DOMException")}} + - : Thrown if the attribute or the {{domxref("SVGTransform")}} object is read-only. + +## Examples + +### Skewing an SVG Element Along the Y-Axis + +```js +// Select an SVG element and create a transform object +const svgElement = document.querySelector("svg"); +const transform = svgElement.createSVGTransform(); + +// Apply a skew of 30 degrees along the Y-axis +transform.setSkewY(30); + +// Log the applied transformation angle +console.log(`Skew Angle: ${transform.angle}`); // Output: 30 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGTransform.angle")}} diff --git a/files/en-us/web/api/svgtransform/settranslate/index.md b/files/en-us/web/api/svgtransform/settranslate/index.md new file mode 100644 index 000000000000000..012dd69c17b7640 --- /dev/null +++ b/files/en-us/web/api/svgtransform/settranslate/index.md @@ -0,0 +1,58 @@ +--- +title: "SVGTransform: setTranslate() method" +short-title: setTranslate() +slug: Web/API/SVGTransform/setTranslate +page-type: web-api-instance-method +browser-compat: api.SVGTransform.setTranslate +--- + +{{APIRef("SVG")}} + +The `setTranslate()` method of the {{domxref("SVGTransform")}} interface sets the transform type to `SVG_TRANSFORM_TRANSLATE`, with parameters `tx` and `ty` defining the translation amounts. + +## Syntax + +```js-nolint +SVGTransform.setTranslate(tx, ty) +``` + +### Parameters + +- `tx` + - : A float defining the translation amount along the X-axis. +- `ty` + - : A float defining the translation amount along the Y-axis. + +### Return value + +None ({{jsxref('undefined')}}). + +### Exceptions + +- `NoModificationAllowedError` {{domxref("DOMException")}} + - : Thrown if the attribute or the {{domxref("SVGTransform")}} object is read-only. + +## Examples + +### Setting Translation Values + +```js +// Select an SVG element and create a transform object +const svgElement = document.querySelector("svg"); +const transform = svgElement.createSVGTransform(); + +// Set the translation values for the transform +transform.setTranslate(100, 50); + +// Output the translation details +console.log(`X Translation: ${transform.matrix.e}`); // Output: 100 +console.log(`Y Translation: ${transform.matrix.f}`); // Output: 50 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgtransform/type/index.md b/files/en-us/web/api/svgtransform/type/index.md new file mode 100644 index 000000000000000..f78dc599dd6b37f --- /dev/null +++ b/files/en-us/web/api/svgtransform/type/index.md @@ -0,0 +1,46 @@ +--- +title: "SVGTransform: type property" +short-title: type +slug: Web/API/SVGTransform/type +page-type: web-api-instance-property +browser-compat: api.SVGTransform.type +--- + +{{APIRef("SVG")}} + +The **`type`** read-only property of the {{domxref("SVGTransform")}} interface represents the `type` of transformation applied, specified by one of the `SVG_TRANSFORM_*` constants defined on this interface. + +## Value + +An `integer`; the type of value as an unsigned short. + +## Examples + +### Determining the type of a transform + +```html + + + +``` + +```js +const rect = document.getElementById("rect"); +const transformList = rect.transform.baseVal; + +// Create and add a translation transform +const translateTransform = rect.ownerSVGElement.createSVGTransform(); +translateTransform.setTranslate(20, 30); +transformList.appendItem(translateTransform); + +// Check the type of the added transform +console.log(transformList.getItem(0).type); // Output: 2 (SVG_TRANSFORM_TRANSLATE) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgtransformlist/appenditem/index.md b/files/en-us/web/api/svgtransformlist/appenditem/index.md new file mode 100644 index 000000000000000..ad37647299754d9 --- /dev/null +++ b/files/en-us/web/api/svgtransformlist/appenditem/index.md @@ -0,0 +1,76 @@ +--- +title: "SVGTransformList: appendItem() method" +short-title: appendItem() +slug: Web/API/SVGTransformList/appendItem +page-type: web-api-instance-method +browser-compat: api.SVGTransformList.appendItem +--- + +{{APIRef("SVG")}} + +The `appendItem()` method of the {{domxref("SVGTransformList")}} interface inserts a new item at the end of the list. + +The inserted item is the item itself and not a copy. + +- If `newItem` is already in a list, it is removed from its previous list before it is inserted into this list. + +## Syntax + +```js-nolint +SVGTransformList.appendItem(newItem) +``` + +### Parameters + +- `newItem` + - : An {{domxref("SVGTransform")}} item that is appended to the list. + +### Return value + +An {{domxref("SVGTransform")}} object; the appended item from the list. + +### Exceptions + +- `NoModificationAllowedError` {{domxref("DOMException")}} + - : Thrown if {{domxref("SVGTransformList")}} corresponds to a read-only attribute or when the object itself is read-only. + +## Examples + +### Appending a New Transformation + +```html + + + +``` + +```js +const svgElement = document.querySelector("svg"); +const rectElement = svgElement.querySelector("rect"); + +// Access the transform list of the element +const transformList = rectElement.transform.baseVal; + +// Create a new translation transformation +const svgTransform = svgElement.createSVGTransform(); +svgTransform.setTranslate(50, 50); + +// Append the new transformation to the list +const appendedTransform = transformList.appendItem(svgTransform); + +console.dir(appendedTransform); // Output: SVGTransform { type: 2, matrix: SVGMatrix, angle: 0 } +console.log(`Total number of transformations: ${transformList.numberOfItems}`); // Output: 1 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGTransform")}} +- {{domxref("SVGTransformList.numberOfItems")}} diff --git a/files/en-us/web/api/svgtransformlist/clear/index.md b/files/en-us/web/api/svgtransformlist/clear/index.md new file mode 100644 index 000000000000000..be477c6ceaf4120 --- /dev/null +++ b/files/en-us/web/api/svgtransformlist/clear/index.md @@ -0,0 +1,78 @@ +--- +title: "SVGTransformList: clear() method" +short-title: clear() +slug: Web/API/SVGTransformList/clear +page-type: web-api-instance-method +browser-compat: api.SVGTransformList.clear +--- + +{{APIRef("SVG")}} + +The `clear()` method of the {{domxref("SVGTransformList")}} interface clears all existing current items from the list, with the result being an empty list. + +## Syntax + +```js-nolint +SVGTransformList.clear() +``` + +### Parameters + +None. + +### Return value + +None ({{jsxref('undefined')}}). + +### Exceptions + +- `NoModificationAllowedError` {{domxref("DOMException")}} + - : Thrown if {{domxref("SVGTransformList")}} corresponds to a read-only attribute or when the object itself is read-only. + +## Examples + +### Clearing All Transforms from an SVG Element + +```html + + + +``` + +```js +const svgElement = document.querySelector("svg"); +const rectElement = svgElement.querySelector("rect"); + +// Access the transform list of the element +const transformList = rectElement.transform.baseVal; + +// Apply a translate transformation to the element +const translateTransform = svgElement.createSVGTransform(); +translateTransform.setTranslate(50, 50); +transformList.appendItem(translateTransform); + +// Number of transformations before clearing +console.log( + `Number of transformations before clearing: ${transformList.length}`, +); // Output: 1 + +// Clear all transformations from the list +transformList.clear(); + +// Number of transformations after clearing +console.log( + `Number of transformations after clearing: ${transformList.length}`, +); // Output: 0 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGTransform")}} diff --git a/files/en-us/web/api/svgtransformlist/consolidate/index.md b/files/en-us/web/api/svgtransformlist/consolidate/index.md new file mode 100644 index 000000000000000..51c8db9498bd338 --- /dev/null +++ b/files/en-us/web/api/svgtransformlist/consolidate/index.md @@ -0,0 +1,74 @@ +--- +title: "SVGTransformList: consolidate() method" +short-title: consolidate() +slug: Web/API/SVGTransformList/consolidate +page-type: web-api-instance-method +browser-compat: api.SVGTransformList.consolidate +--- + +{{APIRef("SVG")}} + +The `consolidate()` method of the {{domxref("SVGTransformList")}} interface consolidates the list of separate {{domxref("SVGTransform")}} objects by multiplying the equivalent transformation matrices together to result in a list consisting of a single `SVGTransform` object of type `SVG_TRANSFORM_MATRIX`. + +The consolidation operation creates a new `SVGTransform` object as the first and only item in the list. + +The returned item is the item itself and not a copy. Any changes made to the item are immediately reflected in the list. + +## Syntax + +```js-nolint +SVGTransformList.consolidate() +``` + +### Parameters + +None. + +### Return value + +A live {{domxref("SVGTransform")}} object; the consolidated transformation. + +### Exceptions + +- `NoModificationAllowedError` {{domxref("DOMException")}} + - : Thrown if {{domxref("SVGTransformList")}} corresponds to a read-only attribute or when the object itself is read-only. + +## Examples + +### Consolidating Transformations + +```html + + + +``` + +```js +const svgElement = document.querySelector("svg"); +const rectElement = svgElement.querySelector("rect"); + +// Access the transform list of the element +const transformList = rectElement.transform.baseVal; + +// Consolidate the transformations +const consolidatedTransform = transformList.consolidate(); + +console.dir(consolidatedTransform); // Output: SVGTransform { type: 1, matrix: SVGMatrix, angle: 0 } +console.log(transformList.numberOfItems); // Output: 1 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGTransform")}} diff --git a/files/en-us/web/api/svgtransformlist/createsvgtransformfrommatrix/index.md b/files/en-us/web/api/svgtransformlist/createsvgtransformfrommatrix/index.md new file mode 100644 index 000000000000000..b500c048b9f207c --- /dev/null +++ b/files/en-us/web/api/svgtransformlist/createsvgtransformfrommatrix/index.md @@ -0,0 +1,74 @@ +--- +title: "SVGTransformList: createSVGTransformFromMatrix() method" +short-title: createSVGTransformFromMatrix() +slug: Web/API/SVGTransformList/createSVGTransformFromMatrix +page-type: web-api-instance-method +browser-compat: api.SVGTransformList.createSVGTransformFromMatrix +--- + +{{APIRef("SVG")}} + +The `createSVGTransformFromMatrix()` method of the {{domxref("SVGTransformList")}} interface creates an {{domxref("SVGTransform")}} object which is initialized to a transform of type `SVG_TRANSFORM_MATRIX` and whose values are the given matrix. + +The values from the parameter matrix are copied; the matrix parameter is not adopted as `SVGTransform::matrix`. + +## Syntax + +```js-nolint +SVGTransformList.createSVGTransformFromMatrix(matrix) +``` + +### Parameters + +- `matrix` + - : A {{domxref("DOMMatrix")}} object; the transformation matrix. + +### Return value + +An {{domxref("SVGTransform")}} object. + +## Examples + +### Creating a Transformation from a Matrix + +```html + + + +``` + +```js +const svgElement = document.querySelector("svg"); +const rectElement = svgElement.querySelector("rect"); + +// Access the transform list of the element +const transformList = rectElement.transform.baseVal; + +// Create a DOMMatrix object for a rotation transformation +const rotationMatrix = new DOMMatrix(); +rotationMatrix.a = Math.cos(Math.PI / 4); // 45-degree rotation +rotationMatrix.b = Math.sin(Math.PI / 4); +rotationMatrix.c = -Math.sin(Math.PI / 4); +rotationMatrix.d = Math.cos(Math.PI / 4); + +// Create an SVGTransform object from the matrix +const svgTransform = transformList.createSVGTransformFromMatrix(rotationMatrix); + +// Append the new transformation to the transform list +transformList.appendItem(svgTransform); + +console.dir(svgTransform); // Output: SVGTransform { type: 1, matrix: SVGMatrix, angle: 0 } +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGTransform")}} +- {{domxref("DOMMatrix")}} diff --git a/files/en-us/web/api/svgtransformlist/getitem/index.md b/files/en-us/web/api/svgtransformlist/getitem/index.md new file mode 100644 index 000000000000000..c37fe051d264081 --- /dev/null +++ b/files/en-us/web/api/svgtransformlist/getitem/index.md @@ -0,0 +1,76 @@ +--- +title: "SVGTransformList: getItem() method" +short-title: getItem() +slug: Web/API/SVGTransformList/getItem +page-type: web-api-instance-method +browser-compat: api.SVGTransformList.getItem +--- + +{{APIRef("SVG")}} + +The `getItem()` method of the {{domxref("SVGTransformList")}} interface returns the specified item from the list. + +The returned item is the item itself and not a copy. Any changes made to the item are immediately reflected in the list. + +The first item is indexed at `0`. + +## Syntax + +```js-nolint +SVGTransformList.getItem(index) +``` + +### Parameters + +- `index` + - : An `integer`; the index of the specified item as an unsigned long. + +### Return value + +An {{domxref("SVGTransform")}} object; the specified item from the list. + +### Exceptions + +- `NoModificationAllowedError` {{domxref("DOMException")}} + - : Thrown if {{domxref("SVGTransformList")}} corresponds to a read-only attribute or when the object itself is read-only. + +## Examples + +### Accessing an Item from the Transform List + +```html + + + +``` + +```js +const svgElement = document.querySelector("svg"); +const rectElement = svgElement.querySelector("rect"); + +// Access the transform list of the element +const transformList = rectElement.transform.baseVal; + +// Apply a translate transformation to the element +const translateTransform = svgElement.createSVGTransform(); +translateTransform.setTranslate(50, 50); +transformList.appendItem(translateTransform); + +// Get the first item from the transform list +const firstTransform = transformList.getItem(0); + +// Log the transformation type +console.log(`Transformation Type: ${firstTransform.type}`); // Output: 2 (for SVG_TRANSFORM_TRANSLATE) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGTransform")}} diff --git a/files/en-us/web/api/svgtransformlist/index.md b/files/en-us/web/api/svgtransformlist/index.md index 5c9d23480f31883..f3e721fa3e84b7d 100644 --- a/files/en-us/web/api/svgtransformlist/index.md +++ b/files/en-us/web/api/svgtransformlist/index.md @@ -84,7 +84,7 @@ An `SVGTransformList` is indexable and can be accessed like an array.

  • readonly unsigned long numberOfItems
  • readonly unsigned long - length {{ non-standard_inline() }} + length
    • @@ -103,10 +103,10 @@ An `SVGTransformList` is indexable and can be accessed like an array. ## Instance properties -| Name | Type | Description | -| ------------------------------------ | ------------- | -------------------------------- | -| `numberOfItems` | unsigned long | The number of items in the list. | -| `length` {{ non-standard_inline() }} | unsigned long | The number of items in the list. | +| Name | Type | Description | +| -------------------------------------------------------------- | ------------- | -------------------------------- | +| {{domxref("SVGTransformList.numberOfItems", "numberOfItems")}} | unsigned long | The number of items in the list. | +| {{domxref("SVGTransformList.length", "length")}} | unsigned long | The number of items in the list. | ## Instance methods @@ -121,7 +121,7 @@ An `SVGTransformList` is indexable and can be accessed like an array. - clear() + {{domxref("SVGTransformList.clear", "clear")}}() void @@ -143,7 +143,7 @@ An `SVGTransformList` is indexable and can be accessed like an array. initialize(in + >{{domxref("SVGTransformList.initialize", "initialize")}}(in {{ domxref("SVGTransform") }} newItem) @@ -170,7 +170,7 @@ An `SVGTransformList` is indexable and can be accessed like an array. - getItem(in unsigned long index) + {{domxref("SVGTransformList.getItem", "getItem")}}(in unsigned long index) {{ domxref("SVGTransform") }} @@ -193,7 +193,7 @@ An `SVGTransformList` is indexable and can be accessed like an array. insertItemBefore(in + >{{domxref("SVGTransformList.insertItemBefore", "insertItemBefore")}}(in {{ domxref("SVGTransform") }} newItem, in unsigned long index) @@ -225,7 +225,7 @@ An `SVGTransformList` is indexable and can be accessed like an array. replaceItem(in + >{{domxref("SVGTransformList.replaceItem", "replaceItem")}}(in {{ domxref("SVGTransform") }} newItem, in unsigned long index) @@ -259,7 +259,7 @@ An `SVGTransformList` is indexable and can be accessed like an array. removeItem(in unsigned long index){{domxref("SVGTransformList.removeItem", "removeItem")}}(in unsigned long index) {{ domxref("SVGTransform") }} @@ -284,7 +284,7 @@ An `SVGTransformList` is indexable and can be accessed like an array. appendItem(in + >{{domxref("SVGTransformList.appendItem", "appendItem")}}(in {{ domxref("SVGTransform") }} newItem) @@ -310,7 +310,7 @@ An `SVGTransformList` is indexable and can be accessed like an array. createSVGTransformFromMatrix(in + >{{domxref("SVGTransformList.createSVGTransformFromMatrix", "createSVGTransformFromMatrix")}}(in {{ domxref("DOMMatrix") }}) @@ -324,7 +324,7 @@ An `SVGTransformList` is indexable and can be accessed like an array. - consolidate() + {{domxref("SVGTransformList.consolidate", "consolidate")}}() {{ domxref("SVGTransform") }} diff --git a/files/en-us/web/api/svgtransformlist/initialize/index.md b/files/en-us/web/api/svgtransformlist/initialize/index.md new file mode 100644 index 000000000000000..f3ec80f53223bb3 --- /dev/null +++ b/files/en-us/web/api/svgtransformlist/initialize/index.md @@ -0,0 +1,85 @@ +--- +title: "SVGTransformList: initialize() method" +short-title: initialize() +slug: Web/API/SVGTransformList/initialize +page-type: web-api-instance-method +browser-compat: api.SVGTransformList.initialize +--- + +{{APIRef("SVG")}} + +The `initialize()` method of the {{domxref("SVGTransformList")}} interface clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter. + +If the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. + +## Syntax + +```js-nolint +SVGTransformList.initialize(newItem) +``` + +### Parameters + +- `newItem` + - : An {{domxref("SVGTransform")}} item that is inserted into the list. + +### Return value + +An {{domxref("SVGTransform")}} object; the item inserted into the list. + +### Exceptions + +- `NoModificationAllowedError` {{domxref("DOMException")}} + - : Thrown if {{domxref("SVGTransformList")}} corresponds to a read-only attribute or when the object itself is read-only. + +## Examples + +### Re-initializing the Transform List with a New Transformation + +```html + + + +``` + +```js +const svgElement = document.querySelector("svg"); +const rectElement = svgElement.querySelector("rect"); + +// Access the transform list of the element +const transformList = rectElement.transform.baseVal; + +// Apply an initial translate transformation to the element +const translateTransform = svgElement.createSVGTransform(); +translateTransform.setTranslate(50, 50); +transformList.appendItem(translateTransform); + +// Number of transformations before initialization +console.log( + `Number of transformations before initialization: ${transformList.length}`, +); // Output: 1 + +// Create a new scale transformation +const scaleTransform = svgElement.createSVGTransform(); +scaleTransform.setScale(2, 2); + +// Initialize the list with the new scale transform +transformList.initialize(scaleTransform); + +// Number of transformations after initialization +console.log( + `Number of transformations after initialization: ${transformList.length}`, +); // Output: 1 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGTransform")}} diff --git a/files/en-us/web/api/svgtransformlist/insertitembefore/index.md b/files/en-us/web/api/svgtransformlist/insertitembefore/index.md new file mode 100644 index 000000000000000..b0b5056b5da68eb --- /dev/null +++ b/files/en-us/web/api/svgtransformlist/insertitembefore/index.md @@ -0,0 +1,84 @@ +--- +title: "SVGTransformList: insertItemBefore() method" +short-title: insertItemBefore() +slug: Web/API/SVGTransformList/insertItemBefore +page-type: web-api-instance-method +browser-compat: api.SVGTransformList.insertItemBefore +--- + +{{APIRef("SVG")}} + +The `insertItemBefore()` method of the {{domxref("SVGTransformList")}} interface inserts a new item into the list at the specified position. + +The first item is indexed at `0`. The inserted item is the item itself and not a copy. + +- If `newItem` is already in a list, it is removed from its previous list before it is inserted into this list. + +- If the item is already in this list, note that the `index` of the item to insert before is before the removal of the item. + +- If the `index` is equal to `0`, then the new item is inserted at the front of the list. + +- If the `index` is greater than or equal to {{domxref("SVGTransformList.numberOfItems", "numberOfItems")}}, then the new item is appended to the end of the list. + +## Syntax + +```js-nolint +SVGTransformList.insertItemBefore(newItem, index) +``` + +### Parameters + +- `newItem` + - : An {{domxref("SVGTransform")}} item that is inserted into the list. +- `index` + - : An `integer`; the index where the new item should be inserted as an unsigned long. + +### Return value + +An {{domxref("SVGTransform")}} object; the inserted item from the list. + +### Exceptions + +- `NoModificationAllowedError` {{domxref("DOMException")}} + - : Thrown if {{domxref("SVGTransformList")}} corresponds to a read-only attribute or when the object itself is read-only. + +## Examples + +### Inserting a Transformation into the List + +```html + + + +``` + +```js +const svgElement = document.querySelector("svg"); +const rectElement = svgElement.querySelector("rect"); + +// Access the transform list of the element +const transformList = rectElement.transform.baseVal; + +// Create a new translate transformation +const translateTransform = svgElement.createSVGTransform(); +translateTransform.setTranslate(50, 50); + +// Insert the translation transformation at the beginning of the list +transformList.insertItemBefore(translateTransform, 0); + +// The transformation list length and type +console.log(`Number of transformations: ${transformList.length}`); // Output: 1 +console.log(`Transformation Type: ${transformList.getItem(0).type}`); // Output: 2 (e.g. SVG_TRANSFORM_TRANSLATE) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGTransform")}} diff --git a/files/en-us/web/api/svgtransformlist/length/index.md b/files/en-us/web/api/svgtransformlist/length/index.md new file mode 100644 index 000000000000000..13da336dba1d74f --- /dev/null +++ b/files/en-us/web/api/svgtransformlist/length/index.md @@ -0,0 +1,53 @@ +--- +title: "SVGTransformList: length property" +short-title: length +slug: Web/API/SVGTransformList/length +page-type: web-api-instance-property +browser-compat: api.SVGTransformList.length +--- + +{{APIRef("SVG")}} + +The **`length`** read-only property of the {{domxref("SVGTransformList")}} interface represents the number of items in the list. + +## Value + +An `integer`; the number of {{domxref("SVGTransform")}} objects in the list as an unsigned long. + +## Examples + +### Accessing the `length` Property + +```html + + + +``` + +```js +const svgElement = document.querySelector("svg"); +const rectElement = svgElement.querySelector("rect"); + +// Access the transform list of the element +const transformList = rectElement.transform.baseVal; + +// Apply a translate transformation to the element +const translateTransform = svgElement.createSVGTransform(); +translateTransform.setTranslate(50, 50); +transformList.appendItem(translateTransform); + +console.log(`Number of transformations: ${transformList.length}`); // Output: 1 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGTransform")}} +- {{domxref("SVGTransformList.numberOfItems")}} (alias property) diff --git a/files/en-us/web/api/svgtransformlist/numberofitems/index.md b/files/en-us/web/api/svgtransformlist/numberofitems/index.md new file mode 100644 index 000000000000000..077301340f00914 --- /dev/null +++ b/files/en-us/web/api/svgtransformlist/numberofitems/index.md @@ -0,0 +1,52 @@ +--- +title: "SVGTransformList: numberOfItems property" +short-title: numberOfItems +slug: Web/API/SVGTransformList/numberOfItems +page-type: web-api-instance-property +browser-compat: api.SVGTransformList.numberOfItems +--- + +{{APIRef("SVG")}} + +The **`numberOfItems`** read-only property of the {{domxref("SVGTransformList")}} interface represents the number of items in the list. + +## Value + +An `integer`; the number of {{domxref("SVGTransform")}} objects in the list as an unsigned long. + +## Examples + +### Accessing the `numberOfItems` Property + +```html + + + +``` + +```js +const svgElement = document.querySelector("svg"); +const rectElement = svgElement.querySelector("rect"); + +// Access the transform list of the element +const transformList = rectElement.transform.baseVal; + +// Apply a translate transformation to the element +const translateTransform = svgElement.createSVGTransform(); +translateTransform.setTranslate(50, 50); +transformList.appendItem(translateTransform); + +console.log(`Number of transformations: ${transformList.numberOfItems}`); // Output: 1 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGTransform")}} diff --git a/files/en-us/web/api/svgtransformlist/removeitem/index.md b/files/en-us/web/api/svgtransformlist/removeitem/index.md new file mode 100644 index 000000000000000..2e94276ebac7e8d --- /dev/null +++ b/files/en-us/web/api/svgtransformlist/removeitem/index.md @@ -0,0 +1,78 @@ +--- +title: "SVGTransformList: removeItem() method" +short-title: removeItem() +slug: Web/API/SVGTransformList/removeItem +page-type: web-api-instance-method +browser-compat: api.SVGTransformList.removeItem +--- + +{{APIRef("SVG")}} + +The `removeItem()` method of the {{domxref("SVGTransformList")}} interface removes an existing item from the list. + +## Syntax + +```js-nolint +SVGTransformList.removeItem(index) +``` + +### Parameters + +- `index` + - : An `integer`; the index of the item to be removed as an unsigned long. + +### Return value + +An {{domxref("SVGTransform")}} object; the removed item from the list. + +### Exceptions + +This method may raise a {{domxref("DOMException")}} of one of the following types: + +- `NoModificationAllowedError` {{domxref("DOMException")}} + + - : Thrown if {{domxref("SVGTransformList")}} corresponds to a read-only attribute or when the object itself is read-only. + +- `IndexSizeError` {{domxref("DOMException")}} + - : Thrown if the index number is greater than or equal to {{domxref("SVGTransformList.numberOfItems", "numberOfItems")}}. + +## Examples + +### Removing a Transformation from the List + +```html + + + +``` + +```js +const svgElement = document.querySelector("svg"); +const rectElement = svgElement.querySelector("rect"); + +// Access the transform list of the element +const transformList = rectElement.transform.baseVal; + +const removedTransform = transformList.removeItem(0); +console.dir(removedTransform); // Output: SVGTransform { type: 2, matrix: SVGMatrix, angle: 0 } + +// The updated list length +console.log(`Updated number of transformations: ${transformList.length}`); // Output: 1 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGTransform")}} +- {{domxref("SVGTransformList.numberOfItems")}} diff --git a/files/en-us/web/api/svgtransformlist/replaceitem/index.md b/files/en-us/web/api/svgtransformlist/replaceitem/index.md new file mode 100644 index 000000000000000..6336994db538fa0 --- /dev/null +++ b/files/en-us/web/api/svgtransformlist/replaceitem/index.md @@ -0,0 +1,85 @@ +--- +title: "SVGTransformList: replaceItem() method" +short-title: replaceItem() +slug: Web/API/SVGTransformList/replaceItem +page-type: web-api-instance-method +browser-compat: api.SVGTransformList.replaceItem +--- + +{{APIRef("SVG")}} + +The `replaceItem()` method of the {{domxref("SVGTransformList")}} interface replaces an existing item in the list with a new item. + +The inserted item is the item itself and not a copy. + +- If `newItem` is already in a list, it is removed from its previous list before it is inserted into this list. + +- If the item is already in this list, note that the `index` of the item to replace is before the removal of the item. + +## Syntax + +```js-nolint +SVGTransformList.replaceItem(newItem, index) +``` + +### Parameters + +- `newItem` + - : A {{domxref("SVGTransform")}} item that is inserted into the list. +- `index` + - : An `integer`; the index where the new item should replace the existing one, as an unsigned long. + +### Return value + +An {{domxref("SVGTransform")}} object; the inserted item from the list. + +### Exceptions + +This method may raise a {{domxref("DOMException")}} of one of the following types: + +- `NoModificationAllowedError` {{domxref("DOMException")}} + + - : Thrown if {{domxref("SVGTransformList")}} corresponds to a read-only attribute or when the object itself is read-only. + +- `IndexSizeError` {{domxref("DOMException")}} + - : Thrown if the index number is greater than or equal to {{domxref("SVGTransformList.numberOfItems", "numberOfItems")}}. + +## Examples + +### Replacing a Transformation in the List + +```html + + + +``` + +```js +const svgElement = document.querySelector("svg"); +const rectElement = svgElement.querySelector("rect"); + +// Access the transform list of the element +const transformList = rectElement.transform.baseVal; + +// Create a new rotation transformation +const rotateTransform = svgElement.createSVGTransform(); +rotateTransform.setRotate(45, 50, 50); + +transformList.replaceItem(rotateTransform, 0); + +// Log the details of the new transformation +console.log(`New Transformation Type: ${transformList.getItem(0).type}`); // Output: 4 (e.g. SVG_TRANSFORM_ROTATE) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGTransform")}} +- {{domxref("SVGTransformList.numberOfItems")}} diff --git a/files/en-us/web/api/svgviewelement/index.md b/files/en-us/web/api/svgviewelement/index.md index 622e5d1cb380d38..2f66635d25b0a73 100644 --- a/files/en-us/web/api/svgviewelement/index.md +++ b/files/en-us/web/api/svgviewelement/index.md @@ -15,6 +15,11 @@ The **`SVGViewElement`** interface provides access to the properties of {{SVGEle _This interface also inherits properties from its parent interface, {{domxref("SVGElement")}}._ +- {{domxref("SVGViewElement.viewBox")}} {{ReadOnlyInline}} + - : An {{domxref("SVGAnimatedRect")}} corresponding to the {{SVGAttr("viewBox")}} attribute of the given {{SVGElement("view")}} element. +- {{domxref("SVGViewElement.preserveAspectRatio")}} {{ReadOnlyInline}} + - : An {{domxref("SVGAnimatedPreserveAspectRatio")}} corresponding to the {{SVGAttr("preserveAspectRatio")}} attribute of the given {{SVGElement("view")}} element. + ## Instance methods _This interface doesn't implement any specific methods, but inherits methods from its parent interface, {{domxref("SVGElement")}}._ diff --git a/files/en-us/web/api/svgviewelement/preserveaspectratio/index.md b/files/en-us/web/api/svgviewelement/preserveaspectratio/index.md new file mode 100644 index 000000000000000..9fb327a3aef67b4 --- /dev/null +++ b/files/en-us/web/api/svgviewelement/preserveaspectratio/index.md @@ -0,0 +1,46 @@ +--- +title: "SVGViewElement: preserveAspectRatio property" +short-title: preserveAspectRatio +slug: Web/API/SVGViewElement/preserveAspectRatio +page-type: web-api-instance-property +browser-compat: api.SVGViewElement.preserveAspectRatio +--- + +{{APIRef("SVG")}} + +The **`preserveAspectRatio`** read-only property of the {{domxref("SVGViewElement")}} interface reflects the {{SVGAttr("preserveAspectRatio")}} attribute of the given {{SVGElement("view")}} element. It defines how the content within the `view` should be scaled to fit its viewport while preserving its aspect ratio. + +## Value + +An {{domxref("SVGAnimatedPreserveAspectRatio")}} object. + +## Example + +Given the following SVG, we can use the `preserveAspectRatio` property to retrieve the scaling behavior for a `view` element: + +```html + + + + +``` + +We can access the `preserveAspectRatio` attribute: + +```js +const view = document.querySelector("view"); + +console.log(view.preserveAspectRatio.baseVal); // output: SVGPreserveAspectRatio {align: 1, meetOrSlice: 1} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{SVGAttr("preserveAspectRatio")}} diff --git a/files/en-us/web/api/svgviewelement/viewbox/index.md b/files/en-us/web/api/svgviewelement/viewbox/index.md new file mode 100644 index 000000000000000..7f47573f0457482 --- /dev/null +++ b/files/en-us/web/api/svgviewelement/viewbox/index.md @@ -0,0 +1,46 @@ +--- +title: "SVGViewElement: viewBox property" +short-title: viewBox +slug: Web/API/SVGViewElement/viewBox +page-type: web-api-instance-property +browser-compat: api.SVGViewElement.viewBox +--- + +{{APIRef("SVG")}} + +The **`viewBox`** read-only property of the {{domxref("SVGViewElement")}} interface reflects the {{SVGAttr("viewBox")}} attribute of the given {{SVGElement("view")}} element. It represents the `x`, `y`, `width`, and `height` values defining the area to be used for the `view`'s `viewBox`. + +## Value + +An {{domxref("SVGAnimatedRect")}} object. + +## Example + +Given the following SVG, we can use the `viewBox` property to retrieve the dimensions of the `viewBox` for a `view` element: + +```html + + + + +``` + +We can access the `viewBox` attribute: + +```js +const view = document.querySelector("view"); + +console.log(view.viewBox.baseVal); // output: DOMRect {x: 0, y: 0, width: 50, height: 50} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{SVGAttr("viewBox")}} diff --git a/files/en-us/web/api/taskattributiontiming/containerid/index.md b/files/en-us/web/api/taskattributiontiming/containerid/index.md index 9c72053a7cb5a7a..ef1d60611a85d15 100644 --- a/files/en-us/web/api/taskattributiontiming/containerid/index.md +++ b/files/en-us/web/api/taskattributiontiming/containerid/index.md @@ -10,7 +10,7 @@ browser-compat: api.TaskAttributionTiming.containerId {{APIRef("Performance API")}}{{SeeCompatTable}} -The **`containerId`** readonly property of the {{domxref("TaskAttributionTiming")}} interface returns the container's `id` +The **`containerId`** read-only property of the {{domxref("TaskAttributionTiming")}} interface returns the container's `id` attribute. A container is the iframe, embed or object etc. that is being implicated, on the whole, for a long task. ## Value diff --git a/files/en-us/web/api/taskattributiontiming/containername/index.md b/files/en-us/web/api/taskattributiontiming/containername/index.md index 82589cbdccb4931..4ec21c1382ca030 100644 --- a/files/en-us/web/api/taskattributiontiming/containername/index.md +++ b/files/en-us/web/api/taskattributiontiming/containername/index.md @@ -10,7 +10,7 @@ browser-compat: api.TaskAttributionTiming.containerName {{APIRef("Performance API")}}{{SeeCompatTable}} -The **`containerName`** readonly property of the {{domxref("TaskAttributionTiming")}} interface returns the container's `name` +The **`containerName`** read-only property of the {{domxref("TaskAttributionTiming")}} interface returns the container's `name` attribute. A container is the iframe, embed or object etc. that is being implicated, on the whole, for a long task. ## Value diff --git a/files/en-us/web/api/taskattributiontiming/containersrc/index.md b/files/en-us/web/api/taskattributiontiming/containersrc/index.md index a671cd6cfca7b07..d56f9acc4709b9e 100644 --- a/files/en-us/web/api/taskattributiontiming/containersrc/index.md +++ b/files/en-us/web/api/taskattributiontiming/containersrc/index.md @@ -10,7 +10,7 @@ browser-compat: api.TaskAttributionTiming.containerSrc {{APIRef("Performance API")}}{{SeeCompatTable}} -The **`containerSrc`** readonly property of the {{domxref("TaskAttributionTiming")}} interface returns the container's `src` +The **`containerSrc`** read-only property of the {{domxref("TaskAttributionTiming")}} interface returns the container's `src` attribute. A container is the iframe, embed or object etc. that is being implicated, on the whole, for a long task. ## Value diff --git a/files/en-us/web/api/taskattributiontiming/containertype/index.md b/files/en-us/web/api/taskattributiontiming/containertype/index.md index 5c7f2fe3df1b2f8..c2c48153dcc2eec 100644 --- a/files/en-us/web/api/taskattributiontiming/containertype/index.md +++ b/files/en-us/web/api/taskattributiontiming/containertype/index.md @@ -10,7 +10,7 @@ browser-compat: api.TaskAttributionTiming.containerType {{APIRef("Performance API")}}{{SeeCompatTable}} -The **`containerType`** readonly property of the {{domxref("TaskAttributionTiming")}} interface returns the type of the container, one of `iframe`, `embed`, or `object`. +The **`containerType`** read-only property of the {{domxref("TaskAttributionTiming")}} interface returns the type of the container, one of `iframe`, `embed`, or `object`. ## Value diff --git a/files/en-us/web/api/taskprioritychangeevent/previouspriority/index.md b/files/en-us/web/api/taskprioritychangeevent/previouspriority/index.md index b2b0764ea987cc4..017caf83ae0a27e 100644 --- a/files/en-us/web/api/taskprioritychangeevent/previouspriority/index.md +++ b/files/en-us/web/api/taskprioritychangeevent/previouspriority/index.md @@ -8,7 +8,7 @@ browser-compat: api.TaskPriorityChangeEvent.previousPriority {{APIRef("Prioritized Task Scheduling API")}}{{AvailableInWorkers}} -The readonly **`previousPriority`** property of the {{domxref("TaskPriorityChangeEvent")}} interface returns the priority of the corresponding {{domxref("TaskSignal")}} before it was changed and this [`prioritychange`](/en-US/docs/Web/API/TaskSignal/prioritychange_event) event was emitted. +The **`previousPriority`** read-only property of the {{domxref("TaskPriorityChangeEvent")}} interface returns the priority of the corresponding {{domxref("TaskSignal")}} before it was changed and this [`prioritychange`](/en-US/docs/Web/API/TaskSignal/prioritychange_event) event was emitted. This is the value that was set in the [`TaskPriorityChangeEvent` constructor](/en-US/docs/Web/API/TaskPriorityChangeEvent/TaskPriorityChangeEvent) argument `options.previous`. diff --git a/files/en-us/web/api/url/pathname/index.md b/files/en-us/web/api/url/pathname/index.md index 20aa16660136e83..9dfef11f5d1f85f 100644 --- a/files/en-us/web/api/url/pathname/index.md +++ b/files/en-us/web/api/url/pathname/index.md @@ -11,7 +11,7 @@ browser-compat: api.URL.pathname The **`pathname`** property of the {{domxref("URL")}} interface represents a location in a hierarchical structure. It is a string constructed from a list of path segments, each of which is prefixed by a `/` character. HTTPS, HTTP, or other URLs with [hierarchical schemes](https://www.rfc-editor.org/rfc/rfc3986#section-1.2.3) (which the URL standard calls "[special schemes](https://url.spec.whatwg.org/#special-scheme)") always have at least one (invisible) path segment: the empty string. -The `pathname` value for such URLs will therefore always have a least one `/` character. +The `pathname` value for such URLs will therefore always have at least one `/` character. For non-hierarchical schemes, if the URL has no path segments, the value of its `pathname` property will be the empty string. diff --git a/files/en-us/web/api/view_transition_api/using/index.md b/files/en-us/web/api/view_transition_api/using/index.md index 06377dbd88aa8b4..9c40816c5b71fa9 100644 --- a/files/en-us/web/api/view_transition_api/using/index.md +++ b/files/en-us/web/api/view_transition_api/using/index.md @@ -2,13 +2,11 @@ title: Using the View Transition API slug: Web/API/View_Transition_API/Using page-type: guide -status: - - experimental --- {{DefaultAPISidebar("View Transition API")}} -This article explains the theory behind how the [View Transition API](/en-US/docs/Web/API/View_Transition_API)) works, how to create view transitions and customize the transition animations, and how to manipulate active view transitions. This covers view transitions for both DOM state updates in a single-page app (SPA), and navigating between documents in a multi-page app (MPA). +This article explains the theory behind how the [View Transition API](/en-US/docs/Web/API/View_Transition_API) works, how to create view transitions and customize the transition animations, and how to manipulate active view transitions. This covers view transitions for both DOM state updates in a single-page app (SPA), and navigating between documents in a multi-page app (MPA). ## The view transition process diff --git a/files/en-us/web/api/vttcue/index.md b/files/en-us/web/api/vttcue/index.md index 54e9d122aa49956..bd4265e8c07e9e9 100644 --- a/files/en-us/web/api/vttcue/index.md +++ b/files/en-us/web/api/vttcue/index.md @@ -32,7 +32,7 @@ _This interface also inherits properties from {{domxref("TextTrackCue")}}._ - {{domxref("VTTCue.line")}} - : Represents the line positioning of the cue. This can be the string `auto` or a number whose interpretation depends on the value of {{domxref("VTTCue.snapToLines")}}. - {{domxref("VTTCue.lineAlign")}} - - : An enum representing the alignment of the {{domxref("VTTCue.line")}}. + - : An enum representing the alignment of the VTT cue. - {{domxref("VTTCue.position")}} - : Represents the indentation of the cue within the line. This can be the string `auto`, a number representing the percentage of the {{domxref("VTTCue.region")}}, or the video size if {{domxref("VTTCue.region")}} is `null`. diff --git a/files/en-us/web/api/web_authentication_api/index.md b/files/en-us/web/api/web_authentication_api/index.md index c6e4e73d4810757..00bc8ab070e4671 100644 --- a/files/en-us/web/api/web_authentication_api/index.md +++ b/files/en-us/web/api/web_authentication_api/index.md @@ -71,7 +71,7 @@ To illustrate how the credential creation process works, let's describe the typi 1. Verifying that the challenge is the same as the challenge that was sent. 2. Ensuring that the origin was the origin expected. - 3. Validating that the signature and attestation are using the correct certificate chain for the specific model of the authenticator used to generated the key par in the first place. + 3. Validating that the signature and attestation are using the correct certificate chain for the specific model of the authenticator used to generate the key pair in the first place. > [!WARNING] > Attestation provides a way for a relying party to determine the provenance of an authenticator. Relying parties should not attempt to maintain allowlists of authenticators. diff --git a/files/en-us/web/api/web_workers_api/using_web_workers/index.md b/files/en-us/web/api/web_workers_api/using_web_workers/index.md index be92ea3b1417230..65f1f3521ed32f9 100644 --- a/files/en-us/web/api/web_workers_api/using_web_workers/index.md +++ b/files/en-us/web/api/web_workers_api/using_web_workers/index.md @@ -66,15 +66,12 @@ const myWorker = new Worker("worker.js"); The magic of workers happens via the {{domxref("Worker.postMessage", "postMessage()")}} method and the {{domxref("Worker.message_event", "onmessage")}} event handler. When you want to send a message to the worker, you post messages to it like this ([main.js](https://github.com/mdn/dom-examples/blob/main/web-workers/simple-web-worker/main.js)): ```js -first.onchange = () => { - myWorker.postMessage([first.value, second.value]); - console.log("Message posted to worker"); -}; - -second.onchange = () => { - myWorker.postMessage([first.value, second.value]); - console.log("Message posted to worker"); -}; +[first, second].forEach((input) => { + input.onchange = () => { + myWorker.port.postMessage([first.value, second.value]); + console.log("Message posted to worker"); + }; +}); ``` So here we have two {{htmlelement("input")}} elements represented by the variables `first` and `second`; when the value of either is changed, `myWorker.postMessage([first.value,second.value])` is used to send the value inside both to the worker, as an array. You can send pretty much anything you like in the message. diff --git a/files/en-us/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md b/files/en-us/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md index f02b8f03569cac6..914bf866eb2a4ad 100644 --- a/files/en-us/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md +++ b/files/en-us/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md @@ -221,7 +221,7 @@ const vsSource = ` `; ``` -The key change here is that instead of fetching the vertex color, we're fetching the texture coordinates and passing them to the vertex shader; this will indicate the location within the texture corresponding to the vertex. +The key change here is that instead of fetching the vertex color, we're fetching the texture coordinates and passing them to the fragment shader; this will indicate the location within the texture corresponding to the vertex. ### The fragment shader diff --git a/files/en-us/web/api/webglcontextevent/index.md b/files/en-us/web/api/webglcontextevent/index.md index fbd8140c1f29268..2ca8fde1a6da33e 100644 --- a/files/en-us/web/api/webglcontextevent/index.md +++ b/files/en-us/web/api/webglcontextevent/index.md @@ -7,7 +7,7 @@ browser-compat: api.WebGLContextEvent {{APIRef("WebGL")}}{{AvailableInWorkers}} -The **WebContextEvent** interface is part of the [WebGL API](/en-US/docs/Web/API/WebGL_API) and is an interface for an event that is generated in response to a status change to the WebGL rendering context. +The **WebGLContextEvent** interface is part of the [WebGL API](/en-US/docs/Web/API/WebGL_API) and is an interface for an event that is generated in response to a status change to the WebGL rendering context. {{InheritanceDiagram}} diff --git a/files/en-us/web/api/webtransport/createunidirectionalstream/index.md b/files/en-us/web/api/webtransport/createunidirectionalstream/index.md index df7c280f45ffc64..0d35caf10dab15e 100644 --- a/files/en-us/web/api/webtransport/createunidirectionalstream/index.md +++ b/files/en-us/web/api/webtransport/createunidirectionalstream/index.md @@ -59,7 +59,7 @@ async function writeData() { const stream = await transport.createUnidirectionalStream({ sendOrder: "596996858", }); - const writer = stream.writable.getWriter(); + const writer = stream.getWriter(); const data1 = new Uint8Array([65, 66, 67]); const data2 = new Uint8Array([68, 69, 70]); writer.write(data1); @@ -80,7 +80,7 @@ You can also use {{domxref("WritableStreamDefaultWriter.abort()")}} to abruptly // ... const stream = await transport.createUnidirectionalStream(); -const writer = ws.getWriter(); +const writer = stream.getWriter(); // ... diff --git a/files/en-us/web/api/webtransport_api/index.md b/files/en-us/web/api/webtransport_api/index.md index 382c7ff925a197e..7c1f7cb5456c824 100644 --- a/files/en-us/web/api/webtransport_api/index.md +++ b/files/en-us/web/api/webtransport_api/index.md @@ -15,7 +15,7 @@ The **WebTransport API** provides a modern update to {{domxref("WebSockets API", These include: -- **Head-of-line blocking** +- **{{glossary("head of line blocking", "Head-of-line blocking")}}** - : HTTP/2 allows multiplexing, so a single connection can stream multiple resources simultaneously. However, if a single resource fails, all other resources on that connection are held up until any missing packets are retransmitted. With QUIC, only the failing resource is affected. - **Faster performance** - : QUIC is more performant than TCP in many ways. QUIC can handle security features by itself, rather than handing responsibility off to other protocols like TLS — meaning fewer round trips. And streams provide better transport efficiency than the older packet mechanism. That can make a significant difference, especially on high-latency networks. diff --git a/files/en-us/web/api/webvtt_api/web_video_text_tracks_format/index.md b/files/en-us/web/api/webvtt_api/web_video_text_tracks_format/index.md index 515f9ad0b9ede3b..503b4a327eb981f 100644 --- a/files/en-us/web/api/webvtt_api/web_video_text_tracks_format/index.md +++ b/files/en-us/web/api/webvtt_api/web_video_text_tracks_format/index.md @@ -474,7 +474,7 @@ For example, the following `STYLE` block would match all cue text and color it y ```plain STYLE -cue { +::cue { color: yellow; } ``` @@ -487,16 +487,16 @@ For example, the following block would match cue payload text marked up with `la ```plain STYLE -cue(c), -cue(i), -cue(b), -cue(u), -cue(ruby), -cue(rt), -cue(v) { +::cue(c), +::cue(i), +::cue(b), +::cue(u), +::cue(ruby), +::cue(rt), +::cue(v) { color: red; } -cue(lang) { +::cue(lang) { color: yellow; } ``` diff --git a/files/en-us/web/api/window/matchmedia/index.md b/files/en-us/web/api/window/matchmedia/index.md index e68f396bb7af5e3..fe1d37972fa74d7 100644 --- a/files/en-us/web/api/window/matchmedia/index.md +++ b/files/en-us/web/api/window/matchmedia/index.md @@ -23,8 +23,11 @@ matchMedia(mediaQueryString) ### Parameters - `mediaQueryString` + - : A string specifying the media query to parse into a {{domxref("MediaQueryList")}}. + Just like in CSS, any [media feature](/en-US/docs/Web/CSS/@media#media_features) must be wrapped in parentheses inside the expression. For example: `matchMedia("(max-width: 600px)")` works, whereas `matchMedia("max-width: 600px")` does not. Keywords for media types (`all`, `print`, `screen`) and logical operators (`and`, `or`, `not`, `only`) do not need to be wrapped in parentheses. + ### Return value A new {{domxref("MediaQueryList")}} object for the media query. Use this object's diff --git a/files/en-us/web/api/worker/postmessage/index.md b/files/en-us/web/api/worker/postmessage/index.md index 7b70c942696d9b7..fb464e60447b495 100644 --- a/files/en-us/web/api/worker/postmessage/index.md +++ b/files/en-us/web/api/worker/postmessage/index.md @@ -48,15 +48,12 @@ The following code snippet shows the creation of a {{domxref("Worker")}} object ```js const myWorker = new Worker("worker.js"); -first.onchange = () => { - myWorker.postMessage([first.value, second.value]); - console.log("Message posted to worker"); -}; - -second.onchange = () => { - myWorker.postMessage([first.value, second.value]); - console.log("Message posted to worker"); -}; +[first, second].forEach((input) => { + input.onchange = () => { + myWorker.port.postMessage([first.value, second.value]); + console.log("Message posted to worker"); + }; +}); ``` For a full example, see our [simple worker example](https://github.com/mdn/dom-examples/tree/main/web-workers/simple-web-worker) ([run example](https://mdn.github.io/dom-examples/web-workers/simple-web-worker/)). diff --git a/files/en-us/web/css/@color-profile/index.md b/files/en-us/web/css/@color-profile/index.md index df869b201d01c36..2ccdb69c512c912 100644 --- a/files/en-us/web/css/@color-profile/index.md +++ b/files/en-us/web/css/@color-profile/index.md @@ -36,6 +36,10 @@ The **`@color-profile`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CS - `saturation` - : This option was created to preserve the relative saturation (chroma) of the original, and to keep solid colors pure. However, it experienced interoperability problems like the perceptual intent. +## Formal syntax + +{{csssyntax}} + ## Examples This example is from the specification and demonstrates using offset printing to ISO 12647-2:2004 using the CGATS/SWOP TR005 2007 characterization data on grade 5 paper with an ink limit of 300% Total Area Coverage, and medium gray component replacement (GCR). @@ -51,10 +55,6 @@ The `src` descriptor specifies the URL to retrieve the color-profile information } ``` -## Formal syntax - -{{csssyntax}} - ## Specifications {{Specifications}} diff --git a/files/en-us/web/css/@container/index.md b/files/en-us/web/css/@container/index.md index 0bc5f0c101b4862..7f0c103fa5ddb15 100644 --- a/files/en-us/web/css/@container/index.md +++ b/files/en-us/web/css/@container/index.md @@ -148,6 +148,10 @@ The following descriptors can be used within the container condition: - `width` - : The width of the container expressed as a {{cssxref("length")}} value. +## Formal syntax + +{{csssyntax}} + ## Examples ### Setting styles based on a container's size @@ -260,8 +264,6 @@ The following query evaluates to true and applies the declared style if the cont ### Container style queries -{{CSSRef}}{{SeeCompatTable}} - Container queries can also evaluate the computed style of the container element. A _container style query_ is a `@container` query that uses one or more `style()` functional notations. The boolean syntax and logic combining style features into a style query is the same as for [CSS feature queries](/en-US/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries). ```css diff --git a/files/en-us/web/css/@font-face/font-weight/index.md b/files/en-us/web/css/@font-face/font-weight/index.md index af82b6348a19a39..2af4d30e008c818 100644 --- a/files/en-us/web/css/@font-face/font-weight/index.md +++ b/files/en-us/web/css/@font-face/font-weight/index.md @@ -243,7 +243,7 @@ We include an {{htmlelement("input/range")}} of type `range`, nested in a {{html

    LeagueMono, font-weight: 400 (example)

    LeagueMono, font-weight: 700 (comparison)

    ``` diff --git a/files/en-us/web/css/@font-face/index.md b/files/en-us/web/css/@font-face/index.md index a2cc498998123a5..d1d430bd1c6e05a 100644 --- a/files/en-us/web/css/@font-face/index.md +++ b/files/en-us/web/css/@font-face/index.md @@ -31,23 +31,23 @@ The **`@font-face`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At - {{cssxref("@font-face/font-display", "font-display")}} - : Determines how a font face is displayed based on whether and when it is downloaded and ready to use. - {{cssxref("@font-face/font-family", "font-family")}} - - : Specifies a name that will be used as the font face value for font properties. + - : Specifies a name that will be used as the font face value for font properties. A `font-family` name is required for the `@font-face` rule to be valid. - {{cssxref("@font-face/font-stretch", "font-stretch")}} - - : A {{cssxref("font-stretch")}} value. Accepts two values to specify a range that is supported by a font-face, for example `font-stretch: 50% 200%;` + - : A {{cssxref("font-stretch")}} value. Accepts two values to specify a range that is supported by a font face, for example `font-stretch: 50% 200%;` - {{cssxref("@font-face/font-style", "font-style")}} - - : A {{cssxref("font-style")}} value. Accepts two values to specify a range that is supported by a font-face, for example `font-style: oblique 20deg 50deg;` + - : A {{cssxref("font-style")}} value. Accepts two values to specify a range that is supported by a font face, for example `font-style: oblique 20deg 50deg;` - {{cssxref("@font-face/font-weight", "font-weight")}} - - : A {{cssxref("font-weight")}} value. Accepts two values to specify a range that is supported by a font-face, for example `font-weight: 100 400;` + - : A {{cssxref("font-weight")}} value. Accepts two values to specify a range that is supported by a font face, for example `font-weight: 100 400;` - {{cssxref("@font-face/font-feature-settings", "font-feature-settings")}} - : Allows control over advanced typographic features in OpenType fonts. - {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} - - : Allows low-level control over OpenType or TrueType font variations, by specifying the four letter axis names of the features to vary, along with their variation values. + - : Allows low-level control over OpenType or TrueType font variations, by specifying the four-letter axis names of the features to vary, along with their variation values. - {{cssxref("@font-face/line-gap-override", "line-gap-override")}} - : Defines the line gap metric for the font. - {{cssxref("@font-face/size-adjust", "size-adjust")}} - : Defines a multiplier for glyph outlines and metrics associated with this font. This makes it easier to harmonize the designs of various fonts when rendered at the same font size. - {{cssxref("@font-face/src", "src")}} - - : Specifies references to font resources including hints about the font format and technology. It is required for the @font-face rule to be valid. + - : Specifies references to font resources including hints about the font format and technology. A `src` is required for the `@font-face` rule to be valid. - {{cssxref("@font-face/unicode-range", "unicode-range")}} - : The range of Unicode code points to be used from the font. @@ -58,9 +58,9 @@ It's common to use both `url()` and `local()` together, so that the user's insta If the `local()` function is provided, specifying a font name to look for on the user's device, and if the {{Glossary("user agent")}} finds a match, that local font is used. Otherwise, the font resource specified using the `url()` function is downloaded and used. Browsers attempt to load resources in their list declaration order, so usually `local()` should be written before `url()`. Both functions are optional, so a rule block containing only one or more `local()` without `url()` is possible. -If a more specific fonts with `format()` or `tech()` values are desired, these should be listed _before_ versions that don't have these values, as the less-specific variant would otherwise be tried and used first. +If more specific fonts with `format()` or `tech()` values are desired, these should be listed _before_ versions that don't have these values, as the less specific variant would otherwise be tried and used first. -By allowing authors to provide their own fonts, `@font-face` makes it possible to design content without being limited to the so-called "web-safe" fonts (that is, the fonts which are so common that they're considered to be universally available). The ability to specify the name of a locally-installed font to look for and use makes it possible to customize the font beyond the basics while making it possible to do so without relying on an internet connection. +By allowing authors to provide their own fonts, `@font-face` makes it possible to design content without being limited to the so-called "web-safe" fonts (that is, the fonts that are so common that they're considered to be universally available). The ability to specify the name of a locally-installed font to look for and use makes it possible to customize the font beyond the basics while making it possible to do so without relying on an internet connection. > [!NOTE] > Fallback strategies for loading fonts on older browsers are described in the [`src` descriptor page](/en-US/docs/Web/CSS/@font-face/src#specifying_fallbacks_for_older_browsers). diff --git a/files/en-us/web/css/@font-palette-values/index.md b/files/en-us/web/css/@font-palette-values/index.md index 6b2f143d75c88c4..67c87a9e8d1417a 100644 --- a/files/en-us/web/css/@font-palette-values/index.md +++ b/files/en-us/web/css/@font-palette-values/index.md @@ -27,7 +27,7 @@ The [<dashed-ident>](/en-US/docs/Web/CSS/dashed-ident) is a user defined i - {{cssxref("@font-palette-values/base-palette", "base-palette")}} - : Specifies the name or index of the base-palette, created by the font-maker, to use. - {{cssxref("@font-palette-values/font-family", "font-family")}} - - : Specifies the name of the font family that this palette can be applied to. + - : Specifies the name of the font family that this palette can be applied to. A `font-family` name is required for the `@font-palette-values` rule to be valid. - {{cssxref("@font-palette-values/override-colors", "override-colors")}} - : Specifies the colors in the base palette to override. diff --git a/files/en-us/web/css/@import/index.md b/files/en-us/web/css/@import/index.md index 2fbc07df4d6434f..a31d21c2df93079 100644 --- a/files/en-us/web/css/@import/index.md +++ b/files/en-us/web/css/@import/index.md @@ -160,4 +160,4 @@ This is an example of creating two separate unnamed cascade layers and importing - {{CSSxRef("@media")}} - {{CSSxRef("@supports")}} -- [CSS cascade and inheritance](/en-US/docs/Web/CSS/CSS_cascade) module +- [CSS cascading and inheritance](/en-US/docs/Web/CSS/CSS_cascade) module diff --git a/files/en-us/web/css/@import/layer_function/index.md b/files/en-us/web/css/@import/layer_function/index.md index 7e48469c13f7c52..1a917fa0ce46906 100644 --- a/files/en-us/web/css/@import/layer_function/index.md +++ b/files/en-us/web/css/@import/layer_function/index.md @@ -33,4 +33,4 @@ The `framework.themes.dark` is the layer into which the CSS file would be import ## See also - {{CSSxRef("@import")}} -- [CSS cascade and inheritance](/en-US/docs/Web/CSS/CSS_cascade) module +- [CSS cascading and inheritance](/en-US/docs/Web/CSS/CSS_cascade) module diff --git a/files/en-us/web/css/@media/aspect-ratio/index.md b/files/en-us/web/css/@media/aspect-ratio/index.md index 300ba28d7db7c4e..77a5986b90b1eb6 100644 --- a/files/en-us/web/css/@media/aspect-ratio/index.md +++ b/files/en-us/web/css/@media/aspect-ratio/index.md @@ -15,39 +15,43 @@ The `aspect-ratio` feature is specified as a {{cssxref("<ratio>")}} value ## Examples -The example below is contained in an {{htmlElement("iframe")}}, which creates its own viewport. Resize the ` ``` ### CSS ```css -/* Minimum aspect ratio */ +/* Minimum allowed aspect ratio */ +/* Select aspect ratios 8/5 = 1.6 and above */ @media (min-aspect-ratio: 8/5) { div { - background: #9af; /* blue */ + background: #99f; /* blue */ } } -/* Maximum aspect ratio */ +/* Maximum allowed aspect ratio */ +/* Select aspect ratios 3/2 = 1.5 and below */ @media (max-aspect-ratio: 3/2) { div { - background: #9ff; /* cyan */ + background: #9f9; /* green */ } } -/* Exact aspect ratio, put it at the bottom to avoid override*/ +/* Exact aspect ratio, put it at the bottom to avoid override */ @media (aspect-ratio: 1/1) { div { - background: #f9a; /* red */ + background: #f99; /* red */ } } ``` @@ -59,34 +63,47 @@ Note that, when none of the media query conditions are true, the background will + ``` ```css hidden iframe { display: block; + border: 1px dashed black; } ``` ```js hidden outer.style.width = outer.style.height = "165px"; +const updateRatio = () => { + ratio.textContent = `aspect-ratio: ${w.value}/${h.value} = ${(w.value / h.value).toFixed(2)}`; +}; + w.onchange = w.oninput = () => { outer.style.width = `${w.value}px`; wf.textContent = `width: ${w.value}`; + updateRatio(); }; + h.onchange = h.oninput = () => { outer.style.height = `${h.value}px`; hf.textContent = `height: ${h.value}`; + updateRatio(); }; ``` {{ EmbedLiveSample('Result', '300px', '350px') }} +Note the `min-aspect-ratio: 8/5` sets the _lower_ bound to 1.6, so this media query selects elements with aspect ratios 1.6 and above. The `max-aspect-ratio: 3/2` sets the _upper_ bound, so this media query selects elements with aspect ratios 1.5 and below. The `aspect-ratio: 1/1` overrides the max aspect ratio rule because it has been declared after and selects elements with aspect ratios exactly `1`. + +From the initial state, as you reduce height, the aspect ratio starts increasing from one. So the div's background color goes from red(1) < green(1.5) < white < blue(1.6). + ## Specifications {{Specifications}} @@ -97,6 +114,6 @@ h.onchange = h.oninput = () => { ## See also +- [Understanding `aspect-ratio`](/en-US/docs/Web/CSS/CSS_box_sizing/Understanding_aspect-ratio) - [Using Media Queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) - [@media](/en-US/docs/Web/CSS/@media) -- [Understanding `aspect-ratio`](/en-US/docs/Web/CSS/CSS_box_sizing/Understanding_aspect-ratio) diff --git a/files/en-us/web/css/@media/forced-colors/index.md b/files/en-us/web/css/@media/forced-colors/index.md index d59484b75822919..812311f51a704a1 100644 --- a/files/en-us/web/css/@media/forced-colors/index.md +++ b/files/en-us/web/css/@media/forced-colors/index.md @@ -55,11 +55,13 @@ The system colors that are forced for the above properties depend on the context In addition to these adjustments, browsers will help ensure text legibility by drawing "backplates" behind text. This is particularly important for preserving contrast when text is placed on top of images. -There are two cases where the user agent does not force the values for the above properties — when a {{cssxref("forced-color-adjust")}} value of `none` is applied to an element, or when a system color is specified by the author. +There are some cases where the user agent does not force the values for the above properties: -When forced-color-adjust is set to `none` on an element, none of the forced color values will apply, and author styles will be applied as normal. Additionally, the backplate for text will be disabled. +When {{cssxref("forced-color-adjust")}} is set to `none` on an element, none of the forced color values will apply, and author styles will be applied as normal. Additionally, the backplate for text will be disabled. -When a system color is specified, it will be used instead of the value that would otherwise have been forced. +When {{cssxref("forced-color-adjust")}} is set to `preserve-parent-color` on an element, and the {{cssxref("color")}} value on the element does not inherit from its parent, then the element will behave the same as setting `preserve-parent-color` to `none`. + +When a [system color](/en-US/docs/Web/CSS/system-color) is specified, it will be used instead of the value that would otherwise have been forced. You can also use system colors with any property _other_ than those listed above, to ensure that the rest of the page integrates with the restricted color palette available in forced colors mode. diff --git a/files/en-us/web/css/@media/index.md b/files/en-us/web/css/@media/index.md index 96d82292f6f65d4..26db828a46c7c42 100644 --- a/files/en-us/web/css/@media/index.md +++ b/files/en-us/web/css/@media/index.md @@ -171,6 +171,10 @@ Some media queries have corresponding [user agent client hints](/en-US/docs/Web/ These are HTTP headers that request content that is pre-optimized for the particular media requirement. They include {{HTTPHeader("Sec-CH-Prefers-Color-Scheme")}} and {{HTTPHeader("Sec-CH-Prefers-Reduced-Motion")}}. +## Formal syntax + +{{csssyntax}} + ## Accessibility To best accommodate people who adjust a site's text size, use [`em`](/en-US/docs/Web/CSS/CSS_Values_and_Units#numeric_data_types)s when you need a {{cssxref("<length>")}} for your [media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries). @@ -186,10 +190,6 @@ Because media queries provide insights into the capabilities—and by extension, Because of this potential, a browser may opt to fudge the returned values in some manner in order to prevent them from being used to precisely identify a computer. A browser might also offer additional measures in this area; for example, if Firefox's "Resist Fingerprinting" setting is enabled, many media queries report default values rather than values representing the actual device state. -## Formal syntax - -{{csssyntax}} - ## Examples ### Testing for print and screen media types diff --git a/files/en-us/web/css/@view-transition/index.md b/files/en-us/web/css/@view-transition/index.md index da57fa751b396bd..6ad0a66fef23bf1 100644 --- a/files/en-us/web/css/@view-transition/index.md +++ b/files/en-us/web/css/@view-transition/index.md @@ -49,7 +49,7 @@ The `@view-transition` at-rule is specified in the CSS for both your current and } ``` -In addition to the `@view-transition` at-rule, we define two {{cssxref("@keyframe")}} animations and use the {{cssxref("animation")}} shorthand property to apply those keyframe animations to the elements in the outbound ({{cssxref("::view-transition-old()")}}) and inbound ({{cssxref("::view-transition-new()")}}) pages that we want to animate. +In addition to the `@view-transition` at-rule, we use the {{cssxref("@keyframes")}} at-rule to define two keyframe animations and use the {{cssxref("animation")}} shorthand property to apply those keyframe animations to the elements in the outbound ({{cssxref("::view-transition-old()")}}) and inbound ({{cssxref("::view-transition-new()")}}) pages that we want to animate. ```css /* Create a custom animation */ diff --git a/files/en-us/web/css/_colon_target/index.md b/files/en-us/web/css/_colon_target/index.md index 4d0e44edfc3bdd2..45c2ede5cb1b865 100644 --- a/files/en-us/web/css/_colon_target/index.md +++ b/files/en-us/web/css/_colon_target/index.md @@ -7,25 +7,25 @@ browser-compat: css.selectors.target {{CSSRef}} -The **`:target`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents a unique element (the _target element_) with an [`id`](/en-US/docs/Web/HTML/Global_attributes/id) matching the URL's fragment. +The **`:target`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) selects the _target element of the document_. When the document is loaded, the target element is derived using the document's [URL fragment identifier](/en-US/docs/Web/URI/Fragment#fragment). ```css -/* Selects an element with an ID matching the current URL's fragment */ +/* Selects document's target element */ :target { border: 2px solid black; } ``` -For example, the following URL has a fragment (denoted by the _#_ sign) that points to an element called `section2`: +For example, the following URL has a fragment identifier (denoted by the _#_ sign) that marks the element with the [`id`](/en-US/docs/Web/HTML/Global_attributes/id) of `setup` as the document's target element: ```url -http://www.example.com/index.html#section2 +http://www.example.com/help/#setup ``` The following element would be selected by a `:target` selector when the current URL is equal to the above: ```html -
    Example
    +
    Installation instructions
    ``` ## Syntax @@ -36,6 +36,12 @@ The following element would be selected by a `:target` selector when the current } ``` +## Description + +When an HTML document loads, the browser sets its target element. The element is identified using the URL fragment identifier. Without the URL fragment identifier, the document has no target element. The `:target` pseudo-class allows styling the document's target element. The element could be focused, highlighted, animated, etc. + +The target element is set at document load and [`history.back()`](/en-US/docs/Web/API/History/back), [`history.forward()`](/en-US/docs/Web/API/History/forward), and [`history.go()`](/en-US/docs/Web/API/History/forward) method calls. But it is _not_ changed when [`history.pushState()`](/en-US/docs/Web/API/History/pushState) and [`history.replaceState()`](/en-US/docs/Web/API/History/replaceState) methods are called. + > [!NOTE] > Due to [a possible bug in the CSS specification](https://discourse.wicg.io/t/target-css-does-not-work-because-shadowroot-does-not-set-a-target-element/2070/), `:target` doesn't work within a [web component](/en-US/docs/Web/API/Web_components) because the [shadow root](/en-US/docs/Web/API/ShadowRoot) doesn't pass the target element down to the shadow tree. @@ -61,12 +67,12 @@ The `:target` pseudo-class can be used to highlight the portion of a page that h

    My Fun Article

    - You can target this paragraph using a URL fragment. Click on the link - above to try out! + You can target this paragraph using a URL fragment. Click on the first + link above to try out!

    - This is another paragraph, also accessible from the links above. Isn't - that delightful? + This is another paragraph, also accessible from the second link above. + Isn't that delightful?

    ``` diff --git a/files/en-us/web/css/_doublecolon_details-content/index.md b/files/en-us/web/css/_doublecolon_details-content/index.md new file mode 100644 index 000000000000000..7bd746fa0dc0004 --- /dev/null +++ b/files/en-us/web/css/_doublecolon_details-content/index.md @@ -0,0 +1,95 @@ +--- +title: "::details-content" +slug: Web/CSS/::details-content +page-type: css-pseudo-element +status: + - experimental +browser-compat: css.selectors.details-content +--- + +{{CSSRef}}{{SeeCompatTable}} + +The **`::details-content`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents the expandable/collapsible contents of a {{HTMLElement("details")}} element. + +[//]: # '{{EmbedInteractiveExample("pages/tabbed/pseudo-element-details-content.html", "tabbed-shorter")}}' + +## Syntax + +```css +selector::details-content +``` + +## Examples + +### Basic example + +In this example the `::details-content` pseudo-element is used to set a {{cssxref("background-color")}} on the content of the {{HTMLElement("details")}} element. + +#### HTML + +```html +
    + Click me +

    Here is some content

    +
    +``` + +#### CSS + +```css +details::details-content { + background-color: #a29bfe; +} +``` + +#### Result + +{{EmbedLiveSample("Basic_example", "100%", 150)}} + +### Transition example + +In this example the `::details-content` pseudo-element is used to set a {{cssxref("transition")}} on the content of the {{HTMLElement("details")}} element so that it smoothly fades into view when expanded, and fades out again when collapsed. To achieve this, two separate transitions are specified inside the `transition` shorthand property: + +- The {{cssxref("opacity")}} property is given a basic transition over `600ms` to create the fade-in/fade-out effect. +- The {{cssxref("content-visibility")}} property (which is toggled between `hidden` and `visible` when the `
    ` content is expanded/collapsed) is also given a basic `600ms` transition, but with the {{cssxref("transition-behavior")}} value `allow-discrete` specified. This opts the browser into having a transition started on `content-visibility`, the animation behavior of which is [discrete](/en-US/docs/Web/CSS/CSS_animated_properties#discrete). The effect is that the content is visible for the entire duration of the transition, allowing other transitions to be seen. If this transition was not included, the content would immediately disappear when the `
    ` content was collapsed — you wouldn't see the smooth fade-out. + +#### HTML + +```html +
    + Click me +

    Here is some content

    +
    +``` + +#### CSS + +```css +details::details-content { + opacity: 0; + transition: + opacity 600ms, + content-visibility 600ms allow-discrete; +} + +details[open]::details-content { + opacity: 1; +} +``` + +#### Result + +{{EmbedLiveSample("Transition_example", "100%", 150)}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [`
    `](/en-US/docs/Web/HTML/Element/details) +- [``](/en-US/docs/Web/HTML/Element/summary) diff --git a/files/en-us/web/css/_doublecolon_placeholder/index.md b/files/en-us/web/css/_doublecolon_placeholder/index.md index ace5ca8d97f121a..6ed455ad0e8df6a 100644 --- a/files/en-us/web/css/_doublecolon_placeholder/index.md +++ b/files/en-us/web/css/_doublecolon_placeholder/index.md @@ -89,6 +89,7 @@ input::placeholder { color: red; font-size: 1.2em; font-style: italic; + opacity: 0.5; } ``` @@ -98,30 +99,41 @@ input::placeholder { ### Opaque text -Some browsers (such as Firefox) set the default {{cssxref("opacity")}} of placeholders to something less than 100%. If you want fully opaque placeholder text, set `opacity` to `1`. +Some browsers make placeholder text less opaque. If you want fully opaque text, then set the {{CSSXref("color")}} property value explicitly. The [`currentColor`](/en-US/docs/Web/CSS/color_value#currentcolor_keyword) value can be used to have the same color as the corresponding input element. #### HTML ```html - - + + + ``` #### CSS ```css -::placeholder { +input { + font-weight: bold; color: green; } -.force-opaque::placeholder { - opacity: 1; +.explicit-color::placeholder { + /* use the same color as input element to avoid the browser set default color */ + color: currentColor; +} + +.opacity-change::placeholder { + /* less opaque text */ + color: color-mix(in srgb, currentColor 70%, transparent); } ``` #### Result -{{EmbedLiveSample("Opaque_text", 200, 60)}} +{{EmbedLiveSample("default_color", 200, 60)}} + +> [!NOTE] +> Note that browsers use different default colors for placeholder text. For example, Firefox uses the input element's color with 54% opacity, and Chrome uses `darkgray` color. If you want consistent placeholder text color across the browsers, then set the `color` explicitly. ## Specifications diff --git a/files/en-us/web/css/align-items/index.md b/files/en-us/web/css/align-items/index.md index 93d41aa8fc95d42..55753464726b85b 100644 --- a/files/en-us/web/css/align-items/index.md +++ b/files/en-us/web/css/align-items/index.md @@ -55,7 +55,7 @@ align-items: unset; - In absolutely-positioned layouts, the keyword behaves like `start` on _replaced_ absolutely-positioned boxes, and as `stretch` on _all other_ absolutely-positioned boxes. - In static position of absolutely-positioned layouts, the keyword behaves as `stretch`. - For flex items, the keyword behaves as `stretch`. - - For grid items, this keyword leads to a behavior similar to the one of `stretch`, except for boxes with an {{glossary("aspect ratio")}} or an intrinsic sizes where it behaves like `start`. + - For grid items, this keyword leads to a behavior similar to the one of `stretch`, except for boxes with an {{glossary("aspect ratio")}} or an intrinsic size where it behaves like `start`. - The property doesn't apply to block-level boxes, and to table cells. - `center` diff --git a/files/en-us/web/css/align-self/index.md b/files/en-us/web/css/align-self/index.md index 56c1ab8081bface..0d06b47b3712891 100644 --- a/files/en-us/web/css/align-self/index.md +++ b/files/en-us/web/css/align-self/index.md @@ -60,7 +60,7 @@ align-self: unset; - In absolutely-positioned layouts, the keyword behaves like `start` on _replaced_ absolutely-positioned boxes, and as `stretch` on _all other_ absolutely-positioned boxes. - In static position of absolutely-positioned layouts, the keyword behaves as `stretch`. - For flex items, the keyword behaves as `stretch`. - - For grid items, this keyword leads to a behavior similar to the one of `stretch`, except for boxes with an {{glossary("aspect ratio")}} or an intrinsic sizes where it behaves like `start`. + - For grid items, this keyword leads to a behavior similar to the one of `stretch`, except for boxes with an {{glossary("aspect ratio")}} or an intrinsic size where it behaves like `start`. - The property doesn't apply to block-level boxes, and to table cells. - `self-start` diff --git a/files/en-us/web/css/alignment-baseline/index.md b/files/en-us/web/css/alignment-baseline/index.md new file mode 100644 index 000000000000000..ed2a53764fd1d30 --- /dev/null +++ b/files/en-us/web/css/alignment-baseline/index.md @@ -0,0 +1,165 @@ +--- +title: alignment-baseline +slug: Web/CSS/alignment-baseline +page-type: css-property +browser-compat: css.properties.alignment-baseline +--- + +{{CSSRef}} + +The **`alignment-baseline`** [CSS](/en-US/docs/Web/CSS) property specifies the specific [baseline](/en-US/docs/Glossary/Baseline/Typography) used to align the box's text and inline-level contents. **Baseline alignment** is the relationship among the baselines of multiple alignment subjects within an alignment context. When performing baseline alignment, the `alignment-baseline` property value specifies which baseline of the box is aligned to the corresponding baseline of its alignment context. + +> [!NOTE] +> The `alignment-baseline` property only has an effect on inline-level boxes, flex items, grid items, table cells, and the {{SVGElement("text")}}, {{SVGElement("textPath")}}, and {{SVGElement("tspan")}} SVG elements. If present, it overrides the shape's {{SVGAttr("alignment-baseline")}} attribute. + +In an inline formatting context, inline-level box fragments and glyphs share an alignment context established by their parent inline box fragment along its inline axis. In SVG text layout, these values instead specify the baseline that is aligned to the SVG current text position. + +## Syntax + +```css +/* Initial value */ +alignment-baseline: baseline; + +/* Keyword values */ +alignment-baseline: alphabetic; +alignment-baseline: central; +alignment-baseline: ideographic; +alignment-baseline: mathematical; +alignment-baseline: middle; +alignment-baseline: text-bottom; +alignment-baseline: text-top; + +/* Mapped values */ +alignment-baseline: text-before-edge; /* text-top */ +alignment-baseline: text-after-edge; /* text-bottom */ + +/* Deprecated values */ +alignment-baseline: auto; +alignment-baseline: before-edge; +alignment-baseline: after-edge; +alignment-baseline: hanging; + +/* Global values */ +alignment-baseline: inherit; +alignment-baseline: initial; +alignment-baseline: revert; +alignment-baseline: revert-layer; +alignment-baseline: unset; +``` + +### Values + +- `baseline` + + - : Use the {{cssxref("dominant-baseline")}} value of the parent. + +- `alphabetic` + + - : Used in writing Latin, Cyrillic, Greek, and many other scripts; matches the box's alphabetic baseline to that of its parent, corresponding to the bottom of most, but not all characters. + +- `central` + + - : Matches the box's central baseline to the central baseline of its parent, corresponding to the ideographic central baseline, halfway between the ideographic-under and ideographic-over baselines. + +- `ideographic` + + - : Matches the box's ideographic character face under-side baseline to that of its parent, with the derived baseline-table constructed using the ideographic baseline-table in the font. + +- `mathematical` + + - : Matches the box's mathematical baseline to that of its parent, corresponding to the center baseline around which mathematical characters are designed. + +- `middle` + + - : Aligns the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent. Uses the x-middle baselines; except under [`text-orientation: upright;`](/en-US/docs/Web/CSS/text-orientation) (where the alphabetic and x-height baselines are essentially meaningless), in which case it uses the `central` baseline instead. + +- `text-bottom` + + - : Matches the bottom of the box to the top of the parent's content area, using the line-under edge of an inline's content box. + +- `text-top` + - : Matches the top of the box to the top of the parent's content area; the line-over edge of an inline's content box. + +> [!NOTE] +> In SVG2, the `auto`, `before-edge`, and `after-edge` were deprecated and `text-before-edge` is an alias for `text-top`, and `text-after-edge` is an alias for `text-bottom`. These keywords should not be used as part of the {{cssxref("vertical-align")}} shorthand property. Browsers support `auto` as a synonym for `baseline` and `hanging`, wherein the alignment-point of the object being aligned is aligned with the "hanging" baseline of the parent text content element, but neither is part of the specification. + +## Formal definition + +{{CSSInfo}} + +## Formal syntax + +{{csssyntax}} + +## Example + +```html + + alphabetic + central + hanging + ideographic + mathematical + middle + text-bottom + text-top + + baseline + baseline + baseline + baseline + +``` + +```css +text { + font-size: 20px; + alignment-baseline: baseline; +} +text:nth-of-type(1) { + alignment-baseline: alphabetic; +} +text:nth-of-type(2) { + alignment-baseline: central; +} +text:nth-of-type(3) { + alignment-baseline: hanging; +} +text:nth-of-type(4) { + alignment-baseline: ideographic; +} +text:nth-of-type(5) { + alignment-baseline: mathematical; +} +text:nth-of-type(6) { + alignment-baseline: middle; +} +text:nth-of-type(7) { + alignment-baseline: text-bottom; +} +text:nth-of-type(8) { + alignment-baseline: text-top; +} +``` + +{{EmbedLiveSample("Example", "750", "220")}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("dominant-baseline")}} +- {{SVGAttr("alignment-baseline")}} SVG attribute +- [CSS inline layout](/en-US/docs/Web/CSS/CSS_inline_layout) module +- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module diff --git a/files/en-us/web/css/at-rule/index.md b/files/en-us/web/css/at-rule/index.md index ed0d72dd796bec8..45667a5ce8cb759 100644 --- a/files/en-us/web/css/at-rule/index.md +++ b/files/en-us/web/css/at-rule/index.md @@ -26,9 +26,9 @@ Statement at-rules end in a semicolon. There are several statement at-rules, des - {{cssxref("@charset")}} - : An algorithm (has the syntactic form of an at-rule, but isn't a definition) that determines the fallback character set used by the style sheet ([CSS Syntax](/en-US/docs/Web/CSS/CSS_syntax)). - {{cssxref("@import")}} - - : Tells the CSS engine to include an external style sheet ([CSS cascade and inheritance](/en-US/docs/Web/CSS/CSS_cascade)). + - : Tells the CSS engine to include an external style sheet ([CSS cascading and inheritance](/en-US/docs/Web/CSS/CSS_cascade)). - {{cssxref("@layer")}} - - : Defines the order of precedence in case of multiple cascade layers ([CSS cascade and inheritance](/en-US/docs/Web/CSS/CSS_cascade)). Also used as a [block at-rule](#layer_2) to define a layer's styles. + - : Defines the order of precedence in case of multiple cascade layers ([CSS cascading and inheritance](/en-US/docs/Web/CSS/CSS_cascade)). Also used as a [block at-rule](#layer_2) to define a layer's styles. - {{cssxref("@namespace")}} - : Defines a default namespace for a style sheet or a namespace prefix that a selector only matches if the namespace and other selector components match ([CSS namespaces](/en-US/docs/Web/CSS/CSS_namespaces)). @@ -52,7 +52,7 @@ Block at-rules end in a `{}`-block that contain nested rules, other at-rules, or - {{cssxref("@keyframes")}} (and the `@-webkit-keyframes` alias) - : Define a named animation by describing defining CSS styles for intermediate steps (or keyframes) in the animation sequence ([CSS animations](/en-US/docs/Web/CSS/CSS_animations)). - {{cssxref("@layer")}} - - : Creates a named cascade layer with the CSS rules for that layer inside ([CSS cascade and inheritance](/en-US/docs/Web/CSS/CSS_cascade)). Also used as a [statement at-rule](#layer) to define the order of precedence in case of multiple cascade layers + - : Creates a named cascade layer with the CSS rules for that layer inside ([CSS cascading and inheritance](/en-US/docs/Web/CSS/CSS_cascade)). Also used as a [statement at-rule](#layer) to define the order of precedence in case of multiple cascade layers - {{cssxref("@media")}} - : A conditional group rule that applies its content if the device meets the criteria of the condition defined using a _media query_ ([CSS conditional rules](/en-US/docs/Web/CSS/CSS_conditional_rules)). - {{cssxref("@page")}} @@ -62,7 +62,7 @@ Block at-rules end in a `{}`-block that contain nested rules, other at-rules, or - {{cssxref("@property")}} - : Defines a [CSS custom property](/en-US/docs/Web/CSS/Using_CSS_custom_properties), allowing for property type checking and constraining, setting default values, and defining whether a custom property can inherit values or not ([CSS custom properties for cascading variables](/en-US/docs/Web/CSS/CSS_cascading_variables)). - {{cssxref("@scope")}} - - : Defines a scope in which to apply them to selected elements and the styles to apply to the elements in that scope ([CSS cascade and inheritance](/en-US/docs/Web/CSS/CSS_cascade)). + - : Defines a scope in which to apply them to selected elements and the styles to apply to the elements in that scope ([CSS cascading and inheritance](/en-US/docs/Web/CSS/CSS_cascade)). - {{cssxref("@starting-style")}} - : Define the starting property values for an element to transition from when the element receives its first style update, such as when transitioning from `display: none` ([CSS transitions](/en-US/docs/Web/CSS/CSS_transitions)). - {{cssxref("@supports")}} diff --git a/files/en-us/web/css/attr/index.md b/files/en-us/web/css/attr/index.md index 7c1f4dca24fa130..f020515c40cc6d8 100644 --- a/files/en-us/web/css/attr/index.md +++ b/files/en-us/web/css/attr/index.md @@ -8,9 +8,9 @@ browser-compat: css.types.attr {{CSSRef}} > [!NOTE] -> The `attr()` function can be used with any CSS property, but support for properties other than {{CSSxRef("content")}} is experimental, and support for the type-or-unit parameter is sparse. +> The `attr()` function can be used with any CSS property, but support for properties other than {{CSSxRef("content")}} is experimental. -The **`attr()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) is used to retrieve the value of an attribute of the selected element and use it in the stylesheet. It can also be used on [pseudo-elements](/en-US/docs/Web/CSS/Pseudo-elements), in which case the value of the attribute on the pseudo-element's originating element is returned. +The **`attr()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) is used to retrieve the value of an attribute of the selected element and use it in a property value, similar to how the {{cssxref("var", "var()")}} function substitutes a custom property value. It can also be used with [pseudo-elements](/en-US/docs/Web/CSS/Pseudo-elements), in which case the attribute's value on the pseudo-element's originating element is returned. {{EmbedInteractiveExample("pages/tabbed/function-attr.html", "tabbed-shorter")}} @@ -18,130 +18,170 @@ The **`attr()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_F ```css /* Basic usage */ -attr(data-count); -attr(title); +attr(data-count) +attr(href) /* With type */ -attr(src url); -attr(data-count number); -attr(data-width px); +attr(data-width px) +attr(data-size rem) +attr(data-name string) +attr(id type()) +attr(data-count type()) +attr(data-size type( | )) /* With fallback */ -attr(data-count number, 0); -attr(src url, ""); -attr(data-width px, inherit); -attr(data-something, "default"); +attr(data-count type(), 0) +attr(data-width px, inherit) +attr(data-something, "default") ``` -### Values +### Parameters -- `attribute-name` - - : The name of an attribute on the HTML element referenced in the CSS. -- `` +The `attr()` function's syntax is as follows: - - : A keyword representing either the type of the attribute's value, or its unit, as in HTML some attributes have implicit units. If the use of `` as a value for the given attribute is invalid, the `attr()` expression will be invalid too. If omitted, it defaults to `string`. The list of valid values are: +```plain +attr( ? , ?) +``` - - `string` +The parameters are: - - : The attribute value is treated as a CSS {{CSSxRef("<string>")}}. It is NOT reparsed, and in particular the characters are used as-is instead of CSS escapes being turned into different characters. +- `` + - : The attribute name whose value should be retrieved from the selected HTML element(s). +- `` - Default value: an empty string. + - : Specifies how the attribute value is parsed into a CSS value. This can be the `string` keyword, a `type()` function, or a CSS dimension unit. When omitted, it defaults to `string`. - - `color` + - The `string` keyword parses the value into a CSS string. - - : The attribute value is parsed as a hash (3- or 6-value hash) or a keyword. It must be a valid CSS {{CSSxRef("<string>")}} value. Leading and trailing spaces are stripped. + ```css + attr(data-name string, "stranger") + ``` - Default value: `currentcolor`. + - The `type()` function takes a `` as its argument that specifies what [data type](/en-US/docs/Web/CSS/CSS_Types) to parse the value into. The `` can be {{CSSxRef("<angle>")}}, {{CSSxRef("<color>")}}, {{CSSxRef("<custom-ident>")}}, {{CSSxRef("<image>")}}, {{CSSxRef("<integer>")}}, {{CSSxRef("<length>")}}, {{CSSxRef("<length-percentage>")}}, {{CSSxRef("<number>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<resolution>")}}, {{CSSxRef("<string>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<transform-function>")}}, or a combination thereof. - - `url` + ```css + attr(id type(), none) + attr(data-count type(), 0) + ``` - - : The attribute value is parsed as a string that is used inside a CSS `url()` function. - Relative URL are resolved relatively to the original document, not relatively to the style sheet. - Leading and trailing spaces are stripped. + To accept multiple types, list all allowed ``es in the `type()` function, separated by a `|`. - Default value: the URL `about:invalid` that points to a non-existent document with a generic error condition. + ```css + attr(data-size type( | ), 0px) + ``` - - `integer` + For [security reasons](#limitations_and_security) {{CSSxRef("<url>")}} is not allowed as a ``. - - : The attribute value is parsed as a CSS {{CSSxRef("<integer>")}}. If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used. - Leading and trailing spaces are stripped. + - The `` identifier specifies the unit a numeric value should have (if any). It can be the `%` character (percentage) or a [CSS distance unit](/en-US/docs/Web/CSS/CSS_Values_and_Units#distance_units) such as `px`, `rem`, `deg`, `s`, etc. - Default value: `0`, or, if `0` is not a valid value for the property, the property's minimum value. + ```css + attr(data-size rem) + attr(data-width px, inherit) + attr(data-rotation deg) + ``` - - `number` +- `` + - : The value to be used if the specified attribute is missing or contains an invalid value. - - : The attribute value is parsed as a CSS {{CSSxRef("<number>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. - Leading and trailing spaces are stripped. +### Return value - Default value: `0`, or, if `0` is not a valid value for the property, the property's minimum value. +The return value of `attr()` is the value of the HTML attribute whose name is `` parsed as the given `` or parsed as a CSS string. - - `length` +When an `` is set, `attr()` will try to parse the attribute into that specified `` and return it. If the attribute cannot be parsed into the given ``, the `` will be returned instead. When no `` is set, the attribute will be parsed into a CSS string. - - : The attribute value is parsed as a CSS {{CSSxRef("<length>")}} dimension, that is including the unit (e.g. `12.5em`). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used. - If the given unit is a relative length, `attr()` computes it to an absolute length. - Leading and trailing spaces are stripped. +If no `` is set, the return value will default to an empty string when no `` is set or the [guaranteed-invalid value](/en-US/docs/Glossary/guaranteed_invalid_value) when an `` is set. - Default value: `0`, or, if `0` is not a valid value for the property, the property's minimum value. +## Description - - `em`, `ex`, `px`, `rem`, `vw`, `vh`, `vmin`, `vmax`, `mm`, `cm`, `in`, `pt`, or `pc` +### Limitations and security - - : The attribute value is parsed as a CSS {{CSSxRef("<number>")}}, that is without the unit (e.g. `12.5`), and interpreted as a {{CSSxRef("<length>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. - If the given unit is a relative length, `attr()` computes it to an absolute length. - Leading and trailing spaces are stripped. +The `attr()` function can reference attributes that were never intended by the page author to be used for styling, and might contain sensitive information (for example, a security token used by scripts on the page). In general, this is fine, but it can become a security threat when used in URLs. You therefore can't use `attr()` to dynamically construct URLs. - Default value: `0`, or, if `0` is not a valid value for the property, the property's minimum value. +```html + +help + +``` - - `angle` +Values that use `attr()` get marked as _"`attr()`-tained"_. Using an `attr()`-tainted value as or in a `` makes a declaration become ["invalid at computed value time" or IACVT for short](https://brm.us/iacvt) - - : The attribute value is parsed as a CSS {{CSSxRef("<angle>")}} dimension, that is including the unit (e.g. `30.5deg`). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used. - Leading and trailing spaces are stripped. +### Backwards compatibility - Default value: `0deg`, or, if `0deg` is not a valid value for the property, the property's minimum value. +Generally speaking, the modern `attr()` syntax is backwards-compatible because the old way of using it — without specifying an `` — behaves the same as before. Having `attr(data-attr)` in your code is the same as writing `attr(data-attr type())` or the simpler `attr(data-attr string))`. - - `deg`, `grad`, `rad` +However, there are two edge cases where the modern `attr()` syntax behaves differently from the old syntax. - - : The attribute value is parsed as a CSS {{CSSxRef("<number>")}}, that is without the unit (e.g. `12.5`), and interpreted as an {{CSSxRef("<angle>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. - Leading and trailing spaces are stripped. +In the following snippet, browsers that don't support the modern `attr()` syntax will discard the second declaration because they cannot parse it. The result in those browsers is `"Hello World"`. - Default value: `0deg`, or, if `0deg` is not a valid value for the property, the property's minimum value. +```html +
    +``` - - `time` +```css +div::before { + content: attr(text) " World"; +} +div::before { + content: attr(text) 1px; +} +``` + +In browsers with support for the modern syntax, the output will be … nothing. Those browsers will successfully parse the second declaration but, because it is invalid content for the `content` property, the declaration becomes ["invalid at computed value time" or IACVT for short](https://brm.us/iacvt). - - : The attribute value is parsed as a CSS {{CSSxRef("<time>")}} dimension, that is including the unit (e.g. `30.5ms`). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used. - Leading and trailing spaces are stripped. +To prevent this kind of situation, [feature detection](#feature_detection) is recommended. - Default value: `0s`, or, if `0s` is not a valid value for the property, the property's minimum value. +A second edge case is the following: - - `s`, `ms` +```html +
    +``` - - : The attribute value is parsed as a CSS {{CSSxRef("<number>")}}, that is without the unit (e.g. `12.5`), and interpreted as an {{CSSxRef("<time>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. - Leading and trailing spaces are stripped. +```css +#parent { + --x: attr(data-attr); +} +#child::before { + content: var(--x); +} +``` - Default value: `0s`, or, if `0s` is not a valid value for the property, the property's minimum value. +Browsers without support for modern syntax display the text `"foo"`. In browsers with modern `attr()` support there is no output. - - `frequency` +This is because `attr()` — similar to custom properties that use the `var()` function — get substituted at [computed value time](https://brm.us/iacvt/#custom-properties). With the modern behavior, `--x` first tries to read the `data-attr` attribute from the `#parent` element, which results in an empty string because there is no such attribute on `#parent`. That empty string then gets inherited by the `#child` element, resulting in a `content: ;` declaration being set. - - : The attribute value is parsed as a CSS {{CSSxRef("<frequency>")}} dimension, that is including the unit (e.g. `30.5kHz`). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used. +To prevent this sort of situation, don't pass inherited `attr()` values onto children unless you explicitly want to. - Default value: `0Hz`, or, if `0Hz` is not a valid value for the property, the property's minimum value. +### Feature detection - - `Hz`, `kHz` +You can feature detect support for modern `attr()` syntax using the {{CSSxRef("@supports")}} at-rule. In the test, try to assign advanced `attr()` to a (non-custom) CSS property. - - : The attribute value is parsed as a CSS {{CSSxRef("<number>")}}, that is without the unit (e.g. `12.5`), and interpreted as a {{CSSxRef("<frequency>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. - Leading and trailing spaces are stripped. +For example: - Default value: `0Hz`, or, if `0Hz` is not a valid value for the property, the property's minimum value. +```css +@supports (x: attr(x type(*))) { + /* Browser has modern attr() support */ +} - - `%` +@supports not (x: attr(x type(*))) { + /* Browser does not have modern attr() support */ +} +``` - - : The attribute value is parsed as a CSS {{CSSxRef("<number>")}}, that is without the unit (e.g. `12.5`), and interpreted as a {{CSSxRef("<percentage>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. - If the given value is used as a length, `attr()` computes it to an absolute length. - Leading and trailing spaces are stripped. +We can perform the same check in JavaScript with [`CSS.supports()`](/en-US/docs/Web/API/CSS/supports_static): - Default value: `0%`, or, if `0%` is not a valid value for the property, the property's minimum value. +```js +if (CSS.supports("x: attr(x type(*))")) { + /* Browser has modern attr() support */ +} -- `` - - : The value to be used if the associated attribute is missing or contains an invalid value. If not set, CSS will use the default value defined for each ``. +if (!CSS.supports("x: attr(x type(*))")) { + /* Browser does not have modern attr() support */ +} +``` ## Formal syntax @@ -171,6 +211,32 @@ In this example, we prepend the value of the `data-foo` [`data-*`](/en-US/docs/W {{EmbedLiveSample("content_property", "100%", 50)}} +### Using a fallback value + +{{SeeCompatTable}} + +In this example, we append the value of `data-browser` [`data-*`](/en-US/docs/Web/HTML/Global_attributes/data-*) [global attribute](/en-US/docs/Web/HTML/Global_attributes) to the {{HTMLElement("p")}} element. If the `data-browser` attribute is missing from the {{HTMLElement("p")}} element, we append the _fallback_ value of "**Unknown**". + +#### HTML + +```html +

    My favorite browser is:

    +

    Your favorite browser is:

    +``` + +#### CSS + +```css +p::after { + content: " " attr(data-browser, "Unknown"); + color: tomato; +} +``` + +#### Result + +{{EmbedLiveSample("using_fallback", "100%", 90)}} + ### color value {{SeeCompatTable}} @@ -200,7 +266,7 @@ In this example, we set the CSS value of {{CSSXRef("background-color")}} to the } .background[data-background] { - background-color: attr(data-background color, red); + background-color: attr(data-background type(), red); } ``` @@ -208,31 +274,191 @@ In this example, we set the CSS value of {{CSSXRef("background-color")}} to the {{EmbedLiveSample("color_value", "100%", 50)}} -### using fallback +### Using dimension units {{SeeCompatTable}} -In this example, we append the value of `data-browser` [`data-*`](/en-US/docs/Web/HTML/Global_attributes/data-*) [global attribute](/en-US/docs/Web/HTML/Global_attributes) to the {{HTMLElement("p")}} element. If the `data-browser` attribute is missing from the {{HTMLElement("p")}} element, we append the _fallback_ value of "**Unknown**". +In this example the `data-rotation` attribute is parsed into a `deg` unit, which specifies the element's rotation. #### HTML ```html -

    My favorite browser is:

    -

    Your favorite browser is:

    +
    I am rotated by -3 degrees
    +
    And I by 2 degrees
    +
    And so am I, using the fallback value of 1.5deg
    ``` #### CSS +```css hidden +body { + min-height: 100svh; + display: grid; + place-content: center; + gap: 1em; +} +div { + margin: 0 auto; + border: 1px solid; + border-radius: 0.25em; + padding: 0.5em; +} +``` + ```css -p::after { - content: " " attr(data-browser, "Unknown"); - color: tomato; +div { + width: fit-content; + transform-origin: 50% 50%; + rotate: attr(data-rotation deg, 1.5deg); } ``` #### Result -{{EmbedLiveSample("using_fallback", "100%", 90)}} +{{EmbedLiveSample("using_dimension_units", "100%", 300)}} + +### Parsing `attr()` values as ``s + +{{SeeCompatTable}} + +In this example, the values for the {{cssxref("view-transition-name")}} property are derived from the `id` attribute of the element. The attribute gets parsed into a {{CSSxRef("<custom-ident>")}}, which is what {{cssxref("view-transition-name")}} accepts as a value. + +The resulting values for {{cssxref("view-transition-name")}} are `card-1`, `card-2`, `card-3`, etc. + +#### HTML + +The HTML contains four cards with different `id` attributes and a "Shuffle cards" ` +``` + +```html hidden +
    +

    + You browser does not support advanced attr(). As a result, this + demo won’t do anything. +

    +
    +``` + +#### CSS + +The cards are laid out in a flex container: + +```css +.cards { + display: flex; + flex-direction: row; + gap: 1em; + padding: 1em; +} +``` + +```css hidden +:root { + view-transition-name: none; +} +::view-transition { + pointer-events: none; +} + +@supports (x: attr(x type(*))) { + .warning { + display: none; + } +} + +@layer layout { + .card { + border-radius: 0.25em; + width: 20vw; + max-width: 5em; + aspect-ratio: 1 / 1.6; + background: lightgrey; + + display: grid; + place-content: center; + font-size: 2em; + } + + * { + box-sizing: border-box; + } + + body { + min-height: 100svh; + display: grid; + place-content: center; + } + + button { + justify-self: center; + } +} + +@layer warning { + .warning { + padding: 1em; + border: 1px solid #ccc; + background: rgba(255 255 205 / 0.8); + text-align: center; + order: -1; + margin: 1em; + } + + .warning > :first-child { + margin-top: 0; + } + .warning > :last-child { + margin-bottom: 0; + } +} +``` + +On each card, the `attr()` function gets the `id` attribute and parses it into a {{CSSxRef("<custom-ident>")}}, which is used as the value for the {{cssxref("view-transition-name")}} property. When there is no `id` set on a card, the fallback value `none` is used instead. + +```css +.card { + view-transition-name: attr(id type(), none); + view-transition-class: card; +} +``` + +#### JavaScript + +When the `