JavaScript Document fragmentDirective Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word FRAGMENTDIRECTIVE

Definition

Document.fragmentDirective is a read-only property that returns a FragmentDirective object for the current document. Today that object is empty and is mainly for feature-detecting text fragments (MDN).

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use document.fragmentDirective. Start with this line.

JavaScript
document.fragmentDirective
CallWhat it does
document.fragmentDirectivePrimary signature.

Built into the browser. Read or assign document.fragmentDirective — no import required.

Library declarations
JavaScript
document.fragmentDirective

Parameters

ParameterDescription
FragmentDirectiveRequired. Empty marker object for detection
#:~:text= URLOptional. Triggers scroll + highlight in supporting browsers

Return Value

Return ValueDescription
*FragmentDirective (empty object today)

JavaScript Examples

Example 1 — Feature-Detect Text Fragments

MDN pattern: check whether document.fragmentDirective exists.

JavaScript
if (document.fragmentDirective) {
  console.log("Your browser supports text fragments.");
} else {
  console.log("Text fragments are not supported in your browser.");
}
Try It Yourself

How It Works

  1. Read the property. Supporting browsers expose a FragmentDirective object.
  2. Use truthiness. A present object is truthy; missing support is falsy / undefined.
  3. Branch your UI. Offer deep-link tools only when the check passes.
  4. No methods needed. You do not call anything on the object for detection.

Example 2 — The Object Is Empty Today

Confirm there are no enumerable own keys to read (MDN).

JavaScript
if (!document.fragmentDirective) {
  console.log("Not supported");
} else {
  const keys = Object.keys(document.fragmentDirective);
  console.log(keys.length);  // 0 today
  console.log(typeof document.fragmentDirective);  // "object"
}
Try It Yourself

How It Works

  1. Guard first. Skip inspection if the property is missing.
  2. List own keys. Object.keys returns an empty array today.
  3. Check the type. It is still an object — just with no public fields yet.
  4. Stay future-ready. MDN notes it might hold more information later.

Example 3 — Build a #:~:text= Share Link

Create a deep-link string; gate the feature with fragmentDirective.

JavaScript
function textFragmentUrl(pageUrl, phrase) {
  return pageUrl + "#:~:text=" + encodeURIComponent(phrase);
}

if (document.fragmentDirective) {
  const link = textFragmentUrl(
    "https://example.com/article",
    "important phrase"
  );
  console.log(link);
} else {
  console.log("Use a classic #id link instead.");
}
Try It Yourself

How It Works

  1. Encode the phrase. Spaces and special characters become percent-encoded.
  2. Append the directive. #:~:text= marks a user-agent text instruction.
  3. Detect support. Only advertise the link when fragmentDirective exists.
  4. Keep a fallback. Older browsers ignore the directive — prefer #id for critical nav.
Compatibility

Browser Support

Document.fragmentDirective is Baseline 2025 newly available (MDN: since March 2025). Text-fragment URLs landed earlier in some engines; always feature-detect the property.

✓ Baseline 2025 · Newly available

Document.fragmentDirective

Empty FragmentDirective marker for text fragment support — Chrome 81+, Edge 83+, Firefox 131+, Safari 18.4+, Opera 68+ (approximate; verify for your targets).

2025 Newly available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
fragmentDirective Baseline 2025

Bottom line: Use if (document.fragmentDirective) before offering text-fragment deep links. Style highlights with ::target-text, and keep classic #id links as a fallback. Not available in Internet Explorer.

Frequently Asked Questions

A read-only FragmentDirective object for the current document (MDN). Today the object is empty and is mainly used to feature-detect text fragment support.
No. MDN does not mark it Deprecated, Experimental, or Non-standard. It is Baseline 2025 newly available (since March 2025) — always feature-detect on older browsers.
URL fragment directives like #:~:text=Hello that tell the browser to scroll to and highlight matching page text without needing an element id.
No. The :~: directive is stripped during loading so author scripts cannot directly interact with it (MDN Text fragments). Use fragmentDirective only for support detection.
Use the CSS ::target-text pseudo-element to customize how matched text looks when a text fragment is active.
No. MDN lists no instance properties or methods today — existence of the object is the signal. It might expose more data in the future.

Next: fullscreen

Learn why document.fullscreen is deprecated and what to use instead.

fullscreen tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Document forms Property JavaScript Document fullscreen Property