Directory of RSS feeds
Statistics

RSS feeds in the directory: 2817

Added today: 0

Added yesterday: 0

Hi-Tech / Internet

Custom CSS attributes as the mechanism for passing data from JavaScript to CSS

Css-live - Severstal your world! 08.08.2019 at 11:22

Community that speaks the languages of HTML, CSS and JavaScript

Translation of the article Using Custom CSS attributes generated by JavaScript as a handover mechanism from the site medium.com for css-live.ru author Christian Heilman

Update: initially I've made it too easy that custom attributes do not support concatenation, but thanks to Sime Vidas, Brian Kardelo and Greg Withotu clear.

Innovations in CSS started to blur the boundaries between it and JavaScript. CSS static language responsible for determining colors and appearance, not for interactivity. Dimensions in percent, helped in some measure to adapt to the environment, but to respond to change was the prerogative of JavaScript.

In the old days, HTML was responsible for structure, CSS for appearance, and JavaScript for interactivity. Or, as I said in my book in 2006, if the website were a movie, it would be the HTML script, CSS camerawork and directorial work, and JavaScript special effects.

Today, CSS is capable of so much more. We have animations, transitions, calc() and much more flexible units like em, rem, vw, vh, and others. As well as interactivity with pseudo-selectors like hover and focus States of the interactive elements of buttons. You can even apply the hack checkboxes (approx. transl.: but you can no checkboxes ) and write a full game in pure CSS.

This is great! Enthusiasts CSS now probably have the patience and knowledge to animation or response to user action looked and behaved exactly as it should. CSS engines are responsible for good performance and don't kill the interactivity or the battery of the user device. Browser vendors can concentrate on optimizing the engine, but not to exceed the entire responsibility for smooth work of the developer.

But CSS capabilities are not limitless, and in some cases, without JavaScript not to manage. A frequent example is when it is necessary to reflect the current state of some actions in browser window, or react to something, what the CSS specifications are not provided.

to switch to JavaScript in this case, it seems to me some mechanical reflex, and for me it is more logical to find a way to interact with JavaScript and CSS. To read the value in JavaScript and do something to ensure that he saw CSS.

In the past the only way to do this was storing classes from parent and delete classes when triggered by certain conditions. But with custom properties ("CSS-variables") the interaction between JavaScript and CSS becomes much easier.

Custom properties allow you to set "variables" in CSS and use them later. For example:

::root {

--company-blue: #369;

}

h1 {

color: var( --company-blue);

}

Custom properties behave differently than CSS variables in preprocessors. They also support concatenation, but there are limitations.

Thank you to Sime Vidas, who showed a working demo on Twitter, and Brian Cardello reporting the discussion in the working group on CSS.

As explained by my colleague Greg Whitworth:

what About custom properties is wrong. The problem, which it seems you're talking about is the limitations of CSS in General. Although Shima has shown that concatenation is possible, but perhaps not in all scenarios where you really just need to bring the lines (eg. from “foo” calc(5+8) will turn \”foo\” calc(58), as it is invalid calc, these parts are also converted to strings, but with escaped quotes). All of the variables into tokens, so that the line or not – it all depends on how this value recognizes the tokenizer. If the ID has no syntax errors, but it does not coincide with anything known, for CSS, it is converted to a string. All that is passed to the JS is converted to a string. Here is a JSbin example where it can be clearly seen.

the easiest way to change your custom CSS properties to multiply them by some value using calc().

::root {

--startwidth: 200;

}

h1 {

width: (var( --startwidth) * 1px);

}

h2 {

width: (var( --startwidth) * 0.5 px);

}

Now, the custom properties can be defined in JavaScript and add them to any item, this is a great way to make the JavaScript read the value and the rest took over CSS. For example, if you want to know the scroll position on the page, you can read its event handler in JavaScript and update your custom CSS attribute:

window.addEventListener('scroll', (e) => {

document.body.style.setProperty(' --scrolly', window.scrollY);

});

CSS:

h1 {

position: fixed;

width: calc(var( --scrolly)*1px);

background: #339;

}

Can also try it out in this JSBin.

This is not a complete example, but I am glad that using JavaScript it is possible to go beyond available for CSS, and CSS can still be in charge and manage the interactivity.