Очередной блог фрилансера » верстка

Псевдо-селектор :target

dreamhelg — Sun, 13 May 2012 11:18:33 +0000

Псевдо-селектор :target срабатывает при совпадении хэша в URL и ID элемента на странице. [html]

Content

[/html] [css] :target { background: yellow; } [/css] Пока URL будет таким как на картинке, блок section будет иметь желтый фон.

Где это можно использовать?

Один из примеров использования – подсветка “состояний”. Когда URL страницы содержит некий хэш, страница находится в соответствующем состоянии. Этот способ напоминает манипулирование именами классов, хотя и не является таким универсальным. Все то, что вы обычно делаете изменяя классы, можно использовать для изменения состояния элемента, когда к нему применяется псевдо-селектор :target. Например: изменение цвета, позиционирования, изменение картинок, отображение/скрытие различных элементов, и т.д. Существует три признака оправданного использования псевдо-селектора :target :

Когда необходимо подчеркнуть “состояние”
Когда приемлемо резкое “перепрыгивание” страницы вниз
Когда приемлемо влияние на историю браузера

Давайте рассмотрим это немного подробнее.

Как получить хэш в URL?

Самый распространенный способ – пользовательский клик по ссылке, включающей хэш. Ссылка может быть как внутренней (которая указывает на текущую страницу), так и полноценной, оканчивающейся хэш-тэгом и значением. Например: [html] Go To There Go To There [/html]

“Перепрыгивание” страницы

Независимо от назначения ссылки, браузер всегда прокручивает страницу до тех пор, пока указанный элемент не окажется вверху. В случае если браузер не может прокрутить точно до указанного элемента, он прокрутит страницу на максимально возможную длину. Такое поведение браузера, накладывает определенные ограничения при использовании :target для подсветки текущего состояния. Например, однажды я (прим. я – Крис Койер, автор блога css-tricks.com) пробовал различные техники, для имитации создания CSS-табов, и в конце-концов остановился на чекбокс-хаке, поскольку только он позволял обойти проблемы с перепрыгиванием страницы. Йен Хэнсон, создатель CSS Science, также реализовал несколько примеров табов. Его третий пример использует :target и абсолютно позиционируемые элементы, спрятанные вверху страницы, для предотвращения “прыжка”. Это довольно умно, но все же не решение проблемы, поскольку страница прыгает вверх, табы должны располагаться ниже области прыжка.

Прекрасный пример: подсветка секций

Проблема: Клик по хэш-ссылке прокручивает страницу к указанной секции, которая по возможности будет удобно расположена в верхней части окна браузера. Но что если на странице немного контента, а скролл и вовсе отсутствует? В этом случае, секция останется в видимой области, но не будет прибита к верху страницы, что странно и не совсем удобно.

Исходя из личного опыта могу заметить, что если клик по внутристраничной ссылке не прокручивает страницу к указанной секции, это безумно раздражает. Чаще всего эта проблема встречается на FAQ-страницах, содержащих большое количество коротких секций. Давайте это исправим! Один из самых знаменитых методов исправления этой проблемы, называется “Yellow Fade Technique” (Техника Желтого Затухания). Эта техника была разработана компанией 37 signals, специально для того чтобы обратить внимание пользователей на только что добавленный на страницу контент . Джонатан Снук портировал эту идею на CSS и объединил ее с псевдо-селектором :target. Вместо желтого затухания, мы будем выделять активную секцию страницы путем плавного сдвига вправо, одновременно добавляя красный маркер слева от текста. Это будет выглядеть следующим образом: http://youtu.be/vqE1MZ0UlaM HTML-структура представляет собой обычную навигацию, с привязкой ссылок к соответствующим секциями через ID: [html]

One

Pellentesque habitant morbi ...

Two

Pellentesque habitant morbi ...

Three

Pellentesque habitant morbi ...

[/html] При активации :target, секция немного сдвигается вправо, через трансформацию translateX, поскольку она предотвращает любые проблемы с отступами и странное выравнивание текста; также слева появляется красный маркер, выполненный с помощью кейфрейм-анимации. [css] :target { -webkit-animation: highlight 1s ease; -moz-animation: highlight 1s ease; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); } @-webkit-keyframes highlight { 0% { border-left-color: red; } 100% { border-left-color: white; } } @-moz-keyframes highlight { 0% { border-left-color: red; } 100% { border-left-color: white; } } section > div { border-left: 40px solid white; padding: 10px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; padding-right: 50px; margin-left: -20px; } [/css] Вот и все. Код отвечает принципам прогрессивного улучшения, поэтому будет нормально выглядеть и работать во всех браузерах. Демо-страница.

Боремся с прыжками страницы

Предположим, вам понравилась идея использования :target для подсветки секций, но при этом хотелось бы избежать прыжков страницы, при клике по хэш-ссылкам. С помощью jQuery вы можете предотвратить дефолтное поведение всех хэш-ссылок, а затем использовать метод pushState() (или replaceState()), для изменения URL без передвижения страницы. [javascript] $("a[href^=#]").on("click", function(e) { e.preventDefault(); history.pushState({}, "", this.href); }); [/javascript] Метод replaceState() отличается от pushState() тем, что не добавляет запись о смене URL в историю браузера. Так что, вы можете использовать любой из этих методов на свое усмотрение.

Плохие новости

При изменении хэша в URL через метод pushState(), предыдущая активная секция должна вернутся к исходному состоянию, а новая выделиться. Однако этого не произойдет (на момент написания статьи тестировалось в последних версиях WebKit и Firefox). Это баг. Теоретически вы можете измерить и сохранить текущую позицию скролла на странице, позволить ссылке передвинуть страницу естественным путем, а затем вернуть ее обратно на то место где она была. Но это выглядит настолько ужасно, что я не могу себя заставить сделать тестовую страницу с этим примером. Перевод статьи "On :target", автор Chris CoyierПсевдо-селектор

Обзор CSS-свойства vertical-align

dreamhelg — Fri, 23 Dec 2011 06:27:55 +0000

Довольно часто от веб-разработчиков можно услышать возмущенный возглас: “vertical-align не работает!”. Несмотря на то, что назначение этого свойства следует из его названия, на практике, начинающие разработчики, равно как и многие ветераны CSS, часто испытывают трудности с его применением. В сегодняшней статье, я постараюсь раскрыть все непонятные моменты этого CSS-свойства.

Чего не делает vertical-align

Наиболее распространенное заблуждение относительно свойства vertical-align состоит в том, что оно влияет на вертикальное выравнивание всех дочерних элементов контейнера, к которому применяется. Например, если мы применим к контейнеру свойство vertical-align: top, предполагается, что все содержимое контейнера будет выровнено по верхнему краю контейнера. Это напоминает мне старые, добрые времена табличной верстки: [css] Содержимое ячейки.. [/css] В этом примере табличной ячейки, свойство valign (сейчас уже запрещенное в HTML5), действительно прижмет все содержимое ячейки к верхнему краю. Возможно исходя из этого, CSS-разработчики ожидают похожего эффекта, от применения свойства vertical-align. Но свойство vertical-align так не работает.

Как на самом деле работает vertical-align

Свойство vertical-align можно разделить на три простых правила:

Оно применяется только к элементам со свойствами display: inline; и display: inline-block;
Оно влияет на положение самого элемента, а не его содержимого (за исключением табличных ячеек)
Когда оно применяется к табличной ячейке, то влияет на содержимое ячейки, а не на саму ячейку.

Другими словами, следующий код не будет иметь никакого эффекта: [css] div { vertical-align: middle; /* эта строка не будет работать */ } [/css] Почему? Потому что

- это блочный элемент. Конечно, если вы измените у дива свойство display, на inline, или inline-block, vertical-align сразу заработает. Правильное использование свойства vertical-align, поможет выровнять строчный элемент относительно других строчных элементов на странице. Насколько высоко или низко расположится элемент по вертикали, будет зависеть от размера соседних строчных элементов, или от свойства line-height, заданного для этой строки. На картинке ниже, представлен пример того, как ведут себя строчные элементы, когда вы применяете свойство vertical-align:

Значения свойства – ключевые слова

Свойство vertical-align может принимать следующие значения:

baseline (значение по умолчанию)
bottom
middle
sub
super
text-bottom
text-top
top

Большинство из них вам скорее всего не понадобятся, но всегда хорошо знать из чего можно выбрать. Например, на демо-странице, текстовому полю назначено свойство vertical-align: top, благодаря чему, оно выровнено относительно самого высокого элемента в строке (большой картинки). А если вы не хотите располагать элемент относительно изображений или других строчных элементов, можно использовать значения text-top или text-bottom, чтобы ваш элемент позиционировался относительно текста, расположенного в строке.

О значении “middle”

К сожалению, vertical-align: middle; не расположит строчный элемент по центру самого большого элемента в строке, как этого можно было бы ожидать. Вместо этого, значение middle расположит элемент относительно гипотетической строчной “x” (также называемой “x-высотой”). По-хорошему, это значение следовало бы назвать “text-middle”, для правильной идентификации его механизма. На этой демо-странице, размер текста специально увеличен, чтобы вы могли посмотреть, как именно выравниваются элементы, при значении middle. По всему выходит, что это значение, вам будет нужно гораздо реже, чем остальные.

Цифровые значения свойства

Возможно вы не знали, но vertical-align в качестве значения может принимать абсолютные и процентные значения, все приведенные ниже примеры будут правильными: [css] input { vertical-align: 100px; } span { vertical-align: 50%; } img { vertical-align: -300px; } [/css] В чем разница между абсолютными значениями и ключевыми словами, можно почитать в CSS-спецификации, или (что на мой взгляд гораздо полезнее) самостоятельно попробовать различные варианты. Перевод статьи “Understanding CSS’s vertical-align Property”, автор Louis Lazaris

CSS-Transitions без использования :hover

dreamhelg — Mon, 14 Nov 2011 13:08:23 +0000

До недавнего времени, наиболее распространенным вариантом использования CSS-transitions – было сочетание его с хорошо известным псевдо-классом CSS :hover. Далее представлен наиболее простой пример изменения цвета ссылки, при наведении мыши, выполненный на чистом CSS: [css] a, a:link, a:visited { color: lightblue; -webkit-transition: color .4s linear; -moz-transition: color .4s linear; -o-transition: color .4s linear; -ms-transition: color .4s linear; transition: color .4s linear; } a:hover { color: white; } [/css] Этот код запустит анимацию свойства color, когда вы подведете мышь к ссылке. Наверняка этот простой пример не раз попадался вам на разных сайтах, но это не значит, что transitions ограничивается использованием псевдо-класса :hover. С помощью transitions, вы можете анимировать различные CSS-свойства, используя определенные CSS-приемы. Некоторые из этих приемов, (включая демо-версию каждого) приведены в сегодняшней статье.

Transitions с использованием :active

Псевдо-класс :active применяется к любому элементу, находящемуся в процессе активации. Основным способом “активации” элемента, является щелчок мышью или нажатие кнопки мыши. Далее представлен CSS-пример, демонстрирующий использование :active совместно с CSS3-transitons, для имитации события mousedown: [css] .box { width: 300px; height: 300px; background: #222; -webkit-transition: width 2s ease, height 2s ease; -moz-transition: width 2s ease, height 2s ease; -o-transition: width 2s ease, height 2s ease; -ms-transition: width 2s ease, height 2s ease; transition: width 2s ease, height 2s ease; } .box:active { width: 500px; height: 500px; } [/css] Подведите курсор мыши к блоку и нажмите кнопку, вы увидите как высота и ширина блока анимируются, становясь больше, пока вы держите кнопку нажатой. Стоит вам отпустить кнопку, и размеры блока плавно вернутся к исходному значению. Пример.

Transitions с использованием :focus

Вы можете использовать псевдо-класс :focus, для получения эффекта, описанного в предыдущем примере. В этот раз мы используем форму, и анимируем ширину любого элемента формы, получившего фокус: [css] input, textarea { width: 280px; -webkit-transition: width 1s ease; -moz-transition: width 1s ease; -o-transition: width 1s ease; -ms-transition: width 1s ease; transition: width 1s ease; } input:focus, textarea:focus { width: 340px; } [/css] Пример.

Transitions с использованием :checked

Вы можете анимировать чекбоксы и радиобаттоны, когда они становятся отмеченными – хотя, тут есть некоторые ограничения, поскольку вы не можете изменить их родную стилизацию. Поэтому, мы сделаем простое изменение ширины, которое будет появляться в качестве подтверждения отметки текущего элемента: [css] input { height: 20px; -webkit-transition: width 1s ease; -moz-transition: width 1s ease; -o-transition: width 1s ease; -ms-transition: width 1s ease; transition: width 1s ease; } input:checked { width: 30px; } [/css] Пример.

Transitions с использованием :disabled

Продолжая тему стилизации веб-форм, в этот раз мы комбинируем css3-transitions с jQuery, для запуска анимации фонового цвета элементов формы, при их отключении через атрибут disabled: [css] input[type="text"], textarea { background: #e2e2e2; -webkit-transition: background 1s ease; -moz-transition: background 1s ease; -o-transition: background 1s ease; -ms-transition: background 1s ease; transition: background 1s ease; } input:disabled, textarea:disabled { background: #666666; } [/css] И немного jQuery, чтобы удалять/добавлять атрибут disabled: [javascript] $(function() { $('input[type="radio"]').click(function() { if ($(':checked').val() === "other") { $('input[type="text"]').removeAttr("disabled"); } else { $('input[type="text"]').attr("disabled", "disabled"); } }); }); [/javascript] Итак, если отмечен последний из радиобаттонов (тот, что со значением “Другое”), у текстового поля удаляется атрибут disabled, при отметке остальных радиобаттонов, атрибут disabled, заново применяется к текстовому полю. Псевдо-класс :disabled применяется к элементу, имеющему одноименный атрибут, поэтому анимация будет срабатывать всякий раз при удалении или добавлении этого атрибута. Пример.

Transitions с использованием Медиа-запросов

Последний пример, возможно, наименее полезный из всех, поскольку, давайте смотреть правде в глаза, единственные люди, изменяющие размер окна браузера, чтобы посмотреть что получится – это веб-разработчики. Тем не менее, это еще один способ использования CSS3-transitions. Такой прием используется на сайте modernizr.com. [css] .box { width: 440px; height: 440px; background: #222; margin: 0 auto; -webkit-transition: width 2s ease, height 2s ease; -moz-transition: width 2s ease, height 2s ease; -o-transition: width 2s ease, height 2s ease; -ms-transition: width 2s ease, height 2s ease; transition: width 2s ease, height 2s ease; } @media only screen and (max-width : 960px) { .box { width: 300px; height: 300px; } } [/css] Этот пример одновременно анимирует два свойства, разделенных запятой. Медиа-запрос велит блоку уменьшиться, если размер экрана становится меньше 961 пикселя. Измените размер окна демонстрационной страницы, чтобы увидеть как это работает. Пример.

Несколько замечаний относительно примеров кода

В каждом фрагменте кода, стандартное название css3-свойства включено последним, несмотря на то, что пока не один из известных мне браузеров не поддерживает его в этом виде. Кроме того, добавлен префикс –ms, и хотя IE8 и IE9 не поддерживают transitions, но эта поддержка очевидно будет добавлена в версии IE10. А еще, примеры кода, которые вы видели в статье намеренно упрощены, в сравнении с теми, что используются на демо-страницах, для того чтобы сфокусироваться только на тех частях, которые мы обсуждали в статье. Перевод статьи “CSS3 Transitions Without Using :hover”, автор Louis Lazaris

Кое-что интересное о CSS-свойстве border

dreamhelg — Wed, 06 Apr 2011 07:57:11 +0000

Несмотря на годы веб-разработки и чтения тематических блогов и книг по CSS, я по-прежнему сталкиваюсь с неизвестными возможностями давно знакомых CSS-свойств. Возможно это моя вина, я человек привычки, и никогда не рассматирваю подробно вещи, которые мне давно знакомы. Так, во время чтения книги Smashing Book 2, в главе Кристиана Хейлмана был приведен пример следующего CSS-кода: [css] #pagetitle { border-color: black white white black; } [/css] Первое, о чем я подумал: «Это какая-то ошибка. С каких пор свойство border-color позволяет в сокращенной форме указывать цвет для каждой границы блока?». А затем, я вспомнил, что за 10 лет разработки, я использовал это свойство один или два раза, следовательно, что я могу о нем знать? Плюс, я думаю что Кристиан, как опытный разработчик, знает о чем говорит. Фактически, каждый раз, когда мне нужно было указать цвет границы, я использовал сокращенную версию свойства border, вот так: [css] #pagetitle { border: solid 1px black; } [/css] Редко когда мне действительно приходится использовать свойства типа: border-color, border-style, border-left-style или любые другие версии этих длинных свойств. В 99% случаев, свойство border реализует все, что мне требуется. В CSS-справочнике на sitepoint.com сказано:

Сокращенная запись свойства border-color, устанавливает цвет границы для всех четырех сторон элемента, используя от одного до четырех, указанных значений. Каждая граница может иметь собственное значение.

Следовательно, точно так же как для свойств margin и padding, цвет для каждой границы задается в следующем порядке: верхняя граница, правая граница, нижняя граница, левая граница (по часовой стрелке, начиная сверху).

Стиль и ширина границы

Это правило работает также для свойств border-style и border-width, так что вы можете указать разную толщину и стиль границы для каждой из сторон элемента. Ну и конечно, вы можете сокращать свойства, при необходимости: [css] #pagetitle { border-width: 2px 1px; border-style: solid dashed; } [/css] Снова, также как у margin и padding, мы указываем только первые два значения, а остальные просто наследуются от первых.

Запомните

Нельзя использовать эту технику мульти-объявления для сокращенного CSS-свойства border (несмотря на то, что это кажется вполне логичным). Оно применяется только к трем, указанным выше, свойствам, так что следующий код будет неправильным: [css] #pagetitle { /* THIS IS INVALID! */ border: solid dashed 1px 2px black white white black; } [/css] Еще, такой метод не получится применить к свойствам outline-width, outline-style и outline-color. Перевод статьи «Here’s Something Interesting About CSS Borders», автор Louis Lazaris

Изучаем CSS-позиционирование за 10 шагов

dreamhelg — Wed, 16 Feb 2011 13:56:56 +0000

Позиционирование — одно из ключевых понятий в блочной верстке. Разобравшись с ним, вам многое станет понятно, а верстка из шаманства превратится в осмысленный процесс. Итак, речь в статье пойдет о [...]

23 полезных CSS-приема для разработчика

dreamhelg — Thu, 12 Aug 2010 04:00:52 +0000

CSS, без сомнения, является одним из самых важных языков разметки, которые мы используем. И хотя HTML описывает структуру документа, ее поведение может быть непредсказуемым, в зависимости от версии браузера. CSS – это тот инструмент, который позволит нам исправить все несоответствия в отображении страницы, а также оформить ее внешний вид. Далее приведен список из двадцати трех различных CSS-приемов, которые будут полезны как начинающим, так и опытным разработчикам.

Прячем текст с помощью абзаца

Такой прием будет весьма полезен для логотипа компании. Чаще всего, в качестве логотипа используется картинка, однако для SEO, было бы неплохо отобразить название компании в тегах h1. Данный пример – самый лучший способ это реализовать. Фактически, мы просто скрываем текст за пределами экрана, и вместо этого назначаем фоновую картинку. [css] h1 { text-indent:-9999px; margin:0 auto; width:400px; height:100px; background:transparent url("images/logo.jpg") no-repeat scroll; } [/css]

Стилизация ссылок в зависимости от формата файла

Этот пример направлен на улучшение пользовательского интерфейса. Зачастую в интернете, мы переходим по ссылкам, абсолютно не зная куда они ведут. Следующий фрагмент кода используется для отображения небольших иконок рядом со ссылками. Такие картинки будут подсказывать пользователю, что это внешняя ссылка, электронный адрес, pdf-файл, картинка и т.д. [css] /* внешняя ссылка */ a[href^="http://"]{ padding-right: 20px; background: url(external.gif) no-repeat center right; } /* электронная почта */ a[href^="mailto:"]{ padding-right: 20px; background: url(email.png) no-repeat center right; } /* pdfs */ a[href$=".pdf"]{ padding-right: 20px; background: url(pdf.png) no-repeat center right; } [/css]

Удаляем полосы прокрутки многострочного поля в IE

Internet Explorer имеет раздражающую привычку добавлять полосы прокрутки в многострочное поле, даже когда его содержимое не превышает заданный размер. Этот недостаток легко исправляется следующей строчкой кода: [css] textarea{ overflow:auto; } [/css]

Буквица

На сегодняшний день очень распространенное явление в блогах и новостных сайтах. Вы удивитесь, насколько просто она реализовывается, а также прекрасно деградирует в старых браузерах. [css] p:first-letter{ display:block; margin:5px 0 0 5px; float:left; color:#FF3366; font-size:60px; font-family:Georgia; } [/css]

CSS-прозрачность

Прозрачность – это свойство, которое разным браузерам, назначается по-разному. С помощью следующего фрагмента кода, вы сможете назначить прозрачность всем браузерам сразу. [css] .transparent { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } [/css]

CSS Reset от Эрика Мейера

Фактически, css-reset, предложенный Эриком Мейером, уже стал повсеместным стандартом использования. Поскольку он был адаптирован многими известными разработчиками, вы можете не сомневаться в его качестве. [css] 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; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } [/css]

Предзагрузчик картинок

Иногда бывает полезно предварительно загрузить ваши картинки, с тем чтобы исключить задержку и мерцание при доступе к нужному элементу. [css] div.loader{ background:url(images/hover.gif) no-repeat; background:url(images/hover2.gif) no-repeat; background:url(images/hover3.gif) no-repeat; margin-left:-10000px; } [/css]

Простой css-спрайт для кнопки

Наличие кнопки или ссылки с фоновым изображением – обычное дело, кроме того, к таким элементам часто применяются дополнительные эффекты, улучшающие пользовательский интерфейс. Один из таких эффектов – индикатор наведения курсора мыши на кнопку. С помощью спрайта, мы можем реализовать такой эффект путем изменения свойства background-positon, на заданное значение, с тем, чтобы отобразить фоновую картинку при наведении мыши на кнопку. Простое, но эффективное решение. [css] a { display: block; background: url(sprite.png) no-repeat; height: 30px; width: 250px; } a:hover { background-position: 0 -30px; } [/css]

Google Font API

Не так давно, Google реализовал замечательный ресурс для веб-разработчиков, позволяющий загружать и использовать на странице новые, нестандартные шрифты. К загрузке доступны даже различные варианты шрифтов, жирный, курсив и т.д. Несмотря на то, что коллекция Google пока ограничена, в наличии достаточно большое количество шрифтов. Сначала подключите динамически составленный CSS-файл с названием шрифтов и необходимых вам вариантов, а затем просто используйте названия шрифтов в CSS, в обычном режиме. Дополнительную информацию по Google Font API можно прочитать здесь. [css] Inconsolata:italic|Droid+Sans"> [/css] [css] body { font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif; font-size: 48px; } [/css]

Хаки для различных браузеров

Иногда бывает полезно исправить баг у конкретного браузера, и условные комментарии не всегда являются лучшим решением для этого. Этот список браузерных хаков от Криса Койера, поможет вам назначить нужные свойства для определенных браузеров, посредством простого css. [css] /* IE 6 */ * html .yourclass { } /* IE 7 */ *+html .yourclass{ } /* IE 7 and modern browsers */ html>body .yourclass { } /* Modern browsers (not IE 7) */ html>/**/body .yourclass { } /* Opera 9.27 and below */ html:first-child .yourclass { } /* Safari */ html[xmlns*=""] body:last-child .yourclass { } /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */ body:nth-of-type(1) .yourclass { } /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */ body:first-of-type .yourclass { } /* Safari 3+, Chrome 1+ */ @media screen and (-webkit-min-device-pixel-ratio:0) { .yourclass { } } [/css]

Фиксированный подвал

Возможно, вы подумаете, что создать подвал, всегда приклеенный к низу экрана, это сложная задача. Однако, это совсем не сложно, если вам нужен простой подвал. Здесь нам придется использовать небольшой хак для IE6, но в остальном, это очень легко. [css] #footer { position:fixed; left:0px; bottom:0px; height:30px; width:100%; background:#999; } /* IE 6 */ * html #footer { position:absolute; top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px'); } [/css]

Поворот изображения

Вращение картинки может оказаться весьма полезным, особенно если его можно использовать вместо загрузки новой, предварительно развернутой картинки. Предположим, вы хотите использовать только одну картинку для стрелки, но у вас на странице их несколько, причем развернутых в разные направления. Вот решение вашей проблемы: [css] img.flip { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } [/css]

Clearfix

Не так давно, кто-то решил, что пришло время очищать поток от флоатов, не добавляя дополнительной разметки к документу. В результате этого решения, был создан класс, который можно применять к контейнеру, содержащему плавающие элементы, для их очистки. Это очень удобный, и широко распространенный способ на сегодняшний день. [css] .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } /* start commented backslash hack */ * html .clearfix { height: 1%; } .clearfix { display: block; } /* close commented backslash hack */ [/css]

Закругленные углы

С постепенным внедрением CSS3 в современных браузерах, создавать закругленные углы стало очень просто. К сожалению, пока нет поддержки CSS3 в IE, включая восьмую версию, но она будет добавлена в IE9. [css] .round{ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* future proofing */ -khtml-border-radius: 10px; /* for old Konqueror browsers */ } [/css]

Переопределение стилей

Меня продолжают удивлять люди, незнающие об !important в CSS, поскольку это очень мощный и удобный в использовании инструмент. Очень просто, любое правило с !important на конце, будет переопределять такое же правило, примененное к этому элементу, в любом месте CSS-файла или в линейных стилях. [css] p{ font-size:20px !important; } [/css]

Font face

Font-face не использовался широко до прошлого года, хотя он известен еще с тех времен, когда IE6 считался современным браузером. Сейчас это свойство неплохо поддерживается современными браузерами и предлагает отличный способ использования небезопасных шрифтов в своих проектах. Чтобы сэкономить время, можно воспользоваться специальным генератором Font Squirrel Font Face. [css] @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('☺'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype'); } [/css]

Центрирование сайта

Распространенный дизайнерский прием – горизонтальное центрирование сайта. Это реализуется очень просто. [css] .wrapper { width:960px; margin:0 auto; } [/css]

Min-height в IE

Этот пример исправляет простой, но досадный баг в IE, при установке минимальной высоты. Вообще, IE интерпретирует высоту в качестве минимальной высоты, так что, если в IE значение высоты не установлено в auto, следующий прием исправит этот баг. [css] .box { min-height:500px; height:auto !important; height:500px; } [/css]

Загрузка картинки

Этот эффект загрузки изображения, имитирует ajax-загрузку, отображая прелоудер, пока весь контент не будет загружен. Такое решение отлично подойдет для больших, медленно загружающихся картинок. [css] img { background: url(loader.gif) no−repeat 50% 50%; } [/css]

Вертикальное центрирование

Это небольшой фрагмент кода, позволит вам вертикально центрировать содержимое контейнера, без использования дополнительной разметки. Вам понадобится просто отобразить контейнер в качестве ячейки таблицы, а затем задать значение атрибуту vertical-align. [css] .container { min-height: 10em; display: table-cell; vertical-align: middle; } [/css]

Создаем врезы

Для начала, давайте разберемся, что же такое врез? Врезы обычно встречаются на новостных ресурсах и сайтах-журналах, в виде небольшого блока текста, расположенного внутри статьи, иногда в них размещаются мнения людей или цитаты. Вы будете рады узнать, что их очень легко сделать, и при правильном использовании, врезы могут значительно улучшить восприятие статьи пользователем. [css] .pullquote { width: 300px; float: right; margin: 5px; font-family: Georgia, "Times New Roman", Times, serif; font: italic bold #ff0000 ; } [/css]

Выделение текста

Не все знают о том, что существует возможность изменить цвет выделенного в браузере текста. Для этого потребуется всего два селектора. [css] ::selection { color: #000000; background-color: #FF0000; } ::-moz-selection { color: #000000; background: #FF0000; } [/css]

Добавляем разрыв страницы

Этот пример, снова направлен на улучшения пользовательского интерфейса, при выводе на печать. Например, при печати статьи, возможно будет полезно отделить комментарии от текста статьи, и перенести их на отдельную страницу. Если добавить класс .page-break к блоку комментариев, то все комментарии, при печати, будут выведены на отдельной странице. И вообще, этот класс можно использовать в любом месте вашего сайта. [css] .page-break{ page-break-before:always; } [/css] Перевод статьи “25 Incredibly Useful CSS Snippets for Developers”, автор Matthew Corner

Обзор CSS-свойства white-space

dreamhelg — Mon, 21 Jun 2010 10:00:31 +0000

Немногие, начинающие CSS-кодеры знакомы с таким полезным свойством как white-space. Вы вполне можете обходиться без этого свойства долгое время, но однажды, узнав о нем, вы найдете его очень удобным, и будете возвращаться к нему снова и снова.В сегодняшней статье, мы рассмотрим возможные значения свойства white-space, а также способы их применения.

Небольшое HTML-введение

При вставке текста в (X)HTML, независимо от того, сколько пробелов вы поставите между словами, при выводе страницы в окне браузера, все эти пробелы, по умолчанию, будут сокращены до одного. Это довольно удобно, поскольку мы легко можем форматировать текст в коде, с тем чтобы улучшить его читаемость, при этом, не создавая дополнительных пробелов и ненужных разрывов строк. Однако, если же вы хотите отобразить все пробелы и переносы строк – вам поможет тэг

. Весь текст внутри тэгов  (если он не заключен в дополнительные тэги), будет выведен точно также, как он отформатирован в коде. При этом, даже если в разметке нет ни одного разрыва строки, тэг  все равно добавит одну строчку, для создания дополнительно отступа. Следовательно, вы можете использовать вышеуказанный тэг для переопределения дефолтного подведения HTML.

Кроме того, в (X)HTML есть возможность использовать неразрывный пробел ( ), который используется для создания множественных пробелов. Ранее, для этих целей использовался, устаревший на сегодняшний день, тэг .

Свойство white-space – это CSS-аналог всех вышеперечисленных (X)HTML-методов управления пробелами.
Описание и возможные значения
С помощью набора возможных значений, свойство white-space, позволяет нам управлять поведением браузера, при обработке множественных пробелов.

Далее представлен список различных значений свойства white-space, вместе с визуальной демонстрацией их действия.
Значение: normal
Это дефолтное значение, при котором текст отображается обычным способом. Значение normal следует использовать только в одном, единственном случае – если вы уже назначили тексту другой способ обработки, и теперь хотите переопределить его для какого-то фрагмента.



Значение: nowrap

Это наиболее распространенное значение свойства white-space, поскольку оно полностью идентично значению normal, за исключением одной особенности. Значение nowrap полностью игнорирует переносы строк, независимо от того, были ли они проставлены в коде, или же появились при обработке текста, за счет ограниченного контейнера.

Элемент, которому назначено свойство white-space: nowrap, вместо того, чтобы переносить текст или другие строчные элементы на новую строку, расширит границы родительского блока, до тех пор, пока содержимое не уместится в одну строку. В дополнение, множественные пробелы будут сокращены до одного, также как при значение normal.


Значение: pre
Значение pre, полностью соответствует вашим ожиданиям –  вы получаете ровно то форматирование, которое видите в коде. Учитываются все пробелы и переносы строк, как если бы текст был заключен в тэги . Кроме того, если в коде, вы разместили текст без переносов, то границы родительского контейнера будут расширены, для размещения текста в одну строку.


Значение: pre-line
Это значение работает точно также как дефолтное значение normal, за исключением одной детали: при обработке будут учитываться переносы строк. Так что, множественные пробелы будут как обычно проигнорированы, но если в вашей разметке есть переносы строк, то все они появятся при выводе в браузере.

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

	Internet Explorer – начиная с версии 7
	Firefox – начиная с версии 3.0
	Opera  - начиная с версии 9.2


Значение: pre-wrap
Это значение практически тоже самое что и pre, за исключением того, что текст выводится в границах своего родительского элемента. Следовательно, текст не будет вытягиваться в одну строку для имитации форматирования в коде, но множественные пробелы и переносы строк будут учтены.

Поддержка браузерами:

	Internet Explorer – начиная с версии 7
	Firefox -  начиная с версии 3.0


Примеры использования
Наиболее часто, свойство white-space, используется для устранения нежелательных переносов строки. Взгляните на картинку:



В состав ссылки “read more” входит символ » (кавычка), перенесенный на другую строку в связи с нехваткой свободного пространства. Эту ситуацию легко можно исправить, применив свойство white-space в значении nowrap. Благодаря этому, ссылка будет целиком перенесена на новую строку как единый объект.

Этот пример еще раз иллюстрирует тот факт, что свойство white-space действует только на содержимое элемента, к которому оно применяется. Поэтому, несмотря на то, что ссылка была перенесена на другую строку, текст внутри ссылки не был разделен переносом строки.
Заключение
Чтобы исключить возможное появление проблем, при использовании свойства white-space, следует помнить главное: область его действия распространяется только на строчные элементы контейнера, к которому применяется свойство.

Как уже упоминалось выше, наиболее полезным из всех возможных значений свойства white-space – является значение nowrap. В связи с отсутствием в Internet Explorer полной поддержки значений pre-line и pre-wrap, они используются не так часто, хотя тоже могут принести немало пользы, если получат более широкую поддержку.

Перевод статьи “The CSS white-space Property Explained”, автор Louis Lazaris

Анимированный ландшафт с помощью CSS и JQuery

dreamhelg — Tue, 01 Jun 2010 14:00:31 +0000

С появлением JQuery, многие разработчики, не слишком хорошо знакомые с javascript, начали использовать jQuery, благодаря большому количеству различных эффектов, поддерживаемых этим фреймворком. На сегодняшний день, JQuery является одним из самых популярных ява-скрипт-фреймворков. Такая его популярность объясняется простотой использования и наличием множества замечательных эффектов, для применения которых, не требуется углубленных знаний ява-скрипт. В сегодняшней статье, мы создадим анимированную картинку, с помощью CSS и JQuery.

Шаг 1. Подготовка файлов

Для начала, нам необходимо подготовить все файлы, необходимые для этого примера, затем создать один HTML-файл, один CSS-файл и папку, которая будет содержать все наши картинки. Прежде, чем мы начнем, посмотрите демо.

Шаг 2. HTML-страница

Теперь, создадим HTML-разметку, которая будет содержать контейнер с фиксированной высотой и шириной, а внутри него будет еще один блок, содержащий все элементы нашей страницы. В результате, у нас получилась вот такая разметка: [html]

[/html] Полная версия: [html] Animated Landscape Using CSS and jQuery

[/html]

Шаг 2. CSS-стили

Далее добавим немного CSS-стилей, без которых просто нельзя обойтись. Здесь следует обратить внимание на два момента – это свойство overflow: hidden, которое обязательно должно быть установлено для блока #inner, и абсолютное позиционирование, для всех, двигающихся картинок. На данном этапе, мы вынесем наши движущиеся изображения (облака и лодку) за пределы контейнера, путем установки отрицательных полей, с тем чтобы в дальнейшем, с помощью JQuery, получить красивый эффект. Далее CSS-код, необходимый для нашего примера: [css] #wrapper { width:800px; height:600px; /* main background image with sky, sun, river and ground */ background-image:url(images/Untitled-3.jpg); background-repeat:no-repeat; margin-top:10px; margin-left:auto; margin-right:auto; border: 10px solid #666; } #inner { position:relative; overflow:hidden; width:800px; height:600px; margin:0px; } #cloudone { position:absolute; margin-top:2px; margin-left:-200px; filter:alpha(opacity=80); /* CSS3 standard */ opacity:0.8; } #cloudtwo { position:absolute; margin-top:80px; margin-left:-300px; filter:alpha(opacity=60); /* CSS3 standard */ opacity:0.6; } #cloudthree { position:absolute; margin-top:60px; margin-left:-600px; filter:alpha(opacity=70); /* CSS3 standard */ opacity:0.7; } #boat { margin-top:360px; position:absolute; margin-left:800px; } [/css]

Шаг 4. jQuery

Прежде всего, нам необходимо подключить jQuery, к нашей странице: [html] [/html] Здесь, мы дважды будем использовать функцию .animate, для анимирования облаков и лодки. Кроме того, мы создадим специальную функцию для того, чтобы облака и лодка двигались по кругу. Смотрите пример ниже. [javascript] function cloudone(){ $("#cloudone").animate({left:"+=1200px"},10000).animate({left:"-200px"}, 0) setTimeout("cloudone()",10000); } [/javascript] В приведенном коде происходит следующее: с помощью первой функции .animate, мы двигаем объект #cloudone вправо, на 1200 пикселей, причем объект будет двигаться со скользящим эффектом, в течении 10 секунд. Далее, вторая функция .animate возвращает объект на исходную позицию, с интервалом 0 секунд. Для того, чтобы снова запустить анимацию, нам необходимо суммировать временные интервалы обоих функций .animate, и с помощью функции setTimeout, мы сможем снова запустить цикл вращения картинки. Таким образом, можно анимировать все картинки. Далее приведен код, для анимации остальных изображений: [javascript] function cloudone(){ $("#cloudone").animate({left:"+=1200px"},10000).animate({left:"-200px"}, 0) setTimeout("cloudone()",10000); } function cloudtwo(){ $("#cloudtwo").animate({left:"+=1500px"},15000).animate({left:"-300px"}, 0) setTimeout("cloudtwo()",15000); } function cloudthree(){ $("#cloudthree").animate({left:"+=2000px"},20000).animate({left:"-600px"}, 0) setTimeout("cloudthree()",20000); } function boat(){ //This time we need to move boat to left side so we put the margin to 1000px $("#boat").animate({right:"+=1000px"},20000).animate({right:"-200px"}, 0) setTimeout("boat()",20000); } [/javascript] Теперь, нам нужно запустить всю нашу анимацию (cloudone(), cloudtwo(), cloudthree), сразу после того, как загрузится страница. Это делается следующим образом: [javascript] $(document).ready(function() { setTimeout("cloudone()",10); setTimeout("cloudtwo()",10); setTimeout("cloudthree()",10); setTimeout("boat()",10); }); [/javascript] Весь код, будет выглядеть вот так. [javascript] $(document).ready(function() { setTimeout("cloudone()",10); setTimeout("cloudtwo()",10); setTimeout("cloudthree()",10); setTimeout("boat()",10); }); function cloudone(){ $("#cloudone").animate({left:"+=1200px"},10000).animate({left:"-200px"}, 0) setTimeout("cloudone()",10000); } function cloudtwo(){ $("#cloudtwo").animate({left:"+=1500px"},15000).animate({left:"-300px"}, 0) setTimeout("cloudtwo()",15000); } function cloudthree(){ $("#cloudthree").animate({left:"+=2000px"},20000).animate({left:"-600px"}, 0) setTimeout("cloudthree()",20000); } function boat(){ $("#boat").animate({right:"+=1000px"},20000).animate({right:"-200px"}, 0) setTimeout("boat()",20000); } [/javascript] Перевод статьи “Animated Landscape Using CSS and jQuery”, автор Vikas Ghodke

Что такое inline-block?

dreamhelg — Tue, 27 Apr 2010 06:48:27 +0000

Если вы работаете с CSS не первый день, то наверняка знакомы со значением inline-block, свойства display. Наиболее часто эту связку используют для устранения проблем в IE6. Попробую вкратце объяснить о чем идет речь. Если вы назначаете float элементу и одновременно задаете margin с той же стороны, то в IE6 margin (странным образом) удвоится. Проблему можно исправить, применив хак специально для IE6, в котором можно указать значение margin в половину меньше от оригинала, или же вы можете назначить элементу свойство display в значение inline-block. Это разрешит проблему в большинстве, если не во всех случаях. Однако, решение проблемы с двойными полями в IE6, далеко не единственное применение значения inline-block, оно может принести гораздо больше пользы, если хорошо его изучить.

Определение

Далее представлены несколько описаний для значения inline-block, взятые из разных источников: CSS-справочник Sitepoint

Значение inline-block генерирует блочный элемент, с поведением строчного элемента

QuirksMode

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

Роберт Нэйман:

В основном, это способ сделать элементы строчными, при этом сохранив его блочные возможности, такие как указание ширины и высоты, верхних и нижних отступов, паддингов и др.

Я думаю определение Роберта Нэймана самое лучшее, поскольку сразу объясняет практический смысл значения.

Демонстрация

Нижеприведенное изображение демонстрирует значение inline-block в действии:

Как его можно использовать?

Есть несколько ситуаций, с которыми вам поможет справиться inline-block:

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

То, что следует запомнить

При использовании значения inline-block, следует помнить о некоторых факторах и недостатках. Элемент, с назначенным inline-block, является чувствительным к пробелам. То есть, если вы применяете это значение к маркированному списку (например для создания навигации), то каждый элемент списка будет иметь дополнительное пустое пространство на стыке двух элементов. Для того, чтобы этого избежать, необходимо удалить любые пробелы, разделяющие элементы

, в HTML-разметке. Следовательно, ваш HTML-код будет выглядеть следующим образом: [html]

Item One
Item Two
Item Three
Item Four
Item Five

[/html] Или еще хуже: [html]

Item One
Item Two
Item Three
Item Four
Item Five

[/html] Есть и другое решение этой проблемы – можно назначить font-size: 0, для элемента

. Но это не очень хорошее решение, в данном случае, лучше отказаться от использования inline-block. Кроме того, если у вас на странице предполагается наличие нескольких элементов, с разной высотой и значением inline-block, вам следует указать им дополнительное свойство vertical-align: top, для того, чтобы предотвратить расположение блоков в шахматном порядке. На этой странице можно ознакомиться с различными примерами расстановки элементов, с назначенным значением inline-block. Ну и наконец, во время многочисленных экспериментов, выяснилось, что inline-block, ведет себя не вполне обычно, когда он применяется к элементу внутри текста, заключенного в элемент параграфа.
Поддержка браузерами
Думаю вы не удивитесь, узнав, что inline-block работает во всех браузерах, кроме IE6 и IE7. Но имитировать работу этого значения не так уж сложно. Для того, чтобы применить к элементу значение inline-block в IE6 и IE7, нужно всего лишь установить свойство display в значение inline, а затем назначить элементу layout. Главное, убедитесь, что значение inline, появляется после значения inline-block в CSS-файле, и не забудьте спрятать inline от других браузеров. Перевод статьи “What is Inline-Block?”, автор Louis Lazaris

Создание навигации “волшебная линия” с помощью jQuery

dreamhelg — Sun, 14 Feb 2010 18:41:17 +0000

Такой “скользящий” стиль навигации существует довольно давно, мне всего лишь было нужно изменить его немного под собственные нужды, поскольку появилась такая возможность. Это оказалось очень легко. Можете взглянуть на два примера такой навигации на демонстрационной странице.

Идея

Идея состоит в наличие какой-либо подсветки (фонового изображения или подчеркивания), следующей за мышью, при наведении к какому-либо пункту меню. Это реализуется с помощью анимации jQuery. Следовательно, “волшебную линию” можно добавить только с помощью JavaScript. После того, как линия будет добавлена и стилизована, при движении мыши к любому пункту меню, ее ширина и левое позиционирование будет изменятся с анимационным эффектом.

HTML

Здесь обычный маркированный список. Ему назначен класс “group”, так как в примере будет использовано два горизонтальных меню. ID используется для указания элемента JavaScript. [html]

[/html] Обратите внимание, что список заключен внутри блока .nav-wrap. Это сделано в связи с особенностями стилизации. Панель, на которой расположена навигация, растянута на всю ширину экрана, но сама навигация центрирована внутри этой панели.

CSS

Здесь мы располагаем список горизонтально, и позиционируем волшебную линию абсолютно, поверх меню. Все остальное – просто наведение красоты. [css] .nav-wrap { margin: 50px auto; background-color: rgba(0,0,0,0.6); border-top: 2px solid white; border-bottom: 2px solid white; } #example-one { margin: 0 auto; list-style: none; position: relative; width: 960px; } #example-one li { display: inline-block; } #example-one li a { color: #bbb; font-size: 14px; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; text-transform: uppercase; } #example-one li a:hover { color: white; } #magic-line { position: absolute; bottom: -2px; left: 0; width: 100px; height: 2px; background: #fe4902; } [/css]

JQuery JavaScript

Когда DOM загружен…
Устанавливаем переменные, включающие текущее левое смещение навигации
Добавляем волшебную линию к навигации
Назначаем позиционирование и ширину волшебной линии равной значению текущего элемента списка
Также назначаем оригинальную ширину и позиционирование в качестве данных, с тем чтобы их можно было использовать для обратной анимации
При наведении мыши, подсчитываем новую ширину и левое позиционирование, и включаем анимацию для изменения этих значений
При отведении мыши от пункта меню, включаем анимацию возвращения линии на исходную позицию.

[javascript] $(function() { var $el, leftPos, newWidth, $mainNav = $("#example-one"); $mainNav.append("

"); var $magicLine = $("#magic-line"); $magicLine .width($(".current_page_item").width()) .css("left", $(".current_page_item a").position().left) .data("origLeft", $magicLine.position().left) .data("origWidth", $magicLine.width()); $("#example-one li a").hover(function() { $el = $(this); leftPos = $el.position().left; newWidth = $el.parent().width(); $magicLine.stop().animate({ left: leftPos, width: newWidth }); }, function() { $magicLine.stop().animate({ left: $magicLine.data("origLeft"), width: $magicLine.data("origWidth") }); }); }); [/javascript]

Альтернативная версия

На демонстрационной странице, также имеется альтернативная версия “волшебной” линии, использующая фон вместо линии, и анимирующей цвет вместе с шириной и левым позиционированием. В основе все то же самое, отличается разве что CSS и JavaScript, который получает цвет для нового элемента списка, из HTML-атрибута rel. Для анимации цвета, потребуется специальный плагин. Скачать архив с примером. Перевод статьи “jQuery MagicLine Navigation”, автор Chris Coyier Примечение: После небольшой доработки, скрипт нормально работает в опере и IE7-8, насчет IE6 не знаю, не тестировала.