UGgallery

В заметке 10 CSS Tips from a Professional CSS Front-End Architect в седьмом совете, Райан Парр между делом сообщает, что IE для Windows Mobile 5, неправильно отображает стили подключенные с атрибутом media=”screen”.

Если на странице одновременно присутствуют стили для больших экранов (screen) и для мобильных устройств (handheld), мобильный IE смешивает их и использует оба набора стилей. В результате — каша. Но есть решение:

<style type="text/css" media="Screen">...</style>

Чтобы предотвратить неправильное поведение IE для Windows Mobile 5 достаточно написать “Screen” с большой буквы.

Давненько не было видно таких солидных глюков. Хорошо, что фикс уже найден.

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

Быстрый и надежный способ отключить правило в CSS — поставить перед ним букву Z без пробела между буквой и правилом.

#foo {
    zcolor: red;
    }

Может быть использована любая другая буква, но я использую Z не случайно. Далее »

Из всех видов IR на сегодня мне больше всего нравится метод с использованием CSS-свойства content с псевдо-классом :before. Этот метод работает в современных браузерах, примерно у 20% пользователей. По-моему, достаточно для начала. Что делать с остальными восьмидесятью — ниже.

В самой минимальном варианте CSS выглядит так:

h1 {
    overflow: hidden; 
    width: 300px;
    height: 30px; 
    }
h1:before {
    content: url(example.png);
    }

Далее »

Самое замечательное в дизайне, сделанном целиком в CSS, то, что такой дизайн можно отключить. Одно нажатие — и перед тобой простой черный текст на контрастном белом фоне, с четко выделенными заголовками, с понятными ссылками. И нет проблем с длинной строк — ты сам управляешь ими, меняя размер окна.

Когда слышу как некто жалуется, что из-за дизайна невозможно пользоваться хорошим сайтом, мне хочется сказать: “так отключите оформление!” Все время забываю, что в большинстве браузеров это сделать не так легко.

Мне кажется, что дизайнер, на самом деле думающий о пользователе, должен на каждой странице своего сайта предусмотреть большую кнопку с крупной надписью: “Отключите оформление, если оно вам не понравилось”.

Оказывается, чтобы закодировать графику в формате Base64, не нужны никакие специальные программы. Можно пользоваться подручными средствами в виде старого доброго MS Internet Explorer. Эта штука умеет сохранять страницы вместе с графикой в формате MHT (MHTML — MIME HTML). Графика, как раз, в Base64 кодируется.

Далее »

Продолжается медленное но уверенное “переползание” крупных российских сайтов и крупных сайто-производителей на современные методы верстки. Студия Болотов.ру (одна из самых крупных в рунете, насколько я понимаю) оформила новый сайт — “Собственник“. Сайт занимает первое место в профильном разделе Rambler-Top-100.

С семантикой напряженно. Масса вложенных DIV-ов каждый, как правило помечен каким-нибудь ID или CLASS-ом. К счастью, заголовки, списки и абзацы тоже присутствуют.

Валидация — в том же духе. Ошибок не много, но они есть — по 10-20 страницу. Что, конечно, не сравнить с 460 ошибками на IXBT.com.

В остальном, дазайн и технологии сайта выгляд довольно современными. Тот случай, как мне кажется, когда встретились профессионализм и веб-стандарты. И вроде как все закончилось хорошо.

Не знаю точно, но возможно, этот сайт работает на собственной CMS студии Болотова. А это значит, что в скором времени могут появиться другие крупные бестабличные “почти по стандартам” сайты.

Собрал все свои ссылки по Image replacement на одной странице.

Огромное количество ссылок на разные способы создания блоков с закругленными углами на Smileycat.com.

Есть несколько способов визуализации блоков при на начальных этапах верстки. Когда есть пустой, или полупустой, блок, и нам хочется увидеть четкие его границы. Чтобы задать нужные размеры и правильно позиционировать его.

С такой задачей неплохо справляется Firefox с расширением Web Developer. Но это решение не подходит, если нужно увидеть блоки в нескольких браузерах сразу: Firefox, Opera, IE 5-6.

Далее »

Есть идея использовать для замещения текста (image replacement) CSS-свойстов line-height. Идея требует проверки, но уже сейчас кажется вполне перспективной. Это хорошо работает в Internet Explorer 5-6. Особых проблем пока не замечено.

Тестовая страница и код.

Ранее мне не встречался такой метод, не смотря на то, что идея лежит на поверхности. Было бы интересно узнать, если об этом уже где-то писали.

Это сообщение родилось благодаря обсуждению на CSSing.org.ua.