Skip to content

Commit

Permalink
fragmentDirective - live examples (mdn#35716)
Browse files Browse the repository at this point in the history
* fragmentDirective - live examples

* Apply suggestions from code review

Co-authored-by: Brian Thomas Smith <[email protected]>

---------

Co-authored-by: Brian Thomas Smith <[email protected]>
  • Loading branch information
hamishwillee and bsmth authored Sep 12, 2024
1 parent c2636b4 commit f7e5cd5
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 11 deletions.
33 changes: 28 additions & 5 deletions files/en-us/web/api/document/fragmentdirective/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
35 changes: 29 additions & 6 deletions files/en-us/web/api/fragmentdirective/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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

Expand Down

0 comments on commit f7e5cd5

Please sign in to comment.