オープンソースプロジェクトでCSSの1行を修正して学んだこと

iPhoneでSvelteドキュメントを閲覧している間、明らかなUIエラーが見つかりました。 REPLノブには何の問題もありませんでした。私は常にオープンソースプロジェクトに貢献したいと思っていましたが、それはすばやく簡単な修正だと思います。 CSSコードの行を変更するだけではないことがわかります。

ローカル環境のコピー、デバッグ、セットアップは、楽しく、困難であり、非常に重要です。

質問

ブラウザ開発者ツールを開き、電話ビューで同じ問題が発生すると思いました。ただし、エラーは消えました。今、これは非常にトリッキーなCSSの問題です。

？収穫

iOSでブラウザとしてChromeを使用している場合、Safariのレンダリングエンジンを使用しています。ウィキペディアからの抜粋：

Chromeは、Apple独自のモバイルレンダリングエンジンとSafariブラウザー用のコンポーネントであるiOS WebKitを使用しているため、Google独自のV8 JavaScriptエンジンを使用できません。

Caniuseはこれをバックアップします。これは、IPS Safariに関する次の指示を提供します。

問題が私のマシンに表示されなかった理由は明らかですが、私の携帯電話に表示されました。さまざまなレンダリングエンジン！

問題をローカルに再現します

プロジェクトをダウンロードして地元で実行しました。エミュレータと実際のiPhoneでローカルコードを実行することで、それが依然として問題であることを確認します。 MacOSのSafariは、各インスタンスの開発者ツールを簡単に開く方法を提供します。

これにより、ブラウザと同じコンソールアクセスが提供されますが、iOS Safariで動作します。私は嘘をついていません、Appleの開発者の経験は素晴らしいです（私がしたことを見てください？）。

この問題をローカルに再現できるようになりました。

？収穫

Svelteリポジトリをダウンロードし、いくつかのコードを見た後、UIとSVGが @Sveltejs/Site-Kitというパッケージを介して導入されたことに気付きました。さて、今、私はサイトキットローカルバージョンをSvelte/サイトに引き込み、変更を確認して問題をデバッグできるようにする必要があります。

Svelteのpackage.jsonにnode_modulesをサイトキットのローカルコピーに向ける必要があります。これは象徴的なリンクのように聞こえます。多くの結果なしでドキュメントを調べた後、Googleで検索し、NPMリンクに出くわしました。これは私が何をしているのかを示しています！

サイトキットにローカルな変更を加えて、それらがSvelteプロジェクトに反映されていることを確認できます。

問題を解決します

真剣に、コードの1行を変更するだけです。

 <code>border: transparent;</code>

しかし、このコードの行を配置する場所を見つけることは、あなたが思うほど簡単ではありません。プロジェクトのソースマップにはいくつかの大まかなスポットがあります。これは、このCSSがnav.svelteコンポーネントから来ており、実際には別のファイルから来ていることを示しています。これは、プロジェクトに貢献するもう1つの素晴らしい方法です！

次に、検索して、これが処理されていることを知り、それがどのように行われるかについてさらに学びます。今、すべてがモバイルとデスクトップで見栄えがよくなりました。

レビュー

当初は単純なシングルラインコードの変更でしたが、旅に変わりました。そうしなければならなかった：

• プロジェクトとコンポーネントの倉庫を実行します
• システムリンクを理解します
• サイトキットリンクのドキュメントを寄付します
• さまざまなブラウザレンダリングエンジンについて学びます
• iOS Safariブラウザをエミュレートする方法を学びます
• デバッガーにアクセスする方法を学びます
• ソースマップが正常に機能していないときに問題を見つける
• （最終）問題を修正します

自分でそれを行うとき、あなたは通常、そのような問題に対処しないか、精神モデルと学習を構築する必要がある大規模で複雑なシステムを構築する必要があります。メンテナーから学ぶことはできません。最も重要なことは、人気のあるハイテク製品を構築するためのすべての努力が見られないことです。

このアイデアをCSS-Tricksに提出したとき、クリスは最近同様の状況を持っていると言いました。ハードラーニングは永続的な学習です。抱擁と闘争。

止まらないでください

Svelte Projectから別の質問がありますが、SafariがStyleManager.tsのキーフレームアニメーションをどのように処理するかについて別の質問があるため、CSSStylesheetを学んでいます。このようにして、私の研究は、私が毎日の仕事で取ったことのない道に沿って前進し続けました。

何かがクラッシュしたら、システムを学習するプロセスをお楽しみください。あなたは、なぜ物が崩壊するのか、それを修正するために何ができるかについての貴重な洞察を得るでしょう。これは、オープンソースプロジェクトに貢献することの大きな利点の1つであり、なぜそうすることをお勧めします。

以上がオープンソースプロジェクトでCSSの1行を修正して学んだことの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。