[PP-1] Support inline and async CSS

Created on 3 July 2017, almost 8 years ago
Updated 20 August 2023, almost 2 years ago

Split from #2391025: Add support for inline JS/CSS with #attached β†’ don't bother reading any comments till after comment #20

Problem/Motivation

Adding inline CSS is cumbersome and isn't supported by the asset library system via #attached. In order to avoid the flash of unstyled content, it is recommended to attach all ABF (above the fold) styling as inline styling in the head tag. With our current library system this is difficult/near impossible. It is easy for a theme to add inline css into the twig templates, but a module cannot depend on the order of the css included externally. This makes for inconsistent css rule specificity.

Proposed resolution

Allow for all aggregated/cached css to be added inline in the head. This is the recommended strategy for Mobile First Development and avoiding the flash of unstyled content.

Remaining tasks

TBD

User interface changes

TBD

API changes

TBD

Data model changes

TBD

✨ Feature request
Status

Postponed

Version

11.0 πŸ”₯

Component
Asset libraryΒ  β†’

Last updated 2 days ago

No maintainer
Created by

πŸ‡ΊπŸ‡ΈUnited States frob US

Live updates comments and jobs are added and updated live.
  • Needs tests

    The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.

  • Needs issue summary update

    Issue summaries save everyone time if they are kept up-to-date. See Update issue summary task instructions.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡¬πŸ‡§United Kingdom catch

    @gapple is correct, unless you're doing something tricky with the rest of the CSS files, just making some inline does nothing. Making the entire contents inline is likely to be counter-productive, you wouldn't want everthing inline all the time because then you can't make use of browser caching.

    https://www.drupal.org/project/critical_css β†’ is handling what this issue wants to do, so this is really a feature request about bringing that functionality into core.

    Either way this should be postponed on #2391025: Add support for inline JS/CSS with #attached β†’ .

  • Status changed to Postponed: needs info almost 2 years ago
  • πŸ‡¬πŸ‡§United Kingdom catch

    Actually this is needs more info, between the contrib module and also ✨ Allow CSS to be added at end of page by rendering assets with placeholders Active , not clear what's being asked for here that's not covered by other issues.

  • Status changed to Closed: outdated 27 days ago
  • πŸ‡³πŸ‡ΏNew Zealand quietone

    It has been two years sine more information was asked for so progress could be made here. Since that information has not been supplied I am closing this issue.

    If there is work to do here, then either re-open the issue or open a new issue and reference this one. If the choice is to use this issue then add a comment change make sure to change the issue status to 'Active'.

Production build 0.71.5 2024