Gastarbayteroff.NET

Начинаю вести серию статей про вёрстку html css js, начинаю с самого простого, потом планирую описать более сложные вещи и всякие тонкости

Добрый день всем

Старичок IE не перестает нас удивлять и подкидывать все новые проблемы, в самых неожиданных местах.

При работе над проектом столкнулся с неожиданным поведением полей ввода input и textarea при работе IE в режиме quirks mode. И все бы ничего, в общем-то — кого сегодня удивишь странностями и багами IE. Интересное состоит в том, при каких условиях проявляется проблема. В этот раз это происходит в зависимости от того, какие символы вводятся в поле ввода — кириллические или латинские. Кириллица вызывает проявляение проблемы, латинница вводится нормально и проблема не проявляется. Это показалось мне достаточно интересным и я решил поделиться наблюдением собщественностью.

Одной из редко используемых возможностей CSS2.1 являются счетчики. Описаны они в разделе спецификации, посвященной генерации контента. Что же это такое?

Приведу пример из спецификации, эмулирующий обычный нумерованый список с помощью счетчика и свойства content:

OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }

Первым правилом мы назначаем элементам OL счетчик с именем «item», затем для всех LI меняем значение свойства display на block, вместо значения по умолчанию (list-item), чем отключаем стандартные маркеры-цифры. Наконец, в последнем правиле, мы инкрементируем счетчик для каждого элемента списка, а само его значение показываем перед элементом c помощью функции counter() и свойства content. Всё просто.

Пост скорее для себя, чем для других.
Код и подробности под катом.

Предлагаю всем интересующимся небольшую страницу с наглядным сравнением того как реагирует ваш браузер на CSS3-свойства, поддерживает их либо нет. Страница будет развиваться и наполняться другими свойствами, кроме того, планирую добавить в нее ссылки на описание свойств и дополнительную информацию. На данный момент в тесте участвует 10 свойств, но если вы хотите расширить его, пожалуйста напишите в комментариях про желаемое CSS3-свойство.

Посмотреть тест.

PS: opacity в тесте не будет.

Управлять потоком можно не только свойствами clear или overflow. Возможно, вы найдёте полезным для себя использование display:inline-block или display:table-cell, способных полностью заменить вам упомянутый overflow, избавляя вас от опасности указания размеров элемента, а также предоставляя дополнительные возможности.

Статья не содержит универсальных решений, но открывает вашему взору дополнительный инструментарий для управления потоком.

Навеянно этой темой.
Пример, как это работает.

1. Введение

Представим, мы имеем класс relative, внутри которого имеется текст, и не задаём ему width:

#bar{
position:relative;
border:5px solid #00FFFF;
padding:10px;
height:200px;
}

мы получим резиновый блок:

<div id="bar">
text
</div>


При этом, блок обладает неизменными padding+border и резиновым width, таким, что width_px+padding_px+border_px = 100%.
Для absolute блоков, такой трюк не прокатывает.

Эта тема в сети не новая, но тут статью об этом не нашла. Оказывается, у IE, начиная с версии 7, есть поддержка интерполяции (режима масштабирования) изображений и управления им через CSS-свойство -ms-interpolation-mode, описанного в MSDN.

Свойство имеет 2 значения:
— nearest-neighbor (менее качественный режим) — по умолчанию
— bicubic (более качественный бикубический метод)

W3C рекомендует использовать это свойство с префиксом -ms.

Свойство clear со значениями left, right, both действительно очищает поток в отличие от overflow со значеним hidden, которое создаёт отдельный контекст форматирования для выбранного элемента, тем самым локализуя действие свойства float внутри элемента к которому применён.

Тег <marquee> известен многим. Этот тег позволяет создавать на странице простейшую анимацию в виде плавного скроллинга текста. <marquee> появился в Internet Explorer и не является стандартным тегом, тем не менее, поддерживается большинством браузеров в целях совместимости. В наши дни W3C не рекомендует использовать <marquee>.

Однако не многие знают, что marquee обретает жизнь в новом лице.