要約
古いStyleの仕様として廃止・非推奨になったもの
- ime-mode
- fontタグ
- table装飾属性（bgcolor など）
→ Web標準の進化で消えた
はじめに
自己の立場を軽く。
新卒から2年目までWEB系のバック、フロントエンドをRubyで経験。
4年異業種を経験し、再度IT職のSESへ転職しました。
そこでVue、REACTなどモダンな言語を数カ月経験した後に、
現在のASPclassicにアサインという流れになります。
背景
業務案件で既存システムを触っていると、
「始めてみた...」
という一昔前のHTML / CSS / JavaScript に出会うことがありました。
備忘録も兼ねてまとめておきたいと思います。
今回見かけたレガシーな記述たち
IMEプロパティ
ime-mode: disabled;
-
IME（日本語入力）を無効化するためのCSSプロパティ
-
IE6〜IE9あたりで使用されており、現在は仕様から削除済み
-
現在の主要ブラウザではほぼ無視されるらしい
当時は「英数字のみ入力させたい」用途で利用されていたらしいですが、
現在は以下のように制御するのが一般。
<input type="text" inputmode="numeric">
size と maxlength
<input type="text" size="20">
-
inputの横幅（文字数ベース）を指定
-
現在も動作可能
-
見た目指定をHTMLで行うの点がレガシー寄り
現在はCSSで幅を制御するのが一般的。
<input type="text" maxlength="10">
-
入力可能な最大文字数を制御
-
現在も動作可能
JSなどで文字制限を行っている実装が多い印象だったので、初めて見ました
（純粋に勉強不足...）
fontタグ
<font color="red">必須</font>
- HTML5で廃止
学生の時はまだ生きてた気がしましたが、どうやら廃止らしいです。
やはり、CSSで制御し責任の所在を分離させる。
デカップリングが進んだ結果なのかなと夢想してます。
テーブル装飾プロパティ
<table bgcolor="#cccccc" width="100%" align="center">
-
テーブルレイアウト時代の名残
-
HTML5では非推奨／廃止
かつては「レイアウト＝table」が常識だったようで、
現在の案件のレイアウトもほぼtableで作成されてます。
flex、Glidでレイアウトの一括調整ができない点にすごい違和感を覚えました。
JSイベントのHTML直書き
onKeyPress="return submitStop(event);"
-
JSとHTMLが密結合
-
保守性が低い
-
onKeyPress 自体もほぼ非推奨みたい
やはり、現在はJS側でイベント登録するのが一般的です。
input.addEventListener('keydown', submitStop);
まとめ
今も使えるStyleもあります。
ただ基本的にアーキテクチャの考え方の違いが、Styleにも現れてると感じました。
-
責務分離がまだ進んでいない時代背景
-
ブラウザ依存文化の名残
他にもDB内に、Font Colorをもたせてる仕様もあったりなどもありました。
Web標準が固まる前の試行錯誤という意味でも、歴史を感じさせるものが多かったです。