diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 4e7bfc3da2cb101..c20167a37284a8a 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -8000,7 +8000,7 @@ /en-US/docs/Web/API/Document/onselectionchange /en-US/docs/Web/API/Document/selectionchange_event /en-US/docs/Web/API/Document/onsubmit /en-US/docs/Web/API/HTMLFormElement/submit_event /en-US/docs/Web/API/Document/onvisibilitychange /en-US/docs/Web/API/Document/visibilitychange_event -/en-US/docs/Web/API/Document/origin /en-US/docs/Web/API/origin +/en-US/docs/Web/API/Document/origin /en-US/docs/Web/API/Window/origin /en-US/docs/Web/API/Document/pointercancel_event /en-US/docs/Web/API/Element/pointercancel_event /en-US/docs/Web/API/Document/pointerdown_event /en-US/docs/Web/API/Element/pointerdown_event /en-US/docs/Web/API/Document/pointerenter_event /en-US/docs/Web/API/Element/pointerenter_event @@ -10261,7 +10261,7 @@ /en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch /en-US/docs/Web/API/fetch /en-US/docs/Web/API/WindowOrWorkerGlobalScope/indexedDB /en-US/docs/Web/API/Window/indexedDB /en-US/docs/Web/API/WindowOrWorkerGlobalScope/isSecureContext /en-US/docs/Web/API/Window/isSecureContext -/en-US/docs/Web/API/WindowOrWorkerGlobalScope/origin /en-US/docs/Web/API/origin +/en-US/docs/Web/API/WindowOrWorkerGlobalScope/origin /en-US/docs/Web/API/Window/origin /en-US/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask /en-US/docs/Web/API/queueMicrotask /en-US/docs/Web/API/WindowOrWorkerGlobalScope/rejectionhandled_event /en-US/docs/Web/API/Window/rejectionhandled_event /en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval /en-US/docs/Web/API/setInterval @@ -10516,7 +10516,7 @@ /en-US/docs/Web/API/document.onoffline /en-US/docs/Web/API/Window/offline_event /en-US/docs/Web/API/document.ononline /en-US/docs/Web/API/Window/online_event /en-US/docs/Web/API/document.open /en-US/docs/Web/API/Document/open -/en-US/docs/Web/API/document.origin /en-US/docs/Web/API/origin +/en-US/docs/Web/API/document.origin /en-US/docs/Web/API/Window/origin /en-US/docs/Web/API/document.plugins /en-US/docs/Web/API/Document/plugins /en-US/docs/Web/API/document.pointerLockElement /en-US/docs/Web/API/Document/pointerLockElement /en-US/docs/Web/API/document.preferredStyleSheetSet /en-US/docs/Web/API/Document/preferredStyleSheetSet @@ -10704,6 +10704,7 @@ /en-US/docs/Web/API/notification_1/vibrate /en-US/docs/Web/API/Notification/vibrate /en-US/docs/Web/API/onMSVideoOptimalLayoutChanged /en-US/docs/Web/API/HTMLVideoElement /en-US/docs/Web/API/onMSVideoOptimalLayoutChanged_ /en-US/docs/Web/API/HTMLVideoElement +/en-US/docs/Web/API/origin /en-US/docs/Web/API/Window/origin /en-US/docs/Web/API/performance_property /en-US/docs/Web/API/Window/performance /en-US/docs/Web/API/range.cloneContents /en-US/docs/Web/API/range/cloneContents /en-US/docs/Web/API/range.cloneRange /en-US/docs/Web/API/range/cloneRange diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index e94ce32f52556a6..a55243c284a93cb 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -67831,6 +67831,17 @@ "louisremi" ] }, + "Web/API/Window/origin": { + "modified": "2020-10-15T21:51:30.388Z", + "contributors": [ + "mfuji09", + "fscholz", + "Sheppy", + "Bzbarsky", + "chrisdavidmills", + "ziyunfei" + ] + }, "Web/API/Window/outerHeight": { "modified": "2020-10-15T21:10:01.529Z", "contributors": [ @@ -71587,17 +71598,6 @@ "kscarfone" ] }, - "Web/API/origin": { - "modified": "2020-10-15T21:51:30.388Z", - "contributors": [ - "mfuji09", - "fscholz", - "Sheppy", - "Bzbarsky", - "chrisdavidmills", - "ziyunfei" - ] - }, "Web/API/queueMicrotask": { "modified": "2020-10-15T22:21:06.789Z", "contributors": [ diff --git a/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md index 9da73764d66a366..fe105f8eea3451a 100644 --- a/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md +++ b/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md @@ -94,7 +94,7 @@ The _balloons.jpg_ image used in the initial background images example, is a lar You can also use keywords: -- `cover` — the browser will make the image just large enough so that it completely covers the box area while still retaining its aspect ratio. In this case, part of the image is likely to end up outside the box. +- `cover` — the browser will make the image just large enough so that it completely covers the box area while still retaining its {{glossary("aspect ratio")}}. In this case, part of the image is likely to end up outside the box. - `contain` — the browser will make the image the right size to fit inside the box. In this case, you may end up with gaps on either side or on the top and bottom of the image, if the aspect ratio of the image is different from that of the box. In the example below, the _balloons.jpg_ image has length units set to size it inside the box. You can see this has distorted the image. diff --git a/files/en-us/learn/css/building_blocks/images_media_form_elements/index.md b/files/en-us/learn/css/building_blocks/images_media_form_elements/index.md index 19a70796b77751c..57b398e3210434b 100644 --- a/files/en-us/learn/css/building_blocks/images_media_form_elements/index.md +++ b/files/en-us/learn/css/building_blocks/images_media_form_elements/index.md @@ -41,7 +41,7 @@ In this lesson we will take a look at how certain special elements are treated i Images and video are described as **[replaced elements](/en-US/docs/Web/CSS/Replaced_element)**. This means that CSS cannot affect the internal layout of these elements — only their position on the page amongst other elements. As we will see however, there are various things that CSS can do with an image. -Certain replaced elements, such as images and video, are also described as having an **aspect ratio**. This means that it has a size in both the horizontal (x) and vertical (y) dimensions, and will be displayed using the intrinsic dimensions of the file by default. +Certain replaced elements, such as images and video, are also described as having an **{{glossary("aspect ratio")}}**. This means that it has a size in both the horizontal (x) and vertical (y) dimensions, and will be displayed using the intrinsic dimensions of the file by default. ## Sizing images @@ -49,7 +49,7 @@ As you already know from following these lessons, everything in CSS generates a In the example below we have two boxes, both 200 pixels in size: -- One contains an image which is smaller than 200 pixels — it is smaller than the box and doesn't stretch to fill it. +- One contains an image that is smaller than 200 pixels — it is smaller than the box and doesn't stretch to fill it. - The other is larger than 200 pixels and overflows the box. {{EmbedGHLiveSample("css-examples/learn/images/size.html", '100%', 1000)}} diff --git a/files/en-us/learn/css/building_blocks/writing_modes_tasks/index.md b/files/en-us/learn/css/building_blocks/writing_modes_tasks/index.md index 8c697464550feeb..b3a790b051165d0 100644 --- a/files/en-us/learn/css/building_blocks/writing_modes_tasks/index.md +++ b/files/en-us/learn/css/building_blocks/writing_modes_tasks/index.md @@ -30,7 +30,7 @@ Try updating the live code below to recreate the finished example: ## Task 2 -In this task, we want you to use logical properties to replace `width` and `height` in order to maintain the aspect ratio of the box as it is turned vertically. +In this task, we want you to use logical properties to replace `width` and `height` in order to maintain the {{glossary("aspect ratio")}} of the box as it is turned vertically. Your final result should look like the image below: diff --git a/files/en-us/learn/css/css_layout/responsive_design/index.md b/files/en-us/learn/css/css_layout/responsive_design/index.md index 452eb872d18a289..d2e31d80d6d7550 100644 --- a/files/en-us/learn/css/css_layout/responsive_design/index.md +++ b/files/en-us/learn/css/css_layout/responsive_design/index.md @@ -166,7 +166,7 @@ This scales media to ensure they never overflow their containers. Using a single Responsive Images, using the {{htmlelement("picture")}} element and the {{htmlelement("img")}} `srcset` and `sizes` attributes enables serving images targeted to the user's viewport and the device's resolution. For example, you can include a square image for mobile, but show the same scene as a landscape image on desktop. -The `` element enables providing multiple sizes along with "hints" (metadata that describes the screen size and resolution the image is best suited for), and the browser will choose the most appropriate image for each device, ensuring that a user will download an image size appropriate for the device they are using. Using `` along with `max-width` removes the need for sizing images with media queries. It enables targeting images with different aspect ratios to different viewport sizes. +The `` element enables providing multiple sizes along with "hints" (metadata that describes the screen size and resolution the image is best suited for), and the browser will choose the most appropriate image for each device, ensuring that a user will download an image size appropriate for the device they are using. Using `` along with `max-width` removes the need for sizing images with media queries. It enables targeting images with different {{glossary("aspect ratio", "aspect ratios")}} to different viewport sizes. You can also _art direct_ images used at different sizes, thus providing a different crop or completely different image to different screen sizes. diff --git a/files/en-us/learn/css/howto/fill_a_box_with_an_image/index.md b/files/en-us/learn/css/howto/fill_a_box_with_an_image/index.md index 3842f1f27e4bcab..9697776c983948a 100644 --- a/files/en-us/learn/css/howto/fill_a_box_with_an_image/index.md +++ b/files/en-us/learn/css/howto/fill_a_box_with_an_image/index.md @@ -10,7 +10,7 @@ In this guide you can learn a technique for causing an HTML image to completely ## Using object-fit -When you add an image to a page using the HTML {{htmlelement("img")}} element, the image will maintain the size and aspect ratio of the image file, or that of any HTML [`width`](/en-US/docs/Web/HTML/Global_attributes#width) or [`height`](/en-US/docs/Web/HTML/Global_attributes#height) attributes. Sometimes you would like the image to completely fill the box that you have placed it in. In that case you first need to decide what happens if the image is the wrong aspect ratio for the container. +When you add an image to a page using the HTML {{htmlelement("img")}} element, the image will maintain the size and {{glossary("aspect ratio")}} of the image file, or that of any HTML [`width`](/en-US/docs/Web/HTML/Global_attributes#width) or [`height`](/en-US/docs/Web/HTML/Global_attributes#height) attributes. Sometimes you would like the image to completely fill the box that you have placed it in. In that case you first need to decide what happens if the image is the wrong aspect ratio for the container. 1. The image should completely fill the box, retaining aspect ratio, and cropping any excess on the side that is too big to fit. 2. The image should fit inside the box, with the background showing through as bars on the too-small side. diff --git a/files/en-us/learn/css/howto/index.md b/files/en-us/learn/css/howto/index.md index 2bd4d8541e613d6..9083ed566841ee2 100644 --- a/files/en-us/learn/css/howto/index.md +++ b/files/en-us/learn/css/howto/index.md @@ -13,7 +13,7 @@ This page rounds up questions and answers, and other material on the MDN site th - [How do I add a drop-shadow to an element?](/en-US/docs/Learn/CSS/Howto/Add_a_shadow) - : Shadows can be added to boxes with the {{cssxref("box-shadow")}} property. This tutorial explains how it works and shows an example. - [How do I fill a box with an image without distorting the image?](/en-US/docs/Learn/CSS/Howto/Fill_a_box_with_an_image) - - : The {{cssxref("object-fit")}} property provides different ways to fit an image into a box which has a different aspect ratio, and you can find out how to use them in this tutorial. + - : The {{cssxref("object-fit")}} property provides different ways to fit an image into a box which has a different {{glossary("aspect ratio")}}, and you can find out how to use them in this tutorial. - [Which methods can be used to style boxes?](/en-US/docs/Learn/CSS/Howto/Create_fancy_boxes) - : A rundown of the different properties that might be useful when styling boxes using CSS. - [How can I make elements semi-transparent?](/en-US/docs/Learn/CSS/Howto/Make_box_transparent) diff --git a/files/en-us/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md b/files/en-us/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md index cbf72721cd2c7a7..4ffed4a68baab77 100644 --- a/files/en-us/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md +++ b/files/en-us/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md @@ -93,7 +93,7 @@ In this section we'll go through the different ways in which you can add SVG vec ### The quick way: `img` element -To embed an SVG via an {{htmlelement("img")}} element, you just need to reference it in the src attribute as you'd expect. You will need a `height` or a `width` attribute (or both if your SVG has no inherent aspect ratio). If you have not already done so, please read [Images in HTML](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML). +To embed an SVG via an {{htmlelement("img")}} element, you just need to reference it in the src attribute as you'd expect. You will need a `height` or a `width` attribute (or both if your SVG has no inherent {{glossary("aspect ratio")}}). If you have not already done so, please read [Images in HTML](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML). ```html **Note:** Although, as we have said, it is good practice to specify the _actual_ size of your images using HTML attributes, you should not use them to _resize_ images. > -> If you set the image size too big, you'll end up with images that look grainy, fuzzy, or too small, and wasting bandwidth downloading an image that is not fitting the user's needs. The image may also end up looking distorted, if you don't maintain the correct [aspect ratio](https://en.wikipedia.org/wiki/Aspect_ratio_%28image%29). You should use an image editor to put your image at the correct size before putting it on your webpage. +> If you set the image size too big, you'll end up with images that look grainy, fuzzy, or too small, and wasting bandwidth downloading an image that is not fitting the user's needs. The image may also end up looking distorted, if you don't maintain the correct {{glossary("aspect ratio")}}. You should use an image editor to put your image at the correct size before putting it on your webpage. > > If you do need to alter an image's size, you should use [CSS](/en-US/docs/Learn/CSS) instead. diff --git a/files/en-us/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md b/files/en-us/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md index e363946cdfbf107..5544346a6ec16d0 100644 --- a/files/en-us/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md +++ b/files/en-us/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md @@ -18,7 +18,7 @@ In this task, we want you to embed a simple image of some Blueberries into the p - Add the path to the image to an appropriate attribute to embed it on the page. The image is called `blueberries.jpg`, and it is in a folder inside the current folder called `images`. - Add some alternative text to an appropriate attribute to describe the image, for people that cannot see it. -- Give the `` element an appropriate `width` and `height` so that it displays at the correct aspect ratio, and enough space is left on the page to display it. The image's intrinsic size is 615 x 419 pixels. +- Give the `` element an appropriate `width` and `height` so that it displays at the correct {{glossary("aspect ratio")}}, and enough space is left on the page to display it. The image's {{glossary("intrinsic size")}} is 615 x 419 pixels. Try updating the live code below to recreate the finished example: diff --git a/files/en-us/learn/javascript/building_blocks/conditionals/index.md b/files/en-us/learn/javascript/building_blocks/conditionals/index.md index 2fcf2cef61c59d2..604edfb6dfbbe42 100644 --- a/files/en-us/learn/javascript/building_blocks/conditionals/index.md +++ b/files/en-us/learn/javascript/building_blocks/conditionals/index.md @@ -678,25 +678,14 @@ If you make a mistake, you can always reset the example with the "Reset" button. ```html hidden

Live output

-
- - - -

This is my website

-
+

Editable code

Press Esc to move focus away from the code area (Tab inserts a tab character).

-