Voici maintenant une autre manière de créer vos notes de bas de page, en HTML sémantique, CSS et vanilla JavaScript.
Des notes de bas de page sémantiques
Pour commencer, nous allons utiliser les balises HTML details et summary, qui sont trop peu souvent utilisées. Elles sont pourtant idéales pour ce que nous souhaitons accomplir: montrer un contenu après un clic, mais qui doit rester caché le reste du temps.
Le gros avantage de cette nouvelle version d’inclure des liens et du HTML dans la note de bas de page, ce qui n’était pas possible avec la version en CSS pur.
Un clic sur le numéro de la note ouvre la note. Il suffit de cliquer sur l’encart jaune de la note pour la fermer, ou alors cliquer sur un autre numéro de note.
Exemple de notes de bas de page
Le dernier serveur de SkyMinds s’appelle Apollo1
Il a été mis en service le 1er octobre 2023.
et tourne sous Ubuntu Server.
Il est facile de changer le MOTD2
Cela est même recommandé car cela permet d’identifier le serveur rapidement et de ne pas se tromper de terminal lorsque l’on entre une commande.
et apporter de nouvelles informations aux utilisateurs SSH.
Mon mémoire professionnel a été publié récemment 3
Biscay, MattCréer et soutenir la motivation des élèves du cycle central en classe d’Anglais()Institut Universitaire de Formation des Maîtres (IUFM). Mémoire: Créer et soutenir la motivation des élèves
Aujourd’hui, je régle un petit souci d’affichage sur un une boutique WooCommerce propulsée par Astra.
Le problème est le suivant: lorsqu’on visite le site depuis un mobile, il est possible de faire bouger le contenu de la page vers la gauche, ce qui dévoile une hideuse colonne grise/verte sur le côté droit. Pourtant, aucun élément ne semble dépasser la largeur du contenu.
L’identification de l’élément causant ce défaut d’affichage n’est pas vraiment une chose aisée, car visuellement, on ne distingue rien qui dépasse.
Vanilla JS à la rescousse
Voici un petit script en Vanilla JS qui permet de trouver l’élément qui dépasse la largeur du viewport de votre page:
/**
* Identify elements that exceed the viewport width
* by Matt Biscay
* https://www.skyminds.net/?p=614036
*/document.addEventListener("DOMContentLoaded", function() {
const elements = document.querySelectorAll('body *');
elements.forEach(element => {
if (element.offsetWidth > document.documentElement.clientWidth) {
console.log('Element causing overflow: ', element);
}
});
});Code language:JavaScript(javascript)
CSS: couvrez cet overflow que je ne saurais voir
Une fois votre ou vos éléments identifiés, il ne vous reste plus qu’à cacher son overflow-x :
Lorsque nous écrivons de longs articles, nous avons souvent besoin d’ajouter des notes de bas de pages – footnotes en anglais – pour donner une référence ou apporter un complément d’informations.
Il existe un moyen d’ajouter une note de bas de page en CSS, avec un effet popup.
Commençons par le code HTML. Nous avons besoin principalement d’un lien HTML et d’une balise span qui contiendra le contenu de notre footnote :
<p>Voici un premier paragraphe avec une note de bas de page. <aclass="footnote">¹<span>Coucou, je suis la note de bas de page numéro 1</span></a></p><p>Voici un deuxième paragraphe avec une note de bas de page. <aclass="footnote">¹<span>Coucou, je suis la note de bas de page numéro 2 :)</span></a></p>Code language:HTML, XML(xml)
Code CSS
Et voici notre code CSS pour créer la popup et afficher le contenu de nos notes de bas de page à l’intérieur, au survol de la souris:
Il est souvent utile de pouvoir placer du texte sur une image de fond, de manière à ce que l’on puisse lire le texte facilement et distinguer l’image. C’est ce que j’utilise sur le blog pour les images d’illustration des articles.
Nous allons donc superposer du texte lisible sur une image de fond en utilisant uniquement du code HTML et CSS, ce qui nous donne ceci:
Voici une planche à voile
Une image de planche à voile se trouve derrière ce texte.
Vous souhaitez accomplir la même chose? Voici comment faire.
Pour contourner cette limitation, je vous propose plusieurs solutions.
Première solution : utiliser la fonction addClass()
C’est probablement la solution la plus simple : il suffit d’ajouter une classe votre élément avec addClass(), puis de définir le code CSS relatif à cette classe.
Je viens de finir un projet sur Codeable qui utilisait WordPress et Gravity Forms et lors de la réalisation d’un formulaire de réservation complexe, je me suis heurté à Chrome qui ne supprime pas toujours (suivant les versions utilisées) le texte du placeholder d’un champ de type input ou textarea lorsque le curseur est placé à l’intérieur (action focus).
Normalement, la valeur du placeholder disparaît et permet à l’utilisateur de compléter sa saisie mais sous certaines versions de Chrome, cela ne passe pas bien.
J’ai considéré l’utilisation de JavaScript, évidemment, avant de me rendre compte que l’on pouvait résoudre le problème avec quelques règles CSS natives. Toutes les déclarations sont à ajouter – ne cherchez pas à les compiler, cela ne fonctionnera pas !
On joue donc avec l’opacité et un léger effet de transition pour le côté subtil et smooth :
Pensez donc à supprimer les valeurs enregistrées pendant vos tests (Chrome > Paramètres > Paramètres avancés > Confidentialité et sécurité > Effacer les données de navigation > Paramètres avancés > cocher Données de saisie automatique).
Aujourd’hui, le logo de SkyMinds fait peau neuve ! Plus discret, plus moderne aussi. J’en ai profité pour mettre en place toute une liste de modifications cosmétiques que j’ai trop longtemps repoussées.
Nouveau logo !
Mise à jour des templates du thème enfant
L’avantage d’un thème enfant sous WordPress, c’est que l’on ne perd pas ses modifications lorsque le thème parent se met à jour. Le thème enfant, c’est tout simplement la base, l’étape qui vient juste après l’installation d’un nouveau thème.
Or, au fil des mois ans, il se trouve que le thème parent évolue et que les fichiers du thème enfant (modifiés) ne sont plus exactement à jour. J’en ai donc profité pour reprendre les nouveaux fichiers et y apporter mes modifications.
Concaténation des appels des fichiers de police
En analysant les fichiers du thème, je me suis rendu compte qu’on pouvait gagner pas mal de temps de chargement grâce à une épuration du nombre de polices utilisées sur le site. Au lieu d’en avoir deux (Open Sans et Droid Sans), il n’y en aura plus qu’une : Open Sans. Elle est légère, classique et facile à lire.
Le problème, c’est que Divi charge pas mal de versions de cette police par défaut : 300, 400, 700… en normal, italic et gras et avec des subsets exotiques comme le cyrillique, le grec ou le vietnamien. Clairement, on doit pouvoir mieux faire !
Divi : suppression des subsets Google Fonts
On commence par virer les subsets exotiques. Rendez-vous dans Divi > Theme options > General > désactivez Google Fonts subsets. Vous venez d’économisez 400KB.
Divi : suppression de toutes les Google Fonts et chargement de l’unique nécessaire
C’est pénible d’avoir tous les grammages d’une police chargés pour rien. Voici ce que j’utilise pour tout virer dans un premier temps, puis ajouter uniquement ce dont j’ai réellement besoin:
/*
|-----------------------------------------------------------------------
| Plugin Name: Sky Remove DIVI Google Fonts and add what we need
| Plugin URI: https://www.skyminds.net/?p=29578
| Author: Matt Biscay
| Author URI: https://www.skyminds.net/
|-----------------------------------------------------------------------
*/// remove all Divi fonts, we'll just load what we need// @return: arrayfunctionet_builder_get_google_fonts(){ returnarray(); }
functionet_get_google_fonts(){ returnarray(); }
// add fonts : logo (Comfortaa:700) and site (Open+Sans:400,700). No subsets.
add_action( 'wp_enqueue_scripts', 'sky_logo_add_google_fonts' );
functionsky_logo_add_google_fonts(){
wp_enqueue_style( 'sky-logo-google-fonts', 'https://fonts.googleapis.com/css?family=Comfortaa:700|Open+Sans:400,700', false );
}
Code language:PHP(php)
Kaboom! On vient de se retirer une sacrée épine du pied. Il faudra juste relire la feuille de style pour être sûr que l’on utilise bien soit du font-weight 400 (regular), soit du 700 (bold). Pensez également à vérifier votre critical CSS.
Amélioration de la section Auteur
A la fin de chaque article se trouve la section de l’auteur, qui comprend une courte description ainsi que des liens vers ses profils sociaux. J’ai profité de la police du thème pour remplacer les noms des réseaux par des icônes. C’est purement cosmétique mais je trouve cela plus joli.
Cela m’a permis de me rendre compte que le site n’utilise absolument pas Font Awesome – ce que je trouve totalement fou. J’aime tellement cette police que j’ai acheté la version professionnelle pour mes développements… et ne l’utilise pas moi-même !
J’ai troqué le bleu clair pour un beige. A voir sur la durée.
Nouveau logo
Et enfin, last but not least, j’ai troqué mon logo image contre un logo font. Cela faisait pas mal de temps qu’il me trottait dans la tête l’idée de le changer. J’ai d’abord commencé, comme d’habitude, par tenter de créer des logos images avant de changer mon fusil d’épaule et considérer la possibilité d’utiliser une Google Font pour le générer à la volée.
Après quelques recherches, j’ai finalement opté pour la police Comfortaa en 700. C’est plutôt moderne par rapport au logo précédent qui avait la particularité d’être un dégradé de plusieurs couleurs (rose, violet, bleu, vert), avec des ligatures à certaines lettres.
Celui-ci sera donc beaucoup plus clean et professionnel. Je pense d’ailleurs le réutiliser sur d’autres supports de personal branding.
J’ai récemment été confonté à un problème lors de la réécriture du code CSS d’un formulaire Gravity Form : on voulait que le contenu remplisse la div, sans sauter de ligne lorsqu’il n’y en avait pas besoin.
Je pensais naïvement qu’un simple float:none et une largeur à 100% suffiraient :
Mais cela a fini par chambouler tous les champs de formulaires : labels et champs n’étaient plus sur la même ligne.
La solution est toute simple mais cela m’a pris un temps fou à la trouver – il suffit d’ajouter un clear:both au bloc parent qui contient l’élément que l’on veut fluidifier, comme ceci :
/* Make it flow */li#field_11_10 { clear: both !important; }
Code language:CSS(css)
En espérant que cela puisse vous faire gagner du temps !
Voici comment afficher du contenu (texte, HTML, JS, CSS ou tout autre contenu) dans un bloc DIV, après un délai que vous aurez préalablement défini, le tout en JavaScript.
C’est écrit en JavaScript pur (vanilla JavaScript), c’est-à-dire sans librairies supplémentaires, et donc compatible avec tous les navigateurs. On utilise innerHTML pour faire apparaître la div après le délai imparti.
Exemple de contenu affiché après un délai
Le texte suivant apparaît 7 secondes après le chargement de la page :
Le code : afficher le contenu d’une DIV après un délai
Voici le style CSS à placer dans l’entête de la page (HEAD) :
Ainsi que le code JavaScript qui s’occupe du délai:
/*
|-----------------------------------------------------------------------
| Delayed DIV text in vanilla JavaScript by Matt
| URL : https://www.skyminds.net
|-----------------------------------------------------------------------
|
| Returns predefined text in a DIV after a delay.
|
*/
(function(){
var element_id = 'example_div' ; /* name of div ID w/ delayed text */var delayed_text = "Ceci est un texte d'illustration pour tester l'affichage d'un bloc DIV après un délai défini.";
var time = 7; /* time in seconds until display */
setTimeout(function(){
document.getElementById(element_id).innerHTML = delayed_text;},time*1000);
})();Code language:JavaScript(javascript)
Fonctionnement du script
Voici comment fonctionne le script : on recherche le bloc DIV qui possède l’identifiant #exemple_div et on lui injecte le contenu de la variable delayed_text après le délai en secondes défini dans la variable time.
Ne pas oublier d’échapper les slash par des antislash dans les balises de fermeture (liens, paragraphes etc) dans la variable delayed_text.
Si vous obtenez l’erreur : “The frameborder attribute on the iframe element is obsolete. Use CSS instead.”
sur le validateur HTML5 du W3C, c’est que le code de votre page HTML5 contient un élément <iframe> avec un attribut frameborder comme dans l’exemple suivant :
Avec HTML5, il est possible de résoudre le problème en ajoutant l’attribut seamless à l’iframe:
<iframeseamless />Code language:HTML, XML(xml)
L’apparence du texte et des éléments de présentation de la page doivent être gérés par CSS et non par le code HTML, c’est plus propre et surtout plus simple à gérer.
