technikhil314/README.md

## README.md

      
    Raw
  

              README.md
            
          
    The problem

I have added two link elements in index.html as follows
<link media="(hover: none)" href="/touch.css" rel="stylesheet" type="text/css" />
<link media="(hover: hover)" href="/demo.css" rel="stylesheet" type="text/css" />
when I serve these files over localhost using lite-server I see following output
link to localhost video -> https://player.vimeo.com/video/526503230
but in codesandbox it shows me this
link to codesandbox video -> https://player.vimeo.com/video/526506106
The difference in the output

on codesandbox it shows first paragraph in yellow background where as on local it does not apply yellow background to first paragraph.
I have few queries here

Does link tag respect the value (hover: none) to media attribute
why does codesandbox output is not same as localhost
Why does browser load a touch.css on pure hoverable device. I mean pure hoverable device can not be converted to touch device so we can save on network in this case

Correct me if I am wrong.

  
## demo.css
p.nontouch {
  background-color: cyan;
}

## index.html
<!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>
    <link media="(hover: none)" href="/touch.css" rel="stylesheet" type="text/css" />
    <link media="(hover: hover)" href="/demo.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <p class="touch">Touch</p>
    <p class="nontouch">Non Touch</p>
</body>

</html>

## touch.css
p.touch {
  background-color: yellow;
}
	<!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>
	<link media="(hover: none)" href="/touch.css" rel="stylesheet" type="text/css" />
	<link media="(hover: hover)" href="/demo.css" rel="stylesheet" type="text/css" />
	</head>

	<body>
	<p class="touch">Touch</p>
	<p class="nontouch">Non Touch</p>
	</body>

	</html>