CSS browser selector (определитель браузера с помощью CSS) – это маленькая JS-библиотека, которая определит User-Agent браузера для написания специфических классов CSS для того или иного браузера.

Git: git://github.com/rafaelp/css_browser_selector.git
Либо забирать здесь: http://github.com/rafaelp/css_browser_selector/blob/master/css_browser_selector.js

1. Вставить строку в заголовок страницы, внутри тэга HEAD:

2. Установить атрибуты классов для нужных браузеров и ОС, например:

html.gecko div#header { margin: 1em; }
.opera #header { margin: 1.2em; }
.ie .mylink { font-weight: bold; }
.mac.ie .mylink { font-weight: bold; }
.[os].[browser] .mylink { font-weight: bold; } -> без пробелов между .[os] и .[browser]

Коды ОС [os]:
win – Microsoft Windows
linux – Linux (x11 и linux)
mac – Mac OS
freebsd – FreeBSD
ipod – iPod Touch
iphone – iPhone
webtv – WebTV
mobile – J2ME (напр.: Opera mini)

Коды браузеров [browser]:
ie – Internet Explorer (все версии)
ie8 – Internet Explorer 8.x
ie7 – Internet Explorer 7.x
ie6 – Internet Explorer 6.x
ie5 – Internet Explorer 5.x
gecko – Mozilla, Firefox (все версии), Camino
ff2 – Firefox 2
ff3 – Firefox 3
ff3_5 – Firefox 3.5 new
opera – Opera (все версии)
opera8 – Opera 8.x
opera9 – Opera 9.x
opera10 – Opera 10.x
konqueror – Konqueror
webkit или safari – Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
safari3 – Safari 3.x
chrome – Google Chrome
iron – SRWare Iron

Допольнительный код:
js – доступен, когда java-script включен, так что можно скрывать/отображать нужное

Страница библиотеки.
Демо. В примере, использованном в демо, квадрат окрашивается в разный цвет, в зависимости от браузера.

CSS, использованный в примере:

.ie .example {
  background-color: yellow
}
.ie7 .example {
  background-color: orange
}
.gecko .example {
  background-color: gray
}
.win.gecko .example {
  background-color: red
}
.linux.gecko .example {
  background-color: pink
}
.opera .example {
  background-color: green
}
.konqueror .example {
  background-color: blue
}
.webkit .example {
  background-color: black
}
.example {
  width: 100px;
  height: 100px;
}
.no_js { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }

Снова небольшой туториал по jQuery (не надоело еще?) по изменению размеров изображения в зависимости от размеров окна браузера. Правильнее сказать, это не изменение размеров, а подгрузка изображение большего или меньшего размера. Кстати, Last.Fm использует данный прием на страницах артистов.

1. Нужный кусок HTML-кода

  

(Type words here)

Главное, что тут понадобится – это класс .fluidimage

2. Теперь нужный CSS

body { text-align:center; }
img { float: rightright; margin: 0px 10px 10px 10px;}
#content { width:70%; margin: 0px auto; text-align: left; }

Для удобства восприятия опущены всякие графические стили и “украшательства” и приведены только действительно нужные в данном случае.

3. Изменения изображения с помощью jQuery

Этот скрипт содержит функцию, которая меняет изображения в зависимости от размеров окна. Если ширина браузера менее 700пикс., используется уменьшенная картинка, в остальных случаях – полноразмерная. Функция запускается при первой загрузке страницы и в при любом изменении размеров окна браузера.
Можно пойти дальше и ресайзить одну картинку в процентном соотношении от размера окна, но тут есть риск получить некачественное и размытое изображение.

Демо туториала
Скачать скрипт

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

Несложный прием с использованием библиотеки jQuery, с помощью которого можно получить эффект увеличения (zoom) любого элемента на странице.

1. Подгружаем библиотеку.

2. HTML просматриваемой области состоит из 5 элементов.
The Wrap (#wrap) – контейнер.
Small Area (#small) – просматриваемая зона по умолчанию, по которой проводится мышкой для увеличения.
Large (#large) – увеличенная облась.
Overlay (#overlay) – контейнер-”увеличитель”, следующий за движениями мышки.
Mover (#mover) – сворачивание и перекрытие увеличенной зоны.
Не обязательно использовать именно эти ID, можно объявлять и свои.

3. CSS.

#wrap          { width: 600px; position: relative; }
#small         { position: relative; width: 100%; }
#large         { background: white; position: relative; width: 600px; }
#mover         { position: absolute; top: 0; left: 0; width: 104px; height: 104px; overflow: hidden; z-index: 100; background: white; display: none; }
#overlay       { border: 1px solid blue; width: 102px; height: 102px; position: absolute; top: 0; left: 0; z-index: 200; }

4. Параметры

$("#wrap").anythingZoomer({

      expansionSize: 30,      // Как далеко может отходить мышь от краев
      speedMultiplier: 1.4,   // Насколько быстрее внутренняя зона движется быстрее мыши

      smallArea: "#small",    // Перекрытие ID маленькой зоны
      largeArea: "#large",    // Перекрытие ID большой зоны
      zoomPort: "#overlay",   // Перекрытие ID "увеличителя"
      mover: "#mover"         // Перекрытие ID движущихся элементов
});

Варианты демо смотреть здесь

Оригинал статьи

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

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

Берем для примера вот такой код:

The inline styles for this div should make it red.

Его можно перекрыть таким приемом:

div[style] {
background: yellow !important;
}

Не работает в ИЕ6, но оно нам надо?…

Подсмотрено здесь.