@mobiloud/ml-css-injector
v1.2.1
Published
MobiLoud CSS Injector
Maintainers
vitorargosReadme
CSS INJECTION TOOL
Introduction
The Web-App Style Injector is a lightweight JavaScript library that simplifies the process of tailoring your website for web and app versions. By adding a few lines of code, you can apply distinct styles to elements visible only on the app version or hidden entirely on it. No advanced technical knowledge is required; it’s as simple as copy-pasting two script tags!
Key Features
- Effortless Integration: Just copy and paste the provided script tags to get started.
- Dynamic Styling: Automatically adds a
is-appclass to the<body>, enabling custom styles for app and web versions. - App-Specific Classes:
app-hide: Hides elements exclusively on the app version.app-exclusive: Displays elements only on the app version.
- Customizable Options: Use optional parameters for further flexibility, such as hiding predefined sections or disabling logs.
- Helper Logs: By default, helpful console logs guide you during setup and usage.
- Advanced Classes Injection: A developer-oriented feature that allows regex-based CSS injection for specific pages.
How to Use It
1. Basic Implementation
For the simplest setup, follow these steps:
Copy the following code and paste it right before the closing tag of your document
<script src="cdn.com/script.js" defer></script>
<script>
(function(){
styleTemplate();
})();
</script>With this setup, your website will Automatically add a is-app class to the when the site is navigated through the app, and enables custom styles for app and web versions.
It also add some useful style rules to the document:
The app-hide and app-exclusive classes provide simple ways to control the visibility of elements in the app version:
.app-hide: Hides certain elements in the app version of the site..app-exclusive: Displays certain elements only in the app version of the site.
Here’s an example of how to use these classes in your HTML:
<div class="app-hide">❌ Element not visible in app ❌</div>
<div class="app-exclusive">📱 Element only visible in app 📱</div>Define styles in your stylesheet as you would normally do, like this:
.elementClass {
color: blue; /* Default for web */
}
body.is-app .elementClass {
color: red; /* For app */
}In this example, text will appear blue on the web version but red in the app version.
2. Optional Parameters
The library supports optional settings to enhance its functionality:
- Logs: Enable or disable helper console logs.
- Predefined Stylesheets: Automatically hide common sections in the app version (e.g., footers, banners, popups).
Example of using optional parameters:
<script>
(function(){
styleTemplate({
hideSections: ["hide-footers", "hide-banners"],
logs: false
});
})();
</script>Available Predefined Stylesheets:
hide-footers: This hides the site's footerhide-wp-adminbar: Hides Wordpress adminbar, this usually shows after users sign in in a Wordpress sitehide-back-to-top: This hides some floating back to top arrows/buttonshide-popups-and-consents: This includes: cookie consent in bottom drawers, promotional popups, and enables overflow in the body, sometimes popups locks page scrollhide-banners: This hides some promotional bars / banners that are above the site's headerhide-fabs: This hides Floating buttons (a lot of them added with plugins, so we include some common plugin selectors), this also hide some floating captcha elements
By customizing the parameters, you can fine-tune the appearance of your app version with minimal effort.
3. Advanced Classes Injection
For developers, the library provides a powerful feature to inject CSS globally or selectively based on URL patterns using regular expressions. This allows precise control over styles for specific pages.
Example implementation:
<script src="https://cdn.jsdelivr.net/npm/@mobiloud/ml-css-injector@latest/dist/ml-css-injector.min.js"></script>
<script>
(function(){
addStyle({css: `a{color: red !important}`});
addStyle({css: `a{color: yellow !important}`, regex: /\/?param$/});
addStyle({css: `a{color: green !important}`, regex: /.*/, name: "Global Styles"});
addStyle({css: `a{color: green !important}`, regex: /.*/, name: "Global Styles", logs: true});
})();
</script>You can define styles and target specific pages by passing a regex pattern. Here are some examples of how to use the configuration options:
// Define styles as a string
let style = `
a {
color: green;
background-color: yellow;
}
.className {
font-size: 2rem;
}
`;
// Use regex to target specific pages
let regex = /.*\/login/;
// Name the style block (optional)
let name = "Login Styles";
// Enable logs for debugging (optional)
addStyle({css: style, regex: regex, name: name, logs: true});
// Apply global styles without regex
addStyle({css: `color: red !important`});css: The CSS rules as a string.regex: A regular expression to target specific pages.name: A name for the style block (optional).logs: Enable or disable logs for debugging (optional).
Device-Specific Methods
deviceData.os: Returns the current OS ("android","ios","windows","desktop").deviceData.isCanvas: Returnstrueorfalse.deviceData.isMobile: Returnstrueorfalse.
By combining these advanced features, you can achieve highly customized styling for specific scenarios.
Mixing Methods
The library allows you to combine the styleTemplate and addStyle methods for even greater flexibility. For example, you can use styleTemplate to apply predefined styles globally and then customize specific pages with addStyle:
<script>
(function(){
styleTemplate({hideSections: ["hide-footer"]});
// Custom styles applied in canvas/app only
if(deviceData.isCanvas){
addStyle({css: ".customClass{color: red}", regex: /.*login/});
addStyle({css: `a{color: yellow !important}`, regex: /\/?param$/});
}
})();
</script>This approach ensures a consistent base styling while allowing for precise page-level customizations.