Lazily render the sub-content area on mobile

Author: csswizardry

_includes/css/csswizardry.min.css

@@ -16,7 +16,7 @@ <h1 elementtiming="page-title">{{ page.title }}</h1>
 
           <script>performance.mark('contentEnd')</script>
         </section
-       ><section class="layout__item  desk-three-tenths  desk-push-one-tenth" data-ui-component="Sub content" id="section:sub-content">
+       ><section class="layout__item  desk-three-tenths  desk-push-one-tenth  c-sub-content" data-ui-component="Sub content" id="section:sub-content">
 
             {% include sub-content.html %}
 

_layouts/page.html

@@ -0,0 +1,19 @@
+/* ==========================================================================
+   #SUB-CONTENT
+   ========================================================================== */
+
+/**
+ * One small screens, there’s no point eagerly rendering all the sub-content
+ * area. Use `content-visibility` to defer rendering until the user approaches.
+ */
+
+.c-sub-content {
+  content-visibility: auto;
+  contain-intrinsic-size: 1px 1500px;
+
+  @include media-query(desk) {
+    content-visibility: visible;
+    contain-intrinsic-size: none none;
+  }
+
+}

css/_components.sub-content.scss

@@ -52,6 +52,7 @@
  * Promo................Lead promo blocks on the home page.
  * Site-nav.............Site’s main nav area.
  * Nav-secondary........Smaller, in-page nav.
+ * Sub-content..........Site’s sub-content/sidebar.
  * Buttons..............Extension of inuitcss’ buttons.
  * Boxes................Extension of inuitcss’ box object
  * Post.................Post-specific styles.
@@ -195,6 +196,7 @@ $inuit-enable-list-ui--small:   true;
 @import "components.promo";
 @import "components.site-nav";
 @import "components.nav-secondary";
+@import "components.sub-content";
 @import "components.buttons";
 @import "components.boxes";
 @import "components.post";

css/csswizardry.scss

@@ -112,7 +112,7 @@ <h3 class="post__title" style="view-transition-name: x-{{ post.date | date: '%Y-
     <script>performance.mark('contentEnd')</script>
   </div
 
-  ><div class="layout__item  lap-and-up-one-half  desk-one-third" data-ui-component="Sub content">
+  ><div class="layout__item  lap-and-up-one-half  desk-one-third  c-sub-content" data-ui-component="Sub content">
 
     <div class="[ box  box--highlight ]  mb">
       {% include sub-content.html %}