Schöne Grüße. Ich präsentiere Ihnen eine Übersetzung des Artikels "Ruthlessly Eliminating Layout Shift On Netlify.com", der am 25. November 2020 vom Autor Zach Leatherman veröffentlicht wurde.
Auf der Netlify-Website befindet sich oben ein kleines Banner, das den Verkehr zu neuen und interessanten Ereignissen in der Netlify-Welt lenkt.
Dieses Banner besteht aus zwei Teilen:
HTML, : .
( )
, :
. ⚠️⚠️⚠️ . JavaScript JavaScript .
JavaScript
localStorage
, , . - URL- , , . - .
, . , HTML ().
(, ) JavaScript 2 3 <body>
, :
? . . JavaScript , .
1, . JavaScript JavaScript .
JavaScript- : , , - .
Update: GitHub .
HTML CSS
opacity
, , JavaScript.
.banner--hide announcement-banner,
announcement-banner[hidden] {
display: none;
}
[data-banner-close] {
opacity: 0;
pointer-events: none;
}
.banner--show-close [data-banner-close] {
opacity: 1;
pointer-events: auto;
}
<announcement-banner>
<a href="https://www.netlify.com/sustainability/">Read about our Sustainability</a>
<button type="button" data-banner-close>Close</button>
</announcement-banner>
JavaScript
banner-helper.js
, <head>
:
// CTA , JSON
let ctaUrl = "https://www.netlify.com/sustainability/";
let savedCtaUrl = localStorage.getItem("banner--cta-url");
if(savedCtaUrl === ctaUrl) {
document.documentElement.classList.add("banner--hide");
}
banner.js
, ( - ):
class Banner extends HTMLElement {
connectedCallback() {
// , , ,
// -
// .
this.classList.add("banner--show-close");
let button = this.getButton();
if(button) {
button.addEventListener("click", () => {
this.savePreference();
this.close();
});
}
}
getButton() {
return this.querySelector("[data-banner-close]");
}
savePreference() {
let cta = this.querySelector("a[href]");
if(cta) {
let ctaUrl = cta.getAttribute("href");
localStorage.setItem("banner--cta-url", ctaUrl);
}
}
close() {
this.setAttribute("hidden", true);
}
}
window.customElements.define("announcement-banner", Banner);
, -, .
Und da wir das Skript <head>
zum erneuten Anzeigen eingefügt haben, wenn der Benutzer das Banner versteckt und zu einer neuen Seite navigiert, wird das Banner auch vor dem ersten Rendern ausgeblendet.
Ziemlich gut für so kleine Änderungen!
Das nächste Ziel wird darin bestehen, die Anzeige von Web-Schriftarten zu verbessern.