WTF !

Sur le titre de flow.org, il y a 500 text-shadows superposées pour donner cet effet là :

La gestion de la césure sur le web est loin d'être satisfaisante aujourd'hui: même s'il y a une propriété CSS «hyphen», elle est quasiment inutilisable en mode «auto» parce qu'elle met coupe quasiment le dernier mot de chaque ligne et la rend la propriété text-align: justify complètement inutile. On en est donc réduit à marquer les césures à la main avec ­ pour les mots qui vaillent vraiment la peine, mais c'est vraiment moche et pénible !

Il y a de nouvelles propriétés qui permettrons un jour de gérer ça : http://generatedcontent.org/post/44751461516/finer-grained-control-of-hyphenation-with-css4 malheureusement, elles ne sont quasiment pas supportées à l'heure actuelle (seul IE les supporte alors que cet article a 4 ans et qu'il s'agit effectivement d'un standard, et pas juste d'un délire tout seul d'IE).

C'est génial ! C'est un mini-jeu / tuto, pour découvrir le «grid layout» CSS, par l'auteur de Flexbox Froggy, dont j'avais déjà parlé ici.

Au passage 3 remarques sur ce nouvel outil de formatage des pages web qu'est «grid layout» :

• C'est très puissant et très pratique
• L'API est un peu confuse, il y a plein de choix douteux (on s'en rend très vite compte en parcourant les premiers niveaux du jeu : index commençant à 1 et pas 0, start sur la case, end sur la case précédente, sauf si c'est des nombres négatifs, auquel cas c'est l'inverse …). On reconnaît bien là les normalisateurs du CSS ! (Je médis sans doute, ce mode de disposition est très fortement inspiré de celui de WPF, le framework de développement d'appli windows, et il est probable qu'ils en ait repris les règles).
• C'est assez bluffant de voir que les navigateurs se sont synchronisés pour sortir ce truc en même temps (source, il n'y a que IE/Edge qui est à la traîne, mais c'est en cours de développement). Entre ça et webassembly il y a quelques mois, les éditeurs de navigateur ont vraiment l'air de coopérer pour sortir les fonctionnalités importantes de manière synchronisées, et c'est vraiment cool pour le web.

Stylé !

Le dépot github : https://github.com/jgthms/css-reference

D'autres références dans le même style :

https://css-tricks.com/almanac/
http://tympanus.net/codrops/css_reference/

C'est vraiment trop cool ce truc :D

Je l'ai utilisé pour faire un présentation la semaine dernière, en ajoutant la feuille de style CSS suivante

.hljs-keyword {
    color: #f5b902;
}

.hljs-title {
    color: #f73f3f;
}

.slide-content {
    margin-top: 0px;
}

.slide-content strong {
    font-weight: bold;
}

section.slide-content {
    overflow: auto !important;
}

.slide-content h2 {
    font-size: 250% !important;
    margin: 130px 0 0 !important;
}

.slide-content h1 {
    margin: 130px 0 0 !important;
}

pre {
    padding: 10px;
}

code{
    background-color: #C5CBCE;
}

pre > code {
    background-color: inherit;
}

blockquote{
    border-left: 3px solid #C3E4D5;
    padding-left: 15px;
}