Tag

CSS

Browsing
jQuery : sélectionner un élément dont l'ID ou la classe commence ou finit par une chaîne photo

jQuery possède une limitation qui peut s'avérer très gênante : on ne peut ajouter !important à une propriété CSS en utilisant un script jQuery.

Par exemple, ceci ne fonctionnera pas:

jQuery('.foo').css('border', '4px #000 solid !important');

alors que cette déclaration sera bien appliquée:

jQuery('.foo').css('border', '4px #000 solid');

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.

Exemple:

jQuery('.foo').addClass('border-black');

et on ajoute le code CSS suivant:

.border-black{
    border: 4px #000 solid !important;
}

Deuxième solution : utiliser la fonction attr()

Une autre solution est d'utiliser la fonction attr(), avec une concaténation pour garder le style CSS inline s'il est déjà présent:

jQuery('.foo').attr('style', function(i,s) { return (s || '') + 'border:4px #000 solid !important;' });

Troisième solution : utiliser la propriété cssText

Toujours en utilisant la concaténation pour garder les styles inline existants, nous utilisons la propriété cssText de la fonction css() :

jQuery('.foo').css('cssText', jQuery('.foo').css('cssText')+'border: 4px #000 solid !important');

Quatrième solution : utiliser style.setProperty()

Ce n'est pas parce que l'on utilise jQuery que nous devons oublier le vanilla JavaScript. En l'occurrence, JS offre nativement la fonction style.setProperty() qui nous permet d'appliquer notre style aisément:

jQuery('.foo').each(function(){
   this.style.setProperty( 'border', '4px #000 solid', 'important' );
});

Have fun!

CSS : supprimer subtilement le placeholder d'un champ input ou textarea photo

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 :

/* Placeholders */
::-webkit-input-placeholder { opacity: 1; -webkit-transition: opacity .5s; transition: opacity .5s; }  /* Chrome 56, Safari 9 */
:-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 4-18 */
::-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 19-51 */
:-ms-input-placeholder { opacity: 1; -ms-transition: opacity .5s; transition: opacity .5s; } /* IE 10+ */
::placeholder { opacity: 1; transition: opacity .5s; } /* Modern Browsers */

/* Focus */
*:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome 56, Safari 9 */
*:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */
*:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */
*:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */
*:focus::placeholder { opacity: 0; } /* Modern Browsers */

Ps : Chrome souffre également d'un bug qui concerne la fonction autofill qui aide les utilisateurs à pré-remplir les formulaires.

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).

Enjoy !

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.

CSS : remplir le contenu d'une div de manière fluide photo

Je pensais naïvement qu'un simple float:none et une largeur à 100% suffiraient :

.gfield_label {
   float: none !important;
   width: 100% !important;
}

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; }

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.

Javascript : afficher le contenu d'un bloc HTML après un délai variable photo

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) :

Et voici le contenu à placer dans le corps de la page (BODY):


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.

[box type="info"]Ne pas oublier d'échapper les slash par des antislash dans les balises de fermeture (liens, paragraphes etc) dans la variable delayed_text.[/box]

Simple et efficace.

Le problème : pas d'attribut property pour les feuilles de styles du corps de page

HTML5-logoSi, lors de la validation HTML5 de vos pages, vous obtenez le message d'erreur de validation suivant :

"Element link is missing required attribute property"

... alors il y a fort à parier qu'une feuille de style (CSS) est appelée via une balise link dans le corps de votre page (body) au lieu d'être insérée dans l'entête (header) comme à l'accoutumée.

Sous WordPress par exemple, cela peut être dû à un plugin qui appelle ses fichiers trop tard dans la construction de la page pour pouvoir insérer sa feuille de style dans l'entête.


...

...

La solution : ajouter property="stylesheet"

Il suffit d'éditer le code source de votre page ou fichiers afin d'ajouter l'attribut property, comme ceci : property="stylesheet".

Pas mal de nouveautés ont fait leur apparition sur le site cet hiver.

La plupart sont under the hood et donc invisibles mais pour le reste, voici ce qui a été ajouté, modifié ou retiré.

Sécurisation du serveur email

Sur le serveur de mail, j'ai ajouté l’authentification SPF, Sender-ID et DKIM à Postfix et Bind9 avec opendkim, ce qui permet de rendre les messages plus fiables puisqu'ils sont désormais signés lors de l'envoi du serveur. Cela permet notamment de ne pas être catégorisés comme spam.

Passage en HTTPS

Cela m'a demandé pas mal de recherches pour bien faire les choses mais je suis très content du résultat : le site est maintenant intégralement servi en HTTPS avec une connexion chiffrée par TLS uniquement.

J'ai d'abord passé Apache en HTTPS en Perfect Forward Secrecy, puis configuré WordPress de manière à tout servir sur une connexion chiffrée.

Ensuite, est venu le tour de chiffrer Webmin, le webUI du client bittorrent Transmission, et Postfix et Courier pour l'acheminement des emails de manière sécurisée.

J'ai passé Varnish en version 4.x avant de réaliser qu'il ne m'était plus vraiment nécessaire puisque je sers tout en HTTPS et que les fichiers servis chiffrés ne peuvent pas être mis en cache. Varnish ne gérant pas SSL, je l'ai finalement retiré de ma chaîne.

Enfin, je suis passé du mode prefork d'Apache au mod FastCGI et PHP-FPM avec Apache MPM Worker, qui sert les pages bien plus rapidement en utilisant moins de ressources que le mod PHP. Cela me servira un jour si je souhaite troquer Apache pour un autre serveur comme NginX.

Sous Apache, le module SPDY a été ajouté, qui sera bientôt remplacé par HTTP/2 (à prononcer "HTTP bis").

Tutoriels

J'ai finalisé le pack de correctif post-SP3 de Windows XP, dernière version pour les aficionados de ce regretté OS.

Quelques nouveaux tutoriels linux ont également vu le jour. On a vu comment installer une imprimante d’étiquettes WiFi Brother QL-710W puis installer Wine sous Ubuntu 14.04 avant de voir comment corriger le son saccadé sous VLC lors de la lecture de fichiers audio et télécharger des vidéos en streaming dans le terminal avec MovGrab.

Nous avons vu comment récupérer les données d’un disque dur issu d’un RAID1 ou encore installer la dernière version d’OpenSSL sous Debian... Période plutôt faste pour les tutos!

Site du CKYF

J'ai été commissionné pour redesigner le site du Centre de Kriya Yoga France : nouveau logo, nouvelle charte graphique, visuels, réseaux sociaux... bref, on est loin du premier site maison que j'avais créé pour eux en 2002 !

C'est aussi plus clair, lisible et visible sur n'importe quel appareil.

Le problème : l'attribut HTML frameborder

HTML5-logoSi 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 :

', 'style="border: none">');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0">', 'style="border: none">');

Valider le code oEmbed de Vimeo

Quatre requêtes pour Vimeo :

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" title=', 'title=');
UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, ' webkitallowfullscreen mozallowfullscreen allowfullscreen', '');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" title=', 'title=');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, ' webkitallowfullscreen mozallowfullscreen allowfullscreen', '');

Valider le code oEmbed de SlideShare

Et deux requêtes pour SlideShare :

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen>', 'style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px;overflow:auto;border:none">');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen>', 'style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px;overflow:auto;border:none">');

Et voilà, le code est plus propre, plus valide et utilise CSS plutôt que des balises propriétaires.

Il y a quelques mois de cela, le site du Centre de Kriya Yoga France a eu droit à un léger rafraichissement de son style : un peu plus de lisibilité, moins de fonds colorés, un peu plus de finesse dans les traits.

C'était juste un petit coup de plumeau mais comme j'ai oublié de vous en parler, voici une petite capture d'écran :

kriyafrance-2014

Mais cette semaine, j'ai retroussé mes manches et suis totalement passé à l'offensive :

Note pour plus tard : si, lors de la prévisualisation d'un thème WordPress, rien ne s'affiche ou si la personnalisation (customizer) ne répond pas, c'est qu'un plugin met la zone au niveau du javascript. Dans mon cas, c'était pdf-js.

Without further ado, je suis assez content de vous présenter la version 4.0 :

kriyafrance-2015

Pas mal de changements mais je pense que cela en vaut vraiment le coup. Le site devenait vieillissant et n'était plus adapté aux smartphones et tablettes, et l'ancienne boutique (Cubecart) était une horreur à gérer.

Tout est beaucoup plus simple maintenant, avec de jolis graphiques pour les commandes, la gestion du stock... bref, c'est bien mieux pour moi à gérer et plus simple pour le CKYF.

Qu'en pensez-vous ?

Rapport de faute d’orthographe

Le texte suivant sera envoyé à nos rédacteurs :