what does double yellow line indicate in vs-code? how to understand the language of errors in vs-code?

Question

enter image description here A couple of double yellow lines appear beneath my codes in vscode, It gives a message which says: a two dimensional transformation is applied to an element through "transform" property. this property contain a list of transform functions similar to SVGs. define the standard property 'transform' for compatibility CSS(vendorprefix). The code goes as follows: and by the way for the attribute scale how can we double it (2, 2), why there are two numbers, can we double a div by the vertical and horizontal sides apart??

<html>
    <head>
        <style>
            #d1
            {
                width: 200px;
                height:200px;
                background-color: aquamarine;
                -webkit-transform: rotate(10deg);
                -moz-transform: rotate(10deg);
                -o-transform: rotate(10deg);
                -ms-transform: rotate(10deg);
                border-radius: 35px;
                -webkit-transform: translate (450px,250px); 
                -webkit-transform: scale(2,2);
                -webkit-transform: skew (30deg , 20deg);
              

                

            }
            
        </style>

    </head>
    <body>
        <div id="d1">
            Hanieh a forgiving girl 

        </div>
        

    </body>
</html>

and I wonder why css does not let ,me apply all transform codes simultaneously? — Hanieh Jannesari, Mar 13 '22 at 12:48

score 1 · Answer 1 · answered Mar 13 '22 at 13:35

The yellow line is a warning. You defined -[prefix]-transform but did not set transform without prefix.

You should also see warning icons at the bottom left corner of VSCode (two icons, one for errors, one for warnings). Click on those to get a detailed report.

score 0 · Answer 2 · answered Mar 13 '22 at 13:24

0

I assume the yellow double lines will disappear when you correct the syntax of the transform property. All transform definition rules must be in one line as below.

#d1 {
  width: 200px;
  height: 200px;
  background-color: aquamarine;
  border-radius: 35px;

  -webkit-transform: scale(2) rotate(10deg) translate(45px, 25px) skew(30deg, 20deg);
     -moz-transform: scale(2) rotate(10deg) translate(45px, 25px) skew(30deg, 20deg);
      -ms-transform: scale(2) rotate(10deg) translate(45px, 25px) skew(30deg, 20deg);
       -o-transform: scale(2) rotate(10deg) translate(45px, 25px) skew(30deg, 20deg);
          transform: scale(2) rotate(10deg) translate(45px, 25px) skew(30deg, 20deg);
  
}

<div id="d1">
  Hanieh a forgiving girl
</div>

answered Mar 13 '22 at 13:24

Baro

5,300
2
17
39

"Must be in one line as below". That's inaccurate. Doesn't matter if you insert other properties in between. He was just missing the `transform` property. – Will Mar 13 '22 at 13:37
@Will True, the property without the prefix was missing. But when I saw how he had broken down the transformations, I stopped checking the code, it was already wrong, you were right to explain it, but that wasn't the only problem and it wasn't the only question (he wrote in the comment instead of editing the question). – Baro Mar 13 '22 at 13:52
Interestingly, I did the exact opposite and stopped reading the post when I saw that he was missing a property lol – Will Mar 13 '22 at 13:57
hello guys, I am new to stack overflow and programing, Yeah I noticed that I missed a transform property without prefix but I guess what Baro wrote is not the short cut bcz it makes it simply longer and if I add one transform: rotate (10deg) to the codes the problem get solved, am I right? – Hanieh Jannesari Mar 13 '22 at 14:39
the thing is when I insert the transform property without the prefix above the other transform code, I see that some of the codes does not work for example the div I created does not move as defined or it does not skew, that is what I asked in the comment section and still don't get why all the transform codes does not work together. – Hanieh Jannesari Mar 13 '22 at 14:46
1

You don't have a choice there. If you want all those operations to execute, you'll need to write them in line, otherwise the last property will overwrite the others. And you should write the prefix-less property at the end. See details here: https://stackoverflow.com/a/36225374/6512857 – Will Mar 13 '22 at 15:21
What @Will says is true. Multiple transformation styles must be written in one line, otherwise the last transformation will overwrite the others. However, it is always good practice to look at some guides, I have been programming for over 20 years and I spend more time on google/guides/SO than programming. [Check it out here](https://developer.mozilla.org/en-US/docs/Web/CSS/transform). – Baro Mar 13 '22 at 17:02
That's awesome you have been in programming for this long, I live in Iran I wanna immigrate to US, what is more popular there and what they require, Unfortunately I am a beginner and this a long term plan I describe I wanna achieve in in 2 or 3 years, what is ur advice to the new ones? – Hanieh Jannesari Mar 14 '22 at 05:52
@HaniehJannesari We are completely off topic. In any case, I live in Italy. If what you are looking for is a professional career, you will find many websites that show you the most requested programming languages and areas of application, the important thing is that you do it with passion! I wish you all the best :) – Baro Mar 14 '22 at 08:51

what does double yellow line indicate in vs-code? how to understand the language of errors in vs-code?

2 Answers2