На выходе получаем валидный html шаблон который отлично себя ведет.

Спасибо Дмитрию Лялину обновил генератор HTML+CSS шаблонов.

Для быстрого старта нового проекта — самое оно.

Смотреть тут >> csstool.ru

• Это стоит всего 200$, торопитесь! (2)
• Убрать рекламу в ЖЖ (11)
• Торрентс заблокировали (torrents.ru) (3)
• Сглаженные закругленные углы без использования изображений (2)
• Окна призраки (0)

Самые современные браузеры поддерживают :hover селектор для любого элемента html. Это клево, потому что это позволяет Вам применить эффект mouseover к строкам таблицы используя только CSS. IE откровенно лажает с :hover, в лучшем случае если стоит 7 версия, но в большенстве случаев стоит 6.

Whatever:hover – маленький скрипт, который автоматически исправляет :hover :active и :focus для IE6, IE7 и причуд IE8. Версия 3 вводит поддержку ajax, это значит, что любой html, который вставлен в документ через javascript, также имеет вызовы :hover :active и  стили :focus в IE. 

Посмотрим как это работает.

Связь whatever:hover с элементом тела, и Вы все установлены. Отметьте, что URL поведения относительно файла html, не к файлу CSS как фоновое изображение, которым был бы URL.

Link whatever:hover to the body element, and you’re all set. Note that behavior URLs are relative to the html file, not to the CSS file like a background image URL would be.

body { behavior: url("csshover3.htc"); }

Определение поведения для IE. Как это работает?

Все браузеры могут работать с правилами CSS, используя javascript, и динамически вставлять новые правила. Обычно, IE возвращает “unknown” для чего-нибудь, что он не поддерживает, например; “p:first-child div” изменился бы на “div p:unknown”, и “p [href]” будет возвращен как “unknown”. К счастью IE распознает :hover как управляющую конструкцию, и оставляет её в покое.

IE также поддерживает так называемые поведения; есть две встроенные функции поведения, динамическая подгрузка и постоянное хранение данных. Также можно использовать .htc или .hta файл для расширения. Все это связанно с узлами html через css.

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

• поиск всех стилей для :hover которые IE не поддерживает;
• вставка новых правил которые IE действительно поддерживает;
• установка событий сценария для того, чтобы переключить имена классов.

Таким образом :hover :active и :focus сможет поддерживаться, и как разработчик, Вам не надо ничего делать, кроме ассоциации файла сценария. Все остальное на автомате скрипт делает сам.

В отличие от версий 1 и 2, версия 3 также поддерживает динамически добавленный html (Аякс). Различие – то, что 1 версия и 2-ая работал при событии onload (тоесть только 1 раз при загрузке), тогда как 3-я версия использует expression, чтобы позволить элементам делать вызов самостоятельно. Читайте прокомментированную версию для получения информации относительно этого.

Для примера меню An:hover

Обычное использование :hover создает menusystems, используя списки. Двойной уровень menusystem слишком прост для создания. Например, если Вы удалили бы javascript из suckerfish dropdown, описанный в этой статье  и добавили бы этот скрипт к телу, он бы продолжал работать правильно.

Множественные меню требуют различного подхода. Это происходит из-за того, что IE косячит при работе с детьми элементов:

li:hover> ul {/* не пашет в IE */}

Есть альтернативный способ моделировать это, используя  только простые порожденные селекторы. Ранее описанный метод был основан на использования дополнительного пространства classnames, но более простой способ состоит в том, чтобы использовать спецификации CSS. У каждого правила CSS есть определенный вес, который может быть определён просто считая различные элементы правила. Nodenames весит “1″, класс, псевдо-класс и селекторы атрибута весят “10″, и id весят “100″. Возьмем например следующее:

ul ul { display:none; } li:hover ul { display:block; }

Первое правило содержит только 2 элемента, которые весят 2. Второе также содержит 2 элемента, но :hover – псевдо класс весит 10, таким образом объединенное значение правила 12. Поскольку 12 превышает 2, li покажет нам влеженный ul.

Как же это нам поможет? Итак, если правило весом в 12 показывает всё подменю, все, что мы должны были бы сделать, создать правило, которое весит больше 12, чтобы скрыть следующие меню. Следующее подменю должно весить еще больше и т.д. Для 3 уровней код CSS удивительно короток:

/* 2 и 13 */ul ul, li:hover ul ul {display:none;}

/* 12 и 23*/li:hover ul, li:hover li:hover ul {display:block;}

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

Оптимизация событий сценария

Есть ще один способ. .htc файл ищет в CSS :hover правила, и прикрепляет mouseover и mouseout к элементам. После чего :hover убирается из селектора.

#menu li:hover ul {...}

… заменен на:

#menu li {...}

Это правило будет действовать ко всем <li> элементам в меню, прикрепляя события к элементам, для которых это не обязательно. Легче сделать используя имя класса. Например для подменю использовалось бы:

#menu li.folder {...}

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

css hover - сжатая версия (2.5Kb)

css hover source - версия с комментариями (9Kb)

Оригинал статьи: Xs4all.nl

• IE8 мертворожденный (4)
• Я хочу плагин к wordpress (16)
• Новая ОС от гиганта, без браузера (5)
• Мощный PNGfix (4)
• Как убрать Internet Explorer в Windows 7 (1)

1) Идем по этой ссылке: http://www.livejournal.com/customize/options.bml?group=customcss
2) Добавляем в поле «Custom stylesheet» вот это: .adv { display: none;}

За идею спасибо Brain1ess

UPD: вот такие теперь стили необходимы. 

#ad-leaderboard { display: none;} #ad-5linkunit { display: none;} .adv { display: none;}

За подсказку спасибо Пеплу.

• Паша не любит СУП (0)
• Это стоит всего 200$, торопитесь! (2)
• Сглаженные закругленные углы без использования изображений (2)
• Продажность в интернет (0)
• Поднимаем Twitter (2)

Скачать

• Мощный PNGfix (4)
• Это стоит всего 200$, торопитесь! (2)
• Убрать рекламу в ЖЖ (11)
• Сглаженные закругленные углы без использования изображений (2)
• С ног на голову IMG (2)

UPDATE: http://dsda.ru/443/moshhnyj-pngfix/ тут клон pngfix`а но по качествам лучше. Так что качаем этот

• Мощный PNGfix (4)
• tips (0)
• Sitemap WordPress Plugin (12)
• Link Preview V2 (2)
• hover любых элементов (5)

Вот что выяснилось. Во-первых есть небольшая куча библиотек на JS которые только и занимаются скруглением. Но исользовать здоровые и непонятно как написанные библиотеки нехотелось.  Хотя нашел микрофреймворк который справляется с этой задачей на 5+. Nifty Corners 

Теперь о способе который выбрал я для своих нужд (но в последствии я его отбросил ввиду гемморойности внедрения). Он довольно простой и не отнимает много времени у браузера. Прошу считать это лишь как тренировка CSS навыков.

Это у нас стили.
block {width: 500px;margin: 30px auto 15px;}
.v1, .v2, .v3, .v4, .v5 {
 height: 1px;
 font-size: 1px;
 display: block;
 overflow: hidden;
 border: 1px solid #B8C3C8;
 border-width: 0 1px;}
.v1 {margin: 0 5px; background: #B8C3C8;}
.v2 {margin: 0 3px; border-width: 0 2px;}
.v3 {margin: 0 2px;}
.v4 {margin: 0 1px;}
.v5 {margin: 0 1px;}


Это HTML
<div id="v2">
  <b class="v1"></b><b class="v2"></b><b class="v3"></b><b class="v4"></b><b class="v5"></b>
  <div class="text">
<h1>2. Простое закругление углов с помощью CSS</h1>
Здесь каждый угол состоит из пяти расположенных специальным образом пикселей.
</div>
<b class="v5"></b><b class="v4"></b><b class="v3"></b><b class="v2"></b><b class="v1"></b>
</div>
Вот вроде и все. Кстати это пример с сайта Свобода слова вебмастерского

Так-же советую псмотреть этот пример. Там достаточно хорошо все оптимизированно и есть градиенты (заливки) со скругленными углами. Тут.

UPDATE: -moz-border-radius и -webkit-border-radius это специфические свойтва браузера, которые эмулируют свойтво border-radius в CSS3. В Google Chrome, FF3 и Safari 3.1 уже работает border-radius. Полный список:
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

а для закругления отдельных углов подойдет следующее


-khtml-border-radius-bottomleft: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;


• Это стоит всего 200$, торопитесь! (2)
• Убрать рекламу в ЖЖ (11)
• Мощный PNGfix (4)
• Иконки (0)
• Голый день (0)