「フロントエンド開発は決して死なない」 - オリジナルシリーズ ピクセルからピクセルへの章 フロントエンド開発は決してなくなることはありません。私たちはこれまで以上にピクセル単位のフロントエンドエンジニアに感謝し、必要としています。 初期の頃、フロントエンド開発者は「画像スライスボーイズ」からPhotoshopファイルを受け取っていました。これらのPhotoshopファイルのデザインは、ヘッダー、ナビゲーション、本文、フッターなどのセクションに分かれていました。(当時は、派手なヒーロー要素は存在せず、カルーセルとデザインを組み合わせるだけでも非常にクールでした。) フロントエンドは、領域、サブ領域、レイヤーを含むセグメント化された Photoshop ファイルを受信すると、必要に応じて必要なアセットをエクスポートし、マークされた値、寸法、背景に従ってページを構築できます。 フロントエンドでは、色の値を抽出し、Web アプリケーション用に画像を最適化し、背景をカバーする方法を学習し、JPG と PNG、色域、サイズの違いに精通している必要があります。 グリッドやフレックスボックスが登場する前の時代では、サイズが不明な div を中央に配置すると、フロントエンド開発者が困惑することがありました。 当時は、優れたフロントエンド開発者はページ上でデザインを 1:1 で再現できなければならない、という言い伝えが一般的で、「ピクセル ツー ピクセル」という用語が生まれました。 シンプルに聞こえますね。しかし、当時はChromeの市場シェアがわずか10%しかなく、Webkit(Chrome)、Gecko(Firefox)、Presto(Opera)など、複数のブラウザが異なるレンダリングエンジンを使用していた時代だったことをご存知ですか? 当時、もう一つ悪名高いトラブルメーカーがありました。傲慢で横暴で、私たちの両親は皆それを使っていました。レンダリングエンジンはTridentで、IE(Internet Explorer)と呼ばれていました。 つまり、フロントエンドの主な敵は、様々なブラウザです。これらのブラウザは、システム(WindowsまたはMac)によってレンダリング結果が異なることに注意してください。 また、悪名高い IE (Internet Explorer) はバージョンごとに異なることにも注意してください。 したがって、さまざまなブラウザ間でピクセル単位の変換を実現するために、フロントエンド開発者は多くのルールを記述し、テストを繰り返し、1 日に 1 万回 Internet Explorer を非難する必要があります。 最終的に、フロントエンド開発者はIEの市場シェア確保のために妥協せざるを得ませんでしたが、同時にIE6を使う私たちの親世代のために、クールでスタイリッシュなページエクスペリエンスを提供しようともしました。フロントエンド開発者がどれほどの努力を払わなければならなかったか、ご存知ですか? 次章:レスポンシブデザインの到来
スレッドを読み込み中
X から元のツイートを取得し、読みやすいビューを準備しています。
通常は数秒で完了しますので、お待ちください。