### CSS Custom Properties with Pseudo-Elements (CSS)
Source: https://github.com/nuxodin/ie11customproperties/blob/master/demo.html
This example shows how to use CSS custom properties with pseudo-elements, specifically the ::before pseudo-element, to insert content dynamically.
```CSS
#before > h2 { --before:' 👉 '; }
#before > h2::before { content:var(--before); }
```
--------------------------------
### CSS: Media Query Support for Custom Properties
Source: https://context7.com/nuxodin/ie11customproperties/llms.txt
Demonstrates how custom properties can be used within media queries to create responsive styles. The example shows how `--responsive-padding` and `--responsive-font` change based on screen width.
```css
:root {
--responsive-padding: 10px;
--responsive-font: 14px;
}
@media (min-width: 768px) {
:root {
--responsive-padding: 20px;
--responsive-font: 16px;
}
}
@media (min-width: 1200px) {
:root {
--responsive-padding: 30px;
--responsive-font: 18px;
}
}
.container {
padding: var(--responsive-padding);
font-size: var(--responsive-font);
}
```
--------------------------------
### Houdini API Registration Example
Source: https://github.com/nuxodin/ie11customproperties/blob/master/README.md
Illustrates the use of Houdini's `CSS.registerProperty` API, which the polyfill supports. This allows developers to define custom properties directly in JavaScript, specifying their syntax, inheritance behavior, and initial values, although animations might not be supported.
```javascript
CSS.registerProperty({
name:'--red',
inherit:false,
initialValue:'#e33'
})
```
--------------------------------
### IE11 CSS Custom Properties Polyfill Integration and Theming Example (HTML, CSS, JavaScript)
Source: https://context7.com/nuxodin/ie11customproperties/llms.txt
This HTML file demonstrates a complete dynamic theming system for IE11. It conditionally loads the ie11CustomProperties polyfill script for IE11 browsers. The CSS defines theme variables, and the JavaScript allows for programmatic theme changes by updating these CSS variables.
```html
');
Theme System Example
```
--------------------------------
### CSS Custom Properties Transformation Example
Source: https://github.com/nuxodin/ie11customproperties/blob/master/README.md
Demonstrates how the polyfill rewrites raw CSS containing custom properties. It shows the transformation of standard CSS with variables like `--myColor` into a format IE11 can process, using prefixed properties (`-ie-myColor`) and a new selector (`-ieHasVar-color`) for elements that use variables.
```css
/* Original CSS */
header { --myColor:red; }
main { --myColor:green; }
li { color:var(--myColor); }
/* Rewritten CSS by Polyfill */
header { -ie-myColor:red; }
main { -ie-myColor:green; }
li { -ieHasVar-color:var(-ie-myColor); }
```
--------------------------------
### HTML/CSS: SVG Support with Custom Properties
Source: https://context7.com/nuxodin/ie11customproperties/llms.txt
Demonstrates the application of CSS custom properties to SVG elements. The example shows how to set SVG properties like `fill` using custom properties, and how these properties can be dynamically changed, even on hover.
```css
```
--------------------------------
### JavaScript Integration: Set and Get CSS Properties
Source: https://github.com/nuxodin/ie11customproperties/blob/master/README.md
Demonstrates the JavaScript API provided by the polyfill for interacting with CSS Custom Properties. It shows how to use `style.setProperty` to define a custom property's value and `style.getPropertyValue` to retrieve it, mirroring the native CSS Properties and Values API.
```javascript
// set custom property
style.setProperty('--x','y')
// get custom property
style.getPropertyValue('--x')
```
--------------------------------
### JavaScript Example: Get Computed Custom Property Value
Source: https://github.com/nuxodin/ie11customproperties/blob/master/README.md
Illustrates how to retrieve the computed value of a CSS custom property using JavaScript after the polyfill has been applied. The `getPropertyValue` method is extended by the polyfill to correctly handle and return the value of custom properties, enabling dynamic manipulation and rendering.
```javascript
querySelectorAll('li').forEach(function(){
var color = getComputedStyle(this).getPropertyValue('--myColor');
// getPropertyValue is extended to handle custom properties
// draw_the_Element()
})
```
--------------------------------
### HTML: Polyfill Redraw on Resize
Source: https://context7.com/nuxodin/ie11customproperties/llms.txt
This HTML snippet is used in conjunction with the media query example. It shows a container element that will automatically adjust its styles (padding and font size) as the window is resized, thanks to the polyfill's redraw functionality.
```html
Content adjusts based on screen size
```
--------------------------------
### Test Mixed Fallback with URL
Source: https://github.com/nuxodin/ie11customproperties/blob/master/tests/tests.html
An advanced fallback example that includes various values like `repeat-y`, nested variables, and a `url()` function. This tests the parser's ability to handle complex fallback scenarios.
```css
.fallback-var-mixed {
background:var(--notdefined, repeat-y var(--undefined, var(--green)) fixed url(x.y));
}
```
--------------------------------
### CSS: !important Flag Support
Source: https://context7.com/nuxodin/ie11customproperties/llms.txt
Illustrates how the `!important` flag is handled for both setting and getting custom properties in CSS. It shows examples of `!important` on setters and getters, and how they affect style specificity.
```css
/* Important on setter - highest priority */
.element {
--color: red !important;
--color: blue; /* Ignored */
}
/* Important on getter */
.high-priority {
background-color: var(--color) !important;
}
#specific-id {
background-color: white; /* Won't override !important getter */
}
```
--------------------------------
### Test setProperty on Own Element
Source: https://github.com/nuxodin/ie11customproperties/blob/master/tests/tests.html
This example tests the ability to set a CSS custom property on an element using JavaScript's `setProperty` method. This is crucial for dynamically updating styles based on application logic.
```css
```
--------------------------------
### Handling `!important` with CSS Custom Properties (CSS)
Source: https://github.com/nuxodin/ie11customproperties/blob/master/demo.html
This example illustrates how the `!important` flag interacts with CSS custom properties. It shows that `!important` can be used on both setting and getting custom properties, overriding other declarations.
```CSS
body { --important:var(--theme-color) !important; --important:white; }
.important:hover { background-color:var(--important) !important; }
#important { background-color:white; }
```
```CSS
/* important on setters: */
body {
--important:var(--theme-color) !important;
--important:white;
}
/* important on gettses: */
.important:hover {
background-color:var(--important) !important;
}
#important {
background-color:white;
}
```
--------------------------------
### Styling SVG with CSS Custom Properties (CSS)
Source: https://github.com/nuxodin/ie11customproperties/blob/master/demo.html
This example shows how to control the fill color of an SVG element using CSS custom properties. It also includes a hover effect to change the custom property value.
```CSS
#svg svg { fill:var(--theme-color); }
#svg:hover svg { --theme-color:black; }
```
--------------------------------
### IE11 Custom Properties CSS Prefixing
Source: https://github.com/nuxodin/ie11customproperties/blob/master/README.md
Explains the internal mechanism of the polyfill, where it replaces custom properties starting with double dashes (e.g., `--foo`) with a single dash prefixed version (e.g., `-ie-foo`) to work around IE11's limitations. This allows IE11 to parse and manage these properties.
```css
.myEl {-ie-test:'aaa'} // only one dash allowed! '-'
```
--------------------------------
### JavaScript Functions for Setting and Getting CSS Custom Properties (JavaScript)
Source: https://github.com/nuxodin/ie11customproperties/blob/master/demo.html
Provides two JavaScript functions: `setThemeColor` to dynamically change a CSS custom property on the body, and `getThemeColor` to retrieve the computed value of a custom property from an element.
```JavaScript
onclick="setThemeColor('red')"
onclick="setThemeColor('orange')"
onclick="getThemeColor(this)"
```
```JavaScript
function setThemeColor(color) { document.body.style.setProperty('--theme-color', color); }
function getThemeColor(element) { const computed = getComputedStyle(element); const color = computed.getPropertyValue('--theme-color'); alert(color); }
```
--------------------------------
### JavaScript: Get Custom Property Value
Source: https://context7.com/nuxodin/ie11customproperties/llms.txt
Demonstrates how to retrieve the computed value of a CSS custom property from an element's styles using `getComputedStyle` and `getPropertyValue`. It also shows how to check if a custom property is defined on an element.
```javascript
// Get computed custom property value
const element = document.querySelector('.card');
const computedStyle = getComputedStyle(element);
const themeColor = computedStyle.getPropertyValue('--theme-color');
console.log('Theme color:', themeColor); // "orange"
// Get inherited property from parent
const child = document.querySelector('.nested-element');
const inheritedColor = getComputedStyle(child).getPropertyValue('--parent-color');
// Check if property is defined
function hasCustomProperty(element, propertyName) {
const value = getComputedStyle(element).getPropertyValue(propertyName);
return value !== '';
}
if (hasCustomProperty(element, '--theme-color')) {
console.log('Property is defined');
}
```
--------------------------------
### JavaScript Integration: Get Computed Style Property Value
Source: https://github.com/nuxodin/ie11customproperties/blob/master/README.md
Shows how to retrieve the computed value of an inherited custom property using `getComputedStyle`. This method is enhanced by the polyfill to correctly parse and return values of custom properties that might be inherited from parent elements.
```javascript
getComputedStyle(el).getPropertyValue('--inherited')
```
--------------------------------
### CSS Specificity: Non root CP-getter after overwrites same selector before
Source: https://github.com/nuxodin/ie11customproperties/blob/master/tests/tests.html
This CSS example showcases specificity when a custom property is declared after an initial one within the same selector. It confirms that the latter declaration takes precedence, ensuring the most recent valid custom property value is applied.
```css
.specificity_cp_after {
background-color:red;
}
.specificity_cp_after {
background-color:var(--green);
}
```
--------------------------------
### CSS Custom Property with !important Getter
Source: https://github.com/nuxodin/ie11customproperties/blob/master/tests/tests.html
Applies a background color using the custom property '--green' with the '!important' flag. This ensures that the style takes precedence over other declarations with the same specificity but without '!important'. The example also shows a conflicting ID selector.
```css
.important-getter {
background-color:var(--green) !important;
}
#important-getter {
background-color:var(--red);
}
```
--------------------------------
### CSS Specificity: Custom Property Getter Order
Source: https://github.com/nuxodin/ie11customproperties/blob/master/tests/tests.html
This example implies that the order of CSS rules with the same selector specificity matters. A custom property getter defined earlier in the stylesheet might not overwrite a similar declaration made later if the selectors are identical, demonstrating the cascading nature of CSS.
```css
/* Assuming a previous rule with the same selector exists */
.some-selector {
/* This rule might be affected by the order */
}
```
--------------------------------
### CSS Specificity: Non-root CP-getter after overwrites same selector before
Source: https://github.com/nuxodin/ie11customproperties/blob/master/tests/tests.html
This CSS example illustrates that a custom property declared later within the same selector will overwrite an earlier one, even for non-root elements. It confirms the standard cascade behavior applies regardless of custom property usage.
```css
.specificity_cp_after_non_root {
background-color:red;
}
.specificity_cp_after_non_root {
background-color:var(--body-green);
}
```
--------------------------------
### DOM Mutation: Class Change on Body Triggers New Setter
Source: https://github.com/nuxodin/ie11customproperties/blob/master/tests/tests.html
Similar to the previous example, this adds the 'newTarget' class to the body after a delay. It demonstrates how changes to the body's classes can trigger different CSS rules, specifically affecting the '--dom_new_setter' custom property and its usage in styling.
```javascript
setTimeout(function(){
document.body.classList.add('newTarget');
},500)
```
--------------------------------
### Basic CSS Custom Property Usage (CSS)
Source: https://github.com/nuxodin/ie11customproperties/blob/master/demo.html
Demonstrates the basic declaration and usage of CSS custom properties. A theme color is defined and then applied to various elements.
```CSS
html { --theme-color:orange; }
body { display:flex; flex-wrap:wrap; }
body > * { max-width:500px; margin:2rem; padding:2rem; overflow:auto; border:2px solid var(--theme-color); }
h2 { border-bottom:2px solid var(--theme-color); }
a { color:var(--theme-color); }
button { background-color:var(--theme-color); }
pre { color:#fff; background-color:var(--theme-color); font-size:13px; padding:1em; overflow:auto; }
```
--------------------------------
### CSS Inheritance Keywords with ie11customproperties Polyfill
Source: https://context7.com/nuxodin/ie11customproperties/llms.txt
Illustrates the usage of CSS inheritance keywords (inherit, initial, unset, revert) with custom properties. The polyfill correctly interprets these keywords, allowing for more flexible CSS variable management and resets.
```css
.parent {
--spacing: 20px;
--color: blue;
}
.child {
/* Explicitly inherit from parent */
--spacing: inherit;
padding: var(--spacing);
}
.reset {
/* Reset to initial value (from CSS.registerProperty or empty) */
--color: initial;
color: var(--color);
}
.unset-example {
/* Acts as inherit if inheritable, initial otherwise */
--spacing: unset;
}
```
--------------------------------
### CSS Custom Properties with Pseudo-classes (CSS)
Source: https://github.com/nuxodin/ie11customproperties/blob/master/demo.html
Shows how to use CSS custom properties in conjunction with pseudo-classes like :hover, :target, and :focus. This allows dynamic styling based on user interaction or element state.
```CSS
#pseudoClasses:hover .hasHover, #pseudoClasses:target .hasTarget, #pseudoClasses:focus .hasFocus { background:var(--theme-color); }
```
--------------------------------
### Handle Dynamic Content with ie11customproperties Polyfill
Source: https://context7.com/nuxodin/ie11customproperties/llms.txt
Demonstrates how the ie11customproperties polyfill automatically processes dynamically added HTML elements and updates their styles when custom properties change. No special initialization is required for dynamic content.
```html
```
--------------------------------
### CSS: Calc() and Nested Functions with Custom Properties
Source: https://context7.com/nuxodin/ie11customproperties/llms.txt
Shows how CSS custom properties can be combined with `calc()` and other functions to create responsive and dynamic layouts. This includes calculations for font sizes, padding, margins, and element widths.
```css
.responsive-element {
--base-size: 16px;
--multiplier: 2;
/* Nested calc with custom properties */
font-size: calc(var(--base-size) * var(--multiplier));
padding: calc(var(--base-size) / 2);
margin: calc(var(--base-size) * 1.5);
}
.grid-item {
--column-width: 100px;
--gap: 10px;
width: calc(var(--column-width) - var(--gap));
max-width: calc(100% - var(--gap) * 2);
}
```
--------------------------------
### Responsive Design with CSS Media Queries and Custom Properties (CSS)
Source: https://github.com/nuxodin/ie11customproperties/blob/master/demo.html
This code demonstrates using CSS media queries to apply styles based on viewport width. Custom properties are used to set the background color, which changes at different screen sizes.
```CSS
@media (min-width: 400px ) { .min400 { background:var(--theme-color); } }
@media (min-width: 800px ) { .min800 { background:var(--theme-color); } }
@media (min-width: 1200px) { .min1200 { background:var(--theme-color); } }
@media (min-width: 1600px) { .min1600 { background:var(--theme-color); } }
@media (min-width: 2000px) { .min2000 { background:var(--theme-color); } }
@media (min-width: 2400px) { .min2400 { background:var(--theme-color); } }
```
--------------------------------
### CSS: Using Registered Custom Properties
Source: https://context7.com/nuxodin/ie11customproperties/llms.txt
Shows how registered custom properties are used within CSS rules. It demonstrates the effect of `inherits` and `initialValue` properties on how custom properties are applied and inherited by child elements.
```css
/* Use registered property with initial value */
.box {
border: var(--border-width) solid black; /* Uses 2px as initial */
}
/* Child won't inherit non-inheriting property */
.parent {
--border-width: 10px;
}
.parent .child {
border: var(--border-width) solid red; /* Uses 2px, not 10px */
}
```
--------------------------------
### Dynamically Add/Load Stylesheets with ie11customproperties Polyfill
Source: https://context7.com/nuxodin/ie11customproperties/llms.txt
Shows how to add new stylesheets dynamically, either inline or by loading external files, and have the ie11customproperties polyfill process them. The polyfill automatically detects and applies custom properties from these new stylesheets.
```javascript
// Create and inject new stylesheet with custom properties
function addDynamicTheme() {
const style = document.createElement('style');
style.innerHTML = " \
:root {\n --dynamic-primary: #" + Math.floor(Math.random()*16777215).toString(16) + ";\n }\n .themed-element {\n background: var(--dynamic-primary);\n }\n ";
document.head.appendChild(style);
// Polyfill automatically processes the new stylesheet
}
// Load external stylesheet
function loadTheme(url) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
document.head.appendChild(link);
// Polyfill watches for new link elements
}
```
--------------------------------
### CSS Custom Properties with Pseudo-Classes
Source: https://context7.com/nuxodin/ie11customproperties/llms.txt
Shows how custom properties can be used with pseudo-classes like :hover, :focus, :target, and :active. This allows for dynamic styling based on user interaction or element state, with the polyfill correctly applying these changes.
```css
.interactive {
--bg: white;
--text: black;
background-color: var(--bg);
color: var(--text);
}
.interactive:hover {
--bg: var(--theme-color);
--text: white;
}
.interactive:focus {
--bg: darkblue;
}
#section:target {
--highlight: yellow;
background: var(--highlight);
}
```
--------------------------------
### CSS.registerProperty() for Defining Custom Properties (JavaScript)
Source: https://github.com/nuxodin/ie11customproperties/blob/master/demo.html
Demonstrates the use of `CSS.registerProperty()` to define custom properties with specific types, inheritance, and initial values. This is useful for better control and browser compatibility.
```JavaScript
CSS.registerProperty({
name:'--red-border',
inherits:false,
initialValue:'5px solid red',
})
.initialValue { border:var(--red-border); }
.parent { --red-border:5px dashed red; border:var(--red-border); }
.child { border:var(--red-border); }
```
--------------------------------
### JavaScript: IE11 Custom Properties Initialization
Source: https://github.com/nuxodin/ie11customproperties/blob/master/tests/tests.html
This JavaScript code checks if the browser supports custom properties via `msMatchesSelector`. If not an IE11 environment, it alerts the user. It then iterates through all `
` elements, extracting their HTML content (assumed CSS) and appending it as a `