Technical Manualhttps://manual.toulan.fun/en/Technical manuals and development guidesHugo -- gohugo.ioen-USWed, 10 Sep 2025 00:00:00 +0000A Comprehensive Guide to the HTML <a> Tag's rel Attribute: Safety, Privacy, and SEO Best Practiceshttps://manual.toulan.fun/en/html-a-rel-attribute-guide/Wed, 10 Sep 2025 00:00:00 +0000HenryZhttps://nodewee.github.io/nodewee@gmail.comhttps://manual.toulan.fun/en/html-a-rel-attribute-guide/Hi, I’m HenryZ.
This article discusses a pitfall that every front-end developer has encountered but often glosses over: the rel attribute of the <a> tag.
After reading this, you’ll be able to tell yourself: “From now on, whenever I use target="_blank", I’ll first write noopener and then add others as needed.”

Question One-sentence Answer
What is rel for? It tells the browser “what my relationship with that link is” and decides whether to hand over information from the previous page.
Why is it always used with target="_blank"? A new tab will get the window.opener pointer, which can tamper with the source page in reverse—this is called reverse tabnabbing.

2. The Safety Duo: noopener / noreferrer

Attribute What It Does Additional Effect Recommended Scenario
noopener Cuts off window.opener None Add to all target="_blank" links to ensure safety first
noreferrer Does not send the Referer request header Modern browsers also cut off window.opener Use when you don’t want the target site to know where you’re coming from

What does “cutting off window.opener” mean?
By default, the window.opener in a new tab points to the page that opened it.
With this “key to go back,” the new page can:

]]>CSS :has() Parent Selector and Relational Querieshttps://manual.toulan.fun/en/css-has-parent-selector/Fri, 24 Nov 2023 00:00:00 +0000HenryZhttps://nodewee.github.io/nodewee@gmail.comhttps://manual.toulan.fun/en/css-has-parent-selector/Hi, I’m HenryZ 👋.

In frontend development, we often encounter these requirements:

  • Parent element styles depending on child element states — Such as navigation bars where parent <li> needs to highlight based on whether child <a> has .active.
  • Layout changes with content — For example, CSS Grid containers switching column numbers when child elements exceed a threshold.
  • Interaction-driven parent styles — During form validation, parent <form> changes state based on the validity of internal <input> elements.

Previously, these scenarios could only rely on JavaScript: traversing the DOM to query child elements, then manually adding classes to parent elements. This not only increased code volume but also scattered logic between CSS and JS, reducing maintainability.

]]>How to Search Articles on This Sitehttps://manual.toulan.fun/en/manual-how-to-search/Thu, 07 Jul 2022 00:00:00 +0000HenryZhttps://nodewee.github.io/nodewee@gmail.comhttps://manual.toulan.fun/en/manual-how-to-search/🔍 Search Box Shortcut: Ctrl + K

Use Unix-like search command syntax.
For example, to search for articles containing both hello and world: 'hello 'world

Syntax Details:

  • Space acts as a logical AND operator,
  • Vertical bar (|) acts as a logical OR operator.
    To search for whitespace (escape whitespace), use double quotes. Example: '"hello world", to search for articles containing “hello world”.
Syntax Example Match Type Description
javascript Fuzzy match Items that fuzzy match javascript
=scheme Exact match Items that are exactly scheme
'python Contains Items that include python
!ruby Does not contain Items that do not include ruby
^java Starts with specified chars Content that starts with java
!^erlang Does not start with Content that does not start with erlang
.js$ Ends with Content that ends with .js
!.go$ Does not end with Content that does not end with .go

Written by HenryZ

]]>