Source code
Revision control
Copy as Markdown
Other Tools
<!-- Any copyright is dedicated to the Public Domain.
<html>
<head>
<style>
body {
color: #333;
}
.box {
float:left;
width: 128px;
height: 128px;
background: #ddd;
padding: 32px;
margin: 32px;
position:relative;
}
.box:first-line {
color: orange;
background: red;
}
.box:first-letter {
color: green;
}
* {
cursor: default;
}
nothing {
cursor: pointer;
}
p::-moz-selection {
color: white;
background: black;
}
p::selection {
color: white;
background: black;
}
p:first-line {
background: blue;
}
p:first-letter {
color: red;
font-size: 130%;
}
.box:before {
background: green;
content: " ";
position: absolute;
height:32px;
width:32px;
}
.box:after {
background: red;
content: " ";
position: absolute;
border-radius: 50%;
height:32px;
width:32px;
top: 50%;
left: 50%;
margin-top: -16px;
margin-left: -16px;
}
.topleft:before {
top:0;
left:0;
}
.topleft:first-line {
color: orange;
}
.topleft::selection {
color: orange;
}
.topright:before {
top:0;
right:0;
}
.bottomright:before {
bottom:10px;
right:10px;
color: red;
}
.bottomright:before {
bottom:0;
right:0;
}
.bottomleft:before {
bottom:0;
left:0;
}
#list::after {
content: "suffix";
display: list-item;
}
#list::after::marker {
content: "+";
color: tomato;
}
#list-item::marker {
color: purple;
}
:is(
dialog,
[popover],
:fullscreen
)::backdrop {
background-color: transparent;
}
.highlights-container {
&::highlight(search) {
background-color: tomato;
color: gold;
}
&::highlight(search) {
color: white;
}
&::highlight(filter) {
background-color: purple;
}
&::highlight(unused) {
background-color: cyan;
}
}
input::slider-fill {
background: tomato;
}
input::slider-thumb {
background: gold;
}
input::slider-track {
background: seagreen;
}
.url-fragment-text-directives::target-text {
background-color: salmon;
}
details[open]::details-content {
color: hotpink;
border: 4px solid darkmagenta;
}
</style>
</head>
<body>
<h1>ruleview pseudoelement($("test"));</h1>
<div id="topleft" class="box topleft">
<p>Top Left<br />Position</p>
</div>
<div id="topright" class="box topright">
<p>Top Right<br />Position</p>
</div>
<div id="bottomright" class="box bottomright">
<p>Bottom Right<br />Position</p>
</div>
<div id="bottomleft" class="box bottomleft">
<p>Bottom Left<br />Position</p>
</div>
<ol id="list">
<li id="list-item" class="box">List element</li>
</ol>
<dialog>
In dialog
<div id="in-dialog" popover>hello</div>
</dialog>
<label>Range <input type="range" class="slider"></label>
<label>Not range <input type="text" class="slider"></label>
<section class="highlights-container">
Firefox Developer Tools is a set of web developer tools built into Firefox.
You can use them to examine, edit, and debug HTML, CSS, and JavaScript.
</section>
<section class="url-fragment-text-directives">May the fox be with you</section>
<canvas></canvas>
<details open>
<summary>Summary</summary>
<h2>::details-content</h2>
<p>In details</p>
</details>
<script>
"use strict";
// This is the only way to have the ::backdrop style to be applied
document.querySelector("dialog").showModal()
document.querySelector("#in-dialog").showPopover()
// Register highlights for ::highlight pseudo elements
const highlightsContainer = document.querySelector(".highlights-container");
const searchRange = new Range();
searchRange.setStart(highlightsContainer.firstChild, 0);
searchRange.setEnd(highlightsContainer.firstChild, 10);
CSS.highlights.set("search", new globalThis.Highlight(searchRange));
const filterRange = new Range();
filterRange.setStart(highlightsContainer.firstChild, 20);
filterRange.setEnd(highlightsContainer.firstChild, 100);
CSS.highlights.set("filter", new globalThis.Highlight(filterRange));
</script>
</body>
</html>