∞ Permalien

J’ai remplacé le vieux syntax highlighter sur WordPress Le Tutoriel par celui-ci: highlight.js

Pourquoi ?

1. Il n’utilise que 2 fichiers.
2. Il détecte tout seul le language.
3. Il propose l’exceptionnel thème Solarized.

Mail d’une amie :

J’ai une colle pour toi :

1 – 4 colonnes de 240px => largeur totale 960px

2 – je rajoute un margin-right de 5px et soustrais 5px de la largeur de la colonne => largeur totale 960px

Et pourtant dans le 2ème cas, visuellement la largeur totale est inférieure à 960px.

How is it possible ?

Elle n’était vraisemblablement pas bien réveillée parce qu’elle connaissait la réponse, mais je vais développer la méthode ici pour ceux qui auraient des soucis.

Largeur totale ≠ largeur utilisée

Si vous avez un espace total de 480 pixels de large et que vous y mettez, côte à côte, 4 colonnes de 120px de large, alors tout l’espace horizontal est rempli.

120 * 4 = 480

Maintenant, si l’on diminue la largeur des colonnes jusqu’à 90px mais qu’on rajoute à leur droite 30px de marge, le compte total ne va pas changer.

(90 + 30) * 4 = 480

Le souci, c’est la dernière marge à droite. Elle rentre dans le calcul des 480px de large, mais visuellement, c’est du vide.

n colonnes, n-1 marges

Quel que soit le nombre de colonnes, le nombre de marges sera toujours inférieur de 1.
Pour n colonnes on a bien n-1 marges.

Ce que l’on veut : supprimer la dernière marge à droite. ¹

nth child : le sélecteur providentiel

Au lieu d’appliquer une classe à la dernière colonne de chaque ligne, on va utiliser la fabuleuse pseudo-classe CSS 3 :nth-child.

Dans mon exemple, on veut virer la marge de chaque colonne multiple de 4.
Il faut faire :

.column:nth-child(4n){ margin-right:0;}

En fait, le nombre n correspond à un nombre qui va incrémenter indéfiniment, en commençant par 1. Donc on a :

• 4*1 = 4 (la 4e colonne)
• 4*2 = 8 (la 8e colonne)
• 4*3…

Il permet donc de sélectionner toutes les colonnes multiples de 4.

Etant donné que nth-child n’est pas supporté par IE6, IE7 et IE8, il vous sera sans doute nécessaire d’utiliser plutôt une classe “last” sur la dernière colonne de chaque ligne.

Calcul des largeurs optimales

Comment être sûr d’occuper totalement l’espace horizontal disponible ? En d’autres termes, comment faire en sorte que :

largeur totale des colonnes
+ largeur totale des marges
= largeur totale du conteneur

Ici, je veux que que mes 4 colonnes fassent 90px de large.
Largeur totale des colonnes = 90*4 = 360px.
Il reste donc 480-360 = 120px pour 3 marges.
Chaque marge fera donc 120/3 = 40px de large.

Ici, le compte est bon, j’ai envie de dire.
Toutes les colonnes ont la même largeur, et les marges aussi, et la largeur utilisée est égale à la largeur totale.
L’utilisation de l’espace est donc optimale.

Trouver facilement les valeurs optimales

Imaginons des colonnes qui font 85px de large.

• Largeur totale des colonnes = 85*4 = 340px
• Largeur restante pour les marges = 480 – 340 = 140px
• Largeur de chaque marge = 140/3 = 46,6666666666666666666667

Le drame ! Bien sûr, on pourrait essayer de trouver la solution en tâtonnant, en testant 86, puis 84, puis 87… Quelle perte de temps !

Pour calculer la largeur optimale, voici la règle :

La marge gagnée sur chaque colonne doit être un multiple du nombre de marges.

Ok. Alors, repartons au début. On avait 4 colonnes à 120px de large et 0px de marge.
On a 3 marges, donc faut procéder par palier de 3px :

• 120 – 0 = 120px
• 120 – 3 = 117px (de large pour une colonne)
• 120 – 6 = 114px
• …
• 120 – 30 = 90px (notre exemple)
• 120 – 33  = 87px
• 120 – 36 = 84px

Du coup, on voit bien que 85px de large pour une colonne, c’est pas bon. Il faut choisir soit 87px ou bien 84px.

Prenons 84px qui est le plus proche :

• colonnes = 84*4 = 336px
• marge totale = 480-336 = 144px
• chaque marge = 144/3 = 48px

Avec des colonnes à 84px de large et des marges à 48px de large, l’espace horizontal de 480px est utilisé en entier.

∞ Permalien

Après mon tutoriel CSS : l’Art et la Science, voici un tutoriel sur l’autre partie importante de mon expérience d’intégrateur : WordPress le Tutoriel.

Je considère mes connaissances comme étant open-source. Et, de peur de les voir perdues à jamais, je préfère les écrire et les faire partager gratuitement avec la communauté des intégrateurs que nous sommes.

Ce tutoriel WordPress vous aidera à créer vous-même votre propre thème WordPress, mais contient aussi un thème WordPress vide gratuit sur lequel vous pouvez vous baser.

Il est des connaissances que l’on veut transmettre telles qu’on les ressent. Celle des CSS que j’ai acquise au fil des ans est celle que je souhaite à présent léguer à travers une histoire peu commune mais très ludique.

Que vous soyez novice ou qualifié, l’Art & la Science saura je l’espère vous apporter un savoir mais aussi (et peut-être avant tout) une conception des CSS. Mon intention est de vous faire parvenir la perception clairvoyante d’une compétence vivante et expressive qui saura séduire celui qui l’embrassera.

Le SVG vous connaissez ? C’est des graphes vectoriels en XML. C’est cool parce que c’est du vecto et c’est donc scalable très facilement (j’avais fais des icônes en SVG une fois avec Illustrator pour un site mais ça marchait uniquement sous Opera).  C’est pas cool parce que c’est chaud à mettre en place, les navigateurs le gèrent mal et ça peut être moche en taille réduite.

Sur tapper[ware), un gars (un malade), a fait une sorte de Mario Kart en SVG. Vous pouvez voir la démo ici (ça ne marche que sous Firefox). Bon, c’est pas vraiment un jeu, mais juste une démo pour simuler le très célèbre Mode 7!

PS : mon record du tour est de 8:28 sec.

Aujourd’hui c’est le CSS Naked Day! Virez votre CSS et montrez nous votre code HTML pour voir si il est beau! Bon, j’ai raté les éditions précédentes. Mais avec mon nouveau thème, je voulais tenter le coup!

CSS Naked Day ? Kesako ?

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good ‘ol play on words. It’s time to show off your .

On April 9th, simply remove all CSS from your website, stripping it entirely of its design.

Le site sera sans CSS pendant 48 heures. En effet, c’est le 9 avril international, c’est à dire, à n’importe quelle endroit sur terre, pour n’importe quel fuseau horaire.

Après avoir expliqué comment réaliser un bon formulaire HTML, pourquoi ne pas en réaliser un uniquement en CSS3 ?

Les propriétés CSS3 utilisées ici sont les suivantes :

• border-radius pour les bords arrondis
• box-shadow pour les ombres des blocs
• content pour rajouter du contenu au HTML
• gradient pour les dégradés des blocs
• rgba pour avoir des fonds transparents
• text-shadow pour les ombres du texte

J’utilise aussi les pseudo-classes CSS3 suivantes :

• :after pour rajouter du texte HTML à la suite d’un élément
• :last-child pour sélectionner le dernier enfant d’un élément
• :target pour séléctionner un élément lorsqu’une #ancre est utilisée dans l’adresse

Dernière fonctionnalité utilisée : le sélecteur avancé [type=text] pour sélectionner un élément selon la valeur d’un de ses attributs HTML.

Bien sûr, toutes ces nouveautés CSS3 ne marchent pas partout, mais elles fonctionnent très bien sous Firefox et Safari/Chrome (Webkit).

De nouvelles intéractions intéressantes

Sans parler du graphisme (qui contient des dégradés, des ombres, des bords arrondis.. en CSS3) et que vous pouvez voir si vous avez un (bon) navigateur compatible, il y a quelques intéractions possibles grâce à CSS3.

Pseudo-classe :last-child

Lorsqu’on peut éviter de rajouter des classes dans le HTML, il est préférable de le faire. Par exemple, la pseudo-classe :last-child permet de sélectionner le dernier enfant d’un élément. En l’occurrence, je sélectionne avec form p:last-child le dernier paragraphe et je lui enlève son margin-bottom. Ca permet d’éviter d’utiliser une classe “last”.

Pseudo-classe :after et la propriété content

Si vous survolez un paragraphe, le label passe en bleu et une flèche » est rajoutée à la suite du label.

Pseudo-classe :target

L’utilisation de la pseudo-classe :target se fait en utilisation les ancres HTML.
Par exemple, en cliquant sur le lien “#options”, ça fait apparaître le bloc id=”options”.
Et si je soumets le formulaire, je navigue vers “#finish” et un bloc vert apparaît tout en bas.
(NB : j’ai remplacé l’input “submit” par un simple lien, histoire de pouvoir afficher le bloc #finish. Le code normal est commenté dans le HTML si vous le voulez).
Enfin, si je clique sur “annuler”, je navigue vers “#start” et ça repart au début.

N’hésitez pas à utiliser mes codes HTML et CSS.

Perso, je suis nul en dessin, mais Pulupulu sait y faire.

Il existe même une fan page Facebook avec pleins d’autres jolis dessins.