From 656b9753ec4faadc56fbb14fe98c002438a2da2c Mon Sep 17 00:00:00 2001 From: Jake Abma Date: Fri, 20 Jul 2018 10:57:03 +0200 Subject: [PATCH] vertical / horizontal separation - vertical / horizontal text separated - Link to CSS spec added - Code example updated - Test procedure vertical / horizontal text separated --- techniques/css/flexbox-reflow.html | 124 +++++++++++++++++------------ 1 file changed, 71 insertions(+), 53 deletions(-) diff --git a/techniques/css/flexbox-reflow.html b/techniques/css/flexbox-reflow.html index c11e6ec990..ffcbe7edc1 100644 --- a/techniques/css/flexbox-reflow.html +++ b/techniques/css/flexbox-reflow.html @@ -18,7 +18,7 @@

When to Use

Description

-

The objective of this technique is to be able to present content without introducing a horizontal scroll bar at a width equivalent to 320 CSS pixels and a vertical scroll bar at a height equivalent to 256 CSS pixels. This is done by using layout techniques that adapt to the available viewport space.

+

The objective of this technique is to be able to present content without introducing a horizontal scroll bar at a width equivalent to 320 CSS pixels, or a vertical scroll bar at a height equivalent to 256 CSS pixels for text intended to scroll horizontally. This is done by using layout techniques that adapt to the available viewport space.

Flexbox layouts define layout regions that reflow as needed to display the region on the screen. Although the exact layout therefore varies, the relationship of elements and the reading order remains the same when done right. This is an effective way to create designs that present well on different devices and for users with different zoom preferences.

The basic principles of flexbox layouts are to:

    @@ -26,7 +26,7 @@

    Description

  1. Position the layout regions in the flexbox container as a row of adjacent flexbox items, which may wrap to new rows as needed in much the same way as words in a paragraph wrap.

Complex flexbox layouts may be achieved by nesting layout regions, thus creating localized flexbox layouts within a larger flexbox layout. Even simple flexbox layouts require design finesse to achieve good-looking results at a wide range of viewport sizes and zoom levels, but well-designed flexbox layouts can be the most effective page design.

-

NOTE: Flexbox has the possibility to cause a keyboard navigation disconnect by using the order and reverse properties. The CSS Flexible Box Layout module warns against resequencing content logic as they cause incorrect source ordering and are non-conforming.

+

NOTE: Flexbox has the possibility to cause a keyboard navigation disconnect by using the order and reverse properties. The CSS Flexible Box Layout module warns against resequencing content logic as they cause incorrect source ordering and are non-conforming.

Examples

@@ -35,50 +35,51 @@

Example 1: Medium complex flexbox layout in HTML and CSS

The following medium complex example uses HTML and CSS to create a flexbox layout. The layout regions adjust their size as the viewport is adjusted. When the total viewport width matches the width defined via media queries, columns wrap to be positioned below, rather than beside each other or vice versa.

The zoom level can be increased to 400% without requiring scrolling in more than one direction. This particular example uses percent sizes for the flex items by using the "flex-basis" property and are laid out in source order.

- + 
+          
           <!DOCTYPE html>
           <html lang="en">
             <head>
-              <meta charset="UTF-8">
-              <title>Using CSS Flexbox for Reflow</title>
-              <style>
+            <meta charset="UTF-8">
+            <title>Using CSS Flexbox for Reflow</title>
+            <style>
 
-              /* Reflow Styling */
+            /* Reflow Styling */
 
-              .row {
-                width: 100%;
-                display: flex;
-                flex-flow: row wrap;
-              }
+            .row {
+              width: 100%;
+              display: flex;
+              flex-flow: row wrap;
+            }
 
-              .row-nested {
-                width: calc(100% + 2em);
-                margin: 0 -1em 1em -1em;
-              }
+            .row-nested {
+              width: calc(100% + 2em);
+              margin: 0 -1em 1em -1em;
+            }
 
-              .col {
-                padding: 1em;
-                flex: 0 1 100%;
-              }
+            .col {
+              padding: 1em;
+              flex: 0 1 100%;
+            }
 
-              @media all and (min-width: 576px) {
-                .col-panel {
-                  flex: 0 1 50%;
-                  padding-bottom: 0.25em;
-                }
+            @media all and (min-width: 576px) {
+              .col-panel {
+                flex: 0 1 50%;
+                padding-bottom: 0.25em;
               }
+            }
 
-              @media all and (min-width: 992px) { 
-                main[role="main"] {
-                  flex: 0 1 66.333333%;
-                }
-                aside[role="complementary"] {
-                  flex: 0 1 33.333333%;
-                  margin-top: 0;
-                }
+            @media all and (min-width: 992px) { 
+              main[role="main"] {
+                flex: 0 1 66.333333%;
+              }
+              aside[role="complementary"] {
+                flex: 0 1 33.333333%;
+                margin-top: 0;
               }
-              
-              </style>
+            }
+
+            </style>
 
             </head>
 
@@ -97,6 +98,7 @@ 
Example 1: Medium complex flexbox layout in HTML and CSS

                   </div>
                   <div class="col col-panel">
                     ...
+                  </div>
                 </div>
               </main>
 
@@ -110,32 +112,48 @@ 
Example 1: Medium complex flexbox layout in HTML and CSS

 
             </body>
           </html>
-        
+          
+

Working example: Using CSS Flexbox for Reflow

-

Tests

-
-

Procedure

-
    -
  1. Display content in a user agent.
    2. -
  2. Set the viewport width at a equivalent to 320 CSS pixels.
    3. -
  3. Check whether all content and functionality is available without vertical scrolling.
    4. -
  4. Set the viewport height at a equivalent to 256 CSS pixels.
    5. +

    Tests

    +
    +

    Procedure 1

    +
      +
    1. If the text is read horizontally
      2. +
    2. Display content in a user agent capable of 400% zoom with a viewport-width of 1280 CSS pixels.
      3. +
    3. Zoom in by 400%.
    4. Check whether all content and functionality is available without horizontal scrolling.
    -
    -
    -

    Expected Results

    -
      -
    • Check #3 is true.
      • -
    • Check #5 is true.
      • +

      NB: If the browser is not capable of zooming to 400%, you can reduce the viewport width of the browser proportionally. For example, for 300% zoom set the viewport width at a equivalent to 960 CSS pixels.

      +
    +
    +

    Expected Results

    +
      +
    • Check #4 is true.
    -

    If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.

    -
    -
+
+
+

Procedure 2

+
    +
  1. If the text is read vertically.
    2. +
  2. Display content in a user agent capable of 400% zoom with a viewport-height of 1024 CSS pixels.
    3. +
  3. Zoom in by 400%.
    4. +
  4. Check whether all content and functionality is available without vertical scrolling.
    5. +
+

NB: If the browser is not capable of zooming to 400%, you can reduce the viewport height of the browser proportionally. For example, for 300% zoom set the viewport height at a equivalent to 768 CSS pixels.

+
+
+

Expected Results

+ +

This is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.

+
+