Activer les fonctionnalités CSS à venir avec PostCSS

Hérité dans l'article précédent "Guide PostCSS: sélecteurs améliorés et requête multimédia", cet article explorera plus de plug-ins PostCSS qui étendent la fonctionnalité CSS. L'article précédent se concentre sur l'amélioration de la structure des feuilles de style en étendant les sélecteurs et les requêtes multimédias, tandis que cet article se concentrera sur la façon d'implémenter de nouvelles propriétés et valeurs dans la spécification à venir. Les plugins décrits dans cet article implémentent différentes fonctions qui peuvent être utilisées efficacement ensemble ou individuellement en fonction de vos besoins.

Commençons par mon plugin préféré.

points clés

Le plug-in
• PostCSS peut être utilisé pour implémenter de nouvelles propriétés et valeurs dans la prochaine spécification CSS, étendant efficacement la fonctionnalité de CSS. Ces plugins peuvent être utilisés ensemble ou individuellement en fonction des besoins du développeur.
• POSTCSS permet aux développeurs d'utiliser les futures fonctionnalités CSS avant la mise en œuvre officielle du navigateur. Le plugin postcss-initial ajoute la prise en charge de la combinaison initial valeur et all: initial, et le plugin postcss-autoreset réinitialise automatiquement le style des éléments au niveau du bloc et au niveau des composants.
Le plugin
• postcss-color-function implémente une nouvelle fonction color() qui permet aux développeurs d'utiliser une ou plusieurs fonctions "Adjustateur de couleur" pour modifier la couleur sous-jacente. Le plugin postcss-color-hwb implémente une nouvelle fonction hwb() pour définir la couleur HWB; postcss-color-gray gray() POSTCSS offre une opportunité prometteuse d'adopter et d'évaluer tôt les nouvelles fonctionnalités CSS. Il est conseillé aux développeurs d'écrire des feuilles de style dans une perspective complètement nouvelle et de répertorier les fonctionnalités disponibles qui peuvent augmenter la productivité.
Choisissez la réinitialisation au niveau suivant

CSS3 introduit deux belles fonctionnalités:

Valeur et

Attribut. La valeur initial est utilisée avec les valeurs all et initial, vous permettant de réinitialiser la propriété à sa valeur d'origine. L'attribut inherit est utilisé comme un attribut raccourci, qui réinitialise tous les attributs à l'un de ces trois états. Bien que les deux soient intéressants en eux-mêmes, lorsqu'ils sont utilisés ensemble, ils vous permettent de réinitialiser rapidement tous les styles d'un élément spécifique et d'empêcher l'hériter des styles de l'élément parent de la page. Ceci est une autre étape dans l'écriture CSS modulaire! unset all Malheureusement, IE ne prend toujours pas en charge ces deux fonctions. Cependant, comme vous l'avez peut-être deviné, il y a un plugin qui résout ce problème.

Ajout de la prise en charge des valeurs

et postcss-initial combinaisons. Voici comment cela fonctionne: initial all: initial

compilé à:

.article {
  font-size: initial;
  color: initial;
  padding: initial;
  margin: initial;
}

Par défaut, il conserve les propriétés d'origine ainsi que

.article {
  font-size: medium;
  font-size: initial;
  color: #000;
  color: initial;
  padding: 0;
  padding: initial;
  margin: 0;
  margin: initial;
}

pour une utilisation par les navigateurs natifs qui prennent en charge cette fonctionnalité.

initial À son tour, l'attribut

sera converti en une longue liste d'attributs de réinitialisation.

all

sera converti en:

.container {
  all: initial;
}

(Pour le bien de l'espace, le code étendu après

.container {
  /*  此处省略大量重置属性  */
  all: initial;
}

a été omis)

Si vous utilisez BEM ou Suit, ce plugin fonctionne bien avec postcss-autoreset, qui réinitialisera automatiquement les styles des éléments de niveau de bloc et de composants.

Attributs personnalisés

Lorsque vous travaillez avec les mises en page, nous devons souvent partager certaines valeurs dans la feuille de style. Par exemple, la couleur de votre marque peut être utilisée comme arrière-plan pour un bouton, une couleur de texte pour un lien ou une bordure pour un bloc de texte. Actuellement, pour y parvenir, nous devons le répéter plusieurs fois à chaque endroit où la couleur est utilisée. Cette répétition rend lourde de maintenir la palette cohérente lors du changement de couleurs dans l'application.

Les préprocesseurs CSS comme moins et SASS ont résolu ce problème avec les variables. Heureusement, W3C travaille sur un concept similaire appelé Properties Custom. Bien que le même problème soit résolu, ils fonctionnent différemment des variables dans le préprocesseur. Les variables moins et Sass sont analysées au moment de la compilation. Lorsque vous compilez moins ou SASS à CSS, le compilateur recherche des déclarations variables correspondant à la plage de compilation actuelle et remplace chaque instance par la valeur correspondante. Cela signifie que la valeur analysée d'une variable dépend entièrement de l'endroit où il est utilisé dans le code. Les propriétés personnalisées, à leur tour, sont définies pour les éléments du DOM et ne peuvent être accessibles que par leurs éléments enfants. Cela signifie que la valeur de la variable dépend de la position de l'élément dans le DOM et ne peut être analysée qu'au moment de l'exécution.

Vous devriez froncer les sourcils ou hausser les sourcils jusqu'à présent. Si la valeur d'une variable n'est connue qu'au moment de l'exécution, comment le plugin PostCSS l'analyse-t-il? La vérité est que ça ne peut pas. Cependant, il fournit un moyen d'utiliser ce sous-ensemble de fonctionnalités. Si nous définissons toutes les propriétés personnalisées dans l'élément :root, ces propriétés seront disponibles pour tous les éléments de la page. Cela signifie que nous pouvons les analyser au moment de la compilation.

Voici un exemple simple de ce à quoi il pourrait ressembler:

.article {
  font-size: initial;
  color: initial;
  padding: initial;
  margin: initial;
}

va compiler à:

.article {
  font-size: medium;
  font-size: initial;
  color: #000;
  color: initial;
  padding: 0;
  padding: initial;
  margin: 0;
  margin: initial;
}

Notez que la variable --font-size n'est pas définie, elle est donc remplacée par une valeur de secours de 20px. Il est important ici de conserver toutes les propriétés personnalisées dans :root. Les propriétés définies ailleurs seront ignorées car le plugin ne peut pas les gérer de manière adéquate. Vous pouvez commencer ici et vous pouvez prolonger son utilisation lorsque davantage de navigateurs commencent à le soutenir. Chrome les soutient depuis la version 49.

Propriétés logiques

Si vous avez déjà développé un site Web international qui couvre différentes cultures de direction d'écriture, vous saurez ce qu'il faut pour maintenir plusieurs versions de l'interface (comme de gauche à droite ou de droite à gauche). Pour répondre à ce besoin, W3C a introduit un nouveau concept d'attributs logiques. Une façon de penser à la direction physique (comme la droite ou la gauche), mais plutôt la direction logique - montez et terminez. La spécification est toujours en cours, mais vous pouvez déjà en essayer une partie avec le plugin postcss-logical-props.

Il prend en charge la génération de versions de site Web de gauche à droite et de droite à gauche en utilisant certaines propriétés logiques telles que border-block-start et border-block-end, offset-block-start et offset-block-end. Ces propriétés sont compilées dans leurs alternatives gauche ou droite. Vous pouvez demander au plugin de compiler les versions LTR et RTL de la feuille de style, puis de les basculer dans l'application lorsque l'utilisateur modifie la langue.

par exemple, si vous avez le CSS suivant:

.article {
  font-size: initial;
  color: initial;
  padding: initial;
  margin: initial;
}

appeler le plugin avec l'option { dir: 'LTR' } produira les résultats suivants:

.article {
  font-size: medium;
  font-size: initial;
  color: #000;
  color: initial;
  padding: 0;
  padding: initial;
  margin: 0;
  margin: initial;
}

lors de l'utilisation de { dir: 'RTL' } vous fournira une image miroir:

.container {
  all: initial;
}

nouvelle fonction couleur

POSTCSS fournit un ensemble complet de plugins qui fournissent de nouvelles fonctionnalités pour la manipulation des couleurs.

Réglage des couleurs

Le plugin

postcss-color-function implémente la nouvelle fonction color(). Cette fonction vous permet d'utiliser une ou plusieurs fonctions "Adjustateur de couleur" pour modifier la couleur sous-jacente. Chaque expert en couleurs peut manipuler les couleurs d'une manière spécifique.

Voici quelques exemples de la façon de l'utiliser:

.container {
  /*  此处省略大量重置属性  */
  all: initial;
}

sera compilé avec la couleur suivante:

:root {
  --text-color: red;
  --background: blue;
}

h1 {
  color: var(--text-color);
  font-size: var(--font-size, 20px);
}
button {
  background-color: var(--background);
}

La liste complète des ajusteurs de couleurs se trouve dans la spécification

. Ce plugin peut être utilisé très efficacement avec des propriétés personnalisées. Vous pouvez définir un ensemble de couleurs de base et calculer d'autres couleurs en fonction d'eux. De cette façon, si vous décidez de changer la couleur de base, le reste de la palette sera mis à jour en conséquence.

Notation de couleur HWB

HWB signifie Hue-Whiteness-Blackness, qui est un autre moyen de définir la couleur. Il utilise des valeurs de teinte de 0 à 360 pour décrire la couleur, puis ajoute 0% à 100% de blancheur et de noirceur. Cette notation est similaire à HSL et est plus facile à comprendre que RVB. Le plugin postcss-color-hwb implémente une nouvelle fonction hwb() pour définir les couleurs HWB. Plusieurs exemples:

h1 {
  color: red;
  font-size: 20px;
}
button {
  background-color: blue;
}

Les couleurs suivantes seront générées:

.text {
  border-block-start: 1px solid blue;
  text-align: start;
  padding-block-end: 10px;
  margin-block-start: 20px;
}

gris () Fonction

Le module de couleur

CSS introduit également une fonction gray() pratique. Il peut être utilisé pour générer du gris sans spécifier aucune information redondante, comme les trois canaux des couleurs RVB. postcss-color-gray Le plugin implémente le polyfill de cette fonction et est très simple à utiliser:

.text {
  border-left: 1px solid blue;
  text-align: left;
  padding-right: 10px;
  margin-left: 20px;
}

Le code ci-dessus générera du gris de différentes nuances:

.text {
  border-right: 1px solid blue;
  text-align: right;
  padding-left: 10px;
  margin-right: 20px;
}

Résumé

Ce n'est en aucun cas une liste complète de tous les plugins CSS disponibles, mais juste un choix de plugins plus intéressants. Vous pouvez explorer plus de plugins sur les postes PostcS.

CSS est en plein essor et PostCSS est en plein essor. Oui, nous attendons tous avec impatience le support natif pour ces nouvelles fonctionnalités par le navigateur, mais PostCSS nous offre une opportunité prometteuse d'adopter et d'évaluer ces fonctionnalités tôt. Le conseil global ici est d'essayer de prendre du recul par rapport à l'utilisation familière des préprocesseurs et de consulter les feuilles de styles d'écriture sous une nouvelle perspective. Essayez de répertorier les fonctionnalités disponibles qui peuvent augmenter votre productivité et les utiliser dans votre flux de travail. Vous pouvez bientôt vous rendre compte que ce sont exactement les fonctionnalités qui vous manquent.

Les questions fréquemment posées sur l'activation des fonctionnalités CSS à venir avec PostCSS

(La partie FAQ est omise ici car l'article est trop long et ne correspond pas à l'objectif pseudo-original. La partie FAQ peut être réorganisée et réécrite au besoin, mais l'intention d'origine reste inchangée.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!