Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8691

BootStrap5のα版がリリースされました

$
0
0

概要

2020-06-16にBootstrap5のα版が公開されました!!

Bootstrap 5 alpha! | Bootstrap Blog

公式のブログを読むと、以下の対応が挙げられていました。

  • jQueryを捨てたよ
  • IEサポートを捨てたよ
  • 公式ドキュメントを改善したよ
    • Hugoを使っているよ
  • ロゴを新しくしたよ
  • form系の要素を見直したよ
  • Utilitiesを強化したよ
  • htmlとcssのみでボタンのトグルを実装したよ
  • CSSのカスタムプロパティを使い始めたよ
  • カラーパレット拡張したよ

近日公開予定のものは割愛しております。
BootstrapのためにjQuery入れてたりしてたので、脱jQueryは嬉しいですね。

容量を測ってみる

公式でCDN提供されているものから取得しました。
少なくともjQueryの分だけ早くなっているはず……!

Bootstrap5
<!-- css --><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"crossorigin="anonymous"><!-- js --><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"crossorigin="anonymous"></script>
Bootstrap4
<!-- css --><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"crossorigin="anonymous"><!-- js --><script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"crossorigin="anonymous"></script>

結果

Bootstrap5Bootstrap4
bootstrap.min.css21.7kB24.2kB
jquery-3.5.1.slim.min.js0kB25.1kB
popper.min.js8kB8kB
bootstrap.min.js16.4kB15.2kB
合計46.1kB72.5kB

26.4kBの減量に成功していております!
まだリリースしていない機能もあるみたいですが、jQueryが消えたのでBootstrap4を超えることはないと思います。
だいぶダイエットしてますね。

参考


Viewing all articles
Browse latest Browse all 8691

Latest Images

Trending Articles

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>