Photo du quai de l’Odet, du Tribunal de Grande Instance et d’une maison à colombage à Quimper.
Si vous ne souhaitez pas avoir à ajouter une bibliothèque Javascript ou un Plugin jQuery supplémentaire pour afficher vos tooltips, Hint.css est, comme son nom l’indique, une solution 100% CSS. Les tooltips peuvent être mis dans de multiples directions et styles.
La ressource combine subtilement classes CSS et attributs data-* pour afficher vos tooltips.
Hello Sir, <span class="hint hint--bottom">hover over me.</span>Avec la classe hint–DIRECTION vous pouvez contrôler l’endroit ou devra s’afficher la bulle, et dans l’attribut data-hint, le texte à afficher.
Plusieurs styles sont prédéfinis : Bulles d’erreur, bulles d’infos, bulles de confirmation … et un mode tooltip toujours affichée.
Vous pourrez télécharger la version Sass ou directement le CSS prêt à emploi.
Des effets de transitions donnent un effet réussi aux tooltips sur navigateurs modernes, et sont bien dégradées sur tous les autres navigateurs.
Photo de la cathédrale St-Corentin et du quai de l’Odet à Quimper.
Photos de la cathédrale St-Corentin à Quimper.
Responsive Boilerplate est une base permettant de commencer un site responsive.
Grâce à cet ensemble de bibliothèques CSS et Javascript, vous n’aurez plus à vous pré-occuper de chercher les bonnes medias queries, ou comment adapter votre menu pour smartphones…
L’objectif de ce boilerplate est de vous faire gagner du temps en vous proposant une structure CSS et HTML simple et adaptée.
En plus du CSS, le package comprend :
- Un PSD pour le système de grille
- Des snippets Sublime Text2 pour générer rapidement son site responsive
- Des fichiers Javascript pour adapter dynamiquement les menus et structure du site en fonction du périphérique
- Un fichier index.html avec le markup HTML essentiel
- Avec une feuille de style compressée à moins de 3Ko, ce squelette de responsive webdesign va faire des heureux !
Photos prises à Saint Vincent sur Jard (Vendée 85).
Photos prises à Saint Vincent sur Jard (Vendée 85).
Contact Form 7 est un plugin qui permet de réaliser des formulaires personnalisable sur WordPress.
La problématique
Comme tout plugin ses fichiers JS et CSS sont insérés sur toutes les pages de votre site par défaut et le fait de charger les fichiers sur la totalité de vos pages web demande au visiteur des ressources inutiles.
L’impact est faible sur un visiteur qui possède une bonne connexion internet, mais à l’ère du mobile et des connexions faible, la moindre économie est bonne à prendre.
J’ai trouvé un code qui proposent de les charger uniquement en cas de besoin, ce qui permettrait de continuer à bénéficier des fonctionnalités et styles de base du plugin.
/**
* Contact Form 7 - Load files only if necessary
*/
if (!function_exists('juiz_wpcf7_dequeue_scripts_styles')) {
function juiz_wpcf7_dequeue_scripts_styles() {
if ( WPCF7_LOAD_JS && WPCF7_LOAD_CSS ) {
global $post;
if ( !strpos($post->post_content, '[contact-form-7') ) {
wp_dequeue_script('contact-form-7');
wp_dequeue_style('contact-form-7');
}
}
}
add_action( 'wp_enqueue_scripts', 'juiz_wpcf7_dequeue_scripts_styles' );
}Quelques explications
Les constantes WPCF7_LOAD_JS et WPCF7_LOAD_CSS sont définies par le plugin lorsqu’il est activé. Elles retournent true lorsqu’elles existent, false si un réglage particulier est fait, et ne sont pas définies si le plugin n’est pas activé.
Du coup ce code propose d’intervenir uniquement si le plugin est activé, et si les fichiers demandent à être chargés.
Le reste du code vérifie si on trouve le shortcode de Contact Form 7 dans le contenu, si ce n’est pas le cas, alors on retire les fichiers du chargement grâce aux fonctions wp_dequeue_script() et wp_dequeue_style().
Quelques photos de Bordeaux.
Quelques photos de Bordeaux.
