fragmentDirective - live examples (mdn#35716)

* fragmentDirective - live examples * Apply suggestions from code review Co-authored-by: Brian Thomas Smith <[email protected]> --------- Co-authored-by: Brian Thomas Smith <[email protected]>
DaddynIssac7 · Sep 12, 2024 · f7e5cd5 · f7e5cd5
1 parent c2636b4
commit f7e5cd5
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 11 deletions.
diff --git a/files/en-us/web/api/document/fragmentdirective/index.md b/files/en-us/web/api/document/fragmentdirective/index.md
@@ -16,15 +16,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
 

diff --git a/files/en-us/web/api/fragmentdirective/index.md b/files/en-us/web/api/fragmentdirective/index.md
@@ -7,7 +7,7 @@ browser-compat: api.FragmentDirective
 
 {{APIRef("URL Fragment Text Directives")}}
 
-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.
 
@@ -21,15 +21,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