Om de content van een website te controleren gebruik ik een aantal aangepaste CSS-stijlen. Deze gebruik ik in combinatie met de browser extentie Stylus (download voor Firefox of Chrome). Hiermee kan ik deze stijlen aan- en uitzetten.
- Controleer koppen
- Controleer lijsten
- Controleer tabellen
- Controleer tekst
- Controleer landmarks
- Maak focus zichtbaar
- Pas tekstafstand toe
Of importeer het JSON-bestand (JSON, 16KB) in Stylus.
Controleer koppen
h1,
h2,
h3,
h4,
h5,
h6,
[role="heading"] {
outline: 4px dashed #d91f11 !important;
}
h1:before {
background: #d91f11 !important;
color: #ffffff !important;
content: "<h1>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
h2:before {
background: #d91f11 !important;
color: #ffffff !important;
content: "<h2>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
h3:before {
background: #d91f11 !important;
color: #ffffff !important;
content: "<h3>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
h4:before {
background: #d91f11 !important;
color: #ffffff ! important;
content: "<h4>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
h5:before {
background: #d91f11 !important;
color: #ffffff !important;
content: "<h5>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
h6:before {
background: #d91f11 !important;
color: #ffffff !important;
content: "<h6>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}Controleer lijsten
ul,
ol,
dl,
[role="list"] {
outline: 4px dashed #3c7d0e !important;
}
ul:before {
background: #3c7d0e !important;
color: #ffffff !important;
content: "<ul>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
ol:before {
background: #3c7d0e !important;
color: #ffffff !important;
content: "<ol>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
dl:before {
background: #3c7d0e !important;
color: #ffffff !important;
content: "<dl>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
li:before {
background: #3c7d0e!important;
color: #ffffff !important;
content: "<li>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
dt:before {
background: #3c7d0e !important;
color: #ffffff !important;
content: "<dt>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
dd:before {
background: #3c7d0e !important;
color: #ffffff !important;
content: "<dd>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}Controleer tabellen
table,
tr,
th,
td,
[role="table"] {
outline: 4px dashed #067a91 !important;
}
table:before {
background: #067a91 !important;
color: #ffffff !important;
content: "<table>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
display: table-caption;
}
tr:before {
background: #067a91 !important;
color: #ffffff !important;
content: "<tr>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
th:before {
background: #067a91 !important;
color: #ffffff !important;
content: "<th>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
td:before {
background: #067a91 !important;
color: #ffffff !important;
content: "<td>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}Controleer tekst
p,
strong,
em,
blockquote,
code {
outline: 4px dashed #f5c518 !important;
}
p:before {
background: #f5c518 !important;
color: #000000 !important;
content: "<p>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
strong:before {
background: #f5c518 !important;
color: #000000 !important;
font-weight: normal;
content: "<strong>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
em:before {
background: #f5c518 !important;
color: #000000 !important;
text-decoration: none;
content: "<em>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
blockquote:before {
background: #f5c518 !important;
color: #000000 !important;
content: "<blockquote>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
code:before {
background: #f5c518 !important;
color: #000000 !important;
content: "<code>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
a,
[role="link"],
button,
[role="button"] {
outline: 4px dashed #186ade !important;
}
a:before {
background: #186ade !important;
color: #ffffff !important;
content: "<a>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
button:before {
background: #186ade !important;
color: #ffffff !important;
content: "<button>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
Controleer landmarks
header,
[role="header"],
nav,
[role="navigation"],
main,
[role="main"],
aside,
[role="complementary"],
section,
[role="region"],
article,
[role="article"],
footer,
[role="contentinfo"] {
outline: 4px dashed #cc1d92 !important;
}
header:before {
background: #cc1d92 !important;
color: #ffffff !important;
content: "<header>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
nav:before {
background: #cc1d92 !important;
color: #ffffff !important;
content: "<nav>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
main:before {
background: #cc1d92 !important;
color: #ffffff !important;
content: "<main>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
aside:before {
background: #cc1d92 !important;
color: #ffffff !important;
content: "<aside>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
section:before {
background: #cc1d92 !important;
color: #ffffff !important;
content: "<section>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
article:before {
background: #cc1d92 !important;
color: #ffffff !important;
content: "<article>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
footer:before {
background: #cc1d92 !important;
color: #ffffff !important;
content: "<footer>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}Maak focus zichtbaar
Blauw
a:focus,
*:focus {
outline: 4px solid royalblue !important;
outline-offset: 1px !important;
}Groen
a:focus,
*:focus {
outline: 4px solid limegreen !important;
outline-offset: 1px !important;
}Rood
a:focus,
*:focus {
outline: 4px solid crimson !important;
outline-offset: 1px !important;
}Pas tekstafstand aan
* {
line-height: 1.5 !important;
letter-spacing: .12em !important;
word-spacing: .16em !important;
}
p {
margin-bottom: 2em !important;
}