2022年のモダンCSS改

7/27（水）開催の「TechFeed Experts Night#1 〜 Web標準 / CSS / Webアクセシビリティを語ろう」で発表した内容です https://techfeed.io/events/techfeed-experts-night-20220727 スライド内のリンクがクリックできるPDF版はこちら https://drive.google.com/file/d/1fc98v082exdGcCuxS73wEN_Qe2COvdTW/view?usp=sharing 各デモURL ■ 上下左右中央揃え https://codepen.io/tonkotsuboy/pen/qBbpYzj ■ スムーススクロール https://codepen.io/tonkotsuboy/pen/NWyNMOo ■ すりガラス https://codepen.io/tonkotsuboy

[strawberryhunter]

IEの次はSafariがディスコンになってもらいたい。

[yamadar]

スムーススクロールにJS要らなくなってたことに気づく2022年の夏

[sds-page]

CSSはdisplayプロパティがヤバい。便利に使えるけどdisplayプロパティに依存して挙動が変わったり全然効かなかったりで魔境めいてる

[ultimatebreak]

overscroll-behaviorマジ！？Safariだけ異常に対応がめんどくさかったやつから解放される？

[spark7]

overscroll-behavior-y ついにできるんか。一番クソなSafariに必要な機能なのに実装が最後とは。

[Magicant]

便利さうといふ感想より先にこれを実装するブラウザー開発者大変さうといふ感想が出てきてしまふ

[typographicalerror]

Safariがモダンブラウザなのか、は割と審議を要するのでは

[ogrenavi]

スムーススクロール＋ヘッダーの高さ分調整の欲張りセットにJS要らなくなってたことは忘れがち

[field_combat]

overscroll-behaviorいいな

[kns_1234]

CSS Gridを使用した中央揃えなど

[kkobayashi]

高機能だ

[yarumato]

“上下左右中央揃え　昔:floatで4行以上。Flexboxで3行。CSS Gridを使えば2行。すりガラス表現　昔:画像を作る必要。現代:backdrop-filter。　1行テキストの両端揃え。スクロールの連動を防ぐ。”

[buhoho]

あれ？Firefox更新したらスライド見れなくなった？俺環かな？アドオンを使わないプライベートウインドウでも動かないし、なんかトラッキング系設定の影響かな？

[soachr]

jsなくともだいぶリッチなコンテンツが作れるようになったんだな

[tmayuko312]

インターネット老人会の自分にはこういうまとめ方すごくありがたいな…毎年こういうまとめよろしくおねがいします

[lifeisadog]

scroll-margin-topって解決策として微妙に思う。遷移先がレイヤーの下になって隠れてたら自動的に位置調整してくれる方が良い

[inazuma2073]

全角スペースレイアウト滅ぶべし、慈悲はない。

[daira4000]

css変化が速くて大変すぐる

[hirose504]

“1行テキストの両端揃え text-align-last: justify; スクロールの連動を防ぐ overscroll-behavior-y: contain;”

[tk0707]

なお既存のクリエイティブに修正をかけようと思う増田はいないのであった

[blogpants]

ブクマしても忘れてしまうが。。読み返せるように。便利になったものですね。

[suekunhello]

コレは助かるー

[xll]

すごい、かなり便利になっている。久々にWebデザインしたくなってくる。

[doraratta]

css

[misarine3]

お待ちしております overscroll-behavior-y

[circled]

画面中央揃えはtailwindだと"flex justify-center items-center"と短くて更に楽だが、bodyタグとかにh-fullとかh-screen、w-fullが足りない気がする。

[suika3417]

IEも無事死んだので、容赦なく書きやすいcssを使えるな

[youichirou]

あんまり気にしてなかったけど、backdrop-filterはFirefoxは対応してなかったんか…。

[yimajo]

上下左右センタリング

[yamada_naoyuki]

CSS

[soratomo]

CSSで覚えておいて損はない助かるまとめ。 / safariはwebkitやiOSでまだまだ除外できなさそうだし、しばらくほっとけさそう。