Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS files of the content elements accordion, content slider and code are loaded after the external stylesheets #7124

Closed
mdollde opened this issue Apr 17, 2024 · 6 comments · Fixed by #7151
Closed

CSS files of the content elements accordion, content slider and code are loaded after the external stylesheets #7124

mdollde opened this issue Apr 17, 2024 · 6 comments · Fixed by #7151
Labels
bug
Milestone
5.3

Comments

@mdollde
Copy link

mdollde commented Apr 17, 2024

Affected version(s)

5

Description

If you use one of the content elements Accordion, Content Slider and Code the CSS files of the CE are loaded after the external stylesheets in the head of the fe_page.

Files of the legacy elements and files of the CSS framework are loaded before the external stylesheets. This should also be the case with the new content elements, so you can overwrite them by using the cascade without need of an !important declaration.

For example, this is what it looks like in the source code of the official demo, if you add the new handorgel accordion:

...
<head>
    <meta charset="UTF-8">
    <title>Accordion - Contao Official Demo</title>
    <base href="https://demo.contao.org/">
    <meta name="robots" content="index,follow">
    <meta name="description" content="">
    <meta name="generator" content="Contao Open Source CMS">
    
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="/assets/colorbox/css/colorbox.min.css?v=83af8d5b">
    <link rel="stylesheet" href="/assets/tablesorter/css/tablesorter.min.css?v=261b8456">
    <link rel="stylesheet" href="/assets/swipe/css/swipe.min.css?v=93eb43ec">
    <link rel="stylesheet" href="/assets/css/files_contaodemo_theme_src_scss_app.scss.css?v=92a26716">
    <script src="/assets/jquery/js/jquery.min.js?v=2e868dd8"></script>
    <link rel="stylesheet" href="/assets/handorgel/css/handorgel.min.css?v=1.0.0.1">

</head>
...

The handorgel.css is the last line, but should come before the files_contaodemo_theme_src_scss_app.scss.css

Greetings
Mathias
@leofeyer leofeyer added this to the 5.3 milestone Apr 17, 2024
@leofeyer
Copy link
Member

leofeyer commented Apr 17, 2024 •
edited

contao/core-bundle/src/Resources/contao/templates/frontend/fe_page.html5

Lines 20 to 24 in fff9798

<?= $this->viewport ?>
<?= $this->framework ?>
<?= $this->stylesheets ?>
<?= $this->mooScripts ?>
<?= $this->head ?>

That is because in Contao 4.13, the dynamic style sheets in $GLOBALS['TL_CSS'] are added to $this->stylesheets, but in Contao 5, they are added to $this->head. @contao/developers How do we fix this?

@m-vo
Copy link
Member

m-vo commented Apr 17, 2024

The problem is IMHO, that things inside TL_HEAD do not have an order and the Twig/response context parts are added later on. We must IMHO either introduce a priority of some sorts or add the 'additional style sheets' in a separate block that comes later.

@mdollde No matter the fix, here is a workaround you could use: Overwrite the {% block style %} with an empty block, so that the handorgel (or similar) stylesheet is not loaded at all. Then include it yourself in your style sheet and add additional styles or fully implement it yourself.

@Toflar
Copy link
Member

Toflar commented Apr 18, 2024 •
edited

Most straightforward would probably to use some data-priority="100" attribute and sort by them. Shouldn't harm in the output and would allow us to sort anythign that's been added to the head. No fancy logic, just the first occurrence of data-priority="(\d)+" and that's it?

@leofeyer
Copy link
Member

Why can we not simply use {% add "…" to stylesheet %} instead of {% add "…" to head %} in the Twig templates?

@m-vo
Copy link
Member

m-vo commented Apr 18, 2024

Sure, we can also add more targets. The idea was to keep it super simple at first, because the ResponseContext must implement all these later on (when we're not using the globals anymore).

@leofeyer leofeyer mentioned this issue Apr 24, 2024
Merged
@leofeyer
Copy link
Member

There is a simple fix that does not require to add more targets: #7151

@leofeyer leofeyer linked a pull request Apr 24, 2024 that will close this issue
Add the component style sheets before the user style sheets #7151
Merged
leofeyer added a commit that referenced this issue May 3, 2024
@leofeyer
Add the component style sheets before the user style sheets (see #7151)
60971eb 
Description
-----------

Fixes #7124

Commits
-------

4b352cf Add the Twig style sheets before the user style sheets
181cffc Add a new "stylesheets" target
187624c Insert the component style sheets before the CSS framework
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
5.3
Development

Successfully merging a pull request may close this issue.

Add the component style sheets before the user style sheets leofeyer/contao
4 participants
@Toflar @leofeyer @m-vo @mdollde