REVENGE.CSS

revenge.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), 
dl > *:not(dt):not(dd), 
dt + *:not(dd), 
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(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;
}