From 66d36ef6b897b6c5f786f312b1a4f646fc03c5e1 Mon Sep 17 00:00:00 2001 From: Nick Budak Date: Wed, 20 Nov 2024 14:39:17 -0800 Subject: [PATCH] Defer non-critical CSS without changing cascade order With 9254fbf, we deferred non-critical CSS by loading it at the end of the page. However, this had an unintended side-effect: making the viewer CSS load last in the cascade. This meant that fixes like https://github.com/geoblacklight/geoblacklight/commit/12bd71fbd36d054353e5047328455966a049b85a had no effect, because they were loaded as part of geoblacklight's CSS and then overridden by the viewer's own CSS. This change switches to the strategy outlined in https://web.dev/articles/defer-non-critical-css, which defers CSS loading but reverts to the original DOM order for the styles, preserving the ability to affect Leaflet's styles in our own without resorting to !important. It also removes one instance where we were using !important to get around this problem. --- app/assets/stylesheets/earthworks.css | 3 +-- app/views/layouts/blacklight/base.html.erb | 14 ++++++++------ 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/app/assets/stylesheets/earthworks.css b/app/assets/stylesheets/earthworks.css index cc2482fb..4c0ee3f9 100644 --- a/app/assets/stylesheets/earthworks.css +++ b/app/assets/stylesheets/earthworks.css @@ -310,9 +310,8 @@ label.toggle-bookmark { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='14' height='14' viewBox='0 0 28 28' aria-label='Email' role='img'%3E%3Ctitle%3EEmail%3C/title%3E%3Cpath fill='%23006cb8' d='M28 11.1v12.4a2.5 2.5 0 0 1-2.5 2.5h-23A2.5 2.5 0 0 1 0 23.5V11.1c.47.51 1 .96 1.58 1.35 2.6 1.77 5.22 3.53 7.76 5.4 1.32.96 2.94 2.15 4.64 2.15h.04c1.7 0 3.32-1.19 4.64-2.16 2.54-1.84 5.17-3.62 7.78-5.39.56-.39 1.1-.84 1.56-1.36zm0-4.6c0 1.75-1.3 3.33-2.67 4.28-2.44 1.69-4.9 3.38-7.31 5.08-1.02.7-2.74 2.14-4 2.14h-.04c-1.26 0-2.98-1.44-4-2.14-2.42-1.7-4.87-3.4-7.3-5.08C1.59 10.03 0 8.26 0 6.84 0 5.31.83 4 2.5 4h23C26.86 4 28 5.12 28 6.5z'%3E%3C/path%3E%3C/svg%3E"); } -/* Have to use !important because we load leaflet.css after earthworks. */ .leaflet-container { - background-color: #d4dadc !important; + background-color: #d4dadc; } .facet-limit-active { diff --git a/app/views/layouts/blacklight/base.html.erb b/app/views/layouts/blacklight/base.html.erb index 0995dd80..1df90c01 100644 --- a/app/views/layouts/blacklight/base.html.erb +++ b/app/views/layouts/blacklight/base.html.erb @@ -27,11 +27,19 @@ <%= opensearch_description_tag application_name, opensearch_catalog_url(format: 'xml') %> <%= favicon_link_tag %> + + + <%= preload_link_tag "https://cdn.skypack.dev/leaflet@1.9.4/dist/leaflet.css", as: "style", onload: "this.onload=null;this.rel='stylesheet'" %> + <%= preload_link_tag "https://cdn.jsdelivr.net/npm/leaflet-fullscreen@1.0.2/dist/leaflet.fullscreen.css", as: "style", onload: "this.onload=null;this.rel='stylesheet'" %> + <%= preload_link_tag "https://cdn.skypack.dev/ol@8.1.0/ol.css", as: "style", onload: "this.onload=null;this.rel='stylesheet'" %> + + <%= stylesheet_link_tag "geoblacklight", media: "all", "data-turbo-track": "reload" %> <%= stylesheet_link_tag "earthworks", media: "all", "data-turbo-track": "reload" %> <%= stylesheet_link_tag "https://cdn.jsdelivr.net/gh/sul-dlss/component-library@v2024-09-04/styles/sul.css" %> <%= stylesheet_link_tag "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" %> + <% if defined? Importmap %> <%= javascript_importmap_tags %> <% elsif defined? Propshaft %> @@ -69,11 +77,5 @@ <%= render partial: 'shared/footer' %> <%= render partial: 'shared/modal' %> - - <% # Non-render blocking css should be outside of the head %> - <%= stylesheet_link_tag "https://cdn.skypack.dev/leaflet@1.9.4/dist/leaflet.css" %> - <%= stylesheet_link_tag "https://cdn.jsdelivr.net/npm/leaflet-fullscreen@1.0.2/dist/leaflet.fullscreen.css" %> - <%= stylesheet_link_tag "https://cdn.skypack.dev/ol@8.1.0/ol.css" %> - <% end %>