Modules CSS (les natifs)

Le module CSS nativement pris en charge par le navigateur est en fait appelé "script de module CSS". Ceci est différent des projets open source populaires, qui implémentent les styles de portée en créant des identificateurs de nom de classe uniques dans HTML et CSS.

Le module CSS natif fait partie du module ES (un peu comme le module JSON que nous avons introduit récemment):

 // L'importation des modules ES régulière réagit à partir de "https://cdn.skypack.dev/[email protégé]";

// Nouveau module JSON Importation configData à partir de './config-data.json' assert {type: 'json'};

// Nouveau module CSS Importer Stylesheet de "./styles.css" Assert {Type: "CSS"};

La première fois que j'ai vu cela venait du tweet de Justin:

Actuellement, ce n'est qu'une fonctionnalité de Chrome. Liens connexes:

• Implémentation de l'intention: module CSS V1
• État de la plate-forme chromée: script du module CSS
• Github / whatwg: introduire les scripts du module CSS

Au moment de la rédaction du moment de la rédaction, il ne fonctionne que dans Chrome Canary avec des fonctionnalités de plate-forme Web expérimentales activées. Si vous voulez demander: "Quand puis-je l'utiliser dans des projets de production et que les utilisateurs de ces projets utilisent une variété de navigateurs?" Cela peut prendre des années. Peut-être jamais. Mais c'est toujours intéressant. Peut-être que le soutien se développera rapidement. Peut-être que vous travaillerez sur un projet Electron ou un autre projet que vous pouvez compter sur des fonctionnalités de navigateur spécifiques.

Cela ressemble à une extension des feuilles de style constructibles, et ils sont également limités aux navigateurs chromés, donc les navigateurs qui "sont à la traîne" à cet égard doivent commencer à partir de là.

J'ai essayé l'idée de Justin ici:

Si j'enregistre ce que j'obtiens de l'importation du module CSS, c'est une feuille CSSStyles:

Si vous voulez réellement utiliser des styles ... c'est à vous. L'idée de Justin applique essentiellement les styles comme une seule ligne de code, car cela arrive à la prise en charge de Lit-HTML CSSSTYLESHEET (ces documents ne le disent pas explicitement, mais je pense qu'ils l'expliquent à un moment donné). Pour les composants Web natifs, la différence n'est pas beaucoup: vous l'importez, obtenez la feuille CSSSTYLESE, puis l'appliquez aux composants Web, par exemple:

 this.shadowroot.adoptedStylesheets = [mycssStylesHeet];

Je pense que la signification de tout cela est:

• Nous avons besoin d'un moyen d'importer des feuilles de style en JavaScript, et c'est essentiellement la première façon vraiment claire que je connais,
• Maintenant, si nous le souhaitons, nous pouvons programmer l'accès au CSS pour fonctionner,
• Il semble particulièrement bon pour l'utilisation des composants Web, mais il est universel. Une fois que vous avez une feuille de style, vous pouvez l'utiliser comme vous le souhaitez.

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!