Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Markdown] [Glossary] Prepare Glossary for Markdowning #9361

Merged
merged 2 commits into from
Sep 30, 2021
Merged

[Markdown] [Glossary] Prepare Glossary for Markdowning #9361

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
78462dd
Prepare Glossary for Markdowning
wbamberg Sep 30, 2021
7a03f92
Remove stray closing tags
wbamberg Sep 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions files/en-us/glossary/cacheable/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@

<p>When both, the method of the request and the status of the response, are cacheable, the response to the request can be cached:</p>

<pre class="brush: http">GET /pageX.html HTTP/1.1
<pre class="brush: plain">GET /pageX.html HTTP/1.1
(…)

200 OK
Expand All @@ -26,7 +26,7 @@

<p>A {{HTTPMethod("PUT")}} request cannot be cached. Moreover, it invalidates cached data for request to the same URI done via {{HTTPMethod("HEAD")}} or {{HTTPMethod("GET")}}:</p>

<pre class="brush: http">PUT /pageX.html HTTP/1.1
<pre class="brush: plain">PUT /pageX.html HTTP/1.1
(…)

200 OK
Expand All @@ -35,7 +35,7 @@

<p>A specific {{HTTPHeader("Cache-Control")}} header in the response can prevent caching:</p>

<pre class="brush: http">GET /pageX.html HTTP/1.1
<pre class="brush: plain">GET /pageX.html HTTP/1.1
(…)

200 OK
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/glossary/cipher/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
---
<p>In {{glossary("cryptography")}}, a <strong>cipher</strong> is an algorithm that can {{glossary("encryption", "encode")}} {{glossary("Plaintext")}} to make it unreadable, and to {{glossary("decryption", "decode")}} it back.</p>

<p id="In-depth">Ciphers were common long before the information age (e.g., <a href="https://en.wikipedia.org/wiki/Substitution_cipher">substitution ciphers</a>, <a href="https://en.wikipedia.org/wiki/Transposition_cipher">transposition ciphers</a>, and <a href="https://en.wikipedia.org/wiki/Permutation_cipher">permutation ciphers</a>), but none of them were cryptographically secure except for the <a href="https://en.wikipedia.org/wiki/One-time_pad">one-time pad</a>.</p>
<p>Ciphers were common long before the information age (e.g., <a href="https://en.wikipedia.org/wiki/Substitution_cipher">substitution ciphers</a>, <a href="https://en.wikipedia.org/wiki/Transposition_cipher">transposition ciphers</a>, and <a href="https://en.wikipedia.org/wiki/Permutation_cipher">permutation ciphers</a>), but none of them were cryptographically secure except for the <a href="https://en.wikipedia.org/wiki/One-time_pad">one-time pad</a>.</p>

<p>Modern ciphers are designed to withstand {{glossary("attack", "attacks")}} discovered by a {{glossary("cryptanalysis", "cryptanalyst")}}. There is no guarantee that all attack methods have been discovered, but each algorithm is judged against known classes of attacks.</p>

Expand Down
6 changes: 3 additions & 3 deletions files/en-us/glossary/client_hints/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ <h2 id="Overview">Overview</h2>

<p>For example, following <code>Accept-CH</code> in a response below, the client could append {{HTTPHeader("Width")}} and {{HTTPHeader("Downlink")}} headers to all subsequent requests.</p>

<pre class="brush: http">Accept-CH: Width, Downlink</pre>
<pre class="brush: plain">Accept-CH: Width, Downlink</pre>

<div class="notecard note">
<p><strong>Note:</strong> Client hints can also be specified in HTML using the {{HTMLElement("meta")}} element with the <code><a href="/en-US/docs/Web/HTML/Element/meta#attr-http-equiv">http-equiv</a></code> attribute.</p>
Expand All @@ -31,7 +31,7 @@ <h2 id="Caching_and_client_hints">Caching and Client Hints</h2>

<p>Client hints that determine which resources are sent in responses should "generally" also be included in the affected response's {{HTTPHeader("Vary")}} header. This ensures that a different resource is cached for every different value of the hint header.</p>

<pre class="brush: http">Vary: Accept, Width, ECT</pre>
<pre class="brush: plain">Vary: Accept, Width, ECT</pre>

<p>You may prefer to omit specifying {{HTTPHeader("Vary")}} or use some other strategy for client hint headers where the value changes a lot, as this effectively makes the resource uncachable (a new cache entry is created for every different value). This applies in particular to network client hints like {{HTTPHeader("Downlink")}} and {{HTTPHeader("RTT")}}. For more information see <a href="/en-US/docs/Web/HTTP/Caching#varying_responses">HTTP Caching > Varying responses</a>.</p>

Expand All @@ -53,5 +53,5 @@ <h2 id="See_also">See also</h2>
<li><a href="/en-US/docs/Web/HTTP/Headers#client_hints">Client Hints headers</a></li>
<li><a href="/en-US/docs/Web/HTTP/Headers/Vary"><code>Vary</code> HTTP Header</a></li>
<li><a href="https://wicg.github.io/client-hints-infrastructure/">Client Hints Infrastructure</a></li>

</ul>
3 changes: 1 addition & 2 deletions files/en-us/glossary/cors-safelisted_response_header/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,7 @@
<p>Additional headers can be added to the safelist using {{HTTPHeader("Access-Control-Expose-Headers")}}.</p>

<div class="notecard note">
<h4>Note</h4>
<p>{{HTTPHeader("Content-Length")}} was not part of the original set of safelisted response headers [<a href="https://github.com/whatwg/fetch/pull/626">ref</a>]</p>
<p><strong>Note:</strong> {{HTTPHeader("Content-Length")}} was not part of the original set of safelisted response headers [<a href="https://github.com/whatwg/fetch/pull/626">ref</a>]</p>
</div>


Expand Down
7 changes: 3 additions & 4 deletions files/en-us/glossary/css_selector/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@
---
<p>A <strong>CSS selector</strong> is the part of a CSS rule that describes what elements in a document the rule will match. The matching elements will have the rule's specified style applied to them.</p>

<div id="glossary-selector-details">
<h2>Example</h2>

<p>Consider this CSS:</p>

<pre class="brush: css">p {
Expand Down Expand Up @@ -48,11 +49,10 @@
Be careful! There are wizards present, and they are quick to anger!
&lt;/div&gt;
&lt;/div&gt;</pre>
</div>

<p>The resulting page content is styled like this:</p>

<p>{{EmbedLiveSample("glossary-selector-details", 640, 210)}}</p>
<p>{{EmbedLiveSample("Example", 640, 240)}}</p>

<h2 id="see_also">See also</h2>

Expand Down Expand Up @@ -88,4 +88,3 @@ <h2 id="see_also">See also</h2>
</ul>
</li>
</ul>

2 changes: 1 addition & 1 deletion files/en-us/glossary/dos_attack/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
---
<p>DoS (Denial of Service) is a network attack that prevents legitimate use of {{glossary("server")}} resources by flooding the server with requests.</p>

<p id="In_Depth">Computers have limited resources, for example computation power or memory. When these are exhausted, the program can freeze or crash, making it unavailable. A DoS attack consists of various techniques to exhaust these resources and make a server or a network unavailable to legitimate users, or at least make the server perform sluggishly.</p>
<p>Computers have limited resources, for example computation power or memory. When these are exhausted, the program can freeze or crash, making it unavailable. A DoS attack consists of various techniques to exhaust these resources and make a server or a network unavailable to legitimate users, or at least make the server perform sluggishly.</p>

<p>There are also Distributed Denial of Service (DDoS) Attacks in which a multitude of servers are used to exhaust the computing capacity of an attacked computer.</p>

Expand Down
8 changes: 6 additions & 2 deletions files/en-us/glossary/falsy/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,13 @@

<p>{{Glossary("JavaScript")}} uses {{Glossary("Type_Conversion", "type conversion")}} to coerce any value to a Boolean in contexts that require it, such as {{Glossary("Conditional", "conditionals")}} and {{Glossary("Loop", "loops")}}.</p>

<p>The following table provides a complete list of JavaScript falsy values:</p>

<table class="standard-table">
<caption><p><strong>Complete list of JavaScript falsy values</strong></p></caption>
<thead>
<th>Value</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td><code>false</code></td>
Expand Down Expand Up @@ -83,4 +88,3 @@ <h2 id="see_also">See also</h2>
<li>{{Glossary("Truthy")}}</li>
<li>{{Glossary("Boolean")}}</li>
</ul>

12 changes: 5 additions & 7 deletions files/en-us/glossary/grid/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@

<p>In the example below I have created an <em>explicit grid</em> of three columns and two rows. The <em>third</em> row on the grid is an <em>implicit grid</em> row track, formed due to their being more than the six items which fill the explicit tracks.</p>

<div id="example">
<div class="hidden">
<pre class="brush: css">* {box-sizing: border-box;}
<h2>Example</h2>

<pre class="brush: css hidden">* {box-sizing: border-box;}

.wrapper {
border: 2px solid #f76707;
Expand All @@ -32,7 +32,6 @@
color: #d9480f;
}
</pre>
</div>

<pre class="brush: css">.wrapper {
display: grid;
Expand All @@ -52,11 +51,10 @@
&lt;div&gt;Eight&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>

<p>{{ EmbedLiveSample('example', '500', '330') }}</p>
<p>{{ EmbedLiveSample('Example', '500', '330') }}</p>

<h2 id="see_also">See also</h2>
<h2 id="See_also">See also</h2>

<ul>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of grid layout</a></li>
Expand Down
10 changes: 4 additions & 6 deletions files/en-us/glossary/grid_areas/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@

<p>Grid areas <em>must</em> be rectangular in nature; it is not possible to create, for example, a T- or L-shaped grid area.</p>

<h2>Example</h2>

<p>In the example below I have a grid container with two grid items. I have named these with the {{cssxref("grid-area")}} property and then laid them out on the grid using {{cssxref("grid-template-areas")}}. This creates two grid areas, one covering four grid cells, the other two.</p>

<div id="example_1">
<div class="hidden">
<pre class="brush: css">* {box-sizing: border-box;}
<pre class="brush: css hidden">* {box-sizing: border-box;}

.wrapper {
border: 2px solid #f76707;
Expand All @@ -32,7 +32,6 @@
color: #d9480f;
}
</pre>
</div>

<pre class="brush: css">.wrapper {
display: grid;
Expand All @@ -56,8 +55,7 @@
&lt;/div&gt;
</pre>

<p>{{ EmbedLiveSample('example_1', '300', '280') }}</p>
</div>
<p>{{ EmbedLiveSample('Example', '300', '280') }}</p>

<h2 id="see_also">See also</h2>

Expand Down
12 changes: 5 additions & 7 deletions files/en-us/glossary/grid_cell/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@

<p>If you do not place items using one of the grid placement methods, direct children of the grid container will be placed one into each individual grid cell by the auto-placement algorithm. Additional row or column {{glossary("grid tracks", "tracks")}} will be created to create enough cells to hold all items.</p>

<h2>Example</h2>

<p>In the example we have created a three column track grid. The five items are placed into grid cells working along an initial row of three grid cells, then creating a new row for the remaining two.</p>

<div id="example_1">
<div class="hidden">
<pre class="brush: css">* {box-sizing: border-box;}
<pre class="brush: css hidden">* {box-sizing: border-box;}

.wrapper {
border: 2px solid #f76707;
Expand All @@ -30,7 +30,6 @@
color: #d9480f;
}
</pre>
</div>

<pre class="brush: css">.wrapper {
display: grid;
Expand All @@ -48,10 +47,9 @@
&lt;/div&gt;
</pre>

<p>{{ EmbedLiveSample('example_1', '300', '280') }}</p>
</div>
<p>{{ EmbedLiveSample('Example', '300', '280') }}</p>

<h2 id="see_also">See also</h2>
<h2 id="See_also">See also</h2>

<h3 id="Property_reference">Property reference</h3>

Expand Down
32 changes: 12 additions & 20 deletions files/en-us/glossary/grid_lines/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,13 @@
tags:
- CSS Grids
---
<p><strong>Grid lines</strong> are created when you define {{glossary("Grid tracks", "tracks")}} in the explicit grid using <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>. In the following example there is a grid with three column tracks and two row tracks. This gives us 4 column lines and 3 row lines.</p>
<p><strong>Grid lines</strong> are created when you define {{glossary("Grid tracks", "tracks")}} in the explicit grid using <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>.</p>

<div id="example_1">
<div class="hidden">
<pre class="brush: css">* {box-sizing: border-box;}
<h2>Example</h2>

<p>In the following example there is a grid with three column tracks and two row tracks. This gives us 4 column lines and 3 row lines.</p>

<pre class="brush: css hidden">* {box-sizing: border-box;}

.wrapper {
border: 2px solid #f76707;
Expand All @@ -27,7 +29,6 @@
color: #d9480f;
}
</pre>
</div>

<pre class="brush: html">&lt;div class="wrapper"&gt;
&lt;div&gt;One&lt;/div&gt;
Expand All @@ -45,22 +46,19 @@
}
</pre>

<p>{{ EmbedLiveSample('example_1', '500', '250') }}</p>
<p>{{ EmbedLiveSample('Example', '500', '250') }}</p>

<p>Lines can be addressed using their line number. In a left-to-right language such as English, column line 1 will be on the left of the grid, row line 1 on the top. Lines numbers respect the <a href="/en-US/docs/Web/CSS/CSS_Writing_Modes">writing mode</a> of the document and so in a right-to-left language for example, column line 1 will be on the right of the grid. The image below shows the line numbers of the grid, assuming the language is left-to-right.</p>

<p><img alt="Diagram showing the grid with lines numbered." src="1_diagram_numbered_grid_lines.png"></p>
</div>

<p>Lines are also created in the <em>implicit grid</em> when implicit tracks are created to hold content positioned outside of the <em>explicit grid</em>, however these lines cannot be addressed by a number.</p>

<h2 id="Placing_items_onto_the_grid_by_line_number">Placing items onto the grid by line number</h2>

<p>Having created a grid, you can place items onto the grid by line number. In the following example the item is positioned from column line 1 to column line 3, and from row line 1 to row line 3.</p>

<div id="example_2">
<div class="hidden">
<pre class="brush: css">* {box-sizing: border-box;}
<pre class="brush: css hidden">* {box-sizing: border-box;}

.wrapper {
border: 2px solid #f76707;
Expand All @@ -79,7 +77,6 @@ <h2 id="Placing_items_onto_the_grid_by_line_number">Placing items onto the grid
color: #d9480f;
}
</pre>
</div>

<pre class="brush: html">&lt;div class="wrapper"&gt;
&lt;div class="item"&gt;Item&lt;/div&gt;
Expand All @@ -99,16 +96,13 @@ <h2 id="Placing_items_onto_the_grid_by_line_number">Placing items onto the grid
}
</pre>

<p>{{ EmbedLiveSample('example_2', '500', '250') }}</p>
</div>
<p>{{ EmbedLiveSample('Placing_items_onto_the_grid_by_line_number', '500', '250') }}</p>

<h2 id="Naming_lines">Naming lines</h2>

<p>The lines created in the <em>explicit grid</em> can be named, by adding the name in square brackets before or after the track sizing information. When placing an item, you can then use these names instead of the line number, as demonstrated below.</p>

<div id="example_3">
<div class="hidden">
<pre class="brush: css">* {box-sizing: border-box;}
<pre class="brush: css hidden">* {box-sizing: border-box;}

.wrapper {
border: 2px solid #f76707;
Expand All @@ -127,7 +121,6 @@ <h2 id="Naming_lines">Naming lines</h2>
color: #d9480f;
}
</pre>
</div>

<pre class="brush: html">&lt;div class="wrapper"&gt;
&lt;div class="item"&gt;Item&lt;/div&gt;
Expand All @@ -147,10 +140,9 @@ <h2 id="Naming_lines">Naming lines</h2>
}
</pre>

<p>{{ EmbedLiveSample('example_3', '500', '250') }}</p>
</div>
<p>{{ EmbedLiveSample('Naming_lines', '500', '250') }}</p>

<h2 id="see_also">See also</h2>
<h2 id="See_also">See also</h2>

<h3 id="Property_reference">Property reference</h3>

Expand Down
14 changes: 7 additions & 7 deletions files/en-us/glossary/grid_tracks/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,13 @@

<h2 id="Track_sizing_in_the_explicit_grid">Track sizing in the explicit grid</h2>

<p>When defining grid tracks using {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}} you may use any length unit, and also the flex unit, <code>fr</code> which indicates a portion of the available space in the grid container. The example below demonstrates a grid with three column tracks, one of 200 pixels, the second of 1fr, the third of 3fr. Once the 200 pixels has been subtracted from the space available in the grid container, the remaining space is divided by 4. One part is given to column 2, 3 parts to column 3.</p>
<p>When defining grid tracks using {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}} you may use any length unit, and also the flex unit, <code>fr</code> which indicates a portion of the available space in the grid container.</p>

<div id="example_1">
<div class="hidden">
<pre class="brush: css">* {box-sizing: border-box;}
<h2>Example</h2>

<p>The example below demonstrates a grid with three column tracks, one of 200 pixels, the second of 1fr, the third of 3fr. Once the 200 pixels has been subtracted from the space available in the grid container, the remaining space is divided by 4. One part is given to column 2, 3 parts to column 3.</p>

<pre class="brush: css hidden">* {box-sizing: border-box;}

.wrapper {
border: 2px solid #f76707;
Expand All @@ -32,7 +34,6 @@ <h2 id="Track_sizing_in_the_explicit_grid">Track sizing in the explicit grid</h2
color: #d9480f;
}
</pre>
</div>

<pre class="brush: css">.wrapper {
display: grid;
Expand All @@ -49,8 +50,7 @@ <h2 id="Track_sizing_in_the_explicit_grid">Track sizing in the explicit grid</h2
&lt;/div&gt;
</pre>

<p>{{ EmbedLiveSample('example_1', '500', '230') }}</p>
</div>
<p>{{ EmbedLiveSample('Example', '500', '230') }}</p>

<h2 id="Track_sizing_in_the_implicit_grid">Track sizing in the implicit grid</h2>

Expand Down
10 changes: 4 additions & 6 deletions files/en-us/glossary/gutters/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@
---
<p><strong>Gutters</strong> or <em>alleys</em> are spacing between content tracks. These can be created in <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> using the {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, or {{cssxref("gap")}} properties.</p>

<h2>Example</h2>

<p>In the example below we have a three-column and two-row track grid, with 20-pixel gaps between column tracks and <code>20px</code>-gaps between row tracks.</p>

<div id="example_1">
<div class="hidden">
<pre class="brush: css">* {box-sizing: border-box;}
<pre class="brush: css hidden">* {box-sizing: border-box;}

.wrapper {
border: 2px solid #f76707;
Expand All @@ -26,7 +26,6 @@
color: #d9480f;
}
</pre>
</div>

<pre class="brush: css">.wrapper {
display: grid;
Expand All @@ -46,8 +45,7 @@
&lt;/div&gt;
</pre>

<p>{{ EmbedLiveSample('example_1', '300', '280') }}</p>
</div>
<p>{{ EmbedLiveSample('Example', '300', '280') }}</p>

<p>In terms of grid sizing, gaps act as if they were a regular grid track however nothing can be placed into the gap. The gap acts as if the grid line at that location has gained extra size, so any grid item placed after that line begins at the end of the gap.</p>

Expand Down
Loading