0

How can I use %23 instead of # in Chrome?

html:

<div class="helloText">
hello text
</div>

css:

.helloText {
    background: #FF8500 url( "data:image/svg+xml;charset=utf8,<svg width='100%' height='100%' viewBox='0 0 1 1' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='none'><polygon points='0,1 1,1 1,0' style='fill:#fff;'></polygon></svg>" );
    background-repeat: no-repeat;
    background-size: 36px 36px;
    background-position: 100% 100%;

    padding: 20px;
    padding-bottom: 25px;
    margin-top: 35px;

    color: white;
    font-family: AvenirLT65Medium;
    font-size: 14pt;
}

res

enter image description here

In such a configuration everything works fine. The only but is that I am getting the following warning in Chrome console:

[Deprecation] Using unescaped '#' characters in a data URI body is deprecated and will be removed in M71, around December 2018. Please use '%23' instead. See https://www.chromestatus.com/features/5656049583390720 for more details.

Ok, let me change css to:

.helloText {
        background: #FF8500 url( "data:image/svg+xml;charset=utf8,<svg width='100%' height='100%' viewBox='0 0 1 1' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='none'><polygon points='0,1 1,1 1,0' style='fill:%29fff;'></polygon></svg>" );
        background-repeat: no-repeat;
        background-size: 36px 36px;
        background-position: 100% 100%;

        padding: 20px;
        padding-bottom: 25px;
        margin-top: 35px;

        color: white;
        font-family: AvenirLT65Medium;
        font-size: 14pt;
    }

res

enter image description here

Here is a fiddle. So, how do I substitute # to %29?

Also, I would like to notice that the part of an answer from here is wrong.

It tells that

The hashtag in the fill attribute triggers the message in my situation! Changing the # to %23 fixes the issue.

But it is not the case as I explained above.

manymanymore
  • 2,251
  • 3
  • 26
  • 48

2 Answers2

3

You used %29 instead of %23. Using %23, it works as intended.

anonymus1994.1
  • 308
  • 1
  • 6
1

Why using SVG when you can easily do this with simple CSS:

.helloText {
  background:
   linear-gradient(to bottom right,transparent 49.8%,#fff 50%),
   #FF8500;
  background-repeat: no-repeat;
  background-size: 36px 36px;
  background-position: 100% 100%;
  padding: 20px;
  padding-bottom: 25px;
  margin-top: 35px;
  color: white;
  font-family: AvenirLT65Medium;
  font-size: 14pt;
}
<div class="helloText">
  hello text
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Your `.helloText` will do the following: take a 36px square, move it to the right lower corner of the parent. Then the square will be divided into two parts by the diagonal which goes from the right upper corner to the left lower corner. of the squre. After such a division the upper part will be made transparent and the lower part will be made `#fff`. Am I right? I just never used the `linear-gradient` and thank to you read [the](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient) articles, but it does not help to understand what is happening here. – manymanymore Oct 14 '18 at 13:54
  • And is the order of the values in background property important? – manymanymore Oct 14 '18 at 13:55
  • @YaroslavTrofimov yes exactly, it's like this ;) and yes the order is important when you have different background BUT when you use a single color it will always be the final layer (the bottom one) .. so the color can be used anywhere, the order will only have effect in case you consider many gradient or gradient with image, etc – Temani Afif Oct 14 '18 at 13:57