Часто, когда мы сдаем проект клиенту, мы теряем контроль над HTML-кодом. Иногда клиент использует CMS (Системы Управления Контентом), которые дают ему полный контроль над теми или иными частями HTML-кода. Иногда клиент просто использует наши темплейты для вывода своего кода в документ.

В большинстве случаев довольно тяжело проинформировать клиента о том, как использовать темплейты или CMS, которые вы ему предоставляете, а иногда просто неприемлемо толкать пламенные речи о семантической верстке и веб-стандартах. Клиент может/будет использовать “старую, добрую разметку”, ту, которую он знает, просто потому что она работает и выглядит так как он привык. Скорее всего в ней будут присутствовать нежелательные (deprecated) тэги и атрибуты, такие как bgcolor, align и “вечный” font. Эта статья о том, как блокировать нежелательные HTML-тэги с помощью CSS, тем самым аккуратно направляя клиента в правильном направлении.

Читать дальше >>

Все мы знаем и любим свойство display:none, которое “отключает” вывод блока, для которого оно задано в HTML-документе. Вроде бы свойство безотказное и работает всегда.

Но оказывается, что некоторые screen reader’ы запросто читают контент из блоков, скрытых с помощью display: none. Поэтому, если вам не наплевать на ваших посетителей, у которых плохое зрение или оно вобще отсутствует, то вместо того, чтобы создать класс

.hidden{
display:none;
}

надо создавать

.hidden{
display: none;
visibility: hidden;
}

Свойство visibility: hidden решает проблему и скрывает нужный блок от непослушных “читалок экрана” .

Используя выражения в CSS-файле для Internet Explorer 6, можно добиться поведения, которое все нормальные браузеры уже давно умеют, а именно min-width и max-width свойства для блока:

#someblock{
width:expression(((document.documentElement.clientWidth ||↵
document.body.clientWidth) < 990) ? '990px' : ↵
((document.body.clientWidth > 1280) ? ‘1280px’ : ‘100%’));
} 

Данная заметка является скорее чем-то вроде self-note, но вдруг будет полезна и вам.

P.S. Не забывайте выносить стили для IE в отдельные файлы с помощью Conditional Comments и будет вам счастье

Upd.:

После общения с uggallery в коментариях, было решено оптимизировать скрипт так, чтобы не использовать expressions, из-за которых частенько подвисает браузер. Вот что из этого получилось:

Так как скрипт нужен нам только для IE6, выделяем его с помощью Conditional Comments. Скрипт срабатывает на двух событиях - onload и onresize, что не обязательно:

 <!--[if lte IE 6]>
<script type="text/javascript">
window.attachEvent(‘onload’, mmwidth);
window.attachEvent(‘onresize’, mmwidth);
function mmwidth(){
document.getElementById(‘wrap’).style.width = ↵
((document.documentElement.clientWidth || ↵
document.body.clientWidth) < 990) ? ‘190px’ :↵
((document.body.clientWidth > 1280) ? ‘1000px’ : ‘1000px’);
};
</script>
<![endif]--> 

Все что нужно сделать - это подставить id нужного вам элемента, ну и конечно значения максимальной и минимальной ширины. document.body.clientWidth соответственно тоже меняйте по вкусу.

Скрипт на оригинальность не претендует, да по большому счету от expression и не отличается, просто вынесен из CSS. Знаете как сделать лучше? Нашли ошибку? Коментируйте.

За идею спасибо uggallery, за консультацию copyhold‘у.

Рабочий пример.

Сколько HTML элементов (по спецификации HTML 4) ты можешь назвать за 5 минут? (всего 91 элемент)

Сколько свойств CSS (Level 2) ты можешь назвать за 7 минут? (всего 122 свойства)

Вот такие две интересные задачки на время, позволяющие проверить свою память. После прохождения теста можно получить симпатичную кнопочку с результатами. Баловство конечно, но интересное.

Image Replacement - очень популярная в последнее время техника замещения текста графикой, которая обычно применяется к заголовкам, логотипам и рекламным сообщениям, когда нужно оформить текст сложными эффектами и нестандартными шрифтами, а средств HTML и CSS уже не хватает.

По этой теме написано очень много статей, интересующиеся могут почитать об этом здесь (en), здесь (ru), ну и погуглить конечно.

Меня заинтересовал смежный вопрос. Так как техника в любом случае прячет текст от пользователя, заменяя его картинкой/флэшем, то теоретически она может быть рассмотрена поисковиками как один из способов спама. Ну и конечно же может быть использована в корыстных целях недобросовестными оптимизаторами

Пробежавшись по просторам Сети я так и не нашел однозначного ответа на вопрос “Надо или не надо?”. Matt Cutts утверждает что делать этого не стоит, а если и делать, то очень аккуратно и слова в спрятанном тексте должны полностью соответствовать словам на картинке. Некоторые над ним посмеиваются.
Некоторые довольно успешные сайты используют Image Replacement, но тоже задаются вопросом, как поисковики реагируют на это.

Есть несколько вариантов:

• Не использовать Image Replacement
• Использовать, но очень аккуратно, в точности повторяя слова на картинке и в текст
• Использовать, но закрыть поисковикам доступ к папке стилей через .htaccess и не париться

Последнее решение приведет к тому, что Google отметит сайт для периодических проверок модератором. Но если вы не спамер - можно не переживать по этому поводу.

А что думаете вы?