移行

既存のUIkitウェブサイトを最新バージョンに移行します。

UIkit 3.17 から 3.18 への移行

カスタムUIkitスタイルを作成し、`*-color-mode` 変数をオーバーライドした場合、それが `light` または `dark` に設定されていることを確認してください。 `none` に設定したり、空にすることはできません。

UIkit 3.18 では、プライマリおよびセカンダリスタイルモディファイアと同様に、セクション、タイル、カード、オーバーレイコンポーネントのデフォルトおよびミュートスタイルモディファイアに新しい `*-color-mode` Less変数が導入されました。デフォルトのUIkitスタイルには明るい背景があるため、そのカラーモード変数はデフォルトでdarkに設定されています。カラーモード変数が反対の色に変更される暗いカスタムUIkitスタイルがある場合は、新しいカラーモード変数もlightに変更する必要があります。

// For dark UIkit styles only 

@card-default-color-mode: light;

@overlay-default-color-mode: light;

@section-default-color-mode: light;
@section-muted-color-mode: light;

@tile-default-color-mode: light;
@tile-muted-color-mode: light;

UIkit 3.16 から 3.17 への移行

スクロールコンポーネント は、スティッキー要素、例えばスティッキーナビゲーションバーの高さを、スクロールターゲットへのオフセットとして自動的に追加するようになり、スティッキー要素で覆われないようになりました。スティッキー要素に既にオフセットがある場合、`offset` オプションが加算されます。つまり、ナビゲーションバーがスクロールターゲットを覆わないようにするために、offsetオプションを設定する必要がなくなりました。

グリッドコンポーネント に、新しい組積造 `pack` モードが追加されました。これは、アイテムを最もスペースのある列にソートします。後方互換性を維持するために、組積造を `true` に設定すると、新しい `pack` モードが使用されます。以前のようにアイテムを自然な順序で表示するには、`next` モードを使用します。

UIkit 3.15 から 3.16 への移行

UIkit 3.16 は、ドロップコンポーネント のいくつかのクラスを簡略化します。以下のクラスを置き換えて、マークアップを更新してください。

ドロップダウン、ドロップバー、ナビゲーションバードロップダウンのCSSは、ドロップコンポーネントに基づくようになりました。そのため、個別の `z-index` Less変数はなくなりました。カスタムUIkitテーマでこれらの変数のいずれかを使用している場合は、それらを置き換える必要があります。

UIkit 3.14 から 3.15 への移行

UIkit 3.15 の ナビゲーションコンポーネント は、親アイコンをCSSにコンパイルする代わりに、JavaScriptコンポーネントを使用してナビゲーションアイテムの親アイコンを作成するようになりました。 ` .uk-nav-parent-icon` クラスを検索し、マークアップから削除します。代わりに、子を持つ各ナビゲーションアイテムに `uk-nav-parent-icon` 属性を持つ `span` を使用します。簡単な例を次に示します。

<ul class="uk-nav-default" uk-nav>
    <li class="uk-parent">
        <a href="#">Parent <span uk-nav-parent-icon></span></a>
        <ul class="uk-nav-sub">…</ul>
    </li>
</ul>

ドロップ、ドロップダウン、ナビゲーションバードロップダウン

ドロップコンポーネント、ドロップダウンコンポーネント、ナビゲーションバーコンポーネントコンポーネントは、`pos` オプションから配置 `*-justify` を削除します。 `pos: top-justify`、`pos: bottom-justify`、`pos: left-justify`、`pos: right-justify` を検索し、代わりに新しい `stretch` オプションを使用します。

`boundary-align` オプションも削除されます。 `boundary: SELECTOR` と `boundary-align: true` の組み合わせを検索し、`boundary` と同じセレクターを持つ新しい `target` オプションを代わりに使用します。

`flip` オプションは、`flip` と `shift` の2つのオプションに分割されます。次のようにオプションを更新します。

Position が `top-*` または `bottom-*` の場合

Position が `left-*` または `right-*` の場合

`display` オプションは削除されました。代わりに `auto-update` を使用します。

ナビゲーションバードロップバー

ナビゲーションバーコンポーネントのドロップバーのスタイルを削除し、代わりに新しいドロップバーコンポーネントを使用するようになりました。このため、ナビゲーションバーコンポーネントは ` .uk-navbar-dropbar` クラスに加えて、`.uk-dropbar` と `.uk-dropbar-top` を設定します。ドロップバーのマークアップを手動で配置する場合は、これらのクラスを自分で追加する必要があります。

Lessでは `@navbar-dropbar-background` 変数を削除したので、背景を設定するには、代わりに `@dropbar-background` 変数を使用します。ナビゲーションバードロップバーに適用したその他のスタイルも必ず追加してください。

Less変数

次のLess変数も名前が変更されました。カスタムLessテーマを使用している場合は、これらのLess変数を検索して置換してください。

UIkit 3.13 から 3.14 への移行

UIkit 3.14 は、スティッキーコンポーネント の `top` および `bottom` オプションの名前を `start` および `end` に変更します。

また、スティッキーコンポーネント から `position: auto` オプションを非推奨にします。代わりに、新しい `overflow-flip: true` オプションを使用してください。

UIkit 3.11 から 3.12 への移行

UIkit 3.12 は、画像コンポーネント の `<img>` 要素から `uk-img` を非推奨にします。代わりに、ネイティブの `loading="lazy"` 属性を使用してください。これは、`uk-img` がスライドショーまたはスライダー内の隣接するスライドをターゲットにするために使用される場合にも適用されます。スライドショーとスライダーの両方のコンポーネントは、遅延読み込み画像をそのまま使用できます。

**重要** この変更により、レイアウトのずれを防ぐために、`<img>` 要素に `width` および `height` 属性を設定する必要もあります。

UIkit 3.10 から 3.11 への移行

UIkit 3.11 は、パララックスコンポーネント に新しい `start` および `end` オプションを追加し、`viewport` オプションを非推奨にします。 `viewport` オプションを `end` オプションに置き換えます。ビューポート値を1から差し引き、`100vh + 100%` を掛けます。いくつかの例を次に示します

UIkit 3.4 から 3.5 への移行

UIkit 3.5 では、名前に `xxlarge` が含まれるすべての Less 変数とクラス名が、一貫性を向上させるために `2xlarge` に名前変更されました。カスタム Less テーマを使用している場合は、これらの Less 変数を検索して置換してください。マークアップで更新する必要がある 幅コンポーネント には、クラスが1つだけあります。

UIkit 3.2 から 3.3 への移行

UIkit 3.3 は、コンテナコンポーネント にデフォルト値として幅 `1600px` の新しい `uk-container-xlarge` クラスを追加します。このため、クラス `uk-container-large` は幅を `1600px` から `1400px` に変更します。次のクラスを置き換えて、マークアップを更新します。

UIkit 3.1 から 3.2 への移行

テキストコンポーネント

UIkit 3.2 は テキストコンポーネント に新しい `uk-text-bolder` クラスを追加したので、クラス `uk-text-bold` は `bolder` の代わりに文字通り `bold` フォントウェイトを適用するようになりました。 `bolder` に設定されていた `@text-bold-font-weight` 変数は削除されました。

UIkit 3.0 から 3.1 への移行

UIkit 3.1 は `@deprecated` Less 変数を追加します。デフォルトでは `false` に設定されており、非推奨のクラスは CSS にコンパイルされません。

後でマークアップを更新して、新しいクラスと一緒に非推奨のクラスを使用する場合は、カスタムUIkitテーマで変数をtrueに設定してください。

@deprecated: true;

見出しコンポーネント

見出しコンポーネントのプライマリクラスとヒーロークラスは非推奨です。次のクラスを置き換えて、マークアップを更新してください。

UIkit 2から3への移行

Uikit 3は、ブラウザで実行され、既存のUikit 2サイトからの必要な変更をすべてリストする移行ツールを提供します。ツールを実行するには、ブックマークを使用するか、単一のJavaScriptファイルを含めるかの2つのオプションがあります。必要な移行の変更は、ブラウザのコンソールにリストされます。

ブラウザのブックマーク

移行ツールを使用する最も簡単な方法は、ブラウザのブックマークを使用することです。ブックマークをクリックするだけで、移動先の任意のページでスクリプトを実行できます。次のリンクをブラウザのブックマークセクションにドラッグしてください。

ブックマークバーにドラッグ UIkit 3 移行

または、次のコードをURLとして使用して、ブックマークを手動で作成することもできます。

javascript: (function () {
    var script = document.createElement('script');
    script.setAttribute('src', 'https://uikit.dokyumento.jp/migrate.min.js');
    document.body.appendChild(script);
}());

HTML統合

必要なJavaScriptをWebサイトにロードすることによっても、移行ツールを実行できます。この方法では、移行スクリプトは常にWebサイトにロードされます。移行が完了したら、これを削除することを忘れないでください。終了</body>タグの直前に次の行を追加します。

<script src="https://uikit.dokyumento.jp/migrate.min.js"></script>

使用方法

移行を開始するには、WebサイトのUIkit 2ファイルをUIkit 3の同等のファイル（JSとCSSの両方）に置き換え、上記のいずれかのソリューションを使用して移行ツールを実行します。マークアップの変更方法については、ブラウザの開発者コンソールを開いてください。変更する必要があることを示す警告と通知のリストが表示されます。メッセージの横にある矢印をクリックすると、必要な変更の詳細を確認できます。

すべての通知または警告メッセージは、影響を受けるすべてのHTML要素のリストを含め、変更する必要があることを示しています。より複雑な変更は、理解しやすい例で説明されています。移行する最良の方法は、コンポーネントを1つずつ修正することです。そうすることで、ページをリロードした後にエラーメッセージが消えたかどうかを確認し、サイトの変更を確認することもできます。

警告

警告は、UIkit 3でサポートされなくなったか、変更されたすべてのCSSクラスまたはJavaScript属性を強調表示します。WebサイトをUIkit 3に移行するには、これらの警告を修正する必要があります。

通知

通知は、サイトを壊さない可能性のある潜在的な問題を強調表示します。一部の通知は、変更をまったく必要としない場合があります。これは、UIkit 2の一部の名前がUIkit 3にまだ存在するものの、現在は異なるコンポーネントに属しているか、異なるセマンティクスを持っているという事実が原因です。これは、正しいマークアップかどうかを判断するために使用するセレクターでは検出できないため、調べて、すでに変更したのか、まだ修正する必要があるのかを判断する必要があります。