CSS • Chapter 38 • Foundations to Production
Responsive Sizing Functions
Every topic includes a CSS/HTML coding example, ten focused teaching examples, code explanation, expected result, practice, and responsive/translated-layout checks.
38.1 calc
calc is part of the CSS system covered in Chapter 38. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For calc in Chapter 38, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for calc, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 38, topic 1.
Concept in plain language
calc is part of the CSS system covered in Chapter 38. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal language selector for calc. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 38, topic 1, example 1.
Example 2: Change one value
Change one important CSS value in the course card example for calc. Predict the visual difference before reloading the page. Chapter 38, topic 1, example 2.
Example 3: Narrow-screen test
Test calc in the navigation bar at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 38, topic 1, example 3.
Example 4: Translated-text test
Translate the article into a language with longer labels while using calc. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 38, topic 1, example 4.
Example 5: Arabic/Persian test
Switch the profile panel to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 38, topic 1, example 5.
Example 6: Accessibility test
Check calc in the search form with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 38, topic 1, example 6.
Example 7: Cascade test
Add a competing rule to the dashboard and determine why the declaration for calc wins or loses using the browser's Styles and Computed panels. Chapter 38, topic 1, example 7.
Example 8: Content-stress test
Fill the photo gallery with very long words, URLs, translated text, images, and nested controls. Adjust calc without hiding meaningful content. Chapter 38, topic 1, example 8.
Example 9: Refactoring test
Rewrite the pricing table so calc uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 38, topic 1, example 9.
Example 10: Production review
Review calc in the lesson sidebar for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 38, topic 1, example 10.
CSS/HTML coding example
<!-- HTML -->
<div class="panel">Calculated width</div>
<style>
.panel { width:calc(100% - 2rem); }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate calc.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- calc() combines compatible numeric values.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates calc without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 38, topic 1.
Practice exercise
Build a fresh example for calc from Chapter 38. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
38.2 min
min is part of the CSS system covered in Chapter 38. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For min in Chapter 38, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for min, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 38, topic 2.
Concept in plain language
min is part of the CSS system covered in Chapter 38. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal article for min. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 38, topic 2, example 1.
Example 2: Change one value
Change one important CSS value in the profile panel example for min. Predict the visual difference before reloading the page. Chapter 38, topic 2, example 2.
Example 3: Narrow-screen test
Test min in the search form at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 38, topic 2, example 3.
Example 4: Translated-text test
Translate the dashboard into a language with longer labels while using min. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 38, topic 2, example 4.
Example 5: Arabic/Persian test
Switch the photo gallery to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 38, topic 2, example 5.
Example 6: Accessibility test
Check min in the pricing table with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 38, topic 2, example 6.
Example 7: Cascade test
Add a competing rule to the lesson sidebar and determine why the declaration for min wins or loses using the browser's Styles and Computed panels. Chapter 38, topic 2, example 7.
Example 8: Content-stress test
Fill the contact form with very long words, URLs, translated text, images, and nested controls. Adjust min without hiding meaningful content. Chapter 38, topic 2, example 8.
Example 9: Refactoring test
Rewrite the button group so min uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 38, topic 2, example 9.
Example 10: Production review
Review min in the data table for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 38, topic 2, example 10.
CSS/HTML coding example
<!-- HTML -->
<div class="fluid">Fluid sizing</div>
<style>
.fluid{inline-size:min(100%,40rem);padding:1rem;background:#f3e8ff}
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate min.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- The sizing function demonstrates min.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates min without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 38, topic 2.
Practice exercise
Build a fresh example for min from Chapter 38. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
38.3 max
max is part of the CSS system covered in Chapter 38. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For max in Chapter 38, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for max, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 38, topic 3.
Concept in plain language
max is part of the CSS system covered in Chapter 38. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal dashboard for max. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 38, topic 3, example 1.
Example 2: Change one value
Change one important CSS value in the photo gallery example for max. Predict the visual difference before reloading the page. Chapter 38, topic 3, example 2.
Example 3: Narrow-screen test
Test max in the pricing table at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 38, topic 3, example 3.
Example 4: Translated-text test
Translate the lesson sidebar into a language with longer labels while using max. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 38, topic 3, example 4.
Example 5: Arabic/Persian test
Switch the contact form to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 38, topic 3, example 5.
Example 6: Accessibility test
Check max in the button group with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 38, topic 3, example 6.
Example 7: Cascade test
Add a competing rule to the data table and determine why the declaration for max wins or loses using the browser's Styles and Computed panels. Chapter 38, topic 3, example 7.
Example 8: Content-stress test
Fill the media player with very long words, URLs, translated text, images, and nested controls. Adjust max without hiding meaningful content. Chapter 38, topic 3, example 8.
Example 9: Refactoring test
Rewrite the notification so max uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 38, topic 3, example 9.
Example 10: Production review
Review max in the language selector for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 38, topic 3, example 10.
CSS/HTML coding example
<!-- HTML -->
<div class="fluid">Fluid sizing</div>
<style>
.fluid{inline-size:max(16rem,40vw);padding:1rem;background:#f3e8ff}
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate max.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- The sizing function demonstrates max.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates max without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 38, topic 3.
Practice exercise
Build a fresh example for max from Chapter 38. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
38.4 clamp
clamp is part of the CSS system covered in Chapter 38. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For clamp in Chapter 38, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for clamp, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 38, topic 4.
Concept in plain language
clamp is part of the CSS system covered in Chapter 38. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal lesson sidebar for clamp. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 38, topic 4, example 1.
Example 2: Change one value
Change one important CSS value in the contact form example for clamp. Predict the visual difference before reloading the page. Chapter 38, topic 4, example 2.
Example 3: Narrow-screen test
Test clamp in the button group at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 38, topic 4, example 3.
Example 4: Translated-text test
Translate the data table into a language with longer labels while using clamp. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 38, topic 4, example 4.
Example 5: Arabic/Persian test
Switch the media player to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 38, topic 4, example 5.
Example 6: Accessibility test
Check clamp in the notification with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 38, topic 4, example 6.
Example 7: Cascade test
Add a competing rule to the language selector and determine why the declaration for clamp wins or loses using the browser's Styles and Computed panels. Chapter 38, topic 4, example 7.
Example 8: Content-stress test
Fill the course card with very long words, URLs, translated text, images, and nested controls. Adjust clamp without hiding meaningful content. Chapter 38, topic 4, example 8.
Example 9: Refactoring test
Rewrite the navigation bar so clamp uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 38, topic 4, example 9.
Example 10: Production review
Review clamp in the article for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 38, topic 4, example 10.
CSS/HTML coding example
<!-- HTML -->
<h1 class="title">Fluid title</h1>
<style>
.title { font-size:clamp(1.75rem,4vw,3.5rem); }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate clamp.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- clamp() provides a fluid preferred value with minimum and maximum limits.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates clamp without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 38, topic 4.
Practice exercise
Build a fresh example for clamp from Chapter 38. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
38.5 Nested Math Functions
Nested Math Functions is part of the CSS system covered in Chapter 38. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For Nested Math Functions in Chapter 38, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for Nested Math Functions, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 38, topic 5.
Concept in plain language
Nested Math Functions is part of the CSS system covered in Chapter 38. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal data table for Nested Math Functions. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 38, topic 5, example 1.
Example 2: Change one value
Change one important CSS value in the media player example for Nested Math Functions. Predict the visual difference before reloading the page. Chapter 38, topic 5, example 2.
Example 3: Narrow-screen test
Test Nested Math Functions in the notification at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 38, topic 5, example 3.
Example 4: Translated-text test
Translate the language selector into a language with longer labels while using Nested Math Functions. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 38, topic 5, example 4.
Example 5: Arabic/Persian test
Switch the course card to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 38, topic 5, example 5.
Example 6: Accessibility test
Check Nested Math Functions in the navigation bar with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 38, topic 5, example 6.
Example 7: Cascade test
Add a competing rule to the article and determine why the declaration for Nested Math Functions wins or loses using the browser's Styles and Computed panels. Chapter 38, topic 5, example 7.
Example 8: Content-stress test
Fill the profile panel with very long words, URLs, translated text, images, and nested controls. Adjust Nested Math Functions without hiding meaningful content. Chapter 38, topic 5, example 8.
Example 9: Refactoring test
Rewrite the search form so Nested Math Functions uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 38, topic 5, example 9.
Example 10: Production review
Review Nested Math Functions in the dashboard for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 38, topic 5, example 10.
CSS/HTML coding example
<!-- HTML -->
<div class="fluid">Fluid sizing</div>
<style>
.fluid{inline-size:calc(clamp(1rem,2vw,2rem) + 1px);padding:1rem;background:#f3e8ff}
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate Nested Math Functions.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- The sizing function demonstrates Nested Math Functions.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates Nested Math Functions without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 38, topic 5.
Practice exercise
Build a fresh example for Nested Math Functions from Chapter 38. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
Chapter 38 review — 10 questions and answers
1. What should you inspect first when calc does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for calc. Then reduce the example until the winning declaration is clear.
2. How should calc be checked before publishing?
Answer: Test calc on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.
3. What should you inspect first when min does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for min. Then reduce the example until the winning declaration is clear.
4. How should min be checked before publishing?
Answer: Test min on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.
5. What should you inspect first when max does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for max. Then reduce the example until the winning declaration is clear.
6. How should max be checked before publishing?
Answer: Test max on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.
7. What should you inspect first when clamp does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for clamp. Then reduce the example until the winning declaration is clear.
8. How should clamp be checked before publishing?
Answer: Test clamp on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.
9. What should you inspect first when Nested Math Functions does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for Nested Math Functions. Then reduce the example until the winning declaration is clear.
10. How should Nested Math Functions be checked before publishing?
Answer: Test Nested Math Functions on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.