Как создать стили только для IE

Всем известно что браузеры IE некоректно работают с CSS. Мало того, у них у всех разные ошибки, ошибки которые сть в одной версии, отсутствуют в другой. Для создание стилей IE есть несколько методов: условные комментарии (Conditional Comments) и css хаки. Лично я отдаю предпочтение условным комментария.
Различные таблици стилей, для различных версий […]

Генерирование заголовков для таблицы

Исходный HTML код таблицы:<table summary=”Значение атрибута summary” title=”Значение атрибута title”>
<tr>
<td>Пример </td>
<td>Таблицы</td>
</tr>
</table>
CSS:table[summary]:after {
content: “Таблица ” counter(table) “: ” attr(summary);
counter-increment: table;
display: table-caption;
caption-side: bottom;
font-size: 10px;
font-style: italic;
white-space: nowrap;
margin-top: 5px;
margin-bottom: 20px;
}
table[title]:before {
display: table-caption;
caption-side: top;
content: attr(title);
font-size: 12px;
font-weight: bold;
white-space: nowrap;
}
Правило content: “Таблица ” counter(table) “: ” attr(summary); выводит номер таблицы и содержание атрибута summary. Правило counter-increment: table; инициализирует счётчик, который […]

Генерируем нумерацию заголовков используя CSS

Этот способ работает только в адекватных браузерах, которые понимают как минимум :before и поддерживают генерацию контента средствами CSS
Итак, имеем следующий HTML:<h1>Заголовок</h1>
<h2>Заголовок</h2>
<h2>Заголовок</h2>
<h1>Заголовок</h1>
<h2>Заголовок</h2>
<h2>Заголовок</h2>

Начнем работать над стилями. Первое,что сделаем, объявим счётчики для заголовков:h1 {
counter-increment: h1;
}
h2{
counter-increment: h2
}

Счётчики объявлены, теперь их надо как то выводить на страницу:h1:before {
content: counter(h1) “. ”
}
h2:before {
content: counter(h1) “.” counter(h2) ” “;
}
Для заголовка первого уровня […]

Создание меню с помощью CSS

Создаем меню
исходный HTML:<ul class=”menu”>
<li><a class=”home” href=”#”></a></li>
<li><a class=”blog” href=”#”></a></li>
<li><a class=”autor” href=”#”></a></li>
</ul>
Изображения кнопок в двух состояних:

Для того,чтобы избежать моргания изображений, связаное с загрузкой изображения, обьеденим два состояния кнопки в один файл:

Преврашаем наши ссылки в кнопки:*{
margin:0;
padding:0;
}
.menu{
list-type-style:none;
}
.menu li,.menu a{
width:114px;
height:36px
}
.menu a{
display:block;
background-repeat:no-repeat;
background-position: 0 0;
}
.menu a:hover{
background-position:0 -36px;
}
.menu .home{
background-image:url(http://neveragainblog.com.ua/examples/menu/menu-home.gif);
}
.menu .blog{
background-image:url(http://neveragainblog.com.ua/examples/menu/menu-blog.gif);
}
.menu .autor{
background-image:url(http://neveragainblog.com.ua/examples/menu/menu-avtor.gif);
}
пример

Шпаргалки по CSS

http://www.utoronto.ca/ian/books/extras/css1-sheet-7nov2000.pdf - автор Ian Graham.
свойства и их значения
селекторы
поддержка браузерами (устарело)
http://www.ilovejackdaniels.com/cheat-sheets/css-cheat-sheet/ - Шпаргалки по CSS от ILoveJackDaniels.
свойства
селекторы
блочная модель
синтаксис
еденицы измерения значений
типы носителя
http://www.gosquared.com/dtquidicity/archives/33 - автор dtquidcity.
свойства
селекторы
блочная модель
синтаксис
еденицы измерения значений
типы носителя
http://www.spectrum-research.com/V2/projects_css_reference.asp - автор Spectrum Research.
свойства и их значения
еденицы измерения значений
http://www.veign.com/downloads/guides/qrg0007.pdf - автор Veign.
свойства и их значения
селекторы
еденицы измерения значений
http://home.tampabay.rr.com/bmerkey/cheatsheet.htm - автор Brett Merkey.
свойства
селекторы
блочная модель
синтаксис
каскад
http://www.lazycat.org/webdesign/cssref.php - автор Matt Robinson.
свойства и их […]

Закругленные углы используя CSS

Сейчас чутли не на каждом сайте используются блоки с закруглёнными углами. Я хочу рассмотреть пример создания такого эффекта для блока с заголовком и каким либо текстом.
В данном приёме используется два изображения : round-l.png и round-r.png.
HTML разметка выглядит следующим образом:<div class=”rounded-corners”>
<h3>Заголовок</h3>
<div>
<p>Текст</p>
</div>
</div>
Теперь, самое интересное, начнём работать над CSS. Распишем бекграунды:.rounded-corners{
background:transparent url(ound-l.png) no-repeat left top;
}
.rounded-corners h3{
background:transparent url(round-r.png) no-repeat […]

Подключение таблиц стилей для браузеров IE, Opera, Safari

Иногда бывает необходимо для достижения кроссбраузерности определить разные стили элемента для различных браузеров. Можно пойти в сторону использования css хаков, но я хочу описать альтернативній вариант, как мне кажется более правильный.
Итак, для IE используем всем знакомые сonditional сomments <!–[if IE ]>
<link rel=”stylesheet” type=”text/css” href=”style/ie.css” />
<![endif]–>
Для Opera <script type=”text/javascript”>
<!–
if(window.opera) {document.write(’<link rel=”stylesheet” type=”text/css” href=”style/opera.css” />’);}
//–>
</script>
Для Safari […]

Изменение CSS свойства с помощью JavaScript

Часто бывает необходимо изменить css свойсва элемента динамически, используя javascript. Для этого используеться следующая конструкция:document.getElementById(div_id).style.JS_property_reference = “new_CSS_property_value”;
В таблице приведены CSS Property’s и соответствующие им JavaScript Reference’s.

CSS Property
JavaScript Reference

background
background

background-attachment
backgroundAttachment

background-color
backgroundColor

background-image
backgroundImage

background-position
backgroundPosition

background-repeat
backgroundRepeat

border
border

border-bottom
borderBottom

border-bottom-color
borderBottomColor

border-bottom-style
borderBottomStyle

border-bottom-width
borderBottomWidth

border-color
borderColor

border-left
borderLeft

border-left-color
borderLeftColor

border-left-style
borderLeftStyle

border-left-width
borderLeftWidth

border-right
borderRight

border-right-color
borderRightColor

border-right-style
borderRightStyle

border-right-width
borderRightWidth

border-style
borderStyle

border-top
borderTop

border-top-color
borderTopColor

border-top-style
borderTopStyle

border-top-width
borderTopWidth

border-width
borderWidth

clear
clear

clip
clip

color
color

cursor
cursor

display
display

filter
filter

font
font

font-family
fontFamily

font-size
fontSize

font-variant
fontVariant

font-weight
fontWeight

height
height

left
left

letter-spacing
letterSpacing

line-height
lineHeight

list-style
listStyle

list-style-image
listStyleImage

list-style-position
listStylePosition

list-style-type
listStyleType

margin
margin

margin-bottom
marginBottom

margin-left
marginLeft

margin-right
marginRight

margin-top
marginTop

overflow
overflow

padding
padding

padding-bottom
paddingBottom

padding-left
paddingLeft

padding-right
paddingRight

padding-top
paddingTop

page-break-after
pageBreakAfter

page-break-before
pageBreakBefore

position
position

float
styleFloat

text-align
textAlign

text-decoration
textDecoration

text-decoration: blink
textDecorationBlink

text-decoration: line-through
textDecorationLineThrough

text-decoration: none
textDecorationNone

text-decoration: overline
textDecorationOverline

text-decoration: underline
textDecorationUnderline

text-indent
textIndent

text-transform
textTransform

top
top

vertical-align
verticalAlign

visibility
visibility

width
width

z-index
zIndex

источник

Изменение внешнего вида checkbox & radio button

Бывают случаи когда необходимо изменить внешний вид элементов формы checkbox & radio button. Недавно нашел решение с использованием javascript.
Сначала качаем скрипты, для коректной работы необходимы screensmall.css, mootools.js и moocheck.js. Из файла стилей, при более близком расмотрении, нам необходимо всего несколько строчек:
.checked{background-color:#222;background-image:url(chk_on.png)}
.unchecked{background-color:#1c1c1c;background-image:url(chk_off.png)}
.selected{background-color:#222;background-image:url(rdo_on.png)}
.unselected{background-color:#1c1c1c;background-image:url(rdo_off.png)}
Следущий шаг это изображения, на которые мы собственно и будем заменять checkbox & […]

PNG24 в IE

Использование фильтра AlphaImageLoader

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’, sizingMethod=’scale’)

sizingMethod может принимать несколько значений:

crop - изображение обрезаеться под размеры блока;
image - блок принимает размеры изображения;
scale - изображение маштабируеться под размеры блока.

При использовании этого метода есть определённые особенности:

у элемента должны быть заданы height или width;
это не бекграунд,поэтому таких свойств как background-position, background-repeat, background-attachment просто нет.

При использовании ссылок и данного метода советую […]

keep looking »