Ceci est une ancienne révision du document !
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, 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 astuces. Malheureusement, j'ai pour l'instant reçu qu'une seule réponse. Aussi, plutôt qe 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 à droite à la fin de l'article.
Tout en écrivant l'article de ce mois, je travaillait sur un projet pour mon diplome, et , en le faisant, j'ai perdu 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 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 résumer certaines de celles qui seront utile à tous ceux qui auraient loupé certaines de ces informations. Pour tout personne curieuse, j'ai trouvé 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 y a pas si longtemps, le support de Firefox commençait à décoller dans tous les navigateurs Web majeurs. Et Alors que Firefox est une option terrible pour disposer les choses dans une seule direction (en lignes ou en colonnes, mais pas les deux), il n'a pas été vraiment conçu pour disposer la structure d'une page Web entière. Tandis 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 à base flottante, mais ce n'est pas encore parfait.
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.
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.
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.
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.
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
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.