Responsive Link Targets by Viewport Width – Rink.js

Rink.js is a dependency-free JavaScript utility that changes an anchor element’s target value at specific viewport widths you defined.

Responsive rules live in HTML data attributes. A link can keep _self on narrow layouts, switch to _blank after a standard breakpoint, or use _parent and _top inside framed interfaces.

The library initializes after the DOM loads, listens for viewport changes, and watches for links inserted later. Standard thresholds match Bootstrap’s sm, md, lg, xl, and xxl widths.

Features:

• Data attribute rules for responsive anchor targets.
• Standard thresholds at 576, 768, 992, 1200, and 1400 pixels.
• Custom minimum widths through numeric attribute suffixes.
• Original target restoration below configured thresholds.
• Automatic discovery of links added after the initial page load.
• Debounced target updates during window resizing.
• Runtime controls for scanning, refreshing, pausing, resuming, and configuration.

How to use it:

1. Download and load the minified browser build in your document.

<script src="rink.min.js"></script>

2. The link below keeps _self below 768 pixels and switches to _blank from 768 pixels upward.

Keep rel="noopener" on links that may open a new browsing context. The HTML data attribute value accepts any valid anchor target, including _self, _blank, _parent, _top, or a named browsing context.

<a
  href="https://cssscript.com"
  target="_self"
  rel="noopener"
  data-rink-js-md="_blank">
  Open the reference
</a>

3. Standard breakpoint attributes:

• data-rink-js-sm: Applies from 576 pixels.
• data-rink-js-md: Applies from 768 pixels.
• data-rink-js-lg: Applies from 992 pixels.
• data-rink-js-xl: Applies from 1200 pixels.
• data-rink-js-xxl: Applies from 1400 pixels.

4. Numeric suffixes create project-specific minimum-width rules. At widths below 900 pixels, Rink.js restores the _self value from the original markup.

<a
  href="/reports/quarterly"
  target="_self"
  rel="noopener"
  data-rink-js-900="_blank">
  Quarterly report
</a>

5. Available configuration options.

• responsiveDelay (number, default 250): Sets the resize debounce delay in milliseconds.
• defaultTarget (string, default "_self"): Supplies a fallback when an anchor has no original target.
• removeAttributes (boolean, default true): Removes Rink.js data attributes after they are processed.
• enabled (boolean, default true): Controls whether responsive target updates run.
• observationMode (boolean, default true): Watches the document for inserted or changed elements.

$rink.setConfiguration({
  responsiveDelay: 150,
  defaultTarget: "_self",
  removeAttributes: false,
  enabled: true,
  observationMode: true
});

6. Observation mode detects anchors inserted after the initial page load. An explicit fetch() call starts an immediate scan when application code controls the render cycle.

const link = document.createElement("a");
link.href = "/downloads";
link.textContent = "Download files";
link.target = "_self";
link.setAttribute("data-rink-js-1024", "_blank");
link.setAttribute("rel", "noopener");
document.querySelector("#resource-list").appendChild(link);
$rink.fetch();

7. Pause and resume responsive updates:

// Pause responsive target changes.
$rink.stop();
// Resume responsive target changes.
$rink.start();

8. More API methods:

// Scans the document for responsive link attributes.
$rink.fetch();
// Recalculates targets for previously discovered links.
$rink.refresh();
// Returns the current library version.
const version = $rink.getVersion();

Alternatives:

• Auto Add Target=”_blank” Attribute For HTTPS Links – Target Blank Validate
• Accessible Text Link Generator – ARIA Links