[Proposal] Minor but Useful CSS Features

CSS
1

I have a proposal for some minor tweaks in CSS that fixes problems that don’t come up often, but are really obnoxious when they do.

The attr() tag can be useful in some situations. Example: a::after {content:"(" attr(href) ")";font-style:oblique;} This displays the content of the href attribute in parenthesis directly after the content of the anchor.

However, there is no way (at least to my knowledge) to get the content of an attribute from the parent of an element. Let’s say that I want the attr() function to return the value of the attribute of the <div> element.

<style>p div span::after {content:attr(attribute) "";}</style>
<p text-data-thing=" world!"><div attribute=" there!"><span>Hello,</span></div></p>

Nothing happens because it attempted to find the value of an attribute that doesn’t exist. (span[attribute]) I propose this syntax as a solution: div span::after {content:attr($, attribute) "";} And if I want to get the value of the <p> tag’s text-data-thing attribute: div span::after {content:attr($$, text-data-thing) "";}

Here are 4 other minor additions:

  1. Conditional Statement Pseudo Class
  2. Editing Attributes
  3. Editing Text Content of Tags
  4. Using attr() Function for more than editing content:; of Pseudo Elements
<input type="text" id="input" />
<div id="has3">Contains String "3"</div>
<textarea id="txt"></textarea>
<span id="changeColor" bg="lime"></span>

CSS code:

#has3:if(not #input[value*="3"] exists) {color:red;}
#has3:if(#input[value*="3"] exists) {color:green;}
#changeColor {content:property-value(#has3, color) "";}
#changeColor {background-color:attr(bg);}
@attribute-content #txt, "value" {content:attr(#input, value) "";}

What do you think should be in CSS or what would you change/add to my ideas?

2

I get the feeling this is the same reason we don’t have a parent selector. CSS works down the tree branches, it isn’t meant for a branch to work its way back up.

Editing the DOM is a JavaScript function. CSS is about style, not modifying the DOM. The CSS creates a CSSOM which is combined with the DOM to create the Render Tree. Having these capabilities makes the process extremely more complex. Probably will never happen for these three points.

Possibly. But making changes like where attr can be used should be assessed on a case-by-case basis with solid real-world use-cases where it improves styling.

Overall, I think you’re asking for CSS to do things it isn’t meant to do. Which if implemented would complicate the rendering flow to a pretty good degree. I also don’t see where we currently aren’t able to work around these issues with JavaScript or with well structured markup and good CSS if having some of these affects as CSS-only are that important to your application.

3

I see where you are coming at.

4

I think that a depth property would be cool. And a vertex-radius would also be useful for rounded 3d shapes. Imagine all of the wonky 3d text and image effects people would make.

5 
div.sphere {width:50px;height:50px;depth:50px;vertex-radius:50%;}

True spheres are possible with this if it becomes a reality.

6

For each specific feature you have an idea for, post a single discussion thread post. This keeps conversation for various ideas in their own space for easier conversation and discussion.

Thank you.

1 Like
7

https://drafts.csswg.org/css-values-4/#attr-notation

#changeColor {background-color: attr(bg color);}

In other words, always check the latest drafts for whether they already cover your idea. This is actually an old one.

8

This particular case can be already resolved in CSS using named strings:

https://www.w3.org/TR/css-content-3/#named-strings

AFAIK browsers are not implementing this, but there is support for this in several non-browser CSS implementations.

			Jirka