#replacement-1 {
width: 100px;
height: 55px;
margin: 0;
padding: 0;
border: 0;
background: transparent url(img.gif) no-repeat center top;
text-indent: -1000em;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
проверено на FF Safari Opera Chrome ie6-8
Еще html5, практически все нововведенные теги отностяся к упрощению элементов которые прочно вошли в жизнь, например без элементов даты и времени мало какой динамичный сайт, точно так же и с другим новыми элементом figure. Почти на каждом сайте есть фотография с подписью под ней, хотя и не обязательно фото, можно и видео и звук. legend позволяет помеcтить рядом подпись.
<figure> <legend>myMans</legend> <img src="pinguim-root.png" alt="myMans" /> </figure>
Новый тег для публикации диалога, логов или чатов
<dialog> <dt>ira</dt> <dd>)))</dd> <dd>да его же не читает никто</dd> <dt>u00009_mymans</dt> <dd>так сможешь?</dd> </dialog>
На фоне того как все с нетерпением ждут HTML2, разработчики XHTML2 тоже не дремлют. В своей новой версии они вводят еще одно замечательное свойство, это навигационные цепочки, ставшие теперь очень популярными. Сейчас как правило их делают из спискаul, а потом извращают с помощью css. Новый список nl позволит избежать многих проблем но все ровно будет под настраиваться через css.
<nl> <label>Вы находитесь:</label> <li href="/magazine">Магазин</li> <li href="/magazine/homeuse/">бытовая техника</li> <li href="/magazine/products/tv/">телевизоры</li> <li>Модели</li> </nl>
Небольшая хитрость с тегом hr. Если применить к нему стиль вроде этого,
.L{
width: 90px;
height:15px;
background-color: #c6d3f4;
border: 0px solid white;
}
выясняется что во всех браузерах он показывается нормально, и только в IE 6 по краю продолжает выделяться серая рамка, даже не смотря на указания border как вот на этот скриншоте.
Как выяснилось это лечится. Надо добавить color
color: #c6d3f4;
после этого серая рамка становится того же цвета что и фон и перестает быть заметной.
Как известно SVG графический формат, популярность которого растет с каждым днем. Извесно что компания Apple, на момент написания поста, решила не использовать Flash в качестве инструментария разработчика для Iphone. Многие ожидают, что это будет SVG, но дже если это не случится, престиж фомата вряд ли упадет.
Помимо того, что можно открыть .svg файл непосредственно в браузере его можно встроить в HTML страницу 3-я способами.
1 - embed
<embed src="rect.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />
Для Internet Explorer поддерживает еще один параметр wmode=”transparent”
2 - iframe
<iframe src="rect.svg" width="300" height="100"> </iframe>
и накнец третий
3 - непосредственная вставка
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<body>
<svg:svg version="1.1" baseProfile="full"
width="300px" height="200px">
<svg:circle
cx="150px" cy="100px" r="50px"
fill="#ff0000" stroke="#000000"
stroke-width="10px"/>
</svg:svg>
</body>
</html>
Здесь надо обратить внимание что обьявление xmlns в DOCTYPE обязательны!
Все мы ждем мультиколоночность. Для этого в CSS3 введено много вкусного,
column-count: <int> column-gap: <length> | auto column-width: <length> | auto
но, не дожидаясь принятие CSS3, мозильци поддержу мультиколоночнисти в Firefox используя спец префикс -moz- в стилях,
-moz-column-count: <int> -moz-column-gap: <length> | auto -moz-column-width: <length> | auto
и как водится дурной пример оказался заразителен для ребят из Apple
-webkit-column-width: <length>; -webkit-column-gap: <length>;
Это, как вы уже наверно поняли, были стили под Safari.
Как бы быстро все браузеры не поддержали css3 или используя теги FF и Safari, надо обратить внимание на одну штуку. Разделять на колонки не всегда обязательно через column-count, конечно вы можете обозначить числом нужные вам колонки, но можно делать и по другому. Если указать только параметры column-width и column-gap то браузер сам поделит пространство на колонки. Например, если div шириной 400px и ты ставим column-width:100px и column-gap:20px то колонок будет 3. Уменьшите ширину в column-width и количество колонок увеличится
Именно так называется новый аргумент для большинства контейнеров в новом html5. В часности дстаточно прописать его на div что бы пользователь мог его изменять.
<div id="editor1" contenteditable="true">content</div>
Как заявлено на сайте html 5 Working Draft “User agents must support this attribute on all HTML elements”
И похоже это воспринято многие браузеро-писатели всерьез воспринили этот призыв и едином порыве его поддержали Opera 9.5 Safari 3 FireFox 3 и даже IE7
Технология стара как сам css, но здесь максимально учтено всего чего может быть, кнопки не только растягивается но, и отрабатывает нажатие и самое главное, они красивые.
<a class="button" href="#" onclick="this.blur();"><span>MyMans</span></a>
Зачем здесь onclick? Потому что IE не возвращает изменения active на которое вешается дизайн
a.button {
background: transparent url('bg_button_a.gif') no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 24px;
margin-right: 6px;
padding-right: 18px;
text-decoration: none;
}
a.button span {
background: transparent url('bg_button_span.gif') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
a.button:active {
background-position: bottom right;
color: #000;
outline: none; /* спрятать оконтовку в Firefox */
}
a.button:active span {
background-position: bottom left;
padding: 6px 0 4px 18px; /* приспустить текст на 1px */
}
Затем нам нужно два имиджа
для того что бы в итоге получить вот это
var node = document.getElementById(ID); node.style.backgroundImage="url(bgimg.jpg)" | "";
понимают: IE 4, FF 1, Opera 9
