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>
2 answers
solution1
0 2022-03-13 13:24:42
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>
solution2
0 2022-03-13 13:35:40
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.