Last month, C&C focused on programming, and how to approach learning a programming language. During that article, I asked readers to share their experiences or tips. Unfortunately, I have since then received only a single response. So instead of publishing a few stories this month, I will wait a bit longer. If you have a fun story about learning to program (or how you first got interested in computers or linux), please do email it to me! My email address always appears right at the end of the article. Since writing last month’s article, I have been working on a project for my degree, and in doing so, have spent a fair bit of time reading up on new CSS technologies (CSS Custom Properties and CSS Grids), as well as new features in the current version of Chrome which I think will be extremely helpful to developers. As such, I thought summarizing some of these will be useful for anyone who may have missed some of this news. For anyone curious, I get most of my news on these developments from CSS-Tricks (either via RSS or through twitter).
Le mois dernier, C&C s'est concentré sur la programmation, et comment aborder l'apprentissage d'un langage de programmation. Au cours de l'article, j'ai demandé aux lecteurs de partager leurs expériences et leurs conseils. Malheureusement, je n'ai reçu pour l'instant qu'une seule réponse. Aussi, plutôt que de publier quelques retours ce mois-ci, je vais attendre un peu plus. Si vous avez une histoire amusante sur l'apprentissage de la programmation (ou comment vous vous êtes intéressé une première fois aux ordinateurs ou à Linux), merci de m'envoyer un mail ! Mon adresse mail apparaît toujours en toute fin d'article.
Depuis le dernier article, je travaille sur un projet pour mon diplôme, et, ce faisant, j'ai passé un bon bout de temps à me documenter sur les nouvelles technologies de CSS (CCS Custom Properties - Propriétés personnalisées de CSS - et CCS Grids - Grilles CSS), ainsi que sur les nouvelles fonctionnalités de la version actuelle de Chrome qui, je le pense, seront extrêmement pratiques pour les développeurs. Ainsi, je pensais qu'un résumé de certaines de celles-ci serait utile à tous ceux qui auraient loupé une partie de ces informations. Pour toute personne curieuse, j'ai tiré la plupart de mes informations sur ces développements à partir de CSS-Tricks (via RSS ou Twitter).
CSS Not that long ago, Flexbox support started taking off in all major browsers. And while Flexbox is a terrific option for laying things out in one direction (rows or columns, not both at once), it wasn’t really designed for laying out the entire web page’s structure. While it can be (and is) used for this, it results in different problems and hacks. It’s a definite improvement over float-based grids, but still not perfect. This is where CSS Grids come into play. They will allow you to create a CSS-based grid for your webpage. You define the rows and columns, even going so far as to giving them labels. And then you can assign elements to the rows and columns as you need (regardless of where they appear in the DOM). This makes it much easier to create the typical header/sidebar+body text/footer layout we see on a lot of websites today. The code would look something like that shown above. A couple of quick notes: the auto declaration (so the second row expands to fill the page) has given me a few issues in Firefox and Safari, where 100% seems to work. And the fr is a new fractional unit - meaning the column declaration is saying the sidebar is 1/4th the size of the body text column.
CSS
Il n'y a pas si longtemps, le support de Flexbox commençait à décoller dans tous les navigateurs Web majeurs. Et, alors que Flexbox est un choix sensationnel pour disposer les choses dans une seule direction (en lignes ou en colonnes, mais pas les deux), il n'a vraiment pas été conçu pour mettre en place la structure de toute une page Web. Alors qu'il peut être (ou est) utilisé pour cela, il en résulte différents problèmes et piratages. C'est une réelle amélioration par rapport aux grilles basées sur les zones flottantes, mais ce n'est pas encore parfait. C'est là que les grilles CSS entrent en scène. Elles vous permettront de créer une grille basée sur CSS pour votre page Web. Vous définissez les lignes et les colonnes et pouvez même leur donner des étiquettes. Ensuite, vous pouvez assigner les éléments aux lignes et aux colonnes comme vous le souhaitez (sans se soucier d'où ils apparaissent dans le DOM (Document Object Model). Ceci rend plus facile la création de la mise en page typique Entête/Bandeau+corps de texte/Pied de page que nous voyons sur beaucoup de sites Web aujourd'hui. Le code pourrait ressembler à quelque chose comme celui montré ci-dessus.
Deux courtes notes : la déclaration auto (de sorte que la seconde ligne s'agrandit pour remplir la page) m'a donné quelques soucis dans Firefox et Safari, où 100 % semble fonctionner. Et fr est une nouvelle unité fractionnaire, signifiant que la déclaration column dit que le bandeau latéral a le quart de la taille de la colonne de texte du corps.
Naturally, as your site gets more complicated, it may make sense to start using media queries, or a preprocessor to cut down on some of the repetition. However, you can also use CSS Custom Properties. They are essentially CSS variables, which can be overwritten using CSS declarations (including when done via JS). If, for example, you wanted to redefine the grid-template-rows and grid-template-columns for small devices, and make it mobile-first then see the code shown top right. The key benefit of this approach is the fact that you need only the media query to redefine the variables, and that the actual layout definition lines (in the body selector) never change. This makes it even easier to wrap the layout section in an @supports(display: grid) and have a fallback layout with Flexbox or normal floats. Due to the cascading nature of CSS, you can also overwrite these variables in a selector down the line (say you want to create a grid area in the .grid selector). You can simply redefine the variable, use them as above, and the changes will apply to only that element and its children. Now, does this replace preprocessor variables? In some things, I’d say yes. Anything dynamic or fluid that changes frequently (such as in media queries), then you can (and probably should) use CSS Custom Properties. For anything static (such as defining a single brand color which you reuse frequently and will not change), then preprocessor variables are fine. Naturally, while support is new for the custom properties, you may want to consider defining fallbacks using your old preprocessor variables as well.
Naturellement, vos sites devenant plus compliqués, il peut être logique de commencer à utiliser les requêtes de média ou un préprocesseur pour réduire une partie des répétitions. Cependant, vous pouvez aussi utiliser les CSS Custom Properties. Ce sont essentiellement des variables CSS, dont les valeurs peuvent être remplacées en utilisant les déclarations de CSS (y compris quand c'est fait via JS). Si, par exemple, vous voulez redéfinir grid-template-rows and grid-template-columns pour des petits dispositifs, et donner la priorité aux mobiles, alors regardez le code en haut à droite.
Le premier bénéfice de cette approche est le fait que vous n'avez besoin que de la requête de média pour redéfinir les variables et que les vraies lignes de définition de la mise en page (dans le sélecteur du corps) ne changent jamais. Cela rend même plus facile l'emballage de la section de mise en page dans un @supports (display: grid) et d'avoir une disposition de secours avec Flexbox ou les éléments flottants normaux. Du fait de la nature en cascade de CSS, vous pouvez aussi écraser ces variables dans un sélecteur plus bas (disons que vous voulez créer une zone de grille dans un sélecteur .grid). Vous pouvez simplement redéfinir les variables, les utiliser comme ci-dessus, et les changements seront appliqués à ce seul élément et à ses enfants. Mais, est-ce que ceci remplace des variables de préprocesseur ? À certains égards, je dirais oui. Pour toute chose dynamique ou fluide qui change fréquemment (telles que les requêtes de média), vous pouvez (ou devriez sans doute) utiliser CSS Custom Properties. Pour ce qui est statique (comme la définition d'une couleur unique de marque commerciale que vous réutilisez fréquemment et qui ne change jamais), les variables de préprocesseur sont bien. Naturellement, puisque le support pour les propriétés personnalisées est nouveau, vous pourriez vouloir étudier également la définition d'une solution de repli en utilisant vous anciennes variables de préprocesseur.
Chrome DevTools Chrome version 59 brought with it some new additions to the Chrome DevTools. They posted about the changes on their blog, which you can find here: https://developers.google.com/web/updates/2017/04/devtools-release-notes The main additions they cover are: The ability to view CSS and JS coverage This addition allows you to see a bar indicating how much of the loaded CSS and JS was executed for a page load. This is ideal for seeing which methods or selectors you may want to move into a different file, which is included only on required pages. Or perhaps you can remove just unused styles and code. The inspector will even highlight the lines when viewing the file in the source panel.
Les Chrome DevTools
La version 59 de Chrome apporte quelques nouveaux ajouts aux Chrome DevTools. Un message sur ces changements a été posté sur leur blog, que vous pouvez trouver ici : https://developers.google.com/web/updates/2017/04/devtools-release-notes
Les principaux ajouts qu'ils ont traités :
La possibilité de voir la couverture de CSS et JS. Cet ajout vous permet de voir une barre indiquant la part des CSS et JS chargés qui a été exécutée au chargement d'une page. C'est idéal pour voir quelles méthodes ou sélecteurs vous pourriez vouloir déplacer dans un fichier différent, qui est inclus uniquement dans les pages nécessaires. Ou vous pouvez, peut-être, simplement supprimer les styles et code inutilisés. L'inspecteur ira même jusqu'à surligner les lignes lors de la visualisation du fichier dans le panneau du source.
Full Page Screenshots For a long time when I needed to take screenshots of longer pages, I either used a 3rd party app, or else took a series of screenshots and stitched them together in the GIMP. Now, you can open the inspector, and enable the device toolbar (which emulates mobile devices). The menu in the top right then offers you a few screenshot options. Naturally, if you want to screenshot the desktop view, you’ll want to set it to a responsive size, and expand the viewport to the desired layout. But it is possible (even if you use only the device toolbar for testing smaller viewports). It then takes the photo, and begins a download of it.
Les copies d'écran en pleine page Pendant longtemps, quand j'avais besoin de prendre des copies d'écran de longues pages, soit je devais utiliser une appli tierce, soit je prenais une série de copies d'écran et les recollais dans GIMP. Maintenant, vous pouvez ouvrir l'inspecteur et activer la barre d'outils du dispositif (qui émule les dispositifs mobiles). Le menu en haut à droite vous offre alors quelques options de copie d'écran. Naturellement, si vous voulez copier tout le bureau, vous devrez le paramétrer à la bonne taille et étendre la portée de prise de vue à la disposition désirée. Mais c'est possible (même si vous n'utilisez que la barre d'outils du dispositif pour tester des tailles dont la portée de vue est plus réduite). Ensuite, il prend la photo et commence à la télécharger.
Blocking requests The last change I’m excited about is the ability to block an individual file, in order to see how your page loads without it. Occasionally, I’ll take over someone else’s project, and they won’t have minified anything (or they minify everything). Either way, I often have to figure out which files are and aren’t needed. It used to require me to either recompile the minified CSS, rename files, or comment out sections. Now I can just disable minification, and block individual files to see what happens. This also has the added benefit of impacting only your viewing experience - and not that of other developers (as I would only ever do this on a test environment). I can also see it being helpful if users report issues with a site, and you expect it to be due to a file not loading or being blocked by the user’s settings. Overall, this is a step into the future for CSS, and finally a chance for me to cut back on some of my development tools. If you have any cool use cases for CSS Grids or CSS Custom Properties you’d like to share with me (and our readers), then send me an email at lswest34+fcm@gmail.com. The same goes for any readers who may have questions, problems, or suggestions for future articles.
Demandes de blocage Le dernier changement qui m'a beaucoup plu est la possibilité de bloquer un fichier individuel, de façon à voir comment votre page se charge sans lui. Occasionnellement, je prends le contrôle du projet de quelqu'un d'autre et rien n'aura été amoindri (ou tout sera réduit). Dans les deux cas, je dois souvent me demander quels sont les fichiers nécessaires ou pas. Dans le temps je devais, soit recompiler le CSS amoindri, soit renommer les fichiers, soit commenter des sections. Maintenant, je peux simplement désactiver l'amoindrissement et bloquer les fichiers individuellement pour voir ce qui se passe. Ceci a l'avantage supplémentaire de ne jouer que sur votre ressenti visuel, et pas sur celui des autres développeurs (car je ne fais ceci que sur des environnements de développement). À mon avis, cela peut aussi être utile si les utilisateurs font remonter des problèmes sur un site et que vous supposez que c'est dû à un fichier non chargé ou bloqué par les paramètres de l'utilisateur.
Globalement, c'est un pas vers le futur de CSS et, enfin, c'est l'occasion pour moi de me séparer de certains de mes outils de développement. Si vous avez un cas sympa d'utilisation de CSS grids ou de CSS Custom Properties que vous voulez partager avec moi (et les lecteurs), envoyez-moi un mail à lswest34+fcm@gmail.com. Même chose pour les lecteurs ayant des questions, des problèmes ou des suggestions pour de futurs articles.
Further Reading https://developers.google.com/web/updates/2017/04/devtools-release-notes - Chrome Developer Blog https://css-tricks.com/snippets/css/complete-guide-grid/ - CSS-Tricks page on CSS Grids https://developer.mozilla.org/en-US/docs/Web/CSS/–* - Mozilla developer page on CSS Custom Properties https://philipwalton.github.io/solved-by-flexbox/ - Examples of flexbox-based design solutions for CSS.
Pour aller plus loin
https://developers.google.com/web/updates/2017/04/devtools-release-notes - Chrome Developer Blog (le blog des développeurs de Chrome)
https://css-tricks.com/snippets/css/complete-guide-grid/ - CSS-Tricks page on CSS Grids (la page CSS-Tricks sur CSS Grids)
https://developer.mozilla.org/en-US/docs/Web/CSS/–* - Mozilla developer page on CSS Custom Properties (la page des développeurs de Mozilla concernant les CSS Custom Properties)
https://philipwalton.github.io/solved-by-flexbox/ - Examples of flexbox-based design solutions for CSS (des exemples de solutions de conception basées sur flexbox pour CSS)