Comme les dotJS l’an dernier, c’est au tour des dotCSS de déménager aux docks d’Aubervilliers pour cette édition 2017 ! On est bien, on a la place d’étendre ses jambes convenablement sans qu’elles ne soient posées sur les épaules de la personne devant soi et on arrête de regretter les dorures du cosy théâtre des variétés. On s’installe donc confortablement dans notre fatboy pour assister à cette cérémonie du langage CSS dont voici les meilleurs moments. Amen !
C’est Tim Carry qui ouvre le bal, déjà connu pour ces hobbies CSS-oriented. Il a notamment réalisé CSS flags, la collection complète (ou presque) des drapeaux sur une structure HTML plutôt minimaliste : <div></div>.
Cette année, dans le même esprit de challenge, il nous présente un moteur de recherche en full CSS. Un champ de recherche dont la valeur sert à conditionner l’affichage de tous les résultats positionnés après lui en display : none; sur le modèle suivant :
input[value=eleven i] ~ #result:before {
content: “Eleven Labs”;
}
Il faut donc répéter cette règle pour TOUS les patterns possibles conduisants au bon résultat : e, el, ele, elev, eleve ... Le fichier CSS généré est donc scandaleusement volumineux et il va de soi que c’est juste une démonstration qui ne pourrait en aucun cas être utilisée en production.
Benjamin De Cock nous a fait une présentation du futur chouchou de la mise en page CSS, j’ai nommé « grid layout ». Il permet en plus de remplacer tous les systèmes de grilles bootstrap, d’alléger la structure HTML, et de mieux maîtriser le positionnement avec une plus fine granularité. Le positionnement est bi-directionnel, là où celui de flexbox est uni-directionnel.
Il a aussi évoqué la toute nouvelle propriété display : contents; inaugurée par Firefox, qui permet de remplacer virtuellement un élément par ses enfants et permet encore plus de souplesse dans la mise en page.
Retour d’expérience de Jackie Balzer sur le projet MyPortfolio de chez Adobe qui permet aux artistes de générer en ligne des portfolios personnalisés via une interface WYSIWYG : les configurations définies sur l’éditeur sont stockées à travers un fichier JSON qui servira ensuite à générer le CSS final du portfolio. Voici la bête :https://www.myportfolio.com/.
Adam Detrick, de la société Meetup, est venu nous parler de méthodologie dans la rédaction de règles CSS, prônant les vertus du « moins on en écrit, mieux on se porte ». Si les feuilles de styles étaient moins chargées, elles parleraient à plus de monde. Pour cela il a plébiscité l’utilisation de classes utilitaires, des classes qui font penser à des classes atomiques en plus touffues, mais qui permettent une réutilisabilité de certains styles.
Florian Rivoal, membre du CSS Working Group, a évoqué les modifications à venir dans l’univers des media-queries (level 4). Des améliorations syntaxiques d’une part et de nouveaux ciblages liés aux fonctionnalités supportées (hover, pointer, update, overflow-block, scripting…). Il nous a aussi fait un éventail des best practices à mettre en œuvre pour tirer pleinement profit des media-queries.
Laurence Penney nous a aussi ouvert une fenêtre vers le futur, mais sur le futur des fonts cette fois, avec les fonts variables. Ces fonts pourront varier suivant différents axes de façon progressive avec interpolation. Laurence Penney a créé un bac à sable pour jouer avec ces nouvelles fonts. Comme d’habitude avec les innovations, le support navigateur est à ce jour assez pauvre… Patience est mère de vertu !
L’auteur de l’excellent livre Scalable and Modular Architecture for CSS a imaginé ce que pourraient apporter des container-queries : écrire du CSS basé sur les propriétés d’un conteneur plutôt que d’un media permettrait de mettre complètement de côté les problématiques liées aux interactions entre les différents éléments d’une page et d’avoir une responsivité du composant quelque soit son contexte. CSS ne permet malheureusement pas cela. Des solutions peuvent être mises en place en JavaScript. Certains cas peuvent également se solutionner par l’utilisation combinée de flex et de grid layouts.
Voilà, c’est tout pour cette année, vivement l’édition 2018 au Stade de France !(?)
Auteur(s)
Vous souhaitez en savoir plus sur le sujet ?
Organisons un échange !
Notre équipe d'experts répond à toutes vos questions.
Nous contacterDécouvrez nos autres contenus dans le même thème
Pour cette 3ème édition des DotCSS consacrée à la partie stylée de la Force, le menu était alléchant : 8 conférenciers de qualité dont quelques pointures de la profession, avec comme cerise sur le gâteau un talk de Dieu le père, aka Håkon Wium Lie, le créateur de CSS en personne. Comme d’habitude aux Dot Conférences, l’accueil était princier et l’ambiance chaleureuse dans un théâtre des variétés plein à craquer.