egorinsk

Я бы сделал джипегом. Почему?

JPG легкий и хорошо сжимает файлы с плавными переходами цветов
JPG поддерживается в IE6, 7, 8, на смартфонах и айфонах
JPG не тормозит при прокрутке и перерисовке страницы. Из-за нездорового увлечения CSS3 и SVG и тяжелой верстки сайт может медленно рендериться, скроллинг станет дерганным, а анимация не потянет 60 fps. Таких сайтов сейчас становится все больше и больше.

Нафига overflow: hidden? Скрывать слишком большие картинки и выпадающие наружу части слов?

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

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

> Делать fallback на jQuery очень не хотелось, так как теряется вся суть затеи.

Разве это сложно?

Также, замечу, что CSS анимации имеют свойство грузить процессор, включать вентиляторы и сажать батарейку. Хотя тот же флеш умеет то же самое и даже больше без такой нагрузки. Вы рискуете делать тормозной и дергающийся сайт. В сети полно анимаций, которые не то что 60, 30 fps не выжимают.

> который при нажатии на «кнопку (тег: a )»

Это конечно не совсем по теме вопроса, но для создания кнопок в HTML есть тег button, button по-английски значит «кнопка» (или тег span, если button не верстается нормально). Тег A предназначен для создания гиперссылок.

Я не знаю, откуда пошла эта нездоровая тенденция (подозреваю, что с запада, так же как и дурная тенденция писать [br /] со слешем, видимо люди думают, что HTML — это вид XML), но всюду вижу, как кнопки и псевдоссылки верстаются тегом A с костылями вроде javascript void. И на сайтах, и в с татьях на Хабре и в каком-нибудь smashing magazine. Уровень неграмотности поражает. Начинающие не хотят читать мануалы и стандарты, а хотят учиться по неграмотным статьям из блогов неграмотных верстальщиков. А опытные верстальщики делают так много лет и не хотят переучиваться.

Потому советую вам встать наперекор общественному мнению, учиться верстать правильно и никогда не писать a href=# и a href=javascirpt void. После этого вам не придется ломать голову тем, что значит «return false».

Сейчас от этого только минусы: необходимость добавлять яваскрипт-код для совместимости со старыми ИЕ. Я бы использовал дивы, пока HTML 5 не станет лучше поддерживаться.

Если лого фиксированного размера, то это же элементарно делается средствами CSS: делаем 2 блока (float left и right) шириной 50%, в них блок с margin-right/margin-left, равной размеру логотипа, получаем зону слева от логотипа и справа. Их делим на 3 части с помощью float: left, width 33% и text-align: center.

Шрифт можно менять через media query.

Яваскрипт, и тем более тяжелый 200-килобайтовый фреймворк (который наверняка превратит изменение размера окна в слайдшоу на реальном сайте) для такой относительно простой задачи не требуется.

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

> 1. Я просто хочу, что бы IE678 игнорировали эти настройки, а именно использовали стили для 980px+ разрешения. Подходят ли данные средства CSS для этого?

caniuse.com/css-mediaqueries — IE 6-8 не поддерживают CSS media queries, потому они скорее всего будут игнорировать их. Для этого не надо дописывать ни одной строчки кода :) Соответственно, в Media Queries надо заключать условия для маленьких экранов, а без них — для больших.

> Какие разрешения вообще стоит использовать?

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

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

То есть, использование ад. дизайна требует лишних усилий от дизайнера, верстальщика, программиста, надо тестировать все страницы в 2 разрешениях, а ради чего? Непонятно. У меня такое ощущение, что некоторые люди где-то услышали, что это модно, а зачем это делается и какой ценой обойдется, не понимают.

Сделать HTML-страницу/сайт в локалке со сниппетами кода (например: кнопки и формы) и пусть все оттуда его копипастят.

Ну или более правильный способ — сделать макросы в шаблонизаторе на все случаи жизни, если ваш шаблонизатор это поддерживает.

То ли на гитхабе, то ли на гуглокоде можно получать ссылки на raw-файл.

Убрать overflow:hidden. Назначение этого свойства — скрывать вылезающие за пределы дива (кроме AP в некоторых случаях) элементы. Почему-то некоторые особо криворукие товарищи пытаются лечить им баги своей кривой верстки, что неправильно.

Нормально — нельзя сверстать. Только через SVG/VML.

В CSS3 можно написать background: url(image.jpeg#xywh=10,10,20,20) repeat-x 0 0; или вроде того, и он возьмет кусок картинки и будет ее повторять. Я угадал ваш сон?

Также, есть свойство (которое все производители браузеров поддерживают по-разному и которым вообще невозможно пользоваться) border-image, которое позволяет разрезать картинку на 9 частей и тянуть, чтобы получилась рамка.

Кстати, у меня ощущение, что css спрайты противоречат идеологии HTML/CSS и объединением картинок должен заниматься прикладной протокол, например HTTP. Потому, наверно, поддержки спрайтов так долго не было в CSS.

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

А маркап… вы, заходя на сайт, исходный код читаете, да?

По моему, мобильные браузеры обрабатывают фреймы и ифреймы особо. В руководстве к мобильному сафари у Эппл, например, это описано. Так что вам лучше погуглить документацию к браузеру андроида.

100.01% — это хак для какой-то из древних (реально древних) версий Оперы. Те кто его применяют — тупые копипастеры, которые не понимают, что они делают. Сейчас во всех браузерах (включая ИЕ6) 100% — это дефолтный размер шрифта (т.е. 16px). И указывать font-size 100% особого смысла нет.

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

Особенно важно, если у вас к примеру есть кнопка, и она сделана картинками, и ее размер фиксирован в px, странно для такой кнопки указывать шрифт в em или %. Т.е. там, где есть жесткая привязка к пикселам, для шрифта должны указываться именно они.

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

Я лично дефолтный шрифт страницы определяю на элементе html.

Это так и должно быть — www.w3.org/TR/CSS21/box.html#collapsing-margins. Все бы ничего, но в Ие6-7, в зависимости от haslayout у внутреннего/внешних блоков, это эффект ведет себя абсолютно по-разному потому от него надо избавляться. Замените margin на padding или Добавьте к внешнему блоку 1px padding сверху и снизу.

За ссылки с href=# надо отрывать руки. Что это за ссылка, которая никуда не ведет? Далее, при отключенном яваскрипте у вас будет пустая страница. далее, зачем тянуть 150-Кб тяжелый фреймворк, от которого айфон подвисает, ради табов?

Далее. Вот у вас написано

#wrapper div { display:none; }

Что, если внутри сождержимого таба есть еще дивы? А если внутри таба есть еще один блок табов? А?

Далее, а что если табов больше 3-х?

Сделано на троечку, на уровне школьника, который впервые прочел сайт htmlbook.ru и захотел что-то сотворить. С кучей ошибок. Плохо, короче говоря.

И что значит «без использования хешей»? Это почему еще?

К слову, табы можно сделать вообще без яваскрипта, но вам видимо еще до этого далеко. Также, верстку табов можно сделать семантичнее — погуглите, у Сергея Чикуенка была статья на эту тему.