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. 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, en poussant même jusqu'à leur donner des étiquettes. Et ensuite, vous pouvez assigner les éléments aux lignes et aux colonnes comme vous le souhaitez (sans regarder où il apparaisse dans le DOM( Document Object Model). Ce le rend plus facile la création la disposition du typique Entête/Bandeau+corps de texte/Pied de page que vous voyez dans 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 un 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, ça peut avoir un sens 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. Elles sont essentiellement des variables CSS, dant 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 bénéfice premier de cette approche est le fait que vous n'avez besoin de la requête de média que pour redéfinir les variables et que la vraies lignes de définition de la disposition (dans le sélecteur du corps) ne change jamais. C'est même plus facile d'emballer la section de la disposition dans un @supports (display: grid) et de disposer d'une disposition de secours avec Flexbox ou les éléments flottants normaux. Du fait de la nature en cascade de CSS, vous pouvez aussi écrase ces variables dans un sélecteur plus bas dans la ligne (disons que vous voulez créer un zone de grille dans un sélecteur .grid). Vous pouvez simplement redéfinir les variables, les utiliser comme plus haut, et les changements seront appliqués à ce seul élément et à ses enfants. Maintenant, 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) utiliser CSS Custom Properties. Pour ce qui est statique (comme la définition d'une couleur unique de marque que vous réutilisez fréquemment et qui ne change jamais), alors les variables de préprocesseur sont bien. Naturellement, comme le support est nouveau pour les propriétés personnalisées, vous pourriez vouloir étudier la définition d'une solution de repli en utilisant aussi 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'un page. C'est idéal pour voir, quelles méthodes ou sélecteurs vous pourriez vouloir déplacer dans un fichier différent, ce qui est seulement inclus dans les pages demandées. Ou peut-être, vous pouvez 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.
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.