devdocs icon indicating copy to clipboard operation
devdocs copied to clipboard

Request for a topic update on including head scripts / styles

Open ioweb-gr opened this issue 2 years ago • 5 comments

Topic Link

https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/css-topics/css-themes.html

Description

Please add an example of how to add css with preload in the head section. Currently we can add scripts or stylesheets with the classic way of

        <script src="Vendor_Module::path_to.js" defer="true" />
        <css src="Vendor_Module::path_to.css"/>

But there's no clear way to add preloaded css

So how would we be able to do something like this?

<head>
  <meta charset="utf-8">
  <title>JS and CSS preload example</title>

  <link rel="preload" href="style.css" as="style">
  <link rel="preload" href="main.js" as="script">

  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>bouncing balls</h1>
  <canvas></canvas>

  <script src="main.js" defer></script>
</body>

Possible solutions

It should give a clear example of adding a css and a js file using rel="preload"

Additional information

ioweb-gr avatar Jan 28 '22 08:01 ioweb-gr

Hi @ioweb-gr. Thank you for your report. To speed up processing of this issue, make sure that you provided sufficient information.

Add a comment to assign the issue: @magento I am working on this


m2-assistant[bot] avatar Jan 28 '22 08:01 m2-assistant[bot]

Hi @dshevtsov do you think you could help with this issue?, or point to the right person to address it? Thanks!

danidelcar avatar Feb 10 '22 15:02 danidelcar

@danidelcar I cannot help with this, unfortunately. My contributions to this topic were of a site maintenance nature, not technical. Maybe @Tazaf and @david-ziffity would be willing to contribute as the contributors who updated the examples in the past (from what I see in git history).

dshevtsov avatar Feb 10 '22 15:02 dshevtsov

Thanks Dima!

danidelcar avatar Feb 10 '22 16:02 danidelcar

In the layout xml file it should be possible link with attributes both rel and as

JesperHerrloff avatar Jan 19 '24 22:01 JesperHerrloff