Эта статья представляет собой отрывок из Eric Meyer’ недавней книге Smashing CSS, опубликованные Wiley в сотрудничестве с Smashing Magazine.
В этой статье акцент делается на what’ Приход: укладка методы you’ будем использовать в непосредственном и ближайшем будущем.От стиля HTML 5 элементы перестановки макет основан на дисплей параметров в сумасшедший выбор моделей для преобразования элемента макета, все эти методы, которые вы можете использовать завтра, в следующем месяце или в следующем году.При частичной поддержке браузера, they’ повторно все на передний край веб-design.
Соответственно, будьте осторожны, чтобы не резать! number of useful sites может помочь вам выяснить точный синтаксис и модели, которые вы должны использовать эти techniques.
Кроме того, ряд библиотек JavaScript может расширить поддержку для спины передовых CSS в старых браузерах, в некоторых случаях еще в IE / Win 5.5.Некоторые из них очень узко сосредоточены на определенных семей браузера, в то время как другие более широко означало, чтобы обеспечить поддержку во всех известных браузерах.Они могут быть полезны в случаях, когда посетители haven’ T довольно поймал ногу со временем, но вы don’ T хотим, чтобы пропустить все самое интересное.(Некоторые из этих библиотек CSS3 PIE cssSandpaper: выберите [ivizr] ie7-js eCSStender).
Есть также немало усовершенствований CSS доступен как плагин для популярных библиотек JavaScript, таких как jQuery.Если you’ Re пользователя такой библиотеки, безусловно, у некоторых копать, чтобы увидеть what’ S был создан.Опять же: будьте осторожны!Хотя эти методы являются мощным и может доставить много энергии, чтобы ваши страницы, необходимо тщательно тестировать их в браузерах дня, чтобы убедиться, что вы didn’ т просто случайно сделать страницу полностью нечитаемой в старых browsers.
Styling HTML 5
Styling HTML 5 является ничем не отличается от укладки HTML 4.Есть несколько новых элементов, но стиль их в основном такая же, как укладка любого другого элемента.Они порождают те же ящики как и любой другой divspanh2a, или что там у you.
Спецификации HTML 5 все еще работали на момент написания этой статьи, так что это может немного измениться с течением времени, но следующие заявления могут быть полезны для старых браузеров, что don’ знаю совсем, что делать с новыми элементами.
Вы, возможно, заметили, что я пропустил два довольно важных новых элемента: audio и video.That’ потому, что it’ жесткийточно знать, как их лечить.Блок?Встроенные?Все зависит от того, как вы планируете их использовать.В любом случае, вы можете разместить их в декларации, которая делает самый смысл you.
Но то, что о действительно старых браузеров, таких как IE6?(Заметьте, я сказал: “ старые, ” Не “ unused.”. Кроме интересной подрывную поп-культуры, популярность браузера имеет очень мало общего с возрастом) Для тех, необходимо использовать немного JavaScript для того, чтобыполучить браузер, чтобы признать их и, следовательно, иметь возможность их стиль.Там в миленький script который автоматически силы старых версиях IE приятно играть с HTML 5 элементы.Если вы собираетесь использовать и оформлять их, вы должны обязательно взять этот сценарий и поставить его на use.
После you’ ве получил ваш браузер уток в ряд и кряканье “ Трехгрошовая опера, ” вы можете получить до укладки.Помните: Там на самом деле ничего нового стиля с этими новыми элементами.Например:
<img src="splash.jpg" alt="A toddler’s face is obscured by a rippled and dimpled wall of water thrown up by her hands slapping into the surface of the swimming pool in whose waters she sits.">
SPLASH SPLASH SPLASH!!!
Рисунок 7-1: стиль HTML 5 фигурой и фигурой caption.
Причислять как HTML 5
Возможно, вам нравится новый семантику HTML 5, но вы просто не готовы принять ваши сайты до полного на HTML 5.Может быть, база пользователей сайта в основном старые браузеры и вы предпочитаете придерживаться известных величин, как HTML 4 и XHTML.Не волнуйтесь: Вы можете иметь лучшее из обоих миров с почтенным class attribute.
Этот подход был зафиксирован Jon Tan в своем article.Основная идея заключается в использовании старой школы элементы, такие как div и span, и добавить к ним классы, которые точно отражают имена элементов в HTML 5.Вот код example.
<img src="spring.jpg" alt="A small child with twin pigtail braids, her back to the camera, swings away from the camera on a playground swingset while the late afternoon sun peeks over the crossbar of the swingset.">
<div class="figcaption">Swinging into spring.</div>
Рисунок 7-2: стиль HTML 4-классифицировать фигуры и фигуры caption.
Если сравнить стили есть тем, которые содержатся в предыдущем разделе, вы увидите, что разница только в том, что имена figure и figcaption предшествуют периоды — Таким образом, помечая их как имена классов.Разметка немного отличается, конечно, хотя это те же основные structure.
Преимуществом этого подхода является то, что если у вас есть эти стили на месте в тот момент, когда вы решите, что можно преобразовать в HTML 5, то все что вам нужно сделать, это изменить разметку использовать HTML 5 элементов вместо классифицируется divс, а затем содрать периоды превратить класс селекторов в элементе селекторы.Вот и все.Просто, как пирог
МедиаQueries
Это может быть честно свою статью, или, возможно, даже свою собственную книгу.Таким образом, то, что следует обязательно будет лишь краткий вкус возможностями.Вы должны обязательно следить с дополнительных исследований, потому что во многих отношениях это будущее веб-styling.
Точка запросы средств массовой информации заключается в создании условных блоков стилей, которые будут применяться в различных условиях среды.Например, вы могли бы написать один набор стилей для портрета дисплеи и другое для ландшафтного дисплеев.Вы можете изменить цвета на основе битовой глубины на дисплее.Вы можете изменить шрифт, основанный на плотность пикселей дисплея.Вы даже можете изменить макет страницы в зависимости от ширины и количества пикселов доступных в display.
Рисунок 7-3: основные три колонки layout.
Как?Рассмотрим некоторые основные стили макета три колонки:
Как хорошо, как это может быть (в минималистском вроде так), это, вероятно, столкнетесь с проблемами на более мелкие-то есть, более узкие-дисплеев.Что делать, если вы могли бы волшебно изменится на две колонки на таких дисплеях
Ну, можно.Во-первых, ограничить три колонки в среду, что более 800 пикселей в поперечнике.Это делается путем разделения макета биты в своих заявлениях:
Затем обернуть эти последние две декларации в запросе СМИ:
@media all and (min-width: 800px) {
.col {
float: right;
width: 20%;
}
#two {
width: 40%;
}
}
Что говорит, что “правила внутри этой фигурными скобками блок применяться во всех средствах массовой информации, которые имеют минимальную ширину дисплея в 800 пикселей.« Все, что ниже, что, независимо от среды, и правила внутри блока будут игнорироваться.Обратите внимание на круглые скобки вокруг min-width термин и его значение.Они необходимы в любое время у вас есть сроки и стоимость (которые называют выражение)
На данный момент, ничего не изменится, если на самом деле вы уменьшите окно браузера, пока она предлагает менее 800 пикселей по документу.В тот момент, колонны остановить плавающий altogether.
Рисунок 7-4: Что происходит ниже 800 pixels.
Что вы можете сделать в этой точке написать еще один медиа-блок запроса компоновки правила, которые применяются в более узких условиях.Допустим, вы хотите две колонки между 500 и 800 пикселов):
Рисунок 7-6: Single-макет, который показывает ниже 500 pixels.
Обратите внимание, что во всех этих запросов, макет стили определяются в зависимости от области отображения в окне браузера.Более общем, они определяются по отношению к области отображения доступных документов в любой среде, в которой оно вынесено.Это означает, что если принтер, например, используется для печати документов и имеет доступную область экрана 784 пикселей в ширину, а затем двумя колонками будет для printing.
Чтобы ограничить перемещение столбцов на экран информации только, изменять запросы, например, так:
@media screen and (min-width: 800px) {...}
@media screen and (min-width: 500px) and (max-width: 799px) {...}
@media screen and (max-width: 499px) {...}
Но что, если вы хотите, три колонки, используемые в некоторых не-экраном средства массовой информации, как печатные и ТВ дисплеев?Затем добавьте в тех СМИ, через запятую, например, так:
@media print, tv, screen and (min-width: 800px) {...}
@media screen and (min-width: 500px) and (max-width: 799px) {...}
@media screen and (max-width: 499px) {...}
Запятые здесь выступают в качестве логических ОШ, поэтому первый запрос гласит: “использовать эти стили печатных СМИ или телевидения СМИ или области отображения на экране среде, где область дисплея составляет 800 пикселей или больше”.
И если вы хотите три колонки используются во всех без экрана СМИ?Добавить заявлении первого запроса с использованием модификатора не говоря __5 “все, что не экран”. |
@media not screen, screen and (min-width: 800px) {...}
@media screen and (min-width: 500px) and (max-width: 799px) {...}
@media screen and (max-width: 499px) {...}
Как и прежде, запятая соединяет два в OR заявление, так как он читает __5 “ничего не на средних экран или область отображения на экране среде, где область дисплея составляет 800 пикселей или больше.” |
Существует также only модификаторов, так что запрос можно сказать что-то вроде only print или only screen and (color).На момент написания статьи, not и only являются единственным модификаторов в средствах массовой информации queries.
Вы не ограничены пикселей для предыдущих запросов, кстати.Вы можете использовать EMS, сантиметры, или любой другой допустимую длину unit.
Таблица 7-1: запрос базы СМИ terms
Term
Description
width
Ширина области отображения (например, окно браузера)
height
Высота области отображения (например, окно браузера)
устройства width
. Ширина области отображения устройства (например, настольный монитор или дисплей мобильного устройства)
устройства height
Высота дисплея устройства area.
orientation
Путь дисплей ориентирован; два значения портрет и landscape.
аспектно-ratio
Отношение ширины области отображения на его высоту.Значения двух целых чисел, разделенных вперед slash.
устройства аспект-ratio
Отношение ширины дисплея к его высоте.Значения двух целых чисел, разделенных вперед slash.
color
Цвету глубину цвета на дисплее устройства.Значения безразмерные числа, которые относятся к разрядности.Если значение не задано, то любой цветной дисплей будет match.
цвет index
“. Поиск в таблице цвет” количество цветов сохраняется в устройстве Значения безразмерный integers.
monochrome
Применимо к монохромным (оттенки серого) devices.
resolution
Разрешение дисплея устройства.Значения выражаются с помощью единиц точек на дюйм или dpcm.
scan
Сканировании типа “TV” медиа-устройства; два значения являются прогрессивными и interlace.
grid
Ли устройство использует сетку дисплея (например, устройства TTY).Значения 0 и 1.
Таблица 7-1 показывает все условия запроса, которые могут быть использованы при построении запросы средств массовой информации.Обратите внимание, что почти все эти условия принять мин и макс-префиксы (например, device-height также имеет min-device-height и max-device-height двоюродные братья).Исключение составляют orientationscan, а grid.
Стайлинг Иногда Children
Есть моменты, когда вы можете выбрать каждый второй, третьей, пятой, восьмой, или тринадцатого элемента в серии.Наиболее очевидные случаи элементов списка в длинном списке или строк (или столбцов) в таблице, но есть также много случаев, есть сочетания elements.
Рассмотрим одну из менее очевидных случаях.Предположим, у вас есть много цитат, которые вы хотите плавать в своего рода сетку.Обычная проблема в этих случаях является то, что котировки различной длины может действительно разрушить grid.
Классическое решение здесь, чтобы добавить класс для каждого четвертого div (потому что это то, что охватывает каждого цитата), а затем clear его.Вместо того, чтобы загромождать разметки с классами, хотя, почему бы не выбрать каждый четвертый div?
.quotebox:nth-child(4n+1) {
clear: left;
}
Рисунок 7-7: Проблема с плавающей переменной высоты elements.
Рисунок 7-8: Очистка каждый четвертый child.
Быстрое объяснение 4n+1 части:
4n означает, что каждый элемент, который может быть описано формулой 4n, где п описываетсяСерия 0, 1, 2, 3, 4 …. Это число выходов элементов 0, 4, 8, 12, 16, и так далее.(Точно так же, 3n даст ряд 0, 3, 6, 9, 12 ….)
Но нет нулевого элемента; элементы начинаются с первого (то есть, элемент № 1).Таким образом, вы должны добавить 1, чтобы выбрать первый, пятый, девятый и т. д. elements.
Да, вы правильно прочитали: :nth-child() шаблон начинает отсчет с 0, но элементы отсчет от 1.Вот почему + 1 будет особенностью большинства :nth-child() selectors.
Большое дело с такого рода селектор, что если вы хотите изменить выбор каждого четвертого элемента каждый третий элемент, вам нужно изменить только одно number.
.quotebox:nth-child(3n+1) {
clear: left;
}
Рисунок 7-9: Очистка каждый третий child.
Это может показаться очень стильный сама по себе, но она становится лучше.Если объединить этот подход с запросами средств массовой информации, вы получите адаптации сетки, как layout.
@media all and (min-width: 75.51em) {
.quotebox:nth-child(5n+1) {
clear: left;
}
}
@media all and (min-width: 60.01em) and (max-width: 75em) {
.quotebox:nth-child(4n+1) {
clear: left;
}
}
@media all and (min-width: 45.51em) and (max-width: 60em) {
.quotebox:nth-child(3n+1) {
clear: left;
}
}
@media all and (min-width: 30.01em) and (max-width: 45.5em) {
.quotebox:nth-child(2n+1) {
clear: left;
}
}
@media all and (max-width: 30em) {
.quotebox {
float: none;
}
}
Рисунок 7-10: Два видом адаптации размещенных grid.
Заметим, что это определенный набор запросов в зависимости от ширины области отображения в браузере, измеряемый в EMS.Это помогает сделать макет гораздо более приспособленными к изменению размера текста и браузер window.
Если вы заинтересованы в выборе любого другого элемента — let’ Скажем, каждый второй строке таблицы — Есть еще несколько человек альтернативы 2n+1.Вы можете выбрать четные или нечетные детей с использованием :nth-child(even) и :nth-child(odd), так как в этом example.
tr:nth-child(odd) {
background: #eef;
}
Стайлинг Иногда Columns
Это достаточно просто выбрать другие строки таблицы для укладки, но как насчет столбцов таблицы?На самом деле, это так же легко, благодаря :nth-child и :nth-of-type selectors.
В простой таблицы с рядами, состоящие лишь из данных клеток (те td элементов), вы можете выбрать любой другой колонке следующим образом:
Если вы после каждого третьего, четвертого, пятого, или аналогично расположенными-аута,, то вам нужно n+1 pattern.
td:nth-child(3n+1) {
background: #edf;
}
Рисунок 7-12: Стайлинг и нечетными и четными номерами columns.
Рисунок 7-13: Стайлинг каждый третий данных column.
Это все относительно просто.Теперь, что происходит, когда вы положили th В начале каждой строки?С одной стороны, ничего.Столбцов, которые выбираются не меняются, вы по-прежнему выбрав первый, четвертый, седьмой и так далее детей tr элементов.В другом смысле, выбранные столбцы сдвигаются, потому что вы больше не выбрав первый, четвертый, седьмой и так далее столбцы данных.Ты выборе третьего, шестого и так далее столбцов данных.В первой колонке, которая состоит из th элемент, не выбран вовсе не потому, селектор относится только к td elements.
Рисунок 7-14: Срыв шаблона со строкой headers.
Для настройки, вы можете изменить условия :nth-child селектора:
td:nth-child(3n+2) {
background: #edf;
}
Кроме того, можно сохранить оригинальную модель и перейти от использования :nth-child до :nth-of-type:
td:nth-of-type(3n+1) {
background: #fde;
}
Рисунок 7-15: Восстановление картины, регулируя выделение formula.
Рис 7-16. Восстановление картины с :nth-of-type
Это работает, потому что она выбирает каждый nth элемента данного типа (в данном случае td элементов), акции родительский элемент с другим.Думайте об этом как :nth-child, который также пропускает любые элементы, которые не названы в :nth-child selector.
RGB Альфа Color
Значения цвета, вероятно, один из самых привычных вещей во всех CSS, некоторые люди до такой степени, чтобы быть способным оценить внешний вид цвета на основе его шестнадцатеричное представление.(Давайте, попробуйте его. #e07713) Это не совсем так часто использовать rgb() обозначения для цветов, но они все еще довольноpopular.
В CSS 3, rgb() обозначение присоединился rgba() обозначение.a часть значения альфа, как и в альфа-канал, как и в прозрачности.Таким образом, вы можете поставить цвет, который является частично прозрачным:
Значение альфа всегда представляется в виде числа от 0 до 1 включительно, с 0 “. Полной непрозрачности”, что означает “нет прозрачности на всех” и 1 смыслу Таким образом, половина непрозрачной (и, следовательно, полу-прозрачные) составляет 0.5.Вы не можете поставить процент там по историческим причинам, которые слишком грязно, чтобы попасть в here.
Если вы укажете номер пределами от 0 до 1 диапазона, он будет (по словам спецификации) быть “зажаты” в допустимый диапазон.Так что если вы даете альфа-значение 4.2, браузер будет относиться к ней как если бы ты написал 1.Кроме того, не ясно, что должно произойти, когда альфа 0 используется.Так как цвет является полностью прозрачным, что будет происходить, скажем, невидимый текст?Вы можете выбрать его?Если оно используется по ссылке, является связующим звеном интерактивными?Оба интересные вопросы нет окончательного ответа.Так что будьте careful.
RGBA цвета могут быть использованы с любым свойством, которое принимает значение цвета, такие как color и background-color.Чтобы сохранить старые браузеры от рвет на себе, желательно, чтобы поставлять не-альфа цвет, прежде чем альфа цвета.Это было бы принимать форму, например, так:
{
color: #000;
color: rgba(0,0,0,0.75);
}
Старые браузеры увидим первое значение и знаю, что с ним делать.Затем они видят второе значение и не знаю, что с ним делать, поэтому они игнорируют его.Таким образом, по крайней мере, старые браузеры получить черный текст.Современные браузеры, с другой стороны, понимаю оба значения и благодаря каскада, переопределить сначала с second.
Обратите внимание, что нет шестнадцатеричной форме RGBA colors.Таким образом, вы не можете писать #00000080 и ожидать половины непрозрачной black.
