Skip to content

Commit

Permalink
Convert files to MD
Browse files Browse the repository at this point in the history
  • Loading branch information
@wbamberg
wbamberg committed Aug 12, 2021
1 parent 04c6708 commit 26f50bd
Show file tree
Hide file tree
Showing 950 changed files with 56,587 additions and 71,659 deletions.
69 changes: 34 additions & 35 deletions files/en-us/web/css/--_star_/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,47 +8,47 @@ tags:
- Reference
browser-compat: css.properties.custom-property
---
<div>{{CSSRef}}</div>
{{CSSRef}}

<p>Property names that are prefixed with <code>--</code>, like <code>--example-name</code>, represent <em>custom properties</em> that contain a value that can be used in other declarations using the {{cssxref("var()")}} function.</span></p>
Property names that are prefixed with `--`, like `--example-name`, represent _custom properties_ that contain a value that can be used in other declarations using the {{cssxref("var()")}} function.

<p>Custom properties are scoped to the element(s) they are declared on, and participate in the cascade: the value of such a custom property is that from the declaration decided by the cascading algorithm.</p>
Custom properties are scoped to the element(s) they are declared on, and participate in the cascade: the value of such a custom property is that from the declaration decided by the cascading algorithm.

<p>{{CSSInfo}}</p>
{{CSSInfo}}

<h2 id="Syntax">Syntax</h2>
## Syntax

<pre class="brush: css">--somekeyword: left;
```css
--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);
</pre>
```

<dl>
<dt><code>&lt;declaration-value&gt;</code></dt>
<dd>This value matches any sequence of one or more tokens, so long as the sequence does not contain an unallowed token. It represents the entirety of what a valid declaration can have as its value.</dd>
</dl>
- `<declaration-value>`
- : This value matches any sequence of one or more tokens, so long as the sequence does not contain an unallowed token. It represents the entirety of what a valid declaration can have as its value.

<div class="notecard note">
<p><strong>Note:</strong> Custom property names are case sensitive — <code>--my-color</code> will be treated as a separate custom property to <code>--My-color</code>.</p>
</div>
> **Note:** Custom property names are case sensitive — `--my-color` will be treated as a separate custom property to `--My-color`.
<h3 id="Formal_syntax">Formal syntax</h3>
### Formal syntax

{{CSSSyntax}}

<h2 id="Example">Example</h2>
## Example

<h3 id="HTML">HTML</h3>
### HTML

<pre class="brush: html">&lt;p id="firstParagraph"&gt;This paragraph should have a blue background and yellow text.&lt;/p&gt;
&lt;p id="secondParagraph"&gt;This paragraph should have a yellow background and blue text.&lt;/p&gt;
&lt;div id="container"&gt;
&lt;p id="thirdParagraph"&gt;This paragraph should have a green background and yellow text.&lt;/p&gt;
&lt;/div&gt;</pre>
```html
<p id="firstParagraph">This paragraph should have a blue background and yellow text.</p>
<p id="secondParagraph">This paragraph should have a yellow background and blue text.</p>
<div id="container">
<p id="thirdParagraph">This paragraph should have a green background and yellow text.</p>
</div>
```

<h3 id="CSS">CSS</h3>
### CSS

<pre class="brush: css">:root {
```css
:root {
--first-color: #16f;
--second-color: #ff7;
}
Expand All @@ -70,23 +70,22 @@ browser-compat: css.properties.custom-property
#thirdParagraph {
background-color: var(--first-color);
color: var(--second-color);
}</pre>
}
```

<h3 id="Result">Result</h3>
### Result

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

<h2 id="Specifications">Specifications</h2>
## Specifications

{{Specifications}}

<h2 id="Browser_compatibility">Browser compatibility</h2>
## Browser compatibility

<p>{{Compat}}</p>
{{Compat}}

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

<ul>
<li><a href="/en-US/docs/Web/CSS/Using_CSS_custom_properties">Using CSS variables</a></li>
<li>The {{cssxref("var()")}} function</span></li>
</ul>
- [Using CSS variables](/en-US/docs/Web/CSS/Using_CSS_custom_properties)
- The {{cssxref("var()")}} function
95 changes: 47 additions & 48 deletions files/en-us/web/css/-moz-context-properties/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,95 +5,94 @@ tags:
- '-moz-context-properties'
- CSS
- CSS Property
- 'CSS:Mozilla Extensions'
- CSS:Mozilla Extensions
- Experimental
- Needs Privileges
- Non-standard
- Reference
- 'recipe:css-property'
- recipe:css-property
browser-compat: css.properties.-moz-context-properties
---
<div>{{CSSRef}}{{Non-standard_header}}</div>
{{CSSRef}}{{Non-standard_header}}

<p>The <code><strong>-moz-context-properties</strong></code> property can be used within privileged contexts in Firefox to share the values of specified properties of the element with a child SVG image.</span></p>
The **`-moz-context-properties`** property can be used within privileged contexts in Firefox to share the values of specified properties of the element with a child SVG image.

<p>If you reference an SVG image in a webpage (such as with the {{htmlelement("img")}} element or as a background image), the SVG image can coordinate with the embedding element (its context) to have the image adopt property values set on the embedding element. To do this the embedding element needs to list the properties that are to be made available to the image by listing them as values of the <code>-moz-context-properties</code> property, and the image needs to opt in to using those properties by using values such as the <code>context-fill</code> value.</p>
If you reference an SVG image in a webpage (such as with the {{htmlelement("img")}} element or as a background image), the SVG image can coordinate with the embedding element (its context) to have the image adopt property values set on the embedding element. To do this the embedding element needs to list the properties that are to be made available to the image by listing them as values of the `-moz-context-properties` property, and the image needs to opt in to using those properties by using values such as the `context-fill` value.

<h2 id="Syntax">Syntax</h2>
## Syntax

<pre class="brush:css">/* Keyword values */
```css
/* Keyword values */
-moz-context-properties: fill;
-moz-context-properties: fill, stroke;

/* Global values */
-moz-context-properties: inherit;
-moz-context-properties: initial;
-moz-context-properties: unset;
</pre>
```

<h3 id="Values">Values</h3>
### Values

<dl>
<dt><code>fill</code></dt>
<dd>Expose the <code>fill</code> value set on the image to the embedded SVG.</dd>
<dt><code>stroke</code></dt>
<dd>Expose the <code>stroke</code> value set on the image to the embedded SVG.</dd>
<dt><code>fill-opacity</code></dt>
<dd>Expose the <code>fill-opacity</code> value set on the image to the embedded SVG.</dd>
<dt><code>stroke-opacity</code></dt>
<dd>Expose the <code>stoke-opacity</code> value set on the image to the embedded SVG.</dd>
</dl>
- `fill`
- : Expose the `fill` value set on the image to the embedded SVG.
- `stroke`
- : Expose the `stroke` value set on the image to the embedded SVG.
- `fill-opacity`
- : Expose the `fill-opacity` value set on the image to the embedded SVG.
- `stroke-opacity`
- : Expose the `stoke-opacity` value set on the image to the embedded SVG.

<h2 id="Formal_definition">Formal definition</h2>
## Formal definition

<p>{{CSSInfo}}</p>
{{CSSInfo}}

<h2 id="Formal_syntax">Formal syntax</h2>
## Formal syntax

{{csssyntax}}

<h2 id="Examples">Examples</h2>
## Examples

<h3 id="Exposing_fill_and_stroke_to_an_SVG_image">Exposing fill and stroke to an SVG image</h3>
### Exposing fill and stroke to an SVG image

<p>In this example we have a simple SVG embedded using an <code>&lt;img&gt;</code> element.</p>
In this example we have a simple SVG embedded using an `<img>` element.

<p>You first need to specify on the embedding element the properties whose values you wish to expose to the embedded SVG, using the <code>-moz-context-properties</code> property. For example:</p>
You first need to specify on the embedding element the properties whose values you wish to expose to the embedded SVG, using the `-moz-context-properties` property. For example:

<pre class="brush: css">.img1 {
```css
.img1 {
width: 100px;
height: 100px;
-moz-context-properties: fill, stroke;
fill: lime;
stroke: purple;
}</pre>
}
```

<p>Now that you've done this, the SVG image can use the values of the {{SVGAttr("fill")}} and {{SVGAttr("stroke")}} properties, for example:</p>
Now that you've done this, the SVG image can use the values of the {{SVGAttr("fill")}} and {{SVGAttr("stroke")}} properties, for example:

<pre class="brush: html">&lt;img class="img1" src="data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg'&gt;
&lt;rect width='100%' height='100%' stroke-width='30px'
fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/&gt;&lt;/svg&gt;"&gt;</pre>
```html
<img class="img1" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'>
<rect width='100%' height='100%' stroke-width='30px'
fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>">
```

<p>Here we've set the image <code>src</code> to a data URI containing a simple SVG image; the <code>&lt;rect&gt;</code> inside has been made to take its <code>fill</code> and <code>stroke</code> values from the {{SVGAttr("fill")}} and {{SVGAttr("stroke")}} set on the <code>&lt;img&gt;</code> element by giving them the <code>context-fill</code>/<code>context-stroke</code> keywords in their values, along with a fallback color for the fill (red) which will be used in the case that the SVG is loaded standalone in a top-level window (where it will have no context element to provide context values). Note that if a color is set directly on the SVG, but then the context color is also specified, the context color overrides the direct color.</p>
Here we've set the image `src` to a data URI containing a simple SVG image; the `<rect>` inside has been made to take its `fill` and `stroke` values from the {{SVGAttr("fill")}} and {{SVGAttr("stroke")}} set on the `<img>` element by giving them the `context-fill`/`context-stroke` keywords in their values, along with a fallback color for the fill (red) which will be used in the case that the SVG is loaded standalone in a top-level window (where it will have no context element to provide context values). Note that if a color is set directly on the SVG, but then the context color is also specified, the context color overrides the direct color.

<div class="note">
<p><strong>Note:</strong> You can find a <a href="https://mdn.github.io/css-examples/moz-context-properties/">working example on Github</a>.</p>
</div>
> **Note:** You can find a [working example on Github](https://mdn.github.io/css-examples/moz-context-properties/).
<h2 id="Specifications">Specifications</h2>
## Specifications

<p>Not part of any standard.</p>
Not part of any standard.

<h2 id="Browser_compatibility">Browser compatibility</h2>
## Browser compatibility

<p>{{Compat}}</p>
{{Compat}}

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

<ul>
<li><a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Mozilla CSS extensions</a></li>
<li><a href="/en-US/docs/Web/Media/images">Using images in HTML</a></li>
<li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the web</a></li>
<li><a href="/en-US/docs/Web/SVG/SVG_as_an_Image">SVG as an image</a></li>
<li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
</ul>
- [Mozilla CSS extensions](/en-US/docs/Web/CSS/Mozilla_Extensions)
- [Using images in HTML](/en-US/docs/Web/Media/images)
- [Adding vector graphics to the web](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)
- [SVG as an image](/en-US/docs/Web/SVG/SVG_as_an_Image)
- [Responsive images](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
81 changes: 41 additions & 40 deletions files/en-us/web/css/-moz-float-edge/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,19 @@ slug: Web/CSS/-moz-float-edge
tags:
- CSS
- CSS Property
- 'CSS:Mozilla Extensions'
- CSS:Mozilla Extensions
- Layout
- NeedsCompatTable
- Non-standard
- 'recipe:css-property'
- recipe:css-property
browser-compat: css.properties.-moz-float-edge
---
<div>{{CSSRef}}{{Non-standard_header}}</div>
{{CSSRef}}{{Non-standard_header}}

<p>The non-standard <strong><code>-moz-float-edge</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property specifies whether the height and width properties of the element include the margin, border, or padding thickness.</p>
The non-standard **`-moz-float-edge`** [CSS](/en-US/docs/Web/CSS) property specifies whether the height and width properties of the element include the margin, border, or padding thickness.

<pre class="brush:css no-line-numbers">/* Keyword values */
```css
/* Keyword values */
-moz-float-edge: border-box;
-moz-float-edge: content-box;
-moz-float-edge: margin-box;
Expand All @@ -25,64 +26,64 @@ browser-compat: css.properties.-moz-float-edge
-moz-float-edge: inherit;
-moz-float-edge: initial;
-moz-float-edge: unset;
</pre>
```

<h2 id="Syntax">Syntax</h2>
## Syntax

<h3 id="Values">Values</h3>
### Values

<dl>
<dt><code>border-box</code></dt>
<dd>The height and width properties include the content, padding and border but not the margin.</dd>
<dt><code>content-box</code></dt>
<dd>The height and width properties include the content, but not the padding, border or margin.</dd>
<dt><code>margin-box</code></dt>
<dd>The height and width properties include the content, padding, border and margin.</dd>
<dt><code>padding-box</code></dt>
<dd>The height and width properties include the content and padding but not the border or margin.</dd>
</dl>
- `border-box`
- : The height and width properties include the content, padding and border but not the margin.
- `content-box`
- : The height and width properties include the content, but not the padding, border or margin.
- `margin-box`
- : The height and width properties include the content, padding, border and margin.
- `padding-box`
- : The height and width properties include the content and padding but not the border or margin.

<h2 id="Formal_definition">Formal definition</h2>
## Formal definition

<p>{{CSSInfo}}</p>
{{CSSInfo}}

<h2 id="Formal_syntax">Formal syntax</h2>
## Formal syntax

{{csssyntax}}

<h2 id="Examples">Examples</h2>
## Examples

<h3 id="HTML">HTML</h3>
### HTML

<pre class="brush: html">&lt;div class="box"&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
&lt;/div&gt;</pre>
```html
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
```

<h3 id="CSS">CSS</h3>
### CSS

<pre class="brush: css">.box {
display: <span class="highVAL">block</span>;
```css
.box {
display: block;
height: 5px;
margin: 0.5em auto 0.5em auto;
color: gray;
-moz-float-edge: margin-box;
box-sizing: border-box;
} </pre>
}
```

<h3 id="Result">Result</h3>
### Result

<p>{{ EmbedLiveSample('Examples') }}</p>
{{ EmbedLiveSample('Examples') }}

<h2 id="Specifications">Specifications</h2>
## Specifications

<p>Not part of any standard.</p>
Not part of any standard.

<h2 id="Browser_compatibility">Browser compatibility</h2>
## Browser compatibility

<p>{{Compat}}</p>
{{Compat}}

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

<ul>
<li>{{bug(432891)}}</li>
</ul>
- {{bug(432891)}}
Loading

0 comments on commit 26f50bd

Please sign in to comment.