css советы

Растягиваем background без использования img в разметке

2010-11-04T00:42:00.002+02:00

в интернете много решений проблемы, когда нам надо растянуть фон на весь экран (именно растянуть а не замостить) и все решения крутятся вокруг картинки которую размещают абсолютом под контентом и растягивают задавая ей размеры яваскриптом или просто размеры наследуются от боди (width:100%; height:100%;). Но вот недавно мне понадобилось сделать кнопки у которых фон в виде градиента идущего наискосок.
Первая мысль была просто сделать большую картинку и позиционировать её по центру. Кнопки всё равно небольшие, и мало кто-бы заметил.
Вторая мысль — через canvas/vml но как-то было лень.
Третья мысль — яваскриптом добавлять картинку - тоже лень.
Четвертая бредовая — есть в MSIE фильтр AlphaImageLoader и у него есть свойство sizingMethod, и если присвоить ему "scale" будет растягивать картинку... стоп для MSIE у нас уже есть готовое решение... дело за малым, придумать что-то для остальных браузеров, есть надежда на CSS3. И не зря
Нам поможет background-size. background-size — масштабирует бекграунд согласно заданным размерам.
Можно указывать ширину и высоту в еденицах или процентах.
auto по умолчанию и ничего не делает, если указан и у ширины и у высоты,
если указан размер одной стороны а у второй auto то картинка маcштабируется пропорционально.
cover — масштабирует бекграунд с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. (не работает в Webkit и в Opera )
contain — масштабирует бекграунд с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока. (неработает в Webkit и в Opera )
Более подробно можно прочитать MDC, там же можно глянуть и примеры.
Мой рабочий пример где можно проверить работу в MSIE и других.
код примера:

<style type="text/css">
    html, body { height:100%; width:100%; margin:0; padding:0; }
    body {
        background-image:url(images/bg.jpg);
        -moz-background-size:100% 100%;
        -webkit-background-size:100% 100%;
        -o-background-size:100% 100%;
        -khtml-background-size:100% 100%;
        background-size:100% 100%;
    }
    .text { 
        width:50%; 
        padding:30px; 
        text-align:center; 
        font: 18px Lucida Sans Unicode, Lucida Grande, sans-serif; 
        color:383838;
    }
    img { 
        padding:10px;
        background:#707070;
    }
</style>
<!--[if lte IE 8]>
    <style type="text/css">
        body {
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='/examples/images/bg.jpg', sizingMethod='scale');
    background-image:none;
        }
    </style>
<![endif]-->

Часто используемые expression для MSIE6

2009-08-06T08:31:00.005+03:00

MSIE6 скоро стукнет, наверное, 10лет, а заказчики всё ещё на него ровняются. Я не буду говорить что я ненавижу ie6, потому что на самом деле это не так. Для меня верстка и JS программинг под MSIE6, всегда вызывала интерес. Ведь на самом деле то что легко реализовывать под остальные браузеры, с такой же легкостью можно сделать и под IE6. Всё благодаря технологиям которые в нём используются. Несколько из технологий, которые часто приходится использовать — expression и filter: AlphaImageLoader. Конечно при отключённых скриптах ничего из этого работать не будет, так как expression — это тот же javascript но записанный в css а AlphaImageLoader использует DirectX. Но если пользователь отключает скрипты в MSIE6 то это его проблемы, в эпоху WEB2.0 отключать скрипты — себя не уважать (правда про использование MSIE6 можно сказать то же самое :) ) И так часто используемые мной expression

@charset "utf-8";

/* 
 * боремся с кешированием картинок, потому что MSIE постоянно перегружает их, 
 * каждый раз когда сними что-то происходит - 
 * навели курсор, поменяли размер, поменяли координаты 
 */
body{filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/********** MIN-WIDTH && MAX-WIDTH *********/

/* 
 * compatMode нужен чтобы избежать вылета MSIE6 
 * если у эелемента есть padding и в других не документированных случаях
 */
* html #page{
    width: expression((document.compatMode && document.compatMode == 'CSS1Compat') ?
            (document.documentElement.clientWidth < 999 ? "968px" :
            (document.documentElement.clientWidth > 1400 ? "1400px" : "auto") ) :
            (document.body.clientWidth < 999 ? "968px" :
            (document.body.clientWidth > 1400 ? "1400px" : "auto")));
}


/********** :first-child && :last-child ********/

ul li{margin-left: expression((this == parentNode.firstChild) ? 
        runtimeStyle.marginLeft = "0px" : runtimeStyle.marginLeft = "11px"  )}
ul li{margin-left: expression((this == parentNode.lastChild) ? 
        runtimeStyle.marginLeft = "0px" : runtimeStyle.marginLeft = "11px"  )}


/****** PNG ********/

/* 
 * проставим элементам у которых в бекгроунде png картинка класс png 
 */
* html *{
    filter:expression((/\.png/.test(this.currentStyle.backgroundImage.toString())) ?
        (this.className +=' png', runtimeStyle.filter='none') :
        runtimeStyle.filter='none');
}

/* 
 * теперь всем png-картинкам и всем элементам с классом .png применим фильтр 
 */
* html img, * html .png{
    position:relative;
    behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:
        (this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?
        (this.runtimeStyle.backgroundImage = "none",this.runtimeStyle.filter = 
        "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
        this.src = "blank.gif"):(this.origBg = this.origBg ? this.origBg : 
        this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
        this.runtimeStyle.filter = 
        "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
        this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
    );
}

Проблемы с абсолютным позиционированием в MSIE6

2009-07-02T11:39:00.004+03:00

На практике приходится постоянно сталкиваться с двумя багами абсолютного позиционирования в IE6. Обе проблемы вызваны свойством position:relative у родительского блока (когда мы хотим абсолютно позиционировать блок относительно этого родителя а не документа).

Проблема номер один — когда рядом с родительским блоком находится какой то блок с position:relative и как не выставляй z-index абсолютно позиционированному блоку, он никак не отобразится по верх него. проблема решается установкой z-index родителю (если соседний с родителем блок имеет такие же стили, то z-index у них должен отличатся), ну и стараться использовать position:relative только когда оно действительно нужно. Проблема состоит в том что ИЕ сравнивает не только z-index блоков, но и z-index их родителей и их последовательность. И родительский считается им важнее. То есть если есть два блока с position reletive и z-index 10, и у одного из них есть вложенный блок c position absolute и z-index 20, то отображаться поверх другого блока он будет только в том случае если родительский блок находится в коде позже. Если же на оборот то поверх абсолютно позиционированного блока будет отображаться блок который идёт позже, хоть у него и такой же z-index как у родителя.
Я всегда стараюсь обходит стороной, если надо выводить кучу элементов у которой при каком-то событии должен появляться абсолютно позиционированный относительно елемента блок, то родителю назначаю position:relative тоже по событию.Как я уже говорил "ну и стараться использовать position:relative только когда оно действительно нужно", а то я иногда встречал записи такого вида *{position:relative}

Вторая проблема, это когда у родительского блока стоит обтекание (float:left; или float: right), тогда с абсолютно позиционированным блоком происходит не понятная вещь - или он вообще пропадает из виду (наверное его выкидывает за пределы окна) или он позиционируется относительно всего документа. С этим багом я боролся разными методами (куча игр с hasLayout) но решение найденyое методом тыка clear:both меня очень удивило. Но самое главное &mdash это работает.

Удачи в борьбе с MSIE

Учим IE нормальному CSS

2008-10-27T21:17:00.003+02:00

Наверное немногие знают о таких селекторах как например button[type=submit], кто знает, тот всё равно не использует, так как IE всё равно игнорирует (и приходится создавать класс для кнопки, например .btn). position:fixed... могу поспорить многие скривились, вспоминая екпрешн для IE6. Прозрачные .png, двойной margin у плавающих (float) контейнеров, двойные классы (.class1.class2)... перечислять баги и то что не умеет IE можно долго. И всё уже давно с этим смирились... Но давайте дадим нормальному CSS второй шанс. Есть замечательный скрипт, который поможет одним махом научить IE css, и пофиксить известные баги. Встречайте Лекарство для MSIE.
Вот небольшой список того что он умеет делать:

parent > child

adjacent + sibling

.multiple.classes

:hover (да да, теперь hover можно присваивать любым элементам)

:first-child

Думаете это всё? нет мне просто лень всё перечислять. Полный список вы можете посмотреть сами

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


<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

Интерактивная карта Javascript/CSS

2008-09-13T18:34:00.012+03:00

Сразу хочу оговориться, я не претендую на звание знатока Javascript, по этому приведенный код будет возможно немного коряв, но своё предназначение он будет выполнять, плюс я хотел отказаться от использования не корректного атрибута OnMouseOn (не корректного для W3C валидатора конечно).

И так, исходное задание — сделать карту Киева с подсветкой районов при наведении курсора.
Карта у нас будет такого вида (подсвечен Дарницкий район):

Как же сделать подсветку районов не используя флеш или SVG. Первое что мне пришло в голову, просто подогнать div-ы друг на друга,и чтобы у каждого div был свой район в бекграунде. На решение похоже, но районы то не квадратные, и получилось бы накладывание углов друг а друга,из-за чего район бы подсвечивался когда курсор был бы на другом районе — вообщем не красиво. И тогда мне пришла в голову идея, на сколько я думал, которая решит проблему. Есть такая технология, которой раньше частенько любили пользоваться — imagemap (карта ссылок). Если кто не помнит, благодаря карте ссылок, мы могли выделить на картинке область (круг или квадрат) которые будут ссылкой. Первый вопрос который пришёл мне в голову — можно ли делать области, которые будут ссылками, полигонами и есть ли программа, которая поможет мне автоматизировать процесс. Долго искать не пришлось, Adobe Fireworks просто чудесно справляется с такой задачей. И так, я взял свою картинку и спомощью инструмента Polygon Hotspot tool обвёл районы на карте, а потом экспортировал всё это в HTML. Получилась карта, где каждый район является ссылкой.

Исходный код:


<img name="map_kiev" src="images/map_kiev.gif" width="380" height="282" border="0" id="map_kiev" usemap="#m_map_kiev" alt="" />

 <map name="m_map_kiev" id="m_map_kiev">
  <area shape="poly" coords="134,98,127,116,130,137,149,139,159,130,151,118,134,98" href="#" alt="10" />
  <area shape="poly" coords="231,93,212,110,160,130,150,116,134,98,139,80,138,77,167,77,167,88,177,101,178,108,191,109,194,107,193,103,191,100,190,96,231,79,228,85,231,93" href="#" alt="01" />
  <area shape="poly" coords="163,187,175,186,170,179,181,177,183,181,196,182,201,187,208,187,213,185,213,175,216,172,217,166,235,174,243,172,244,157,249,155,259,159,265,147,255,142,255,132,244,123,244,118,233,110,233,96,231,93,213,110,161,131,156,134,158,176,163,187" href="#" alt="02" />
  <area shape="poly" coords="136,59,137,77,155,76,168,77,167,88,171,93,175,95,177,98,178,102,179,106,179,108,185,108,189,110,192,108,193,107,193,104,191,101,190,97,190,95,231,79,235,76,240,75,237,67,267,58,261,32,252,26,245,26,241,21,236,20,228,17,221,17,220,23,217,25,217,39,213,40,208,34,200,40,196,40,192,53,168,56,149,50,145,53,149,64,144,63,136,59" href="#" alt="03" />
  <area shape="poly" coords="138,84,132,102,124,101,123,97,118,96,117,92,108,86,106,86,106,87,104,88,103,86,100,85,100,83,89,82,88,88,81,89,60,73,59,62,75,56,86,55,97,55,96,59,97,61,97,70,103,80,105,81,110,81,118,89,120,85,125,85,131,85,138,84" href="#" alt="04" />
  <area shape="poly" coords="73,83,80,89,88,89,90,83,98,83,100,86,103,86,104,88,106,88,107,87,109,87,111,88,113,91,116,92,117,96,122,96,123,98,123,100,126,102,130,102,131,103,127,116,121,114,117,116,112,111,110,110,105,110,105,107,96,105,85,102,74,101,73,83" href="#" alt="05" />
  <area shape="poly" coords="33,42,30,35,37,35,42,40,47,33,48,32,39,25,42,22,62,21,65,24,65,13,105,16,106,20,118,27,118,38,132,48,136,56,138,83,129,85,121,84,119,85,119,89,111,81,105,80,98,73,97,66,96,58,98,54,75,55,58,62,33,42" href="#" alt="Оболонский район" />
  <area shape="poly" coords="81,145,86,136,74,114,73,112,81,103,73,102,73,83,59,74,58,62,33,42,32,49,28,50,27,56,22,55,12,66,16,71,14,79,9,82,6,88,9,92,2,105,5,114,1,119,3,127,10,122,14,125,19,119,20,113,31,114,43,115,54,113,58,125,73,143,81,145" href="#" alt="07" />
  <area shape="poly" coords="86,153,81,146,87,136,74,116,73,111,81,102,103,107,105,110,110,111,121,120,124,126,125,129,122,128,120,130,122,134,117,136,115,141,111,145,108,144,108,147,102,149,93,155,86,153" href="#" alt="08" />
  <area shape="poly" coords="154,281,179,273,178,266,180,266,172,245,169,244,167,233,180,233,181,221,157,176,156,134,148,140,130,138,126,116,120,114,117,116,123,121,125,129,122,128,118,131,122,135,117,136,114,141,111,145,108,144,108,148,102,149,100,153,97,153,93,155,86,153,90,157,85,163,88,169,87,176,95,179,99,175,102,174,107,179,104,181,104,193,112,193,114,194,111,198,117,203,121,201,129,206,129,224,136,228,135,235,138,242,137,247,146,248,154,260,154,281" href="#" alt="09" />
 </map>

Дальше я планировал, сделать подсветку путем присваивания стиля элементу area. Но потом вышла загвоздка... какой же стиль ему можно присвоить?
И тогда я решил пойти другим путём. Допустим есть картинка с картой ссылок, а что если менять картинку в зависимости от того на какой area наведён курсор. Я начал развивать эту идею.
И того пришёл к такому варианту:для основы карты ссылок используем прозрачный гиф, его размещаем в блоке у которого бекграундом установлена наша картинка с картой. При наведении на элемент карты меняем класс у блока и изменяем картинку. Для того чтобы не возникало дозагрузок картинок с подсвеченными районами (размер то у них не маленький), решил использовать одну картинку с картами где подсвечен каждый район, и в зависимости от класса у блока менять позиционирование бекграунда. Получилась вот такая картинка (посмотреть пример).
Осталось присвоить каждому area свой id района написать css и javascript .
CSS код:


#kiev{
    width:380px;
    background:url(images/map_kiev.gif) no-repeat;
}
.mapa{
   /* исходное положение */
    background-position: 0 0 !important;
}
.obolon{
    background-position: 0 -846px !important;
}
.troes4ina{
    background-position: -840px 0 !important;
}
.goloseev{
    background-position: -420px 0 !important;
}
.darnica{
    background-position: -420px -846px !important;
}
.solomenskiy{
    background-position: -840px -282px !important;
}
.pe4ersk{
    background-position: -420px -282px !important;
}
.dnipro{
    background-position: 0 -282px !important;
}
.shev4enko{
    background-position: 0 -564px !important;
}
.podol{
    background-position: -420px -564px !important;
}
.svetoshin{
    background-position: -840px -564px !important;
}

Яваскрипт :

//Функция которая меняет класс у блока с id=kiev
function setclass(a)
{
 document.getElementById('kiev').className = a;
}
//При загрузке ищем элементы с ID районов, и при наведении вызываем функцию изменения класса 
window.onload = function ()
{
 document.getElementById('obolon').onmouseover = function(){setclass('obolon');}
 document.getElementById('obolon').onmouseout = function(){setclass('mapa');}
 document.getElementById('troes4ina').onmouseover = function(){setclass('troes4ina');}
 document.getElementById('troes4ina').onmouseout = function(){setclass('mapa');}
 document.getElementById('goloseev').onmouseover = function(){setclass('goloseev');}
 document.getElementById('goloseev').onmouseout = function(){setclass('mapa');}
 document.getElementById('darnica').onmouseover = function(){setclass('darnica');}
 document.getElementById('darnica').onmouseout = function(){setclass('mapa');}
 document.getElementById('solomenskiy').onmouseover = function(){setclass('solomenskiy');}
 document.getElementById('solomenskiy').onmouseout = function(){setclass('mapa');}
 document.getElementById('pe4ersk').onmouseover = function(){setclass('pe4ersk');}
 document.getElementById('pe4ersk').onmouseout = function(){setclass('mapa');}
 document.getElementById('dnipro').onmouseover = function(){setclass('dnipro');}
 document.getElementById('dnipro').onmouseout = function(){setclass('mapa');}
 document.getElementById('shev4enko').onmouseover = function(){setclass('shev4enko');}
 document.getElementById('shev4enko').onmouseout = function(){setclass('mapa');}
 document.getElementById('podol').onmouseover = function(){setclass('podol');}
 document.getElementById('podol').onmouseout = function(){setclass('mapa');}
 document.getElementById('svetoshin').onmouseover = function(){setclass('svetoshin');}
 document.getElementById('svetoshin').onmouseout = function(){setclass('mapa');}
}
// за javascript особо не пинайте, я в нём полный 0

сдесь фрейм, если вы видите эту запись, то вы не видите пример.

Посмотреть как это всё чудесно работает можно сдесь. Карта с подсветкой районов при наведении курсора. Скачать исходники можно сдесь

inline-block и firefox

2008-08-13T23:18:00.007+03:00

Я помню, когда первый раз меня расстроил Firefox. Тогда верстка для меня была как хобби, даже, точнее, развлечение. Расстроило меня отсутствие поддержки такого замечательного свойства как display:inline-block;. Кстати, если я не ошибаюсь, то ещё нет браузера который полностью бы поддерживал все свойства display. Хотя последняя Opera к этому очень стремится, работают почти все свойства кроме compact (есть баги) на втором месте сидят FF3 и Safari - они ещё не могут отображать нормально run-in. По факту "очень частого" использования этих замечательных свойств, можно считать что сафари, опера и лиса с display справляются нормально.
Но вернемся к нашему Firefox версии 2, который не знал про существование inline-block и inline-table. Тогда я особенно не стал разбираться и просто забил на это свойство. Сейчас мне захотелось разобраться. Firefox3 не плохо справляется со стандартами, но ещё очень много народу пользуются старой версией. Поэтому обратившись к Гуглю, почти сразу получаем решение — display:-moz-inline-box;. Валидацию конечно такое не пройдёт, но я думаю это не главное,а главное помнить — если присваиваешь элементу display:inline-block; вспомни про людей, у которых может оказаться старый фаерфокс.

EMastic CSS Framework

2008-07-24T23:10:00.006+03:00

Недавно нашел на Google Code интересный проект — EMastic
Фреймворк - состоит из четырех файлов css:

reset.css — как вы поняли это тот же сброс стилей Эрика Мэера

grid.css — сетка, размеры, отступы и обтекания для дивов

type.css — типография

ie.css — хаки для ИЕ

Посмотрел я на это всё дело, и понял... автор только зря время потратил, в реальной жизни этот фреймворк я бы врядли стал применять.
Сброс стилей по Эрику Мэйеру — непонятная трата кода и трафика пользователя. Мне всегда хватало конструкции *{margin:0;padding:0;}.
grid.css бестолковая фигня, сам автор заявляет, что у него плохо с совместимостью с разными браузерами.Я заметил что такое свойство как overflow:hidden; ему, вроде как, не известно — clear:both не панацея, а свойство inline-block не поддерживается Firefox 2ой версии(3ий FF поддерживает, но мне кажется ещё рановато отказываться от двойки).
Очень всеми любимая единица измерения EM, сдесь тоже не к месту — очень сложно (имхо) переводить в пиксели, когда высота шрифта для body — 75%. Ведь гораздо было бы удобнее, если бы было так:


body{
    font-size:62.5%;
    }

Тогда было бы всё просто — 1em = 10px, а что получилось у автора, мне считать лень.
Стили которые отвечают за типографику (type.css) вообще никому не нужны, под каждый проект надо писать свой. Про ie.css мне вообще нечего сказать — там всего 2 строки.
Одним словом, если внести свои корективы, то будет очень даже ничего.А пока этот фреймворк недостоин внимания.

Вложеные float элементы

2008-07-16T22:45:00.029+03:00

Очень часто, у тех, кто раньше верстал таблицами и стал переходить на блоки (я больше люблю называть слоями) появлялась такая проблема, когда элемент содержащий float-элементы схлопывается. Например нам надо организовать горизонтальное меню центрированное по центру ввиде списка.
У меню есть фон (background-color) и поля (padding), у элементов списка есть свой фон и отступы (margin). Давайте посмотрим вертикальное меню:

исходный код:

<style type="text/css">
div.preview{
    background:#fff;
    border:1px #000  solid;
    width:600px
 }
ul.menu{
    list-style-type:none;
    background:#f00;
    padding:10px 5px;
    border:1px #000 dotted;
    width:400px;
    margin:10px auto;
}
ul.menu li{
    margin:0 5px;
}
ul.menu li a{
    display:block;
    background:#000;
    padding:2px;
 }
</style>
<div class="preview01">
 <ul class="menu02">
  <li><a href="http://ya.ru">Главная</a></li>
  <li><a href="http://google.com">Контакты</a></li>
  <li><a href="http://www.blogger.com/">Карта сайта</a></li>
 </ul>
</div>

Для того, чтобы пункты, выстроились горизонтально, нам надо поставить ul.menu02 li{float:left;} смотри, что получилось:

Наш блок, содержащий плавающие пункт списка, схлопнулся, как будь-то пустой, и не содержит элементов. Это происходит из-за того, что блочный элемент теряет layout, говоря по русски пропадает слой(некоторые элементы не имеют layout от "рождения").

Layout можно вернуть несколькими способами:

Задать высоту — атрибут height. (не подходит, ведь высота иногда может быть не постоянна)
Задать выравнивание — атрибут float. (в нашем примере пропадет отцентровка)
Задать обрезание содержимого при переполнении &madsh; overflow:hidden. (вот это уже можно попробывать)
исходный код:
```
<style type="text/css">
div.preview{
    background:#fff;
    border:1px #000  solid;
    width:600px
 }
ul.menu{
    list-style-type:none;
    background:#f00;
    padding:10px 5px;
    border:1px #000 dotted;
    width:400px;
    margin:10px auto;
    overflow:hidden;
}
ul.menu li{
    margin:0 5px;
}
ul.menu li a{
    display:block;
    background:#000;
    padding:2px;
 }
</style>
<div class="preview01">
 <ul class="menu02">
  <li><a href="http://ya.ru">Главная</a></li>
  <li><a href="http://google.com">Контакты</a></li>
  <li><a href="http://www.blogger.com/">Карта сайта</a></li>
 </ul>
</div>
```
В IE6 как всегда не работает, но вспоминая его поведение при обработке блока с заданой высотой, можно использовать хак:
```
* html ul.menu{
    height:1%;
}
```

Используя хак для ИЕ из предыдущего пункта, можно написать еще такое:

ul.menu{
    height:auto;
    min-height:2px;
    _height:2px; /*хак для ИЕ, минус — несоответствует стандартам, лучше как вредыдущем пункте, записать отдельно */
}

Это не единственные методы, наверное есть ещё. Эксперементируйте, и выбирайте свой любимый метод задания layout.

CSS по умолчанию для Firefox3

2008-07-07T00:03:00.007+03:00

Если вдруг кому-то интересно какие стили по умолчанию используютья в том или ином элементе в Firefox 3

/* ***** BEGIN LICENSE BLOCK *****
* Version: MPL 1.1/GPL 2.0/LGPL 2.1
*
* The contents of this file are subject to the Mozilla Public License Version
* 1.1 (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
* http://www.mozilla.org/MPL/
*
* Software distributed under the License is distributed on an "AS IS" basis,
* WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
* for the specific language governing rights and limitations under the
* License.
*
* The Original Code is mozilla.org code.
*
* The Initial Developer of the Original Code is
* Netscape Communications Corporation.
* Portions created by the Initial Developer are Copyright (C) 1998
* the Initial Developer. All Rights Reserved.
*
* Contributor(s):
*   Blake Ross <blaker1234@aol.com>
*
* Alternatively, the contents of this file may be used under the terms of
* either of the GNU General Public License Version 2 or later (the "GPL"),
* or the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
* in which case the provisions of the GPL or the LGPL are applicable instead
* of those above. If you wish to allow use of your version of this file only
* under the terms of either the GPL or the LGPL, and not to allow others to
* use your version of this file under the terms of the MPL, indicate your
* decision by deleting the provisions above and replace them with the notice
* and other provisions required by the GPL or the LGPL. If you do not delete
* the provisions above, a recipient may use your version of this file under
* the terms of any one of the MPL, the GPL or the LGPL.
*
* ***** END LICENSE BLOCK ***** */

@namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML */

/* bidi */

[dir="rtl"] {
direction: rtl;
unicode-bidi: embed;
}
[dir="ltr"] {
direction: ltr;
unicode-bidi: embed;
}
bdo[dir] {
unicode-bidi: bidi-override;
}

/* blocks */

html, div, map, dt, isindex, form {
display: block;
}

body {
display: block;
margin: 8px;
}

p, dl, multicol {
display: block;
margin: 1em 0;
}

dd {
display: block;
-moz-margin-start: 40px;
}

blockquote {
display: block;
margin: 1em 40px;
}

address {
display: block;
font-style: italic;
}

center {
display: block;
text-align: -moz-center;
}

blockquote[type=cite] {
display: block;
margin: 1em 0px;
-moz-padding-start: 1em;
-moz-border-start: solid;
border-color: blue;
border-width: thin;
}

span[_moz_quote=true] {
color: blue;
}

pre[_moz_quote=true] {
color: blue;
}

h1 {
display: block;
font-size: 2em;
font-weight: bold;
margin: .67em 0;
}

h2 {
display: block;
font-size: 1.5em;
font-weight: bold;
margin: .83em 0;
}

h3 {
display: block;
font-size: 1.17em;
font-weight: bold;
margin: 1em 0;
}

h4 {
display: block;
font-weight: bold;
margin: 1.33em 0;
}

h5 {
display: block;
font-size: 0.83em;
font-weight: bold;
margin: 1.67em 0;
}

h6 {
display: block;
font-size: 0.67em;
font-weight: bold;
margin: 2.33em 0;
}

listing {
display: block;
font-family: -moz-fixed;
font-size: medium;
white-space: pre;
margin: 1em 0;
}

xmp, pre, plaintext {
display: block;
font-family: -moz-fixed;
white-space: pre;
margin: 1em 0;
}

/* tables */

table {
display: table;
border-spacing: 2px;
border-collapse: separate;
margin-top: 0;
margin-bottom: 0;
/* XXXldb do we want this if we're border-collapse:collapse ? */
-moz-box-sizing: border-box;
text-indent: 0;
}

table[align="left"] {
float: left;
}

table[align="right"] {
float: right;
text-align: start;
}

table[rules]:not([rules="none"]) {
border-collapse: collapse;
}

/* caption inherits from table not table-outer */
caption {
display: table-caption;
text-align: center;
-moz-box-sizing: border-box;
}

table[align="center"] > caption {
margin-left: auto;
margin-right: auto;
}

table[align="center"] > caption[align="left"] {
margin-right: 0;
}

table[align="center"] > caption[align="right"] {
margin-left: 0;
}

tr {
display: table-row;
vertical-align: inherit;
}

col {
display: table-column;
}

colgroup {
display: table-column-group;
}

tbody {
display: table-row-group;
vertical-align: middle;
}

thead {
display: table-header-group;
vertical-align: middle;
}

tfoot {
display: table-footer-group;
vertical-align: middle;
}

/* for XHTML tables without tbody */
table > tr {
vertical-align: middle;
}

td {
display: table-cell;
vertical-align: inherit;
text-align: inherit;
padding: 1px;
}

th {
display: table-cell;
vertical-align: inherit;
font-weight: bold;
padding: 1px;
}

tr > form:-moz-is-html, tbody > form:-moz-is-html,
thead > form:-moz-is-html, tfoot > form:-moz-is-html,
table > form:-moz-is-html {
/* Important: don't show these forms in HTML */
display: none !important;
}

/* inlines */

q:before {
content: open-quote;
}

q:after {
content: close-quote;
}

b, strong {
font-weight: bolder;
}

i, cite, em, var, dfn {
font-style: italic;
}

tt, code, kbd, samp {
font-family: -moz-fixed;
}

u, ins {
text-decoration: underline;
}

s, strike, del {
text-decoration: line-through;
}

blink {
text-decoration: blink;
}

big {
font-size: larger;
}

small {
font-size: smaller;
}

sub {
vertical-align: sub;
font-size: smaller;
line-height: normal;
}

sup {
vertical-align: super;
font-size: smaller;
line-height: normal;
}

nobr {
white-space: nowrap;
}

/* titles */
abbr[title], acronym[title] {
border-bottom: dotted 1px;
}

/* lists */

ul, menu, dir {
display: block;
list-style-type: disc;
margin: 1em 0;
-moz-padding-start: 40px;
}

ol {
display: block;
list-style-type: decimal;
margin: 1em 0;
-moz-padding-start: 40px;
}

li {
display: list-item;
}

/* nested lists have no top/bottom margins */
ul ul,   ul ol,   ul dir,   ul menu,   ul dl,
ol ul,   ol ol,   ol dir,   ol menu,   ol dl,
dir ul,  dir ol,  dir dir,  dir menu,  dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl,
dl ul,   dl ol,   dl dir,   dl menu,   dl dl {
margin-top: 0;
margin-bottom: 0;
}

/* 2 deep unordered lists use a circle */
ol ul,   ul ul,   menu ul,   dir ul,
ol menu, ul menu, menu menu, dir menu,
ol dir,  ul dir,  menu dir,  dir dir {
list-style-type: circle;
}

/* 3 deep (or more) unordered lists use a square */
ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
menu ol menu, menu ul menu, menu menu menu, menu dir menu,
menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
list-style-type: square;
}


/* leafs */

/* <hr /> noshade and color attributes are handled completely by
* the nsHTMLHRElement attribute mapping code
*/
hr {
display: block;
height: 2px;
border: 1px inset;
margin: 0.5em auto 0.5em auto;
color: gray;
-moz-float-edge: margin-box;
-moz-box-sizing: border-box;
}

hr[size="1"] {
border-style: solid none none none;
}

*|*:-moz-any-link img, img[usemap], object[usemap] {
border: 2px solid;
}

img:-moz-broken::before, input:-moz-broken::before,
img:-moz-user-disabled::before, input:-moz-user-disabled::before,
img:-moz-loading::before, input:-moz-loading::before,
applet:-moz-empty-except-children-with-localname(param):-moz-broken::before,
applet:-moz-empty-except-children-with-localname(param):-moz-user-disabled::before {
content: -moz-alt-content !important;
unicode-bidi: embed;
}

object:-moz-broken > *|*, applet:-moz-broken > *|*
object:-moz-user-disabled > *|*, applet:-moz-user-disabled > *|* {
/*
Inherit in the object's alignment so that if we aren't aligned explicitly
we'll end up in the right place vertically.  See bug 36997.  Note that this
is not !important because we _might_ be aligned explicitly.
*/
vertical-align: inherit;
}

img:-moz-suppressed, input:-moz-suppressed, object:-moz-suppressed,
embed:-moz-suppressed, applet:-moz-suppressed {
/*
Set visibility too in case the page changes display.  Note that we _may_
want to just set visibility and not display, in general, if we find that
display:none breaks too many layouts.  And if we decide we really do want
people to be able to right-click blocked images, etc, we need to set
neither one, and hack the painting code.... :(
*/
display: none !important;
visibility: hidden !important;
}

img[usemap], object[usemap] {
color: blue;
}

frameset {
display: block ! important;
overflow: -moz-hidden-unscrollable;
position: static ! important;
float: none ! important;
border: none ! important;
}

frame {
border: none ! important;
}

iframe {
border: 2px inset;
}

noframes {
display: none;
}

spacer {
position: static ! important;
float: none ! important;
}

canvas {
-moz-user-select: none;
}

/* focusable content: anything w/ tabindex <=0 is focusable */
abbr:focus, acronym:focus, address:focus, applet:focus, b:focus,
base:focus, big:focus, blockquote:focus, br:focus, canvas:focus, caption:focus,
center:focus, cite:focus, code:focus, col:focus, colgroup:focus, dd:focus,
del:focus, dfn:focus, dir:focus, div:focus, dl:focus, dt:focus, em:focus,
fieldset:focus, font:focus, form:focus, h1:focus, h2:focus, h3:focus, h4:focus,
h5:focus, h6:focus, hr:focus, i:focus, img:focus, ins:focus,
kbd:focus, label:focus, legend:focus, li:focus, link:focus, menu:focus,
object:focus, ol:focus, p:focus, pre:focus, q:focus, s:focus, samp:focus,
small:focus, span:focus, strike:focus, strong:focus, sub:focus, sup:focus,
table:focus, tbody:focus, td:focus, tfoot:focus, th:focus, thead:focus,
tr:focus, tt:focus, u:focus, ul:focus, var:focus {
/* Don't specify the outline-color, we should always use initial value. */
outline: 1px dotted;
}

/* hidden elements */
area, base, basefont, head, meta, script, style, title,
noembed, param {
display: none;
}

/* emulation of non-standard HTML <marquee> tag */
marquee {
width: -moz-available;
display: inline-block;
vertical-align: text-bottom;
text-align: start;
-moz-binding: url('chrome://xbl-marquee/content/xbl-marquee.xml#marquee-horizontal');
}

marquee[direction="up"], marquee[direction="down"] {
-moz-binding: url('chrome://xbl-marquee/content/xbl-marquee.xml#marquee-vertical');
height: 200px;
}

/* PRINT ONLY rules follow */
@media print {

marquee { -moz-binding: none; }

/* XXX this should not be necessary, we should be stopping blinking
of any kind in print preview, not just the <blink> element */
blink {
text-decoration: none;
}

}

Для того чтобы просмотреть, надо набрать в адресной строке resource://gre/res/html.css

P.S. если вы до сих пор не обновили FireFox до версии 3. Обновить FireFox с мозиллы или с разу с Яндекс тулбром внутри

Красивая реализация ссылки ввиде картинки и текста

2008-06-25T22:23:00.022+03:00

Ссылка ввиде картинки, как сделать так чтоб при наведении курсора на эту картинку, она исчезала и мы видели обыкновенную ссылку, средствами XHTML/CSS?

Надо использовать метод замещения текста картинкой, где картинка закрывает текст, путем присваивания ей (картинке) абсолютного позиционирования и поднимая её по оси z (position:absolute;z-index:100; ) . Так вот - идея проста. Поднимаем картинку, под ней у нас текст ссылки и при наведении на ссылку мышки (a:hover) картинка исчезает (display:none)

<style type="text/css">
.container a{
    text-align:center;
    display:block;
    position:relative;
    height:80px;
    width:80px;
    padding:10px;
    background:#000;
 }
.container a img{
    position:absolute;
    z-index:10;
    top:10px;
    left:10px;
    border:none;
 }
.container a:hover img{
    display:none;
    _filter:alpha(opacity=100);
 }
</style>

<div class="container"> <a href="http://myopinion.net.ua">
  <img src="images/cat.jpg" alt="" width="80px" height="80px" />
  кошки-мышки:)       
 </a>
</div>

Как выглядит:

кошки-мышки:)

Таблица символов

2008-06-24T18:07:00.001+03:00

Коды символов для html.
Незабывайте, для стрелочек есть свои коды, и не надо нагружать пользователя картинками.(Лично мне приходилось видеть когда создаваличь картинки в место ← и →)
Часто используемые:

		неразрывный пробел
&ensp;		короткий пробел
&emsp;		длинный пробел
		мягкий перенос
—	—	длинное тире
–	–	короткое тире
…	…	многоточие
«	«	левая кавычка елочка
»	»	правая кавычка елочка
©	©	(c)
®	®	(R)
™	™	TM

Математические:

±	±	+-
×	×	умножить
≠	≠	не равно
<	<	<
>	>	>
≤	≤	<=
≥	≥	>=
√	√	квадратный корень
²	²	квадрат, вторая степень
³	³	куб, третья степень
¼	¼	1/4
½	½	1/2
¾	¾	3/4
∞	∞	бесконечность

Стрелки:

←	←	стрелка влево
↑	↑	стрелка вверх
→	→	стрелка вправо
↓	↓	стрелка вниз
↔	↔	стрелка влево и вправо
&crarr;	↵	стрелка вниз, потом влево, как Enter
⇐	⇐	стрелка двойная влево
&uArr;	⇑	стрелка двойная вверх
⇒	⇒	стрелка двойная вправо

Прочие:

&	&	амперсанд
€	€	евро
′	′	'
″	″	''
·	·	точка на середине высоты строки
&oline;	‾	Надчерк
°	°	градус

Список, разделенный линиями

2008-06-24T17:34:00.004+03:00

Исходный код:

<style type="text/css">
ul.line-separated{
    background-color: blue;
    padding: 0;
    margin-left: 1em;
    color:#383838;
    }
ul.line-separated li{
    background-color: white;
    margin: 1px 0 0 0;
    padding: 0;
    list-style-type: none;
    }
</style>
<ul class="line-separated">
    <li>пункт 1</li>
    <li>пункт 2</li>
    <li>пункт 3</li>
</ul>

Как это выглядит:

пункт 1
пункт 2
пункт 3

Оригинальная статья на artlebedev.ru