SnippetVamp

Never spend tima searching your snippets again !

Welcome to my SnippetVamp space !

1 - recharger la page pour casser le post - helium 
tools::redirectTo($_SERVER['REQUEST_SCHEME'].'://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']);
2 - HTML5 base 
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <meta name="text-scale" content="scale">

  <title>Unique page title - My Site</title>

  <script src="/js/render-blocking-scripts.js"></script>
  <script>
    document.documentElement.classList.replace('no-js', 'js');
  </script>

  <link rel="stylesheet" href="/css/styles.css">
  <link rel="stylesheet" href="/css/print.css" media="print">

  <script src="/js/non-render-blocking-script.js" type="module"></script>

  <link rel="icon" href="/favicon.ico">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/site.webmanifest">

  <link rel="canonical" href="https://web.site/page">
  <link rel="alternate" type="text/markdown" href="https://web.site/page.md">
  <link rel="me" href="https://mastodon.social/@username">
  <link rel="site.standard.publication" href="at://[DID]/site.standard.publication/[RKEY]">

  <meta name="description" content="Page description">
  <meta property="og:image" content="https://web.site/sm.jpg">
  <meta property="og:url" content="https://web.site/page">
  <meta name="theme-color" content="#FF5302">
  <meta property="fediverse:creator" content="@user@mastodon.social" >
</head>

<body>
  <!-- Content -->
  <script src="/js/non-render-blocking-script.js"></script>
</body>
</html>
5 - reveal password avec has() - nojs 
<div class="reveal">
        <input class="secret-mask" type="text" value="oxide-ink" autocomplete="off" spellcheck="false">
        <label class="reveal-eye">
          <input type="checkbox" aria-label="Show the password">
          <span class="reveal-eye-mark"></span>
        </label>
      </div>

// css
.secret-mask { -webkit-text-security: disc; }
.reveal:has(:checked) .secret-mask {
  -webkit-text-security: none;
}
6 - tabs avec has() - nojs 
<div class="tabs">
      <div class="tab-list">
        <input type="radio" name="lab-tabs" id="tab-markup" checked="">
        <label for="tab-markup">Markup</label>
        <input type="radio" name="lab-tabs" id="tab-css">
        <label for="tab-css">CSS</label>
        <input type="radio" name="lab-tabs" id="tab-fallback">
        <label for="tab-fallback">Fallback</label>
      </div>
      <div class="panel panel-markup">
        <p>Radios in a group, labels beside them, panels as siblings. The URL does not change. If you need a shareable tab, use <code>:target</code> and one heading per fragment instead.</p>
      </div>
      <div class="panel panel-css">
        <p>The rule is one line of intent: when this id is checked, show that panel. Everything else is border paint so the selected label reads as a tab.</p>
      </div>
      <div class="panel panel-fallback">
        <p>Without <code>:has()</code> every panel would show. That engine is gone from the current Baseline set. If you must support a crawler without CSS, keep the same words in the document order so they still read top to bottom.</p>
      </div>
    </div>

// CSS
.tabs:has(#tab-css:checked) .panel-css {
  display: block;
}

# Requiert une rêgle css par tab...
8 - message état temporisé - nojs 
<button popovertarget="a" popovertargetaction="show">
  Show a toast
</button>
<button popovertarget="b" popovertargetaction="show">
  Show a toast
</button>
<div id="a" popover="auto" role="status">…</div>
<div id="b" popover="auto" role="status">…</div>

.toast:popover-open {
  animation: toast-life 5s forwards;
}