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:
Conditional Statement Pseudo Class
Editing Attributes
Editing Text Content of Tags
Using attr() Function for more than editing content:; of Pseudo Elements
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.
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.
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.