Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

2023年モダンCSSの最新トレンド

 2023年モダンCSSの最新トレンド

鹿野さんに聞く!2023年モダンCSSの最新トレンド https://findy.connpass.com/event/278449/
で発表した資料です。

各リンクはこちらから参照
https://tonkotsuboy.github.io/20230413_findy_css/

tonkotsuboy_com

April 13, 2023
Tweet

More Decks by tonkotsuboy_com

Other Decks in Programming

Transcript

  1. p { /* 背景グラデーション */ background: linear-gradient(-45deg, #2af598, #009efd); /*

    テキストの形に背景を切り抜く */ -webkit-background-clip: text; background-clip: text; /* テキストの色を透明にする */ color: transparent; } 現代: background-text で指定できる
  2. .box { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background-color: rgba(255, 255, 255,

    0.5); } 景色は透明か半透明にする Safari のみベンダープレフィックス -webkit- が必要 現代:backdrop-filter を使う
  3. /* 画面サイズ 600px 未満 */ @media (max-width: 599px) { }

    /* 画面サイズ 600px 以上 1200px 未満 */ @media (min-width: 601px) and (max-width: 1200px) { } /* 画面サイズ 1200px 以上 */ @media (min-width: 1201px) { } 従来 min-width , max-width , and を使っていた
  4. ▼ 600px 以上と未満でスタイルを切り替える場合の回避策 @media (max-width: 599.99px) { /* 600px 未満のスタイル

    */ } @media (min-width: 600px) { /* 600px 以上のスタイル */ } 従来: 「未満」や「より大きい」の表現ができない
  5. /* 画面サイズ 600px 未満 */ @media (width < 600px) {

    } /* 画面サイズ 600px 以上 1200px 未満 */ @media (600px <= width < 1200px) { } /* 画面サイズ 1200px 以上 */ @media (1200px <= width) { } 現代: < や <= が使える
  6. 記号 説明 <= 以下 < 未満 >= 以上 > より大きい

    現代: 「未満」や「より大きい」の表現が可能
  7. .box::before { content: ""; display: block; padding-top: calc(100% * 9

    / 16); /* 56.25% */ } @media (width <= 500px) { .box::before { padding-top: calc(100% * 3 / 4); } } 従来: padding ハック
  8. .item { aspect-ratio: 16 / 9; } @media (width <=

    500px) { .item { aspect-ratio: 4 / 3; } } 現在: aspect-ratio プロパティ
  9. const carousel = document.querySelector(".carousel"); const items = carousel.querySelectorAll(".item"); const currentIndex

    = 0; carousel.addEventListener("scroll", (event) => { // スクロール位置を計算し、アイテムにスナップさせる }); 従来: JavaScript を使っていた
  10. .container { /* x 方向で、必ずスナップポイントに揃うように */ scroll-snap-type: x mandatory; }

    .container .item { /* スナップ位置は、開始位置 */ scroll-snap-align: start; } 現在: scroll-snap プロパティを使える
  11. <!-- HTML --> <head> <script src="jquery-3.6.0.js"></script> <script src="smooth-scroll.min.js"></script> </head> //

    JavaScript new SmoothScroll('a[href*="#"]'); 従来: JavaScript で実装していた
  12. header { height: 60px; } section { /* 停止位置は60px */

    scroll-margin-top: 60px; } scroll-margin-top でスクロール位置調整
  13. input は有効( :valid )か無効( :invalid )になる それに応じて、 form や label

    のスタイルを変えたい <!-- html --> <form class="form"> <label> メールアドレス</label> <input type="email" /> </form> メールアドレスの有効・無効でラベルを変えるデモ
  14. .form:has(input:valid) { color: rgb(76, 175, 8); /* テキストを緑 */ background-color:

    rgba(76, 175, 8, 0.1); /* 背景を薄緑 */ } .form:has(input:invalid) { color: rgb(217, 4, 41); /* テキストを赤色 */ background-color: rgba(217, 4, 41, 0.1); /* 背景を薄赤色 */ } ※ .form:has(input:invalid:not(:placeholder-shown, :focus)) が better ミライ: :has() を使う
  15. /* Sass ファイル */ .container { .child { color: red;

    } } 従来: Sass を使うしかなかった
  16. /* CSS ファイル */ .container { .child { color: red;

    } } ミライ: 「CSS」で実現できる
  17. container { .child1, .child2 { color: red; } } .link

    { &:hover, &:active { color: red; } } CSS ネストは、Sass のネストと「ほぼ」同じ
  18. .box { color: blue; @media (width <= 800px) { color:

    red; } } とくに、 @media のネストが便利
  19. :root { --gap: 24px; } .container { /* カラム数成り行き、基本的に300px の横幅

    */ columns: auto 300px; /* 列間の隙間 */ column-gap: var(--gap); } .item { /* 行間の隙間 */ margin-bottom: var(--gap); } 従来: column で(一応)実装できる
  20. .container { display: grid; /* 行のレイアウトとして「masonry 」を指定する */ grid-template-rows: masonry;

    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); /* 親へgap を指定するだけでOK */ gap: 40px; } ミライ: masonry を使う
  21. テキストのグラデーションを画像なしに行う background-clip: text すりガラス表現 backdrop-filter @media で < や <=

    が使える 画像の縦横比を変えたい aspect-ratio スクロール位置をピタッと止める scroll-snap ページ内リンクをなめらかにスクロール scroll-behavior いま全ブラウザで使えるモダン CSS