コーディングミスや、フォームの入力ミス（ここでは空白）の場合に、CSSで自動的に強調させる方法です。
空要素の場合：黄色の破線で対象要素を囲みます。
div:empty, span:empty, li:empty, p:empty, td:empty, th:empty
{ padding: 20px; border: 5px dotted yellow !important; }
空属性の場合：黄色の実線で対象要素を囲みます。
*[alt=""], *[title=""], *[class=""], *[id=""], a[href=""], a[href="#"]
{ border: 5px solid yellow !important; }
廃止予定の要素の場合：対処追う要素を赤色破線で囲みます。
applet, basefont, center, dir, font, isindex, menu, s, strike, u
{ border: 5px dotted red !important; }
廃止予定の属性の場合：赤色の実線で対象要素を囲みます。
*[background], *[bgcolor], *[clear], *[color], *[compact], *[noshade], *[nowrap], *[size], *[start], *[bottommargin], *[leftmargin], *[rightmargin], *[topmargin], *[marginheight], *[marginwidth], *[alink], *[link], *[text], *[vlink], *[align], *[valign], *[hspace], *[vspace], *[height], *[width], ul[type], ol[type], li[type]
{ border: 5px solid red !important; }
推奨されない要素の場合：赤色破線で対象要素を囲みます。
input[type="button"], big, tt
{ border: 5px dotted #fff !important; }
推奨されない属性の場合：赤色実線で対象要素を囲みます。
*[border], a[target], table[cellpadding], table[cellspacing], *[name]
{ border: 5px solid #fff !important; }
上記の装飾内容はサンプルですので、独自に変更してください。
開発中のWEBサイトには、上記のようなCSSファイルを作成・設置しておけば、入力内容の評価だけでなく、コーディングミスもかなり防げると思います。
|