Шпаргалки

Cascading Style Sheet (CSS) hacks phespirit.info styles are defined in a single CSS document: www.phespirit.info/stylesheet/phespirit.css phespirit.css hacks have been tested for consistency and accessibility using the following browsers: Netscape 4.78 (NN4) on Windows 98 and Windows XP Professional Netscape 6.21 (NN6) on Windows 98 Netscape 7.00 (NN7) on Windows 98 Mozilla Firefox 1.5.0.9 (FF1) on Windows XP Professional Microsoft Internet Explorer 5.50 (IE5) on Windows 98 Microsoft Internet Explorer 6.00 (IE6) on Windows 2000 and Windows XP Professional Opera 6.04 (OP6) on Windows 98 and Windows XP Professional Opera 7.54 (OP7) on Windows XP Professional Opera 8.02 (OP8) on Windows XP Professional CSS Hack 1 : hiding CSS from NN4 Example code - to hide a horizontal rule width setting of 100% from NN4: /*/*/a{} hr { width : 100%; } /* */ By preceding single or multiple style(s) with /*/*/a{} and terminating the style(s) with /* */ all content in between will be invisible to NN4. Hacks for other browsers can be used inside this hack. CSS Hack 2 : hiding CSS from IE4/5 Example code - to set a paragraph font-size of x-small for IE4/5 and a font-size small for IE6: p { font-size : x-small; voice-family : "\"}\""; voice-family : inherit; font-size : small; } Microsoft Internet Explorer versions 4 and 5 cannot detect styles after voice-family : "\"}\""; due to a bug in their implementation of voice-family. This example initially sets the font-size to a keyword value of x-small for all browsers, then terminates the style settings for IE4/5, recovers the voice-family style for IE6 (along with other browsers which do not have this bug) and finally resets the font-size to small. CSS Hack 3 : hiding CSS from IE4/5/6 Example code - to hide a horizontal rule width setting of 100% from IE4/5/6: html>body hr { width : 100%; } Microsoft Internet Explorer versions, up to and including version 6, are unable to recognise style rules which include a child selector (two or more selectors separated by a ">" symbol) in the definition. This example checks for horizontal rule elements which are the descendant of a body element which in turn is the child of the html element. CSS Hack 4 : hiding CSS from OP6 Example code - to hide a horizontal rule width setting of 100% from OP6: head:first-child+body hr { width : 100%; } Opera is unable to recognise style rules which include the :first-child pseudo-element in the definition. This example checks for horizontal rule elements which are the descendant of a body element which in turn is the first child (i.e. immediately follows) a head element. CSS Hack 5 : hiding CSS from IE4/5/6 and OP6 Example code - to hide a horizontal rule width setting of 100% from IE4/5/6 and OP6: html>head:first-child+body hr { width : 100%; } By combining hack 3 and hack 4, CSS can be hidden both from versions of Microsoft Internet Explorer up to and including version 6, and from versions of Opera up to and including version 6. CSS Font-Size Hack : setting equivalent font-size keywords for NN4/6/7, FF1, IE4/5/6 and OP6/7 Example code - to set a paragraph font size equivalent to HTML size=2 in all browsers: EXAMPLE 1: this example assumes either that no DTD be applied or that the DTD applied is: p { font-size : small; } /*/*/a{} body p { font-size : x-small; } html>head:first-child+body p { font-size : small; } /* */ The paragraph font-size is set four times in this example. It is initially set as small for NN4, after which all subsequent code is hidden within hack 1. It is then reset to x-small for IE4/5/6 and OP6, using the more-specific body p descendant selector method. It is then reset to small again, this time for NN6/7, FF1 and OP7, using hack 5, which contains even more specific methods. EXAMPLE 2: in which the DTD applied is that used by phespirit.info: p { font-size : small; } /*/*/a{} body p { font-size : x-small; voice-family : "\"}\""; voice-family : inherit; font-size : small; } html>body p { font-size : x-small; } html>head:first-child+body p { font-size : small; } /* */ The paragraph font-size is set three times in this example. It is initially set as small for NN4, after which all subsequent code is hidden within hack 1. It is then reset to x-small for IE4/5 and back to small for IE6, using the more-specific body p descendant selector method. It is then set to x-small once more for OP6, and finally back to small for NN6/7, FF1 and OP7, using hack 5, which contains even more specific methods. Example table - equivalences for CSS keyword font-size in various Microsoft Windows browsers: Browser HTML size 1 HTML size 2 HTML size 4 Netscape 4.78 see note (i) below x-small; small; medium; bold; Netscape 6.20 x-small; small; large; Netscape 7.00 x-small; small; large; Mozilla Firefox 1.00 x-small; small; large; Microsoft Internet Explorer 5.50 xx-small; x-small; medium; Microsoft Internet Explorer 6.00 (case 1) xx-small; x-small; medium; Microsoft Internet Explorer 6.00 (case 2) x-small; small; large; Opera 6.04 xx-small; x-small; medium; Opera 7.54 x-small; small; large; Notes: There is no exact keyword equivalent to HTML size 4 for Netscape 4.78; phespirit.css uses keyword medium together with font-weight bold in preference to keyword large with font-weight normal. Microsoft Internet Explorer 6.00 (case 1) assumes either that no DTD has been applied or, as in the case of phespirit.css, that the DTD used is: Microsoft Internet Explorer 6.00 (case 2) assumes that any other DTD has been applied.

Real Dotted-line <hr> / Точечный <hr>

hr {color: #fff; background-color: #fff; border: 1px dotted #ff0000; border-style: none none dotted; }

Очень просто сделать, но сложно найти как ))


Профессиональная верстка css xhtml работаю удаленно.

Свежие работы:
http://www.clipso-russia.ru/
http://www.aviasalon.com/
http://www.magicprint.ru/
http://www.patron-moto.ru/

Пишите: vsovin(at)gmail.com
Звоните: 89226922679

П.С. Сотрудничаю с дизайнерами, программистами, CEO.
Есть отличная комманда - выполним все виды работ в области веб строительства.

Резюме

Кроссбраузерная верстка макетов XHTML Strict 1.0\1.1 + CSS 2.0 любой сложности. Строгое соответствие стандартам W3C, полная валидность (за исключением случаев с использованием хаков).

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

Кроссбраузерная верстка:
(нарезка psd, верстка , оптимизация под браузеры)
http://www.driedflowers.ru/
http://detoks.com/
http://www.parislove.ru/
http://www.transnerud.ru/
http://moreflowers.ru/
http://glanz-r.ru/
http://www.udmurtlift.ru/

http://asso-stroy.ru/ - сайт крупного холдинга. (проектирование, верстка)
http://holster-ltd.ru/ - сайт, интернет магазин (проектирование, верстка)
http://pk-holder.ru/ - сайт, каталог продукции (проектирование, верстка)

Табличная вестка:
http://www.naidy.com/ - (проектирование, верстка)
http://www.uralfactories.ru/ - (проектирование, верстка)

Список работ для дизайн студии "ЯРКО!":
http://www.yarkodesign.ru/about/personal/sovin.html

Долгое время работал на крупнейшего регионального провайдера МАРК-ИТТ с 1998 года. некоторые работы:

http://home.mark-itt.ru/ портал - проектирование, дизайн, верстка.
http://www.banners.mark-itt.ru/ баннеро обменная система - проектирование, дизайн, верстка.
http://izhevsk.net/ каталог - проетирование, дизайн, верстка
http://udm.ru/ почтовая система - проектирование, дизайн, верстка

Адаптивная разметка

Marc van den Dobbelsteen, 13 апреля 2007

Создание резиновых разметок с помощью CSS хорошо зарекомендовало себя при ширине экрана от 800 до 1024 пикселей, но поскольку все более широкий круг устройств используется для доступа к веб, нам нужно более мощное и гибкое средство подстройки разметки под пользователя. Если мы хотим, чтобы сайт отображался с помощью устройств с экраном от 240 до 1680 пикселей и разрешением от 72 до 150 пикселей на дюйм – нам нужен действительно новый метод.

Что не так с резиновой разметкой?

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

Тогда почему бы нам не сделать разные разметки для нескольких диапазонов размера экрана, а потом автоматически выбирать наиболее подходящую.

Адаптивная разметка решит наши проблемы

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

Вот пример¹ страницы новостей, использующей адаптивную разметку. В целях демонстрации мы определили семь диапазонов размера экрана и для каждого диапазона сделали разметку, позволяющую наиболее эффективно использовать доступное место.

Оформление страницы изменяется, начиная от варианта для очень больших экранов, включающего все элементы контента, по мере уменьшения размера убирается наименее необходимые элементы. Вот какие диапазоны размера экрана мы использовали для этого примера.

Диапазоны размера экрана

Устройство	Размер экрана	Разметка
PDA Вертикальный экран	< 240 px
PDA Горизонтальный экран	240-320 px
Set top / Телевизор	320-640 px
Старые CRT мониторы	640-800 px
Распространенные TFT мониторы	800 – 1024 px
Широкоэкранные мониторы	1024 – 1280 px
Супер-широкоэкранные мониторы	> 1280 px

Замена классов

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

JavaScript наш помощник

Чтобы определить размер экрана, мы используем небольшой скрипт, который выполняется при событии onresize. В зависимости от полученного результата будет выбираться соответствующий класс и с помощью DOM добавляться к элементу body. В случае если JavaScript отключен мы получаем обычную резиновую разметку.

Обратите внимание, что различные браузеры используют различные модели событий, например в IE6 событие onresize возникает постоянно при изменении размеров окна браузера, а в FF только когда изменение размеров окна закончено.

Прогрессивное сжатие контента

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

Что дальше

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

Вывод

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

Альтернативные методы

Техника, которая была представлена, разработана независимо, но существует множество похожих техник, например Ричард Руттер собрал серию похожих техник³ на Clagnut⁴, а Кевин Хол представил технику, которая дает похожий результат, при немного другом подходе на Particletree⁵. Энди Кларк и Джеймс Эдвардс были пионерами в этой области и их статья Переключатель стилей⁶ способствовала популяризации использования классов элемента body для изменения разметки.