Moved static html folder under docs
zoherghadyali
|
До Ширина: | Высота: | Размер: 24 KiB После Ширина: | Высота: | Размер: 24 KiB |
|
До Ширина: | Высота: | Размер: 108 KiB После Ширина: | Высота: | Размер: 108 KiB |
|
До Ширина: | Высота: | Размер: 22 KiB После Ширина: | Высота: | Размер: 22 KiB |
|
До Ширина: | Высота: | Размер: 813 B После Ширина: | Высота: | Размер: 813 B |
|
До Ширина: | Высота: | Размер: 2.0 KiB После Ширина: | Высота: | Размер: 2.0 KiB |
|
До Ширина: | Высота: | Размер: 15 KiB После Ширина: | Высота: | Размер: 15 KiB |
|
|
@ -1,54 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS :target demo for What's New in DevTools (Microsoft Edge 89)</title>
|
||||
<style>
|
||||
:root {
|
||||
--foreground: #111;
|
||||
--background: #f8f8f8;
|
||||
--para: red;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--foreground: #f8f8f8;
|
||||
--background: #111;
|
||||
--para: lime;
|
||||
}
|
||||
}
|
||||
body {
|
||||
font-family: helvetica, sans-serif;
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
}
|
||||
section, p {
|
||||
margin: 1em 2em;
|
||||
max-width: 50vw;
|
||||
line-height: 1.3;
|
||||
}
|
||||
p {
|
||||
color: lime;
|
||||
}
|
||||
section:target {
|
||||
border: 2px solid firebrick;
|
||||
}
|
||||
p:last-of-type {
|
||||
border-bottom: 1px solid var(--para);
|
||||
padding-bottom: .5em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p><strong>How to use:</strong> Each of these sections have an ID and a CSS target state associated defined them. You can try it by using the forced state functionality of developer tools.</p>
|
||||
<p>Select an element using the element picker, activate the "force element state" button labelled ":hov" and select the ":target" checkbox</p>
|
||||
|
||||
<section id="section-1">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos ullam error debitis beatae iure ab corrupti voluptates asperiores, facere doloremque dolorum, ratione delectus suscipit libero perspiciatis non odio rem vero!
|
||||
</section>
|
||||
<section id="section-2">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos ullam error debitis beatae iure ab corrupti voluptates asperiores, facere doloremque dolorum, ratione delectus suscipit libero perspiciatis non odio rem vero!
|
||||
</section>
|
||||
<section id="section-3">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos ullam error debitis beatae iure ab corrupti voluptates asperiores, facere doloremque dolorum, ratione delectus suscipit libero perspiciatis non odio rem vero!
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||