Браузеры поддерживающие CSS3 opacity

Понимают CSS3 свойство opacity следующие браузеры: Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9.
Для установки прозрачности через скрипт используем: object.style.opacity

Mozilla 1.6 и ниже, Firefox 0.8

Старые Mozilla и Firefox 0.8 используют своё название данного свойства: -moz-opacity
Для установки прозрачности через скрипт используем: object.style.MozOpacity

Safari 1.1, Konqueror 3.1

Данные товарищи, построенные на движке KHTML, используют для управления прозрачностью свойство: -khtml-opacity
Для установки прозрачности через скрипт используем: object.style.KhtmlOpacity
Однако, имейте ввиду, что данное свойство доступно лишь в данных версиях этих браузеров. Safari с версии 1.2 использует CSS3 opacity, но при этом Konqueror старше версии 3.1, перестав поддерживать -khtml-opacity, не ввел поддержку CSS3 opacity.
В январе 2003 года корпорация Apple представила новый браузер для Mac OS X, основанный на движке KHTML, Safari. Благодаря лицензии, на условиях которой распространяется KHTML, все изменения, вносимые в него разработчиками Apple, публикуются в виде патчей, которые, после пересмотра, добавляются в основную ветку KHTML.
Причиной по которой Konqueror утратил возможность реализации эффекта прозрачности как раз и заключается во внесение в ядро KHTML патчей от Safari, т.к. Safari использует возможности присутствующие в Mac OS X, но которых нет в KDE.
Конечно рано или поздно эта ситуация будет исправлена, но на данный момент в последней версии 3.5 ситуация остается прежней.

Internet Explorer 5.5+

Данный браузер, начиная с версии 5.5 и включая последнюю на сегодняшний день версию Internet Explorer 7, реализует прозрачность через Alpha DirectX фильтр. Стоит отметить, что данный фильтр использует значение прозрачности в диапазоне от 0 до 100 (а не от 0.0 до 1.0). Так же отмечу, что фильтр можно применять лишь к элементу с установленным свойством height, или width, или position со значением absolute, или writingMode со значением tb-rl, или с contentEditable установленным в true.

Пример (устанавливаем прозрачность на половину):

1
2

.img1 { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); }/* синтаксис IE5.5+ (является предпочтительным) */
.img2 { filter: alpha(opacity=50); } /* синтаксис IE4 */[/code]

Для установки прозрачности через скрипт используем: object.style.filter = «progid:DXImageTransform.Microsoft.Alpha(строка параметров)». Для получения прозрачности аналогичной прозрачности W3C используем в качестве строки параметров значение «opacity=число от 0 до 100″. Описание всех параметров смотрите на странице описания фильтра.
Так же очень важно знать следующее: с выходом Windows XP появилось сглаживание экранных шрифтов методом ClearType, а вместе с ним и побочные эффекты в IE при использовании этого метода сглаживания; в нашем случае, если применяется прозрачность к элементу с текстом при включенном методе сглаживания ClearType, то текст перестает нормально отображаться (полужирный текст — bold, например, двоится, могут так же появляться различные артефакты, например в виде чёрточек). Для того чтобы исправить положение, для IE нужно задать фоновый цвет, CSS свойство background-color, элементу к которому применяется прозрачность. К счастью в IE7 баг устранен.

1
2
3
4
5
6

.img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

«Шрифтовой дизайн — это искусство избранных, и очень мало тех, кто овладел им в совершенстве; но программа редактирования шрифтов позволяет любому в один миг изменить ширину и форму букв, которым художник, посвятил десятилетия исследований, годы вдохновения и все свое редкое мастерство.»

Сам CSS не позволяет изменять ширины букв, но свойство letter-spacing позволяет изменять расстояние между буквами и неразумное использование может быть критичным:

h2.squish {letter-spacing: -0.1em }


Получаем:

Letterfit is important

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

С межсимвольным интервалом стоит особенно аккуратно работать, поскольку интернет-типографика несет за собой массу непредсказуемых особенностей настроек пользователей. Но существуют гарнитуры к которым применима разрядка, например, Univers bold и, упомянутые Брингхарстом, Impact и Haettenschweiler. Свойство в css для межсимвольной разрядки — letter-spacing.


h2 {
font-family: "univers bold condensed",
impact, haettenschweiler, sans-serif;
font-size: 200%;
letter-spacing:0.1em; }

Получаем следущее:

Обратите внимание, что letter-spacing указан в em для сохранения пропорций.

«В некоторых текстах очень часто встречаются акронимы, например CIA (ЦРУ) и PLO (ООП), или такие аббревиатуры, как AD (н.э.) или BC (до н.э.). Нормальное значение разрядки в таких комбинациях капительных или прописных букв составляет 5-10% от кегля шрифта.
В цифровых шрифтах очень просто придать дополнительную ширину всем капительным знакам, таким образом разрядка добавляется автоматически. Ширины прописных выведены из расчета того, что они будут использоваться совместно со строчными, но тем не менее величины межбуквенных пробелов для текста, набранного только прописными буквами, могут быть автоматизированы с помощью таблиц кернинга.»

В CSS за разрядку отвечает свойство letter-spacing. Чтобы добавить 10% разрядки к тегу пишем следующее:

ABBR {letter-spacing:0.1em}

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

Вот пример:

$search = '/\b([A-Z][A-Z0-9]{2,})\b/';
$replace = '$1';
$text = preg_replace($search,$replace,$text);


Эта функция ищет последовательности из более чем 3-х прописных символов, например CSS, HTML, W3C и обертывает их в тег .

  en space  

  em space  

  3-per-em space  

  4-per-em space  

  6-per-em space  

  figure space  

  punctuation space  

  thin space  

  hair space  

В CSS за это отвечает свойство white-space:pre.

А здесь я еще дополню часть, но чуток позже :-)

Как я и предпологал, но что-то с визивигом и он не дает мне показать hair space. Сделал скрин у себя после тестов:

«Если текст выключен влево, то межсловные пробел будет фиксированным. Если текст набран с полной выключкой, межсловные пробелы будут различными.
В обоих случаях размер идеального межлосвного пробела варьируется в зависимости от обстоятельств и определяется такими факторами. как величина межбуквенных пробелов. цвет и кегль пробелов.
При большой разрядке или жирном начертании нужен увеличенный межсловный пробел. При более крупном кегле, кода межсловные пробелы уплотняются, расстояние между словами может уменьшаться.
Для нормального текстового шрифта в текстовом кегле типичное значение межсловного пробела составляет четверть круглой, или м/4.»

В css это свойство задается через свойство word-spacing со значением normal. Пробел по-умолчанию равен 0,25 em, хотя более точно значение зависит от информации закодированной в файле шрифта.

Чтобы изменить расстояние между словами соответственно необходимо изменять значение в em. Эта длинна будет добавлена к существующему расстоянию или отрезана – значение установленное по умолчанию не обнуляется.

P { word-spacing:0.25em } H1 { word-spacing:-0.125em }

В примере мы удваиваем этот параметр для абзацев и урезаем в два раза для заголовков первого уровня.

Фактически указывать параметр можно и в пикселях, но только используя em мы можем быть уверенны в сохранении пропорций при пользовательском изменении размера шрифта.

В чем соль em?
Em так называют потомучто это является приблизительным размером заглавной буквы «М» и произносится как emm.

Хотя em значительно больше этой буквы.

Роберт Брингхерст описывает ее следующим образом:
«Em относительная величина. Один em равен размеру шрифта. Для 6-ти пунктового шрифта – это 6, для 12-ти пунктового шрифта – это 12. Таким образом em пропорциональная другим размерам»

Пример:

#box1 {
font-size:12px;
width:1em;
height:1em;
border:1px solid black }

#box2 {
font-size:60px;
width:1em;
height:1em;
border:1px solid black }

Обратите внимание, что обе коробки имеют ширину и высоту 1em. Первая вставка имеет размер 12 пунктов и размер коробки 12 пикселей во второй вставке размер 60 и соответственно размер коробки 60 пикселей.

Шпаргалка по HTML 5 в черном и белом

Скачать темную версию

Можно напечатать теперь в домашних условиях

Скачать светлую версию

1
2
3
4
5

.content-block {
min-height:500px;
height:auto !important;
height:500px;
}

Так же лечится и min-width:

1
2
3
4
5

.content-block {
min-width:500px;
width:auto !important;
width:500px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

/* Обнуляем все под нуль */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 
/* использовать :focus */
:focus {
	outline: 0;
}
 
/* элементы, которым добавляем несколько классов: class="menu_item del" */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* Но все равно у таблиц надо ставить 'cellspacing="0"', без этого никак. */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Обнулятор от Yahoo ©

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 0.11.0
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
q:before,q:after{content:'';}

Спасибо Юревич Сергею за предоставленную инфу

1

img { -ms-interpolation-mode: bicubic; }

Плохое это дело — подгонять таким образом размеры изображения, но лучше знать как фиксить :-)