Download the PHP package zeroseven/critical-css without Composer
On this page you can find all versions of the php package zeroseven/critical-css. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package critical-css
CRITICAL CSS 🚀
This extension creates the "critical css" dynamically for each page.
Styles which have been integrated via PageRenderer or simple TypoScript are then automatically moved down from head to the end of the DOM.
Based on penthouse, a server running a service calls the single pages, determines the critical css and sends them back to TYPO3. If you change or move any content element, or update the page properties, the critical css will be flushed on this page and automatically recalculated.
Installation and setup
- Get this extension via
composer req zeroseven/critical-css - Get a free token here
- Store the token via the extension configuration in TYPO3 settings module
Flush critical css
If you need to recalculate the critical css on all pages, for example because you updated the page template, you can do this with just a single click:
There are good reasons why "no admins" in TYPO3 shouldn't have this cache button. If they insist on needing it (they don't) then you can set the following option (you won't) in TSconfig:
Flush command:
This function can also be called via a TYPO3 command:
Monitoring
A dashboard widget always gives you a good overview of how many pages are pending or expired, or just up-to-date.
Disable on some pages
The service calls the respective sites without POST or GET parameters or even without cookies or anything similar. Therefore it could make sense to deactivate the service for certain pages. In the backend, there's an extra button in the page properties for that.
1. Post or get parameters
For pages with content that mostly behaves dynamic, the service should be disabled.
Let's take a search result page for example. The service will call this page without any search results, therefore making it impossible to consider the CSS of search results.
This leaves the user with incomplete styling in the head area.
2. The record based detail pages problem (also called TRBDPP)
The critical css is stored in the database for each TYPO3 page. Unfortunately, extensions like the good old "news" extension, for example, offers one page for many records. For such "detail" pages you have to deactivate the service manually using the nicely styled button inside the page properties in the backend.
TODO: Create a Wikipedia article for "TRBDPP". LOL
PSR-14 Events
Register event listener
You can modify the behavior of the critical CSS generation by listening to PSR-14 events. To register your event listener, add the following configuration to your Configuration/Services.yaml:
my_extensin/Classses/Event/CriticalCssEventListener.php:
