JavaScriptを使用したSvelteの強化

我々はすべての“モバイル最初の”デザインについて聞いたが、JavaScriptの最後の?それは本当に固執するためにcatacher名を必要とするでしょう、しかし、JavaScriptが無効になったか、失敗したとしても、基本的なサイト機能が働くのがどれくらい重要かについて、我々の多くは無視します.JavaScriptを無効にすると、Webを閲覧する本当の痛みをすることができますが、それはあなたが期待するより多くの発生します.
私の信頼Kobo Aura H20 しかし、JavaScriptが無効にされ、率直にハードウェアが近代的なJSヘビーサイトを処理することができる方法はありません.ニューヨークの地下鉄に乗るとすぐにどのようにあなたのセルの信号をどのようにspottty実現することができますし、どのようにサイトが壊れたマークアップロードされますが、JavaScriptの1.3 MBの接続が終了する前に終了していないでしょう.
TLドクターClick here の例ではSvelte REPL . またはこのサイトのメニューを試して-あなたのJavaScriptを無効にし、モバイルビューを取得するには、ウィンドウを縮小すると、メニューはまだ動作します!

モバイルメニューを壊すな
The hamburger menu まだ良いか悪いかのモバイルナビゲーションデザインの王です.隠されたメニューを使用すると、最後にしたいのは、お客様のサイトを回避することができなくなっているので、彼らは無効にJSを選択するためです.さらに悪いことに、あなたのサイトがあなたのJavaScriptを完全に壊すかもしれない取り扱われていない例外を打つならば.
メニューはほぼ確実にインターフェイスされ、デザインとアニメーションを優先させる.キーは、HTMLとCSSだけで動作するようにあなたのメニューを構築することです.あなたのJavaScriptは、CSSでよくできない通知バッジまたはアニメーションのようなものでメニューを強化しなければなりません.

例に学ぶ
我々は、これがどのようにすることができるかについて見ますSvelte , しかし、同じ概念を任意のフレームワークに適用することができます.
先に行って作業例を試してみてください.一旦スクリプトがロードされるならば、メニューはSvelteのものを利用しますslide 遷移あなたのブラウザーでJSを無効にしてください、そして、我々のメニューはまだ動きます－それは動き出しません、しかし、訪問客は開いて、どんな問題も回避できません.

Svelteの基本的なヘッダー

<script>
  import { slide } from 'svelte/transition'

  let menuOpen = false
</script>

<header>
  <div class="header__top">
    <h1>Navillus</h1>
    <button on:click={() => menuOpen = !menuOpen}>
      &#9776;
    </button>
  </div>

  {#if menuOpen}
  <nav transition:slide>
    <!-- NAV LINKS GO HERE -->
  </nav>
</header>

何もまだここに行く狂気.あなたがよく知らないならばSvelte , transition:slide エントリと終了アニメーションを<nav> 要素.

メニューなしで表示
HTMLチェックボックスには擬似セレクタがあります:checked , CSSからメニューを表示/非表示にしましょう.

<header>
  <div class="header__top">
    <h1>Navillus</h1>
    <label for="toggle">&#9776;</label>
  </div>

  <input id="toggle" type="checkbox" class="sr-only"/>

  <nav>
    <!-- NAV LINKS GO HERE -->
  </nav>
</header>

<style>
  #toggle ~ nav {
    display: none;
  }

  #toggle:checked ~ nav {
    display: block;
  }
</style>

何が正確にそこに起こっている?Aの代わりに<button> がある<label> チェックボックスに接続します.CSSでnav 要素はデフォルトで隠され、チェックボックスが:checked .

両方の世界の最高

<script>
  import { onMount } from 'svelte'
  import { slide } from 'svelte/transition'

  let menuOpen = true
  let mounted = false

  onMount(() => {
    menuOpen = false
    mounted = true
  })
</script>

<header>
  <div class="header__top">
    <h1>Navillus</h1>
    <label for="toggle">&#9776;</label>
  </div>

  <input id="toggle" type="checkbox" class="sr-only" class:js={mounted} bind:checked={menuOpen} />

  {#if menuOpen}
  <nav>
    <!-- NAV LINKS GO HERE -->
  </nav>
  {/if}
</header>

<style>
  #toggle:not(.js) ~ nav {
    display: none;
  }

  #toggle:not(.js):checked ~ nav {
      display: block;
  }
</style>

何を待ちますか.
一歩一歩壊しましょう.
最初にmenuOpen が最初にtrueに設定され、SvelteonMount ライフサイクルフック.Onmountが呼ばれるならば、我々はJavaScriptサポートをして、メニューを強化することができます.
また、2番目のブールフラグを追加しましたmounted , とclass:js={mounted} 我々は、svelteを追加するにはjs コンポーネントのスクリプトがマウントされたら、チェックボックスにクラスします.
最後に、CSSは、チェックボックスが持っていない限り、メニューの表示を変更するように更新されましたjs クラス.これは、JavaScriptがマウントされてSvelte ' sが表示されるまで、CSSをショー/非表示の機能を扱うようにしましょうslide 移行は、メニューをアニメーション化する準備ができています.

Oops! It's very easy to inadvertently create accessibility bugs. When manually testing I realized the hidden checkbox wasn't binding to our menuOpen state in svelte. The code block above was updated June 2, 2021 to include bind:checked={menuOpen} to make sure keyboard users can toggle the menu after Svelte hydrates.

ボーナスポイント
スベルトuse:action 機能は、これを少し再利用できるように使用することができます.アクションは自分の完全なブログ記事に値するが、短いaction Svelteでは、HTMLノードを使用して呼び出されるマークアップを追加できます.
チェックアウトREPL example 作業例のカスタムenhance アクションmounted and onMount() 上記の論理.