PROJET AUTOBLOG


le hollandais volant

Site original : le hollandais volant

⇐ retour index

[CSS] Pseudo-éléments & pseudo-classes

Thursday 11 February 2016 à 05:33

En CSS, on a à faire à des classes, des ID, des éléments… Parfois on rencontre aussi ce que l’on appelle des pseudo-classes et des pseudo-éléments.
Il ne faut pas confondre les deux : la différence est tout à fait logique mais je vais la réexpliquer ici.

Quand on a le code HTML suivant :

<p class="auth-date">
    Écrit par <span class="author">Moi</span>, <span>Aujourd’hui</span>.
</p>

Qui affiche :

Écrit par Moi, Aujourd’hui.

On a trois éléments :

Ce sont des éléments HTML. On les appelait parfois « balises » ou « tag », mais ce sont des éléments. Selon l’élément, la disposition peut varier (un <table> organisera les données sous la forme d’un tableau, par exemple), mais globalement ce sont les éléments qui contiennent les données affichées à l’écran.

En plus des éléments HTML, on a des classes CSS. Ici on en a deux :

Les classes seules servent à rien : elles ne modifient pas ce qui est affiché à l’écran, ne sont pas visibles, etc. C’est en CSS qu’elles sont utiles : elles permettent de modifier le comportement des éléments.
Le CSS permet par exemple d’afficher tous les éléments de classe "author" en rouge. Dans ce cas là, le « Moi » sera en rouge.

Tout ce qui précède est tout à fait basique, mais ça va servir pour comprendre les pseudo-classes et les pseudo-éléments.

Il faut retenir deux choses :

À partir de là, on peut trier les pseudo-classes et les pseudo-éléments en CSS:

Vous le comprenez donc, je présume :

Avant le CSS3, on notait les pseudo-classes et les pseudo éléments de la même façon, avec les deux-points « : ». Depuis le CSS3, il a été introduit le fait de noter les pseudo-classes avec les deux-points « : » et les pseudo-éléments avec deux fois deux-points « :: ».

Les pseudo-éléments sont au nombre de quatre depuis bien longtemps, ::before, ::after, ::first-letter et ::first-line.
Les pseduo-classes sont plus nombreuses : on avait déjà les :hover, :focus, :active, :link ou :visited, maintenant on a plein d’autres, en particulier pour les formulaires, comme :valid, :invalid, :checked, :not(), etc.

Et… on peut très bien combiner tout ça : un élément peut avoir une classe ? Et bien un pseudo-élément peut avoir une pseudo-classe ! On peut très bien faire un des exemples ci-dessous :

element::after:hover {
    // ici le CSS pour modifier le ::after lors du survol du ::after
}
element:hover::after {
    // ici le CSS pour modifier le ::after lors du survol de l’élément auquel est attaché le le ::after
}
element:not(:hover) {
    // ici le CSS pour modifier l’élément quand il n’est pas survolé (utile dans certains cas).
}

Ou encore, plus compliqué :

element:invalid:hover::after {
    // le CSS pour un ::after attaché à un formulaire invalide lors du survol
}

Enfin un petit mot concernant la spécificité des pseudo-classes et pseudo-sélecteurs (voir la spécificité des sélecteurs CSS : là c’est très simple car les pseudo-classes ont la même spécificité que les classes normales et les pseudo-éléments ont la même spécificité que les éléments normaux.

Autrement, les possibilités apportées par ces choses sont énormes, c’est à vous d’étudier ça maintenant !

La compensation équitable

Tuesday 9 February 2016 à 16:44

Ah non, ce n’est pas un truc du genre « revenu de base » qui serait quelque chose égalitaire et une avancée sociale majeure.
La « compensation équitable » c’est, pour quelques députés, de la novlangue pour désigner la rémunération copie privée. C’est tout de suite moins cool, hein ?

Selon la loi actuelle, quand on achète un CD (ou un DVD, ou n’importe quelle œuvre audio, vidéo…), nous [consommateurs] avons le droit d’en faire des copies à des fin d’archive personnelles et de sauvegarde : si le CD acheté se casse, la musique ou les données ne sont alors pas perdues et on peut continuer à l’écouter. La loi autorise ça, et c’est bien.

Après on a les éditeurs qui sont venus avec des protections anti-copie sur les disques ou les fichiers. Ceci nous empêche donc de faire des copies, et nous empêche de jouir de notre droit à la copie privée. Ça, c’est un problème.

Ensuite, même si les éditeurs nous empêchent de copier le CD qu’on a acheté, ils considèrent qu’on le fait quand-même (paye ta logique, là, hein). Du coup ils ont fait passer une loi pour taxer les appareils électroniques.
Cette taxe serait justifiée car ces appareils peuvent faire tourner des musiques ou des vidéos. Les appareils concernés sont les téléphones, les cartes mémoires, les clé USB, les ordinateurs, les CD vierges, les GPS (!), les autoradios (!) et à peu près tout ce qui est électronique.
Cette taxe est est donc un racket qui considère qu’on achète un support pour y copier des données illégales. En gros, on est coupable avant même d’avoir commis une faute, qui n’en n’est d’ailleurs pas une puisque le droit à la copie privée est prévue par la loi. C’est un autre problème.

C’est cette taxe qui se nomme « rémunération pour la copie privée ».

Si je résume, toutes ces choses s’apparentent :

  1. à une double peine : on paye la taxe de copie, mais en plus cette copie est illégale et réprimandée ;
  2. à la présomption de culpabilité : taxe est payée avant l’acte de copie, et avant même de savoir si elle va être comise ;
  3. à du racket : on paye cette taxe pour quelque chose qu’on a le droit mais plus la possibilité de faire, à cause des protections anti-copie.

Triple enfoncement dans le derrière pour l’acheteur par le CopyReich.

Donc finalement, vous le voyez aussi : ça n’a rien d’équitable du tout.

Une solution serait de payer la taxe et d’accepter de la payer, mais dans ce cas qu’ils nous fichent la paix avec le partage (Hadopi & co) : on paye la taxe, on paye notre « crime » par avance, ça suffit.
Ça se nomme la licence globale : un abonnement mensuel et on peut télécharger et partager un peu ce qu’on veut. Mais pour l’industrie du disque en plastique, ça ne peut pas marcher (alors que Google, Amazon, Netflix, Apple… sont la preuve que ça marche très bien) :

la licence globale
La licence globale, par Commit-Strip

Des icônes pour le web : PNG, SVG ou Icon-font ?

Monday 8 February 2016 à 18:00

Il y a quelques temps, je vous montrais une petite astuce pour faire des icônes « propres » sur mobile et desktop, puis une astuce pour faire un formulaire avec des icônes pouvant bénéficier de la première méthode

Depuis j’ai essayé de voir les autres techniques pour faire des icônes dans une page web.
Aujourd’hui, principalement 3 méthodes sont possibles :

Les PNG

La première technique avec les images de fond en PNG, tout le monde la connaît : c’est la plus utilisée, la plus supportée par les navigateurs, la plus simple… mais c’est aussi la moins malléable !
En effet, si ont veut afficher une icône plus grande, on peut le faire, mais l’image sera floue et pixelisée. Même chose si on veut afficher les icônes sur un écran où la densité de pixels est plus grande (écrans « Retina® », par exemple, mais Apple et ses Mac Book sont loin d’être un cas isolé aujourd’hui).
On peut créer plusieurs images avec différentes résolutions pour plusieurs types d’écran, mais ce n’est pas pratique.

Le second problème c’est si on veut changer la couleur de son thème graphique : les icônes doivent être adaptées aussi. Or pour ça, on ne peut pas faire grand chose : pour changer la couleur des icônes, il faut modifier l’image, ou là encore créer des images différentes pour chaque thème…

Les SVG

Les SVG permettent d’avoir des images nettes quelque soit la taille : c’est très pratique lors du zoom, ou lorsque votre site est susceptible d’être affiché sur un mobile (où la densité de pixels est bien plus grande que sur un écran d’ordinateur).
On peut obtenir le même effet avec du PNG, mais il faut pour cela partir d’icônes à haute résolution, et donc d’images très lourdes, ce qui va poser problème lors du chargement de la page, particulièrement sur mobile et surtout avec des connexions pourries. Le SVG, lui, reste précis avec le même fichier.

Le seul problème ici c’est que si on a toujours besoin de faire plusieurs images si on veut changer la couleur du thème. On peut faire ça en JavaScript (je fais cela dans cet exemple), mais pour le thème en CSS, ce n’est pas pratique.

Les Icon-fonts

Alors ici on conserve la netteté du SVG lors de la mise à l’échelle, mais on a en plus l’avantage très important de pouvoir colorier les icônes comme on veut !

En effet, tout se fait en simple CSS : on dit que l’on veut afficher tel ou tel caractère contenu dans la webfont et ensuite c’est du simple texte : on peut l’agrandir (avec font-size), la colorier (avec color), ajouter une ombre CSS (avec text-shadow), etc. C’est la méthode la plus pratique pour le designer final.

Pour créer un fichier de police avec les icônes dedans, il faut disposer d’icônes initiales (PNG ou SVG) et utiliser un programme pour transformer ça en une police. Je n’ai pas trouvé d’outil facile pour faire ça en local, mais cet outil en ligne fonctionne bien : IcoMoon.io.
Ensuite il suffit d’utiliser la police d’écriture comme c’est fait dans le fichier demo.html fourni au téléchargement.

Il y a quand même quelques inconvénients. J’en ai noté deux principaux :

Si vous voulez quand-même utiliser une icône sur un input, il faut ruser, et l’appliquer par exemple sur un label qui est rendu invisible.

L’usage des Icon-fonts est assez simple. Comme je l’ai dit, on utilise un code pour accéder à un caractère en particulier dans la police. Le CSS se charge d’afficher ce caractère à l’écran grâce à la propriété content :

.icon::before {
    content: "\1a02";
}

Ce que l’on fait parfois, c’est qu’on place ce code directement dans un attribut de l’élément HTML, puis le CSS affiche le contenu de cet attribut dans le content (oui, on peut faire tout ça :D) :

<span data-icon="&#x1a02;">Text</span>
[
@font-face {
    font-family: "icons";
    src: url("icons.woff") format("woff");
}

data-icon]::before {
    font-family: icons;
    content: attr(data-icon);
}

Et on peut changer la couleur, etc :

[data-icon]::before {
   [ …]
    color: red;
    font-size: 3em;
}

Bref, une fois qu’on a créé notre fichier d’icônes, l’usage est très simple, les possibilités sont énormes (couleurs, taille, ombres, animations — y compris sur la couleur, donc pour faire des couleurs arc-en-ciel \o/ — etc.), c’est supporté par les bon navigateurs récents (y compris mobiles).

Et concernant la lourdeur et le poids, je trouve que ça va tranquillement : mon fichier d’Icon-fonts fait 48 ko et contient 400 icônes différentes. Mon fichier PNG avant contenait environ 60 icônes pour 25 ko (certaines étaient en doubles pour pouvoir avoir des couleurs différentes).

Petit mot sur Google Password Manager

Monday 1 February 2016 à 17:10

Le navigateur Google Chrome a une fonction pour enregistrer vos mots de passe et les envoyer en ligne pour vous connecter facilement à tous vos comptes sur tous vos appareils connectés (ordinateur, tablette, téléphone…).

Ça peut sembler séduisant comme idée.
Perso je trouve l’idée terrifiante.

Vous donneriez vos clés de maison/voiture/garage/moto/vélo/boîte aux lettres à une personne qui dit « désormais, j’ouvrirais les portes pour vous, vous n’avez qu’à m’appeler. » ?

Ici pourtant vous donnez les clés de votre vie numérique à une entreprise a but lucrative dont vous ne connaissez que le nom.

Alors oui, je sais : « vie numérique », ce n’est rien. Ce n’est pas votre vie.

Ben en fait si, figurez vous.

Votre vie numérique, c’est tout ce que vous faites sur les sites web, sur votre ordinateur, sur votre téléphone, votre tablette ou votre console de jeu.
Cela englobe donc toutes vos photos, vos posts, vos commits (pour ceux qui codent), vos vidéos, votre bibliothèque (y compris musicale et vidéo), vos discussions, vos emails, vos SMS, vos abonnements, votre historique d’achat en ligne, l’accès à votre compte en banque en ligne, votre numéro de carte de crédit (enregistré sur tous les sites où vous achetez). Et bien plus de choses encore.

Si votre vie numérique ne compte pas, laissez-moi effacer tous vos disques durs, vos comptes en ligne, vos favoris et tout le reste et dites-moi si ça vous manque. Si la réponse est oui (je suis sûr que c’est oui, sinon vous n’auriez pas d’ordinateur), alors votre vie numérique compte pour vous et vous devriez la protéger.

Utiliser un service comme Google Password Manager, c’est donner tout ça à Google pour qu’ils en fassent ce qu’ils veulent (et par ça je veux dire vraiment ce qu’ils veulent).

Et ceci compte pour Google, mais également Firefox ou Opera, qui proposent la même chose (mais c’est pas activé par défaut, ceci dit). En règle général, ne laissez pas jamais un programme — quel qu’il soit — retenir vos mots de passe.

À vous de voir, mais soyez prévenu.
Personnellement je ne ferais jamais ça.

Firefox : créer des boutons pour des fonctions supplémentaires

Friday 22 January 2016 à 19:50

Je viens de découvrir un module pour Firefox : Custom Buttons.
Ça permet de créer ses propres boutons pour l’interface de Firefox, directement en JS et dans l’interface (donc mieux que les simples bookmarklets). Le module ne semble plus mis à jour depuis quelques années, mais il fonctionne encore très bien.

Je me suis pour le moment simplement attardé à transformer 3 bookmarklets en boutons Firefox :

firefox new buttons

Forcer le mode lecture

Le premier, le petit « livre », c’est pour forcer le mode lecture. Parfois, le mode lecture ne fonctionne pas dans Firefox. J’ai trouvé d’où ça vient, c’est un comportement compréhensible et à chier, mais on peut l’outrepasser : il suffit d’ajouter le texte « about:reader?url= » devant l’URL. Ce bouton fait ça en un clic (notez que certaines pages ne rendent pas bien en mode lecture).

Pour ajouter ce bouton, il faut commencer par ajouter un bouton. Dans Firefox allez dans AffichageAdd New Button (appuyez sur Alt pour afficher le menu et aller dans Affichage).
Une nouvelle fenêtre s’ouvre alors :

ajouter un nouveau bouton à Firefox avec Custom Buttons

loadURI("about:reader?url="+encodeURIComponent(content.document.location))

Faites ensuite « OK », en bas : le bouton est créé.

Maintenant il faut l’ajouter à l’interface : allez dans le menu de Firefox puis « Personnaliser ». Vous voyez alors votre icône et vous pouvez la déplacer où vous voulez dans l’interface. Une fois que c’est fait, quittez la personnalisation et cliquez sur votre bouton pour passer en mode lecture (même si le mode lecture n’était pas activé par défaut).

Afficher un clavier virtuel JS

Le deuxième bouton, il affiche un petit clavier alternatif pour taper en Russe, Japonais ou en Grec dans les formulaires. C’est le petit clavier en JS que j’avais créé il y a 2 ans.
Pour l’avoir aussi, il faut ajouter un autre bouton.
Faites la même manip que tout à l’heure, mais changez juste le Code en ça :

loadURI("javascript:s=document.createElement('script');s.id='r6109_vkbsgp';s.type='text/javascript';s.src='http://lehollandaisvolant.net/tout/dl/virtual-kb/keyboard.js?french';document.head.appendChild(s);void(null);")

(La doc du clavier est sur mon article dédié et sur Github)

Un bouton pour Shaarli

Le troisième, c’est pour partager un lien sur mon blog, façon Shaarli. Pour Shaarli, le code à faire serait dans ce genre là :

loadURI("http://example.com/shaarli/?post="+encodeURIComponent(content.document.location)+"&title="+encodeURIComponent(content.document.title))

En remplaçant example.com/shaarli/ par l’adresse de votre Shaarli.
Notez que ce code diffère du contenu du bookmarklet de Shaarli : en effet, si le code du bookmarklet fonctionnerait parfaitement, ce code est plus natif à Firefox et donc plus rapide. En plus, il fonctionne même là où les bookmarklets normaux ne marchent pas (quand le JS du bookmarklet est bloqué sur le site, comme sur Github).

Vous pouvez transformer n’importe quel bookmarklet en bouton dans Firefox en plaçant le code JS du bookmarklet entre « loadURI(" » et « ") ».

Le module permet de faire quelques autres choses, comme lancer le script automatiquement au démarrage de Firefox. Je vous laisse voir le site du module pour plus d’information. Il y a aussi un forum, avec un partage de plein de scripts.