diff --git a/.vscode/project-words.txt b/.vscode/project-words.txt index 3bcea8226a3e50a..827e5b55f869659 100644 --- a/.vscode/project-words.txt +++ b/.vscode/project-words.txt @@ -23,6 +23,7 @@ hulki i'gyu Kazotetsu Letorey +mathml mdnplay menclose mfenced diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 07119d6d35cedeb..836d1c1749b26b1 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -9464,6 +9464,7 @@ /en-US/docs/Web/API/RTCOfferAnswerOptions/voiceActivityDetection /en-US/docs/Web/API/RTCPeerConnection/createAnswer /en-US/docs/Web/API/RTCOfferOptions /en-US/docs/Web/API/RTCPeerConnection/createOffer /en-US/docs/Web/API/RTCOfferOptions/iceRestart /en-US/docs/Web/API/RTCPeerConnection/createOffer +/en-US/docs/Web/API/RTCOutboundRtpStreamStats/lastPacketSentTimestamp /en-US/docs/Web/API/RTCOutboundRtpStreamStats /en-US/docs/Web/API/RTCOutboundRtpStreamStats/perDscpPacketsReceived /en-US/docs/Web/API/RTCOutboundRtpStreamStats/perDscpPacketsSent /en-US/docs/Web/API/RTCPeerConnection.addStream /en-US/docs/Web/API/RTCPeerConnection/addStream /en-US/docs/Web/API/RTCPeerConnection.close /en-US/docs/Web/API/RTCPeerConnection/close diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index 49e7c1e438ede91..cfa2b4f2aa4b090 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -54608,10 +54608,6 @@ "modified": "2020-10-15T22:17:15.823Z", "contributors": ["Sheppy"] }, - "Web/API/RTCOutboundRtpStreamStats/lastPacketSentTimestamp": { - "modified": "2020-10-15T22:17:16.317Z", - "contributors": ["Sheppy"] - }, "Web/API/RTCOutboundRtpStreamStats/nackCount": { "modified": "2020-10-15T22:17:14.809Z", "contributors": ["Sheppy"] diff --git a/files/en-us/glossary/code_splitting/index.md b/files/en-us/glossary/code_splitting/index.md index 6072a5fec6ff879..aa6c424cbe572bf 100644 --- a/files/en-us/glossary/code_splitting/index.md +++ b/files/en-us/glossary/code_splitting/index.md @@ -6,9 +6,9 @@ page-type: glossary-definition {{GlossarySidebar}} -**Code splitting** is the splitting of code into various bundles or components which can then be loaded on demand or in parallel. - -As an application grows in complexity or is maintained, CSS and JavaScripts files or bundles grow in byte size, especially as the number and size of included third-party libraries increases. To prevent the requirement of downloading ginormous files, scripts can be split into multiple smaller files. Then features required at page load can be downloaded immediately with additional scripts being [lazy loaded](/en-US/docs/Glossary/Lazy_load) after the page or application is interactive, thus improving performance. While the total amount of code is the same (and perhaps even a few bytes larger), the amount of code needed during initial load can be reduced. +**Code splitting** is the practice of splitting the code a web application depends on — including its own code and any third-party dependencies — into separate bundles that can be loaded independently of each other. +This allows an application to load only the code it actually needs at a given point in time, and load other bundles on demand. +This approach is used to improve application performance, especially on initial load. Code splitting is a feature supported by bundlers like [Webpack](https://webpack.js.org/) and [Browserify](https://browserify.org/) which can create multiple bundles that can be dynamically loaded at runtime. diff --git a/files/en-us/glossary/rgb/index.md b/files/en-us/glossary/rgb/index.md index c15dc9ee959e6a0..b03ae7c97601591 100644 --- a/files/en-us/glossary/rgb/index.md +++ b/files/en-us/glossary/rgb/index.md @@ -10,11 +10,11 @@ _Red-Green-Blue_ (**RGB**) is a color model that represents colors as mixtures o Alone an RGB value has no meaning. A color model defines how the three components relate to a color space. Graphically, a point in a three-dimensional grid or cube represents a color. Each dimension (or axis) corresponds to a different channel. The RGB color model is then a _cubic_, or _Cartesian_, coordinate system of the underlying color space. -For the web, the underlying color space for an RGB value is _sRGB_ (Standard RGB), and each RGB component is a number between 0 and 255. Float values are supported. +For the web, the underlying color space for an RGB value is _sRGB_ (Standard RGB), and each RGB component is a number between 0 and 255. Note that there are other RGB color spaces, like the _Adobe RGB_ color space, that can represent a wider {{glossary("gamut")}} of color than the _sRGB_ color space. The coordinates in _sRGB_ and _Adobe RGB_ are different. -There are many ways to describe the RGB components of a color. In {{Glossary("CSS")}} they can be represented as a single 24-bit integer in hexadecimal notation (for example, `#add8e6` is light blue), or in functional notation, [`rgb()`](/en-US/docs/Web/CSS/color_value/rgb) as three separate floats between 0 and 255 (for example, `rgb(46 139.5 87)`). In {{Glossary("OpenGL")}}, {{Glossary("WebGL")}}, and {{Glossary("GLSL")}} the red-green-blue components are fractions (floating-point numbers between 0.0 and 1.0), although in the actual color buffer they are typically stored as 8-bit integers. +There are many ways to describe the RGB components of a color. In {{Glossary("CSS")}} they can be represented as a single 24-bit integer in hexadecimal notation (for example, `#add8e6` is light blue), or in functional notation, [`rgb()`](/en-US/docs/Web/CSS/color_value/rgb) as three separate numbers between 0 and 255 (for example, `rgb(46 139.5 87)`). There are also the `srgb`, `srgb-linear`, `a98-rgb`, and `prophoto-rgb` color spaces for the [`color()`](/en-US/docs/Web/CSS/color_value/color) function. RGB is not the only color model that can represent the _sRGB_ color space. Cylindrical coordinate systems like the [`HSL`](/en-US/docs/Web/CSS/color_value/hsl) (_hue-saturation-lightness_) or [`HWB`](/en-US/docs/Web/CSS/color_value/hwb) (_hue-whiteness-blackness_) color models are also used to represent a sRGB color on the web. diff --git a/files/en-us/learn/css/building_blocks/cascade_and_inheritance/index.md b/files/en-us/learn/css/building_blocks/cascade_and_inheritance/index.md index f9fe145d007b455..0c44d2407ede74d 100644 --- a/files/en-us/learn/css/building_blocks/cascade_and_inheritance/index.md +++ b/files/en-us/learn/css/building_blocks/cascade_and_inheritance/index.md @@ -181,7 +181,7 @@ The amount of specificity a selector has is measured using three different value > **Note:** The universal selector ([`*`](/en-US/docs/Web/CSS/Universal_selectors)), [combinators](/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators) (`+`, `>`, `~`, ' '), and specificity adjustment selector ([`:where()`](/en-US/docs/Web/CSS/:where)) along with its parameters, have no effect on specificity. -The negation ([`:not()`](/en-US/docs/Web/CSS/:not)), relational selector ([`:has()`](/en-US/docs/Web/CSS/:has)), and the matches-any ([`:is()`](/en-US/docs/Web/CSS/:is)) pseudo-classes themselves don't have effect on specificity, but their parameters do. The specificity that each contributes to the specificity algorithm is the specificity of the selector in the parameter that has the greatest weight. +The negation ([`:not()`](/en-US/docs/Web/CSS/:not)), relational selector ([`:has()`](/en-US/docs/Web/CSS/:has)), the matches-any ([`:is()`](/en-US/docs/Web/CSS/:is)) pseudo-classes, and [CSS nesting](/en-US/docs/Web/CSS/CSS_nesting/Nesting_and_specificity) themselves don't add to specificity, but their parameters or nested rules do. The specificity weight that each contributes to the specificity algorithm is the specificity weight of the selector in the parameter or nested rule with the greatest weight. The following table shows a few isolated examples to get you in the mood. Try going through these, and make sure you understand why they have the specificity that we have given them. We've not covered selectors in detail yet, but you can find details of each selector on the MDN [selectors reference](/en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators). diff --git a/files/en-us/learn/css/building_blocks/selectors/combinators/index.md b/files/en-us/learn/css/building_blocks/selectors/combinators/index.md index 7a40c14e539df64..cf01a231eefc07b 100644 --- a/files/en-us/learn/css/building_blocks/selectors/combinators/index.md +++ b/files/en-us/learn/css/building_blocks/selectors/combinators/index.md @@ -76,6 +76,8 @@ A common use case is to do something with a paragraph that follows a heading, as If you insert some other element such as a `

` in between the `

` and the `

`, you will find that the paragraph is no longer matched by the selector and so does not get the background and foreground color applied when the element is adjacent. + + {{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}} ## General sibling combinator @@ -88,8 +90,40 @@ p ~ img In the example below we are selecting all `

` elements that come after the `

`, and even though there is a `
` in the document as well, the `

` that comes after it is selected. + + {{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}} +## Creating complex selectors with nesting + +The [CSS nesting module](/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting#combinators) allows you to write nested rules that use combinators to create [complex selectors](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#complex_selector). + +```css +p { + ~ img { + } +} +/* This is parsed by the browser as */ +p ~ img { +} +``` + +The [`&` nesting selector](/en-US/docs/Web/CSS/Nesting_selector) can also be use to create complex selectors. + +```css +p { + & img { + } +} +/* This is parsed by the browser as */ +p img { +} +``` + + + +{{EmbedGHLiveSample("css-examples/learn/selectors/nesting.html", '100%', 800)}} + ## Using combinators You can combine any of the selectors that we discovered in previous lessons with combinators in order to pick out part of your document. For example, to select list items with a class of "a" which are direct children of a `