Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Community Proposals
Community Proposals
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
Q&A

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

66%
+2 −0
Q&A Userscript or -style to disable responsiveness of website

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

posted 1y ago by Ullallulloo‭  ·  edited 1y ago by Ullallulloo‭

Answer
#2: Post edited by user avatar Ullallulloo‭ · 2023-12-06T15:05:04Z (about 1 year ago)
  • 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 by user avatar Ullallulloo‭ · 2023-12-05T20:00:03Z (about 1 year ago)
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.