How can we extract CSS values from dynamic HTML attributes or classes to steer clear of inline styling?

Question

How can we extract CSS values from dynamic HTML attributes or classes to steer clear of inline styling?

It is common knowledge that inline styles are considered bad practice and may not be compatible with certain security policies, such as the Content Security Policy.

The ideal goal is to achieve this without relying on inline styles:

<?php
$spacer_height = 390; // a dynamic value obtained from user input
?>
<div class="spacer" style="height:<?php echo $spacer_height; ?>"></div>

This is what is desired:

HTML:

<?php
$spacer_height = 390; // a dynamic value from user input
?>
<div class="spacer spacerheight-<?php echo $spacer_height; ?>" data-height="<?php echo $spacer_height; ?>"></div>

External Stylesheet:

.spacer {
  height: spacer_height + "px"; // placeholder code for illustration
}

Is there a way to accomplish this using only CSS, without resorting to JavaScript or polyfills?

I came across a similar question from 5 years ago: CSS values using HTML5 data attribute

However, I am curious if there have been any advancements since then or if there exists a CSS-only solution that does not rely on attributes. Even a solution specifically tailored for handling integers would be helpful.

Edit: In case no alternative solution is available, a functional polyfill suggestion would also be appreciated.

html css attributes

Answer 1

Answer №1

If achieving the desired result using CSS alone is not yet possible (as the attr() function currently only returns a string value), here is a basic script that can replicate the functionality of attr(), by parsing the data and dynamically setting it using cssText.

Feel free to let me know if this meets your requirements.

window.addEventListener("load", function() {
    var mb = isMobile();
    var el = document.querySelectorAll('[data-css]');
    for (i = 0; i < el.length; i++) {
        var what = el[i].getAttribute('data-css');
        if (what) {
            what = what.split(',');
            el[i].style.cssText = what[0] + ': ' + ((mb) ? what[2] : what[1]) + 'px';
        }
    }
});

function isMobile() {
  //function that checks if user is on mobile etc.
  return false;  // returning false for this demo
}

html, body {
  margin: 0;
}

div {
    background-color: lightgreen;
    padding: 10px 0;
    height: auto;
    box-sizing: border-box;
}

div ~ div {
    margin-top: 10px;
}

<div data-css="height,60,30"></div>
<div></div>
<div></div>
<div data-css="height,60,30"></div>
<div></div>

Alternatively, you could consider implementing a server-side solution where you generate the necessary CSS rule and class, inserting them into the CSS file and markup respectively before sending them to the client.

Answer 2

If achieving the desired result using CSS alone is not yet possible (as the attr() function currently only returns a string value), here is a basic script that can replicate the functionality of attr(), by parsing the data and dynamically setting it using cssText.

Feel free to let me know if this meets your requirements.

window.addEventListener("load", function() {
    var mb = isMobile();
    var el = document.querySelectorAll('[data-css]');
    for (i = 0; i < el.length; i++) {
        var what = el[i].getAttribute('data-css');
        if (what) {
            what = what.split(',');
            el[i].style.cssText = what[0] + ': ' + ((mb) ? what[2] : what[1]) + 'px';
        }
    }
});

function isMobile() {
  //function that checks if user is on mobile etc.
  return false;  // returning false for this demo
}

html, body {
  margin: 0;
}

div {
    background-color: lightgreen;
    padding: 10px 0;
    height: auto;
    box-sizing: border-box;
}

div ~ div {
    margin-top: 10px;
}

<div data-css="height,60,30"></div>
<div></div>
<div></div>
<div data-css="height,60,30"></div>
<div></div>

Alternatively, you could consider implementing a server-side solution where you generate the necessary CSS rule and class, inserting them into the CSS file and markup respectively before sending them to the client.

Answer 3

Answer №2

It may be beneficial to move the dynamic component from being directly embedded into the HTML code and instead include it in a separate <style> section.

<style>
.spacer {
    height:<?php echo $spacer_height; ?>
}
</style>
<?php
$spacer_height = 390; // this value can change based on user input
?>
<div class="spacer"></div>

Answer 4

It may be beneficial to move the dynamic component from being directly embedded into the HTML code and instead include it in a separate <style> section.

<style>
.spacer {
    height:<?php echo $spacer_height; ?>
}
</style>
<?php
$spacer_height = 390; // this value can change based on user input
?>
<div class="spacer"></div>

How can we extract CSS values from dynamic HTML attributes or classes to steer clear of inline styling?

Answer №1

Answer №2

Similar questions

How can I make the Box div bigger or smaller?

Access menu options by hovering over the image

Several radial progress charts in JavaScript

The script is not functioning properly on the subpage

Is there a way to retrieve all jQuery-portlet data from a webpage?

Please enter the time in minutes and seconds only

I am looking to loop through an array nested within a JSON object and display it in a table column using

Is there a way to adjust the size of the canvas element in HTML without compromising quality or resorting to zooming?

JavaScript takes the spotlight before CSS

The page action icon is visible exclusively on the extension's page

Is it possible to swap out one div for another div from an external HTML page?

php stop items from being loaded and instead use a trigger to load them

PHP causing redirection problems on the list page

The symbols ♥ and ♦ in HTML are displaying as black on Android devices, despite being styled as red in the CSS

Utilizing a wysiwyg text editor in conjunction with Angular 2

What is the best way to center an absolutely positioned div within Internet Explorer 7?

Tips for verifying the presence of a value within an array using checkboxes

Unable to adjust the canvas size or scale using Fabric.js

Acquiring the content between the start of a paragraph and a designated hyperlink with the help of jQuery

I've been attempting to adjust the currentTime of an HTML5 video element within a React JS environment, but for some reason it keeps reverting