Connect different CSS variables within a related context

Looking to incorporate Font Awesome 5.10.2 Duotone icons easily into any HTML element.

The icon element relies on HTML attributes that should correspond to a specific icon, with the mapping controlled by the CSS author.

<x pay></x> <!-- The value of the pay icon can be customized by the CSS author -->

Here is my current solution but I am considering...

Is it possible to minimize

x {
  position: relative; 
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  white-space: nowrap;
  font-family: var(--fa-5-d);
  font-weight: var(--fa-d);
  background: var(--x-background);
  line-height: 1em !important;
}
x::after { position: absolute; left: 0; bottom: 0; }
x::before { color: var(--fa-primary-color,   inherit); opacity: 1; opacity: var(--fa-primary-opacity,   1.0); }
x::after  { color: var(--fa-secondary-color, inherit);             opacity: var(--fa-secondary-opacity, 0.4); }

x:before { --fa-credit-card:   "\f09d"; }
x:after  { --fa-credit-card: "\10f09d"; }

<x pay></x>

this ↓

x[pay]:before,
x[pay]:after { content: var(--fa-credit-card); }

to this ↓ (eliminating x[pay]:before, x[pay]:after repetition)

x[pay] { --content: var(--fa-credit-card);

basically,

  • assign a CSS variable once to a parent with a value v
  • that splits into different child values v₁ and v₂ based on v?

?

csspseudo-elementcss-variables

Answer №1

One way to enhance convenience is by utilizing web components or custom elements:

<link  href='//cdn.blue/{fa-5.10.2}/css/all.css' rel=stylesheet>
<link  href='//cdn.blue/{fa+}/var.css' rel=stylesheet>
<link  href='//cdn.blue/{fa+}/x-i.css' rel=stylesheet>
<script src='//cdn.blue/<shin>/shin-element.js'></script>

<script>
class XI extends ShinElement {
  constructor() { 
    super(`<style></style>`);
    ShinElement.IPA(this, 'jsUpdate', { a: 'js-update', t: ShinElement.Number0 });
  }
  connectedCallback() { XI.css(this); }
  static css(t) {
    const c =   getComputedStyle(t);
    const i = c.getPropertyValue('--i').trim();
    const s = t._.QS("style");
          s.textContent = `:host:before, :host:after { content: var(${i}); }`;
  }
  static get observedAttributes() { return [ 'js-update' ]; }
  attributeChangedCallback(a, o, n) {
    switch (a) {
      case "js-update":
        const u =  this.jsUpdate;
        if (u > 0) this._jsu = setInterval(XI.css, u, this);
        else { clearInterval(this._jsu); delete this._jsu; }
        break;
    }
}
XI.define();
</script>

<style>x-i[pay] { --i: --fa-user-edit; }</style>

      <x-i pay js-update=200 id=x></x-i>

The use of js-update (HTML) and jsUpdate (JS) for real-time edits in CSS presents some challenges.

x.jsUpdate = 0; // to disable getComputedStyle updates

This leads to the question of whether there might be a more effective solution - either through pure CSS methods or the integration of web components.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to consolidate several font names under a single alias in CSS?

Is it possible to use a single alias for multiple font names in CSS? For example, if I have font-family: 'Font A', 'Font B', 'Font C', ..., sans-serif; Can I simplify this to just one name to refer to all those fonts, like t ...

htmlcssfonts

Tips on changing the background image when hovering over a list item and a link with CSS

I have been attempting to adjust an image that is nested within a link which is nested inside a list. My initial idea was to use the image as a background picture. The issue arises when I try to position the background picture correctly with respect to th ...

htmlcss

Each characterHas its own line

Is there a way to display all text in a div vertically, with one character per line and centered, without using a fixed width? I have achieved this layout by giving the div a fixed width of width: 7%; and using word-break: break-all; Would it be possible ...

htmlcssflexbox

Is it possible to place Angular Material components using code?

Currently, I'm in the process of creating a responsive Angular application. Is there any way to adjust the height and position of the <mat-sidenav-content></mat-sidenav-content> component in Angular Material programmatically without relyi ...

javascriptcssangulartypescript

The JavaScript program for the shopping list is experiencing issues with the formatting of list items

I have been working on developing a shopping list program using JavaScript. The program includes an input box and an "add item" button, which adds the text entered in the input field to an unordered list as a list item. Each list item also contains an imag ...

javascripthtmlcssimagehtml-lists

Implementing Content-Security-Policy with React and Material-UI v4 for secure styling requirements

Utilizing a React UI with material-ui version 4, the web server is embedded within a JVM application during Production. Following npm build for the UI, the bundle is deployed alongside the server side code. An essential requirement involves implementing C ...

cssreactjsmaterial-uicontent-security-policy

Tips for building a dynamic view using Angular

I am working on a project where I need to dynamically generate multiple horizontal lines using data from a JSON file, similar to the example in the image below. https://i.sstatic.net/MthcU.png Here is my attempt: https://i.sstatic.net/EEy4k.png Component. ...

javascriptcssangularhorizontal-line

There has been an unexpected transformation in the website design when using Chrome on large widescreen monitors

Last week, I updated the design of my website and tested it across various browsers and devices. It's a portfolio site built with Bootstrap, and everything looked good. However, this morning when I viewed my website on my widescreen monitor using Chro ...

htmlcsstwitter-bootstrapgoogle-chromewidescreen

Styling the first child element within a list using the li tag

<ul> <li class="bla">aaa</li> <li class="my_li">sss</li> <li class="my_li">ddd</li> <li class="my_li">fff</li> </ul> css: .my_li:first-child{ ...

htmlcss

How can we target every nth child element universally?

I am working with an HTML structure that has a specific layout, and I need to target all odd <span> elements globally without considering their parent elements. Is there a way to style 1, 3, 5, 7, 9 in red color? I attempted to use :nth-child(odd) b ...

htmlcsscss-selectors

Styling hover effects on links in Bootstrap 4 with underlines

In Bootstrap 4, the anchor tags have the text-decoration: underline; property added only on hover. Is there a pre-existing helper or utility class to remove this underline? I went ahead and created my own helper class in CSS to remove the underline, but ...

csstwitter-bootstrapbootstrap-4

Experiencing odd behavior with my Dash App when using CSS grid on it

Seeking assistance with my coding issue, I believe sharing my code from Github would be the most efficient way to address it. An exclusive branch named css_problem_branch has been created to showcase the problem at hand. To access the Github repository, p ...

pythoncssdashboardplotly-dash

Utilizing CSS Scroll-snap for Seamless Navigation

Attempting to create a basic carousel using scroll-snap, but encountering an issue where the carousel is randomly scrolling on load instead of starting with the first picture. See code snippet below. Any ideas on resolving this? .carousel { ...

htmlcss

I seem to have mistakenly duplicated some classes in my scss/css code

I need some assistance. I'm experiencing an issue where my SCSS/CSS classes are being repeated, causing my browser to slow down. My tech stack includes: ReactJS, Webpack, and a Sass structure with an Assets folder. https://i.sstatic.net/obmIJ.png ...

cssreactjswebpacksass

Could anyone provide assistance with creating responsive CSS styles for a website?

I am currently utilizing Drupal for my website. In my kickstart sub theme, which is a subtheme of omega, I have added a sitename and slogan. Additionally, I inserted a telephone number through the branding.tpl.php file. However, when I resize the window, t ...

cssdrupalresponsive-designthemesstylesheet

I have a dynamic form code that allows users to insert data by adding multiple inputs in a row. However, I would like to modify it so that the inputs are added in a column instead

I found this code online that allows users to add extra inputs, but it currently only creates new rows in the database. I would like these inputs to be inserted into different columns within the same row. How can I modify it to achieve this? I have alread ...

phphtmlcssmysql

How to keep a centered div in a lengthy box using Bootstrap

After successfully creating a simple web page with a header containing both an image and text, followed by three blocks of content below it, the final addition I need to make is another block of text beneath the existing three. This new block should be cen ...

htmlcsstwitter-bootstrapuser-experience

The area available for clicking does not align correctly with the visible display of the div element

Is it possible to create clickable, animating sprites without relying on Flash? I want the sprites to show a bubble popup when clicked or touched, and then dismiss when the screen is clicked again. However, I'm facing an issue where the clickable area ...

htmlcsswebkitmobile-safariandroid-browser

The Mystery of Blurriness: How CSS Transforms Can Cause Image Quality Loss

What causes an image to become blurry when rotated? I attempted to rotate an image 90 degrees, but the result is unexpectedly blurry. transform: rotate(90deg); This issue occurs in both Firefox and Chrome (other browsers have not been tested). For refe ...

cssimagecss-transforms

Retrieving current element in AngularJS using jQuery

I have 4 templates, each with mouse actions that trigger functions: ng-mouseover="enableDragging()" ng-mouseleave="disableDragging()" Within these functions, I update scope variables and would like to add a class using jQuery without passing any paramete ...

javascriptjquerycssangularjshover