Skip to content

Commit

Permalink
Update Web/CSS/max() (#5596)
Browse files Browse the repository at this point in the history
correct links
  • Loading branch information
mfuji09 authored Jun 2, 2021
1 parent c97129f commit 1827d39
Showing 1 changed file with 7 additions and 7 deletions.
14 changes: 7 additions & 7 deletions files/en-us/web/css/max()/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ <h2 id="Syntax">Syntax</h2>

<p>The <code>max()</code> function takes one or more comma-separated expressions as its parameter, with the largest (most positive) expression value used as the value of the property to which it is assigned.</p>

<p>The expressions can be math expressions (using arithmetic operators), literal values, or other expressions, such as {{CSSxRef("attr", "attr()")}}, that evaluate to a valid argument type (like {{CSSxRef("&lt;length&gt;")}}), or nested {{CSSxRef("min", "min()")}} and <code>max()</code> functions.</p>
<p>The expressions can be math expressions (using arithmetic operators), literal values, or other expressions, such as {{CSSxRef("attr()", "attr()")}}, that evaluate to a valid argument type (like {{CSSxRef("&lt;length&gt;")}}), or nested {{CSSxRef("min()", "min()")}} and <code>max()</code> functions.</p>

<p>You can use different units for each value in your expression. You may also use parentheses to establish computation order when needed.</p>

Expand Down Expand Up @@ -70,7 +70,7 @@ <h3 id="Setting_a_minimum_size_for_a_font">Setting a minimum size for a font</h3

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

<p>When <code>max()</code> is used for controlling text size, make sure the text is always large enough to read. A suggestion is to use the {{CSSxRef("min", "min()")}} function nested within a <code>max()</code> that has as its second value a <a href="/en-US/docs/Web/CSS/length#Relative_length_units">relative length unit</a> that is always large enough to read. For example:</p>
<p>When <code>max()</code> is used for controlling text size, make sure the text is always large enough to read. A suggestion is to use the {{CSSxRef("min()", "min()")}} function nested within a <code>max()</code> that has as its second value a <a href="/en-US/docs/Web/CSS/length#relative_length_units">relative length unit</a> that is always large enough to read. For example:</p>

<pre class="brush: css;">small {
font-size: max(min(0.5vw, 0.5em), 1rem);
Expand All @@ -79,7 +79,7 @@ <h2 id="Accessibility_concerns">Accessibility concerns</h2>
<p>This ensures a minimum size of <em>1rem</em>, with a text size that scales if the page is zoomed.</p>

<ul>
<li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
<li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li>
</ul>

Expand Down Expand Up @@ -109,8 +109,8 @@ <h2 id="Browser_compatibility">Browser compatibility</h2>
<h2 id="See_also">See also</h2>

<ul>
<li>{{CSSxRef("calc", "calc()")}}</li>
<li>{{CSSxRef("clamp", "clamp()")}}</li>
<li>{{CSSxRef("min", "min()")}}</li>
<li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS Values</a></li>
<li>{{CSSxRef("calc()", "calc()")}}</li>
<li>{{CSSxRef("clamp()", "clamp()")}}</li>
<li>{{CSSxRef("min()", "min()")}}</li>
<li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">CSS Values</a></li>
</ul>

0 comments on commit 1827d39

Please sign in to comment.