Media Queries дают возможность применять различные CSS стили в зависимости от возможностей устройства на котором просматривается страница.

Например, чтобы применить особое оформление в случае, если ширина экрана меньше или равна 1000px, нужно использовать следующую конструкцию:

1
2
3

@media screen and (max-width:1000px) {
    /* Стили при ширине экрана <= 1000px */
}

Для наглядности откройте демо и попробуйте изменить размер окна.

Media Queries поддерживаются Webkit-браузерами, Opera и Firefox начиная с версии 3.5. Internet Explorer к сожалению данную возможность не поддерживает и не известно будет ли поддержка в 9-й версии. В Internet Explorer 9 (Second Preview) появилась таки поддержка CSS3 Media Queries.

Шпаргалка содержит перечень всех поддерживаемых в настоящее время HTML 5 тегов, их описания, атрибуты, и поддержка в HTML 4.

CSS 3

Полный список всех свойств, селекторов и допустимых значений в текущей спецификации CSS 3.

<h3 id="chapter_2">The Title of the Chapter</h3>

Вы можете создать прямую ссылку на этот элемент, добавив идентификатор в конце ссылки:

http://www.example.com/index.html#chapter_2

А с помощью :target поменять фон у этого заголовка, чтобы обозначить место куда вела ссылка.

h3:target {
background-color: #ff0
}

Очень полезная функция, не правда ли? Однако она может быть еще более полезной. Например для создания фотогаллереи на CSS.

Посмотрите на этот пример в браузере который поддерживает :target (на данный момент это Mozilla, Webkit или Opera).

Нажимая на ссылки вы можете просматривать различные изображения, и это делается с минимальным количеством кода и без использования скриптов.

Первый шаг заключается в том, чтобы создать список с изображением, именем и ссылкой на каждый элемент списка, например:

<ol>
    <li id="one">
        <p><a href="#one">One</a></p>
	<img src="one.jpg">
    </li>
    <li id="two">
        <p><a href="#two">Two</a></p>
	<img src="two.jpg">
    </li>
    <li id="tre">
        <p><a href="#tre">Tre</a></p>
	<img src="tre.jpg">
    </li>
</ol>

Каждый элемент списка должен иметь id и ссылку на него. Все картинки абсолютно спозиционированы в верхней части, а с помощью селектора мы просто меняем z-index у них:

img {
position: absolute
}
li:target img {
z-index: 100
}

Конечно, это лишь простой пример. С большей изобретательностью это может стать весьма полезным инструментом.

Оригинал: Making an image gallery with :target