Member Avatar for Elmo_loves_you

Hey everyone.

I haven't been on DaniWeb in a while.

.x-accordion-header {
	width: 100%;
	color: #ffffff;
	background-image: -webkit-gradient(linear,0% 0,0% 100%,color-stop(0%,#[B]96A9C0[/B]),color-stop(2%,#[B]5A7596[/B]),color-stop(100%,#[B]394B5F[/B]));
}

Is it possible to include a 'variable' or 'property' in css?

The reason why I am asking is because I want to change the background colour of the css header for multiple object types.

Say I checked for the type either via PHP or Javascript with a case statement or an IF ELSE ... I would want to be able to assign a certain colour based on the object type to the headers css.


Any hints or tips or suggestions would be appreciated.


Many Thanks
:-/

  • 2 Contributors
  • 2 Replies
  • 102 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Elmo_loves_you

Dani AI

Generated

Back in 2011 the correct takeaway was that native CSS had no variables. Since then there are three practical ways to treat colors as "placeholders" so you can change header colours without repeating every rule. suggestion to emit per-type styles is still valid as a simple fallback; the newer options reduce duplication and let you change values at runtime.

A modern, flexible approach is CSS custom properties (variables). Define the stops once and reference them in your gradient with var(); you can scope variables to :root (global) or to the element so each header can override them:

:root {
  --hdr-start: #a8c0ff;
  --hdr-mid:   #6b8bd6;
  --hdr-end:   #345a9a;
}

.x-accordion-header {
  background-image: linear-gradient(to bottom, var(--hdr-start), var(--hdr-mid) 2%, var(--hdr-end));
  color: #fff;
}

To change colours at runtime you can set those properties on the element (inline or with JavaScript). Setting a custom property in JS is cheap and only repaints affected areas:

el.style.setProperty('--hdr-start', '#ff8a8a');

Alternatives: use a CSS preprocessor (Sass/LESS) if your colours are known at build time, or let server-side code output a small style block (or class) if the type is decided in PHP. Be aware that Internet Explorer does not support CSS custom properties, so provide fallbacks (use the second parameter of var(--name, fallback) or generate static rules for legacy browsers).

See the MDN guide on Using CSS custom properties for full syntax and examples (MDN Using CSS custom properties) and check current support at Can I use: CSS variables.

Recommended Answers

All 2 Replies

Member Avatar for floatingDivs

No, you can't use variables or placeholders in CSS. Why would you even want to, though?

Using PHP, it's as simple as assigning a second class (.green for green background, .blue for blue background, etc.) and you should be covered.

Member Avatar for Elmo_loves_you

thanks for your reply

I'm very new to php, so I automatically started trying to think of a solution in a syntax I was familiar with (sort of - I have a lot to learn)

I was thinking maybe about using javascript 'prototype' to overwrite the css style applied with a new one based on a certain type ...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.