Navigating through a Single Page Application (SPA) can be achieved without

Can the CSS (Level 4) @document rule handle URLs that have the # symbol or include query parameters?

For those who are not familiar with this topic

Currently, only Firefox supports this feature with the @-moz-document prefix. If other browsers start supporting it, this could potentially enable CSS-only SPA routing, even without JavaScript. I plan to experiment with this over the weekend if anyone else hasn't already.

Here is an example:

@document url("https://www.sample.site/#/page-1/") {
    .page-2 {
        display: none;
    }
}

@document url("https://www.sample.site/#/page-2/") {
    .page-1 {
        display: none;
    }
}

I believe a build tool could be developed for CSS fallbacks in React / Gatsby or other static sites to improve user experience when routing isn't available, even with a <noscript> fallback option.

javascripthtmlcssroutessingle-page-application

Answer №1

After testing this out, it's clear that the issue lies in the fact that @document does not update when the URL changes, unlike how @media continuously checks for screen size changes. If this feature gets added to the spec, I hope there will be a chance for this behavior to improve.

The @document function does detect the # and ? in the URL, but currently requires a refresh to see any effects take place.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS can be used to eliminate specific background images from a webpage

In the CSS code, I have specified two background images within a 'body' tag. #body { background: url("image1.jpeg"), url("image2.png"); background-repeat: no-repeat, no-repeat; } But now, I need to remove only "image1" from a specific p ...

css

Customize the layout of menu icon in HTML/CSS using FlexBox Grid

Recently, I have encountered an issue with the position of a menu icon on my website. The icon is displayed when the window reaches a certain size, but it is not aligned properly on the right side of the site. Ideally, I would like to use the "right" prope ...

htmlcss

The functionality of React useState seems to be operational for one state, but not for the other

I am currently working on developing a wordle-style game using react. Within my main component, I have implemented a useEffect that executes once to handle initialization tasks and set up a "keydown" event listener. useEffect(() => { //The getWor ...

javascriptreactjstypescriptnext.jsuse-state

Displaying an array of JSON objects in ReactJS by parsing them

Recently, I've encountered an odd issue with my React App. I am attempting to parse a JSON object that includes arrays of data. The structure of the data looks something like this: {"Place":"San Francisco","Country":"USA", "Author":{"Name":"xyz", "Ti ...

javascripthtmlreactjsfetchsetstate

The element is implicitly classified as an 'any' type due to the index expression not being of type 'number'

Encountering a specific error, I am aware of what the code signifies but unsure about the correct interface format: An error is occurring due to an 'any' type being implicitly assigned as the index expression is not of type 'number'. ...

javascripttypescriptvue.js

What is the best way to retrieve specific JSON data from an array in JavaScript using jQuery, especially when the property is

Forgive me if this question seems basic, I am new to learning javascript. I am currently working on a school project that involves using the holiday API. When querying with just the country and year, the JSON data I receive looks like the example below. ...

javascriptjqueryarraysjsonapi

Using Javascript, when the command key is pressed, open the link in a new window

Currently, I am working on a Javascript function that opens links in a new tab only when the "command" key is pressed on an Apple computer. Here is what I have so far: $(document).on('click','a[data-id]',function(e){ if(e.ctrlKey|| ...

javascriptjquerymacos

ReactJS form submissions failing to detect empty input values

My goal is to use react to console.log the input value. Below is the code I've created: import React from 'react'; import ReactDOM from 'react-dom'; class App extends React.Component{ constructor() { super(); this.proce ...

javascriptreactjs

Ways to implement a backup plan when making multiple requests using Axios?

Within my application, a comment has the ability to serve as a parent and have various child comments associated with it. When I initiate the deletion of a parent comment, I verify the existence of any child comments. If children are present, I proceed to ...

javascriptvue.jsvuejs2axios

Issue with fading out in Ajax.BeginForm not resolving

I currently have: @using (Ajax.BeginForm("actionToDo", new AjaxOptions { HttpMethod = "post", InsertionMode = InsertionMode.Replace, UpdateTargetId = "updatediv", OnBegin = "$('#updatediv').fadeOut()", OnComplete = "$(&apo ...

javascriptjqueryajaxasp.net-mvc-4

Ensure the page is always updated by automatically refreshing it with JavaScript each time it

I'm currently working on a web application that makes use of JQuery. Within my javascript code, there's a function triggered by an onclick event in the HTML which executes this line: $('#secondPage').load('pages/calendar.html&apos ...

javascriptjson

CSS Styles Only Apply to the Initial Column on the Website

It seems like the css is only working on the first column to display the item-meta. Everything appears to be in place when inspected, but for some reason, the opacity does not change back to 1. It's strange because it works fine in the first column ev ...

htmlcsswordpresscss-multicolumn-layout

Creating a text file while in a suspended state within the event handler on Windows 8 using HTML5

When the suspend event is triggered inside the winjs.application.oncheckpoint event handler, I am attempting to write a text file. The content of the file is my object in JSON format. Below is the code snippet: applicationData.localFolder.createFileAsync( ...

javascripthtmlwindows-8winjsfilewriter

Whenever I execute the 'ng serve' command, I encounter an issue with ineffective mark-compacts close to the heap limit, resulting in an allocation failure and a JavaScript

I'm currently using Angular 9 and Node.js 12. When I input ng serve, I encounter the following problem: C:\Users\homz\my-app>ng serve 93% after chunk asset optimization SourceMapDevToolPlugin vendor.js generate SourceMap <--- ...

javascriptnode.jsangularnpm

css - Tips for reducing the speed of inertia/momentum scrolling on mobile devices

I have been working on creating a scrollable card gallery using a CSS grid layout. The structure I am following is similar to this: <div class="gallery-wrapper"> <div class="gallery-container"> <div id="card-1" class="gallery-ca ...

htmlcssscroll

Leveraging multer for handling a FormData object in a node.js server

Having trouble with an HTML form that includes two buttons among other text input areas. The front-end javascript code is set up to handle the submit action by creating a FormData object to store the file and sending it via a jQuery AJAX request to a node. ...

javascriptjqueryajaxnode.jsexpress

Customizing Images using a JSON array of images

Looking to implement a feature that displays images fetched from a CMS via a JSON file. The JSON data structure is as follows: { "images": [ {"title": "Image One", "url": "image1.jpg"}, {"title": "Image Two", "url": "image2.jpg"}, {"title": "Ima ...

javascriptjqueryhtmlcssjson

Grab the current URL using useRouter in a Next.js app

I am using userouter to obtain the URL of the current page and then utilizing the clipboard to copy it. However, I am encountering an issue where the copied content shows as object object instead of the expected URL. Can someone please help me identify w ...

javascriptreactjsnext.js

Access a file from a specified route within Express

Recently, I created a custom Node module that requires a configuration file in CSV format. My goal is to implement this module within an Express Route module; however, I am encountering difficulties related to the loading of the configuration file. Should ...

javascriptnode.jsexpress

"Verifying the dimensions of the input sizes with the i

It's possible that this question has been asked before on this platform. However, I haven't come across a satisfactory answer yet. How can I adjust the size of inputs in the iCheck library? The current size is too large for my website. Css: .ic ...

cssinputsizeicheck