Bootstrap5 alpha1 vs beta1

JuYoung Lee2021-01-21

Front-End engineer at Front-End Development Center

はじめに

みなさん、こんにちは。
UIT室DEV8チームで、フロントエンド開発を担当しているイジュヨンと申します。

2020年6月17日 Bootstrap5 alpha1 版が公開されてからついに、2020年12月７日、Bootstrap5 beta1 が公開されました！！！

LINE では Bootstrap4 をベースとした管理画面向けの koromo と Bootstrap5 をベースとした社内プロダクト向けの UIT Toolkit "Astro" を開発しています。

今回は alpha1 と beta1(alpha2, alpha3含め) の差についてざっくり紹介します。alpha1 から beta1 への変更点としては下記のようです。

RTL(right-to-left)
Renamed classes for logical properties
Color system
States in the utilities API
JavaScript
Evolution of Position utilities
Added new components
Dark/White theme

詳細は公式サイトでご確認ください。

Migration

RTL(right-to-left)

*(イメージの引用元 : Bootstrap blog, https://blog.getbootstrap.com/2020/12/07/bootstrap-5-beta-1/)*

一番大きい変化じゃないかと思います。もちろん今までも RTL の対応はされていたんですが、もっと強力になりました。

Grid, Reboot, Utilities 標準バンドルに加えて、RTL が新しく追加されました。

まず、RTL CSS プロジェクトで構築することにしました。LTR から RTL に変更する際の変更やオーバーライドを管理するための強力な機能が得られます。また、一つのコードベースから二つのバージョンの Bootstrap を構築することができます。

第二に、次の話と繋がってるんですが論理的なプロパティのアプローチを使うために、水平方向のポジショニングに関するクラス名を変更しました。

例えば、margin-left の .ml-3 の代わりに .ms-3 を使用します。これにより、クラス名と値は無理せず、LTR や RTL に適したものになります。

Renamed classes for logical properties

RTL を追加するための一部で、水平方向に敏感な変数、ユーティリティや mixins は、より論理的な名前に変更されました。

下記は一部かもしれませんが、全ての left や right のような方向のプロパティが start と end に置き換えます。

変更の大きさとインパクトのため、リスクの高い変更ですが、LTR や RTL に適したものとなり、今後の追加の負担はありません。

Components	・.dropleft / .dropright → .dropstart / .dropend ・.dropdown-menu--left / .dropdown-menu--right → .dropdown-menu--start / .dropdown-menu--end ・.bs-popover-left / .bs-popover-right → .bs-poppover-start / .bs-popover-end ・.bs-tooltip-left / .bs-tooltip-right → .bs-tooltip-start / .bs-tooltip-end ・.carousel-item-left / .carousel-item-right → .carousel-item-start / .carousel-item-end
Utilities	・.left-* / .right-* → .start-* / .end-* ・.float-left / .float-right → .float-start / .float-end ・.border-left / .border-right → .border-start / .border-end ・.rounded-left / .rounded-right → .rounded-start / .rounded-end ・.ml-* / .mr-* → .ms-* / .me-* ・.pl-* / .pr-* → .ps-* / .pe-* ・.text-left / .text-right → .text-start / .text-end ・.text-md-left → .text-md-start
Mixins	・border-left-radius() / border-right-radius() → border-start-radius() / border-end-radius() ・border-bottom-left-radius() → border-bottom-start-radius() ・caret-left() / caret-right() → caret-start() / caret-end()
Variables	・$navbar-brand-margin-right → $navbar-brand-margin-end ・$pagination-margin-left → $pagination-margin-start ・$form-checkout-padding-left → $form-checkout-padding-start ・$form-switch-padding-left → $form-switch-padding-start ・$form-check-inline-margin-right → $form-check-inline-margin-end ・$form-select-feedback-icon-padding-right → $form-select-feedback-icon-padding-end

Color system

*イメージの引用元 : Bootstrap blog, https://blog.getbootstrap.com/2020/06/16/bootstrap-5-alpha/)*

color-level() および $theme-color-interval で動作していたカラーシステムは削除され、新しいカラーシステムが採用されました。

lighten() および darken() 変数は、tint-color() および shade-color() に置き換えられました。

この関数は色の明度を一定量だけ変えるのではなく、色を白か黒のいずれかと混ぜ合わせます。

shift-color() (alpha3 までは scale-color() でした。）は、その$weight パラメータが負数か陽数かに応じて色の色合いを明るくしたり暗くしたりします。

scss/_functions.scss

// scss-docs-start color-functions
// Tint a color: mix a color with white
@function tint-color($color, $weight) {
  @return mix(white, $color, $weight);
}
 
// Shade a color: mix a color with black
@function shade-color($color, $weight) {
  @return mix(black, $color, $weight);
}
 
// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}
// scss-docs-end color-functions

States in the utilities API

これは新しく追加された機能です。擬似要素(:hover, :focus)のスタイルを state option を使って追加する機能です。

例えば、hover で不透明度を変更するには`state: hover` を追加すると、

scss/_utilities.scss

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

コンパイルされた CSS に .opacity-hover:hover が生成されます。

compile css

.opacity-0-hover:hover { opacity: 0; }
.opacity-25-hover:hover { opacity: .25; }
.opacity-50-hover:hover { opacity: .5; }
.opacity-75-hover:hover { opacity: .75; }
.opacity-100-hover:hover { opacity: 1; }

もしかして、複数の擬似クラスが必要ですか？スペースで区切されたリストを使用すれば問題ありません。

scss/_utilities.scss

$utilities: (
  "opacity": (
    ...
    state: hover focus,
    ...
  )
);

JavaScript

Bootstrap alpha1 で jQuery は削除されもう使わなくなりましたよね。
今回はサードパーティや独自のコードからBootstrap の機能を区別するのに役立つように、全ての JavaScript plugins data 属性の名前空間が変更されました。

全てのデータ属性の名前が変更されて、インフィックスとして bs を含むようになりました。これにより、プロジェクト全体で Bootstrap が必要とする JavaScript のトリガーを明確に識別できるようになります。

例えば、data-toggle の代わりに data-bs-toggle を使用しています。

dropdown

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

また、Popper.js を v1.x から v2.x にアップグレードし、Tooltips/Popover から offset option の削除などのいくつかの小さな変更が加えられています。
Popper.js v2 では、主要な依存関係のファイルサイズが小さくなり、位置計算が更新され、その他多くの機能が追加されました。