Quoi de neuf en CSS? éclatant

La semaine dernière, Rachel Andrew a assisté à la réunion du groupe de travail CSS au TPAC du W3C et a résumé certaines des discussions de cet article, y compris les éléments pour lesquels vous pouvez aider à prendre une décision.

La semaine dernière, j'ai assisté au TPAC du W3C ainsi qu'à la réunion du groupe de travail CSS. Diverses modifications ont été apportées aux spécifications et des discussions ont suscité un vif intérêt pour les concepteurs et les développeurs Web. Dans cet article, je vais expliquer un peu ce qui se passe à TPAC et montrer quelques exemples et démonstrations de ce dont nous avons discuté à TPAC pour CSS notamment.

Qu'est-ce que TPAC?

TPAC est la plénière technique. / Semaine des réunions du comité consultatif du W3C. Une occasion pour tous les différents groupes de travail faisant partie du W3C de se réunir sous un même toit. L’événement a lieu chaque année dans une région du monde différente, cette année à Lyon, en France. Au TPAC, des groupes de travail tels que le groupe de travail CSS ont leurs propres réunions, comme nous le faisons à d'autres moments de l'année. Cependant, comme nous sommes tous dans le même bâtiment, cela signifie que des personnes d'autres groupes peuvent plus facilement venir en tant qu'observateurs et que les intérêts des groupes de travail peuvent être discutés.

Les participants du TPAC sont généralement membres d'un ou plusieurs membres du groupe de travail. Groupes travaillant sur les technologies du W3C. Ils seront soit des représentants d'une organisation membre, soit des experts invités. Comme pour toutes les autres réunions des groupes de travail du W3C, les procès-verbaux de toutes les discussions tenues à TPAC seront librement accessibles, généralement sous la forme de journaux IRC consignés au cours des réunions.

Le groupe de travail CSS

Le groupe de travail CSS se réunit en face. – en présence au TPAC et à au moins deux autres occasions au cours de l'année; ceci s'ajoute à nos appels téléphoniques hebdomadaires. Lors de toutes nos réunions, les différentes questions soulevées dans les spécifications sont discutées et des décisions sont prises. Certaines questions sont conservées pour des discussions en face à face en raison des avantages de pouvoir les avoir avec tout le groupe, ou simplement de pouvoir contourner un tableau blanc ou de voir une démonstration à l'écran.

discuté lors d’une réunion (en face à face ou par téléconférence), le numéro de GitHub correspondant est mis à jour avec le compte rendu de la discussion. Cela signifie que si vous souhaitez suivre un problème, vous pouvez le visualiser et voir quand il est mis à jour. Les comptes rendus complets de la réunion IRC sont également publiés sur la liste de diffusion www-style

Voici une sélection des sujets abordés qui, selon moi, vous intéresseront le plus.

Barres de défilement CSS

La spécification des barres de défilement CSS vise à donner un moyen standard de styliser la taille et la couleur des barres de défilement. Si vous avez Firefox Nightly, vous pouvez le tester. Pour voir les exemples ci-dessous, utilisez Firefox Nightly et activez les drapeaux layout.css.scrollbar-width.enabled et layout.css.scrollbar-color.enabled en visitant http : // about: config dans Firefox Nightly

La ​​spécification nous donne deux nouvelles propriétés: scrollbar-width et scrollbar-color . La propriété scrollbar-width peut prendre une valeur de auto mince aucune ou longueur (telle comme 1em ). Il semble que la valeur length puisse être supprimée de la spécification. Comme vous pouvez l’imaginer, il est possible pour un développeur Web de créer une barre de défilement très inutilisable en jouant avec la largeur. Il est donc préférable de laisser le navigateur choisir la largeur exacte qui convient, mais au lieu de cela afficher mince ou épais. barres de défilement.

Si vous utilisez auto comme valeur, le navigateur utilise les barres de défilement par défaut: thin vous donnera une barre de défilement fine et aucun ne montrera aucune barre de défilement visible (mais l'élément sera toujours déroulable)

Dans un navigateur prenant en charge les barres de défilement CSS, vous pouvez voir ceci en action dans la démo:

Voir le stylo CSS Scrollbars: scrollbar-width de Rachel Andrew ( @rachelandrew ) sur CodePen .

La propriété scrollbar-color traite, comme on peut s'y attendre, les couleurs de la barre de défilement. Une barre de défilement comporte deux parties que vous pouvez colorer indépendamment:

• thumb
  Le curseur qui se déplace de haut en bas lorsque vous faites défiler la piste
• 
  Le fond de la barre de défilement.

Les valeurs de la scrollbar-color property are auto dark light et .

En utilisant auto comme suit une valeur de mot-clé vous donnera les couleurs par défaut de la barre de défilement pour ce navigateur, dark fournira une barre de défilement sombre, soit en mode sombre de cette plate-forme, soit en mode sombre personnalisé, en clair la lumière mode de la plate-forme ou mode d'éclairage personnalisé.

Pour définir vos propres couleurs, vous ajoutez deux couleurs en tant que valeur séparées par un espace. La première couleur sera utilisée pour la piste thumb et la seconde pour la piste . Assurez-vous qu'il y a suffisamment de contraste entre les couleurs, sinon certaines personnes pourraient avoir du mal à utiliser la barre de défilement.

Dans un navigateur prenant en charge les barres de défilement CSS, vous pouvez voir ceci dans la démo:

Voir le stylo Les barres de défilement CSS: scrollbar-color de Rachel Andrew ( @rachelandrew ) sur CodePen .

Unités de rapport de format

Nous utilisons le hachage en CSS pour créer des zones de rapport de format depuis un certain temps, avec l’avènement de La disposition de la grille et de meilleures méthodes de dimensionnement du contenu, ainsi que la possibilité de créer des rapports de format en CSS, sont devenues de plus en plus pressantes.

GitHub soulève deux problèmes liés à cette exigence:

Il y a maintenant . ] un projet de spécification du niveau 4 de CSS Sizing et la décision de la réunion stipulaient qu'il était nécessaire de poursuivre la discussion sur GitHub avant de prendre une décision. Donc, si cela vous intéresse ou si vous avez d'autres cas d'utilisation, le groupe de travail CSS serait intéressé par vos commentaires sur ces questions.

The : where () Pseudo-classe fonctionnelle

L'année dernière le CSSWG a décidé d'ajouter une pseudo-classe agissant comme : matches () mais avec une spécificité nulle, facilitant ainsi le remplacement sans avoir à gonfler artificiellement la spécificité de éléments ultérieurs pour remplacer quelque chose dans une feuille de style par défaut.

La ​​pseudo-classe : matches () est peut-être nouvelle pour vous car il s’agit d’un sélecteur de niveau 4, mais elle vous permet de spécifier un groupe de les sélecteurs à appliquer certains CSS, aussi. Par exemple, vous pouvez écrire:

 .foo a: hover,
p a: hover {
  la couleur verte;
}

Ou avec : allumettes ()

: allumettes (.foo, p) a: hover {
  la couleur verte;
}

Si vous avez déjà eu une grosse pile de sélecteurs juste pour définir le même couple de règles, vous verrez à quel point cela sera utile. Le code suivant utilise les noms préfixés de webkit-any et de -moz-any pour illustrer la fonctionnalité des matchs () . Vous pouvez également en savoir plus sur les allumettes () sur MDN .

Voir le stylo : allumettes () et versions préfixées de Rachel Andrew ( @rachelandrew ) sur CodePen .

Ce type d’empilement de sélecteurs est souvent utilisé, et donc dans lequel : allumettes () sera le plus utile, se trouve dans une sorte de feuille de style initiale par défaut. Cependant, nous devons ensuite faire attention lorsque vous écrasez ces valeurs par défaut que tout écrasement est effectué de manière à être plus spécifique que les valeurs par défaut. C’est pour cette raison qu’une version à spécificité zéro a été proposée.

La ​​question discutée lors de la réunion concernait la désignation de cette pseudo-classe, vous pouvez voir la résolution finale ici et si vous vous demandez pourquoi divers noms ont été écartés. Regardez le fil complet . Il est très difficile de nommer des choses en CSS car nous allons tous devoir vivre avec pour toujours! Après beaucoup de débats, le groupe a voté et a décidé d'appeler ce sélecteur : where () .

Depuis la réunion, et pendant que j'écrivais ce message, il a été suggéré de renommer correspondances () à est () . Jetez un coup d'œil au numéro et commentez si vous avez des sentiments vifs dans les deux cas!

Raccourcis logiques pour les marges et le rembourrage

À propos des noms, j'ai écrit sur les propriétés logiques et Les valeurs de Smashing Magazine dans le passé, consultez « Comprendre les propriétés et les valeurs logiques ». Ces propriétés et valeurs fournissent des mappages relatifs de flux. Cela signifie que si vous utilisez des modes d'écriture autres qu'un mode d'écriture horizontal de haut en bas, tel que l'anglais, des éléments tels que les marges et le remplissage, les largeurs et la hauteur suivent la direction du texte et ne sont pas liés aux dimensions de l'écran physique.

Par exemple, pour les marges physiques, nous avons:

• margin-top
• margin-right
• margin-bottom
• margin-left

Les correspondances logiques pour celles-ci (en supposant que horizontal-tb) sont: :

• margin-block-start
• margin-inline-end
• margin-block-end
• margin-inline-start

On peut avoir deux raccourcis de valeur. Par exemple, pour définir à la fois margin-block-start et margin-block-end en abrégé, nous pouvons utiliser margin-block: 20px 1em . La première valeur représentant l'arête de début dans la dimension de bloc, la seconde valeur d'arête de fin dans la dimension de bloc

Nous rencontrons toutefois un problème lorsque nous arrivons à la marge abrégée à quatre valeurs . Ce nom de propriété est utilisé pour les marges physiques – comment désignons-nous la version logique à quatre valeurs? Diverses choses ont été suggérées, notamment un commutateur en haut du fichier:

 @mode "logical";

Ou, pour utiliser un bloc qui ressemble un peu à une requête multimédia:

 @mode (flow-mode: relative) {

}

Ensuite, diverses suggestions de modificateurs de mots clés, utilisant un caractère de ponctuation ou créant un nouveau nom de propriété:

 margin: relative 1em 2em 3em 4em;
marge: 1em 2em 3em 4em! relative;
marge relative: 1em 2em 3em 4em;
~ marge: 1em 2em 3em 4em;

Vous pouvez lire le numéro pour voir les différentes choses à l'étude. Les problèmes discutés étaient que, bien que la version logique finisse par être généralement la valeur par défaut, vous souhaiterez parfois que les choses se rapportent à la géométrie de l'écran; nous devons pouvoir avoir les deux options dans une seule feuille de style. Avoir un paramètre @mode en haut du CSS peut être déroutant; cela échouerait si quelqu'un copiait et collait une partie de la feuille de style.

Ma préférence est d'avoir une sorte de valeur de mot clé. De cette façon, si vous regardez la règle, vous pouvez voir exactement quel mode est utilisé, même s'il semble légèrement inélégant. C'est le genre de chose qu'un pré-processeur pourrait traiter pour vous; si vous voulez vraiment que toutes vos propriétés et vos valeurs utilisent les versions logiques.

Nous n’avons pas réussi à résoudre le problème. Par conséquent, si vous avez des idées sur celles qui pourraient être meilleures, ou si vous pouvez rencontrer des problèmes avec Veuillez commenter le problème sur GitHub

Discussion sur les tests de la plate-forme Web

Lors de la réunion du groupe de travail CSS, puis lors de la journée de plénière technique de style non-conférence, j'ai discuté de la manière d'obtenir plus de personnes impliquées dans la rédaction de tests pour les spécifications CSS. Le projet Web Platform Tests vise à fournir des tests pour l'ensemble de la plate-forme Web. Ces tests aident ensuite les éditeurs de navigateurs à vérifier si leur navigateur est correct par rapport aux spécifications. Dans le groupe de travail CSS, l'objectif est que toute modification normative d'une spécification ayant atteint le statut de recommandation candidate (CR) soit accompagnée d'un test. Cela a du sens car une fois qu'une spécification est dans CR, nous demandons aux navigateurs de mettre en œuvre cette spécification et de fournir des commentaires. Ils ont besoin de savoir si quelque chose dans les spécifications change afin de pouvoir mettre à jour leur code.

Le problème est que nous avons très peu de personnes qui rédigent des spécifications. Par conséquent, le fait que les rédacteurs de spécifications rédigent tous les tests ralentisse la progression de CSS. . Nous aimerions beaucoup que d’autres personnes écrivent des tests, car c’est un moyen de contribuer à la plate-forme Web et d’acquérir une connaissance approfondie du fonctionnement des spécifications. Nous nous sommes donc rencontrés pour réfléchir à la manière dont nous pourrions encourager les gens à participer à l’effort. J'ai écrit sur ce sujet dans le passé; Si l'idée de rédiger des tests pour la plate-forme vous intéresse, consultez mon article de 24 Ways intitulé « Testing the Web Platform ».

À propos du travail!

Le CCPC a ajouté à mon liste de tâches personnelle considérablement. Cependant, j’ai pu obtenir des conseils sur l’édition des spécifications, la rédaction de tests et un plan pour rétablir la spécification de présentation multi-colonnes – dont je suis le co-éditeur – au statut CR. En tant que fan des réunions, je suis venu constater à quel point ces réunions en face-à-face sont précieuses pour la plate-forme Web, ce qui donne à ceux d'entre nous qui y ont contribué l'occasion de partager les connaissances que nous développons individuellement. Cependant, j'estime qu'il est important d'utiliser ces connaissances et de les partager en dehors du groupe afin d'aider davantage de personnes à participer au développement et à l'utilisation de la plate-forme.

Si le fonctionnement du groupe de travail CSS vous intéresse, et comment le nouveau CSS est inventé et aboutit dans les navigateurs, consultez ma présentation 2017 sur CSSConf.eu « D'où vient CSS? » et les informations de fantasai dans ses posts « An Inside View of le groupe de travail CSS du W3C ".

(il)