Salutations. Je présente à votre attention une traduction de l'article "Ruthlessly Eliminating Layout Shift On Netlify.com" publié le 25 novembre 2020 par l'auteur Zach Leatherman.
Sur le site Web de Netlify, nous avons une petite bannière qui apparaît en haut pour générer du trafic vers des choses nouvelles et intéressantes qui se passent dans le monde de Netlify.
Cette bannière comprend deux parties:
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);
, -, .
Et comme nous avons inséré le script de re-vues <head>
lorsque l'utilisateur masque la bannière et accède à une nouvelle page, la bannière sera également masquée avant le premier rendu.
Très bien pour de si petits changements!
Le prochain objectif sera d'améliorer l'affichage des polices Web.