あなたが教わってるそのCSSテクニックはもう古い ｜ TAKLOG

Xの初学者のポストにて古の手法を教わっている方をよく見かけるので、2024年現在そのCSSテクニックはもう古いってものをいくつか列挙しました。 ブロックのセンタリングに margin を使うなら margin-inline:auto を使いなさいmarginを使ってブロックのセンタリングを行う際によく教わるのはmargin:0 autoあるいはmargin:autoでしょう。

[junk-do]

「見出しに答え書いててモヤる」人がいてびっくりした。見出しに答えが書いてあって本文で詳しく説明してある方が効率的じゃないか

[tacamula]

角丸ボタン作るのに四隅に画像を配置する話とかじゃなかった

[oknhrk]

古いというかこう書けばスマートというニュアンス。古いとして挙げた例も間違いとまで言えるものはないように思うし、組むの早くて崩れないならそれでよさそう。レンダリングの速さが云々とかになるとまた別だけど

[kibitaki]

spacer.gifの話じゃなかった／"*"や"> *"の乱発が汚染そのもの、等アウトが多いわりに命令形で、古い新しい以前に、教える域に達してないネーってなる。／他の記事も「CSS2行で実装できる！」で本文JS50行とか割とおかしい

[remonoil]

見出しの"～なら～を使いなさい" という指示文が「あなたが教わってる古いCSSテクニック」のように見える。さらに他所でNG例が見出しの記事もあったりするので混乱する

[tempodeamor]

昨今のAI事情を鑑みると、これらが甘酸っぱい想い出にになる日もそう遠くないんだろうな。

[bascinet]

サービスによって保証ブラウザが異なるのに古い書き方を切り捨ててこうしろと書くのは初学者向けなら余計に悪手だろ

[Adeptus]

「もう古いってものをいくつか列挙」と言いながら、列挙されているのは新しいテクニック

[ms05b]

おお！結構使える、アップデートしなきゃ

[assaulter]

ここらへんAIがレビューで指摘してほしい

[hitomi0105]

最新css

[efcl]

`margin-inline`、`display: grid`、`inset: 0`、`revert`、SVGのcurrentCOlor、`aspect-ratio`、`clip-path`、`svh`

[otchy210]

inset, revert, currentColor は知らなかった。良いなこれ。

[localnavi]

2つを除いて知らないのばかりだった。（確かに、見出しに古いテク→本文で新しいテク、という並びの方がしっくり来るとは思う）

[KoshianX]

CSSの進歩は著しいな。知ってることもあるがしらないことのほうが多かった。

[a-kuma3]

この類のやつは本当のことが書いてあるか分からんので、コード見る、MDN見る、caniuse.com見る、の順番だから文脈の破綻とか煽りとか、あまり頭に入ってこない

[charun]

うぜえ。余計な指定やトラブルを減らす中央揃え、センタリング margin-inline: auto;など

[shimokiyo]

これ系の話題、iPhone、Android、chrome、edge,safari(mac)のどのバージョンから使えるかがわからないと仕事で使えないでしょ。

[keinear]

文章が分かりにくい。列挙されてるものは全て「新しい」ものばかりだ。古いほうを見出しにすべきだ。

[marmot1123]

コメが結構厳しめだけど、助かる

[spark7]

論理プロパティとか初めて知ったわ。知らんうちに変わってるのね。

[take-it]

この人、コロナ前からスキルはあるんだけど煽りが酷い方だったが、久々にホットエントリ入ってきて変わらないなと。「あなたの手法はもう古い」っていいたい。Web・IT系の煽り文化根絶したい。ハラスメントだよ。

[rck10]

"実装者は常に知識をアップデート" / 勉強自体は大事だが、実際の現場で、常に最新のブラウザを前提に出来るかというと・・・。ちなみに今の現場はIE11ですよ（苦笑

[hatfatcat]

古いとレンダリングコストが高いとかそういう説明が欲しかった。今までのやり方で実装できてたなら、わざわざ覚えるほどのテクニックでもないと感じる人が多そう。

[nekonyantaro]

基本的に10年以上前の知識でCSS使ってる自分、いろいろ学んでない。反省。

[rogertroutman]

大半はもう使ってた。margin-inline は左右にだけ新たな余白を設定したい（上下は継承したい）時に1行で書けて便利ですよね。margin-block にも同じことが言えますが

[pribetch]

NIKITA「貴女に必要なのは若さじゃなくてテクニック」

[daigo0117]

良かった。古い人になってなかった。古い書き方だと記述から意図が読みずらいから、後から変更が入ったときに地味にストレスなんだよね

[fellfield]

中央揃えについては、まずはショートハンド記法を避けるのが先だと思う。たとえばmargin-leftよりもmarginが優先されてしまうから、margin:0 auto;は原則として書くべきではない。

[abababababababa]

アイフレームのやり方、前すごい調べたけど出会えてなかったやつ。結構みんななるほどと思えた。試してみる。

[snaflot]

“要素を格子状に並べる際にdisplay:flex(絶滅危惧種としてfloat:left)でのレイアウトを教わっている方もいるようですが、現在ではdisplay:gridでの指定に比べて記述量が増えるだけでなくデメリットも多い”

[lessninn]

CSSはよく触れるが、Dirty hackとそれを打ち消す新仕様の話ばっかよなあ

[tuuz]

float:leftって絶滅危惧種なんだ〜。まあ教わったの15年ぐらい前だもんな…。でもブコメ見るとやっぱり環境依存の問題があるらしいし、そういうのやってられんなと思ってやめたから他人事でいられる🤗

[monacal]

これは良いまとめ。今まで理不尽だな、非効率だなと思っていたところが新しくなって便利になった。なのに人間側のアップデート不足でダメハック連発してる状況だからね…多少語気が荒くなるのもわからんでもない

[HDPE]

AIに聞くともっと気に障らない表現してくれるよ

[sds-page]

CSSは魔境過ぎる

[toblog]

角丸のために四隅に画像とか懐かしすぎて笑ってしまった

[stabucky]

Googleで検索すると古いのがヒットしちゃうのが悪い。