CSS

667 readers

2 users here now

founded 2 years ago

MODERATORS

Ategon@programming.dev

How to append a value to a property that takes multiple values? (lemmy.dbzer0.com)

submitted 1 month ago by veniasilente@lemmy.dbzer0.com to c/css@programming.dev

6 comments fedilink hide all child comments

The background:

Some CSS properties such as background-image, text-shadow etc... take multiple values. But if my understanding is correct, the multiple values must come from the same statement. Is there any way to make it such as eg.: a CSS class appends a value to a property that already has a value?

/* CSS */

div.gradient1 {
	background: linear-gradient(60deg, red 0%, orange 50%, red 100%);
}

div.gradient2 {
	background: radial-gradient(at center, blue 10%, teal 50%, transparent 50%);
}

This fails (applies only one of the two gradients):

<div class="gradient1 gradient2"> ...

Can I modify gradient2 somehow to make it happen? Or is something like this not supported in CSS?

div.gradient2 {
	background: currentBackground, radial-gradient(at center, blue 10%, teal 50%, transparent 50%);
}

you are viewing a single comment's thread
view the rest of the comments

[–] pinchy@lemmy.world 2 points 1 month ago* (last edited 1 month ago) (1 children)

You can compose layering backgrounds in the way you described by using using custom properties:

@property --gradient-1 {
  syntax: "<image> | none";
  inherits: false;
  initial-value: none;
}

@property --gradient-2 {
  syntax: "<image> | none";
  inherits: false;
  initial-value: none;
}

.gradient-1, .gradient-2 {
  background-image: var(--gradient-2), var(--gradient-1);
}

.gradient-1 {
 --gradient-1: linear-gradient(60deg, red 0%, orange 50%, red 100%);
}

.gradient-2 {
  --gradient-2: radial-gradient(at center, blue 10%, teal 50%, transparent 50%);
}

Using the @property syntax with ’inherits: false‘ prevents that the parents value for this property get inherited, so that arbitrary nesting is possible.

[–] veniasilente@lemmy.dbzer0.com 1 points 1 month ago (2 children)

Thanks! Works like a charm. Didn't even know that inherits: false was an option.

Do you happen to know if there is any proposal to make it more native? For example with a syntax like background-image: +, radial-gradient(....

[–] pinchy@lemmy.world 2 points 4 weeks ago

There is no such proposal I’m aware of. @function will enable a finite combination in a more convenient way and maybe the ident() function can help building comma separated values in new ways. In general using classes for this is tricky though because the position of each value in the list matters (if you want something like layer-1 = gradient-blue, layer-2 = gradient-red, …). Each class would need to represent a tuple (index, image) so you would need every permutation ( layer-1-gradient-blue, layer-2-gradient-blue, …)