Using global variables in HTML/CSS, is it possible?

Question

Let me try and explain what I mean here.... I have a lot of images on my page, and different paths where they are stored.

<img src="what/ever/folder/pic01.jpg">
<img src="and/even/longer/path/name/pic09.jpg">
<img src="what/ever/folder/pic01.jpg">
<img src="and/even/longer/path/name/pic09.jpg">

etc... they are scattered all over the long page

Would it be possible with CSS or HTML or.. to make a variable containing each path, and then use that in the HTML?

PATH01 = 'what/ever/folder/'
PATH02 = 'and/even/longer/path/name/'

And then do the images, styles etc..

<img src={PATH01}"pic01.jpg">

Or something like that? (am I making any sense?`hehe)

Neither HTML nor CSS has any concept of a variable. You can do this with "templating" solutions (either server-side templating or client-side templating) like Handlebars. Also possible client-side with document.write, but it isn't pretty. :-) Note that client-side templating will rely on JavaScript. — T.J. Crowder
– T.J. Crowder, Commented Jul 19, 2016 at 7:26

Maksym Semenykhin · Accepted Answer · 2016-12-12 14:35:52Z

2

HyperText Markup Language, commonly abbreviated as HTML, is the standard markup language

This means that here are no vars in html. But there a lot of html server-side processors like php,node.js etc which can give you result you are looking for.

PHP example:

<?php
$path01 = 'some/path/';
?>

<img src="<?=$path01?>pic01.jpg">
<br/>
<img src="<?php echo $path01?>pic01.jpg">

edited Dec 12, 2016 at 14:35

answered Jul 19, 2016 at 7:28

Maksym Semenykhin

1,95515 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

FE Bear · Accepted Answer · 2016-07-19 07:43:59Z

2

good question, <base> is what you are looking for

Specify a default URL and a default target for all links on a page

http://www.w3schools.com/tags/tag_base.asp

in your case

<img src="what/ever/folder/pic01.jpg">

can be written in

<base href="http://whatever.com/what/ever/folder" />
<img src="pic01.jpg">

but <base> is a unique element in single page, which means you can have only one ENV variable set.

p.s. 99% of time we use html template system (php, jsp or react.js, handlebars) to solve this kind of problem in real life

answered Jul 19, 2016 at 7:43

FE Bear

1113 bronze badges

Comments

Thijs · Accepted Answer · 2016-07-19 07:29:18Z

0

No you can't do that using purely HTML or CSS. You could however do something like that using javascript or the server language of your choice.

answered Jul 19, 2016 at 7:29

Thijs

3,0855 gold badges33 silver badges56 bronze badges

Collectives™ on Stack Overflow

Using global variables in HTML/CSS, is it possible?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related