fragmentDirective - live examples

files/en-us/web/api/document/fragmentdirective/index.md

@@ -18,15 +18,38 @@ A {{domxref("FragmentDirective")}} object.
 
 ## Examples
 
-Try running the following in a supporting browser's devtools, in a tab with one or more matched text fragments:
+### Checking if text fragments are supported
+
+The code below logs whether or not text fragments are supported in your browser by checking for existence of the object.
+Note that the object is empty, and at present it is mainly intended for feature detection.
+In the future, it might include other information.
+
+```html hidden
+<pre id="log"></pre>
+```
+
+```js hidden
+const logElement = document.querySelector("#log");
+function log(text) {
+  logElement.innerText = text;
+}
+```
+
+```css hidden
+#log {
+  height: 20px;
+}
+```
 
 ```js
-document.fragmentDirective;
-// returns an empty FragmentDirective object, if supported
-// undefined otherwise
+if (document.fragmentDirective) {
+  log("Your browser supports text fragments.");
+} else {
+  log("Text fragments are not supported in your browser.");
+}
 ```
 
-This functionality is mainly intended for feature detection at present. In the future, the `FragmentDirective` object could include additional information.
+{{EmbedLiveSample("Checking if text fragments are supported","100%","30px")}}
 
 ## Specifications
 

files/en-us/web/api/fragmentdirective/index.md

@@ -9,7 +9,7 @@ browser-compat: api.FragmentDirective
 
 {{APIRef("URL Fragment Text Directives")}}{{SeeCompatTable}}
 
-The **`FragmentDirective`** interface is an object exposed for feature detectability, that is, whether or not a browser supports text fragments.
+The **`FragmentDirective`** interface is an object exposed to allow code to check whether or not a browser supports text fragments.
 
 It is accessed via the {{domxref("Document.fragmentDirective")}} property.
 
@@ -23,15 +23,38 @@ None.
 
 ## Examples
 
-Try running the following in a supporting browser's devtools, in a tab with one or more matched text fragments:
+### Checking if text fragments are supported
+
+The code below logs whether or not text fragments are supported in your browser by checking that {{domxref("Document.fragmentDirective")}} is defined.
+Note that the object is empty, and at present is mainly intended for feature detection.
+In the future, it might include other information.
+
+```html hidden
+<pre id="log"></pre>
+```
+
+```js hidden
+const logElement = document.querySelector("#log");
+function log(text) {
+  logElement.innerText = text;
+}
+```
+
+```css hidden
+#log {
+  height: 20px;
+}
+```
 
 ```js
-document.fragmentDirective;
-// returns an empty FragmentDirective object, if supported
-// undefined otherwise
+if (document.fragmentDirective) {
+  log("Your browser supports text fragments.");
+} else {
+  log("Text fragments are not supported in your browser.");
+}
 ```
 
-This functionality is mainly intended for feature detection at present. In the future, the `FragmentDirective` object could include additional information.
+{{EmbedLiveSample("Checking if text fragments are supported","100%","30px")}}
 
 ## Specifications