Defensive CSSを書こう

はじめ はじめまして、チームラボ フロントエンド班のLIUです。中国四川出身で、CSSとホラー映画が大好きマンです。新卒でチームラボに入社し、現在フロントエンドエンジニアとして働いています。 この記事では、フロントエンド勉強会（チームラボ内で、隔週で開催しているフロントエンドに関するLT会）で発表したDefensive CSSについての内容を紹介します。 レスポンシブデザイン タイトルは「Defensive CSS」ですが、まずはレスポンシブデザインについて話したいと思います。 モバイル通信の発展や、スマホブラウザがPC並みのパフォーマンスを実現したことで、レスポンシブデザインが広く普及しました。これにより、フロントエンジニアはスマホ専用サイトの制作から脱却し、CSSを用いて簡単に画面サイズに応じたレイアウトを実装できるようになりました。 しかし、レスポンシブデザインにはメリットだけでなく

[field_combat]

「論理的プロパティ」は知らなかった。多言語対応が不要な場合でも自動翻訳使われることもあるし、その際にレイアウトで問題が出るっぽい。後で調べる

[yarumato]

“レスポンシブデザインには表示が崩れる問題も。そこで防御的なDefensive CSSを実践。2次元レイアウトにはgridを、1次元レイアウトにはflexを使用。物理的でなく論理的プロパティを使い、異なる書字方向に対応”

[manaten]

"Defensive CSSは、2021年にAhmad Shadeed氏によって提案された用語で、動的なコンテンツや予期せぬユーザー行動によって生じるレイアウトの問題への一連の対策を指します。"