529 lines
15 KiB
CSS
529 lines
15 KiB
CSS
/*!
|
|
* Revenge CSS v 1.0
|
|
* Copyright 2013, Heydon Pickering: http://www.heydonworks.com
|
|
* Released under Attribution 3.0 Unported license - http://creativecommons.org/licenses/by/3.0/
|
|
* Please leave this comment block intact as attribution
|
|
*/
|
|
|
|
a:not([href]),
|
|
a[href=""],
|
|
a[href$="#"],
|
|
a[href^="javascript"],
|
|
.button:not(button):not([role="button"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
|
|
.btn:not(button):not([role="button"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
|
|
a[class*="button"]:not([role="button"]),
|
|
a[role="button"]:not([href*="/"]):not([href*="."]):not([href*="?"]),
|
|
a[role="button"][href=""],
|
|
a[role="button"][href$="#"],
|
|
a[role="button"][href^="javascript"],
|
|
.button:not(button):not([role="button"]):not(input),
|
|
.btn:not(button):not([role="button"]):not(input),
|
|
a[class*="button"]:not([role="button"]),
|
|
a.button[class*="disabled"],
|
|
a.btn.disabled,
|
|
a[class*="button"][class*="disabled"],
|
|
form button:not([type]),
|
|
a:empty:not([aria-label]):not([aria-labelledby]),
|
|
button:empty:not([aria-label]):not([aria-labelledby]),
|
|
button:not([aria-label]):not([aria-labelledby]) img:only-child:not([alt]),
|
|
a:not([aria-label]):not([aria-labelledby]) img:only-child:not([alt]),
|
|
.button:not(a):not(button):not(input),
|
|
.btn:not(a):not(button):not(input),
|
|
figcaption,
|
|
form:not([action]),
|
|
fieldset > *:first-child:not(legend),
|
|
button.disabled:not([disabled]):not([readonly]),
|
|
acronym,
|
|
applet,
|
|
basefont,
|
|
center,
|
|
dir,
|
|
font,
|
|
frame,
|
|
frameset,
|
|
isindex,
|
|
listing,
|
|
menu,
|
|
multicol,
|
|
plaintext,
|
|
s,
|
|
strike,
|
|
u,
|
|
xmp,
|
|
bgsound,
|
|
blink,
|
|
comment,
|
|
embed,
|
|
marquee,
|
|
nobr,
|
|
noembed,
|
|
wbr,
|
|
*:empty:not(script),
|
|
section > section:first-child,
|
|
article > section:first-child,
|
|
article > article:first-child,
|
|
section > article:first-child,
|
|
section > aside:first-child,
|
|
aside > aside:first-child,
|
|
article > aside:first-child,
|
|
aside > article:first-child,
|
|
aside > section:first-child,
|
|
body > header:not([role="banner"]),
|
|
body > div > header:not([role="banner"]),
|
|
body > footer:not([role="contentinfo"]),
|
|
body > div > footer:not([role="contentinfo"]),
|
|
section [role="banner"],
|
|
section [role="contentinfo"],
|
|
article [role="banner"],
|
|
article [role="contentinfo"],
|
|
aside [role="banner"],
|
|
aside [role="contentinfo"],
|
|
#main:not(main):not([role="main"]),
|
|
#footer:not(footer):not([role="contentinfo"]),
|
|
#header:not(header):not([role="banner"]),
|
|
#banner:not(header):not([role="banner"]),
|
|
[align],
|
|
[alink],
|
|
[background],
|
|
[bgcolor],
|
|
[border],
|
|
[clear],
|
|
[height],
|
|
[hspace],
|
|
[link],
|
|
[nowrap],
|
|
[start],
|
|
[vlink],
|
|
[vspace],
|
|
script[language],
|
|
table[summary],
|
|
ol > *:not(li),
|
|
ul > *:not(li),
|
|
abbr div,
|
|
b div,
|
|
i div,
|
|
span div,
|
|
em div,
|
|
strong div,
|
|
small div,
|
|
cite div,
|
|
q div,
|
|
code div,
|
|
label div,
|
|
[tabindex]:not([tabindex="0"]):not([tabindex="-1"]),
|
|
li.divider:not([role="separator"]),
|
|
li:empty:not([role="separator"]),
|
|
li.dropdown-header,
|
|
.btn:not(button):not([href]),
|
|
li.disabled > a[href]:not([tabindex="-1"]),
|
|
li.disabled > button:not([disabled]),
|
|
a.disabled[href]:not([tabindex="-1"]),
|
|
button.disabled:not([disabled]),
|
|
[data-toggle="dropdown"]:not([aria-haspopup]) {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
a:not([href])::after,
|
|
a[href=""]::after,
|
|
a[href$="#"]::after,
|
|
a[href^="javascript"]::after,
|
|
.button:not(button):not([role="button"]):not([type="button"]):not([type="submit"]):not([type="reset"])::after,
|
|
.btn:not(button):not([role="button"]):not([type="button"]):not([type="submit"]):not([type="reset"])::after,
|
|
a[role="button"]:not([href*="/"]):not([href*="."]):not([href*="?"])::after,
|
|
a[role="button"][href=""]::after,
|
|
a[role="button"][href$="#"]::after,
|
|
a[role="button"][href^="javascript"]::after,
|
|
a[href].button[class*="disabled"]::after,
|
|
a[href].disabled::after,
|
|
a[href][class*="button"][class*="disabled"]::after,
|
|
form button:not([type])::after,
|
|
a:empty:not([aria-label]):not([aria-labelledby])::after,
|
|
button:empty:not([aria-label]):not([aria-labelledby])::after,
|
|
button:not([aria-label]):not([aria-labelledby]) img:only-child:not([alt])::after,
|
|
a:not([aria-label]):not([aria-labelledby]) img:only-child:not([alt])::after,
|
|
.button:not(a):not(button):not(input)::after,
|
|
.btn:not(a):not(button):not(input)::after,
|
|
figcaption::after,
|
|
form:not([action])::after,
|
|
fieldset > *:first-child:not(legend)::after,
|
|
button.disabled:not([disabled]):not([readonly])::after,
|
|
acronym::after,
|
|
applet::after,
|
|
basefont::after,
|
|
center::after,
|
|
dir::after,
|
|
font::after,
|
|
frame::after,
|
|
frameset::after,
|
|
isindex::after,
|
|
listing::after,
|
|
menu::after,
|
|
multicol::after,
|
|
plaintext::after,
|
|
s::after,
|
|
strike::after,
|
|
u::after,
|
|
xmp::after,
|
|
bgsound::after,
|
|
blink::after,
|
|
comment::after,
|
|
embed::after,
|
|
marquee::after,
|
|
nobr::after,
|
|
noembed::after,
|
|
wbr::after,
|
|
*:empty:not(script)::after,
|
|
section > section:first-child::after,
|
|
article > section:first-child::after,
|
|
article > article:first-child::after,
|
|
section > article:first-child::after,
|
|
section > aside:first-child::after,
|
|
aside > aside:first-child::after,
|
|
article > aside:first-child::after,
|
|
aside > article:first-child::after,
|
|
aside > section:first-child::after,
|
|
body > header:not([role="banner"])::after,
|
|
body > div > header:not([role="banner"])::after,
|
|
body > footer:not([role="contentinfo"])::after,
|
|
body > div > footer:not([role="contentinfo"])::after,
|
|
section [role="banner"]::after,
|
|
section [role="contentinfo"]::after,
|
|
article [role="banner"]::after,
|
|
article [role="contentinfo"]::after,
|
|
aside [role="banner"]::after,
|
|
aside [role="contentinfo"]::after,
|
|
#main:not(main):not([role="main"])::after,
|
|
#footer:not(footer):not([role="contentinfo"])::after,
|
|
#header:not(header):not([role="banner"])::after,
|
|
#banner:not(header):not([role="banner"])::after,
|
|
[align]::after,
|
|
[alink]::after,
|
|
[background]::after,
|
|
[bgcolor]::after,
|
|
[border]::after,
|
|
[clear]::after,
|
|
[height]::after,
|
|
[hspace]::after,
|
|
[link]::after,
|
|
[nowrap]::after,
|
|
[start]::after,
|
|
[vlink]::after,
|
|
[vspace]::after,
|
|
script[language]::after,
|
|
table[summary]::after,
|
|
ol > *:not(li)::after,
|
|
ul > *:not(li)::after,
|
|
dl > *:not(dt):not(dd)::after,
|
|
dt + *:not(dd)::after,
|
|
abbr div::after,
|
|
b div::after,
|
|
i div::after,
|
|
span div::after,
|
|
em div::after,
|
|
strong div::after,
|
|
small div::after,
|
|
cite div::after,
|
|
q div::after,
|
|
code div::after,
|
|
label div::after,
|
|
[tabindex]:not([tabindex="0"]):not([tabindex="-1"])::after,
|
|
li.divider:not([role="separator"])::after,
|
|
li:empty:not([role="separator"])::after,
|
|
li.dropdown-header::after,
|
|
.btn:not(button):not([href])::after,
|
|
li.disabled > a[href]:not([tabindex="-1"])::after,
|
|
li.disabled > button:not([disabled])::after,
|
|
a.disabled[href]:not([tabindex="-1"])::after,
|
|
button.disabled:not([disabled])::after,
|
|
[data-toggle="dropdown"]:not([aria-haspopup])::after {
|
|
display: inline-block !important;
|
|
background: #dc143c !important;
|
|
padding: 0.25em !important;
|
|
font-family: 'comic sans ms', cursive !important;
|
|
color: #fff !important;
|
|
font-size: 14px !important;
|
|
text-shadow: none !important;
|
|
font-weight: normal !important;
|
|
font-style: normal !important;
|
|
}
|
|
|
|
/**
|
|
* Button and hyperlink errors
|
|
----------------------------------------------------------------------
|
|
*/
|
|
|
|
a:not([href])::after {
|
|
content: 'Do you mean for this to be a link or a <button>? It does not link to anything!' !important;
|
|
}
|
|
|
|
a[href=""]::after,
|
|
a[href$="#"]::after,
|
|
a[href^="javascript"]::after {
|
|
content: 'Do you mean for this to be a <button>? It is a link that does not go anywhere!' !important;
|
|
}
|
|
|
|
.button:not(a):not(button):not(input):not([tabindex])::after,
|
|
.btn:not(a):not(button):not(input):not([tabindex])::after {
|
|
content: 'You are not using a standard focusable element for your "button". Can keyboard users focus on it?' !important;
|
|
}
|
|
|
|
a[role="button"]:not([href*="/"]):not([href*="."]):not([href*="?"])::after,
|
|
a[role="button"][href=""]::after,
|
|
a[role="button"][href$="#"]::after,
|
|
a[role="button"][href^="javascript"]::after {
|
|
content: 'Either use a proper href fallback or just use a button element.' !important;
|
|
}
|
|
|
|
a[href].button[class*="disabled"]::after,
|
|
a[href].disabled::after,
|
|
a[href][class*="button"][class*="disabled"]::after {
|
|
content: 'You cannot disable a hyperlink. Use a button element with disabled attribute or remove the href' !important;
|
|
}
|
|
|
|
[class*="toggle"]:not([aria-pressed]) {
|
|
content: 'If it is toggleable, you should supply an aria-pressed attribute.' !important;
|
|
}
|
|
|
|
form button:not([type])::after {
|
|
content: 'Is this a submit button, a reset button or just a button? Use type="submit", type="reset" or type="button".' !important;
|
|
}
|
|
|
|
a:empty:not([aria-label]):not([aria-labelledby])::after,
|
|
button:empty:not([aria-label]):not([aria-labelledby])::after,
|
|
button:not([aria-label]):not([aria-labelledby]) img:only-child:not([alt])::after,
|
|
a:not([aria-label]):not([aria-labelledby]) img:only-child:not([alt])::after {
|
|
content: 'All buttons and links should have text content, an image with alt text or an ARIA label.' !important;
|
|
}
|
|
|
|
figcaption::after {
|
|
content: '<figcaption>s must belong to parent <figure>s.' !important;
|
|
}
|
|
|
|
figure figcaption::after {
|
|
content: '' !important;
|
|
display: none !important;
|
|
}
|
|
|
|
/**
|
|
* Form errors
|
|
----------------------------------------------------------------------
|
|
*/
|
|
|
|
form:not([action])::after {
|
|
content: 'Forms must have action attributes.' !important;
|
|
}
|
|
|
|
fieldset > *:first-child:not(legend)::after {
|
|
content: 'Place a legend as the first element in this fieldset.' !important;
|
|
}
|
|
|
|
button.disabled:not([disabled]):not([readonly])::after {
|
|
content: 'Use a disabled or readonly attribute on this button.' !important;
|
|
}
|
|
|
|
/**
|
|
* Deprecated, obsolete and proprietary elements
|
|
----------------------------------------------------------------------
|
|
*/
|
|
|
|
acronym::after,
|
|
applet::after,
|
|
basefont::after,
|
|
big::after,
|
|
center::after,
|
|
dir::after,
|
|
font::after,
|
|
frame::after,
|
|
frameset::after,
|
|
isindex::after,
|
|
listing::after,
|
|
menu::after,
|
|
multicol::after,
|
|
plaintext::after,
|
|
strike::after,
|
|
u::after,
|
|
xmp::after,
|
|
bgsound::after,
|
|
blink::after,
|
|
comment::after,
|
|
embed::after,
|
|
marquee::after,
|
|
nobr::after,
|
|
noembed::after,
|
|
wbr::after {
|
|
content: 'This element is deprecated, non-standard or obsolete.' !important;
|
|
}
|
|
|
|
/**
|
|
* Empty elements
|
|
----------------------------------------------------------------------
|
|
*/
|
|
|
|
*:empty:not(.line):not(script):not(input):not(br):not(img):not(link):not(hr):not(embed):not(area):not(command):not(col):not(param):not(source):not(track):not(wbr):not(base):not(keygen)::after {
|
|
content: 'This element is empty. Why?' !important;
|
|
}
|
|
|
|
/**
|
|
* Sectioning elements, headers and footers
|
|
----------------------------------------------------------------------
|
|
*/
|
|
|
|
section > section:first-child::after,
|
|
article > section:first-child::after,
|
|
article > article:first-child::after,
|
|
section > article:first-child::after,
|
|
section > aside:first-child::after,
|
|
aside > aside:first-child::after,
|
|
article > aside:first-child::after,
|
|
aside > article:first-child::after,
|
|
aside > section:first-child::after {
|
|
content: 'Sectioning elems are not arbitrary wrappers. Use <div>s here.' !important;
|
|
}
|
|
|
|
body > header:not([role="banner"])::after,
|
|
body > div > header:not([role="banner"])::after {
|
|
content: 'Use role="banner" on this header element.' !important;
|
|
}
|
|
|
|
body > footer:not([role="contentinfo"])::after,
|
|
body > div > footer:not([role="contentinfo"])::after {
|
|
content: 'Use role="contentinfo" on this footer element.' !important;
|
|
}
|
|
|
|
section [role="banner"]::after,
|
|
section [role="contentinfo"]::after,
|
|
article [role="banner"]::after,
|
|
article [role="contentinfo"]::after,
|
|
aside [role="banner"]::after,
|
|
aside [role="contentinfo"]::after {
|
|
content: 'Do not put [role="banner"] or [role="contentinfo"] inside a subsection.' !important;
|
|
}
|
|
|
|
#main:not(main):not([role="main"])::after {
|
|
content: 'Use the standard <main> element or role of main.' !important;
|
|
}
|
|
|
|
#footer:not(footer):not([role="contentinfo"])::after {
|
|
content: 'Use the standard <footer> element or contentinfo role' !important;
|
|
}
|
|
|
|
#header:not(header):not([role="banner"])::after,
|
|
#banner:not(header):not([role="banner"])::after {
|
|
content: 'Use the standard <header> element or banner role' !important;
|
|
}
|
|
|
|
/**
|
|
* Bad attribute usage
|
|
----------------------------------------------------------------------
|
|
*/
|
|
|
|
[align]::after,
|
|
[alink]::after,
|
|
[background]::after,
|
|
[bgcolor]::after,
|
|
[border]::after,
|
|
[clear]::after,
|
|
[height]::after,
|
|
[hspace]::after,
|
|
[link]::after,
|
|
[nowrap]::after,
|
|
[start]::after,
|
|
[vlink]::after,
|
|
[vspace]::after {
|
|
content: 'You are using a deprecated attribute. Use CSS instead.' !important;
|
|
}
|
|
|
|
script[language]::after {
|
|
content: 'The language attribute is superceded by type. Use type.' !important;
|
|
}
|
|
|
|
table[summary]::after {
|
|
content: 'The summary attribute is deprecated. Perhaps use the <caption> element.' !important;
|
|
}
|
|
|
|
/**
|
|
* List errors
|
|
----------------------------------------------------------------------
|
|
*/
|
|
|
|
ol > *:not(li)::after,
|
|
ul > *:not(li)::after {
|
|
content: 'Only <li> can be a direct child of <ul> or <ol>.' !important;
|
|
}
|
|
|
|
dl > *:not(dt):not(dd)::after {
|
|
content: 'This element does not belong directly inside a definition list.' !important;
|
|
}
|
|
|
|
dt + *:not(dd)::after {
|
|
content: 'Definitions must follow definition titles.' !important;
|
|
}
|
|
|
|
/**
|
|
* <div>s in the wrong places
|
|
----------------------------------------------------------------------
|
|
*/
|
|
|
|
abbr div::after,
|
|
b div::after,
|
|
i div::after,
|
|
span div::after,
|
|
em div::after,
|
|
strong div::after,
|
|
small div::after,
|
|
cite div::after,
|
|
q div::after,
|
|
code div::after,
|
|
label div::after {
|
|
content: 'Do not put <div>s inside inline elements.' !important;
|
|
}
|
|
|
|
/**
|
|
* Crazy tabindexing
|
|
----------------------------------------------------------------------
|
|
*/
|
|
|
|
[tabindex]:not([tabindex="0"]):not([tabindex="-1"])::after {
|
|
content: 'Do not disrupt the natural tab order.' !important;
|
|
}
|
|
|
|
/* Boot Crap (specific to Twitter BootStrap class misuse)
|
|
-----------------------------------------------------------------------------*/
|
|
|
|
/* Don't use list elements to divide up list elements.
|
|
Use a class-based style on the preceeding or proceeding element or use role="separator"
|
|
on the item in question */
|
|
|
|
li.divider:not([role="separator"])::after,
|
|
li:empty:not([role="separator"])::after {
|
|
content: 'Do not use list items to divide up lists unless they have role = separator' !important;
|
|
}
|
|
|
|
/* For obvious reasons, a header for a list should not be an item in that list.
|
|
Make two lists! */
|
|
|
|
li.dropdown-header::after {
|
|
content: 'Do not use list items as headers for lists, obvs' !important;
|
|
}
|
|
|
|
/* Only <button>s and, to a lesser extent, <a>s WITH HREFS are keyboard functional as "buttons" */
|
|
|
|
.btn:not(button):not([href])::after {
|
|
content: 'This is not an accessible control. Use a <button> or a <a> with href.' !important;
|
|
}
|
|
|
|
/* Disabled links and buttons should be disabled correctly */
|
|
|
|
li.disabled > a[href]:not([tabindex="-1"])::after,
|
|
li.disabled > button:not([disabled])::after,
|
|
a.disabled[href]::after,
|
|
button.disabled:not([disabled])::after {
|
|
content: 'Disable buttons with disabled attr and links by removing href' !important;
|
|
}
|
|
|
|
/* The submenu should be indicated with aria-haspopup */
|
|
|
|
[data-toggle="dropdown"]:not([aria-haspopup])::after {
|
|
content: 'Indicate the hidden menu with aria-haspopup' !important;
|
|
}
|