Perlover's Blog » css

Хорошая статейка по CSS и Float блоки (поплавки)

Perlover — Thu, 24 Mar 2011 11:21:38 +0000

Вот искал и нашел эту статейку со всеми премудростями обращения с блоками — поплавками (float) в CSS. Спешу с вами поделиться

http://designformasters.info/posts/css-float-theory-and-practice/

Для тех, кто хочет иметь этот адрес всегда под рукой в мобильнике, вот QR-Code:

DOCTYPE & Images в таблицах — почему разваливается дизайн?

Perlover — Wed, 26 Jan 2011 13:57:16 +0000

Это будет краткий обзор моего исследования на тему DOCTYPE (подробнее о DOCTYPE я напишу как нибудь позднее) и поведения элементов. Итак, если вы еще не знаете, а являетесь вебдизайнером или верстальщиком HTML страниц, вам надо знать, что лучше указывать тип документа для HTML диррективой DTD в начале любого HTML документа: . Потому как иначе, ваша страница может выглядеть и работать не так, как вам хочется (например, без этого определения не работает CSS «position: fixed»). Я долго мучался с этим DOCTYPE, чтобы все работало так, как хотелось бы, и пришел к выводу, что лучше делать именно такое объявление типа:

ставиться в самом начале HTML документа, а в CSS стиль добавляется следующая директива:
img {display: block}

Краткое пояснение: первой строкой вы говорите броузеру использовать тип документа HTML без указания явного типа модели strict/quirk (лучше не указывать явно, так как вы не старайтесь, все равно очень сложно создать строго валидный HTML, зато такое простое определение включает большинство броузеров в Strict mode — взято с Google страниц), а второй директивой CSS вы устраняете одну из проблем strict режима — в нем все елементы имеют inline тип, а не block. Из-за отсутствия такой директивы, ваш дизайн может «расползаться», если имеются элементы внутри . Дело в том, что как привыкли вебдизайнеры старой школы, если вставить в только , картинка должна заполнить всю ячейку таблицы край в край. Все это работало, потому что для броузера IMG являлся блоком, а CSS утверждает, что если в блоке (TD) встречается блочный элемент (IMG), то содержимое блока становится блочным и работает по правилам блока — «край в край». Такое же поведение выставляется в Quirk и Almost Strict режимах. В Strict модели IMG является inline типом, поэтому по CSS получается, что в блоке (TD) идет только inline (IMG), значит содержимое ячейки будет работать как inline модель для содержимого — броузер «выделит» пространство для текста, как он делает для inline содержимого. Именно это «пространство» в виде отступа снизу после картинки и «разваливает» дизайн страниц. И многие верстальщики могут долго искать причину, почему так происходит.

Вообще, я много интересного у знал о моделях Strict/Quirk броузеров. Как обобщю все инфу, выложу ее здесь.

Пипетка цветов прямо из Firefox

Perlover — Mon, 02 Nov 2009 14:36:49 +0000

Сегодня поставил очень полезный плагинчик для вебмастера сайтов. Кто работал с Фотошоп, знают инструмент «пипетка» — тыкаешь в любое место картинки, получаешь параметр цвета. Я раньше так и делал для сайтов — делал скриншот, потом копировал в Фотошоп, там получал цвет пипеткой. Но если вам надо получить цвет из веб страниц, самый лучший способ — ColorZilla плагин.

Итак, скачиваем, ставим. Внизу слева появляется значок «пипетки». По правой кнопке мыши можно вызвать опции, установить разные настройки. Быстрый вызов — Shift + Esc. При этом появляется мишень — вы наводите на любое место в Firefox, хоть на менюшки самого Firefox, при этом видите цвет в мишени там, где пипетка. Клик — и цвет запомнен. Очень рекомендую поставить опцию «Options» -> «Auto Copy» -> «Enabled». Тогда автоматом цвет при клике будет запоминаться в Clipboard. Работает даже для картинок вебстраницы.
Если удерживать Alt + Shift, то можно прокручивать страницу вправо-влево, вверх-вниз мышкой, с нажатой на ней левой кнопкой (удобно, когда страница больше чем экран).

Но! Этот плагин имеет очень много других полезных фишек. Это:

Измерение расстояния (ΔX, ΔY) между текущей позицией мишени пипетки и позицией от предыдущего измерения
Редактор цветов
Палитры цветов и history по ним (иногда удобно использовать это)
И самая полезная штучка — Анализатор цветов страницы (Webpage DOM Color Analyzer). Один вызов этого зверя, и он проанализирует всю страницу, построит палитру цветов, что в ней используется и выдаст вам эту палитру. Если при этом наводить мышкой на цвета, он подсвечивает и показывает куски страницы, где используется этот цвет. Я думаю, полезно это может оказаться, например, в таком случае: вам понравился сайт и его цветовая гамма, вы вызываете анализатор, а потом эту палитру используете. В ней можно исключать какие либо цвета, или разделять ее между участниками через общий сайт addon-са. Вообщем, если поразбираться, должно понравиться. Думаю, на самом сайте можно найти много готовых палитр (не пробовал пока)

Есть у него маленький минус. Если линки имеют :hover псевдокласс, и когда вы наводите на такой линк мишенью, то цвет линка меняется на :hover класс. Поэтому, получить цвет :hover класса можно, а вот цвет простого линка — нельзя, по крайней мере я не нашел этого.

Уже после публикации этого поста, я выяснил, что можно узнать цвет под :hover линком. Не знаю, как я просмотрел это на странице help автора плагина. Вообщем, тыкаем в :hover линк, у нас — цвет после наведения мышки. Кликаем правой кнопкой мыши по пипетке в Status Bar — там есть «Resample Last Location». Выбираем этот пункт — у нас цвет до изменения.