Je viens de me retrouver sur cet article qui montre comment faire des colonnes avec float et de palier au problème du clear:both sans toucher au HTML. La solution retenue — quoiqu’invalide CSS — est élégante… si on retourne en 2009 !

Car pourquoi utiliser des flottants ?

Utilisez Flexbox plutôt !

Non seulement vous n’aurez pas besoin de hack comme ça, mais en plus vous aurez la possibilité de faire des colonnes de la même hauteur.

Je n’ai rien contre float, mais son but est de faire sortir un élément de la structure de la page et de le faire flotter au dessus. À quoi ça sert d’utiliser float si on lui dit, avec clear, de se remettre dans la page ?
Autant ne pas utiliser float et choisir quelque chose de plus adapté, comme flexbox : c’est largement supporté.

Voyez le résultat ici : demo.
Et pour vous amuser, voilà un Flexbox playground, ainsi qu’un tutoriel en Français.

Je vous ferai aussi un article, bientôt, pour donner des exemples de choses possibles avec Flexbox.

(cet article est le deuxième dans la série « arrêtez d’utiliser les flottants alors qu’il y a mieux »)

Bon ça y est…

Tout le monde est au courant ? Google change de nom : l’entreprise mère devient « Alphabet ». Le nom Google restera quant à lui uniquement là pour le moteur de recherche, et quelques autres trucs proches (Chrome, Android, Gmail…). Tout les autres activités de l’entreprise sont séparées du nom de « Google » : les labos de recherche (Google X), les voitures autonomes (Google Cars), le Fai (Google fiber)…

Même pas quelques heures que l’annonce fait le tour du monde, et déjà les premiers délires ubuesques arrivent : voilà que BMW s’inquiète : en effet, la marque de voitures a elle aussi une filiale nommée « Alphabet ».

Dites, les gars, et si vous arrêtiez de prendre comme nom de marque des mots du dictionnaire aussi ? Ouais, je parle à vous, là : Alphabet, Orange, Apple, Free, Blackberry, et j’en passe.
Ça serait pas plus simple pour tout le monde d’inventer un mot nouveau pour votre boîte ?

Je vais faire une marque moi aussi : « Bonjour », et demander des royalties à chaque fois qu’on le prononce. Ça vous va ?
Ah merde, « Bonjour » est déjà un truc propriétaire de Pomme (Apple), pour un service de mise à jour d’iTunes. Le mot « Hello » alors ? Ah non, c’est réservé par les biscuits Lu.

Bandes de brigands, sérieux.

En plus de la musique de jeux vidéos, films ou autres musique « épique » et la K-Pop/J-Pop, j’écoute aussi du métal — du folk métal — et selon certains (coucou Thierry) je serais le seul à écouter aussi bien SNSD que Ensiferum :D.

Pour la musique épique et la K-Pop :

• Mon top de chansons J-Pop et K-Pop
• Mon top de musique épique

Concernant le métal, j’écoute uniquement du « folk métal » et quelques dérivés ou genres mélodiquement proches (power métal, pirate métal, viking métal…). Tout ce qui est death ou black métal, je n’écoute pas du tout. Pas que je suis contre ou quoi, c’est juste que j’aime pas. C’est pourquoi la liste qui suit ne contient aussi qu’une petite liste de groupes (tous des groupes du nord de l’Europe) mais contrairement à mes deux autres tops de musique, j’écoute beaucoup de chansons de chaque groupe.

Je ne suis pas spécialement fermé à écouter un autre groupe (si vous en avez, faites péter), mais les quelques groupes ici sont ceux qui j’aime beaucoup et je n’écoute qu’eux (il y a certains groupes où je n’ai pas vraiment accroché).

En plus des airs musicaux, j’aime aussi énormément les textes qui racontent des aventures fantastiques avec des trolls, des chevaliers, des vaisseaux de pirate ou des dragons (encore faut-il que les paroles soient dans une langue que je comprenne, ce qui n’est pas systématique quand les groupes sont finlandais ou féroéens).
Une dernière chose que j’aime dans ce style de musique (plus que les autres styles de musique), ce sont les pochettes d’album qui sont de véritables œuvres d’art (voir lien en bas de l’article).

Voici donc mon top :

Alestorm (groupe écossais de pirate métal)

Heavy Metal Pirates, de l’album Leviathan
‎‎Weiber Und Wein, de l’album Leviathan
‎Wolves Of The Sea, de l’album Leviathan
‎1741 (The Battle of Cartagena), de l’album Sunset on the Golden Age
‎Sunset on the Golden Age, de l’album ‎Sunset on the Golden Age
‎Magnetic North, de l’album ‎Sunset on the Golden Age
Flower of Scotland, de l’album Captain Morgan’s Revenge
‎Nancy the Tavern Wench, de l’album Captain Morgan’s Revenge
Captain Morgan's Revenge, de l’album Captain Morgan’s Revenge
‎Chronicles of Vengeance, de l’album Black Sails At Midnight
Pirate Song, de l’album Black Sails At Midnight
To the End of Our Days, de l’album Black Sails At Midnight
Keelhauled, de l’album Black Sails At Midnight
You Are A Pirate, de l’album Back Through Time
I Am A Cider Drinker, de l’album Back Through Time
‎Scraping The Barrel, de l’album Back Through Time
Back Through Time, de l’album Back Through Time


Dragonforce (groupe britannique de power metal)

Where Dargons Rule, de l’album Valley Of The Damned
Starfire, de l’album Valley Of The Damned
Evening Star, de l’album Valley Of The Damned
Black Winter Night, de l’album Valley Of The Damned
Inside the Winter Storm, de l’album Ultra Beatdown
The Fire Still Burns, de l’album Ultra Beatdown
Heart Of The Storm, de l’album The Power Within
Seasons, de l’album The Power Within
‎Cry Thunder, de l’album The Power Within
‎Last Man Stands, de l’album The Power Within
Dawn Over a New World, de l’album Sonic Firestorm
Cry Of The Brave, de l’album Sonic Firestorm
Soldiers Of The Wasteland, de l’album Sonic Firestorm
You're Not Alone, de l’album Maximum Overload
Ring of Fire, de l’album Maximum Overload
Chemical Interference, de l’album Maximum Overload
Fight To Be Free, de l’album Maximum Overload
Through The Fire And Flames, de l’album Inhuman Rampage


Ensiferum (groupe finlandais de viking métal)

‎Tale Of Revenge, de l’album Iron
‎Deathbringer From The Sky, de l’album Victory Song
Abandoned, de l’album Ensiferum
Pohjola, de l’album Unsung Heroes
Lady In Black, de l’album Victory Song
Raised By The Sword, de l’album Victory Song
Wanderer, de l’album Victory Song
Neito Pohjolan, de l’album One Man Army
Cry For The Earth Bounds, de l’album One Man Army
Heathen Horde, de l’album One Man Army
March of War, de l’album One Man Army
The Longest Journey, de l’album From Afar
Token of Time, de l’album Ensiferum
Finnish Medley, de l’album Dragonheads


Heidevolk (groupe néerlandais de folk metal)

Vulgaris Magistralis, de l’album De Strijdlust is Geboren
‎Het Bier Zal Weer Vloeien, de l’album De Strijdlust is Geboren
Deemstering, de l’album Uit Oude Grond
Een Nieuw Begin, de l’album Batavia
Wapenbroeders, de l’album Batavia


Korpiklaani (groupe finlandais de folk métal)

Gods On Fire, de l’album Korven Kunigas
Dolorous, de l’album Manala
Surma, de l’album Ukon Wacka
Vaarinpolkka, de l’album Ukon Wacka
Koivu Ja Tähti, de l’album Ukon Wacka
Tequila, de l’album Ukon Wacka
Päät Pois Tai Hirteen, de l’album Ukon Wacka
Jouni Jouni, de l’album Noita
Ieva's Polka, de l’album Manala
Soil of the Corpse, de l’album Manala
Honor, de l’album Manala
Ruumiinmultaa, de l’album Manala
Rauta, de l’album Manala
Suden Joiku, de l’album Korven Kunigas
Metsämies, de l’album Korven Kunigas
Vesaisen Sota, de l’album Karkelo
Koennin Kuokkamies, de l’album Karkelo
Juodaan Viinaa, de l’album Karkelo
‎Vodka, de l’album Karkelo


Týr (groupe féroïen de folk métal)

The Lay Of Our Love, de l’album Valkyria
The Lay of Thrym, de l’album The Lay of Thrym
Turið Torkilsdóttir, de l’album By the Light of the Northern Star
Dreams, de l’album Eric The Red
‎Northern Gate, de l’album By the Light of the Northern Star
The Wild Rover, de l’album Eric The Red
Evening Star, de l’album The Lay of Thrym
Valkyrja, de l’album Land
By the Light of the Northern Star, de l’album By the Light of the Northern Star
Into the Storm, de l’album By the Light of the Northern Star


Ultra Vomit (groupe français de heavy metal parodique)
(La mention de ce groupe ici est d’avantage anecdotique, mais j’aime bien quand même)

ÉDIT : j’ai oublié la seule chanson d’Avenged Sevenfold (groupe américain de heavy métal) que j’écoute. C’est sûrement la seule chanson calme du groupe, mais j’aime beaucoup justement :
Dear God


Pour les pochettes d’album, j’ai une petite collection ici : http://lehollandaisvolant.net/tout/folio/?fol=metal+covers

Ça fait 3 semaines que je me bats avec un problème de merde sous Firefox. En JS, je fais du Drag-n-drop, pour l’upload d’images.

Mon script fait en sorte que quand je glisse un fichier sur le navigateur, un bloc prend toute la largeur de la page pour réceptionner les fichiers. Jusque là, ça va : ça marche, tout va bien. En fait, tout le drag-n-drop fonctionne parfaitement.

Sauf parfois.
Parfois j’ai un comportement étrange. Parfois « ça veut pas ».

En temps normal, quand je glisse les fichiers sur la page web, j’ai l’icône de la petite main avec la flèche :

Mais parfois, en plein milieu de la page, le pointeur change : c’est juste la petite main. Sans la flèche : signifiant que que le "drop" est impossible :

Il semble ainsi y avoir un sorte de « zone morte » en plein milieu de la page où mon drag-n-drop ne marche pas.
La zone morte est invisible. Je ne peux la mettre en évidence qu’en déplaçant le curseur lors du glissement des fichiers et trouver environ les limites de la « zone morte ».

J’ai utilisé des tas de garde-fou en JS pour savoir ce qui se passe : rien de concluant.
JS voit bien que le glissement (drag) s’arrête quelque part sur la page (et agit en conséquences), mais il ne sait pas me dire ce qui se passe réellement : ni afficher l’ID d’un éventuel bloc « mort » sur l’écran, ni mettre ce bloc en évidence…

En fait j’ai fini par trouver d’où ça vient.

Vous voulez savoir ? Vraiment ?

C’est ce connard de Flash de merde à con de mes deux.

La « zone morte » correspond exactement à l’emplacement d’un lecteur Flash… sur un autre putain d’onglet !
Oui, Flash obstrue une zone du navigateur sur TOUS les onglets, même s’il est utilisé dans un seul onglet.

Quand je ferme l’onglet avec flash (Youtube en l’occurrence), je n’ai pas de problèmes.
Je ne sais pas si le coupable est Flash ou Firefox, mais là, Flash c’est terminé. Raz le bol de ces conneries récurrentes avec ce plugin de merde.


Bref.
Il y a une chose à retenir en programmation. Des bugs, vous aurez forcément : aucun script ne fonctionne du premier coup. Parfois les bugs seront plus coriaces que d’autres, et souvent, très souvent le problème vient de là où on ne l’attends absolument pas.
Ceci en est un exemple : l’événement de glissement de fichiers sur une page web, dans Firefox, ne fonctionne pas si Flash fonctionne, même sur un autre onglet.

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

Sur mobile en revanche, l’image sera toute pixelisée et moche :
(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 :

• High DPI Images for Variable Pixel Densities - HTML5 Rocks
• Optimising for High Pixel Density Displays
• CSS Techniques for Retina Displays

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 :


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.