safari flex gapとボタンコミットプログラムをサポートしてください

最近の開発ではsafariでのみサポートされていない(または最新バージョンのみ)場合に遭遇しました.😨😇
safariは最新バージョンだけでなく、以前のバージョンでもflex gapとbutton SubmitEventです.提出者支援の嘆願を書き、記録を残す.

flex gap

flex gapの存在は多くのフロントエンド開発者の苦痛を軽減した.
既存のgridlayoutで使用できるgrid-gap、flex layoutでも使用できるプロパティ.
私もこれを利用して简単で快适で楽しくレイアウトを设计しました...
元々はSafari 14バージョン(iosは今年4月に更新された14.8からハハ)からサポートされていました.
私のMacBookとiPadはずっと最新バージョンを更新しているので、私はそれを全く知りません.
まだ更新されていない隣の席のメンバーはレイアウトが破壊されると教えてくれたので、涙を浮かべて急いでflex gapを開けました.
なぜなら.
1.Safariはiosユーザーの中で比重の大きいブラウザである
2.すべてのユーザーが今年4月に更新された最新バージョンを使用することは保証できません.
しかし、幸いなことにgrid layoutのgapは広くサポートされているため、gridを使用して作成されたテーブルレイアウトを変更する必要はありません.

しかし、検索時にflexもgridもgap:で検索していたので、検索結果を見ると何のレイアウトなのか分からないのでコメントを付けました.

そしてflex layoutでのgapはすべてクリアし,margin,paddingなどを用いて修正した.
flexレイアウトでは利益が相殺されることはないので、最下層の物の大部分は利益値がない場合が多く、以下のように選択者を利用しています.
私の知る限りでは、選択者が長ければ長いほど、レンダリング性能に与える影響が大きくなり、他にもっと良い方法があるかどうか知りたいです.

おかげで、私も新しい選択者を使いました.only-childで、名前によって役に立って、gapのような不吉なことを防ぐためにcani useで検索して書きました(ほほほ)

Submitter api

2つのsubmitボタンがあります.1つは一時保存で、もう1つは最終保存で、どのボタンがformsubmitイベントを呼び出したかを確認する必要があります.
いろいろな方法がありますが、それなら両方のボタンをtype="submit"と書きたいと思います.formsubmit eventでめくってみるとどうしようもないので、めくってみるとsubmitterがありました.

const submitter = submitEvent.submitter;
const isDraftSaveButton = submitter.name === 'draft';
if (isDraftSaveButton) {
  // call draft api
}

たぶんヨロコロンで、webapiです.
https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/submitter
しかし、残念なことにパリでは支援ができず、結局使用できなかった.
正確には、サファリもサポートしたいと思っていますが、buttonタイプだけがバグがあります.
https://bugs.webkit.org/show_bug.cgi?id=229660 type='submit'を持つinput、buttonの2つのhtml要素では、Safariはinputにのみ有効です.😫
buttonでは、本物のコミット者はnullとマークされているため、使用できません.でもその文章はなぜかresolved状態
Safariがすぐに修復され、flex gapのように最新バージョンでしか使用できない場合は、意味がありません.🥲 ただ一時保存ボタンはtype="submit"を外す方法で2つのボタンを区別していて認知されています...