i have a blog where i wanted to create a subsite listing my fav apps. for code consistency and for not confusing between existing html "normal" code describing website i made my own "subhtml" just for app cards. for now best i did to this code was to display texted source of image instead of image. all css i tried already: content: attr(data-src url)
, tried also attr both with url parameter and not, inside var()
and not, also background-image: attr(data-src url)
, all max-width
, max-height
, width
, height
with both 100%
and auto
properties, attr
value in root variable (this gives me text output of image i said above), tried also with ::before
thing but also gives nothing special...
current not yet working code:
:root{ --icon: attr(data-src); } app-icon::before{ display: inline-block; content: var(--icon); }
<app-box><app-title>app name</app-title><app-icon data-src="https://live.staticflickr.com/2552/3794648454_cf0c2a228b_b.jpg"></app-icon></app-box>
few additional notes:
inline-block
and im using itscreenshot of current bug:
this blog is under: https://hacknorris.neocities.org/app-store.html if someone would to test this bugg-css by themselves
so anyone knows how to display this image from custom tag?
The apparent problem of your code is setting the variable on the root-element. The root does not have the attribute "data-src", only the app-icon has. So you are looking for something like this:
app-icon {
--icon: attr(data-src);
}
app-icon::before {
display: inline-block;
background-image: url(var(--icon));
width: 100px;
height: 100px;
content: '';
}
But well, this doesn't work. You can't have variable URL tokens.
But you cannot do this with url(), as url(var(--url)) is parsed not as a url( function token followed by var(--url) followed by a ), but a single url() token that is invalid because the var(--url) is being treated as a URL itself, and unquoted URLs in url() tokens cannot contain parentheses unless they are escaped. This means the substitution never actually occurs, because the parser never sees any var() expressions in the property value — indeed, your background declaration is completely invalid.
(From https://stackoverflow.com/a/42331003/6336728 )
What you can do is put the URL in inline CSS:
<app-box>
<app-title>app name</app-title>
<app-icon style="--icon: url(https://live.staticflickr.com/2552/3794648454_cf0c2a228b_b.jpg)"></app-icon>
</app-box>
I don't think that's the best solution though. What are your goals of using this method? I think it would be much better to just do it the usual way and use picture/source/img tags. This way you can make your images responsive ( https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#art_direction )
I'm afraid it's not possible to do just with css. You should have do something like: content: url(var(--icon))
but this won't work. Anyway you're trying to get value from data-href attribute but in your html code you have data-src
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.