DEV Community

Cover image for Code block $ prefix

Code block $ prefix

Glenn Carremans on February 27, 2019

I use the DigitalOcean community tutorials a lot for examples how to setup up different things in Linux (Nginx, MySQL, firewall, ...) and would al...
Collapse
 
rpalo profile image
Ryan Palo

This is neat! I didn't realize you could pass things directly from HTML attributes to CSS using the attr() function. That seems like a really semantic way of handling cases like this.

Thanks!

Collapse
 
glennmen profile image
Glenn Carremans

It always makes me happy to be able to learn new things to other people😄

Collapse
 
amdev83 profile image
Aaron L Marks

I came here to say the same thing! I didn't know that you could pass data around like that. This is awesome!

Collapse
 
qm3ster profile image
Mihail Malo

I have to admit I usually run away when CSS is being discussed,
but I thought I know most of it.

Well, content: attr(prefix); blew my mind.

Collapse
 
glennmen profile image
Glenn Carremans

Lol I am in the same boat as you on this 😂I am a "CSS newbie".
I also still learn a lot from CSS and it amazes me how much it changed compared to a few years ago. In "the old days" you where forced to use JS for a lot of animations but now you can do almost everything with only CSS.

Collapse
 
dennisk profile image
Dennis Keirsgieter

Would it also be possible to say if you don't pass on a prefix in the html it shows default ($) and otherwise use the prefix? Seems a bonus on top the bonus to me!

Collapse
 
glennmen profile image
Glenn Carremans

Good question! I did a quick search and actually you can. developer.mozilla.org/en-US/docs/W...

attr() has an optional fallback, however this is still an experimental feature.

content: attr(prefix, "$");
Collapse
 
dennisk profile image
Dennis Keirsgieter • Edited

And here i am looking at the docs and missing the last part about the fallback.. Thanks for that! Doesn't seem to work in my version of chrome yet tho.

Collapse
 
rufio profile image
Andy Hattemer

Nice write up Glenn - For me this brought up a follow-up Q for you that might make for another good post...

If it was possible, do you think people would prefer that single-line terminal commands copied from webpages don’t include the linebreak?

(IE. would it be better that the command doesn't run immediately when posted into your terminal)

If so, how would you do it?

Collapse
 
glennmen profile image
Glenn Carremans

Interesting question, this might be a good #discuss topic.
I personally like to copy/paste without a linebreak, so I can always double check the command or edit/add things.

Your question "how would you do it?", do you mean as a dev that made the code block or as a user that copy/pasted the command?

Collapse
 
itr13 profile image
Mikael Klages

Seems to work well on mobile too, nice find!