Блокируем нежелательные HTML-элементы с помощью CSS

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

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

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

display:none vs screen readers

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

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

.hidden{
display:none;
}

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

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

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

min-width и max-width для IE6 одновременно

Используя выражения в 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‘у.

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

Internet Explorer 7 завоевывает рынок

Интернет Эксплорер 7Вышло обновление для Интернет Эксплорера 7. В своем стремлении завоевать рынок Майкрософт отменил проверку Windows Genuine Advantage validation при установке браузера, что само по себе хорошо и указывает на желание мелкомягких охватить как можно большую часть рынка.

Теперь не нужно никаких ухищрений для установки IE7, только скачать и установить. Изменений в движке почти нет, и на сколько я понял, локализованые версии еще не проапдейтились.

Из минорных изменений:
- Меню теперь видно по дефолту
- Обновлен онлайн-тур для новичков и любопытствующих
- Изменен инсталятор .msi, изменение касается администраторов сетей.

Для тех, кто использует описаный мною способ установки IE6 и IE7 на одну машину одновременно нужно всего лишь положить скачаный дистрибутив в папку со всеми остальными файлами.

Качаем

Не изменяет ли вам оперативная память?

шилдик

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

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

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