Welcome to the Power Users community on Codidact!
Power Users is a Q&A site for questions about the usage of computer software and hardware. We are still a small site and would like to grow, so please consider joining our community. We are looking forward to your questions and answers; they are the building blocks of a repository of knowledge we are building together.
Post History
The following is a UserScript which will edit each page's CSS to always use the widest media rules: // ==UserScript== // @name Disable Responsiveness // @description Always use the wide...
#2: Post edited
- The following is a UserScript which will edit each page's CSS to always use the widest media rules:
- ```js
- // ==UserScript==
- // @name Disable Responsiveness
- // @description Always use the widest version of a responsive website
- // @author Ullallulloo
- // @version 1.0
- // @match https://*/*
- // @match http://*/*
- // @grant GM.xmlHttpRequest
- // @connect *
- // ==/UserScript==
- for (let i = 0; i < document.styleSheets.length; i++) {
- const styleSheet = document.styleSheets[i];
- console.log(styleSheet);
- try {
- if (styleSheet.cssRules) {
- updateRules(styleSheet);
- }
- }
- catch(e) {
- if (e instanceof DOMException) {
- GM.xmlHttpRequest({
- method: "GET",
- url: styleSheet.href,
- onload: function(response) {
- const styleSheet = document.createElement("style");
- styleSheet.innerHTML = response.responseText;
- document.head.appendChild(styleSheet);
- updateRules(styleSheet.sheet);
- }
- });
- }
- else {
- console.log(e);
- }
- }
- }
- function updateRules(styleSheet) {
- for (let j = 0; j < styleSheet.cssRules.length; j++) {
- if (styleSheet.cssRules[j].media?.mediaText.includes("max-width")) {
- // console.log(`Deleteing rule ${styleSheet.cssRules[j].cssText}`);
- styleSheet.cssRules[j].media.mediaText = "(max-width: 0px;)";
- }
- if (styleSheet.cssRules[j].media?.mediaText.includes("min-width")) {
- // console.log(`Always using rule ${styleSheet.cssRules[j].cssText}`);
- styleSheet.cssRules[j].media.mediaText = "(min-width: 0px;)";
- }
- }
- }
- ```
Note that sites, including Codidact often include CSS from third-party sites/CDNs, so any editing of them will require permission to handle cross-original responses, which is a potentially dangerous permission to give out to untrusted code. You will have to explicitly agree to allow this permission for domains. Also, somewhat obviously, if you use a layout designed for a larger screen, some things may become undesirable sizes. It could potentially be tweaked to set a maximum width for styles to optimize the appearance for a device.
- The following is a UserScript which will edit each page's CSS to always use the widest media rules:
- ```js
- // ==UserScript==
- // @name Disable Responsiveness
- // @description Always use the widest version of a responsive website
- // @author Ullallulloo
- // @version 1.0
- // @match https://*/*
- // @match http://*/*
- // @grant GM.xmlHttpRequest
- // @connect *
- // ==/UserScript==
- for (let i = 0; i < document.styleSheets.length; i++) {
- const styleSheet = document.styleSheets[i];
- console.log(styleSheet);
- try {
- if (styleSheet.cssRules) {
- updateRules(styleSheet);
- }
- }
- catch(e) {
- if (e instanceof DOMException) {
- GM.xmlHttpRequest({
- method: "GET",
- url: styleSheet.href,
- onload: function(response) {
- const styleSheet = document.createElement("style");
- styleSheet.innerHTML = response.responseText;
- document.head.appendChild(styleSheet);
- updateRules(styleSheet.sheet);
- }
- });
- }
- else {
- console.log(e);
- }
- }
- }
- function updateRules(styleSheet) {
- for (let j = 0; j < styleSheet.cssRules.length; j++) {
- if (styleSheet.cssRules[j].media?.mediaText.includes("max-width")) {
- // console.log(`Deleteing rule ${styleSheet.cssRules[j].cssText}`);
- styleSheet.cssRules[j].media.mediaText = "(max-width: 0px;)";
- }
- if (styleSheet.cssRules[j].media?.mediaText.includes("min-width")) {
- // console.log(`Always using rule ${styleSheet.cssRules[j].cssText}`);
- styleSheet.cssRules[j].media.mediaText = "(min-width: 0px;)";
- }
- }
- }
- ```
- Note that sites, including Codidact often include CSS from third-party sites/CDNs, so any editing of them will require permission to handle cross-origin responses, which is a potentially dangerous permission to give out to untrusted code. You will have to explicitly agree to allow this permission for domains. Also, somewhat obviously, if you use a layout designed for a larger screen, some things may become undesirable sizes. It could potentially be tweaked to set a maximum width for styles to optimize the appearance for a device.
#1: Initial revision
The following is a UserScript which will edit each page's CSS to always use the widest media rules:
```js
// ==UserScript==
// @name Disable Responsiveness
// @description Always use the widest version of a responsive website
// @author Ullallulloo
// @version 1.0
// @match https://*/*
// @match http://*/*
// @grant GM.xmlHttpRequest
// @connect *
// ==/UserScript==
for (let i = 0; i < document.styleSheets.length; i++) {
const styleSheet = document.styleSheets[i];
console.log(styleSheet);
try {
if (styleSheet.cssRules) {
updateRules(styleSheet);
}
}
catch(e) {
if (e instanceof DOMException) {
GM.xmlHttpRequest({
method: "GET",
url: styleSheet.href,
onload: function(response) {
const styleSheet = document.createElement("style");
styleSheet.innerHTML = response.responseText;
document.head.appendChild(styleSheet);
updateRules(styleSheet.sheet);
}
});
}
else {
console.log(e);
}
}
}
function updateRules(styleSheet) {
for (let j = 0; j < styleSheet.cssRules.length; j++) {
if (styleSheet.cssRules[j].media?.mediaText.includes("max-width")) {
// console.log(`Deleteing rule ${styleSheet.cssRules[j].cssText}`);
styleSheet.cssRules[j].media.mediaText = "(max-width: 0px;)";
}
if (styleSheet.cssRules[j].media?.mediaText.includes("min-width")) {
// console.log(`Always using rule ${styleSheet.cssRules[j].cssText}`);
styleSheet.cssRules[j].media.mediaText = "(min-width: 0px;)";
}
}
}
```
Note that sites, including Codidact often include CSS from third-party sites/CDNs, so any editing of them will require permission to handle cross-original responses, which is a potentially dangerous permission to give out to untrusted code. You will have to explicitly agree to allow this permission for domains. Also, somewhat obviously, if you use a layout designed for a larger screen, some things may become undesirable sizes. It could potentially be tweaked to set a maximum width for styles to optimize the appearance for a device.
