Aangepaste CSS-stijlen voor Stylus

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 kunnen de stijlen aan en uit worden gezet.

  1. Controleer koppen
  2. Controleer lijsten
  3. Controleer tabellen
  4. Controleer tekst
  5. Controleer landmarks
  6. Maak focus zichtbaar
  7. Pas tekstafstand aan

Of importeer het JSON-bestand (JSON, 18KB) 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[href],
[role="link"],
button,
[role="button"] {
    outline: 4px dashed #186ade !important;
}
a[href]: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;
}