'Somehow my Javacript code is affecting my CSS Intellisense - Need understanding

Hoepfully I am not re-treading old ground. Most likely it's my lack of understanding on how vscode works, but would be greatful for some insight.

Tried this on a linux and windows machine with the same result. Have removed plugins and tried to reset to the best of my knowledge, but can't guarantee as I am a newbie.

Anyway, riddle me this.......

Working on the code below, I was entering a background color, and started typing background-color for the CSS (< style >) for but got no intellisense prompt for the css code under the css definition of .thisGuy, you would however get a prompt with adding background-color in .worksHere.

I was working on linux (chromium Linux) and copied the code to a windows machine with the same result.

I was able to get it going once I commented out the javascript (< script >) below. Which for some reason made it work. I then uncommented it back to its original state, and it still works which is doing my head in.

Think this is a bug, but would want to know what is happening so that I can avoid it in the future.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<style>
   .worksHere{
       height:300vh;
       justify-content: center;
       align-items: center;
       background-image: url("grid.png");
background-repeat: repeat-y;   
}
   .parallax{
       position: fixed;
   }
   .thisGuy{
   display:flexbox;
   position:fixed 
   height:100px;
   Width:100%;
  
   }
</style>
<body>
 
 
   <div class="overall">
   <div class="parallax"><video id="video" width="1920" height="880" playsinline poster="0000.jpg">
       <source src="test.mp4" type="video/mp4">
       Your browser does not support the video tag.
   </video></div>
</div>
 
<script>
window.addEventListener('scroll', function () {
  
   const parallax = document.querySelector('.parallax');
   let scrollPosition = window.pageYOffset
 
   parallax.style.transform = 'translateY(' + scrollPosition * 0.075 + 'px)';
 
   console.log(scrollPosition)
});
</script>
 
<!-- video frame management -->
 
   <script>
       var FRAMES = 29;
       var FPS = 25;
       var video = document.getElementById('video');
 
       window.addEventListener('scroll', function (e) {
           var time = (window.scrollY / 1000) * FRAMES / FPS;
           video.currentTime = time;
           console.log(time);
       });
 
       window.addEventListener('load', function (e) {
           video.pause();
           video.currentTime = 0;
       });
   </script>
</body>
</html>
cssintellisense


Solution 1:[1]

As you haven't included what editor this is in, I cannot fully reproduce this issue. (In the future, please be sure to include a minimal reproducible example as part of your question, and include all the relevant context to allow visitors to fully understand your situation; this will better position them to provide you with assistance).

That said, I still have a decent theory about what is going on: you have a severe error in your markup. Specifically, you have placed a <style> element between your <head> and <body> elements, as a direct descendent of the <html> element. This is not allowed. The MDN reference page for the <html> element notes:

Permitted content: One <head> element, followed by one <body> element.

Those are the only direct children allowed for an <html> element. Your <style> element must be either inside the <head> or inside the <body>. In fact, if I drop your code inside the W3 HTML validator it considers the misplaced <style> element a "fatal error" and will not continue validating after this point.

  1. Error: style element between head and body.
  2. Fatal Error: Cannot recover after last error. Any further errors will be ignored.

As I cannot recreate your issue I cannot say for certain this is what is causing your intellisense issue, but it is a good candidate, and, critically, your code is malformed and could cause strange issues in your rendered page.

Solution 2:[2]

Thank you for taking the time to reply Alexander Nied. And apologies for the delay in replying.

From what you said, your right. The style (CSS) section is to be in the head section. Just an oversight while I get up to speed with coding.

I found the error was a simple ; after postion fixed in the .thisGuy CSS tag.

Apologies again as this is user error. Unfortunately loosing a bit of time to troubleshooting. Hopefully this becomes less and less as I become more proficient.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Alexander Nied
Solution 2 D F

Related Questions