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

flaws and double brackets in image #2855

Merged
merged 2 commits into from
Mar 4, 2021
Merged

flaws and double brackets in image #2855

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3c2122c
flaws and double brackets in image
rachelandrew Mar 4, 2021
b412d9c
fix
rachelandrew Mar 4, 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
26 changes: 13 additions & 13 deletions files/en-us/web/css/image/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,12 @@ <h2 id="Syntax">Syntax</h2>
<p>The <code>&lt;image&gt;</code> data type can be represented with any of the following:</p>

<ul>
<li>An image denoted by the {{CSSxRef("&lt;url&gt;")}} data type</li>
<li>An image denoted by the {{CSSxRef("url()", "url()")}} data type</li>
<li>A {{CSSxRef("&lt;gradient&gt;")}} data type</li>
<li>A part of the webpage, defined by the {{CSSxRef("element")}} function</li>
<li>An image, image fragment or solid patch of color, defined by the {{CSSxRef("image()")}} function</li>
<li>A blending of two or more images defined by the {{CSSxRef("cross-fade")}} function.</li>
<li>A selection of images chosen based on resolution defined by the {{CSSxRef("image-set")}} function.</li>
<li>A part of the webpage, defined by the {{CSSxRef("element()","element()")}} function</li>
<li>An image, image fragment or solid patch of color, defined by the {{CSSxRef("image()","image()")}} function</li>
<li>A blending of two or more images defined by the {{CSSxRef("cross-fade()","cross-fade()")}} function.</li>
<li>A selection of images chosen based on resolution defined by the {{CSSxRef("image-set()","image-set()")}} function.</li>
</ul>

<h2 id="Description">Description</h2>
Expand Down Expand Up @@ -78,7 +78,7 @@ <h2 id="Description">Description</h2>
<td>?</td>
</tr>
<tr>
<td>{{CSSxRef("symbols")}} for @counter-style</td>
<td>{{CSSxRef("symbols()")}} for @counter-style</td>
<td>At risk feature. If supported, the browser-defined size matching the usual cursor size on the client's system</td>
</tr>
<tr>
Expand All @@ -96,14 +96,14 @@ <h2 id="Description">Description</h2>
<li>If the specified size defines <em>neither the width nor the height</em>, the concrete object size is calculated so that it matches the intrinsic aspect ratio of the image but without exceeding the default object size in any dimension. If the image has no intrinsic aspect ratio, the intrinsic aspect ratio of the object it applies to is used; if this object has none, the missing width or height are taken from the default object size.</li>
</ul>

<div class="note"><strong>Note:</strong> Not all browsers support every type of image on every property. See the <a href="/en-US/docs/Web/CSS/image#Browser_compatibility">browser compatibility section</a> for details.</div>
<div class="note"><strong>Note:</strong> Not all browsers support every type of image on every property. See the <a href="/en-US/docs/Web/CSS/image#browser_compatibility">browser compatibility section</a> for details.</div>

<h2 id="Accessibility_concerns">Accessibility concerns</h2>

<p>Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.</p>

<ul>
<li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
<li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
<li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li>
</ul>

Expand Down Expand Up @@ -148,7 +148,7 @@ <h2 id="Specifications">Specifications</h2>
<tr>
<td>{{SpecName("CSS4 Images", "#typedef-image", "&lt;image&gt;")}}</td>
<td>{{Spec2("CSS4 Images")}}</td>
<td>Adds {{CSSxRef("element()")}}, {{CSSxRef("image()")}}, {{CSSxRef("image-set")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("repeating-conic-gradient", "repeating-conic-gradient()")}}, and {{CSSxRef("image-resolution")}}.</td>
<td>Adds {{CSSxRef("element()","element()")}}, {{CSSxRef("image()","image()")}}, {{CSSxRef("image-set()","image-set()")}}, {{CSSxRef("conic-gradient()","conic-gradient()")}}, {{CSSxRef("repeating-conic-gradient()", "repeating-conic-gradient()")}}, and {{CSSxRef("image-resolution")}}.</td>
</tr>
<tr>
<td>{{SpecName("CSS3 Images", "#typedef-image", "&lt;image&gt;")}}</td>
Expand All @@ -166,8 +166,8 @@ <h2 id="See_also">See also</h2>

<ul>
<li>{{CSSxRef("&lt;gradient&gt;")}}</li>
<li>{{CSSxRef("element")}}</li>
<li>{{CSSxRef("imagefunction", "image()")}}</li>
<li>{{CSSxRef("image-set")}}</li>
<li>{{CSSxRef("cross-fade")}}</li>
<li>{{CSSxRef("element()","element()")}}</li>
<li>{{CSSxRef("image()", "image()")}}</li>
<li>{{CSSxRef("image-set()","image-set()")}}</li>
<li>{{CSSxRef("cross-fade()","cross-fade()")}}</li>
</ul>