MDN: Compat table: first and compact

Moves compatibility and specs tables to the top and makes them compact in articles at developer.mozilla.org.

/* ==UserStyle==
@name        MDN: Compat table: first and compact
@description Moves compatibility and specs tables to the top and makes them compact in articles at developer.mozilla.org.
@namespace   myfonj
@version     1.2.0
@license     CC0 - Public Domain
==/UserStyle== */

@-moz-document domain("developer.mozilla.org") {
/*

https://userstyles.org/styles/177139/edit
https://greasyfork.org/en/scripts/408039/versions/new

MDN: Compat table: first and compact

*/

/*
 Pull Browser Compatibility table to the top
*/
.main-page-content {
 display: flex;
 flex-direction: column;
}

[id="Browser_compatibility" i],
[id="Browser_compatibility" i] ~ * {
 order: -2;
}

/*
 Pull Specifications Table below Compatibility table
*/
:is([id="Specifications" i], [id="Specification" i]),
:is([id="Specifications" i], [id="Specification" i]) + div ,
:is([id="Specifications" i], [id="Specification" i]) + :is(div > table.standard-table, table.standard-table) {
 order: -1;
 border-left: none;
 margin-top: 0 !important;
}

/*
 Return "See Also" and "Found a problem with this page?" block back to the end 
*/
[id="Browser_compatibility" i] ~ aside.metadata:last-child,
[id="Browser_compatibility" i] ~ [id="See_also" i],
[id="Browser_compatibility" i] ~ [id="See_also" i] ~ * {
 order: 1
}


/*
 * remake Specifications Table into condensed and reversed "list"
 * • 3 columns without status badge (Specification | Comment | Feedback)
 *   e.g. https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Specifications
 *   ->  (counter) Specification Comment Feedback
 * • 3 columns with status badge (Specification | Status | Comment)
 * e.g. https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Specifications
 *  -> Status (badge) Specification (link) Comment
 * • 2 columns (Specification | Title)
 * e.g. https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Expires#Specifications
 * 	-> Title Specification (link)
 * // the only page using `#Specification` instead of `#Specifications` was https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
*/

:is([id="Specifications" i], [id="Specification" i]) + :is(table.standard-table, div > table.standard-table) tbody {
display: flex;
flex-direction: column-reverse;
}
:is([id="Specifications" i], [id="Specification" i]) + :is(div > table.standard-table, table.standard-table) th,
:is([id="Specifications" i], [id="Specification" i]) + :is(div > table.standard-table, table.standard-table) td br {
 display: none !important;
}
:is([id="Specifications" i], [id="Specification" i]) + :is(div > table.standard-table, table.standard-table) td {
 background-color: transparent !important;
}
:is([id="Specifications" i], [id="Specification" i]) + :is(div > table.standard-table, table.standard-table) td,
:is([id="Specifications" i], [id="Specification" i]) + :is(div > table.standard-table, table.standard-table) td * {
 display: inline !important;
 padding: 0;
 border: none !important;
 box-shadow: none !important;
}
:is([id="Specifications" i], [id="Specification" i]) + :is(div > table.standard-table, table.standard-table) td:nth-child(1) small {
 padding-left: 1ch;
}
:is([id="Specifications" i], [id="Specification" i]) + :is(div > table.standard-table, table.standard-table) tbody tr {
 border-bottom: 1px solid #ccc;
 text-indent: 4rem;
 position: relative;
 counter-increment: specount -1;
}
:is([id="Specifications" i], [id="Specification" i]) + :is(div > table.standard-table, table.standard-table) tbody tr * {
 text-indent: 0 !important; /* whoa, text indent is inherited? */
}
/*
 this is just "fallback"
*/
:is([id="Specifications" i], [id="Specification" i]) + :is(div > table.standard-table, table.standard-table) tbody td:first-child::before {
 content: counter(specount, lower-roman) '.';
 width: 4rem;
 text-align: center;
 position: absolute;
 left: 0;
 top: 0;
 opacity: .4;
}
/*
 We don't have nice things, sadly: it's impossible to count "backwards" to 1 starting from items count
 https://github.com/w3c/csswg-drafts/issues/4559#issuecomment-562058086
*/
:is([id="Specifications" i], [id="Specification" i]) + :is(div > table.standard-table, table.standard-table) tbody tr:first-child:nth-last-child(1) { counter-reset: specount 2; }
:is([id="Specifications" i], [id="Specification" i]) + :is(div > table.standard-table, table.standard-table) tbody tr:first-child:nth-last-child(2) { counter-reset: specount 3; }
:is([id="Specifications" i], [id="Specification" i]) + :is(div > table.standard-table, table.standard-table) tbody tr:first-child:nth-last-child(3) { counter-reset: specount 4; }
:is([id="Specifications" i], [id="Specification" i]) + :is(div > table.standard-table, table.standard-table) tbody tr:first-child:nth-last-child(4) { counter-reset: specount 5; }
:is([id="Specifications" i], [id="Specification" i]) + :is(div > table.standard-table, table.standard-table) tbody tr:first-child:nth-last-child(5) { counter-reset: specount 6; }
:is([id="Specifications" i], [id="Specification" i]) + :is(div > table.standard-table, table.standard-table) tbody tr:first-child:nth-last-child(6) { counter-reset: specount 7; }
:is([id="Specifications" i], [id="Specification" i]) + :is(div > table.standard-table, table.standard-table) tbody tr:first-child:nth-last-child(7) { counter-reset: specount 8; }
:is([id="Specifications" i], [id="Specification" i]) + :is(div > table.standard-table, table.standard-table) tbody tr:first-child:nth-last-child(8) { counter-reset: specount 9; }
:is([id="Specifications" i], [id="Specification" i]) + :is(div > table.standard-table, table.standard-table) tbody tr:first-child:nth-last-child(9) { counter-reset: specount 10; }
:is([id="Specifications" i], [id="Specification" i]) + :is(div > table.standard-table, table.standard-table) tbody tr:first-child:nth-last-child(10) { counter-reset: specount 11; }
:is([id="Specifications" i], [id="Specification" i]) + :is(div > table.standard-table, table.standard-table) tbody tr:first-child:nth-last-child(11) td:first-child::before, 
:is([id="Specifications" i], [id="Specification" i]) + :is(div > table.standard-table, table.standard-table) tbody tr:first-child:nth-last-child(11) ~ tr td:first-child::before {
 content: '•';
}
/* futile attempt */

/*
Status badge is in three columns table [class^="spec-"]
Sadly, there are three columns tables WITHOUT status badges in the middle col :sad face:
 (e.g. https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Browser_compatibility
 contains
 )
 So resorting to little yanky posabs swap.
 Because displayed badge is ::before and text is 'real', I cannot make static placeholder for overflowing tooltip pade from text
*/
:is([id="Specifications" i], [id="Specification" i]) + :is(div > table.standard-table, table.standard-table) td:nth-child(2):nth-last-child(2) [class^="spec-"] {
 white-space: nowrap;
 background-color: #eeeeee !important;
 font-size: 0;
 position: absolute;
 left: 0; top: 0;
 z-index: 1;
 padding-right: 1ch;
}
:is([id="Specifications" i], [id="Specification" i]) + :is(div > table.standard-table, table.standard-table) td:nth-child(2):nth-last-child(2) [class^="spec-"]::after {
 content: '';
 font-size: 1rem;
}
:is([id="Specifications" i], [id="Specification" i]) + :is(div > table.standard-table, table.standard-table) td:nth-child(2):nth-last-child(2) [class^="spec-"]:hover {
 font-size: 1rem;
 box-shadow: 0 0 1ch #fff;
 padding-right: 1ch;
}
:is([id="Specifications" i], [id="Specification" i]) + :is(div > table.standard-table, table.standard-table) td:nth-child(2):nth-last-child(2) [class^="spec-"]::before {
 content: attr(class);
 pointer-events: all;
 margin: 0;
 padding: 0;
 padding-left: 1ch;
 padding-right: 1ch;
 font-size: 1rem;
}
/*
 ::before contents removed in 
 https://github.com/mdn/mdn-minimalist/commit/c702743a06df0bda9318f4e60b54157cece8df6a
 restoring something resembling state from
 https://github.com/mdn/mdn-minimalist/blob/978e0b075d6fb12432a99307ca22c9263d41d406/sass/atoms/_meta.scss
*/
[id="Specifications" i] + div > table.standard-table td:nth-child(2):nth-last-child(2) [class~="spec-living"]::before { content: "LS"; }
[id="Specifications" i] + div > table.standard-table td:nth-child(2):nth-last-child(2) [class~="spec-standard"]::before { content: "ST"; }
[id="Specifications" i] + div > table.standard-table td:nth-child(2):nth-last-child(2) [class~="spec-rec"]::before { content: "REC"; }
[id="Specifications" i] + div > table.standard-table td:nth-child(2):nth-last-child(2) [class~="spec-cr"]::before { content: "CR"; }
[id="Specifications" i] + div > table.standard-table td:nth-child(2):nth-last-child(2) [class~="spec-pr"]::before { content: "PR"; }
[id="Specifications" i] + div > table.standard-table td:nth-child(2):nth-last-child(2) [class~="spec-rfc"]::before { content: "RFC"; }
[id="Specifications" i] + div > table.standard-table td:nth-child(2):nth-last-child(2) [class~="spec-wd"]::before { content: "WD"; }
[id="Specifications" i] + div > table.standard-table td:nth-child(2):nth-last-child(2) [class~="spec-draft"]::before { content: "D"; }
[id="Specifications" i] + div > table.standard-table td:nth-child(2):nth-last-child(2) [class~="spec-lc"]::before { content: "LC"; }
[id="Specifications" i] + div > table.standard-table td:nth-child(2):nth-last-child(2) [class~="spec-ed"]::before { content: "ED"; }
[id="Specifications" i] + div > table.standard-table td:nth-child(2):nth-last-child(2) [class~="spec-obsolete"]::before { content: "O"; }
/*  */

 
/*
 Hide "The definition of '%feature%' in that specification."
 Redundant.
*/
:is([id="Specifications" i], [id="Specification" i]) + :is(div > table.standard-table, table.standard-table) td:nth-child(1) > a[href*="#"] > br + small {
 display: none !important;
}
 
/*
 Hiding unnecessary headings
 (display: none; breaks anchors)
*/
[id="Specification" i],
[id="Specifications" i],
[id="Browser_compatibility" i] {
 height: 0 !important;
 overflow: hidden;
 padding: 0 !important;
 margin: 0 !important;
}

.bc-table {
 margin-top: 0 !important;  
 margin-bottom: 0 !important;
}
.bc-table td:empty {
 background-color: inherit !important;
}
/* compact table headers - icons only */
.bc-table .bc-platforms > th {
 padding: 0;
 border-top: 1px solid;
 height: 1em !important;
 overflow: visible;
}
.bc-table .bc-platforms > th::before {
 position: absolute;
 top: -1.4em;
}
.bc-table thead,
.bc-table .bc-platforms, 
.bc-table .bc-platforms > th,
.bc-table .bc-platforms > th::before {
 background-color: inherit;
}

.bc-table .bc-browsers th {
 padding: 0;
 height: 2rem;
 overflow: hidden;
}

/* browser headers: hide text until hover */

 th.bc-browser {
  position: relative !important;
  overflow: visible !important;
 }
 th.bc-browser:not(:hover) .bc-head-txt-label {
  opacity: 0;
 }
 .bc-head-icon-symbol {
  opacity: .7; /* too glaring */
 }
 th.bc-browser .bc-head-txt-label {
  background-color: var(--background-primary) !important;
  writing-mode: horizontal-tb;
  transform: translate(50%);
  position: absolute;
  top: auto;
  right: 50%;
  left: auto;
  bottom: 100%;
  padding: .5em 1em;
  border: 1px solid var(--border-secondary);
 }
 th.bc-browser:last-child .bc-head-txt-label {
  transform: none;
  right: 0;
 }
 

/* history dropdown toggle smaller */
.bc-history-link.only-icon {
 border: none;
 text-align: right;
}
.ic-history {border-right: 0.35rem solid transparent
}
.text-content .bc-has-history.active .bc-history-link {
 max-width: 2em
}
.bc-history-link {
 height: 8px;
}
td[aria-expanded="false"]:not(:hover) .bc-history-link {
 opacity: .5 !important;
}

/*
"⚠" badges in theads
* OFF 2022-04-04 - messed in cells /
.bc-table-row-header {

}
.bc-table-row-header * {
}
.bc-table-row-header .bc-icons {
 position: absolute;
 right: 0; line-height: 2.1;
}
.bc-table-row-header:not(:hover) .bc-icons {
 opacity: 0.7

}

/*
text underflow fix in label cells
e.g. https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
*/
.bc-table-row-header code {
 white-space: normal;
}

/*
 Legend is redundant for us
*/ 
.bc-legend {
 display: none;
} 

/*
footnote "*" (stars) are quite redundant as well
make them small and not let them wrap 
*/
.bc-table td[class^="bc-browser"] .bc-icons {
 position: absolute;
}
.bc-table td[class^="bc-browser"] .bc-icons *,
.bc-table td[class^="bc-browser"] .bc-icons *::before{
 background-size: .4rem !important;
 background-repeat: no-repeat !important;
}


/*
 wild formatting paragraphs appears
*/
p:empty {
 display: none;
}
.text-content dd:last-child {
 margin-bottom: 0;
}
 
/*
 Release dates in cell tooltips visible
 First word is wrapped and pushed up outside cell, so not visible.
*/
td[class|="bc-browser"][title^="Released "]::after {
 content: attr(title);
 font-size: 10px;
 line-height: 2em;
 position: absolute; top: -2em; right: 0; padding-right: .1em
}

/*
"Report problems…"
*/
.bc-github-link {
 text-align: right
}
.bc-github-link:not(:hover) {
 opacity: .7
}

/*
visually accessible markers of support levels for when background images are not rendered
WHCM or user style
*/
.bc-level-yes::before {
 content: '✓';
 color: transparent;
}
.bc-level-no::before {
 content: '✗';
 color: transparent;
}


/*
END of MDN: Compat table: first and compact
*/
}