diff --git a/.github/workflows/pr-review-companion.yml b/.github/workflows/pr-review-companion.yml index ac3ea325f57e526..00a204522776507 100644 --- a/.github/workflows/pr-review-companion.yml +++ b/.github/workflows/pr-review-companion.yml @@ -7,7 +7,7 @@ name: PR review companion on: workflow_run: - workflows: ["PR Test"] + workflows: ["PR Test", "PR Test - new CI"] types: - completed diff --git a/.github/workflows/pr-test-new-ci.yml b/.github/workflows/pr-test-new-ci.yml new file mode 100644 index 000000000000000..f9b691714ab5ebf --- /dev/null +++ b/.github/workflows/pr-test-new-ci.yml @@ -0,0 +1,141 @@ +# 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 - new CI + +on: + pull_request: + branches: + - main + +jobs: + tests: + if: github.repository == 'mdn/content' && startsWith(github.event.pull_request.title, '[new-ci]') + 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 + + # 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. + 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 $ARGS + yarn yari-render-html + + 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..f3e8d2e5817b9c5 100644 --- a/.github/workflows/pr-test.yml +++ b/.github/workflows/pr-test.yml @@ -13,7 +13,7 @@ on: jobs: tests: - if: github.repository == 'mdn/content' + if: github.repository == 'mdn/content' && !startsWith(github.event.pull_request.title, '[new-ci]') runs-on: ubuntu-latest # Set the permissions to `read-all`, preventing the workflow from # any accidental write access to the repository. 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/web/api/dommatrixreadonly/flipx/index.md b/files/en-us/web/api/dommatrixreadonly/flipx/index.md index 9f8453d972956c4..8703536604e0ac1 100644 --- a/files/en-us/web/api/dommatrixreadonly/flipx/index.md +++ b/files/en-us/web/api/dommatrixreadonly/flipx/index.md @@ -8,7 +8,7 @@ browser-compat: api.DOMMatrixReadOnly.flipX {{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} -The `flipX()` method of the {{domxref("DOMMatrixReadOnly")}} interface creates a new matrix being the result of the original matrix flipped about the x-axis. +The **`flipX()`** method of the {{domxref("DOMMatrixReadOnly")}} interface creates a new matrix being the result of the original matrix flipped about the x-axis. This is equivalent to multiplying the matrix by `DOMMatrix(-1, 0, 0, 1, 0, 0)`. The original matrix is not modified. ## Syntax @@ -18,7 +18,7 @@ The `flipX()` method of the {{domxref("DOMMatrixReadOnly")}} interface creates a ### Return value -Returns a [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix) containing a new matrix being the result of the original matrix flipped about the x-axis, which is equivalent to multiplying the matrix by `DOMMatrix(-1, 0, 0, 1, 0, 0)`. The original matrix is not modified. +Returns a [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix). ## Examples @@ -26,8 +26,6 @@ Returns a [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix) containing a new matrix b In this example, the SVG contains two paths in the shape of a triangle, both drawn to the same position. Note that the x co-ordinate of the viewBox attribute is negative, showing us content from both sides of the x-axis. -The JavaScript first creates an identity matrix, then uses the `flipX()` method to create a new matrix, which is then applied to the blue triangle, inverting it across the x-axis. The red triangle is left in place. - #### HTML ```html @@ -39,6 +37,8 @@ The JavaScript first creates an identity matrix, then uses the `flipX()` method #### JavaScript +The JavaScript first creates an identity matrix, then uses the `flipX()` method to create a new matrix, which is then applied to the blue triangle, inverting it across the x-axis. The red triangle is left in place. + ```js const flipped = document.getElementById("flipped"); const matrix = new DOMMatrixReadOnly(); @@ -57,3 +57,7 @@ flipped.setAttribute("transform", flippedMatrix.toString()); ## Browser compatibility {{Compat}} + +## See also + +- {{domxref("DOMMatrixReadOnly.flipY()")}} diff --git a/files/en-us/web/api/dommatrixreadonly/flipy/index.md b/files/en-us/web/api/dommatrixreadonly/flipy/index.md new file mode 100644 index 000000000000000..79aed18f23db590 --- /dev/null +++ b/files/en-us/web/api/dommatrixreadonly/flipy/index.md @@ -0,0 +1,63 @@ +--- +title: "DOMMatrixReadOnly: flipY() method" +short-title: flipY() +slug: Web/API/DOMMatrixReadOnly/flipY +page-type: web-api-instance-method +browser-compat: api.DOMMatrixReadOnly.flipY +--- + +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} + +The **`flipY()`** method of the {{domxref("DOMMatrixReadOnly")}} interface creates a new matrix being the result of the original matrix flipped about the y-axis. This is equivalent to multiplying the matrix by `DOMMatrix(1, 0, 0, -1, 0, 0)`. The original matrix is not modified. + +## Syntax + +```js-nolint + DOMMatrixReadOnly.flipY() +``` + +### Return value + +A [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix). + +## Examples + +### Inverting a triangle + +In this example, the SVG contains two identical [paths](/en-US/docs/Web/SVG/Attribute/d) in the shape of a triangle; they are both drawn to have the same size and position. The viewbox has a negative y value showing us content from both sides of the y-axis. This enables the flipped triangle to be withing the viewport after it is transformed. + +#### HTML + +```html + + + + +``` + +#### JavaScript + +The JavaScript creates an [identity matrix](/en-US/docs/Web/API/DOMMatrixReadOnly/isIdentity), then uses the `flipY()` method to create a new matrix, which is then applied to the blue triangle, inverting it across the y-axis. The red triangle is left in place. + +```js +const flipped = document.getElementById("flipped"); +const matrix = new DOMMatrix(); +const flippedMatrix = matrix.flipY(); +flipped.setAttribute("transform", flippedMatrix.toString()); +``` + +#### Result + +{{EmbedLiveSample('Inverting a triangle', '', '240')}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("DOMMatrixReadOnly.flipX()")}} diff --git a/files/en-us/web/api/popstateevent/hasuavisualtransition/index.md b/files/en-us/web/api/popstateevent/hasuavisualtransition/index.md index 4564ba1d9a923d1..ab3a01f77d3b649 100644 --- a/files/en-us/web/api/popstateevent/hasuavisualtransition/index.md +++ b/files/en-us/web/api/popstateevent/hasuavisualtransition/index.md @@ -3,12 +3,10 @@ title: "PopStateEvent: hasUAVisualTransition property" short-title: hasUAVisualTransition slug: Web/API/PopStateEvent/hasUAVisualTransition page-type: web-api-instance-property -status: - - experimental browser-compat: api.PopStateEvent.hasUAVisualTransition --- -{{APIRef("History API")}}{{SeeCompatTable}} +{{APIRef("History API")}} The **`hasUAVisualTransition`** read-only property of the {{domxref("PopStateEvent")}} interface returns `true` if the user agent performed a visual transition for this navigation before dispatching this event, or `false` otherwise. diff --git a/files/en-us/web/api/popstateevent/index.md b/files/en-us/web/api/popstateevent/index.md index a95670134891108..5a85263f02c2d8f 100644 --- a/files/en-us/web/api/popstateevent/index.md +++ b/files/en-us/web/api/popstateevent/index.md @@ -28,7 +28,7 @@ _This interface also inherits the properties of its parent, {{domxref("Event")}} - {{domxref("PopStateEvent.state")}} {{ReadOnlyInline}} - : Returns a copy of the information that was provided to `pushState()` or `replaceState()`. -- {{domxref("PopStateEvent.hasUAVisualTransition", "hasUAVisualTransition")}} {{ReadOnlyInline}} {{Experimental_Inline}} +- {{domxref("PopStateEvent.hasUAVisualTransition", "hasUAVisualTransition")}} {{ReadOnlyInline}} - : Returns `true` if the user agent performed a visual transition for this navigation before dispatching this event, or `false` otherwise. ## Instance methods 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/_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/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/css_box_model/index.md b/files/en-us/web/css/css_box_model/index.md index 33da9a05e3d9975..58b089d0432abf7 100644 --- a/files/en-us/web/css/css_box_model/index.md +++ b/files/en-us/web/css/css_box_model/index.md @@ -9,7 +9,7 @@ spec-urls: {{CSSRef}} -The **CSS box model** module defines the `height`, `width`, `margin`, and `padding` properties, which along with [border properties](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders) make up the CSS [box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model). +The **CSS box model** module defines the `margin` and `padding` properties, which along with the [height](/en-US/docs/Web/CSS/CSS_box_sizing), [width](/en-US/docs/Web/CSS/CSS_box_sizing) and [border properties](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders), make up the CSS [box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model). Every visible element on a webpage is a box laid out according to the [visual formatting model](/en-US/docs/Web/CSS/Visual_formatting_model). CSS properties define their size, position, and stacking level, with the box model properties (and others) defining the extrinsic size of each box, and the space around them. @@ -17,30 +17,23 @@ Each box has a rectangular content area, inside which any text, images, and othe ![The components of the CSS box model](boxmodel.png) -The CSS box model module defines physical (or "page relative") properties such as `width` and `margin-top`. Flow-relative properties such as `inline-size` and `margin-block-start` (which relate to text direction) are defined in [Logical Properties and Values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values). The box model module is extended by the [CSS box sizing module](/en-US/docs/Web/CSS/CSS_box_sizing), which introduces the {{glossary("intrinsic size")}} value and enables defining {{glossary("aspect ratio")}}s for elements that are auto-sized in at least one dimension. +The CSS box model module defines physical (or "page relative") properties such as `margin-top` and `padding-top`. Flow-relative properties such as `margin-block-start` and `margin-inline-start` (which relate to text direction) are defined in [Logical Properties and Values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values). The box model module is extended by the [CSS box sizing module](/en-US/docs/Web/CSS/CSS_box_sizing), which introduces the {{glossary("intrinsic size")}} value and enables defining {{glossary("aspect ratio")}} for elements that are auto-sized in at least one dimension. ## Reference ### Properties -- {{cssxref("box-sizing")}} -- {{cssxref("height")}} -- {{cssxref("margin")}} +- {{cssxref("margin")}} shorthand - {{cssxref("margin-bottom")}} - {{cssxref("margin-left")}} - {{cssxref("margin-right")}} - {{cssxref("margin-top")}} - {{cssxref("margin-trim")}} -- {{cssxref("max-height")}} -- {{cssxref("max-width")}} -- {{cssxref("min-height")}} -- {{cssxref("min-width")}} -- {{cssxref("padding")}} +- {{cssxref("padding")}} shorthand - {{cssxref("padding-bottom")}} - {{cssxref("padding-left")}} - {{cssxref("padding-right")}} - {{cssxref("padding-top")}} -- {{cssxref("width")}} ### Data types @@ -107,15 +100,18 @@ The CSS box model module defines physical (or "page relative") properties such a - {{CSSxRef("border-inline-width")}} - [CSS box sizing](/en-US/docs/Web/CSS/CSS_box_sizing) module - {{cssxref("aspect-ratio")}} + - {{cssxref("box-sizing")}} - {{cssxref("contain-intrinsic-block-size")}} - {{cssxref("contain-intrinsic-height")}} - {{cssxref("contain-intrinsic-inline-size")}} - {{cssxref("contain-intrinsic-size")}} - {{cssxref("contain-intrinsic-width")}} + - {{cssxref("height")}} - {{cssxref("max-height")}} - {{cssxref("max-width")}} - {{cssxref("min-height")}} - {{cssxref("min-width")}} + - {{cssxref("width")}} - [CSS overflow](/en-US/docs/Web/CSS/CSS_overflow) module - {{CSSxRef("overflow")}} shorthand - {{CSSxRef("overflow-block")}} diff --git a/files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md b/files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md index 3e29e72fa4adc59..fc85d54f56c87f0 100644 --- a/files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md +++ b/files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md @@ -137,8 +137,7 @@ The live sample below has `flex-direction` set to `row-reverse`. Try the other v While flexbox is a one dimensional model, it is possible to make flex items wrap across multiple lines. If you do this, you should consider each line as a new flex container. Any space distribution will happen across each line, without reference to the previous or subsequent lines. - -To cause wrapping behavior add the property {{cssxref("flex-wrap")}} with a value of `wrap`. Now, if your items are too large to all display in one line, they will wrap onto another line. The live sample below contains items that have been given a `width`. The total width of the items is too wide for the flex container. As `flex-wrap` is set to `wrap`, the items wrap across multiple lines. If you set it to `nowrap`, which is the initial value, they will shrink to fit the container. They shrink because they are using initial flexbox values, including `flex-shrink: 1`, that allows items to shrink. Using `nowrap` would cause an [overflow](/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content) if the items were not able to shrink, or could not shrink small enough to fit. +To cause wrapping behavior add the property {{cssxref("flex-wrap")}} with a value of `wrap`. Now, if your items are too large to all display in one line, they will wrap onto another line. The live sample below contains items that have been given a `width`. The total width of the items is too wide for the flex container. As `flex-wrap` is set to `wrap`, the items wrap across multiple lines. If you set it to `nowrap`, which is the initial value, they will shrink to fit the container. They shrink because they are using initial flexbox values, including `flex-shrink: 1`, that allows items to shrink. Using `nowrap` would cause an [overflow](/en-US/docs/Learn_web_development/Core/Styling_basics/Overflow) if the items were not able to shrink, or could not shrink small enough to fit. ```html live-sample___flex-wrap
diff --git a/files/en-us/web/css/css_functions/index.md b/files/en-us/web/css/css_functions/index.md index 86bbed582529a86..8f9ff12a86a3cc4 100644 --- a/files/en-us/web/css/css_functions/index.md +++ b/files/en-us/web/css/css_functions/index.md @@ -97,6 +97,8 @@ Each of the pages below contains detailed information about a math function's sy - {{CSSxRef("calc", "calc()")}} - : Performs basic arithmetic calculations on numerical values. +- {{CSSxRef("calc-size", "calc-size()")}} + - : Perform calculations on intrinsic size values such as `auto`, `fit-content`, and `max-content`, which are not supported by the `calc()` function. ### Comparison functions @@ -268,6 +270,8 @@ The {{CSSxRef("<basic-shape>")}} CSS [data type](/en-US/docs/Web/CSS/CSS_T - : Accepts an SVG path string to enable a shape to be drawn. - {{CSSxRef("basic-shape/shape", "shape()")}} - : Accepts a comma-separated list of commands defining the shape to be drawn. +- {{CSSxRef("ray", "ray()")}} + - : Valid with `offset-path` only, it defines the line segment an animated element can follow. ## Reference functions @@ -277,7 +281,7 @@ The following functions are used as a value of properties to reference a value d - : Uses the attributes defined on HTML element. - {{CSSxRef("env", "env()")}} - : Uses the user-agent defined as environment variable. -- {{cssxref("url_value", "<url>")}} +- {{cssxref("url_function", "url()")}} - : Uses a file from the specified URL. - {{CSSxRef("var", "var()")}} - : Uses the custom property value instead of any part of a value of another property. @@ -312,7 +316,7 @@ CSS font functions are used with the {{CSSxRef("font-variant-alternates")}} prop ## Easing functions -The following functions are used as a value in transition and animation properties: +The {{CSSxRef("<easing-function>")}} CSS [data type](/en-US/docs/Web/CSS/CSS_Types) represents a mathematical function. It is used in transition and animation properties: - {{cssxref("easing-function/linear", "linear()")}} - : Easing function that interpolates linearly between its points. diff --git a/files/en-us/web/css/css_inline_layout/index.md b/files/en-us/web/css/css_inline_layout/index.md index 38ba4388e21e303..ae57ebfcab73e06 100644 --- a/files/en-us/web/css/css_inline_layout/index.md +++ b/files/en-us/web/css/css_inline_layout/index.md @@ -13,6 +13,7 @@ The **CSS inline layout** module defines the block-axis alignment and sizing of ### Properties +- {{cssxref("alignment-baseline")}} - {{cssxref("dominant-baseline")}} - {{cssxref("initial-letter")}} - {{cssxref("line-height")}} @@ -21,7 +22,7 @@ The **CSS inline layout** module defines the block-axis alignment and sizing of - {{cssxref("text-box")}} shorthand - {{cssxref("vertical-align")}} -The specification also defines the `alignment-baseline`, `baseline-shift`, `baseline-source`, `initial-letter-align`, `initial-letter-wrap`, `inline-sizing`, and `line-fit-edge` properties, which are not yet supported by any browser. +The specification also defines the `baseline-shift`, `baseline-source`, `initial-letter-align`, `initial-letter-wrap`, `inline-sizing`, and `line-fit-edge` properties, which are not yet supported by any browser. ### Glossary terms diff --git a/files/en-us/web/css/ratio/index.md b/files/en-us/web/css/ratio/index.md index 5aa4894c51ba7de..bd0ab8aaf7da196 100644 --- a/files/en-us/web/css/ratio/index.md +++ b/files/en-us/web/css/ratio/index.md @@ -8,12 +8,14 @@ spec-urls: https://drafts.csswg.org/css-values-4/#ratio-value {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) describes the proportional relationship between a width and height. It is used as a value for the `aspect-ratio` media feature in {{cssxref("@media")}} media queries, the `aspect-ratio` size feature in {{cssxref("@container")}} container queries, and as a value for the CSS {{cssxref("aspect-ratio")}} property. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) describes the proportional relationship between two values. It mostly represents the aspect ratio, which relates width to height. For example, the `` is used as a value for the `aspect-ratio` media feature in {{cssxref("@media")}} media queries, the `aspect-ratio` size feature in {{cssxref("@container")}} container queries, and as a value for the CSS {{cssxref("aspect-ratio")}} property. ## Syntax The `` data type is a {{cssxref("<number>")}} followed by a forward slash ('/', Unicode `U+002F SOLIDUS`) and a second {{cssxref("<number>")}}. Both numbers must be positive. Spaces before and after the slash are optional. The first number represents the width, while the second represents the height. In addition a single {{cssxref("<number>")}} as a value is allowable. +Two ratios are compared using the quotients' numeric values. For example, 16/16 is less than 16/9 because it resolves to 1 while the second resolves to 1.7. This means a tall screen's aspect ratio is smaller than a wide screen's, and portrait images have smaller aspect ratios than landscape images. + ### Common aspect ratios | Ratio | | Usage | diff --git a/files/en-us/web/html/element/summary/index.md b/files/en-us/web/html/element/summary/index.md index 355a186565599bc..4c376e48966eb78 100644 --- a/files/en-us/web/html/element/summary/index.md +++ b/files/en-us/web/html/element/summary/index.md @@ -157,8 +157,9 @@ The CSS includes the `[open]` [attribute selector](/en-US/docs/Web/CSS/Attribute #### HTML ```html-nolint +

Quotes from Helen Keller

+
-

Quotes from Helen Keller

On women's rights

We have prayed, we have coaxed, we have begged, for the vote, with the diff --git a/files/en-us/web/javascript/index.md b/files/en-us/web/javascript/index.md index c16bb79a030e219..27d4180a6cf2f14 100644 --- a/files/en-us/web/javascript/index.md +++ b/files/en-us/web/javascript/index.md @@ -6,7 +6,7 @@ page-type: landing-page {{jsSidebar}} -**JavaScript** (**JS**) is a lightweight interpreted (or [just-in-time](https://en.wikipedia.org/wiki/Just-in-time_compilation) compiled) programming language with {{Glossary("First-class Function", "first-class functions")}}. While it is most well-known as the scripting language for Web pages, [many non-browser environments](https://en.wikipedia.org/wiki/JavaScript#Other_usage) also use it, such as {{Glossary("Node.js")}}, [Apache CouchDB](https://couchdb.apache.org/) and [Adobe Acrobat](https://opensource.adobe.com/dc-acrobat-sdk-docs/acrobatsdk/). JavaScript is a [prototype-based](/en-US/docs/Glossary/Prototype-based_programming), multi-paradigm, [single-threaded](/en-US/docs/Glossary/Thread), [dynamic](/en-US/docs/Glossary/Dynamic_typing) language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles. +**JavaScript** (**JS**) is a lightweight interpreted (or {{Glossary("Just_In_Time_Compilation", "just-in-time compiled")}}) programming language with {{Glossary("First-class Function", "first-class functions")}}. While it is most well-known as the scripting language for Web pages, [many non-browser environments](https://en.wikipedia.org/wiki/JavaScript#Other_usage) also use it, such as {{Glossary("Node.js")}}, [Apache CouchDB](https://couchdb.apache.org/) and [Adobe Acrobat](https://opensource.adobe.com/dc-acrobat-sdk-docs/acrobatsdk/). JavaScript is a [prototype-based](/en-US/docs/Glossary/Prototype-based_programming), multi-paradigm, [single-threaded](/en-US/docs/Glossary/Thread), [dynamic](/en-US/docs/Glossary/Dynamic_typing) language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles. JavaScript's dynamic capabilities include runtime object construction, variable parameter lists, function variables, dynamic script creation (via [`eval`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval)), object introspection (via [`for...in`](/en-US/docs/Web/JavaScript/Reference/Statements/for...in) and [`Object` utilities](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#static_methods)), and source-code recovery (JavaScript functions store their source text and can be retrieved through [`toString()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toString)). diff --git a/files/en-us/web/javascript/reference/operators/in/index.md b/files/en-us/web/javascript/reference/operators/in/index.md index c6c92a078d03c2f..4346ca209f9bcd0 100644 --- a/files/en-us/web/javascript/reference/operators/in/index.md +++ b/files/en-us/web/javascript/reference/operators/in/index.md @@ -36,7 +36,7 @@ prop in object The `in` operator tests if a string or symbol property is present in an object or its prototype chain. If you want to check for only _non-inherited_ properties, use {{jsxref("Object.hasOwn()")}} instead. -A property may be present in an object but have value `undefined`. Therefore, `x in obj` is not the same as `obj.x !== undefined`. To make `in` return `false` after a property is added, use the [`delete`](/en-US/docs/Web/JavaScript/Reference/Operators/delete) operator instead of setting that property's value to `undefined`. +A property may be present in an object but have value `undefined`. Therefore, `"x" in obj` is not the same as `obj.x !== undefined`. To make `in` return `false` after a property is added, use the [`delete`](/en-US/docs/Web/JavaScript/Reference/Operators/delete) operator instead of setting that property's value to `undefined`. You can also use the `in` operator to check whether a particular [private class field or method](/en-US/docs/Web/JavaScript/Reference/Classes/Private_properties) has been defined in an object. The operator returns `true` if the property is defined, and `false` otherwise. This is known as a _branded check_, because it returns `true` if and only if the object was created with that class constructor, after which you can safely access other private properties as well. diff --git a/files/en-us/web/manifest/note_taking/index.md b/files/en-us/web/manifest/note_taking/index.md new file mode 100644 index 000000000000000..d756bbb6dc0438a --- /dev/null +++ b/files/en-us/web/manifest/note_taking/index.md @@ -0,0 +1,48 @@ +--- +title: note_taking +slug: Web/Manifest/note_taking +page-type: web-manifest-member +status: + - experimental +browser-compat: html.manifest.note_taking +--- + +{{QuickLinksWithSubpages("/en-US/docs/Web/Manifest")}}{{SeeCompatTable}} + +The `note_taking` member identifies a web app as a note-taking app and defines related information, for example a URL pointing to functionality for taking a new note. This enables operating systems to integrate the app's note taking functionality, for example including a "New note" option in the app's context menu, or providing the app as an option for taking a note in other apps. + +### Values + +An object, which may contain the following values: + +- `new_note_url` + + - : A string representing the URL the developer would prefer the user agent to load when the user wants to take a new note via the web app. This value is a hint, and different implementations may choose to ignore it or provide it as a choice in appropriate places. The `new_note_url` is parsed with the app's manifest URL as its base URL and is ignored if not within the [scope](/en-US/docs/Web/Manifest/scope) of the manifest. + +## Examples + +```json +{ + "name": "My Note Taking App", + "description": "You can take notes!", + "icons": [ + { + "src": "icon/hd_hi", + "sizes": "128x128" + } + ], + "start_url": "/index.html", + "display": "standalone", + "note_taking": { + "new_note_url": "/new_note.html" + } +} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/svg/attribute/alignment-baseline/index.md b/files/en-us/web/svg/attribute/alignment-baseline/index.md index a9b5818ce5b8b23..45528d508f084b1 100644 --- a/files/en-us/web/svg/attribute/alignment-baseline/index.md +++ b/files/en-us/web/svg/attribute/alignment-baseline/index.md @@ -10,7 +10,7 @@ browser-compat: svg.global_attributes.alignment-baseline The **`alignment-baseline`** attribute specifies how an object is aligned with respect to its parent. This property specifies which baseline of this element is to be aligned with the corresponding baseline of the parent. For example, this allows alphabetic baselines in Roman text to stay aligned across font size changes. It defaults to the baseline with the same name as the computed value of the `alignment-baseline` property. > [!NOTE] -> As a presentation attribute `alignment-baseline` can be used as a CSS property. +> As a presentation attribute, {{cssxref("alignment-baseline")}} can be used as a CSS property. You can use this attribute with the following SVG elements: diff --git a/files/en-us/web/svg/element/script/index.md b/files/en-us/web/svg/element/script/index.md index 5f59b82d472bf5a..b6c74b91db2e760 100644 --- a/files/en-us/web/svg/element/script/index.md +++ b/files/en-us/web/svg/element/script/index.md @@ -55,13 +55,13 @@ Click the circle to change colors. - [`crossorigin`](/en-US/docs/Web/HTML/Element/script#crossorigin) - : This attribute defines [CORS settings](/en-US/docs/Web/HTML/Attributes/crossorigin) as define for the HTML {{HTMLElement('script')}} element. - _Value type_: [**\**](/en-US/docs/Web/CSS/string); _Default value_: `?`; _Animatable_: **yes** + _Value type_: [**[ anonymous | use-credentials ]?**](/en-US/docs/Web/CSS/string); _Default value_: `?`; _Animatable_: **yes** - {{SVGAttr("href")}} - : The {{Glossary("URL")}} to the script to load. _Value type_: **[\](/en-US/docs/Web/SVG/Content_type#url)** ; _Default value_: _none_; _Animatable_: **no** - {{SVGAttr("type")}} - : This attribute defines type of the script language to use. - _Value type_: [**\**](/en-US/docs/Web/CSS/string); _Default value_: `application/ecmascript`; _Animatable_: **no** + _Value type_: [**``**](/en-US/docs/Glossary/MIME_type); _Default value_: `application/ecmascript`; _Animatable_: **no** - {{SVGAttr("xlink:href")}} {{deprecated_inline}} - : The {{Glossary("URL")}} to the script to load. _Value type_: **[\](/en-US/docs/Web/SVG/Content_type#url)** ; _Default value_: _none_; _Animatable_: **no** diff --git a/files/jsondata/L10n-Template.json b/files/jsondata/L10n-Template.json index fe78e31fdcf96e7..08357fe86b37c79 100644 --- a/files/jsondata/L10n-Template.json +++ b/files/jsondata/L10n-Template.json @@ -94,6 +94,7 @@ "fr": "Contexte sécurisé", "ko": "보안 컨텍스트", "ja": "安全なコンテキスト用", + "ko": "보안 컨텍스트", "zh-CN": "安全上下文" }, @@ -104,6 +105,7 @@ "fr": "Cette fonctionnalité est uniquement disponible dans des contextes sécurisés (HTTPS)", "ko": "이 기능은 보안 컨텍스트 (HTTPS)에서만 사용할 수 있습니다", "ja": "この機能は安全なコンテキスト (HTTPS) でのみ利用できます", + "ko": "이 기능은 보안 컨텍스트 (HTTPS)에서만 사용할 수 있습니다", "zh-CN": "此功能仅在安全上下文(HTTPS)中可用" }, @@ -114,6 +116,7 @@ "fr": "Cette fonctionnalité est uniquement disponible dans des contextes sécurisés (HTTPS), pour certains navigateurs qui la prennent en charge.", "ko": "이 기능은 일부 또는 모든 지원 브라우저보안 컨텍스트 (HTTPS)에서만 사용할 수 있습니다.", "ja": "この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。", + "ko": "이 기능은 일부 또는 모든 지원 브라우저보안 컨텍스트 (HTTPS)에서만 사용할 수 있습니다.", "zh-CN": "此项功能仅在一些支持的浏览器安全上下文(HTTPS)中可用。" }, diff --git a/files/jsondata/SVGData.json b/files/jsondata/SVGData.json index e6c1967716fb253..9a33e1ed96884a3 100644 --- a/files/jsondata/SVGData.json +++ b/files/jsondata/SVGData.json @@ -1329,9 +1329,9 @@ "attributes": [ "coreAttributes", "xLinkAttributes", - "'externalResourcesRequired'", "'type'", - "'xlink:href'" + "'href'", + "'crossorigin'" ], "interfaces": ["SVGScriptElement"] },