{"id":67856,"date":"2024-07-02T09:24:41","date_gmt":"2024-07-02T05:54:41","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/new-html-tag-an-absolute-game-changer-3j8j\/"},"modified":"2024-07-02T09:24:41","modified_gmt":"2024-07-02T05:54:41","slug":"new-html-tag-an-absolute-game-changer-3j8j","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/new-html-tag-an-absolute-game-changer-3j8j\/","title":{"rendered":"\u062a\u06af \u062c\u062f\u06cc\u062f HTML: \u06cc\u06a9 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u0637\u0644\u0642 \u0628\u0627\u0632\u06cc"},"content":{"rendered":"<p>Summarize this content to 400 words in Persian Lang <\/p>\n<p>  \u062a\u0648\u0633\u0639\u0647 Frontend \u06a9\u0647 \u062a\u0648\u0633\u0637 New \u062a\u063a\u06cc\u06cc\u0631 \u0634\u06a9\u0644 \u06cc\u0627\u0641\u062a\u0647 \u0627\u0633\u062a  \u0628\u0631\u0686\u0633\u0628 \u0628\u0632\u0646\u06cc\u062f<\/p>\n<p>  \u274c \u0642\u0628\u0644 \u0627\u0632:<\/p>\n<p>\u0627\u06cc\u062c\u0627\u062f \u062f\u06cc\u0627\u0644\u0648\u06af \u0642\u0628\u0644\u0627\u064b \u06cc\u06a9 \u06a9\u0627\u0631 \u0633\u062e\u062a \u0628\u0648\u062f.  \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0686\u0642\u062f\u0631 \u06a9\u0627\u0631 \u0637\u0648\u0644 \u06a9\u0634\u06cc\u062f:<\/p>\n<p> class=&#8221;dialog-overlay&#8221;&gt;<br \/>\n   class=&#8221;dialog&#8221;&gt;<br \/>\n    Dialog content&#8230;<br \/>\n     class=&#8221;close-button&#8221;&gt;Close<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\/* CSS for the dialog *\/<br \/>\n.dialog-overlay {<br \/>\n  position: fixed;<br \/>\n  top: 0;<br \/>\n  left: 0;<br \/>\n  width: 100%;<br \/>\n  height: 100%;<br \/>\n  background: rgba(0, 0, 0, 0.5);<br \/>\n  display: flex;<br \/>\n  justify-content: center;<br \/>\n  align-items: center;<br \/>\n}<\/p>\n<p>.dialog {<br \/>\n  background: white;<br \/>\n  padding: 20px;<br \/>\n  border-radius: 5px;<br \/>\n}<\/p>\n<p>.close-button {<br \/>\n  background: #f44336;<br \/>\n  color: white;<br \/>\n  border: none;<br \/>\n  padding: 10px;<br \/>\n  cursor: pointer;<br \/>\n}<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0648 \u0627\u06cc\u0646 \u0641\u0642\u0637 CSS \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u0635\u0644\u06cc \u06af\u0641\u062a\u06af\u0648 \u0627\u0633\u062a.  \u0647\u0646\u0648\u0632 \u0647\u0645 \u0628\u0633\u06cc\u0627\u0631 \u0633\u0627\u062f\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f \u0648 \u0628\u0631\u0627\u06cc \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u0648 \u0628\u0633\u062a\u0646 \u06af\u0641\u062a\u06af\u0648 \u0628\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0636\u0627\u0641\u06cc \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f.<\/p>\n<p>  \u2705 \u0627\u06a9\u0646\u0648\u0646:<\/p>\n<p>\u0628\u0627 \u062c\u062f\u06cc\u062f  \u0628\u0631\u0686\u0633\u0628\u060c \u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0627 \u062a\u0644\u0627\u0634 \u0628\u0633\u06cc\u0627\u0631 \u06a9\u0645\u062a\u0631\u06cc \u0628\u0647 \u0647\u0645\u06cc\u0646 \u0639\u0645\u0644\u06a9\u0631\u062f \u062f\u0633\u062a \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u0645.<\/p>\n<p>  Dialog content&#8230;<br \/>\n   class=&#8221;close-button&#8221;&gt;Close<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\/\/ JavaScript to show and close the dialog<br \/>\nconst dialog = document.querySelector(&#8216;dialog&#8217;);<br \/>\ndialog.showModal(); \/\/ To show the dialog<br \/>\ndialog.querySelector(&#8216;.close-button&#8217;).addEventListener(&#8216;click&#8217;, () =&gt; dialog.close());<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0645\u0627 \u062d\u062a\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 show() \u0631\u0648\u0634\u06cc \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u06cc\u0627\u0644\u0648\u06af \u063a\u06cc\u0631 \u0645\u062f\u0627\u0644\u060c \u06a9\u0647 \u06a9\u0645\u062a\u0631 \u0645\u0632\u0627\u062d\u0645 \u0627\u0633\u062a \u0632\u06cc\u0631\u0627 \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u0646\u062f\u0627\u0631\u062f.<\/p>\n<p>\/\/ JavaScript to show a non-modal dialog<br \/>\nconst dialog = document.querySelector(&#8216;dialog&#8217;);<br \/>\ndialog.show(); \/\/ To show a non-modal dialog<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>  \u062f\u06cc\u0627\u0644\u0648\u06af \u0647\u0627: \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 UI \u062d\u06cc\u0627\u062a\u06cc<\/p>\n<p>\u062f\u06cc\u0627\u0644\u0648\u06af \u0647\u0627 \u0647\u0645\u06cc\u0634\u0647 \u0627\u0628\u0632\u0627\u0631\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0628\u0631\u0627\u06cc \u062c\u0644\u0628 \u062a\u0648\u062c\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0648 \u0627\u0631\u0627\u0626\u0647 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0645\u0647\u0645 \u0628\u0648\u062f\u0647 \u0627\u0646\u062f.  \u0622\u0646\u0647\u0627 \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u06a9\u0644\u06cc\u062f\u06cc \u062f\u0631 \u0647\u0631 \u0633\u06cc\u0633\u062a\u0645 \u0637\u0631\u0627\u062d\u06cc UI \u0647\u0633\u062a\u0646\u062f\u060c \u0627\u0632 \u0637\u0631\u0627\u062d\u06cc \u0645\u062a\u0631\u06cc\u0627\u0644 \u062a\u0627 \u0637\u0631\u0627\u062d\u06cc \u0631\u0648\u0627\u0646.<\/p>\n<p>\u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u06cc\u0627\u0644\u0648\u06af \u0647\u0627 \u0627\u063a\u0644\u0628 \u0628\u0647 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u0634\u062e\u0635 \u062b\u0627\u0644\u062b \u06cc\u0627 \u0627\u062c\u0632\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f.  \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627 \u0627\u0632 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0648\u0634\u200c\u0647\u0627 \u0628\u0631\u0627\u06cc \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0648 \u062f\u0633\u062a\u0631\u0633\u06cc\u060c \u0645\u0627\u0646\u0646\u062f \u0631\u062f \u06a9\u0631\u062f\u0646 \u06af\u0641\u062a\u06af\u0648 \u0628\u0627 \u06a9\u0644\u06cc\u062f Escape\u060c \u067e\u06cc\u0631\u0648\u06cc \u0646\u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n<p>\u062c\u062f\u06cc\u062f  \u0628\u0631\u0686\u0633\u0628 \u0647\u0645\u0647 \u0627\u06cc\u0646\u0647\u0627 \u0631\u0627 \u0633\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>  \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u062e\u0648\u062f\u06a9\u0627\u0631 \u06af\u0641\u062a\u06af\u0648<\/p>\n<p>\u0631\u0627 open \u0648\u06cc\u0698\u06af\u06cc \u06af\u0641\u062a\u06af\u0648 \u0631\u0627 \u0627\u0632 \u0644\u062d\u0638\u0647 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0635\u0641\u062d\u0647 \u0628\u0627\u0632 \u0646\u06af\u0647 \u0645\u06cc \u062f\u0627\u0631\u062f:<\/p>\n<p> open&gt;<br \/>\n  Auto-open dialog content&#8230;<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>  \u062f\u06a9\u0645\u0647 \u0628\u0633\u062a\u0646 \u062e\u0648\u062f\u06a9\u0627\u0631<\/p>\n<p>\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0639\u0645\u0644\u06a9\u0631\u062f\u0647\u0627\u06cc \u0646\u0632\u062f\u06cc\u06a9 \u0631\u0627 \u0628\u0627 \u0634\u0646\u0648\u0646\u062f\u06af\u0627\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f close() \u0631\u0648\u0634\u060c \u0627\u0645\u0627 \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a  \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u062d\u062a\u06cc \u0633\u0627\u062f\u0647 \u062a\u0631 \u0645\u06cc \u06a9\u0646\u062f &#8211; \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a.<\/p>\n<p>  Dialog content&#8230;<br \/>\n   class=&#8221;close-button&#8221; onclick=&#8221;this.closest(&#8216;dialog&#8217;).close()&#8221;&gt;Close<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>  \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647  \u0628\u0631\u0686\u0633\u0628 \u0628\u0632\u0646\u06cc\u062f<\/p>\n<p>\u0631\u0627  \u0628\u0631\u0686\u0633\u0628 \u062e\u0627\u0635\u06cc \u062f\u0627\u0631\u062f ::backdrop \u0634\u0628\u0647 \u0639\u0646\u0635\u0631 \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647.<\/p>\n<p>dialog::backdrop {<br \/>\n  background: rgba(0, 0, 0, 0.5);<br \/>\n}<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0633\u0628\u06a9 \u062f\u0627\u062f\u0646 \u0628\u0647 \u0639\u0646\u0635\u0631 \u0627\u0635\u0644\u06cc \u0633\u0627\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<p>dialog {<br \/>\n  background: white;<br \/>\n  padding: 20px;<br \/>\n  border-radius: 5px;<br \/>\n  border: none;<br \/>\n}<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>  \u0627\u0641\u06a9\u0627\u0631 \u0646\u0647\u0627\u06cc\u06cc<\/p>\n<p>\u0628\u0627 HTML \u062c\u062f\u06cc\u062f  \u062a\u06af\u060c \u0627\u06cc\u062c\u0627\u062f \u0645\u062f\u0627\u0644 \u0647\u0627 \u0648 \u062f\u06cc\u0627\u0644\u0648\u06af \u0647\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0648\u0628 \u0645\u0627 \u0647\u0631\u06af\u0632 \u0622\u0633\u0627\u0646 \u062a\u0631 \u0648 \u0633\u0631\u06cc\u0639 \u062a\u0631 \u0646\u0628\u0648\u062f\u0647 \u0627\u0633\u062a.  \u0627\u06cc\u0646 \u062a\u06af \u067e\u06cc\u0686\u06cc\u062f\u06af\u06cc \u0627\u062c\u0631\u0627\u06cc \u062f\u06cc\u0627\u0644\u0648\u06af \u0647\u0627 \u0631\u0627 \u0628\u0647 \u0645\u06cc\u0632\u0627\u0646 \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647\u06cc \u06a9\u0627\u0647\u0634 \u0645\u06cc \u062f\u0647\u062f\u060c \u062f\u0633\u062a\u0631\u0633\u06cc \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0628\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647 \u0647\u0627 \u0631\u0627 \u0628\u062f\u0648\u0646 \u0632\u062d\u0645\u062a \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u0646\u062f.\u0644\u0637\u0641\u0627 \u0648\u0628\u0644\u0627\u06af \u0645\u0646 \u0631\u0627 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0628\u06af\u0630\u0627\u0631\u06cc\u062f \u0648 \u0647\u0631 \u0637\u0648\u0631 \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0648\u0627\u06a9\u0646\u0634 \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u062f &#8230;<\/p>\n<p>\u0628\u0627 \u0645\u0646 \u062f\u0631 https:\/\/topmate.io\/manojgohel \u0645\u0644\u0627\u0642\u0627\u062a \u06a9\u0646\u06cc\u062f<\/p>\n<div data-article-id=\"1908400\" id=\"article-body\">\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/new-html-tag-an-absolute-game-changer-3j8j\/#%D8%AA%D9%88%D8%B3%D8%B9%D9%87_Frontend_%DA%A9%D9%87_%D8%AA%D9%88%D8%B3%D8%B7_New_%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1_%D8%B4%DA%A9%D9%84_%DB%8C%D8%A7%D9%81%D8%AA%D9%87_%D8%A7%D8%B3%D8%AA_%D8%A8%D8%B1%DA%86%D8%B3%D8%A8_%D8%A8%D8%B2%D9%86%DB%8C%D8%AF\" >\u062a\u0648\u0633\u0639\u0647 Frontend \u06a9\u0647 \u062a\u0648\u0633\u0637 New \u062a\u063a\u06cc\u06cc\u0631 \u0634\u06a9\u0644 \u06cc\u0627\u0641\u062a\u0647 \u0627\u0633\u062a  \u0628\u0631\u0686\u0633\u0628 \u0628\u0632\u0646\u06cc\u062f<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/new-html-tag-an-absolute-game-changer-3j8j\/#%E2%9D%8C_%D9%82%D8%A8%D9%84_%D8%A7%D8%B2\" >\u274c \u0642\u0628\u0644 \u0627\u0632:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/new-html-tag-an-absolute-game-changer-3j8j\/#%E2%9C%85_%D8%A7%DA%A9%D9%86%D9%88%D9%86\" >\u2705 \u0627\u06a9\u0646\u0648\u0646:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/new-html-tag-an-absolute-game-changer-3j8j\/#%D8%AF%DB%8C%D8%A7%D9%84%D9%88%DA%AF_%D9%87%D8%A7_%DB%8C%DA%A9_%D9%85%D8%A4%D9%84%D9%81%D9%87_UI_%D8%AD%DB%8C%D8%A7%D8%AA%DB%8C\" >\u062f\u06cc\u0627\u0644\u0648\u06af \u0647\u0627: \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 UI \u062d\u06cc\u0627\u062a\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/new-html-tag-an-absolute-game-changer-3j8j\/#%D8%A8%D8%A7%D8%B2_%DA%A9%D8%B1%D8%AF%D9%86_%D8%AE%D9%88%D8%AF%DA%A9%D8%A7%D8%B1_%DA%AF%D9%81%D8%AA%DA%AF%D9%88\" >\u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u062e\u0648\u062f\u06a9\u0627\u0631 \u06af\u0641\u062a\u06af\u0648<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/new-html-tag-an-absolute-game-changer-3j8j\/#%D8%AF%DA%A9%D9%85%D9%87_%D8%A8%D8%B3%D8%AA%D9%86_%D8%AE%D9%88%D8%AF%DA%A9%D8%A7%D8%B1\" >\u062f\u06a9\u0645\u0647 \u0628\u0633\u062a\u0646 \u062e\u0648\u062f\u06a9\u0627\u0631<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/new-html-tag-an-absolute-game-changer-3j8j\/#%DB%8C%DA%A9_%D8%B8%D8%A7%D9%87%D8%B1_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D8%B4%D8%AF%D9%87_%D8%A8%D8%B1%DA%86%D8%B3%D8%A8_%D8%A8%D8%B2%D9%86%DB%8C%D8%AF\" >\u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647  \u0628\u0631\u0686\u0633\u0628 \u0628\u0632\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/new-html-tag-an-absolute-game-changer-3j8j\/#%D8%A7%D9%81%DA%A9%D8%A7%D8%B1_%D9%86%D9%87%D8%A7%DB%8C%DB%8C\" >\u0627\u0641\u06a9\u0627\u0631 \u0646\u0647\u0627\u06cc\u06cc<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AA%D9%88%D8%B3%D8%B9%D9%87_Frontend_%DA%A9%D9%87_%D8%AA%D9%88%D8%B3%D8%B7_New_%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1_%D8%B4%DA%A9%D9%84_%DB%8C%D8%A7%D9%81%D8%AA%D9%87_%D8%A7%D8%B3%D8%AA_%D8%A8%D8%B1%DA%86%D8%B3%D8%A8_%D8%A8%D8%B2%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u062a\u0648\u0633\u0639\u0647 Frontend \u06a9\u0647 \u062a\u0648\u0633\u0637 New \u062a\u063a\u06cc\u06cc\u0631 \u0634\u06a9\u0644 \u06cc\u0627\u0641\u062a\u0647 \u0627\u0633\u062a <code><dialog\/><\/code> \u0628\u0631\u0686\u0633\u0628 \u0628\u0632\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h4><span class=\"ez-toc-section\" id=\"%E2%9D%8C_%D9%82%D8%A8%D9%84_%D8%A7%D8%B2\"><\/span>\n<p>  \u274c \u0642\u0628\u0644 \u0627\u0632:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0627\u06cc\u062c\u0627\u062f \u062f\u06cc\u0627\u0644\u0648\u06af \u0642\u0628\u0644\u0627\u064b \u06cc\u06a9 \u06a9\u0627\u0631 \u0633\u062e\u062a \u0628\u0648\u062f.  \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0686\u0642\u062f\u0631 \u06a9\u0627\u0631 \u0637\u0648\u0644 \u06a9\u0634\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"c\"><!-- HTML for the dialog --><\/span>\n<span class=\"nt\"><div> <span class=\"na\">class=<\/span><span class=\"s\">\"dialog-overlay\"<\/span><span class=\"nt\">&gt;<\/span>\n  <span class=\"nt\"><div> <span class=\"na\">class=<\/span><span class=\"s\">\"dialog\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\"\/>Dialog content...<span class=\"nt\"\/>\n    <span class=\"nt\"><button> <span class=\"na\">class=<\/span><span class=\"s\">\"close-button\"<\/span><span class=\"nt\">&gt;<\/span>Close<span class=\"nt\"\/><\/button><\/span>\n  <span class=\"nt\"\/><\/div><\/span>\n<span class=\"nt\"\/><\/div><\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"c\">\/* CSS for the dialog *\/<\/span>\n<span class=\"nc\">.dialog-overlay<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">position<\/span><span class=\"p\">:<\/span> <span class=\"nb\">fixed<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">top<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">left<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">100%<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">height<\/span><span class=\"p\">:<\/span> <span class=\"m\">100%<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.5<\/span><span class=\"p\">);<\/span>\n  <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">justify-content<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">align-items<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.dialog<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"no\">white<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">20px<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"m\">5px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.close-button<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"m\">#f44336<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"no\">white<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">border<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">10px<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">cursor<\/span><span class=\"p\">:<\/span> <span class=\"nb\">pointer<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0648 \u0627\u06cc\u0646 \u0641\u0642\u0637 CSS \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u0635\u0644\u06cc \u06af\u0641\u062a\u06af\u0648 \u0627\u0633\u062a.  \u0647\u0646\u0648\u0632 \u0647\u0645 \u0628\u0633\u06cc\u0627\u0631 \u0633\u0627\u062f\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f \u0648 \u0628\u0631\u0627\u06cc \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u0648 \u0628\u0633\u062a\u0646 \u06af\u0641\u062a\u06af\u0648 \u0628\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0636\u0627\u0641\u06cc \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"%E2%9C%85_%D8%A7%DA%A9%D9%86%D9%88%D9%86\"><\/span>\n<p>  \u2705 \u0627\u06a9\u0646\u0648\u0646:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0628\u0627 \u062c\u062f\u06cc\u062f <code><dialog\/><\/code> \u0628\u0631\u0686\u0633\u0628\u060c \u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0627 \u062a\u0644\u0627\u0634 \u0628\u0633\u06cc\u0627\u0631 \u06a9\u0645\u062a\u0631\u06cc \u0628\u0647 \u0647\u0645\u06cc\u0646 \u0639\u0645\u0644\u06a9\u0631\u062f \u062f\u0633\u062a \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"c\"><!-- HTML using <dialog> --><\/span>\n<span class=\"nt\"><dialog\/><\/span>\n  <span class=\"nt\"\/>Dialog content...<span class=\"nt\"\/>\n  <span class=\"nt\"><button> <span class=\"na\">class=<\/span><span class=\"s\">\"close-button\"<\/span><span class=\"nt\">&gt;<\/span>Close<span class=\"nt\"\/><\/button><\/span>\n<span class=\"nt\"\/>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ JavaScript to show and close the dialog<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">dialog<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">querySelector<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">dialog<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"nx\">dialog<\/span><span class=\"p\">.<\/span><span class=\"nf\">showModal<\/span><span class=\"p\">();<\/span> <span class=\"c1\">\/\/ To show the dialog<\/span>\n<span class=\"nx\">dialog<\/span><span class=\"p\">.<\/span><span class=\"nf\">querySelector<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.close-button<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">click<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">dialog<\/span><span class=\"p\">.<\/span><span class=\"nf\">close<\/span><span class=\"p\">());<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0627 \u062d\u062a\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 <code>show()<\/code> \u0631\u0648\u0634\u06cc \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u06cc\u0627\u0644\u0648\u06af \u063a\u06cc\u0631 \u0645\u062f\u0627\u0644\u060c \u06a9\u0647 \u06a9\u0645\u062a\u0631 \u0645\u0632\u0627\u062d\u0645 \u0627\u0633\u062a \u0632\u06cc\u0631\u0627 \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u0646\u062f\u0627\u0631\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ JavaScript to show a non-modal dialog<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">dialog<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">querySelector<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">dialog<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"nx\">dialog<\/span><span class=\"p\">.<\/span><span class=\"nf\">show<\/span><span class=\"p\">();<\/span> <span class=\"c1\">\/\/ To show a non-modal dialog<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"%D8%AF%DB%8C%D8%A7%D9%84%D9%88%DA%AF_%D9%87%D8%A7_%DB%8C%DA%A9_%D9%85%D8%A4%D9%84%D9%81%D9%87_UI_%D8%AD%DB%8C%D8%A7%D8%AA%DB%8C\"><\/span>\n<p>  \u062f\u06cc\u0627\u0644\u0648\u06af \u0647\u0627: \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 UI \u062d\u06cc\u0627\u062a\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u062f\u06cc\u0627\u0644\u0648\u06af \u0647\u0627 \u0647\u0645\u06cc\u0634\u0647 \u0627\u0628\u0632\u0627\u0631\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0628\u0631\u0627\u06cc \u062c\u0644\u0628 \u062a\u0648\u062c\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0648 \u0627\u0631\u0627\u0626\u0647 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0645\u0647\u0645 \u0628\u0648\u062f\u0647 \u0627\u0646\u062f.  \u0622\u0646\u0647\u0627 \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u06a9\u0644\u06cc\u062f\u06cc \u062f\u0631 \u0647\u0631 \u0633\u06cc\u0633\u062a\u0645 \u0637\u0631\u0627\u062d\u06cc UI \u0647\u0633\u062a\u0646\u062f\u060c \u0627\u0632 \u0637\u0631\u0627\u062d\u06cc \u0645\u062a\u0631\u06cc\u0627\u0644 \u062a\u0627 \u0637\u0631\u0627\u062d\u06cc \u0631\u0648\u0627\u0646.<\/p>\n<p>\u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u06cc\u0627\u0644\u0648\u06af \u0647\u0627 \u0627\u063a\u0644\u0628 \u0628\u0647 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u0634\u062e\u0635 \u062b\u0627\u0644\u062b \u06cc\u0627 \u0627\u062c\u0632\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f.  \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627 \u0627\u0632 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0648\u0634\u200c\u0647\u0627 \u0628\u0631\u0627\u06cc \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0648 \u062f\u0633\u062a\u0631\u0633\u06cc\u060c \u0645\u0627\u0646\u0646\u062f \u0631\u062f \u06a9\u0631\u062f\u0646 \u06af\u0641\u062a\u06af\u0648 \u0628\u0627 \u06a9\u0644\u06cc\u062f Escape\u060c \u067e\u06cc\u0631\u0648\u06cc \u0646\u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n<p>\u062c\u062f\u06cc\u062f <code><dialog\/><\/code> \u0628\u0631\u0686\u0633\u0628 \u0647\u0645\u0647 \u0627\u06cc\u0646\u0647\u0627 \u0631\u0627 \u0633\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"%D8%A8%D8%A7%D8%B2_%DA%A9%D8%B1%D8%AF%D9%86_%D8%AE%D9%88%D8%AF%DA%A9%D8%A7%D8%B1_%DA%AF%D9%81%D8%AA%DA%AF%D9%88\"><\/span>\n<p>  \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u062e\u0648\u062f\u06a9\u0627\u0631 \u06af\u0641\u062a\u06af\u0648<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0631\u0627 <code>open<\/code> \u0648\u06cc\u0698\u06af\u06cc \u06af\u0641\u062a\u06af\u0648 \u0631\u0627 \u0627\u0632 \u0644\u062d\u0638\u0647 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0635\u0641\u062d\u0647 \u0628\u0627\u0632 \u0646\u06af\u0647 \u0645\u06cc \u062f\u0627\u0631\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"nt\"><dialog> <span class=\"na\">open<\/span><span class=\"nt\">&gt;<\/span>\n  <span class=\"nt\"\/>Auto-open dialog content...<span class=\"nt\"\/>\n<span class=\"nt\"\/><\/dialog><\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"%D8%AF%DA%A9%D9%85%D9%87_%D8%A8%D8%B3%D8%AA%D9%86_%D8%AE%D9%88%D8%AF%DA%A9%D8%A7%D8%B1\"><\/span>\n<p>  \u062f\u06a9\u0645\u0647 \u0628\u0633\u062a\u0646 \u062e\u0648\u062f\u06a9\u0627\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0639\u0645\u0644\u06a9\u0631\u062f\u0647\u0627\u06cc \u0646\u0632\u062f\u06cc\u06a9 \u0631\u0627 \u0628\u0627 \u0634\u0646\u0648\u0646\u062f\u06af\u0627\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>close()<\/code> \u0631\u0648\u0634\u060c \u0627\u0645\u0627 \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a <code><dialog\/><\/code> \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u062d\u062a\u06cc \u0633\u0627\u062f\u0647 \u062a\u0631 \u0645\u06cc \u06a9\u0646\u062f &#8211; \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"nt\"><dialog\/><\/span>\n  <span class=\"nt\"\/>Dialog content...<span class=\"nt\"\/>\n  <span class=\"nt\"><button> <span class=\"na\">class=<\/span><span class=\"s\">\"close-button\"<\/span> <span class=\"na\">onclick=<\/span><span class=\"s\">\"this.closest('dialog').close()\"<\/span><span class=\"nt\">&gt;<\/span>Close<span class=\"nt\"\/><\/button><\/span>\n<span class=\"nt\"\/>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"%DB%8C%DA%A9_%D8%B8%D8%A7%D9%87%D8%B1_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D8%B4%D8%AF%D9%87_%D8%A8%D8%B1%DA%86%D8%B3%D8%A8_%D8%A8%D8%B2%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 <code><dialog\/><\/code> \u0628\u0631\u0686\u0633\u0628 \u0628\u0632\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0631\u0627 <code><dialog\/><\/code> \u0628\u0631\u0686\u0633\u0628 \u062e\u0627\u0635\u06cc \u062f\u0627\u0631\u062f <code>::backdrop<\/code> \u0634\u0628\u0647 \u0639\u0646\u0635\u0631 \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nt\">dialog<\/span><span class=\"nd\">::backdrop<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.5<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0633\u0628\u06a9 \u062f\u0627\u062f\u0646 \u0628\u0647 \u0639\u0646\u0635\u0631 \u0627\u0635\u0644\u06cc \u0633\u0627\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nt\">dialog<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"no\">white<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">20px<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"m\">5px<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">border<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"%D8%A7%D9%81%DA%A9%D8%A7%D8%B1_%D9%86%D9%87%D8%A7%DB%8C%DB%8C\"><\/span>\n<p>  \u0627\u0641\u06a9\u0627\u0631 \u0646\u0647\u0627\u06cc\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0628\u0627 HTML \u062c\u062f\u06cc\u062f <code><dialog\/><\/code> \u062a\u06af\u060c \u0627\u06cc\u062c\u0627\u062f \u0645\u062f\u0627\u0644 \u0647\u0627 \u0648 \u062f\u06cc\u0627\u0644\u0648\u06af \u0647\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0648\u0628 \u0645\u0627 \u0647\u0631\u06af\u0632 \u0622\u0633\u0627\u0646 \u062a\u0631 \u0648 \u0633\u0631\u06cc\u0639 \u062a\u0631 \u0646\u0628\u0648\u062f\u0647 \u0627\u0633\u062a.  \u0627\u06cc\u0646 \u062a\u06af \u067e\u06cc\u0686\u06cc\u062f\u06af\u06cc \u0627\u062c\u0631\u0627\u06cc \u062f\u06cc\u0627\u0644\u0648\u06af \u0647\u0627 \u0631\u0627 \u0628\u0647 \u0645\u06cc\u0632\u0627\u0646 \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647\u06cc \u06a9\u0627\u0647\u0634 \u0645\u06cc \u062f\u0647\u062f\u060c \u062f\u0633\u062a\u0631\u0633\u06cc \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0628\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647 \u0647\u0627 \u0631\u0627 \u0628\u062f\u0648\u0646 \u0632\u062d\u0645\u062a \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u0646\u062f.<br \/>\u0644\u0637\u0641\u0627 \u0648\u0628\u0644\u0627\u06af \u0645\u0646 \u0631\u0627 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0628\u06af\u0630\u0627\u0631\u06cc\u062f \u0648 \u0647\u0631 \u0637\u0648\u0631 \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0648\u0627\u06a9\u0646\u0634 \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u062f &#8230;<\/p>\n<p>\u0628\u0627 \u0645\u0646 \u062f\u0631 https:\/\/topmate.io\/manojgohel \u0645\u0644\u0627\u0642\u0627\u062a \u06a9\u0646\u06cc\u062f<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Summarize this content to 400 words in Persian Lang \u062a\u0648\u0633\u0639\u0647 Frontend \u06a9\u0647 \u062a\u0648\u0633\u0637 New \u062a\u063a\u06cc\u06cc\u0631 \u0634\u06a9\u0644 \u06cc\u0627\u0641\u062a\u0647 \u0627\u0633\u062a \u0628\u0631\u0686\u0633\u0628 \u0628\u0632\u0646\u06cc\u062f \u274c \u0642\u0628\u0644 \u0627\u0632: \u0627\u06cc\u062c\u0627\u062f \u062f\u06cc\u0627\u0644\u0648\u06af \u0642\u0628\u0644\u0627\u064b \u06cc\u06a9 \u06a9\u0627\u0631 \u0633\u062e\u062a \u0628\u0648\u062f. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0686\u0642\u062f\u0631 \u06a9\u0627\u0631 \u0637\u0648\u0644 \u06a9\u0634\u06cc\u062f: class=&#8221;dialog-overlay&#8221;&gt; class=&#8221;dialog&#8221;&gt; Dialog content&#8230; class=&#8221;close-button&#8221;&gt;Close \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f &hellip;<\/p>\n","protected":false},"author":2,"featured_media":67857,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-67856","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/67856","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=67856"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/67856\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/67857"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=67856"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=67856"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=67856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}