qstudio

<p>Easily include browser specific stylesheets in templates or select browser and version specific classes in CSS.</p>
<p>Conditional browser stylesheets are added after the main theme style.css allowing them to overrule previous rules – you only need to add the CSS rules that should change.</p>
<p>This plugin uses up-to-date WordPress top level functions, sanitizes all input data and is fully internationalized.</p>
<p>For feature request and bug reports, <a href="https://qstudio.us/support/categories/conditional-stylesheets-and-body-classes" rel="nofollow ugc">please use the Q Support Website</a>.</p>
<p>Please do not use the WordPress.org forum to report bugs, as we no longer monitor or respond to questions there.</p>
<h4>Features</h4>
<ul>
<li>Checks for and adds browser and version specific stylesheets – such as “browsers-windows-firefox.css”.</li>
<li>Add browser and version specific body classes to all pages – such as body.browsers-msie-10</li>
<li>Includes the Mobile Detect class and adds mobile & touch body classes.</li>
<li>Adds a post type body class, for example: “posttype-page”.</li>
<li>Inserts handy HTML comments in the HTML footer of template files to tell you which CSS files could be used and which were found.</li>
</ul>


Conditional Stylesheets and Body Classes

Add conditional browser stylesheets and body class declarations

Utsav Ladani

<p>MachStyle helps your pages feel faster by loading critical styles first and delaying selected non-critical CSS.</p>
<p>You decide where this happens using simple rules. For many sites, this can help improve Core Web Vitals.</p>
<p>MachStyle is designed for practical, low-risk testing:</p>
<ul>
<li>Create rules for specific page groups, post types, or URL patterns.</li>
<li>Test changes safely in Test Flight before they affect real visitors.</li>
<li>Compare results in performance tools like PageSpeed Insights before going live.</li>
<li>Copy tested rules to live settings when ready.</li>
</ul>
<p>Small, measured changes work best. Test, compare, then roll out.</p>
<h3>How to Use</h3>
<ol>
<li>Open MachStyle and go to <code>Test Flight</code>.</li>
<li>Add one rule for one page group, such as the home page, a post type, or a URL pattern.</li>
<li>Add the style handles you want to defer. Use the Audit Panel to find style handles.</li>
<li>Check the page on desktop and mobile.</li>
<li>Run PageSpeed on the Test Flight URL and compare the result with your normal live URL.</li>
<li>If the page looks correct and the metrics improve, copy the rules to <code>Live Settings</code>.</li>
<li>Enable live optimization.</li>
</ol>
<h3>How to Use Audit Panel</h3>
<p>Audit Panel is a tool that helps you find style handles to defer.</p>
<ol>
<li>Open the frontend of your website and open Audit Panel from MachStyle menu in admin bar.</li>
<li>Click on any stylesheet to temporarily remove its styling. This shows you what the page looks like for a fraction of second during load.</li>
<li>Look at the top of your site. If it still looks readable and organized without that style, it’s a great candidate to stay deferred.</li>
<li>If the page looks messy or the header breaks, that style is important for the first impression. Click it again to turn it back on.</li>
<li>Once finished, click <strong>Copy Handles</strong> button to get your optimized list and add it to your MachStyle settings.</li>
</ol>
<h3>What to Defer First</h3>
<p>Start with styles that are useful but not needed immediately:</p>
<ul>
<li>Footer styles</li>
<li>Slider and carousel styles</li>
<li>Form styles on pages that do not show forms right away</li>
<li>Social share or widget styles below the fold</li>
<li>Extra builder or block styles not needed at first paint</li>
</ul>
<h3>What Not to Defer</h3>
<p>Avoid deferring styles that control first-view layout:</p>
<ul>
<li>Main theme layout styles</li>
<li>Header, menu, and hero section styles</li>
<li>Checkout and cart critical styles</li>
<li>Any style that causes visible layout shifts when delayed</li>
</ul>
<h3>Development & Contribution</h3>
<p>MachStyle is open source and welcomes contributions!</p>
<ul>
<li><strong>GitHub Repository</strong>: https://github.com/Utsav-Ladani/MachStyle</li>
<li><strong>Report Issues</strong>: https://github.com/Utsav-Ladani/MachStyle/issues</li>
<li><strong>Feature Requests</strong>: https://github.com/Utsav-Ladani/MachStyle/issues</li>
<li><strong>Contribute Code</strong>: Fork the repository and submit pull requests</li>
</ul>


MachStyle

MachStyle helps your pages feel faster by loading critical styles first and delaying selected non-critical CSS.

Conditional Stylesheets and Body Classes vs MachStyle