There's a bunch of good things came out of this intensive review of CSS frameworks.
The first four are PHP scripts for real time "beautifying" and "miniizing" of CSS (and also javascript) files. Real time means that it is processing in real time while the page is loading and inserting the result in the HTML page flow.
These are new PHP projects ... while there are a few PHP scripts available, none really suited the purposes. For example, in CSS there is a multi-line comment style that is designed for "minifier" scripts to leave in place. These are known as "Attribution Comments" and start with '/*! '. The exclamation mark at the end of the start of what appears to be a multi-line comment. Those are designed to pass information about the CSS file including author and license. And those are designed to stay in place when minimized (or beautified).
There are no PHP minifiers available that handle that properly. Existing PHP minifiers also do not handle @import statements or properties that include a "url" portion. You see, the @import statement can take several different forms:
- @import url("assets/css/extra.css");
- @import "assets/css/extra.css"
- @import url("https://mywebsite.com/assets/css/extra.css");
The @import statement is designed to allow you to include other style sheets into your own ... and must be included at the top of your style sheet.
The "url()" portion can be used anywhere in your style sheet. It's designed to use svg files or images ... for example, as a background for a div. Here's an example from bootstrap.css:
- –bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
in all of these examples, a PHP minifier would cause problems with slashes, spaces, and would interpret semi-colons as an end of line. In most url snippets, that would likely break the css rule.
I ended up writing my own CSS and JS minifiers that handle all of these "exceptions" to standard rules properly and leaves them intact. When I wrote them, I was going to make the feature as an option ... but I chose to make this process without checking on option status. If someone takes the time to write an "attribution comment" including who the author is, license terms, and usage references, they should be included in any derivatives (like minifying). The only "option" in both of my CSS and Javascript minifiers is whether or not to include HTML tags (ie. <style></style> and <script></script>) ... reason for that is that I may want to include the tags manually (with other declarations as part of the tag).
My minifiers remove all multi-line comments and all single line comments ... and does that properly. I've run into no exceptions to that. And note that attribution comments are handled before this step so there is no conflict between removing multi-line comments and attribution comments.
I also wrote the opposite of a minifier ... that is a beautifier. This came out of trying to use PHP's Tidy. Tidy is so convoluted that it just can't be controlled properly. I also tried using the DOM, but ran into similar issues as Tidy ... too many work-arounds to achieve just beautifying the HTML. So I wrote my own HTML beautifier. No HTML beautifiers, including mine, work properly on CSS or Javascript. The next two beautifiers were specifically to take any CSS code, including minified versions, and output a properly formatted CSS (or Javascript) stream that can be inserted in with an HTML page flow.
All of my "minifiers" and "beautifiers" work in real time, that is as it creates the page, it can minify or breautify as called. It's incredibly fast too, taking micro-seconds to process and render.
I'm thankful for that ... now to use those into my new blog software – and create a new CSS-specific blog.