CSS Injection Tool

Library for customizing your site with mobile-only styles

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-app class 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 </head> 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 <body> 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 footer
hide-wp-adminbar: Hides Wordpress adminbar, this usually shows after users sign in in a Wordpress site
hide-back-to-top: This hides some floating back to top arrows/buttons
hide-popups-and-consents: This includes: cookie consent in bottom drawers, promotional popups, and enables overflow in the body, sometimes popups locks page scroll
hide-banners: This hides some promotional bars / banners that are above the site's header
hide-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: Returns true or false.
deviceData.isMobile: Returns true or false.

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.

‍