Add browser notes for outdated... browsers

I can understand not updating your browser for several months. Sometimes, you just have too many tabs open and it would be a real inconvenience. BUT YEARS?!

ACTIONS.md

@@ -816,6 +816,8 @@ Fires right after opening the `#site` container in the `header.php` template. In
 * $header_args (array) – Arguments passed to the header.php partial.
 
 **Hooked actions:**
+* `fictioneer_browser_notes()` – HTML for the browser compatibility notes. Priority 1.
+* `fictioneer_top_header( $args )` – HTML for the top header. Priority 9.
 * `fictioneer_navigation_bar( $args )` – HTML for the navigation bar. Priority 10.
 * `fictioneer_inner_header( $args )` – HTML for the inner header. Priority 20.
 

functions.php

@@ -103,6 +103,21 @@ if ( ! defined( 'FICTIONEER_FA_INTEGRITY' ) ) {
   );
 }
 
+// String: Story page footer date format below 480px
+if ( ! defined( 'FICTIONEER_DISCORD_EMBED_COLOR' ) ) {
+  define( 'FICTIONEER_DISCORD_EMBED_COLOR', '9692513' );
+}
+
+// String: Truncation ellipsis
+if ( ! defined( 'FICTIONEER_TRUNCATION_ELLIPSIS' ) ) {
+  define( 'FICTIONEER_TRUNCATION_ELLIPSIS', '…' );
+}
+
+// String: Age confirmation redirect
+if ( ! defined( 'FICTIONEER_AGE_CONFIRMATION_REDIRECT' ) ) {
+  define( 'FICTIONEER_AGE_CONFIRMATION_REDIRECT', 'https://search.brave.com/' );
+}
+
 /*
  * Date Strings
  */
@@ -175,21 +190,6 @@ if ( ! defined( 'FICTIONEER_STORY_FOOTER_B480_DATE' ) ) {
   define( 'FICTIONEER_STORY_FOOTER_B480_DATE', $long_date );
 }
 
-// String: Story page footer date format below 480px
-if ( ! defined( 'FICTIONEER_DISCORD_EMBED_COLOR' ) ) {
-  define( 'FICTIONEER_DISCORD_EMBED_COLOR', '9692513' );
-}
-
-// String: Truncation ellipsis
-if ( ! defined( 'FICTIONEER_TRUNCATION_ELLIPSIS' ) ) {
-  define( 'FICTIONEER_TRUNCATION_ELLIPSIS', '…' );
-}
-
-// String: Age confirmation redirect
-if ( ! defined( 'FICTIONEER_AGE_CONFIRMATION_REDIRECT' ) ) {
-  define( 'FICTIONEER_AGE_CONFIRMATION_REDIRECT', 'https://search.brave.com/' );
-}
-
 /*
  * Integers
  */
@@ -376,6 +376,11 @@ if ( ! defined( 'FICTIONEER_ENABLE_STORY_CHANGELOG' ) ) {
   define( 'FICTIONEER_ENABLE_STORY_CHANGELOG', true );
 }
 
+// Boolean: Enable tracking of chapter changes in stories
+if ( ! defined( 'FICTIONEER_ENABLE_BROWSER_NOTES' ) ) {
+  define( 'FICTIONEER_ENABLE_BROWSER_NOTES', true );
+}
+
 // =============================================================================
 // FAST REQUESTS
 //

includes/functions/hooks/_general_hooks.php

@@ -207,6 +207,56 @@ function fictioneer_output_modals( $args ) {
 }
 add_action( 'fictioneer_footer', 'fictioneer_output_modals' );
 
+// =============================================================================
+// OUTPUT BROWSER NOTES
+// =============================================================================
+
+/**
+ * Outputs the HTML for the browser notes
+ *
+ * @since Fictioneer 5.9.1
+ */
+
+function fictioneer_browser_notes() {
+  $notes = [];
+
+  // Support for custom properties?
+  $notes['var'] = __( 'Missing var() support!', 'fictioneer' );
+
+  // Support for grid?
+  $notes['grid'] = __( 'Missing grid support!', 'fictioneer' );
+
+  // Support for gap?
+  $notes['gap'] = __( 'Missing (flex-) gap support!', 'fictioneer' );
+
+  // Support for aspect-ratio?
+  $notes['aspect-ratio'] = __( 'Missing aspect-ratio support!', 'fictioneer' );
+
+  // Support for container queries?
+  $notes['container-queries'] = __( 'Missing container query support!', 'fictioneer' );
+
+  // Support for clamp?
+  $notes['clamp'] = __( 'Missing clamp() support!', 'fictioneer' );
+
+  // Support for -webkit-line-clamp?
+  $notes['line-clamp'] = __( 'Missing -webkit-line-clamp support!', 'fictioneer' );
+
+  // Format output
+  array_walk( $notes, function( &$value, $key ) {
+    $value = '<span class="browser-notes__note browser-notes__' . $key . '">' . $value . '</span>';
+  });
+
+  // Start HTML ---> ?>
+  <div id="browser-notes" class="browser-notes">
+    <strong><?php _e( 'Outdated Browser:', 'fictioneer' ); ?></strong>
+    <?php echo implode( ' ', $notes ); ?></div>
+  <?php // <--- End HTML
+}
+
+if ( FICTIONEER_ENABLE_BROWSER_NOTES ) {
+  add_action( 'fictioneer_site', 'fictioneer_browser_notes', 1 );
+}
+
 // =============================================================================
 // OUTPUT NAVIGATION BAR
 // =============================================================================
@@ -214,7 +264,7 @@ add_action( 'fictioneer_footer', 'fictioneer_output_modals' );
 /**
  * Outputs the HTML for the navigation bar
  *
- * @since Fictioneer 5.0
+ * @since Fictioneer 5.0.0
  *
  * @param int|null       $args['post_id']           Optional. Current post ID.
  * @param int|null       $args['story_id']          Optional. Current story ID (if chapter).

src/scss/common/_base.scss

@@ -805,3 +805,64 @@ html:not(.logged-in) body:not(.logged-in) {
     margin-bottom: -0.5rem;
   }
 }
+
+.browser-notes {
+  display: none;
+  content-visibility: hidden;
+  font-size: 10px;
+  text-align: center;
+  padding: .5rem;
+  max-width: var(--site-width);
+  width: 100%;
+
+  @supports (not (--example: 0)) or (not (width: 1cqw)) or (not (display: grid)) or (not (gap: 1px 1px)) or (not (aspect-ratio: 3 / 2)) or (not (width: clamp(10px, 50%, 100px))) or (not (-webkit-line-clamp: 1)) {
+    display: block;
+    content-visibility: visible;
+  }
+
+  &__note {
+    display: none;
+  }
+
+  &__var {
+    @supports not (--example: 0) {
+      display: inline-block;
+    }
+  }
+
+  &__grid {
+    @supports not (display: grid) {
+      display: inline-block;
+    }
+  }
+
+  &__gap {
+    @supports not (gap: 1px 1px) {
+      display: inline-block;
+    }
+  }
+
+  &__aspect-ratio {
+    @supports not (aspect-ratio: 3 / 2) {
+      display: inline-block;
+    }
+  }
+
+  &__container-queries {
+    @supports not (width: 1cqw) {
+      display: inline-block;
+    }
+  }
+
+  &__clamp {
+    @supports not (width: clamp(10px, 50%, 100px)) {
+      display: inline-block;
+    }
+  }
+
+  &__line-clamp {
+    @supports not (-webkit-line-clamp: 1) {
+      display: inline-block;
+    }
+  }
+}