a "preprocessor" for HTML? without JS

Question

In a CSS sheet, I created a new tag

gb {
    color: green;
}

and in the HTML code, I would replace without javascript, all occurences of

<gb> &#9632; </gb>  <!-- green bullet -->

with something like <gb /> . (Like using the C preprocessor, but doing thing in native HTML/CSS, without need to another program (cpp) and action (preprocessing) before sending the page on the web)

In other terms, how could I create custom HTML tag, with content (saving typing the ■ code), but only using HTML/CSS ?

And, yes, a lot of content already address custom HTML tags, but

They generally use Javascript
It is not clear
I can't believe such a little thing could involve these cumbersome solutions.

The idea is just to have a short way to draw an Unicode symbol (and in color) in middle of text.

It does not really matter whether you “can believe it” or not ... that doesn’t change the basic fact that this is not possible in any trivial way using HTML & CSS alone. — CBroe, Jul 07 '17 at 10:15
HTML does not allow you to create custom elements (there is a custom element spec, but it is still a draft and your code doesn't conform to it) — Quentin, Jul 07 '17 at 10:16
Basically you can write `` tag to HTML and it will act as normal `
`. — Justinas, Jul 07 '17 at 10:17
@Justinas — It won't. Error recovery will treat it more like a ``. It's still best avoided. — Quentin, Jul 07 '17 at 10:18
You can do something like this - https://jsfiddle.net/3mabnomt/ but your markup is not valid. It's not recommended to create custom tags like that — Mr. Alien, Jul 07 '17 at 10:18
@Quentin Maybe, but the goal is to put this tag alone, in many locations in the document. — yO_, Jul 07 '17 at 10:32
@yO_ what about it? That is CSS generated content, yes. But that has absolutely nothing to do with custom elements of any sort. — CBroe, Jul 07 '17 at 10:35
@CBroe Because we define a new `` tag, that is not in native HTML?.. — yO_, Jul 07 '17 at 10:38
Why you should not be doing that in the first place (especially if you don’t want to use any JavaScript), Quentin has already pointed out in comments. CSS generated content is a “feature” of CSS, yes. But is has no connection whatsoever with custom elements. This would work the same way if you applied it to a `div` for example. — CBroe, Jul 07 '17 at 10:40
Why this question and answer are being downvoted? OP asked for a way to not duplicate symbols inside custom tags. Answer has been added. It's working and fits question. What's wrong? — Vadim Ovchinnikov, Jul 07 '17 at 10:50

score 2 · Accepted Answer · edited Jul 07 '17 at 15:20

2

Option 1

You can (but you should not) create your own HTML tag:

gb::before {
  content: "\25A0";
  color: green;
}

<gb>Your text</gb>

Option 2

You can use a list with <ul> an <li> tags:

ul {
  list-style: none;
  padding-left: 0px;
}

li:before {
  content: "\25A0";
  color: green;
  padding-right:5px;
}

<ul>
  <li>Line 1</li>
  <li>Line 2</li>
  <li>Line 3</li>
</ul>

Option 3

You can use a <span> tag :

.gb::before {
  content: "\25A0";
  color: green;
  padding-right:5px;
}

<span class="gb">Your text</span>

edited Jul 07 '17 at 15:20

Vadim Ovchinnikov

13,327
5
62
90

answered Jul 07 '17 at 10:22

Valentin Genevrais

421
1
6
21

1

That HTML is wrong. Aside from being invalid, error recovery doesn't handle void elements. It will be treated as a start tag, not a complete element. – Quentin Jul 07 '17 at 10:25
2

Good! It almost worked! Not with just `` (putted all the text after in green), but with ``. – yO_ Jul 07 '17 at 10:28
2

@Quentin Don't agree with you. It's valid to create custom HTML tags. Here is [related question about this](https://stackoverflow.com/questions/9845011/are-custom-elements-valid-html5). – Vadim Ovchinnikov Jul 07 '17 at 10:29
2

@VadimOvchinnikov — The Custom Elements Specification is (a) a draft and (b) doesn't allow `gb` as a tag name for a custom element. So no, it isn't valid. Also (c) you haven't written the JavaScript (which the OP said they didn't want to use) to register the custom element. [They are also not widely supported](http://caniuse.com/#feat=custom-elements). – Quentin Jul 07 '17 at 10:30
1

@Quentin OK, you are right. I've seen a lot of custom tags and thought it was valid HTML. – Vadim Ovchinnikov Jul 07 '17 at 10:38
@Vadim Ovchinnikov My second proposition allows us to do the same thing properly. What is your opinion on this new solution? – Valentin Genevrais Jul 07 '17 at 10:48
2

@ValentinGenevrais The question was not for a list... More to put this square symbol in many places... – yO_ Jul 07 '17 at 10:50
Ok, you can use my first proposition if you think it's the best for you – Valentin Genevrais Jul 07 '17 at 10:52
3

@ValentinGenevrais To be honest I was OK even with first solution. I didn't care about HTML validity. This works in all browsers, why should anybody care? – Vadim Ovchinnikov Jul 07 '17 at 10:52
1

HTML validity is important when you work with a team on the same file. – Valentin Genevrais Jul 07 '17 at 10:54
2

@VadimOvchinnikov — Forwards compatibility with future extensions to HTML. To allow people who have to maintain your code to understand it. – Quentin Jul 07 '17 at 11:05
1

@Quentin Well, I don't use custom tags, but I think it's the matter of preference. Regarding maintainability, I don't agree with this statement. Structure like `
` looks nearly the same for me as ``. Regarding the future, it's also quite possible that custom tags will be perfectly legal in HTML. – Vadim Ovchinnikov Jul 07 '17 at 11:13
@yO_ Please, use the third option. It is important to have good practices. – Valentin Genevrais Jul 07 '17 at 11:14
2

@ValentinGenevrais Thank you! But it is long to insert `` in many places and in the middle of a text... The idea is just, to have a short way to draw an Unicode symbol (and in color) in middle of text... – yO_ Jul 07 '17 at 11:19
1

@Quentin Also the question was not about if it's good practice or not. Angular 2 uses custom tags in their examples and they work everywhere. BTW if HTML will drastically change we'll have to rewrite our code but I'm sure we will have new `DOCTYPE`s and old code will work as expected. I'm sure that guys who will develop new spec will also think about that custom tags were used and find a way to solve this problem. – Vadim Ovchinnikov Jul 07 '17 at 11:25
@VadimOvchinnikov https://stackoverflow.com/questions/9845011/are-custom-elements-valid-html5?noredirect=1&lq=1 – Valentin Genevrais Jul 07 '17 at 11:26
@Quentin https://stackoverflow.com/questions/9845011/are-custom-elements-valid-html5?noredirect=1&lq=1 – Valentin Genevrais Jul 07 '17 at 11:28
1

@ValentinGenevrais — I've already made comments about that specification. I'm not inclined to repeat myself. – Quentin Jul 07 '17 at 11:48

score 1 · Answer 2 · answered Jul 08 '17 at 14:08

To use a custom tag that is valid regarding the HTML Living Standard, you'll just need to use a hyphen in your tag name.

<g-b>Hello</g-b>

Then you can follow the Valentin's answer "Option 1".

g-b::before {
  content: "\25A0";
  color: green;
}

r-b::before {
  content: "\25A0";
  color: red;
}

<g-b>Text 1</g-b>
<br>
<r-b></r-b>Text 2

a "preprocessor" for HTML? without JS

2 Answers2

Option 1

Option 2

Option 3