Skip header to navigation
pushState() are weeeiiirdYesterday I learned two weird things that happen when you use pushState() to navigate to a page with a URL fragment:
The CSS :target selector doesn’t work. You can use :target to style an element that is the current URL fragment when doing a full document load, but not with pushState! This is also documented on MDN:
The target element is set at document load and
history.back(), , and method calls. But it is not changed when and methods are called.
But that’s weird! Why not? I would argue that it makes a little bit unusable in modern web applications. Even though it’s such a useful feature!
The event doesn’t fire. Even though the hash changes, the event doesn’t fire. This is also documented on MDN, but oddly enough it’s documented in the docs, and not in the docs.
Note that never causes a event to be fired, even if the new URL differs from the old URL only in its hash.
Update: I did indeed open a small pull request and the hashchange docs now also explain this behavior.
pushState() are weeeiiirdYesterday I learned two weird things that happen when you use pushState() to navigate to a page with a URL fragment:
The CSS :target selector doesn’t work. You can use :target to style an element that is the current URL fragment when doing a full document load, but not with pushState! This is also documented on MDN:
The target element is set at document load and
history.back(), , and method calls. But it is not changed when and methods are called.
But that’s weird! Why not? I would argue that it makes a little bit unusable in modern web applications. Even though it’s such a useful feature!
The event doesn’t fire. Even though the hash changes, the event doesn’t fire. This is also documented on MDN, but oddly enough it’s documented in the docs, and not in the docs.
Note that never causes a event to be fired, even if the new URL differs from the old URL only in its hash.
Update: I did indeed open a small pull request and the hashchange docs now also explain this behavior.
That’s weird! And unexpected. This note should be included in the docs. Might be a good opportunity to open a small pull request.
history.forward()history.go()history.pushState()history.replaceState():targethashchangepushStatehashchangepushState()hashchangeThat’s weird! And unexpected. This note should be included in the docs. Might be a good opportunity to open a small pull request.
history.forward()history.go()history.pushState()history.replaceState():targethashchangepushStatehashchangepushState()hashchangehashchangehashchange