Différences

Ci-dessous, les différences entre deux révisions de la page.

--- issue123:c_c [2017/08/10 11:59] – auntiee
+++ issue123:c_c [2017/08/10 17:12] (Version actuelle) – andre_domenech
@@ Ligne 3: / Ligne 3: @@
 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.
+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é certaines de ces informations. Pour tout personne curieuse, j'ai tiré la plupart de mes informations sur ces développements à partir de CSS-Tricks (via RSS ou Twitter).
+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
@@ Ligne 17: / Ligne 17: @@
 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.
+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.
@@ Ligne 25: / Ligne 25: @@
 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 change 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.
+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
@@ Ligne 42: / Ligne 42: @@
 Les principaux ajouts qu'ils ont traités :
-La possibilité de voir la couverture de CSS et JS
+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, 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.
+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
@@ Ligne 57: / Ligne 57: @@
 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.
+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.