PROJET AUTOBLOG


le hollandais volant

Site original : le hollandais volant

⇐ retour index

[CSS] Quelques possibilités apportées par le modèle « flexbox »

samedi 22 août 2015 à 22:11
Ça fait des années que je fais du CSS. Je suis un grand adepte du full-CSS et de l’usage des dernières technologies CSS. L’une d’elle c’est le modèle d’affichage de boîtes flexibles : FlexBox.
Ce concept en CSS existe depuis plusieurs années mais les spécifications n’ont pas cessées de changer (il y a au moins 3 spécifications différentes… par navigateur) mais il peut actuellement être considéré comme stable : les navigateurs à jour actuellement implémentent tous la même spécification.

Si je vous en parle en particulier c’est que plus je l’utilise, plus elle me facilite la vie.

Vous désirez centrer un élément ? L’étirer ? Changer l’ordre de plusieurs éléments ? Orienter des menus ? Faire des colonnes égales ? Le tout sans vous faire casser la tête ?
FlexBox est fait pour ça, et c’est relativement simple.

Flexbox fonctionne un peu sur le même principe que le duo ul/li ou le trio table/table-row/table-cell, à savoir une relation bloc-parent/blocs-enfants : il y a ainsi un parent en « display: flex » et c’est avec les blocs enfants qu’on bricole. Si vous avez compris tout ça, vous avez compris 80% de flexbox.

Ici je vous propose quelques exemples de ce que permet FlexBox.
En revanche, cet article n’est pas un tuto qui vous apprend tout ce qu’il faut savoir. Il s’agit plus d’un mémo illustré de code et de démos pour accomplir de choses précises qu’on avait l’habitude de faire autrement. Pour des tutos ou cours complets, j’ai mis quelques liens en bas de l’article.


Centrer

Centrer un élément horizontalement en simple CSS est très simple. Centrer verticalement relève d’avantage du casse-tête : il faut jongler avec line-height, position, display, margin et parfois du JavaScript
Avec flex, c’est plus simple :

En prenant le premier code HTML ci-dessus, pour centrer un bloc dans l’autre sur les deux axes :

#parent {
	display: flex;
	justify-content: center;
	align-items: center;
}

#enfant {
}

centrer verticalement et horizontalement en CSS
(Démonstration)


Ici :

Bien-sûr, les éléments sont centrés même si on ajoute des marges, des bordures ou des tailles en %.
Par contre, si vous voulez centrer une image ou une vidéo, ces dernières ayant une dimension et une proportion propre (contrairement à du texte), je conseille cette méthode (flexbox ne sera pas adapté, car une image n’est pas flexible si elle doit conserver ses proportions).


Colonnes de même hauteur

Un autre problème ancestral en CSS, c’est celui des colonnes de même hauteur. Avant il fallait des images ou des tableaux (et si utiliser les tableaux était un crime, « display: table-cell; » reste un délit).

Ici, le code est simple à comprendre également : on va utiliser un #parent et deux .enfants.
Sur les enfants, le premier est de taille fixe et le second prend tout le reste de l’espace disponible horizontalement.
Enfin, on dit que les enfants doivent occuper toute la place sur l’axe vertical.

#parent {
	display: flex;
	align-items: stretch;
}

.enfant:first-child {
	flex: 0 0 200px;
}

.enfant:last-child {
	flex: 1 1 auto;
}

faire des colonnes avec flex
(Démonstration)



Vous pouvez ainsi faire plus de 2 colonnes aussi : une centrale large avec deux petites sur chaque côté, comme dans cet exemple.

Ayez en tête par contre que si vous utilisez des blocs flexibles, les autres types de positionnement (display, float…) ne marchent plus : c’est l’affichage en mode « flex » qui prend le dessus. Aussi, si vous déclarez une largeur de base avec flex: 1 1 200px par exemple, alors la propriété width ne donnera pas non plus le comportement attendu.

L’avantage de cette méthode sur une colonne flottante, c’est que le bloc flottant pouvait passer au dessus du reste de la page.

Étirer

Flex, vous commencez à le voir, permet non seulement de jouer sur le placement et l’étirement vertical, mais aussi l’étirement horizontal. À l’image de ce que float permet, vous pouvez ici placer un élément sur un côté ou l’autre, mais tout en le conservant dans le flux de la page.

C’est ce qui est utilisé dans mon astuce pour placer les icônes à côté des formulaires : l’icône est de largeur fixe et le champ du formulaire est flexible et peut s’agrandir librement, tout en restant bien à côté de l’icône. Flexbox apporte, en plus des flottants, tous les avantages du centrage et de l’étirement.

C’est ici la propriété flex: 1; appliqué sur le bloc à étirer qui se charge de faire tout ça.
Cette idée peut être utilisée sur les champs de formulaire, donc, mais aussi sur les titres-icônes, les menus et tout ce que vous voulez en fait.


Mélanger

Une des avancées importantes apportée par flexbox, c’est que l’on peut déplacer des blocs au sein de la page sans avoir à toucher au code HTML.
Si le code HTML contient trois éléments enfants dans un ordre précis (A, B, C), on peut les ordonner autrement : A, C, B, ou B, A, C par exemple :

.enfant {
	flex: 1;
}
#enfant-A {
	order: 3;
}
#enfant-B {
	order: 1;
}
#enfant-C {
	order: 2;
}

Ici, les éléments sont tous flexibles et on a modifié leur ordre d’affichage : si dans le code HTML l’ordre est A, B, C, à l’affichage flexbox changera ça en B, C, A :

changer l’ordre des éléments html avec flexbox
(Démonstration)


Bien-sûr, vous pouvez combiner l’ordre des éléments avec toutes les autres fonctionnalités de flexbox.


Orienter

Une autre innovation est la possibilité d’orienter les éléments avec une simple propriété : si on a une collection d’éléments enfant, on peut les placer sur une ligne ou sur une colonne :

Pour mettre en ligne (par défaut) :
#parent {
	flex-direction: row;
}

Et en colonne :
#parent {
	flex-direction: column;
}

orientation flexbox
(Démonstration)


Là aussi, il peut être intéressant de mélanger l’orientation avec les autres propriétés de flexbox.

Notez qu’au dessus j’ai parlé d’axe « principal » et « secondaire ». Le flex-direction permet d’inverser les deux axes en fait. Par défaut, l’axe principal est horizontal (les éléments sont placés sur une ligne) et l’axe secondaire est vertical (les éléments occupent une section de la ligne, mais peuvent être en haut, au centre ou en bas de leur sections respectives).


Aérer

Encore un effet attendu de flexbox : pouvoir disperser des éléments sur une ligne, en distribuant l’espace vide entre chaque élément. Ceci est particulièrement pratique pour les menus : avec ce code, inutile de diviser la largeur de l’écran par 5 et donner à chaque élément 1/5 de la largeur (et vous embêter avec les marges et les bordures) : flexbox peut distribuer les éléments sur toute la ligne de façon fluide.

#parent {
	justify-content: space-between;
}

Les éléments aux extrémités restent à chaque bout et les autres éléments sont espacés sur toute la ligne :

flexbox spacing
(Démonstration)



Ressources


Pour des choses plus évoluées encore, sachez que vous pouvez faire des blocs flexibles et imbriqués : un élément enfant flexible peut lui-même être en display:flex et avoir des enfants flexibles eux aussi, comme sur cette démo, avec leur propre orientation et effets.

[CSS] Arrêtez d’utiliser float n’importe comment

mercredi 12 août 2015 à 19:43
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 »)

Vous êtes ridicules avec vos marques !

mardi 11 août 2015 à 22:39
are-you-fucking-kidding-me 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.

Mon top de musique métal

samedi 8 août 2015 à 18:26
black sails at midnight cover 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 :

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


manala cover 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

Flash, tu fais vraiment chier

vendredi 7 août 2015 à 17:46
Ç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 :
arrow hand cursor
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 :
hand cursor
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.