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...
Answer
#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.