Features ✨
CSS Injector features:
- Inject CSS in your site globally selectively for your pages with regex
- os method available: its a function that can be called to get the current browser OS, useful for triggering external functions'. It returns a string containing "android" | "ios" | "windows" | "desktop"
- isMobile, isCanvas exposed for filtering
- Code written in Typescript and minified/bundled with Vite
How to use 📖
CSS Injector can be used importing the JS code via CDN
With CDN 🚀
<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>
Configuration options ⚙️
// accepts any styles as a string
let style = `
a{
color: green;
background-color: yellow
}
.className {
font-size: 2rem
}
`
// accepts regex enclosed within slashes
let regex = /.*/
// accepts string
let name = "Style name"
//boolean --> Prints logs in console for debugging
addStyle({css: string, regex: string, name: string, logs: boolean});
addStyle({css: `color: red !important`}) // if no regex passed, the styles applies to every page
Recipes🍳
Add multiple styles
// accepts any styles as a string
let styles = [
{
css: `
a{
color: green;
background-color: yellow
}
`,
regex: /.*/,
name: "Global Styles"
},
{
css: `
.cart{
color: green;
background-color: yellow
}
`,
regex: /.*\/cart/,
name: "Cart page"
},
{
css: "div.login{display: none}",
regex: /.*\/login/,
name: "Login page"
}
]
// accepts regex enclosed within slashes
styles.forEach(e => {
addStyle({
css: e.css,
regex: e.regex,
name: e.name,
logs: true
})
} )
Methods 💡
deviceData.os // returns current os "android" | "ios" | "windows" | "desktop"
deviceData.isCanvas // returns true or false
deviceData.isMobile // returns true or false
Testing Widgets 🧪
