Время для прочтения: 1 мин. 30 сек.

Диагностический CSS

При вёрстке очень важно следовать стандартам, чтобы ваши макеты в будущем выглядели сносно, поэтому необходимо избавлятся от старых и ненужных тегов и их атрибутов. Для SEO важно не забывать прописывать необходимые атрибуты, например alt, title у картинок и ссылок.

Чтобы визуально наблюдать все неточности, предлагаю CSS-стили для тестировки. Если мне не изменяет память, то оригинал принадлежит Эрику Мейеру:


@charset "UTF-8";

/* пустые элементы */
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; }

/* изображения без указания размеров */
img:not([width]):not([height]) {
    border: 5px solid green !important;
}

/* предположительно устаревшие элементы */
input[type="button"], big, tt
{ border: 5px dotted #33FF00 !important; }

/* предположительно устаревшие атрибуты */
*[border], a[target], table[cellpadding], table[cellspacing], *[name]
{ border: 5px solid #33FF00 !important; }

Ссылки

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

  • Вы в каком тысячелетии живете? Ведь есть ID и куча пользовательских атрибутов.

    А к тому времени, когда «предположительно устаревшие атрибуты» перейдут в раздел «устаревшие атрибуты» — нас с вами уже и не будет 😉

    Посмотрите комменты по этому поводу

  • Givi

    А отчего среди предположительно устаревших делает «name»? Ведь по сути без него нереально реализовать отправку формы.