プログラムによるレイアウト制御のための CSS Grid を考える
この記事は、既存のCSSのレイアウトの文脈ではなく、「プログラムから制御されるレイアウト」をいかに綺麗に制御・生成するか、です。 複雑なSPAや何らかのオーサリング環境で、主に JavaScript の視点からレイアウトを扱うのに Grid をどう活かしていくか、という話。 grid-template-areas の視覚的な対応 IEがない世界では CSS grid のフル機能を使うことができます。 自分が grid を使う際、今まで grid-template-areas を気に入って使っていました。これは CSS の視覚的な情報が最終的な表示と一致する、という理由からです。 例えば、 svelte で書いた grid-template-areas を使ったレイアウト設定のコードはこんな感じになります。。 <div class="grid"> <div style="grid-area:
outlineプロパティで作った枠線は角丸にすることができない - dskd
公開日2015-11-30タグAdvent CalendarCSS追記（2021 年 10 月 5 日、2023 年 1 月 3 日、2023 年 3 月 28 日） 最近のアップデートでモダンブラウザ全てで「outline プロパティで作った枠線も角丸にできる」ようになった。 Mozilla Firefox v88（2021 年 4 月 19 日リリース） Google Chrome v94（2021 年 9 月 21 日リリース | commit） Microsoft Edge v94（2021 年 9 月 21 日リリース） Safari v16.4（2023 年 3 月 27 日リリース） なお、IE11 は対応しないまま役目を終えている。 時間がかかったが Safari が対応したのはめでたい。これで outline を丸めるために box-shadow で代用するテクニックはも
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
