それは、彼らが持っている基本的なフロントエンドの知識の深さについて多くのことを教えてくれる簡単なテストだと思います、そして、この記事は最良の答えをリストします。

コンテキストについては、畫面を共有し、twitter.comを開き、 [ソースを表示]をクリックします。それから私は彼らに、HTMLを理解するのを助けるためにラインバイラインに行くように頼みます。彼らは好きなだけ言うことができます。また、テキストをより読みやすくするためにズームインしているので、フルラインが表示されませんが、アイデアが得られます。これがどのように見えるかです：

私たちの技術(shù)的な議論は會話なので、注意してください。私は誰にも完璧な答えを期待していません。正しいキーワードを聞いたら、候補者が概念を知っていることを知っており、それらを正しい方向に押し込もうとします。

1行目：

すべてのドキュメントのソースコードの最初の行は、このインタビューに最適です。なぜなら、候補者がDoctype宣言についてどれだけ知っているかが、彼らが何年の経験を持っているかに非常に似ているからです。 2009年の彼の記事「The Common Doctypes」にリストされているChrisのような、長いXHTML DoctypeラインでのDreamWeaverの日を今でも覚えています。

完璧な答え：これは、HTMLファイルの最初の行として常に配置するドキュメントタイプ（doc-type）宣言です。ブラウザは、応答のMIMEタイプがテキスト/HTMLであることをブラウザがすでに知っているため、この情報は冗長だと思うかもしれません。しかし、Netscape/Internet Explorerの時代には、ブラウザは、複數(shù)の競合バージョンからページをレンダリングするために使用するHTML標準を把握するという難しい作業(yè)を持っていました。

各標準が異なるレイアウトを生成したため、このタグを採用してブラウザを簡単にするために、これは特に迷惑でした。以前は、Doctypeタグは長く、仕様リンク（SVGSが今日持っているような種類）も含まれていましたが、幸運なことに、単純なはHTML5に標準化されており、今でも生き続けています。

また、受け入れられます：これは、これがHTML5ページであり、そのようにレンダリングする必要があることをブラウザに知らせるためのDoctypeタグです。

行2：

ソースコードのこの行は、候補者がアクセシビリティとローカリゼーションについて知っているかどうかを教えてくれます。驚いたことに、私のインタビューでdir屬性について知っていたのは數(shù)人しかいませんでしたが、それはスクリーンリーダーについての議論への素晴らしいセグエです。ほとんどすべての人が、以前に使用したことがなかったとしても、Lang = "en"屬性を把握することができました。

完璧な答え：これはHTMLドキュメントのルート要素であり、他のすべての要素はこれの內(nèi)側(cè)にあります。ここには、方向と言語の2つの屬性があります。方向?qū)傩预摔?、コンテンツがどの方向にあるかをユーザーエージェントに伝えるための左から右の値があります。他の値は、アラビア語のような言語の場合、または単にブラウザに殘して把握するために左に左になります。

言語屬性は、このタグ內(nèi)のすべてのコンテンツが英語であることを示しています。たとえば、EN-USとEN-GBを區(qū)別するために、この値を任意の言語タグに設(shè)定できます。これは、スクリーンリーダーが発表する言語を知るのにも役立ちます。

行3：

完璧な答え：ソースコードのメタタグは、このドキュメントに関するメタデータを提供するためのものです。文字セット（Char-Set）屬性は、使用する文字エンコードをブラウザに伝え、Twitterは標準のUTF-8エンコードを使用します。 UTF-8は、多くの文字ポイントがあるため、ソースコードであらゆる種類のシンボルと絵文字を使用できます。このタグをコードの先頭に置くことが重要です。そうすれば、ブラウザがこの行に出くわしたときにあまりテキストを解析し始めていません。ルールは、ドキュメントの最初のキロバイトにそれを置くことだと思いますが、ベストプラクティスは

サイドノートとして、Twitterはパフォーマンス上の理由（ロードするコードが少ない）で

行4：

完璧な答え：ソースコードのこのメタタグは、スマートフォンのような小さな畫面上のWebページを適切にサイジングするためのものです。元のiPhoneの基調(diào)講演を覚えている場合、Steve Jobsは、その小さな4.5インチの畫面にニューヨークタイムズ全體のウェブサイト全體を示しました。當(dāng)時は、実際に読むことができるようにズームするためにピンチしなければならなかった驚くべき機能でした。

Webサイトが設(shè)計によって応答された今、width = device-widthはブラウザにデバイスの幅の100％をビューポートとして使用するように指示します。標準的なベストプラクティスは、初期スケールを1に設(shè)定し、幅をデバイス幅に設(shè)定して、必要に応じて人々が引き続きズームすることができるようにすることです。

ソースコードのスクリーンショットはこれらの値を表示しませんが、知っておくと良いことです。Twitterは、ユーザースケーラブル= 0を適用します。これは、名前が示すように、ズームする能力を無効にします。これはアクセシビリティには適していませんが、Webページをネイティブアプリのように感じさせます。また、同じ理由で最大スケール= 1を設(shè)定します（これらの値間のズームアブリティをクランプするには、最小スケールと最大スケールを使用できます）。一般に、全幅と初期スケールを設(shè)定するだけで十分です。

5行目：

すべての候補者の約50％がオープングラフタグについて知っていましたが、この質(zhì)問に対する良い答えは、彼らがSEOについて知っていることを示しています。

完璧な回答：このタグは、サイト名、Twitterのオープングラフ（OG）メタタグです。オープングラフプロトコルは、Facebookによって作成され、リンクを広げてプレビューを素敵なカードレイアウトで表示しやすくしました。開発者は、あらゆる種類の著者の詳細を追加し、派手な共有のために畫像をカバーできます。実際、最近では、操り人形師のようなものを使用して、開いたグラフ畫像を自動生成することさえ一般的です。 （CSS-Tricksは、それを行うWordPressプラグインを使用しています。）

もう1つの興味深いサイドノートは、メタタグには通常名前屬性があることですが、OGは非標準プロパティ屬性を使用します。 FacebookだけがF(xiàn)acebookだと思いますか？タイトル、URL、および説明オープングラフタグは、これらの通常のメタタグをすでに持っているため、ちょっと冗長ですが、人々はそれらを安全に追加します。最近のほとんどのサイトでは、オープングラフと他のメタタグとページ上のコンテンツの組み合わせを使用して、リッチなプレビューを生成しています。

6行目：

ほとんどの候補者はこれについて知りませんでしたが、経験豊富な開発者は、Apple-Touch-IconsやSafariピン留めタブSVGなど、Appleデバイス用のWebサイトを最適化する方法について話すことができます。

完璧な答え： iPhoneのホーム畫面にWebサイトをピン留めして、ネイティブアプリのように感じることができます。 SafariはプログレッシブWebアプリをサポートしておらず、iOSで他のブラウザエンジンを?qū)g際に使用することはできないため、もちろんTwitterが気に入っているネイティブのようなエクスペリエンスが必要な場合、他のオプションはありません。したがって、彼らはこれを追加して、このアプリのタイトルがTwitterであることをSafariに伝えます。次の行は似ており、アプリが起動したときにステータスバーがどのように見えるかを制御します。

8行目：

完璧な答え：これは、Apple Status Bar Color Metaタグに相當(dāng)する適切なWeb標準であることです。ブラウザに周囲のUIをテーマにするように指示します。 AndroidのChromeとDesktopのBraveは、それでかなり良い仕事をしています。任意のCSS色をコンテンツに配置することもでき、メディア屬性を使用して、たとえば、暗いテーマをサポートするために特定のメディアクエリにこの色のみを表示することもできます。 Webアプリのマニフェストでこれと追加のプロパティを定義することもできます。

9行目：

私がインタビューした人は誰もこれについて知りませんでした。標準のトラックで起こっているすべての新しいことについて詳細な知識がある場合にのみ、これを知っていると思います。

完璧な回答： Originの試行當(dāng)社のサイトで新しい実験機能を使用してください。フィードバックはユーザーエージェントによって追跡され、ユーザーが機能フラグにオプトインすることなくWeb標準コミュニティに報告されます。たとえば、Edgeには、デュアルスクリーンと折りたたみ可能なデバイスプリミティブのオリジントライアルがあります。これは、折りたたみ式の電話が開閉するか閉じているかに基づいて興味深いレイアウトを作成できるため、かなりクールです。

また受け入れられました：私はこれについて知りません。

10行目：html {-ms-text-size-adjust：100％; - webkit-text ...

これについてもほとんど知りませんでした。 CSSエッジのケースと最適化について知っている場合にのみ、この行を把握できるようになります。

完璧な答え：モバイルレスポンシブサイトがなく、小さな畫面でそれを開くと想像してみてください。そのため、ブラウザはテキストをサイズ変更して、読みやすくするためにテキストを大きくする可能性があります。 CSS Text-Size-Adjustプロパティは、この機能を値なしで無効にするか、ブラウザがテキストを大きくすることが許可されている割合を指定できます。

この場合、Twitterによると、最大値は100％であるため、テキストは実際のサイズよりも大きくないはずです。彼らのサイトはすでに応答性があり、ブラウザがより大きなフォントサイズでレイアウトを破るリスクを冒したくないので、彼らはそれをします。これは、ルートHTMLタグに適用されるため、內(nèi)部のすべてに適用されます。これは実験的なCSSプロパティであるため、ベンダーのプレフィックスが必要です。また、このCSSの前には

また、受け入れられます：私はこのプロパティについて具體的には知りませんが、-msと-webkit-は、それぞれ標準のプロパティでは、それぞれインターネットエクスプローラーとWebKitベースのブラウザが必要とするベンダープレフィックスです。以前は、CSS3が発売されたときにこれらのプレフィックスを必要としていましたが、プロパティが実験的から安定性に移行するか、標準トラックに採用されると、これらのプレフィックスは標準化されたプロパティを支持して消えます。

ボーナス - 11行目：ボディ{マージン：0;}

Twitterのソースコードからのこの行は、Webページのリセットと正規(guī)化の違いに関する質(zhì)問をフォローアップできるため、特に楽しいです。ほとんどの人が正しい答えのバージョンを知っていました。

完璧な答え：異なるブラウザには異なるデフォルトスタイル（ユーザーエージェントスタイルシート）があるため、プロパティをリセットして、デバイス間でサイトが同じように見えるようにプロパティをリセットして上書きします。この場合、TwitterはブラウザにBody Tagのデフォルトマージンを削除するように指示しています。これは、ブラウザの不一致を減らすためだけですが、スタイルをリセットするのではなく、スタイルを正規(guī)化すること、つまり、ブラウザを完全に削除するのではなく、同じデフォルトを適用することを好みます。人々は * {マージン：0}を使用していましたが、これは完全に過剰であり、パフォーマンスには優(yōu)れていませんが、今ではremormize.cssまたはreset.css（または新しいもの）などをインポートしてそこから開始することも一般的です。

もっとライン！

私は常にブラウザインスペクターツールで遊ぶことを楽しんでおり、サイトの作成方法を確認します。これがこのアイデアを思いついた方法です。私は自分自身がセマンティックHTMLの専門家だと考えていますが、この演習(xí)を行うたびに何か新しいことを?qū)Wびます。

Twitterは主にクライアント側(cè)のReactアプリであるため、ソースコードには數(shù)十行しかありません。それでも、學(xué)ぶべきことがたくさんあります！ Twitterソースコードには、私があなたのために練習(xí)として殘している読者として、さらに興味深い行がいくつかあります。それらのうち何人がインタビューで説明できますか？

 <link rel="search" type="application/opensearchdescription xml" href="/opensearch.xml" title="twitter">

…ユーザーがTwitterを検索エンジンとして追加できることをブラウザに伝えます。

 <link rel="preload" as="script" crossorigin="anonymous" href="https://abs.twimg.com/responsive-web/client-web/polyfills.cad508b5.js" nonce="mguyztiyn2itmdmdm1zc00mze5lwe2mtg2mdu

…議論できる多くの興味深い屬性、特にNonceがあります。

 <link rel="代替" hreflang="x-default" href="https://twitter.com/">

…國際的なランディングページの場合。

 ：focus：not（[data-focusvisible-lyfill]）{outline：none;}

…キーボードナビゲーションを使用しないときにフォーカスアウトラインを削除するため（CSS：Focus-Visibleセレクターはここではポリフィージーされています）。

以上がTwitterの最初の10行を私に説明してくださいの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。