您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
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.1.5 @license CC0 - Public Domain ==/UserStyle== */ @-moz-document domain("developer.mozilla.org") { /* https://userstyles.org/styles/177139/edit https://gf.qytechs.cn/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; } /* overflowing headers on hover * / .bc-table .bc-browsers th:hover { overflow: visible; } .bc-browsers th .bc-head-txt-label { background-color: #e9eef1; width: auto; height: auto; bottom: 1em; position: absolute; margin: 0; } .bc-browsers th:not(:hover) .bc-head-txt-label { color: transparent; } /* 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 */ }
QingJ © 2025
镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址