PROJET AUTOBLOG


le hollandais volant

Site original : le hollandais volant

⇐ retour index

[CSS] Astuce simple pour des icônes nettes sur les mobile

dimanche 2 août 2015 à 16:27
(oui encore une astuce CSS, je suis en plein dedans, c’est pour ça :p)

Quand vous faites un bouton avec une icône, dans mon cas de 48px de côté, il s’affichera très bien sur l’ordi :
icônes sur l’ordinateur
Sur mobile en revanche, l’image sera toute pixelisée et moche :
icônes sur le téléphone (ne vous fiez pas à la taille des captures d’écran : la première est zoomée 3 fois et la seconde seulement 2 fois ; sans interpolation dans les deux pas. C’est la pixellisation qu’il faut regarder).

Pourquoi ? Parce qu’un écran de mobile en full-HD mesure 12 cm, alors qu’un écran full-HD d’ordi mesure 40 cm : la densité de pixels (pixel-ratio) est plus grande sur mobile.

Pour contrer ça, les navigateurs mobiles doublent les pixels : un pixel sur l’ordinateur correspond à 4 pixels sur mobile afin de respecter les tailles d’affichage.
Si cela concerne une image, l’image de 48px est étirée sur le double : 96px, et on se retrouve avec un effet de pixellisation désagréable.

CSS et JS offrent des solutions pour détecter le pixel-ratio et fournir une image plus détaillée pour les écrans les plus denses.
On trouve des articles sur ça avec du code et des exemples :

Mais je trouve ça vachement lourd. Il y a en effet beaucoup plus simple : utiliser une image avec une grande résolution et la rétrécir sur les écrans les moins denses.
Le résultat visuel est sans appel :

icônes améliorées sur mobile et ordinateur
Dans les deux cas, j’ai fait deux boutons : celui du haut avec une image de 48px affichée dans un bouton de 48px, et celui du bas est une image de 96px affichée dans un bouton de 48px et dont la taille est rapportée à 48px.

À gauche c’est sur mon ordinateur : on ne voit pas de différences entre les deux. À droite, c’est sur mobile : la différence est très visible : une icône de 96px réduite à 48px est bien plus nette !

Le code CSS est très simple et elle tient en un seul mot : background-size.


#bouton-48 {
    width: 48px;
    height: 48px;
    background: url(icon96.png) no-repeat 
    background-position: 0px 0px;
    background-size: 48px 48px;
}

L’image mesure bien 96 pixels de côté, mais elle est réduite à la taille de l’icône, donc ici d’un facteur 2.

La démonstration en temps réel est disponible sur cette page : affichez la sur l’ordi, puis sur mobile et vous verrez.

Avec la méthode des portes coulissantes, si vous savez disons deux icônes de 96px côté à côte, votre image fait 192px de large sur 96px de haut. Vous devrez donc utiliser ceci :
    background-size: 96px 48px;

Les valeurs dans le background-position ne sont pas à modifier.

Notez qu’il y a un seul inconvénient à ceci : l’image de fond est plus grande, donc aussi plus lourde.
Je pense que ça vaut le coup quand même : si la gestion du cache est correcte, l’image restera dans le cache du navigateur.
De plus, si vous utilisez des images multi-icônes avec la méthode des portes coulissantes, le poids de l’image ne sera pas excessif non plus.

Enfin, vous pouvez utiliser SVG, mais je pense que ça ne vaut pas le coup en terme de poids des images si petites.

Encore quelques tweaks pour Firefox

samedi 1 août 2015 à 18:18
firefox logo Pour les utilisateurs de Firefox, voici quelques idées qui peuvent le rendre plus pratiques. Il y en a un peu pour tous les goûts.

Les extensions

Mes extensions du moment sont, pour la vie privée et la sécurité :

Pour les fonctionnalités supplémentaires :

Pour l’interface :

Dans About:config




Des moteurs de recherche personnalisés


C’est sûrement la truc le plus pratique disponible dans tous les navigateurs. Ce sont les « !bang » directement dans le champ de l’URL (sans passer par DDG ou Google). N’importe quel champ de recherche peut être lié à un raccourcis « !bang ».

Personnellement j’ai ainsi Wikipédia (w), Youtube (y), Google (g), Google Image (i), Google Image recherche par URL (ii), Flickr Recherche d’images en CC (fcc)…

Il suffit de faire un clic droit dans un champ de recherche et faire « ajouter un mot clé pour cette recherche ». Ajoutez ainsi un mot clé en face du champ « mot clé », par exemple « w » pour le champ de recherche de Wikipédia et il vous suffira ensuite de taper « w le hollandais volant » pour afficher la page Wikipédia sur le Hollandais Volant.


Sur l’interface


Pour l’interface, j’ai déjà la barre personnelle affichée verticalement sur le côté, mais j’ai aussi supprimé le champ de recherche (la barre d’URL remplissant cette fonction).
Mes icônes d’extensions sont aussi sur la barre des personnel.

Avec l’extension ClassicThemeRestorer je peux modifier beaucoup plus de choses dans Firefox. Je remet ainsi l’icône de rafraîchissement de la page à gauche de la barre d’adresse.

Scripts GreaseMonkey


GreaseMonkey permet de faire des scripts pour modifier des pages à la volée.
J’ai ainsi quelques scripts pour supprimer systématiquement les paramètres de tracking « UTM_* » dans les URL, ou pour réactiver les suggestions et le redimensionnement des champs de saisie.

J’ai aussi un script pour Youtube, me permettant d’avoir des URL Youtube propres (sans les « featured » ou « source »), ce qui est pratique pour les partager, voir là.

Pour Wikipédia, je lis principalement les pages en Français et en Anglais. Voici un script qui va mettre en rouge les liens sur la gauche de la page (celle pour voir un article dans les autres langues). Ça permet de gagner du temps quand on cherche à trouve le lien « English » dans la liste des 200 langues disponibles.


UserChrome.css


C’est le fichier dans le dossier ~/.mozilla/firefox/<le dossier du profile>/chrome/userChrome.css.

Ce fichier CSS permet de modifier l’interface de Firefox, en CSS. À une époque je l’utilisais énormément, mais avec les changements tout le temps depuis la version 3.5, je n’ai jamais tout mis à jour.
Le code suivant fonctionne cependant toujours très bien et il permet de diminuer la largeur des onglets et des onglets quand ils sont épinglés. Plus de place de gagné permet d’épingler plus d’onglets :

.tabbrowser-tab[fadein]:not([pinned]) {
	min-width: 20px !important;
	max-width: 180px !important;
}

.tabbrowser-tab[pinned] {
	width: 24px!important;
	min-width: 20px !important;
	max-width: 24px !important;
}

Et vu que j’utilise l’add-on Vertical Bookmarks, avec la barre de favoris sur le côté droit de l’écran, je réduis là aussi la taille des favoris à leurs favicon :

#personal-bookmarks {
	width: 24px;
}

Quelques raccourcis clavier utiles


Les raccourcis clavier que j’utilise le plus souvent sont :

Et si Google fermait mon compte (v2015)

mardi 28 juillet 2015 à 18:38
Il y a deux ans, j’écrivais cet article : et si Google fermait mon compte ?
Ça faisait suite, dans une certaine mesure, à l’annonce d’Opera de fermer quelques mois plus tard leur service mail : je m’étais demandé quel impact pour moi aurait la fermeture d’autres services web que j’utilisais à l’époque, principalement Google.

Depuis la fermeture de My-Opera, j’ai effectivement pris quelques mesures. Je pense être devenu moins dépendant de services externes. Il faut dire que la fermeture de mon compte email principal m’a beaucoup fait chier, mais d’un autre côté ça m’a permis d’apprendre beaucoup de choses.

Voici mon retour d’analyse, deux ans après cet « incident », et la mise aupoint concernant ma dépendance vis à vis des autres « grands sites ».
Toujours la même notation : 0/5 correspond à « je m’en fous totalement » et 5/5 à « je suis vraiment dans la merde ».

Si Google fermait mon compte, en 2015 :



C’est tout pour Google.

Pour les autres sites :
Paypal, eBay, Amazon, ça me ferait un peu chier parce que j’achète régulièrement en ligne, mais je peux m’en passer : il y a d’autres sites et d’autres moyens.
Microsoft/Skype, Facebook, Yahoo : totalement rien à faire. Je n’utilise pas de XBox, et Facebook me sert un peu à rien. Mon compte Yahoo, je ne sais même plus ce que c’est…
Twitter : je l’utilise de temps à autre en version web pour interagir avec ceux qui suivent mon blog via Twitter (le RSS de mon blog est reposté sur Twitter). Ça serait dommage si ça vienne à être supprimé, mais bon, tant pis : ça m’empêchera pas de poster et ça n’empêchera personne de lire mon site quand même si elle le souhaite vraiment.
Tumblr : j’aime bien Tumblr, le site est sympa et on trouve pas mal de monde. Mon site n’est plus dupliqué sur Tumblr depuis un moment car je l’utilise pour d’autres raisons maintenant, plus orienté jeux-vidéos, manga, pokémon… Là aussi, ça m’embêterait que le site ferme où que mon compte soit fermé, mais ça ne sera pas la fin du monde non plus.

Je n’ai autrement pas de compte « Cloud » grand public, ni de compte d’écoute de musique en ligne (SoundCloud, LastFM, Deezer…).

Bref, je suis un peu partout sur Internet, mais mon point central c’est mon site, mes noms de domaines. Je n’ai pas encore de quoi m’auto-héberger (ou même devenir mon propre FAI) pour garantir une bonne et vraie indépendance, mais si ça venait à arriver pour des raisons politiques, je suppose que le web ne sera plus un lieu digne d’intérêt pour partager quoi que ce soit. Je serais alors passé sous Tor ou Freenet depuis longtemps.

Ce ne sont pas la fermeture de mes comptes sur les réseaux sociaux qui me font peur en tout cas.

Le streaming 4K menacé par les royalties sur les codecs

dimanche 26 juillet 2015 à 10:59
Netflix, entre autres, qui utilise le codec H265 pour diffuser de la vidéo en Ultra-HD (4K), est ciblé par HEVC Advanced, pour leur faire payer des droits d’utilisation du codec.

Je me marre.


Bah comment dire : c’est bien fait et ça leur apprendra d’utiliser des technologies non libres ?

Parce que ça fait des années, même des décennies, qu’il existe de très bon codecs et conteneurs libres d’usage et de droits pour l’audio et la vidéo : Vorbis, Theora, WebM (reprise du Matroska, lui aussi libre), VP8/9, Opus.

Les formats ne sont pas ce qui manque. Et s’ils peuvent très bien ne pas être aussi bon que le H265, je pense que ça coûtera bien moins cher à Netflix et les autres d’investir dans l’évolution de ces codecs libres que de payer pour avoir le droit de se servir du H265. Et en prime, ces évolutions profiteront à tout le monde, comme ces codecs pourront profiter à eux, gratuitement.

Il faut croire que personne n’apprend jamais : ça fait des années que les ayants droits du H265/H264 et même aussi ceux du MP3 et avant cela ceux du format GIF font ce qu’ils peuvent pour imposer des royalties quand on utilise leur codecs.

[CSS] La spécificité des sélecteurs

samedi 25 juillet 2015 à 14:20
En CSS, il y a les sélecteurs. Avec le CSS v3, il y a maintenant beaucoup de sélecteurs, et vous trouverez pas mal de ressources à ce sujet. En revanche, ce dont on n’entend pratiquement jamais parler, c’est la spécificité des sélecteurs. Même les sites de référence comme OpenClassRooms ne semble pas en parler dans son tutoriel sur le HTML/CSS.

La spécificité est pourtant importante, car elle intervient au moment où le navigateur doit appliquer les CSS à un élément de la page.


Spécificité ?


Considérons ce code :

HTML :
<body>
Mon texte
</body>

CSS:
body { color: red; }
body { color: green; }

Quelle sera la couleur de la page ?
La page sera évidemment verte, car le navigateur va prendre en compte la dernière déclaration effectuée.

Maintenant, plaçons des paragraphes dans la page avec un lien :

<body>
Mon texte
<p>Mon paragraphe</p>
<p>Mon paragraphe avec <a>un lien</a></p>
</body>

Avec le code ci-dessus, les paragraphes et le lien seront également en vert (en fait non pour les liens : les styles internes du navigateur font qu’ils sont bleus si on ne dit rien ; voir plus bas) : la couleur est en effet héritée de l’élément parent de <p> et de <a>.
Si on veut donner une couleur particulière aux éléments on fait ceci :

CSS:
body { color: red; }
p { color: green; }
a { color: blue; }


Ici, le texte sera bleu dans le lien, en vert dans le paragraphe et en rouge partout ailleurs dans le corps du document.
La couleur est bien héritée, mais elle est écrasée si on la déclare de nouveau dans un élement qui est plus proche (p est plus proche de a que le body).

Simple non ? Bien.


Maintenant, prenons le code CSS suivant :

CSS:
body p { color: red; }
p { color: green; }

Quelle sera la couleur du paragraphe ? Indice : ça n’est pas vert !
Ici, la première déclaration veut dire « tous les paragraphes dans le corps du document doivent être en rouge » et la seconde déclaration « tous les paragraphes doivent être en vert ».

Alors pourquoi le paragraphe est rouge et pas vert ?

Le paragraphe est rouge parce que le sélecteur « body p » est plus spécifique que le sélecteur « p » tout seul. Il est en effet plus précis de dire « tous les paragraphes dans le corps du document » que « tous les paragraphes ».
Or, pour le navigateur qui va afficher la page, la spécificité est prioritaire sur l’ordre des déclarations dans le code.


Sachant ceci, vous pouvez prédire quelle sera la couleur du paragraphe quand on lui applique ce code :

CSS:
body p { color: red; }
body p { color: blue; }
p { color: green; }
p { color: orange; }
p { color: fuchsia; }

Le paragraphe sera en bleu.
Les deux premiers sélecteurs sont plus spécifiques que les trois suivantes : elles sont donc prioritaires. La seconde est située après la première : c’est donc elle qui est retenue.


Spécificité de chaque sélecteur


Si on reprend ce CSS :
body p { color: red; }
p { color: green; }

Je vous ait dit que la première déclaration est plus spécifique. En fait, il y a deux sélecteurs d’éléments (body et p). La spécificité d’éléments est donc de 2. La seconde déclaration possède un seul sélecteur d’élément : sa spécificité d’éléments est 1 : la première est bien prioritaire.

Maintenant, donnons des classes à nos éléments :

<body>
Mon texte
<p class="in-blue">Mon paragraphe</p>
</body>

Et ajoutons le CSS suivant :
body p { color: red; }
p { color: green; }
p.in-blue { color: blue; }

Quelle sera la couleur du paragraphe ? Bleue, encore !

En CSS, le sélecteur de classe l’emporte sur les sélecteur d’éléments, même s’il y en a plusieurs ! Vous pouvez bien faire « html body div p span a { … } », si votre lien <a> possède une classe « foo », alors le code « .foo { … } » sera prioritaire.

C’est une question de hiérarchie : les classes sont plus fortes que les éléments, même si les éléments sont au nombre 315 et que la classe est toute seule : un sélecteur plus haut dans la hiérarchie sera toujours prioritaire pour imposer ses styles.

Comme les éléments et les classes, chaque type de sélecteur (ID, attributs…) possède sa place dans la hiérarchie.


Calcul de la spécificité


On a vu que la classe est prioritaire sur les éléments. Mais les ID sont prioritaires sur les classes. Et le CSS « inline » (attaché dans l’attribut style="…" d’un élément) est prioritaire sur les ID. Enfin, le flag « !important » est prioritaire sur tous les autres, quelque que soit sa place.

On a donc quelque chose comme ça :

Y-X-C-B-A


Avec :


Chaque lettre A, B, C, X, Y représente un nombre, où 0 est le défaut.

Voici quelques exemples :

* { color: green; }
Ceci donne un style vert à tous les éléments. Sa spécificité est cependant nulle : 0-0-0-0-0. Elle est supplantée par tous les autres sélecteurs, mais elle permet quand même d’être plus forte que les styles « par défaut » du navigateur (j’y reviendrai plus tard).

p { color: green; }
Pas de !important, ni de style en ligne, ni d’ID, ni de classe, mais un sélecteur d’élément : la spécificité est 0-0-0-0-1.

body p { color: red; }
Pas de !important, ni de style en ligne, ni d’ID, ni de classe, mais deux sélecteurs d’élément : la spécificité est 0-0-0-0-2.

p.in-blue { color: blue; }
Ici, on a une classe et un élément : la spécificité est 0-0-0-1-1.

body p.in-gray { color: gray; }
On a un élément (body), un autre élément (p) et une classe : la spécificité est 0-0-0-1-2.

body.home p.in-black { color: black; }
Ici, au total on deux éléments et deux classes : la spécificité est 0-0-0-2-2.

p.in-black.in-bold { color: black; font-weight: bold; }
Ici, au total on un élément et deux classes (sur le même élément, certes) : la spécificité est 0-0-0-2-1.

body#home p.in-black .link span { color: black; }
On a 3 éléments, 1 ID et deux classes : 0-0-1-3-2.

body#home table#data tbody tr td a .cool { color: black; }
6 éléments, deux ID et une classe : 0-0-2-1-6.

C’est assez simple non ?

Pour le « !important », il faut faire attention : ce dernier ne s’applique qu’à une seule propriété :

#home p {
    color: black;
    font-weight: bold;
}
p {
    color: red!important;
    font-weight: normal;
}

Ici, la couleur est mise en !important dans la seconde déclaration : la spécificité de la couleur est donc :

Mais la spécificité pour la graisse (texte en gras) est de :

Le paragraphe a donc une couleur rouge (grâce au !important) mais un texte en gras, à cause de spécificité du sélecteur dans la première déclaration.

Vous arrivez à suivre ?
Continuons.

p.foo a[href] {…}
La spécificité du sélecteur d’attribut est la même que celle des classes. On a donc l’équivalent de deux classes et deux éléments : 0-0-0-2-2.

p.foo > a{…}
p.foo a{…}
Ici, les liens a ont la même spécificité : les combinateurs comme >, ~, + n’ont pas de spécificité particulière et ne sont pas prioritaires.

Ce qui suit est plus tordu :
HTML:
<body id="home><p><a>coucou!</a></p></body>

#home p { color: red!important }  /* 1-0-1-0-1 */
a{ color: green }  /* 0-0-0-0-1 */

Le lien sera… Vert !
En effet, bien que la spécificité de la première déclaration l’emporte sur la seconde, la couleur de la première s’applique au paragraphe et non au lien !
L’héritage existe, mais la seconde déclaration s’applique directement aux liens : elle est donc plus forte que l’héritage. L’ordre n’aurait pas non plus importé et le lien aurait été vert même dans le cas suivant :

a{ color: green }
#home p { color: red }

Si on avait voulu forcer la couleur rouge des liens, il aurait fallu faire ça :
#home p a { color: red }  /* 0-0-1-0-1 */
a{ color: green }  /* 0-0-0-0-1 */

Ici alors les deux sélecteurs s’adressent aux liens directement, et c’est la spécificité qu’il faut regarder.

La même remarque compte pour les pseudo-éléments :
#home a::before{ color: green }  /* 0-0-1-0-2 */
#home p a { color: red }  /* 0-0-1-0-2 */

La spécificité de la couleur est de 0-0-1-0-2 dans les deux cas, mais la première s’applique directement au ::before du lien, qui est un pseudo-élement : il est donc prioritaire sur l’héritage ainsi que sur l’ordre de la déclaration.

En revanche, les pseudo-classes restent des classes (ce ne sont pas des éléments particuliers) et ont la même spécificités que les classes.
Du coup, le code suivant :
#top a { color: red; } /* 0-0-1-0-1 */
a:hover {color: green} /* 0-0-0-1-1 */

Donnera un lien rouge même quand on passera la souris dessus ! Les deux sélecteurs s’appliquent directement au lien (pas de problème d’héritage) mais le « #top » de la première déclaration est plus spécifique que le « :hover », qui ne compte que pour une classe.

Pour faire passer l’effet lors du passage de la souris, il faut utiliser une des méthodes suivantes :
#top a:hover {color: green} /* 0-0-1-1-1 */
a:hover {color: green!important} /* 1-0-0-1-1 */
Ou bien utiliser JavaScript, dans ce genre là :
<a onmouseover="this.style.color='green'">
(Les styles ajoutées en JS avec onmouseover/onblur équivalent à ajouter des styles directement sur l’élément, et la spécificité sera de 0-1-0-0-0, bien au dessus d’un sélecteur d’ID ou de classe.

Enfin, un petit mot sur la pseudo-classe « :not() » : elle n’ajoute pas de spécificité particulière, mais il faut quand même compter tout ce qui se trouve à l’intérieur :

#top a:not(.links) {color: green} /* 0-0-1-1-1 */
On se retrouve avec un ID, un élément ainsi qu’une classe : elle se trouve dans le :not(), il faut la compter comme une classe. Si le :not() contenait un ID, il faudrait le compter comme un ID.


Styles navigateur, auteur, utilisateur


On a vu tout ce qui concerne la spécificité des sélecteurs, mais il reste un dernier point à aborder.
Pour le moment, on a parlé du CSS dans une page web. Ce ne sont pourtant pas les seules styles qui sont utilisées sur une page.

Par exemple, quelle est le style d’un lien sur une page qui n’a aucun CSS ? Le lien est bleu dans pratiquement tous les navigateurs (il est même violet quand le lien est visité). Pareil, certains éléments sont stylisés de façon particulières : les formulaires ont des bordures et tous les éléments sont blancs.
Les styles ici sont produites par le navigateur lui-même : ce sont les styles navigateur.

Parallèlement, un utilisateur peut forcer l’application de styles : il veut par exemple mettre tous les liens en orange, et toute la page en Comic Sans MS. Les navigateurs disposent d’une feuille de style utilisateur prévu pour que l’utilisateur puisse ajouter ce qu’il veut. Ceci inclut les styles introduites par les modules complémentaires, comme les bloqueurs de publicité.

On se retrouve donc avec 3 sources de CSS :


En général, les navigateurs appliquent les styles dans l’ordre ci-dessus. C’est donc l’auteur de la page qui a le dernier mot.

Il y a une exception cependant : le « !important » dans les styles utilisateur. Ce sélecteur, le plus puissant de tous, devient encore plus puissant quand il est utilisé dans les styles utilisateurs.
Les navigateurs laissent donc le dernier mot à l’utilisateur et c’est bien normal.

Pour Firefox, le fichier des styles utilisateurs se trouve dans le dossier chrome du profil de Firefox : ~/.mozilla/firefox/*.default/chrome/userContent.css (sous GNU/Linux).
Vous pouvez essayer dans ce fichier : ajoutez simplement ceci :
a { color: green!important; }

Enregistrez, puis redémarrez Firefox et vous verrez que tous les liens seront en vert, même si l’auteur a utilisé un sélecteur beaucoup plus puissant, avec à la fois !important et un ID, par exemple.

(Pour remettre les liens normalement, supprimez le ligne du fichier userContent.css, enregistrez, puis relancez Firefox.)

Les autres navigateurs doivent également proposer des styles utilisateurs quelque part.
Ceci est essentiel pour les personnes malvoyantes ou dyslexiques, qui ont besoin de polices de caractères spéciales, en grand et avec un contraste élevé.


Ressources


Comme j’ai dit en intro, il y a peu de documentation à propos de la spécificité en CSS, mais on trouve quand même ceci :


Pour conclure, je pense avoir fait le tour de la question, et j’espère que ça vous permettra de déboguer votre CSS un peu plus facilement.
Je dirais une nouvelle fois que ça me surprends de ne pas trouver plus de documentation à propos de la spécificité, alors que si on regarde d’autres choses, comme les nouveaux sélecteurs CSS3 ou les couleurs HTML, tout le monde en parle et les connaît.