Skip to content

Instantly share code, notes, and snippets.

@raul

raul/debug.css

Forked from garrettdimon/debug.css
Created April 10, 2023 16:05
Show Gist options
  • Save raul/d1b1437b25fe7f06d92fa2a8dc749412 to your computer and use it in GitHub Desktop.
Save raul/d1b1437b25fe7f06d92fa2a8dc749412 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @garrettdimon garrettdimon revised this gist Mar 6, 2023. 1 changed file with 5 additions and 4 deletions.
    9 changes: 5 additions & 4 deletions debug.css
    View file
    Original file line number Diff line number Diff line change
    @@ -33,12 +33,12 @@ img:not([alt]) {
    /*
    In all of these cases, display helpful text for correcting the issue.
    */
    abbr[title='']:after,
    *:has(> img[alt='']):after,
    *:has(> img:not([alt])):after,
    abbr[title='']:after,
    abbr:not([title]):after,
    a[href='']:after,
    a[href='#']:after,
    abbr:not([title]):after,
    *:has(> img:not([alt])):after,
    a:not([href]):after {
    font-family: var(--mono);
    font-weight: bold;
    @@ -70,4 +70,5 @@ abbr:not([title]):after {
    *:has(> img:not([alt])):after {
    content: '[Missing Alternate Text]';
    margin: var(--space-s);
    }
    }

  2. @garrettdimon garrettdimon created this gist Mar 6, 2023.
    73 changes: 73 additions & 0 deletions debug.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,73 @@
    /*
    In any of the following scenarios, a critical attribute was left off and needs
    to be corrected.
    */
    abbr[title=''],
    abbr:not([title]),
    a[href=''],
    a[href='#'],
    a:not([href]) {
    color: var(--color-red-500) !important;
    }

    /*
    If an image is completely missing an `alt` attribute, blur it to the point of
    being unreconizable so the experience for sighted visitors is the same as that
    of visually impaired visitors.
    */
    img[alt=''],
    img:not([alt]) {
    filter: blur(10px);
    }

    /*
    Add a visually-obtrusive border to any immediate parent elements containing
    an image without proper alternate text.
    */
    *:has(> img[alt='']),
    *:has(> img:not([alt])) {
    border-radius: 8px;
    border: 4px dotted var(--color-red-500);
    }

    /*
    In all of these cases, display helpful text for correcting the issue.
    */
    abbr[title='']:after,
    *:has(> img[alt='']):after,
    a[href='']:after,
    a[href='#']:after,
    abbr:not([title]):after,
    *:has(> img:not([alt])):after,
    a:not([href]):after {
    font-family: var(--mono);
    font-weight: bold;
    font-size: var(--step--1);
    background-color: var(--color-red-500);
    color: var(--color-white);
    display: inline-block;
    border-radius: 4px;
    margin-inline-start: var(--space-2xs);
    padding: var(--space-4xs);
    }

    a[href='']:after,
    a[href='#']:after,
    a:not([href]):after {
    content: '[Useless HREF]';
    }

    abbr[title='']:after,
    abbr:not([title]):after {
    content: '[Missing Title]';
    }

    /*
    Since :after won't work with img elements, use the containing element to add
    the text explanation.
    */
    *:has(> img[alt='']):after,
    *:has(> img:not([alt])):after {
    content: '[Missing Alternate Text]';
    margin: var(--space-s);
    }