Je vous invite à aller lire le tutoriel complet sur le CSS que j’ai écrit.
Après avoir expliqué comment réaliser un bon formulaire HTML, pourquoi ne pas en réaliser un uniquement en CSS3 ?
Je vous invite à aller lire le tutoriel complet sur le CSS que j’ai écrit.
Après avoir expliqué comment réaliser un bon formulaire HTML, pourquoi ne pas en réaliser un uniquement en CSS3 ?
Si vous voulez déjà utiliser des propriétés CSS3, vous devez savoir qu’elles sont implémentées sur plusieurs navigateurs mais avec des dénominations différentes.
Par exemple border-radius
(pour obtenir des coins arrondis) :
-moz-border-radius
sous Firefox-webkit-border-radius
sous Chrome et Safariborder-radius
sous Opera et le prochain IE9Etant donné qu’il est assez laborieux de trouver chacune des dénominations pour une seule et même propriété, CSS3 Please vous sera d’une grande aide. Il vous permet d’éditer les valeurs pour chaque propriété CSS3 puis de les copier et les utiliser sur (quasiment) tous les navigateurs, que ce soit :
Quelques-unes de ces propriétés marchent même sous IE6 et IE7!
Si vous êtes vous aussi ennuyé de temps à autre par la possibilité dans Google Chrome de redimensionner les textarea à la guise de l’utilisateur (ce qui, en soit, est très bénéfique pour l’utilisateur parce qu’il a la main sur un élément de l’interface, mais qui, du point de vue du designer, peut amener à des aberrations graphiques), alors voici une astuce en CSS.
textarea{ resize:none;}
Je vous le dis tout de suite : il n’y a pas d’option actuellement pour avoir Buzz dans GMail sans avoir les notifications mail. Mais il y a une astuce toute bête que j’avais partagée sur mon Buzz.
Chaque notification de Buzz arrivant dans la boîte mail obtient d’office 2 étiquettes :
Il suffit d’utiliser ces étiquettes (l’une ou l’autre) pour sélectionner les mails Buzz et leur faire faire ce que l’on veut.
Lire la suite →
Un billet un peu à part pour simplement partager une astuce pour récupérer le CD Key de son installation Windows alors que vous êtes sous Ubuntu.
Un beau matin, mon Win XP ne démarre plus. J’ai même plus l’écran de chargement Windows. J’ai tenté une réinstall avec un CD de Win XP, rien n’y fait. Heureusement j’ai encore Ubuntu.
J’ai envie de récupérer la clé de CD de mon Windows XP (officiel, acheté). Mais j’ai perdu mon CD. Et le registre Windows ne contient que l’ID du produit.
A partir de cet ID, il faut utiliser un logiciel spécial pour retrouver la clé du CD : Magical Jelly Bean Keyfinder.
Donc en gros : ProductID -> Magical Jelly Bean Keyfinder -> Clé du CD original
Le seul problème : Magical Jelly Bean ne fonctionne que sous Windows XP… et justement, ce dernier ne marche plus chez moi. Je peux utiliser Wine sous Ubuntu pour utiliser ce programme, mais il me faut le registre Windows de mon install foireuse d’abord…
Lire la suite →
A force de faire des thèmes WordPress, je commence UN PEU à comprendre comment ça marche. Et là, y a une énigme que j’ai enfin résolue (enfin, j’ai lu la solution chez quelqu’un d’autre).
Dans le thème Kubrick (le thème par défaut de WP, qui se fait un peu vieux d’ailleurs), y a ce fichier : comments-popup.php. Mais que fait-il ? A priori, c’est une popup… des commentaires. Ok. Mais ça apparaît quand ? Comment ? Où est-ce qu’on l’active ?
J’ai lu la solution chez Playworkplay : le comments popup s’active par un script à mettre dans le <head>. Il est présent dans le thème “classic” d’ailleurs.
<?php //comments_popup_script(); // off by default ?>
Par défaut, il est désactivé. Faut juste virer les deux slash (//) du début.
Maintenant, en cliquant sur un lien du style “1 commentaire”, au lieu d’aller à l’ancre des commentaires dans la page du post, ça ouvre une popup avec les commentaires.
Je dirais NON. D’abord, c’est pas beau. Puis c’est pas du tout pratique pour l’utilisateur. Puis ça sort les commentaires du contexte de l’article. Puis c’est une popup au départ donc déjà…
Pas étonnant que le thème Kubrick ne l’utilise pas et qu’aucun blog WordPress ne l’utilise (si vous en trouvez un, dites-le moi, j’irai pas voir).
Bref, ce post est juste là pour clarifier les choses.
James Padolsey a réalisé un plugin jQuery pour aisément générer du code HTML : Satisfy that selector. Pratique lorsqu’on veut réaliser un template HTML rapidement. C’est surtout très pratique pour le modifier très rapidement.
Imaginons que je vais créer une liste avec 10 éléments et des liens dedans, je fais :
jQuery('ul li:5 a[innerHTML="link"]').satisfy();
Puis je me dis que je veux 20 éléments et avec un span dans les liens. Au lieu de faire du copier-coller ou du search & replace, j’ai juste à faire :
jQuery('ul li:20 a span[innerHTML="link"]').satisfy();
Un plugin qu’il est pratique! Je vous conseille de vous abonner à son blog car il est très bon.
Davantage pour leur sémantique que pour leur pouvoir en SEO, il est intéressant et pratique d’utiliser les balises HTML suivantes. Elles permettent de donner du sens au contenu d’un site, ou plutôt à son code.
Lire la suite →
Si vous en avez marre d’attendre que le grand public mette à jour ses navigateurs pour pouvoir utiliser du HTML 5 et du CSS 3, vous pouvez utiliser Modernizr :
Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.
Je testerai sans doute à la prochaine refonte du site, c’est à dire prochainement (?).
L’objectif de Google, avant tout, c’est la performance. Ils publient d’ailleurs des conseils pour optimiser l’affichage du navigateur.
A la trappe les standards, la beauté, la clarté du code. Extraits choisis.
Mettre uniquement des .class et des #id et pas de a{ color:#0072c;} ou de input{ font-family:Arial,sans-serif;}. Mouais. Faut mettre une classe sur tous ses liens alors ? Génial.
En gros, pas de a.maClasse et de p.maClasse. Créer plutôt 2 classes : .maClassePourUnLien et .maClassePourUnParagraphe, même si les deux classes partagent les mêmes propriétés, à une près (sinon quel intérêt de les différencier). Mouais, bof. Si je veux que .maClasse soit d’un style particulier mais que les liens ayant .maClasse aient une propriété différente, je vais pas m’amuser à créer une autre classe juste pour ça.
Je reprends le mauvais exemple de Google :
/* Ne pas mettre */ ul li {color: blue;} ol li {color: red;} /* Mais mettre */ .unordered-list-item {color: blue;} .ordered-list-item {color: red;}
Bien sûr. Je vais mettre une classe sur tous mes <li>…
Pas de :hover en CSS mais des onmouseover en JS. Et si le gars a pas de JS ?
Bref, pour optimiser votre code, mettez des classes sur tous vos éléments! Merci Google!