您需要先安装一个扩展,例如 篡改猴、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.0.1 @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; } /* Return "see also" block back to the end */ [id="Browser_compatibility" i] ~ [id="See_also" i], [id="Browser_compatibility" i] ~ [id="See_also" i] ~ * { order: 1 } /* 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; } /* 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; } /* compact table headers - icons only */ .bc-table .bc-browsers th { 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; transform-origin: left; } .bc-browsers th:not(:hover) .bc-head-txt-label { color: transparent; } /* compact cells */ .text-content .bc-table td, .text-content .bc-table th { padding-top: 0; padding-bottom: 0; } /* history dropdown toggle smaller */ .text-content .bc-history-link.only-icon { border-top: none; text-align: right; } .text-content .ic-history { border-right: 0.35rem solid transparent } .text-content .bc-has-history.active .bc-history-link { max-width: 2em } /* 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; } /* 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 } /* END of MDN: Compat table: first and compact */ }
QingJ © 2025
镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址