When a card grid looks correct but keyboard focus jumps in a confusing order, changing the visual position of boxes is not enough. A page has source order, visual order and linear reading or navigation order, and those sequences can diverge.

The CSS Display Level 4 draft defines reading-flow for block, flex and grid containers. Its values can keep DOM order or derive a reading sequence from flex or grid layout. The property affects speech rendering and linear sequential navigation, but it does not change layout or painting order.

This guide teaches the property with cautious, current-spec reasoning: logical source order first, value-by-value examples, reading-order overrides, writing modes, responsive layouts, fallback behaviour, keyboard and assistive-technology checks, explained practice and parent decisions.

Punggol families can use this guide in short sessions around homework, CCAs and rest. The examples are proposed learning activities. They do not claim a physical tuition branch, timetable, fee, class size, school relationship or guaranteed result.

Use disposable data and repositories, preserve backups and check version-sensitive details against the linked primary source. Current documentation settles a technical contract; observation and explanation turn that contract into usable knowledge.

Source order, visual layout order and linear reading or navigation order are distinct concepts. That is the invariant to preserve when names, data or surrounding project details change.

A page can look correct while focus or speech moves differently. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is judging accessibility from a screenshot alone. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

// DOM: A B C
// visual: C A B
// focus: A B C

Read the trace, not just the last line

Trace every item across all three sequences. Write the trace as a sequence of labelled states. For CSS reading-flow, the decisive evidence may be an iterator close, a cached classification, a glyph-spacing decision or a repository object path; printing only the final Boolean or filename can hide the mechanism that produced it.

For “Three orders must be drawn separately”, separate contract from coincidence. The contract is “Source order, visual layout order and linear reading or navigation order are distinct concepts.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Write the DOM sequence, visual sequence and expected focus sequence before adding CSS.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework evidence folder. Model “Three orders must be drawn separately” with subject folders, draft answers and a reviewed copy. Before touching a tool, state which part of the case corresponds to the input, why “Source order, visual layout order and linear reading or navigation order are distinct concepts.” should remain invariant and what observation would expose judging accessibility from a screenshot alone.

Case 2: CCA media catalogue. Contrast “Three orders must be drawn separately” with event folders, selected images and caption notes. Before touching a tool, state which part of the case corresponds to the input, why “Source order, visual layout order and linear reading or navigation order are distinct concepts.” should remain invariant and what observation would expose judging accessibility from a screenshot alone.

Case 3: science investigation archive. Stress-test “Three orders must be drawn separately” with raw readings, cleaned tables and chart exports. Before touching a tool, state which part of the case corresponds to the input, why “Source order, visual layout order and linear reading or navigation order are distinct concepts.” should remain invariant and what observation would expose judging accessibility from a screenshot alone.

Case 4: revision-note builder. Explain “Three orders must be drawn separately” with topic notes, worked examples and a generated index. Before touching a tool, state which part of the case corresponds to the input, why “Source order, visual layout order and linear reading or navigation order are distinct concepts.” should remain invariant and what observation would expose judging accessibility from a screenshot alone.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals judging accessibility from a screenshot alone.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Write the DOM sequence, visual sequence and expected focus sequence before adding CSS.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS reading-flow to support “Three orders must be drawn separately”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests Source order, visual layout order and linear reading or navigation order are distinct concepts.?”, and “Can you make a smaller example of judging accessibility from a screenshot alone?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Draw the sequences for three links reordered with flex order. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Do not change reading order until the intended logical order is explicit. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “Three orders must be drawn separately” means the learner can predict the ordinary case, recognise judging accessibility from a screenshot alone, diagnose the earliest mistaken assumption, recover with “Write the DOM sequence, visual sequence and expected focus sequence before adding CSS.” and defend this decision: Do not change reading order until the intended logical order is explicit. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

The initial reading-flow value is normal, which follows the order of elements in the DOM. That is the invariant to preserve when names, data or surrounding project details change.

Normal preserves the document’s logical sequence for linear use. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is assuming grid placement automatically rewrites focus order. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

grid{reading-flow:normal}

Read the trace, not just the last line

Trace DOM position rather than screen coordinates. Write the trace as a sequence of labelled states. For CSS reading-flow, the decisive evidence may be an iterator close, a cached classification, a glyph-spacing decision or a repository object path; printing only the final Boolean or filename can hide the mechanism that produced it.

For “normal follows DOM order”, separate contract from coincidence. The contract is “The initial reading-flow value is normal, which follows the order of elements in the DOM.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Remove reading-flow and test tab order against source markup.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework evidence folder. Model “normal follows DOM order” with subject folders, draft answers and a reviewed copy. Before touching a tool, state which part of the case corresponds to the input, why “The initial reading-flow value is normal, which follows the order of elements in the DOM.” should remain invariant and what observation would expose assuming grid placement automatically rewrites focus order.

Case 2: CCA media catalogue. Contrast “normal follows DOM order” with event folders, selected images and caption notes. Before touching a tool, state which part of the case corresponds to the input, why “The initial reading-flow value is normal, which follows the order of elements in the DOM.” should remain invariant and what observation would expose assuming grid placement automatically rewrites focus order.

Case 3: science investigation archive. Stress-test “normal follows DOM order” with raw readings, cleaned tables and chart exports. Before touching a tool, state which part of the case corresponds to the input, why “The initial reading-flow value is normal, which follows the order of elements in the DOM.” should remain invariant and what observation would expose assuming grid placement automatically rewrites focus order.

Case 4: revision-note builder. Explain “normal follows DOM order” with topic notes, worked examples and a generated index. Before touching a tool, state which part of the case corresponds to the input, why “The initial reading-flow value is normal, which follows the order of elements in the DOM.” should remain invariant and what observation would expose assuming grid placement automatically rewrites focus order.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals assuming grid placement automatically rewrites focus order.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Remove reading-flow and test tab order against source markup.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS reading-flow to support “normal follows DOM order”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests The initial reading-flow value is normal, which follows the order of elements in the DOM.?”, and “Can you make a smaller example of assuming grid placement automatically rewrites focus order?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Place grid items in named areas out of source order. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Use a logical DOM as the strongest baseline. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “normal follows DOM order” means the learner can predict the ordinary case, recognise assuming grid placement automatically rewrites focus order, diagnose the earliest mistaken assumption, recover with “Remove reading-flow and test tab order against source markup.” and defend this decision: Use a logical DOM as the strongest baseline. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

A block, flex or grid container with a valid reading-flow value other than normal is a reading flow container. That is the invariant to preserve when names, data or surrounding project details change.

The effect is scoped to the container’s children rather than the whole page by accident. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is setting a value on one item and expecting its siblings to reorder globally. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

nav{display:grid;reading-flow:grid-rows}

Read the trace, not just the last line

Trace container boundary and child list. Write the trace as a sequence of labelled states. For CSS reading-flow, the decisive evidence may be an iterator close, a cached classification, a glyph-spacing decision or a repository object path; printing only the final Boolean or filename can hide the mechanism that produced it.

For “The property creates a reading flow container”, separate contract from coincidence. The contract is “A block, flex or grid container with a valid reading-flow value other than normal is a reading flow container.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Apply reading-flow to the intended parent and identify its direct children.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework evidence folder. Model “The property creates a reading flow container” with subject folders, draft answers and a reviewed copy. Before touching a tool, state which part of the case corresponds to the input, why “A block, flex or grid container with a valid reading-flow value other than normal is a reading flow container.” should remain invariant and what observation would expose setting a value on one item and expecting its siblings to reorder globally.

Case 2: CCA media catalogue. Contrast “The property creates a reading flow container” with event folders, selected images and caption notes. Before touching a tool, state which part of the case corresponds to the input, why “A block, flex or grid container with a valid reading-flow value other than normal is a reading flow container.” should remain invariant and what observation would expose setting a value on one item and expecting its siblings to reorder globally.

Case 3: science investigation archive. Stress-test “The property creates a reading flow container” with raw readings, cleaned tables and chart exports. Before touching a tool, state which part of the case corresponds to the input, why “A block, flex or grid container with a valid reading-flow value other than normal is a reading flow container.” should remain invariant and what observation would expose setting a value on one item and expecting its siblings to reorder globally.

Case 4: revision-note builder. Explain “The property creates a reading flow container” with topic notes, worked examples and a generated index. Before touching a tool, state which part of the case corresponds to the input, why “A block, flex or grid container with a valid reading-flow value other than normal is a reading flow container.” should remain invariant and what observation would expose setting a value on one item and expecting its siblings to reorder globally.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals setting a value on one item and expecting its siblings to reorder globally.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Apply reading-flow to the intended parent and identify its direct children.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS reading-flow to support “The property creates a reading flow container”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests A block, flex or grid container with a valid reading-flow value other than normal is a reading flow container.?”, and “Can you make a smaller example of setting a value on one item and expecting its siblings to reorder globally?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Nest a card component inside a page grid. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Scope reading behaviour to the smallest coherent component. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “The property creates a reading flow container” means the learner can predict the ordinary case, recognise setting a value on one item and expecting its siblings to reorder globally, diagnose the earliest mistaken assumption, recover with “Apply reading-flow to the intended parent and identify its direct children.” and defend this decision: Scope reading behaviour to the smallest coherent component. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

The property controls the order in which elements are rendered to speech or reached by linear sequential navigation. That is the invariant to preserve when names, data or surrounding project details change.

Its purpose is linear reading and focus coordination, not geometry. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is using it to move a box on screen. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.cards{reading-flow:grid-rows}

Read the trace, not just the last line

Trace focus movement independently of box coordinates. Write the trace as a sequence of labelled states. For CSS reading-flow, the decisive evidence may be an iterator close, a cached classification, a glyph-spacing decision or a repository object path; printing only the final Boolean or filename can hide the mechanism that produced it.

For “reading-flow affects speech and sequential navigation”, separate contract from coincidence. The contract is “The property controls the order in which elements are rendered to speech or reached by linear sequential navigation.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Test Tab order and accessibility output while separately inspecting layout.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework evidence folder. Model “reading-flow affects speech and sequential navigation” with subject folders, draft answers and a reviewed copy. Before touching a tool, state which part of the case corresponds to the input, why “The property controls the order in which elements are rendered to speech or reached by linear sequential navigation.” should remain invariant and what observation would expose using it to move a box on screen.

Case 2: CCA media catalogue. Contrast “reading-flow affects speech and sequential navigation” with event folders, selected images and caption notes. Before touching a tool, state which part of the case corresponds to the input, why “The property controls the order in which elements are rendered to speech or reached by linear sequential navigation.” should remain invariant and what observation would expose using it to move a box on screen.

Case 3: science investigation archive. Stress-test “reading-flow affects speech and sequential navigation” with raw readings, cleaned tables and chart exports. Before touching a tool, state which part of the case corresponds to the input, why “The property controls the order in which elements are rendered to speech or reached by linear sequential navigation.” should remain invariant and what observation would expose using it to move a box on screen.

Case 4: revision-note builder. Explain “reading-flow affects speech and sequential navigation” with topic notes, worked examples and a generated index. Before touching a tool, state which part of the case corresponds to the input, why “The property controls the order in which elements are rendered to speech or reached by linear sequential navigation.” should remain invariant and what observation would expose using it to move a box on screen.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals using it to move a box on screen.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Test Tab order and accessibility output while separately inspecting layout.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS reading-flow to support “reading-flow affects speech and sequential navigation”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests The property controls the order in which elements are rendered to speech or reached by linear sequential navigation.?”, and “Can you make a smaller example of using it to move a box on screen?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Explain why the screenshot can remain identical after adding reading-flow. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Pair accessibility tests with visual regression tests. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “reading-flow affects speech and sequential navigation” means the learner can predict the ordinary case, recognise using it to move a box on screen, diagnose the earliest mistaken assumption, recover with “Test Tab order and accessibility output while separately inspecting layout.” and defend this decision: Pair accessibility tests with visual regression tests. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

The specification states that reading-flow affects neither layout nor painting order. That is the invariant to preserve when names, data or surrounding project details change.

This boundary prevents authors from expecting one declaration to redesign the page. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is adding reading-flow and debugging why cards stay put. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.grid{display:grid;reading-flow:grid-columns}

Read the trace, not just the last line

Trace layout calculation before reading sequence calculation. Write the trace as a sequence of labelled states. For CSS reading-flow, the decisive evidence may be an iterator close, a cached classification, a glyph-spacing decision or a repository object path; printing only the final Boolean or filename can hide the mechanism that produced it.

For “It does not affect layout or painting”, separate contract from coincidence. The contract is “The specification states that reading-flow affects neither layout nor painting order.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Use grid, flex, order or DOM changes for layout, and reading-flow only for the linear sequence.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework evidence folder. Model “It does not affect layout or painting” with subject folders, draft answers and a reviewed copy. Before touching a tool, state which part of the case corresponds to the input, why “The specification states that reading-flow affects neither layout nor painting order.” should remain invariant and what observation would expose adding reading-flow and debugging why cards stay put.

Case 2: CCA media catalogue. Contrast “It does not affect layout or painting” with event folders, selected images and caption notes. Before touching a tool, state which part of the case corresponds to the input, why “The specification states that reading-flow affects neither layout nor painting order.” should remain invariant and what observation would expose adding reading-flow and debugging why cards stay put.

Case 3: science investigation archive. Stress-test “It does not affect layout or painting” with raw readings, cleaned tables and chart exports. Before touching a tool, state which part of the case corresponds to the input, why “The specification states that reading-flow affects neither layout nor painting order.” should remain invariant and what observation would expose adding reading-flow and debugging why cards stay put.

Case 4: revision-note builder. Explain “It does not affect layout or painting” with topic notes, worked examples and a generated index. Before touching a tool, state which part of the case corresponds to the input, why “The specification states that reading-flow affects neither layout nor painting order.” should remain invariant and what observation would expose adding reading-flow and debugging why cards stay put.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals adding reading-flow and debugging why cards stay put.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Use grid, flex, order or DOM changes for layout, and reading-flow only for the linear sequence.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS reading-flow to support “It does not affect layout or painting”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests The specification states that reading-flow affects neither layout nor painting order.?”, and “Can you make a smaller example of adding reading-flow and debugging why cards stay put?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Compare computed positions before and after reading-flow. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Choose separate tools for visual and linear order. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “It does not affect layout or painting” means the learner can predict the ordinary case, recognise adding reading-flow and debugging why cards stay put, diagnose the earliest mistaken assumption, recover with “Use grid, flex, order or DOM changes for layout, and reading-flow only for the linear sequence.” and defend this decision: Choose separate tools for visual and linear order. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

source-order follows DOM order while creating a reading flow container that enables reading-order on direct children. That is the invariant to preserve when names, data or surrounding project details change.

It provides an explicit local sequence without deriving it from visual placement. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is expecting source-order alone to rearrange children. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.panel{reading-flow:source-order}
.urgent{reading-order:-1}

Read the trace, not just the last line

Trace ordinal group then DOM tie-break. Write the trace as a sequence of labelled states. For CSS reading-flow, the decisive evidence may be an iterator close, a cached classification, a glyph-spacing decision or a repository object path; printing only the final Boolean or filename can hide the mechanism that produced it.

For “source-order enables child overrides”, separate contract from coincidence. The contract is “source-order follows DOM order while creating a reading flow container that enables reading-order on direct children.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Apply reading-order to a direct child and compare integer groups.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework evidence folder. Model “source-order enables child overrides” with subject folders, draft answers and a reviewed copy. Before touching a tool, state which part of the case corresponds to the input, why “source-order follows DOM order while creating a reading flow container that enables reading-order on direct children.” should remain invariant and what observation would expose expecting source-order alone to rearrange children.

Case 2: CCA media catalogue. Contrast “source-order enables child overrides” with event folders, selected images and caption notes. Before touching a tool, state which part of the case corresponds to the input, why “source-order follows DOM order while creating a reading flow container that enables reading-order on direct children.” should remain invariant and what observation would expose expecting source-order alone to rearrange children.

Case 3: science investigation archive. Stress-test “source-order enables child overrides” with raw readings, cleaned tables and chart exports. Before touching a tool, state which part of the case corresponds to the input, why “source-order follows DOM order while creating a reading flow container that enables reading-order on direct children.” should remain invariant and what observation would expose expecting source-order alone to rearrange children.

Case 4: revision-note builder. Explain “source-order enables child overrides” with topic notes, worked examples and a generated index. Before touching a tool, state which part of the case corresponds to the input, why “source-order follows DOM order while creating a reading flow container that enables reading-order on direct children.” should remain invariant and what observation would expose expecting source-order alone to rearrange children.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals expecting source-order alone to rearrange children.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Apply reading-order to a direct child and compare integer groups.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS reading-flow to support “source-order enables child overrides”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests source-order follows DOM order while creating a reading flow container that enables reading-order on direct children.?”, and “Can you make a smaller example of expecting source-order alone to rearrange children?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Move the third direct link into reading group -1. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Use overrides sparingly and visibly. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “source-order enables child overrides” means the learner can predict the ordinary case, recognise expecting source-order alone to rearrange children, diagnose the earliest mistaken assumption, recover with “Apply reading-order to a direct child and compare integer groups.” and defend this decision: Use overrides sparingly and visibly. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

On a flex container, flex-visual follows the visual reading order while taking writing mode into account. That is the invariant to preserve when names, data or surrounding project details change.

Visual left-to-right or top-to-bottom perception depends on language direction and writing mode. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is equating visual order with one fixed left-to-right rule. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.row{display:flex;flex-direction:row-reverse;reading-flow:flex-visual}

Read the trace, not just the last line

Trace physical placement and writing-mode-aware reading direction. Write the trace as a sequence of labelled states. For CSS reading-flow, the decisive evidence may be an iterator close, a cached classification, a glyph-spacing decision or a repository object path; printing only the final Boolean or filename can hide the mechanism that produced it.

For “flex-visual follows visual reading order”, separate contract from coincidence. The contract is “On a flex container, flex-visual follows the visual reading order while taking writing mode into account.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Record writing-mode, direction, flex direction and actual placement before predicting.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework evidence folder. Model “flex-visual follows visual reading order” with subject folders, draft answers and a reviewed copy. Before touching a tool, state which part of the case corresponds to the input, why “On a flex container, flex-visual follows the visual reading order while taking writing mode into account.” should remain invariant and what observation would expose equating visual order with one fixed left-to-right rule.

Case 2: CCA media catalogue. Contrast “flex-visual follows visual reading order” with event folders, selected images and caption notes. Before touching a tool, state which part of the case corresponds to the input, why “On a flex container, flex-visual follows the visual reading order while taking writing mode into account.” should remain invariant and what observation would expose equating visual order with one fixed left-to-right rule.

Case 3: science investigation archive. Stress-test “flex-visual follows visual reading order” with raw readings, cleaned tables and chart exports. Before touching a tool, state which part of the case corresponds to the input, why “On a flex container, flex-visual follows the visual reading order while taking writing mode into account.” should remain invariant and what observation would expose equating visual order with one fixed left-to-right rule.

Case 4: revision-note builder. Explain “flex-visual follows visual reading order” with topic notes, worked examples and a generated index. Before touching a tool, state which part of the case corresponds to the input, why “On a flex container, flex-visual follows the visual reading order while taking writing mode into account.” should remain invariant and what observation would expose equating visual order with one fixed left-to-right rule.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals equating visual order with one fixed left-to-right rule.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Record writing-mode, direction, flex direction and actual placement before predicting.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS reading-flow to support “flex-visual follows visual reading order”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests On a flex container, flex-visual follows the visual reading order while taking writing mode into account.?”, and “Can you make a smaller example of equating visual order with one fixed left-to-right rule?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Test row-reverse in left-to-right and right-to-left contexts. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Use flex-visual only when visual sequence is the intended linear sequence. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “flex-visual follows visual reading order” means the learner can predict the ordinary case, recognise equating visual order with one fixed left-to-right rule, diagnose the earliest mistaken assumption, recover with “Record writing-mode, direction, flex direction and actual placement before predicting.” and defend this decision: Use flex-visual only when visual sequence is the intended linear sequence. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

On a flex container, flex-flow follows the direction established by flex flow. That is the invariant to preserve when names, data or surrounding project details change.

This differs from asking for visual reading order under all writing modes. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is treating flex-flow and flex-visual as synonyms. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.steps{display:flex;flex-flow:row-reverse wrap;reading-flow:flex-flow}

Read the trace, not just the last line

Trace flex-flow order before focus order. Write the trace as a sequence of labelled states. For CSS reading-flow, the decisive evidence may be an iterator close, a cached classification, a glyph-spacing decision or a repository object path; printing only the final Boolean or filename can hide the mechanism that produced it.

For “flex-flow follows the flex-flow direction”, separate contract from coincidence. The contract is “On a flex container, flex-flow follows the direction established by flex flow.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Build a matrix of flex-direction, wrapping and writing mode for the actual component.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework evidence folder. Model “flex-flow follows the flex-flow direction” with subject folders, draft answers and a reviewed copy. Before touching a tool, state which part of the case corresponds to the input, why “On a flex container, flex-flow follows the direction established by flex flow.” should remain invariant and what observation would expose treating flex-flow and flex-visual as synonyms.

Case 2: CCA media catalogue. Contrast “flex-flow follows the flex-flow direction” with event folders, selected images and caption notes. Before touching a tool, state which part of the case corresponds to the input, why “On a flex container, flex-flow follows the direction established by flex flow.” should remain invariant and what observation would expose treating flex-flow and flex-visual as synonyms.

Case 3: science investigation archive. Stress-test “flex-flow follows the flex-flow direction” with raw readings, cleaned tables and chart exports. Before touching a tool, state which part of the case corresponds to the input, why “On a flex container, flex-flow follows the direction established by flex flow.” should remain invariant and what observation would expose treating flex-flow and flex-visual as synonyms.

Case 4: revision-note builder. Explain “flex-flow follows the flex-flow direction” with topic notes, worked examples and a generated index. Before touching a tool, state which part of the case corresponds to the input, why “On a flex container, flex-flow follows the direction established by flex flow.” should remain invariant and what observation would expose treating flex-flow and flex-visual as synonyms.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals treating flex-flow and flex-visual as synonyms.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Build a matrix of flex-direction, wrapping and writing mode for the actual component.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS reading-flow to support “flex-flow follows the flex-flow direction”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests On a flex container, flex-flow follows the direction established by flex flow.?”, and “Can you make a smaller example of treating flex-flow and flex-visual as synonyms?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Compare flex-flow and flex-visual on a reversed row. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Choose the value whose rule matches the component. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “flex-flow follows the flex-flow direction” means the learner can predict the ordinary case, recognise treating flex-flow and flex-visual as synonyms, diagnose the earliest mistaken assumption, recover with “Build a matrix of flex-direction, wrapping and writing mode for the actual component.” and defend this decision: Choose the value whose rule matches the component. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

On a grid container, grid-rows follows the visual order of grid items by row, taking writing mode into account. That is the invariant to preserve when names, data or surrounding project details change.

Named areas and dense placement can make row order differ from DOM order. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is assuming grid row placement automatically changes keyboard order under normal. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.grid{display:grid;reading-flow:grid-rows}

Read the trace, not just the last line

Trace grid row, position within row and writing mode. Write the trace as a sequence of labelled states. For CSS reading-flow, the decisive evidence may be an iterator close, a cached classification, a glyph-spacing decision or a repository object path; printing only the final Boolean or filename can hide the mechanism that produced it.

For “grid-rows follows visual rows”, separate contract from coincidence. The contract is “On a grid container, grid-rows follows the visual order of grid items by row, taking writing mode into account.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Map each item to a visual row and then traverse rows in the relevant writing mode.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework evidence folder. Model “grid-rows follows visual rows” with subject folders, draft answers and a reviewed copy. Before touching a tool, state which part of the case corresponds to the input, why “On a grid container, grid-rows follows the visual order of grid items by row, taking writing mode into account.” should remain invariant and what observation would expose assuming grid row placement automatically changes keyboard order under normal.

Case 2: CCA media catalogue. Contrast “grid-rows follows visual rows” with event folders, selected images and caption notes. Before touching a tool, state which part of the case corresponds to the input, why “On a grid container, grid-rows follows the visual order of grid items by row, taking writing mode into account.” should remain invariant and what observation would expose assuming grid row placement automatically changes keyboard order under normal.

Case 3: science investigation archive. Stress-test “grid-rows follows visual rows” with raw readings, cleaned tables and chart exports. Before touching a tool, state which part of the case corresponds to the input, why “On a grid container, grid-rows follows the visual order of grid items by row, taking writing mode into account.” should remain invariant and what observation would expose assuming grid row placement automatically changes keyboard order under normal.

Case 4: revision-note builder. Explain “grid-rows follows visual rows” with topic notes, worked examples and a generated index. Before touching a tool, state which part of the case corresponds to the input, why “On a grid container, grid-rows follows the visual order of grid items by row, taking writing mode into account.” should remain invariant and what observation would expose assuming grid row placement automatically changes keyboard order under normal.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals assuming grid row placement automatically changes keyboard order under normal.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Map each item to a visual row and then traverse rows in the relevant writing mode.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS reading-flow to support “grid-rows follows visual rows”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests On a grid container, grid-rows follows the visual order of grid items by row, taking writing mode into account.?”, and “Can you make a smaller example of assuming grid row placement automatically changes keyboard order under normal?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Arrange four DOM items in named areas and list row traversal. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Use when row-wise visual reading is the intended accessible sequence. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “grid-rows follows visual rows” means the learner can predict the ordinary case, recognise assuming grid row placement automatically changes keyboard order under normal, diagnose the earliest mistaken assumption, recover with “Map each item to a visual row and then traverse rows in the relevant writing mode.” and defend this decision: Use when row-wise visual reading is the intended accessible sequence. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

On a grid container, grid-columns follows visual order by column with writing mode considered. That is the invariant to preserve when names, data or surrounding project details change.

A dashboard may communicate in columns rather than rows. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is assuming every grid should be read row-major. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.board{display:grid;reading-flow:grid-columns}

Read the trace, not just the last line

Trace column membership and within-column order. Write the trace as a sequence of labelled states. For CSS reading-flow, the decisive evidence may be an iterator close, a cached classification, a glyph-spacing decision or a repository object path; printing only the final Boolean or filename can hide the mechanism that produced it.

For “grid-columns follows visual columns”, separate contract from coincidence. The contract is “On a grid container, grid-columns follows visual order by column with writing mode considered.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Identify whether users understand the component by row or column before choosing.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework evidence folder. Model “grid-columns follows visual columns” with subject folders, draft answers and a reviewed copy. Before touching a tool, state which part of the case corresponds to the input, why “On a grid container, grid-columns follows visual order by column with writing mode considered.” should remain invariant and what observation would expose assuming every grid should be read row-major.

Case 2: CCA media catalogue. Contrast “grid-columns follows visual columns” with event folders, selected images and caption notes. Before touching a tool, state which part of the case corresponds to the input, why “On a grid container, grid-columns follows visual order by column with writing mode considered.” should remain invariant and what observation would expose assuming every grid should be read row-major.

Case 3: science investigation archive. Stress-test “grid-columns follows visual columns” with raw readings, cleaned tables and chart exports. Before touching a tool, state which part of the case corresponds to the input, why “On a grid container, grid-columns follows visual order by column with writing mode considered.” should remain invariant and what observation would expose assuming every grid should be read row-major.

Case 4: revision-note builder. Explain “grid-columns follows visual columns” with topic notes, worked examples and a generated index. Before touching a tool, state which part of the case corresponds to the input, why “On a grid container, grid-columns follows visual order by column with writing mode considered.” should remain invariant and what observation would expose assuming every grid should be read row-major.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals assuming every grid should be read row-major.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Identify whether users understand the component by row or column before choosing.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS reading-flow to support “grid-columns follows visual columns”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests On a grid container, grid-columns follows visual order by column with writing mode considered.?”, and “Can you make a smaller example of assuming every grid should be read row-major?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Compare the same grid under grid-rows and grid-columns. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Choose from information structure, not stylistic preference. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “grid-columns follows visual columns” means the learner can predict the ordinary case, recognise assuming every grid should be read row-major, diagnose the earliest mistaken assumption, recover with “Identify whether users understand the component by row or column before choosing.” and defend this decision: Choose from information structure, not stylistic preference. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

On a grid container, grid-order follows order-modified document order. That is the invariant to preserve when names, data or surrounding project details change.

It is normally like DOM order unless the CSS order property changes ordinal groups. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is confusing grid-order with visual row traversal. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.grid{display:grid;reading-flow:grid-order}
.first{order:-1}

Read the trace, not just the last line

Trace order integer first, DOM tie second. Write the trace as a sequence of labelled states. For CSS reading-flow, the decisive evidence may be an iterator close, a cached classification, a glyph-spacing decision or a repository object path; printing only the final Boolean or filename can hide the mechanism that produced it.

For “grid-order uses order-modified document order”, separate contract from coincidence. The contract is “On a grid container, grid-order follows order-modified document order.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “List each item’s order value and DOM position before sorting ordinal groups.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework evidence folder. Model “grid-order uses order-modified document order” with subject folders, draft answers and a reviewed copy. Before touching a tool, state which part of the case corresponds to the input, why “On a grid container, grid-order follows order-modified document order.” should remain invariant and what observation would expose confusing grid-order with visual row traversal.

Case 2: CCA media catalogue. Contrast “grid-order uses order-modified document order” with event folders, selected images and caption notes. Before touching a tool, state which part of the case corresponds to the input, why “On a grid container, grid-order follows order-modified document order.” should remain invariant and what observation would expose confusing grid-order with visual row traversal.

Case 3: science investigation archive. Stress-test “grid-order uses order-modified document order” with raw readings, cleaned tables and chart exports. Before touching a tool, state which part of the case corresponds to the input, why “On a grid container, grid-order follows order-modified document order.” should remain invariant and what observation would expose confusing grid-order with visual row traversal.

Case 4: revision-note builder. Explain “grid-order uses order-modified document order” with topic notes, worked examples and a generated index. Before touching a tool, state which part of the case corresponds to the input, why “On a grid container, grid-order follows order-modified document order.” should remain invariant and what observation would expose confusing grid-order with visual row traversal.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals confusing grid-order with visual row traversal.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: List each item’s order value and DOM position before sorting ordinal groups.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS reading-flow to support “grid-order uses order-modified document order”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests On a grid container, grid-order follows order-modified document order.?”, and “Can you make a smaller example of confusing grid-order with visual row traversal?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Give one item order -1 and two items order 0. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Use only when order values already express the intended linear sequence. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “grid-order uses order-modified document order” means the learner can predict the ordinary case, recognise confusing grid-order with visual row traversal, diagnose the earliest mistaken assumption, recover with “List each item’s order value and DOM position before sorting ordinal groups.” and defend this decision: Use only when order values already express the intended linear sequence. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

flex-* values apply meaningfully to flex containers, while grid-* values apply meaningfully to grid containers. That is the invariant to preserve when names, data or surrounding project details change.

A syntactically valid declaration can be semantically irrelevant on the wrong layout. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is setting grid-rows on a flex box and assuming row traversal. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.list{display:flex;reading-flow:grid-rows}

Read the trace, not just the last line

Trace property value and container eligibility as separate checks. Write the trace as a sequence of labelled states. For CSS reading-flow, the decisive evidence may be an iterator close, a cached classification, a glyph-spacing decision or a repository object path; printing only the final Boolean or filename can hide the mechanism that produced it.

For “Flex and grid values only take effect on matching containers”, separate contract from coincidence. The contract is “flex-* values apply meaningfully to flex containers, while grid-* values apply meaningfully to grid containers.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Check computed display and reading-flow together.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework evidence folder. Model “Flex and grid values only take effect on matching containers” with subject folders, draft answers and a reviewed copy. Before touching a tool, state which part of the case corresponds to the input, why “flex-* values apply meaningfully to flex containers, while grid-* values apply meaningfully to grid containers.” should remain invariant and what observation would expose setting grid-rows on a flex box and assuming row traversal.

Case 2: CCA media catalogue. Contrast “Flex and grid values only take effect on matching containers” with event folders, selected images and caption notes. Before touching a tool, state which part of the case corresponds to the input, why “flex-* values apply meaningfully to flex containers, while grid-* values apply meaningfully to grid containers.” should remain invariant and what observation would expose setting grid-rows on a flex box and assuming row traversal.

Case 3: science investigation archive. Stress-test “Flex and grid values only take effect on matching containers” with raw readings, cleaned tables and chart exports. Before touching a tool, state which part of the case corresponds to the input, why “flex-* values apply meaningfully to flex containers, while grid-* values apply meaningfully to grid containers.” should remain invariant and what observation would expose setting grid-rows on a flex box and assuming row traversal.

Case 4: revision-note builder. Explain “Flex and grid values only take effect on matching containers” with topic notes, worked examples and a generated index. Before touching a tool, state which part of the case corresponds to the input, why “flex-* values apply meaningfully to flex containers, while grid-* values apply meaningfully to grid containers.” should remain invariant and what observation would expose setting grid-rows on a flex box and assuming row traversal.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals setting grid-rows on a flex box and assuming row traversal.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Check computed display and reading-flow together.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS reading-flow to support “Flex and grid values only take effect on matching containers”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests flex-* values apply meaningfully to flex containers, while grid-* values apply meaningfully to grid containers.?”, and “Can you make a smaller example of setting grid-rows on a flex box and assuming row traversal?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Create matching and mismatching container fixtures. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Validate component layout before blaming focus tooling. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “Flex and grid values only take effect on matching containers” means the learner can predict the ordinary case, recognise setting grid-rows on a flex box and assuming row traversal, diagnose the earliest mistaken assumption, recover with “Check computed display and reading-flow together.” and defend this decision: Validate component layout before blaming focus tooling. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

For flex-* and grid-* reading-flow values, the order property is taken into account. That is the invariant to preserve when names, data or surrounding project details change.

Visual and linear order can therefore depend on ordinal groups as well as placement. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is debugging focus only from DOM and grid coordinates. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.item.promoted{order:-1}

Read the trace, not just the last line

Trace order group before layout-derived tie-breaking. Write the trace as a sequence of labelled states. For CSS reading-flow, the decisive evidence may be an iterator close, a cached classification, a glyph-spacing decision or a repository object path; printing only the final Boolean or filename can hide the mechanism that produced it.

For “The order property participates in derived flows”, separate contract from coincidence. The contract is “For flex-* and grid-* reading-flow values, the order property is taken into account.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Record order values alongside layout positions.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework evidence folder. Model “The order property participates in derived flows” with subject folders, draft answers and a reviewed copy. Before touching a tool, state which part of the case corresponds to the input, why “For flex-* and grid-* reading-flow values, the order property is taken into account.” should remain invariant and what observation would expose debugging focus only from DOM and grid coordinates.

Case 2: CCA media catalogue. Contrast “The order property participates in derived flows” with event folders, selected images and caption notes. Before touching a tool, state which part of the case corresponds to the input, why “For flex-* and grid-* reading-flow values, the order property is taken into account.” should remain invariant and what observation would expose debugging focus only from DOM and grid coordinates.

Case 3: science investigation archive. Stress-test “The order property participates in derived flows” with raw readings, cleaned tables and chart exports. Before touching a tool, state which part of the case corresponds to the input, why “For flex-* and grid-* reading-flow values, the order property is taken into account.” should remain invariant and what observation would expose debugging focus only from DOM and grid coordinates.

Case 4: revision-note builder. Explain “The order property participates in derived flows” with topic notes, worked examples and a generated index. Before touching a tool, state which part of the case corresponds to the input, why “For flex-* and grid-* reading-flow values, the order property is taken into account.” should remain invariant and what observation would expose debugging focus only from DOM and grid coordinates.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals debugging focus only from DOM and grid coordinates.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Record order values alongside layout positions.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS reading-flow to support “The order property participates in derived flows”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests For flex-* and grid-* reading-flow values, the order property is taken into account.?”, and “Can you make a smaller example of debugging focus only from DOM and grid coordinates?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Compare all-zero order values with one promoted item. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Avoid scattered order overrides that nobody can audit. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “The order property participates in derived flows” means the learner can predict the ordinary case, recognise debugging focus only from DOM and grid coordinates, diagnose the earliest mistaken assumption, recover with “Record order values alongside layout positions.” and defend this decision: Avoid scattered order overrides that nobody can audit. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

The reading-order property takes an integer on direct children of a reading flow container; lower groups are visited first. That is the invariant to preserve when names, data or surrounding project details change.

It offers a local override without changing layout. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is using positive tabindex to force a similar sequence. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.panel{reading-flow:source-order}
.panel>.priority{reading-order:-1}

Read the trace, not just the last line

Trace integer group then reading-flow tie-break. Write the trace as a sequence of labelled states. For CSS reading-flow, the decisive evidence may be an iterator close, a cached classification, a glyph-spacing decision or a repository object path; printing only the final Boolean or filename can hide the mechanism that produced it.

For “reading-order assigns ordinal groups”, separate contract from coincidence. The contract is “The reading-order property takes an integer on direct children of a reading flow container; lower groups are visited first.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Assign the smallest necessary integer changes and leave visual focus cues intact.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework evidence folder. Model “reading-order assigns ordinal groups” with subject folders, draft answers and a reviewed copy. Before touching a tool, state which part of the case corresponds to the input, why “The reading-order property takes an integer on direct children of a reading flow container; lower groups are visited first.” should remain invariant and what observation would expose using positive tabindex to force a similar sequence.

Case 2: CCA media catalogue. Contrast “reading-order assigns ordinal groups” with event folders, selected images and caption notes. Before touching a tool, state which part of the case corresponds to the input, why “The reading-order property takes an integer on direct children of a reading flow container; lower groups are visited first.” should remain invariant and what observation would expose using positive tabindex to force a similar sequence.

Case 3: science investigation archive. Stress-test “reading-order assigns ordinal groups” with raw readings, cleaned tables and chart exports. Before touching a tool, state which part of the case corresponds to the input, why “The reading-order property takes an integer on direct children of a reading flow container; lower groups are visited first.” should remain invariant and what observation would expose using positive tabindex to force a similar sequence.

Case 4: revision-note builder. Explain “reading-order assigns ordinal groups” with topic notes, worked examples and a generated index. Before touching a tool, state which part of the case corresponds to the input, why “The reading-order property takes an integer on direct children of a reading flow container; lower groups are visited first.” should remain invariant and what observation would expose using positive tabindex to force a similar sequence.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals using positive tabindex to force a similar sequence.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Assign the smallest necessary integer changes and leave visual focus cues intact.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS reading-flow to support “reading-order assigns ordinal groups”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests The reading-order property takes an integer on direct children of a reading flow container; lower groups are visited first.?”, and “Can you make a smaller example of using positive tabindex to force a similar sequence?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Set values -1, 0 and 2 on direct siblings. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Prefer reading-order over positive tabindex when this CSS model is supported and appropriate. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “reading-order assigns ordinal groups” means the learner can predict the ordinary case, recognise using positive tabindex to force a similar sequence, diagnose the earliest mistaken assumption, recover with “Assign the smallest necessary integer changes and leave visual focus cues intact.” and defend this decision: Prefer reading-order over positive tabindex when this CSS model is supported and appropriate. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

When two items have equivalent reading-order, the parent reading-flow determines their tie order. That is the invariant to preserve when names, data or surrounding project details change.

An integer override does not erase the base sequence. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is assigning every child zero and expecting a custom order. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

.grid{reading-flow:grid-rows}
.grid>*{reading-order:0}

Read the trace, not just the last line

Trace group equality then row traversal. Write the trace as a sequence of labelled states. For CSS reading-flow, the decisive evidence may be an iterator close, a cached classification, a glyph-spacing decision or a repository object path; printing only the final Boolean or filename can hide the mechanism that produced it.

For “Ties return to the parent reading-flow rule”, separate contract from coincidence. The contract is “When two items have equivalent reading-order, the parent reading-flow determines their tie order.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Test tie groups with the parent value visible in the fixture.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework evidence folder. Model “Ties return to the parent reading-flow rule” with subject folders, draft answers and a reviewed copy. Before touching a tool, state which part of the case corresponds to the input, why “When two items have equivalent reading-order, the parent reading-flow determines their tie order.” should remain invariant and what observation would expose assigning every child zero and expecting a custom order.

Case 2: CCA media catalogue. Contrast “Ties return to the parent reading-flow rule” with event folders, selected images and caption notes. Before touching a tool, state which part of the case corresponds to the input, why “When two items have equivalent reading-order, the parent reading-flow determines their tie order.” should remain invariant and what observation would expose assigning every child zero and expecting a custom order.

Case 3: science investigation archive. Stress-test “Ties return to the parent reading-flow rule” with raw readings, cleaned tables and chart exports. Before touching a tool, state which part of the case corresponds to the input, why “When two items have equivalent reading-order, the parent reading-flow determines their tie order.” should remain invariant and what observation would expose assigning every child zero and expecting a custom order.

Case 4: revision-note builder. Explain “Ties return to the parent reading-flow rule” with topic notes, worked examples and a generated index. Before touching a tool, state which part of the case corresponds to the input, why “When two items have equivalent reading-order, the parent reading-flow determines their tie order.” should remain invariant and what observation would expose assigning every child zero and expecting a custom order.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals assigning every child zero and expecting a custom order.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Test tie groups with the parent value visible in the fixture.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS reading-flow to support “Ties return to the parent reading-flow rule”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests When two items have equivalent reading-order, the parent reading-flow determines their tie order.?”, and “Can you make a smaller example of assigning every child zero and expecting a custom order?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Give two items the same override in different grid rows. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Keep tie behaviour predictable by limiting overrides. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “Ties return to the parent reading-flow rule” means the learner can predict the ordinary case, recognise assigning every child zero and expecting a custom order, diagnose the earliest mistaken assumption, recover with “Test tie groups with the parent value visible in the fixture.” and defend this decision: Keep tie behaviour predictable by limiting overrides. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

reading-flow can coordinate linear order with different layouts selected by media queries while a sensible source order remains the baseline. That is the invariant to preserve when names, data or surrounding project details change.

One DOM can have multiple legitimate visual presentations. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is hard-coding one reading override that fits desktop and harms mobile. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

@media(min-width:60rem){.cards{reading-flow:grid-rows}}

Read the trace, not just the last line

Trace source sequence and each breakpoint’s visual sequence. Write the trace as a sequence of labelled states. For CSS reading-flow, the decisive evidence may be an iterator close, a cached classification, a glyph-spacing decision or a repository object path; printing only the final Boolean or filename can hide the mechanism that produced it.

For “Responsive layouts are the central use case”, separate contract from coincidence. The contract is “reading-flow can coordinate linear order with different layouts selected by media queries while a sensible source order remains the baseline.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Start with the most fundamental source order, then apply component-specific reading-flow inside layout breakpoints only when needed.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework evidence folder. Model “Responsive layouts are the central use case” with subject folders, draft answers and a reviewed copy. Before touching a tool, state which part of the case corresponds to the input, why “reading-flow can coordinate linear order with different layouts selected by media queries while a sensible source order remains the baseline.” should remain invariant and what observation would expose hard-coding one reading override that fits desktop and harms mobile.

Case 2: CCA media catalogue. Contrast “Responsive layouts are the central use case” with event folders, selected images and caption notes. Before touching a tool, state which part of the case corresponds to the input, why “reading-flow can coordinate linear order with different layouts selected by media queries while a sensible source order remains the baseline.” should remain invariant and what observation would expose hard-coding one reading override that fits desktop and harms mobile.

Case 3: science investigation archive. Stress-test “Responsive layouts are the central use case” with raw readings, cleaned tables and chart exports. Before touching a tool, state which part of the case corresponds to the input, why “reading-flow can coordinate linear order with different layouts selected by media queries while a sensible source order remains the baseline.” should remain invariant and what observation would expose hard-coding one reading override that fits desktop and harms mobile.

Case 4: revision-note builder. Explain “Responsive layouts are the central use case” with topic notes, worked examples and a generated index. Before touching a tool, state which part of the case corresponds to the input, why “reading-flow can coordinate linear order with different layouts selected by media queries while a sensible source order remains the baseline.” should remain invariant and what observation would expose hard-coding one reading override that fits desktop and harms mobile.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals hard-coding one reading override that fits desktop and harms mobile.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Start with the most fundamental source order, then apply component-specific reading-flow inside layout breakpoints only when needed.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS reading-flow to support “Responsive layouts are the central use case”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests reading-flow can coordinate linear order with different layouts selected by media queries while a sensible source order remains the baseline.?”, and “Can you make a smaller example of hard-coding one reading override that fits desktop and harms mobile?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Design a mobile list and desktop dashboard from one DOM. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Test every active breakpoint, not only design mock-ups. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “Responsive layouts are the central use case” means the learner can predict the ordinary case, recognise hard-coding one reading override that fits desktop and harms mobile, diagnose the earliest mistaken assumption, recover with “Start with the most fundamental source order, then apply component-specific reading-flow inside layout breakpoints only when needed.” and defend this decision: Test every active breakpoint, not only design mock-ups. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

Each component or hierarchical level can have different ordering requirements. That is the invariant to preserve when names, data or surrounding project details change.

A page-wide declaration can flatten independent structures into a confusing sequence. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is setting reading-flow on a giant wrapper because several cards are misordered. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

main{reading-flow:source-order}
.card-grid{reading-flow:grid-rows}

Read the trace, not just the last line

Trace outer siblings and inner siblings separately. Write the trace as a sequence of labelled states. For CSS reading-flow, the decisive evidence may be an iterator close, a cached classification, a glyph-spacing decision or a repository object path; printing only the final Boolean or filename can hide the mechanism that produced it.

For “Nested components need local reasoning”, separate contract from coincidence. The contract is “Each component or hierarchical level can have different ordering requirements.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Apply it at the parent whose children form one coherent navigation unit.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework evidence folder. Model “Nested components need local reasoning” with subject folders, draft answers and a reviewed copy. Before touching a tool, state which part of the case corresponds to the input, why “Each component or hierarchical level can have different ordering requirements.” should remain invariant and what observation would expose setting reading-flow on a giant wrapper because several cards are misordered.

Case 2: CCA media catalogue. Contrast “Nested components need local reasoning” with event folders, selected images and caption notes. Before touching a tool, state which part of the case corresponds to the input, why “Each component or hierarchical level can have different ordering requirements.” should remain invariant and what observation would expose setting reading-flow on a giant wrapper because several cards are misordered.

Case 3: science investigation archive. Stress-test “Nested components need local reasoning” with raw readings, cleaned tables and chart exports. Before touching a tool, state which part of the case corresponds to the input, why “Each component or hierarchical level can have different ordering requirements.” should remain invariant and what observation would expose setting reading-flow on a giant wrapper because several cards are misordered.

Case 4: revision-note builder. Explain “Nested components need local reasoning” with topic notes, worked examples and a generated index. Before touching a tool, state which part of the case corresponds to the input, why “Each component or hierarchical level can have different ordering requirements.” should remain invariant and what observation would expose setting reading-flow on a giant wrapper because several cards are misordered.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals setting reading-flow on a giant wrapper because several cards are misordered.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Apply it at the parent whose children form one coherent navigation unit.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS reading-flow to support “Nested components need local reasoning”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests Each component or hierarchical level can have different ordering requirements.?”, and “Can you make a smaller example of setting reading-flow on a giant wrapper because several cards are misordered?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Draw a page with a menu and nested card grid. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Scope and document every non-normal reading flow. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “Nested components need local reasoning” means the learner can predict the ordinary case, recognise setting reading-flow on a giant wrapper because several cards are misordered, diagnose the earliest mistaken assumption, recover with “Apply it at the parent whose children form one coherent navigation unit.” and defend this decision: Scope and document every non-normal reading flow. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

Because reading-flow is a modern draft feature, support must be checked; a logical DOM remains the safe fallback. That is the invariant to preserve when names, data or surrounding project details change.

Progressive enhancement works only when the baseline is usable. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is shipping a visually scrambled DOM and relying on universal support. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

console.log(CSS.supports('reading-flow: grid-rows'))

Read the trace, not just the last line

Trace support result before interpreting focus behaviour. Write the trace as a sequence of labelled states. For CSS reading-flow, the decisive evidence may be an iterator close, a cached classification, a glyph-spacing decision or a repository object path; printing only the final Boolean or filename can hide the mechanism that produced it.

For “Unsupported browsers fall back to source order behaviour”, separate contract from coincidence. The contract is “Because reading-flow is a modern draft feature, support must be checked; a logical DOM remains the safe fallback.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Use CSS.supports for diagnostics, consult current compatibility data and test an unsupported environment.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework evidence folder. Model “Unsupported browsers fall back to source order behaviour” with subject folders, draft answers and a reviewed copy. Before touching a tool, state which part of the case corresponds to the input, why “Because reading-flow is a modern draft feature, support must be checked; a logical DOM remains the safe fallback.” should remain invariant and what observation would expose shipping a visually scrambled DOM and relying on universal support.

Case 2: CCA media catalogue. Contrast “Unsupported browsers fall back to source order behaviour” with event folders, selected images and caption notes. Before touching a tool, state which part of the case corresponds to the input, why “Because reading-flow is a modern draft feature, support must be checked; a logical DOM remains the safe fallback.” should remain invariant and what observation would expose shipping a visually scrambled DOM and relying on universal support.

Case 3: science investigation archive. Stress-test “Unsupported browsers fall back to source order behaviour” with raw readings, cleaned tables and chart exports. Before touching a tool, state which part of the case corresponds to the input, why “Because reading-flow is a modern draft feature, support must be checked; a logical DOM remains the safe fallback.” should remain invariant and what observation would expose shipping a visually scrambled DOM and relying on universal support.

Case 4: revision-note builder. Explain “Unsupported browsers fall back to source order behaviour” with topic notes, worked examples and a generated index. Before touching a tool, state which part of the case corresponds to the input, why “Because reading-flow is a modern draft feature, support must be checked; a logical DOM remains the safe fallback.” should remain invariant and what observation would expose shipping a visually scrambled DOM and relying on universal support.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals shipping a visually scrambled DOM and relying on universal support.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Use CSS.supports for diagnostics, consult current compatibility data and test an unsupported environment.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS reading-flow to support “Unsupported browsers fall back to source order behaviour”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests Because reading-flow is a modern draft feature, support must be checked; a logical DOM remains the safe fallback.?”, and “Can you make a smaller example of shipping a visually scrambled DOM and relying on universal support?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Disable the declaration and navigate the component. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Never use the feature to excuse an incoherent DOM. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “Unsupported browsers fall back to source order behaviour” means the learner can predict the ordinary case, recognise shipping a visually scrambled DOM and relying on universal support, diagnose the earliest mistaken assumption, recover with “Use CSS.supports for diagnostics, consult current compatibility data and test an unsupported environment.” and defend this decision: Never use the feature to excuse an incoherent DOM. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

A complete check covers sequential keyboard navigation, accessibility-tree or screen-reader output, visible focus and unchanged layout. That is the invariant to preserve when names, data or surrounding project details change.

No single automated rule proves the intended sequence. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is calling a DOM snapshot an accessibility test. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

// expected focus: search, results, filters

Read the trace, not just the last line

Trace each Tab stop and spoken label against the plan. Write the trace as a sequence of labelled states. For CSS reading-flow, the decisive evidence may be an iterator close, a cached classification, a glyph-spacing decision or a repository object path; printing only the final Boolean or filename can hide the mechanism that produced it.

For “Testing needs keyboard, speech and visual evidence”, separate contract from coincidence. The contract is “A complete check covers sequential keyboard navigation, accessibility-tree or screen-reader output, visible focus and unchanged layout.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Record the expected item sequence and exercise representative browsers and assistive technology.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework evidence folder. Model “Testing needs keyboard, speech and visual evidence” with subject folders, draft answers and a reviewed copy. Before touching a tool, state which part of the case corresponds to the input, why “A complete check covers sequential keyboard navigation, accessibility-tree or screen-reader output, visible focus and unchanged layout.” should remain invariant and what observation would expose calling a DOM snapshot an accessibility test.

Case 2: CCA media catalogue. Contrast “Testing needs keyboard, speech and visual evidence” with event folders, selected images and caption notes. Before touching a tool, state which part of the case corresponds to the input, why “A complete check covers sequential keyboard navigation, accessibility-tree or screen-reader output, visible focus and unchanged layout.” should remain invariant and what observation would expose calling a DOM snapshot an accessibility test.

Case 3: science investigation archive. Stress-test “Testing needs keyboard, speech and visual evidence” with raw readings, cleaned tables and chart exports. Before touching a tool, state which part of the case corresponds to the input, why “A complete check covers sequential keyboard navigation, accessibility-tree or screen-reader output, visible focus and unchanged layout.” should remain invariant and what observation would expose calling a DOM snapshot an accessibility test.

Case 4: revision-note builder. Explain “Testing needs keyboard, speech and visual evidence” with topic notes, worked examples and a generated index. Before touching a tool, state which part of the case corresponds to the input, why “A complete check covers sequential keyboard navigation, accessibility-tree or screen-reader output, visible focus and unchanged layout.” should remain invariant and what observation would expose calling a DOM snapshot an accessibility test.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals calling a DOM snapshot an accessibility test.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Record the expected item sequence and exercise representative browsers and assistive technology.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS reading-flow to support “Testing needs keyboard, speech and visual evidence”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests A complete check covers sequential keyboard navigation, accessibility-tree or screen-reader output, visible focus and unchanged layout.?”, and “Can you make a smaller example of calling a DOM snapshot an accessibility test?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Create a five-item checklist for one grid component. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Treat specification conformance and user testing as complementary. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “Testing needs keyboard, speech and visual evidence” means the learner can predict the ordinary case, recognise calling a DOM snapshot an accessibility test, diagnose the earliest mistaken assumption, recover with “Record the expected item sequence and exercise representative browsers and assistive technology.” and defend this decision: Treat specification conformance and user testing as complementary. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

The source document should express the underlying logical order; reading-flow and reading-order are for layouts with legitimate alternative sequences. That is the invariant to preserve when names, data or surrounding project details change.

Semantic HTML remains useful without CSS and across tools. The useful question is not “Which line should I copy?” but “Which state, value or rendering decision does this operation control?” Answering that question prevents a correct-looking result from hiding a wrong mental model.

The most revealing near-miss is using CSS to conceal a fundamentally wrong DOM order. A learner should predict the result first, run the smallest safe case, label the observation and explain the earliest point where the prediction diverges. This turns an error into evidence rather than a verdict on ability.

Core worked example

// Prefer logical HTML order first

Read the trace, not just the last line

Trace meaning without CSS before evaluating layout-specific alternatives. Write the trace as a sequence of labelled states. For CSS reading-flow, the decisive evidence may be an iterator close, a cached classification, a glyph-spacing decision or a repository object path; printing only the final Boolean or filename can hide the mechanism that produced it.

For “Choose source repair before an override”, separate contract from coincidence. The contract is “The source document should express the underlying logical order; reading-flow and reading-order are for layouts with legitimate alternative sequences.” and comes from the primary specification or manual. Coincidence is what happened on one machine, font, filesystem or repository. Record both, then use “Ask whether one order is universally correct; if yes, fix the DOM, otherwise consider a scoped responsive reading flow.” to decide whether another observation challenges the model or merely reflects the environment.

Four purposeful transfer cases

Case 1: homework evidence folder. Model “Choose source repair before an override” with subject folders, draft answers and a reviewed copy. Before touching a tool, state which part of the case corresponds to the input, why “The source document should express the underlying logical order; reading-flow and reading-order are for layouts with legitimate alternative sequences.” should remain invariant and what observation would expose using CSS to conceal a fundamentally wrong DOM order.

Case 2: CCA media catalogue. Contrast “Choose source repair before an override” with event folders, selected images and caption notes. Before touching a tool, state which part of the case corresponds to the input, why “The source document should express the underlying logical order; reading-flow and reading-order are for layouts with legitimate alternative sequences.” should remain invariant and what observation would expose using CSS to conceal a fundamentally wrong DOM order.

Case 3: science investigation archive. Stress-test “Choose source repair before an override” with raw readings, cleaned tables and chart exports. Before touching a tool, state which part of the case corresponds to the input, why “The source document should express the underlying logical order; reading-flow and reading-order are for layouts with legitimate alternative sequences.” should remain invariant and what observation would expose using CSS to conceal a fundamentally wrong DOM order.

Case 4: revision-note builder. Explain “Choose source repair before an override” with topic notes, worked examples and a generated index. Before touching a tool, state which part of the case corresponds to the input, why “The source document should express the underlying logical order; reading-flow and reading-order are for layouts with legitimate alternative sequences.” should remain invariant and what observation would expose using CSS to conceal a fundamentally wrong DOM order.

Diagnostic route

• Model check: draw or list the exact values, objects, paths, characters or repository states before the operation.
• Boundary check: construct the smallest safe input that reveals using CSS to conceal a fundamentally wrong DOM order.
• Evidence check: distinguish a displayed result from ownership, caching, consumption, font behaviour or object type.
• Repair check: Ask whether one order is universally correct; if yes, fix the DOM, otherwise consider a scoped responsive reading flow.
• Transfer check: repeat the rule in a second context and name what remains unchanged.

A parent does not need to memorise CSS reading-flow to support “Choose source repair before an override”. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence tests The source document should express the underlying logical order; reading-flow and reading-order are for layouts with legitimate alternative sequences.?”, and “Can you make a smaller example of using CSS to conceal a fundamentally wrong DOM order?” These questions keep ownership with the learner while making the reasoning visible.

Practice with an explained answer

Task. Decide for a form, dashboard and decorative card montage. Write the prediction before running anything. Include one ordinary case and one boundary case, then explain the difference in two causal sentences.

Decision and transfer

Use overrides only when multiple layouts carry the same coherent meaning. Prefer the choice whose semantics and failure modes are easiest to explain for the actual job. Shorter syntax is useful only when it preserves that clarity.

Mastery of “Choose source repair before an override” means the learner can predict the ordinary case, recognise using CSS to conceal a fundamentally wrong DOM order, diagnose the earliest mistaken assumption, recover with “Ask whether one order is universally correct; if yes, fix the DOM, otherwise consider a scoped responsive reading flow.” and defend this decision: Use overrides only when multiple layouts carry the same coherent meaning. Once that causal chain is stable, continue to the next chapter rather than adding repetitions of the same surface exercise.

Previous section · Contents · Next section

For CSS reading-flow, start with evidence rather than a label such as careless. Ask for one prediction and one trace. If the first transition is wrong, rebuild the model. If the model is sound but reference use is weak, practise finding the governing contract. If routine cases work but boundaries fail, vary one condition. If explanations transfer, move to a small project.

Punggol family routines are often busy, so use one complete CSS reading-flow prediction–observation–explanation cycle while attention is good. Ten to twenty focused minutes can be enough. Keep a four-line record: concept, prediction, observed difference and next test. Stop when fatigue replaces reasoning.

Use disposable fixtures, temporary directories and test repositories. Backups remain necessary. The activities in this guide are proposed home-learning exercises, not advertised lesson times, branch facilities, school affiliations or outcome guarantees.

1. Draw three sequences

Map DOM, visual and focus order for one three-card layout. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

2. Compare every value

Build a decision table for normal, source-order, flex and grid values. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

3. Test a reversed flex row

Predict flex-visual and flex-flow under one writing mode. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

4. Traverse a named grid

Compare row, column and order-modified sequences. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

5. Apply one child override

Move one direct child to reading group -1 without changing layout. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

6. Design two breakpoints

Keep logical mobile source order and justify a desktop reading flow. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

7. Run an accessibility checklist

Record keyboard, speech, focus and visual evidence. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

8. Defend source repair

Choose DOM reordering or CSS flow for three components. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

Frequently asked questions

How long should a practice session be?

Use one complete CSS reading-flow prediction–observation–explanation cycle while attention remains good. Ten to twenty focused minutes can be enough.

Should every option or method be memorised?

No. For CSS reading-flow, memorise governing distinctions and practise retrieving the primary reference. Understanding means predicting and explaining, not reciting a parameter list.

What if the result is correct but the explanation is weak?

Treat it as partial success. Ask for a trace and change one boundary. A reliable model survives controlled variation.

Is the shortest solution the best?

Not automatically. Prefer the solution whose semantics, failure modes and maintenance cost are easiest to justify for the actual project.

When should the official reference be used?

Use it whenever CSS reading-flow syntax, supported values, version behaviour or implementation boundaries matter. The primary source settles the current contract.

How can a parent help without technical expertise?

Ask what was predicted, where the first difference appeared, what evidence matters and which smaller example could isolate it.

How do we test transfer?

Change the context, vocabulary and one boundary. Require the learner to identify the invariant before using a tool.

What should be saved after practice?

Keep the corrected rule, one trace, one boundary case and the next question. Avoid storing pages of unexplained output.

Can these exercises replace backups?

No. Use disposable examples and proper backups. Learning should not endanger schoolwork, repositories or personal data.

What counts as mastery?

The learner can predict, verify, diagnose, recover and justify a choice across more than one context, while knowing when to consult the current reference.

Primary and supporting references

• Primary technical source for CSS reading-flow
• eduKatePunggol: How Studying Works

Return to contents