インターネットを形作ったHTMLハック技法

 (tedium.co)
2 ポイント 投稿者 GN⁺ 2023-12-03 | 1件のコメント | WhatsAppで共有

HTMLハックの妙

  • HTMLハックの必要性: HTMLコードの不具合やブラウザー実装の不十分さのために、期待した結果を得るために洗練されていないコードを書かざるを得ないことがある。こうしたハックは時に創造的で、記憶に値する。
  • Netscape Navigator 4.0の@importハック: Netscapeが対応していないCSSスタイルを遮断できるようにした。NetscapeはCSSではなくJSSSを支持していたが、W3CがCSSを選択したことでNetscape 4のCSS実装は急ごしらえとなり、その結果、後のブラウザーと比べて性能が劣っていた。
  • HTMLテーブルをレイアウトに使用: より実験的なレイアウトを可能にした。HTMLテーブルをレイアウトツールとして使うことは、まさにハックの定義そのものであり、メールの世界では今でも使われている。
  • CSSスタイルの前にアンダースコアを使う: 特定のスタイルをIE6にだけ適用できるようにした。IEの特殊文字パースの限界を利用したもの。
  • AlphaImageLoaderを使ってPNGの透過を提供: IE6が対応していないPNGファイルの透過をレンダリングした。画像をフィルター経由で実行する。
  • 条件付きコメント: 特定のIEバージョンでのみ特定のトリックを使えるようにした。HTMLコメント機能をハックしてコードを実行できるように変えた。
  • Scalable Inman Flash Replacement (sIFR): Webセーフではないフォントを使えるようにした。テキストをFlash埋め込みに置き換えるJavaScriptハックを使った。
  • プリヘッダーテキストのハック: メールで追加テキストが説明行に流れ込むのを防いだ。非標準または珍しい空白文字の並びを使う。
  • Google Chrome Frame: IE6をChromeウィンドウに置き換えた。ブラウザープラグインを通じて実装された。
  • Webkit専用セレクターハック: CSSコードをWebkitブラウザーにだけ適用した。特定のブラウザーが特定のCSSコードをサポートしているかを検出する。
  • レスポンシブデザイン: さまざまな設定、特にタブレットやモバイルで情報を効果的に配置する。ほとんどの場合、メディアクエリを使ってデバイスに応じて情報を配置する。

GN⁺の見解

  • 最も重要なのは、HTMLとCSSの標準から外れてでも創造的な解決策を見つけ出す開発者たちの努力である。
  • この記事は、Web開発者たちがブラウザーの限界を乗り越え、ユーザー体験を向上させるためにどのように創造的なハックを使ってきたかを示しており、興味深く魅力的である。
  • こうしたハックは、Web標準の発展と、より良いWebデザインを目指す開発者たちの絶え間ない努力を反映している。

関連記事

1件のコメント

 
GN⁺ 2023-12-03
Hacker Newsの意見

  • テーブルをレイアウトに使うのは理解できる。

    テーブルが時代遅れになると、その後何年もの間、レイアウトには float を使うのが主流だった。この方法がリストから抜けているのは意外。 MDNドキュメント によれば、float プロパティはもともとテキストブロック内で画像を回り込ませるために使われていたが、Webページのマルチカラムレイアウトを作るためにもよく使われていた。今では flexbox と grid の登場によって、本来の目的に戻っている。

  • spacer.gif へのリスペクトがない。

    HNでは今でも使われており、すべてのページリクエストに含まれている: s.gif

  • お気に入りのテクニック:

    • サイドバーがコンテンツと同じ長さに見えるようにするための「Faux columns」
    • 9パッチと9個の div または 3x3 テーブルを使って境界線をハックし、一部の軸で背景を繰り返すこと。CSS3 ではこれを助ける border-image が登場した。ただし、このような境界線スタイルはもはや好まれていない。
    • 角丸の境界線を作るために 9パッチを使うこともできるが、多くの人は HTML を生成するジェネレーターを使って角丸をシミュレートしていた。記事 で説明されているように、追加のマークアップは画像よりも多くのバイトを消費するという昔ながらの通説があったが、ラウンドトリップが少なく、実装しやすかった。

  • HNは今でもこうしたテクニックの1つを使っている:

    • HTML テーブルをレイアウトとして使っている
    • このリストは、標準のない開発がさまざまな許容可能な副次チャネルに制御情報をエンコードしてしまうことを強調している。
    • その結果生じる潜在的な混乱や衝突は、ときに W3C プロセスに向けられる軽蔑を際立たせる。このプロセスは、標準ベースのWeb技術の進化とブラウザ主導のイノベーションを結びつけるものだ。片方がもう片方を導くこともあれば、同時に進むこともある。
    • しばしば批判されるものの、このプロセスは以前のものより持続可能で、安定していると解釈できる。
    • 新しい W3C・ベンダー規範を批判する人たちのうち何人が、こうした10個以上の奇妙なハックを思い出して、あの時代に戻りたいと思うのだろうか。

  • アクセシビリティのために見出しを画面外の -10000 の位置に置いて非表示にすることが含まれていない。

  • HTML5 shiv を CSS より前に導入して、すべてのブラウザの癖を取り除くことへの言及がない。

    HTML5 shivの歴史

  • 透明な 1×1 ピクセル gif を使ってテーブルセルを制御していた古き良き時代を思い出す。

  • 初期に広く使われた  、つまり改行しない空白文字エンティティについての補足:

    コンテナ内でテキストを右または左に移動するために使われた。あるいは、テーブルセルを正しく動作させるために 1x1 の spacer gif と似た使われ方もした。ページによっては数百個の   が使われていた。一般的にはマージンやパディングを追加する手段として使われていた。

  • 現代のWeb開発者が CSS Grid と IE の終焉によって甘やかされているのか、それとも複雑な現代的フレームワークやビルドプロセスを扱わなくてよかった当時のほうが甘やかされていたのか、時々わからなくなる。

  • レスポンシブデザインが本当にハックなのか疑問:

    メディアクエリは驚異的だ。条件分岐ロジックを JavaScript ではなく CSS に入れられるのは、サーバーサイドレンダリングをしたいときに大きな利点になる。