gWords

Частые вопросы о CSS

2008-12-17T18:48:00.004+04:00

Подборка примеров и ссылок по CSS. Список вопросов составлен на основе поисковых запросов.

* position:fixed в ie61
* прибивание футера2
* clear у блока float3
* скругление углов css4
* условные комментарии в css5

position:fixed в ie6

В iE6 position:fixed не работает, но если очень нужно, то заменить его можно с помощью position: absolute и expression вычисляющего положение элемента в зависимости от положения скрола.

#fixed-block {
position: fixed;
right: 2em;
top: 100px;
background: wheat;
padding: 1.5em 1.5em 1.5em 3em;
width: 15em;
}

* html {
background: fixed url('null.png');
}

* html #fixed-block {
position: absolute;
top: expression(eval(document.documentElement.scrollTop) + 100 + 'px');
}

пример6

Подробная статья про Полноценный fixed в MSIE7 есть в Техногрете, но обратите внимание, что в Standards Mode используется document.documentElement, а в Quirks Mode document.body.
прибивание футера

HTML

CSS

html {
height: 100%;
}

body {
min-height: 100%;
}

* html body {
height: 100%; /* замена min-height:100% для IE6 */
}

body {
position: relative; /* абсолютно позиционируемые элементы
будут располагаться относительно body */
}

#content {
padding-bottom: 7em; /* место для футера */
}

#footer {
position: absolute;
bottom: 0;
height: 7em;
width: 100%;
background: wheat;
}

пример8

Не работает в IE5. В IE6 футер не уходит на свое место, если размер страницы изменяется в результате работы JavaScript, например, если скрыты или добавлены некоторые элементы страницы.

Дополнено: В Opera 9.51 работает только если css подключен внешним файлом, если использовать для css элемент style то работает только с бубном, например, если взять одно слово на странице в . Проблема связана не столько с самим способом прибивания футера, сколько с особенностями min-height: 100% в Opera 9.51, во втором способе, на который ссылка ниже, она тоже есть.

Еще один способ прибивания футера9.
clear у блока float (+ миллион вариантов запроса)

Часто нужно заставить родительский блок полностью поглощать вложенные float блоки, для этого можно использоваться следующие стили:

#block {
overflow: hidden; /* для всех браузеров */

/* для IE */
height: 1%;
/* или */
zoom: 1;
}

Если у родительского блока задана высота то height: 1% не подойдет, у zoom: 1 проблема только в том, что это нестандартное свойство, если важна валидность нужно вынести в отдельный файл для IE.

Этому действу не имеющему приемлемого русского названия посвящена статья Clear для плавающих блоков10 подробнее о float и связанных с ним багами можно почитать в статье CSS Float в теории и на практике11.
скругление углов css (второй по количеству вариантов запрос)

Видимо на этот вопрос найдется не меньше миллиона ответов.

* Более 50 методов закругления углов (eng)12
* 38 способов скругления блоков13
* Я писал про закругление без изображений14, Dimox добавил к нему сглаживание15.

условные комментарии в css

Условные комментарии16 привилегия HTML, чаще всего применяются для того, чтобы сделать CSS файл видимым только для определенной версии Internet Explorera, например для IE6:

Прогрессивное улучшение и CSS

2008-12-17T18:32:00.006+04:00

Организация стилей

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

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

Возьмем файл main.css, содержащий все стили для вашего сайта и разделим его на несколько файлов содержащих типографику, разметку, цветовую информацию, назовем их соответственно: type.css, layout.css, color.css.

Разделение общего файла стилей на несколько контекстных

Теперь, не прикладывая сколь либо значительных усилий, мы можем показать упрощенную версию страницы в браузерах плохо поддерживающих CSS или очень старых браузерах (таких как Internet Explorer 5/Mac). Как? Вся хитрость в том, как мы подключаем файлы. Перед тем как мы начали вносить изменения, единственный файл main.css подключался с помощью элемента link следующим образом:

#link rel="stylesheet" type="text/css" href="main.css" /#

Потом мы разделили его на три файла подключаемых индивидуально:

#link rel="stylesheet" type="text/css" href="type.css" /#
#link rel="stylesheet" type="text/css" href="layout.css" /#
#link rel="stylesheet" type="text/css" href="color.css" /#

В прошлом многие из нас использовали media="screen,projection" чтобы скрыть от Netscape 4.x файл с разметкой, я покажу способ лучше. Но прежде давайте обратим внимание на альтернативные медиа типы.
Альтернативные медиа типы

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

К несчастью, рынок мобильных устройств все еще очень фрагментирован и незрел (не заставляйте меня меня вспоминать о мобильных браузерах, думающих, что они должны использовать стили для устройства screen). Благодаря этому, обсуждение всех деталей использования прогрессивного улучшения для мобильных устройств, требует как минимум нескольких статей, а может и целой книги. Но не отчаивайтесь: умные люди уже начали собирать ресурсы2 призванные помочь3 в разработке для мобильных устройств, мы же пока сфокусируемся на печати.

Обычно стили для печати подключаются отдельным файлом с помощью элемента link:

#link rel="stylesheet" type="text/css" media="print" href="print.css" /#

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

Выше мы уже пришли к следующему способу подключения стилей:

#link rel="stylesheet" type="text/css" href="type.css" /#
#link rel="stylesheet" type="text/css" href="layout.css" /#
#link rel="stylesheet" type="text/css" href="color.css" /#

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

Поскольку мы не указали медиа типы, Netscape 4.x будет видеть стили во всех трех файлах, чтобы избежать этого, воспользуемся его слабым пониманием CSS. Для лучшей организации CSS переместим стили из файла layout.css в новый файл screen.css, а в layout.css подключим его с помощью директивы @import, поскольку NS4.x не поддерживает эту директиву, стили, отвечающие за разметку, будут от него надежно скрыты.

@import 'screen.css';

Остается указать, для какого устройства предназначены эти стили:

@import 'screen.css' screen;

Проблема этой записи в том, что IE до седьмой версии включительно, не понимаеет такой синтаксис и игнорирует, подключаемые, стили. Преодолеть эту проблему нам помогут условные комментарии.

Поскольку IE5/Mac плохо поддерживает CSS, особенно плавающие блоки и позиционирование, лучше полностью скрыть от него стили, отвечающие за разметку. Чтобы сделать это достаточно использовать для имен файлов одинарные ('), а не двойные (") кавычки. При этом типографика и цветовая схема могут быть сохранены.

Тот же самый прием мы используем для подключения файла print.css (который как нетрудно догадаться содержит стили для печати).

@import 'screen.css' screen;
@import 'print.css' print;

Теперь у нас не только хорошо организованны стили, но и эффективно задействовано прогрессивное улучшение.

Взаимосвязь файлов стилей

Вопрос на 10 мегадолларов: что делать с IE6?

Для многих разработчиков, Internet Explorer 6 — это новый Netscape 4, он является постоянным источником проблем, и верстальщики с нетерпением ждут того момента когда он окончательно покинет рынок браузеров.

Опустим здесь негодования по поводу проблем в IE6, они хорошо документированы4 и многие из них легко преодолимы, тем более, что переход на IE7 происходит достаточно быстро (особенно среди индивидуальных пользователей), а IE8 уже в стадии беты, и день когда мы сможем сказать «пока, IE6» все ближе.

Отличный инструмент для реализации прогрессивного улучшения внедрен Microsoft еще в IE5, он называется: условные комментарии5. Это замечательное изобретение позволяет нам не только скрыть часть разметки от остальных браузеров, но и точно указать для каких версий IE она должна быть видима.

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

* type.css
* layout.css
* screen.css
* print.css
* color.css

Потом в зависимости от требований проекта, я добавляю отдельные файлы для некоторых браузеров, в большинстве случаев это ie7.css и ie6.css, если проект требует поддержки более старых версий IE то создается соответствующий файл (например, ie5.5.css).

Тестирование CSS я всегда начинаю в Mozilla Firefox, поскольку при написании CSS использую Edit CSS сайдбар. После того как написаны все стили, я начинаю тестирование в других браузерах. В браузерах хорошо поддерживающих стандарты, редко возникают какие либо проблемы. В IE7 в большинстве случаев, проблем не так уж много, но иногда нужно включить hasLayout6 или исправить какой нибудь небольшой баг разметки. В этом случае, я добавляю необходимые для этого правила в ie7.css и подключаю его к документу, используя при этом условные комментарии:

Такой условный комментарий позволяет подключать этот стиль только для IE версии меньшей либо равной (lte) 7. Это значит, что если кто-то зайдет на страницу из IE7, то исправления будут работать, но если он зайдет из новой версии, в которой проблема вероятно уже исправлена, файл с этими правилами будет проигнорирован.

С другой стороны, если кто-то зайдет на страницу из IE6, исправления из файла для IE7 будут задействованы и это правильно, поскольку, ошибки которые есть IE7 скорее всего есть и в IE6. Хороший пример такой ошибки это непонимание директивы @import с указанным медиа типом, которое исправляется добавлением директивы @import ' screen.css' в начале файле ie7.css без указания медиа типа, которая подключит недостающий файл.

После того как внесены все исправления необходимые для IE7, я открываю IE6 и смотрю не нужна ли ему помощь в отображении этой страницы, если такая необходимость есть, то я добавляю в документ еще один условный комментарий, в котором подключается файл ie6.css.

Стили из файла ie6.css будут работать в IE6 и ниже, и игнорироваться в IE7 и старших версиях.

Использование условных комментариев позволяет легко разделить стили для различных браузеров и избежать использования CSS хаков.

SEO for GOOGLE

2008-06-03T10:08:00.006+05:00

В этом посте Я напишу опять о SEO но в это раз будет о GOOGLE оптимизации...
Если Вы не прочитали предыдущую статью, то советую Вам ее прочитать до этой, это дополнение к ней...
В этой статье Я буду более кратко писать, если будут какие либо вопросы Я с удовольствием отвечу на них или напишу дополнение...

1. Title tag
2. Meta tag
3. H1 tag
4. H2 tag
5. strong
6. em
7. Если у вас есть меню то сборку его делайте тегами UL/LI
8. Google любит крупный фонт >=12px
9. Пишите много контента по теме keyword-а и старайтесь повторять его, отмечайте его тегами strong и em, но не пихайте keyword как попало, следите за тем, чтобы был смысл
10. external links когда ставите на другом сайте линк, то убедитесь сначала какой ранг у этого сайта, если у этого сайта ниже ранг чем у вашего то это если не ухудшит Ваш ранг то не поднимет, то есть старайтесь ставить Ленки на сайты у которых приблизительно тот же ранг который у Вас и это будет Вам обоим полезно...
Есть еще одно но, при обменом ликами найдите 3-его, чтобы не ставить друг на друга, а по кругу...
11. На главной странице ставьте по мере возможности intarnal links, ставьте на линки title.
12. Ставьте на IMG alt, title и его мах размер 200Kb...

SEO (Search Engine Optimization)

2008-05-31T15:12:00.004+05:00

Если Вам интерестна поисковая оптимизация сайта, то в этом посте вы найдете те советы которие помогут Вам сделать этого. Для предысловия хватит, теперь перейду к главному...

1. Самое главное подобрать то ключевое слово или словосочетание по которому вы хотите оптимизировать поиск, сторайтесь подобрать такое словосочетание которое не шаблонное, не пытайтесь оптимиьировать к примеру(по слову автомобиль) это на 98% потерпит крах. Если вы занимаетесь к примеру продажей авто, то выберите к примеру (Купить автомобиль из Германии или что то такое)...
2. Вы выбрали ключеве слово (в последствие КС) , теперь это КС напишите в названии сайта к примеру ("tilte"Название сайта :: КС "/title"), желательно чтоб title изменялся в зависимости от страницы к примеру ("tilte"Название сайта :: КС и дополнение"/title")...
3. meta name="description" это описание сайта, тут записывается о чем сайт, некоторые просто пишут близкие с КС слова через запятую. Но это не правильно.
4. Используйте "h1" тэг, это очень важно, в нем старайтесь просто повторить название сайта, это должен быть вашим главным заголовком.
5. Тэг "h2" или подзаголовок, в нем старайтесь повторять хоть часть из meta name="description"...
6. Используйте "strong","em","b","i" тэги написаны по важности. "strong""/strong" он один из важних, старайтесь отмечать этим тэгом КС в текстах.
7. Если у Вас нету возможности менятся линками с другими сайтами, то за малые денги запишите свои сайт в каком нибудь каталоге их сечас много, Я не буду называть имен...
8. Используйте на Вашем сайте внутренные линки, при возможносте имейте на главной странице линк на дерево сайта, это поможет роботу легко проиндексировать все страницы Вашего сайта.
9. Пишите много текста, время от времени обновляйте тексты, чем больше текста, чем чаще он обновляется, тем больше шансов появится на первой странице поиска.
10. Не лгите посетителю, если он пришел на Ваш сайт с надеждой найти горные лыжи, то будьте добры хоть написать лыж пока нет, но есть водные... :)

На это раз столько, если будут вопросы или дополнения пишите...

second post or Recomendation

2008-05-20T00:59:00.003+05:00

Привет всем, у меня второй пост и в этом посте Я буду говорить о "Рекомендациях", что Я имею ввиду ::
1. Это mootools, для тех кто не знает, это JS библиотека, что в ней хорошего: удобство в использовании, легкость библиотеки, понятный код, отличная документация и демо...
2. Zend framwork, если Вы php progrmmer, советую Вам использовать этот фреймворк,
Zend тоже хорошо документированый...
3. Slimbox, это прелестная фото галлерея созданая на mootools, в течении Я Вам раскажу еще о многих штучках созданых на базе mootools...
3'. noobSlide, если Вы еще не видели это, то уверяю Вас что Вы будете удевлены...
скажу просто после того как Я увидел это у меня родились гениальние идеи...
4. WebApperts, скажу об этом сайте коротко, если тут поискать то можно найти много интерестного...
5. DesignForMasters, это решения и обучение HTML и CSS в подробностях и примерах...
6. Последний линк касается, как из БД получить одним запросом все дерево, это очень мошьный пример и документированный...

фирст gWords

2008-04-25T18:15:00.000+05:00

Всех приветствую на моем блоге gWords !!!
Я рад что вы нашли мой блог в этом безмерном количестве сайтов.
Ну как всегда первый пост будет бла-бла, если я уже надоел, то сразу переходите на второй пост. А кто продолжает читать спасибо, что вы думаете "Это не бред сивой кобылы". Ну перейду на главное, что вы можете найти на моем блоге:
Интересные новости о науке, технике, софте и конечно же о кодах и скриптах, разных поскольку Я web-программист.
Насчет кодов и скриптов скажу, что будет HTML, CSS, JS, JS(Mootools и на нем сделанные примочки, поговорим о SEO, PHP, MySQL, об архитектуре сайта, софта и т.д. Как любой (Я так думаю... ) web-программист, Я тоже ненавижу Microsoft и его продукты, но поскольку, рынок пока (Я надеюсь... ) в его руках, будем мучиться его браузерами и остальной хренью. Да кстати и ЮМОРу у меня будет место :), так что заходите, читайте и делитесь, надеюсь мой блог будет Вам полезен...