枠で囲む by mlca11y

/* ==UserStyle==
@name           枠で囲む
@namespace      mlca11y
@version        1.0.0
@description    アクセシビリティチェックを行う上で特に注意が必要な要素・属性を強調して表示します。
@author         mlca11y
==/UserStyle== */
@-moz-document url-prefix("http:"), url-prefix("https:"), url-prefix("file:") {
:root{
--outline-font:'Consolas', monospace;
--outline-color-normal:hsl(60, 75%, 33%);
--outline-color-01:hsl(0, 75%, 33%);
--outline-color-02:hsl(120, 75%, 33%);
--outline-color-03:hsl(180, 75%, 33%);
--outline-color-04:hsl(240, 75%, 33%);
--outline-color-05:hsl(300, 75%, 33%);

--outline-width-error:7px;
--outline-width-warning:5px;
--outline-width-info:3px;
--outline-width-normal:1px;

--outline-style-usecss:dashed;
--outline-style-aria:dotted;
--outline-style-normal:solid;
}

/* 枠で囲む */

/* 枠で囲む 01 */
h1,
h2,
h3,
h4,
h5,
h6,
hgroup{
outline-color:var(--outline-color-01) !important;
outline-width:var(--outline-width-normal);
outline-style:var(--outline-style-normal);
outline-offset:-2px !important;
}

h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before,
hgroup::before{
all:initial;
border:none !important;
border-radius:0 !important;
color:#fff !important;
display:inline !important;
font:14px/1.5 var(--outline-font) !important;
isolation:isolate !important;
padding:1px !important;
}

h1::before{
background:var(--outline-color-01) !important;
content:"h1" !important;
}

h2::before{
background:var(--outline-color-01) !important;
content:"h2" !important;
}

h3::before{
background:var(--outline-color-01) !important;
content:"h3" !important;
}

h4::before{
background:var(--outline-color-01) !important;
content:"h4" !important;
}

h5::before{
background:var(--outline-color-01) !important;
content:"h5" !important;
}

h6::before{
background:var(--outline-color-01) !important;
content:"h6" !important;
}

hgroup::before{
background:var(--outline-color-01) !important;
content:"hgroup" !important;
}

/* 枠で囲む 02 */
article,
section,
nav,
aside,
header,
footer,
address,
main,
div,
p,
pre,
blockquote,
figure,
figcaption,
ul,
ol,
dl,
dt,
dd,
li{
outline-color:var(--outline-color-02) !important;
outline-width:var(--outline-width-normal);
outline-style:var(--outline-style-normal);
outline-offset:-2px !important;
}

article::before,
section::before,
nav::before,
aside::before,
header::before,
footer::before,
address::before,
main::before,
div::before,
p::before,
pre::before,
blockquote::before,
figure::before,
figcaption::before,
ul::before,
ol::before,
dl::before,
dt::before,
dd::before,
li::before{
border-radius:3px !important;
box-shadow:0 3px 7px rgba(0, 0, 0, 0.3) !important;
color:#fff !important;
display:inline !important;
font:13px/15px var(--outline-font) !important;
letter-spacing:0 !important;
word-spacing:0 !important;
text-shadow:none !important;
text-transform:none !important;
padding:1px !important;
z-index:2147483647 !important;
}

article::before{
background:var(--outline-color-02) !important;
content:"article" !important;
}

section::before{
background:var(--outline-color-02) !important;
content:"section" !important;
}

nav::before{
background:var(--outline-color-02) !important;
content:"nav" !important;
}

aside::before{
background:var(--outline-color-02) !important;
content:"aside" !important;
}

header::before{
background:var(--outline-color-02) !important;
content:"header" !important;
}

footer::before{
background:var(--outline-color-02) !important;
content:"footer" !important;
}

address::before{
background:var(--outline-color-02) !important;
content:"address" !important;
}

main::before{
background:var(--outline-color-02) !important;
content:"main" !important;
}

div::before{
background:var(--outline-color-02) !important;
content:"div" !important;
}

p::before{
background:var(--outline-color-02) !important;
content:"p" !important;
}

pre::before{
background:var(--outline-color-02) !important;
content:"pre" !important;
}

blockquote::before{
background:var(--outline-color-02) !important;
content:"blockquote" !important;
}

figure::before{
background:var(--outline-color-02) !important;
content:"figure" !important;
}

figcaption::before{
background:var(--outline-color-02) !important;
content:"figcaption" !important;
}

ul::before{
background:var(--outline-color-02) !important;
content:"ul" !important;
}

ol::before{
background:var(--outline-color-02) !important;
content:"ol" !important;
}

dl::before{
background:var(--outline-color-02) !important;
content:"dl" !important;
}

dt::before{
background:var(--outline-color-02) !important;
content:"dt" !important;
}

dd::before{
background:var(--outline-color-02) !important;
content:"dd" !important;
}

li::before{
background:var(--outline-color-02) !important;
content:"li" !important;
}

/* 枠で囲む 03 */
form,
label,
input,
button,
select,
output,
textarea,
fieldset,
legend{
outline-color:var(--outline-color-03) !important;
outline-width:var(--outline-width-normal);
outline-style:var(--outline-style-normal);
outline-offset:-2px !important;
}

form::before,
label::before,
input::before,
button::before,
select::before,
output::before,
textarea::before,
fieldset::before,
legend::before{
border-radius:3px !important;
box-shadow:0 3px 7px rgba(0, 0, 0, 0.3) !important;
color:#fff !important;
display:inline !important;
font:13px/15px var(--outline-font) !important;
letter-spacing:0 !important;
word-spacing:0 !important;
text-shadow:none !important;
text-transform:none !important;
padding:1px !important;
z-index:2147483647 !important;
}

form::before{
background:var(--outline-color-03) !important;
content:"form" !important;
}

label::before{
background:var(--outline-color-03) !important;
content:"label" !important;
}

input::before{
background:var(--outline-color-03) !important;
content:"input" !important;
}

button::before{
background:var(--outline-color-03) !important;
content:"button" !important;
}

select::before{
background:var(--outline-color-03) !important;
content:"select" !important;
}

output::before{
background:var(--outline-color-03) !important;
content:"output" !important;
}

textarea::before{
background:var(--outline-color-03) !important;
content:"textarea" !important;
}

fieldset::before{
background:var(--outline-color-03) !important;
content:"fieldset" !important;
}

legend::before{
background:var(--outline-color-03) !important;
content:"legend" !important;
}

/* 枠で囲む 04 */
a,
em,
strong,
small,
i,
b,
u,
s,
mark,
time,
canvas,
svg{
outline-color:var(--outline-color-04) !important;
outline-width:var(--outline-width-normal);
outline-style:var(--outline-style-normal);
outline-offset:-2px !important;
}

a::before,
em::before,
strong::before,
small::before,
i::before,
b::before,
u::before,
s::before,
mark::before,
time::before,
canvas::before,
svg::before{
border-radius:3px !important;
box-shadow:0 3px 7px rgba(0, 0, 0, 0.3) !important;
color:#fff !important;
display:inline !important;
font:13px/15px var(--outline-font) !important;
letter-spacing:0 !important;
word-spacing:0 !important;
text-shadow:none !important;
text-transform:none !important;
padding:1px !important;
z-index:2147483647 !important;
}

a::before{
background:var(--outline-color-04) !important;
content:"a" !important;
}

em::before{
background:var(--outline-color-04) !important;
content:"em" !important;
}

strong::before{
background:var(--outline-color-04) !important;
content:"strong" !important;
}

small::before{
background:var(--outline-color-04) !important;
content:"small" !important;
}

i::before{
background:var(--outline-color-04) !important;
content:"i" !important;
}

b::before{
background:var(--outline-color-04) !important;
content:"b" !important;
}

u::before{
background:var(--outline-color-04) !important;
content:"u" !important;
}

s::before{
background:var(--outline-color-04) !important;
content:"s" !important;
}

mark::before{
background:var(--outline-color-04) !important;
content:"mark" !important;
}

time::before{
background:var(--outline-color-04) !important;
content:"time" !important;
}

canvas::before{
background:var(--outline-color-04) !important;
content:"canvas" !important;
}

svg::before{
background:var(--outline-color-04) !important;
content:"svg" !important;
}

/* 枠で囲む 05 */
table,
caption,
thead,
tbody,
tfoot,
tr,
td,
th{
outline-color:var(--outline-color-05) !important;
outline-width:var(--outline-width-normal);
outline-style:var(--outline-style-normal);
outline-offset:-2px !important;
}

table::before,
caption::before,
thead::before,
tbody::before,
tfoot::before,
tr::before,
td::before,
th::before{
border-radius:3px !important;
box-shadow:0 3px 7px rgba(0, 0, 0, 0.3) !important;
color:#fff !important;
display:inline !important;
font:13px/15px var(--outline-font) !important;
letter-spacing:0 !important;
word-spacing:0 !important;
text-shadow:none !important;
text-transform:none !important;
padding:1px !important;
z-index:2147483647 !important;
}

table::before{
background:var(--outline-color-05) !important;
content:"table" !important;
}

caption::before{
background:var(--outline-color-05) !important;
content:"caption" !important;
}

thead::before{
background:var(--outline-color-05) !important;
content:"thead" !important;
}

tbody::before{
background:var(--outline-color-05) !important;
content:"tbody" !important;
}

tfoot::before{
background:var(--outline-color-05) !important;
content:"tfoot" !important;
}

tr::before{
background:var(--outline-color-05) !important;
content:"tr" !important;
}

td::before{
background:var(--outline-color-05) !important;
content:"td" !important;
}

th::before{
b...