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

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

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

1行目：

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

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

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

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

行2：

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

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

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

行3：

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

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

行4：

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

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

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

5行目：

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

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

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

6行目：

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

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

8行目：

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

9行目：

私がインタビューした人は誰(shuí)もこれについて知りませんでした。標(biāo)準(zhǔn)のトラックで起こっているすべての新しいことについて詳細(xì)な知識(shí)がある場(chǎng)合にのみ、これを知っていると思います。

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

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

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

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

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

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

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

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

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

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

もっとライン！

私は常にブラウザインスペクターツールで遊ぶことを楽しんでおり、サイトの作成方法を確認(rèn)します。これがこのアイデアを思いついた方法です。私は自分自身がセマンティック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/">

…國(guó)際的なランディングページの場(chǎng)合。

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

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

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