Upgrade to Pro — share decks privately, control downloads, hide ads and more …

2023 CSS

にしはら
September 20, 2023

2023 CSS

2023年に使えるようになったCSSでレイアウトや表現について紹介します。

にしはら

September 20, 2023
Tweet

More Decks by にしはら

Other Decks in Technology

Transcript

  1. ࠷ۙ࢖͑ΔΑ͏ʹͳͬͨCSS ɾίϯςφΫΤϦ ɾ:has() ٙࣅΫϥε ɾࡾ֯ؔ਺ ɾಠཱͨ͠ transform ϓϩύςΟ ɾεΫϩʔϧۦಈΞχϝʔγϣϯ ɾίϯςφΫΤϦ΍

    has() Λ࢖ͬͨɺμογϡϘʔυը໘ ɾεΫϩʔϧۦಈΞχϝʔγϣϯΛ࢖ͬͨσʔλϏδϡΞϥΠθʔγϣϯ Ͱ͖ΔΑ͏ʹͳͬͨϨΠΞ΢τ΍৽͍͠දݱྫ
  2. ࡾ֯ؔ਺͸ԁʹؔ͢Δ࠲ඪ͕ಘҙ transform: translate( calc(cos(30deg) * var(--r)), calc(sin(0deg) * var(--r)) );

    30deg r cos(30deg) ʷ r sin(30deg) ʷ r x = y ΢Σϒͷ৔߹ɺԼ޲͖͕ y ࠲ඪͷਖ਼ํ޲ʹͳΔͷͰ ਺ֶͱҧ͏ͷͰগ͠஫ҙ