For my website to gracefully degrade, I need to conditionally load CSS only when its corresponding JavaScript is enabled and functioning properly.
What is the most straightforward method to load local CSS if and only if the browser supports JavaScript?
The CSS file is quite large, so I am looking for a solution that doesn't require manually adding each attribute using JavaScript. (I can also utilize jQuery if needed).
To indicate that JavaScript is disabled, assign the class "noJS" to the body tag. Utilize JavaScript to eliminate this class afterward.
For the CSS styles you want applied when JavaScript isn't available, employ .noJS .myRules {}
If you want to include it in the <head>, you can use the document.write() method. I have not personally tested this, but theoretically it should work. By not executing any scripts, the stylesheet will not be loaded.
<head>
<script type='text/javascript>
document.write("<link rel='stylesheet' href='your.css' media='whatever />");
</script>
</head>
There are a variety of possibilities for you to consider.
One option that I find effective is inserting the code below into the body tag.
<body id="no-js"><script>document.body.id="js"</script>
This enables me to easily target #no-js and #js in my primary CSS file.
Alternatively, you could opt to load an additional stylesheet using JavaScript. However, this may result in a slower initial page load time, something I generally try to avoid.
Take a look at the conditionals in place for html5 boilerplate to understand how modernizr is utilized.
For another great example, visit:
Next, create your css selectors for .no-js .addl-selector {}
One method I use is:
document.documentElement.className = "js"
By doing this, it includes the class js to the <html> tag, giving you the ability to style your elements with CSS like so:
.js #someid{}
I've been working on implementing a photo uploader that requires the order of photos to be maintained. In order to achieve this, I have attempted to incorporate a drag and drop feature to swap their positions. However, I am encountering an issue where ...
During my React/Typescript project, I encountered an issue involving cursor animations. While researching the topic, I stumbled upon a CodePen (Animated Cursor React Component) that functioned perfectly. However, when attempting to convert it into a Types ...
I am currently working on a solution in my application to easily link to NFL player profiles on NFL.com using their names. Since the URL structure of the player profile pages on NFL.com is not consistent, I am attempting to generate a link to Google's ...
Is there a way to select multiple options from a list and add them to another list without losing any selections? Currently, when I add two selected options, they combine into one in the target list. Check out this JSFIDDLE EXAMPLE for reference. Here is ...
I'm currently utilizing Vue with TypeScript in Storybook. Unfortunately, there are no official TypeScript configurations available for using Vue with Storybook. How can I set up Webpack so that I am able to import from another .storybook.ts file with ...
I am currently facing an issue with my page setup. I have Bootstrap running on an aspx page and it works perfectly on desktop but not on mobile devices. Page: https://i.sstatic.net/N8vSF.png I even tried hosting the Bootstrap core files locally, but sti ...
Is there a way to duplicate an object and modify one of its properties? Here's an example: const initialState = { showTagPanel: false, }; export default function reducerFoo(state = initialState, action) { switch(action.type) { case types.SH ...
Hey there, I'm facing an issue while trying to utilize map data in conjunction with modals. Although I have set the state for all modals, when I use an array object within the map data, the modals end up showing duplicated. To provide clarity, let me ...
Hey everyone, I'm new here and hoping to get some help with an issue I'm facing. I've written a code to fetch data from an API and display it on my HTML page, but for some reason the AJAX code isn't working. There's nothing showing ...
I encountered an error that is confusing because the URL I provided in my twitterClient.get function is a string. I have tried changing ports, restarting the computer, and checking for any syntax errors without success. Any assistance would be greatly appr ...
Check out this code snippet I wrote: <html> <head> <script> initialize = function(){ document.getElementById('generate').onclick = sendRequest("generator.php"); } ...
Just starting out with Angular and I have a query. This is a scenario for my project at work. https://i.stack.imgur.com/R3SxA.png In this screenshot, I want to enable the "ajouter" button when at least one radio button is selected in the secure chest (s ...
I am facing an issue with ajax and bootstrap table integration. I am making an ajax JSON call using the following method: $(document).ready(function(){ $.ajax({ url: 'php/process.php?method=fetchdata', dataType: 'json' ...
Currently, I am attempting to update all anchor tags using href="#" and changing the value to JavaScript:Void(0) instead of just # running throughout the entire application. However, it seems that this change is being applied to all anchor tags, even tho ...
After upgrading the dependencies in my package.json to their latest versions, I encountered an error while accessing a page that calls this data. Given that the dependencies were outdated by at least 2 years or more, I suspect the issue lies with the updat ...
I'm having trouble getting this to work properly. I am using React and styled components, but the justify/content alignment is not functioning as expected. The setup includes a div with flex properties, where the flex direction is set to column. With ...
I am experiencing an issue with my horizontal menu bar code. The menu bar displays correctly for the resolution 1366 x 768, but when I press the ctrl - shortcut key and reduce the browser size using the same shortcut key, my menus move down. I have tried ...
I'm looking to overlay one layer on top of another without capturing input. My aim is to place a PNG image over my webpage in order to achieve a filter-like effect. The issue I'm facing is that when the overlay is in place, the text becomes uns ...
Hello fellow developers! I am currently facing an issue in my reactJS project. I am using the react-form-hook along with Material-UI's TextField. The problem arises when I input data into a field named cep, triggering a function that fetches content ...
Having trouble with my CSS layout I've created a form within a fixed 500 pixel width div that is centered on the page using margin auto; To create a table-like structure within the div, I used div elements as rows. Due to varying heights of these ro ...