CSS3 для начинающих. Часть 1. Введение в CSS3. Основные понятия

Have a question? Ask in chat with AI!

CSS3 для начинающихСегодня первый пост из серии CSS3 для начинающих. Пост носит ознакомительный характер и призван познакомит новичков с самой идеей разработки и применения CSS3. Будут даны основные понятия, показаны некоторые примеры реализации отдельных свойств.

[adsense]

Содержание:

1. Roadmap
2. Селекторы
3. Псевдо-классы
4. RGBA и прозрачность
5. Множественные фоны
6. Word wrap
7. Text shadow
8. Интервью с Эриком Мейером

 

Roadmap

Для начала взглянем на так называемый roadmap — это таблица, в которой задано направление развития стандарта. По сути это и есть то общество людей, которые решили создать спецификацию CSS3. Как видно из таблицы многие вещи начинались еще в 1998 году. Говорить много о данном документе смысла не имеет, надо просто знать, что именно он послужил тем базисом, благодаря которому и появился стандарт CSS3.

CSS3 roadmap

Перейдем к основным понятиям применяемым при работе с CSS3.

Сразу определим один момент: на данный момент ни один браузер полностью не поддерживает все нововведения CSS3. Некоторые браузеры имеют набор собственных свойств. Например: браузер Safari, который использует конструкции, которые начинаются с -WebKit- или Gecko-браузеры, например, Firefox, конструкции которых начинаются с -moz-. Ярким примером служит -webkit-border-radius для webkit браузеров (Safari), или -moz-border-radius для браузера Mozilla.
Это зачастую заставляет разработчиков использовать специальные конструкции для каждого отдельного браузера, что в итоге приводит к тяжелой читаемости CSS файлов и увеличению их размера.

—>В начало

 

CSS селекторы.

Селекторы достаточный сильный инструмент. Они позволяют нам обращаться к HTML-элементам разметки. Таким образом мы можем отказаться от использования ненужных ID классов или JavaScript. Главная задача селекторов — сократить количество ID классов и сделать верстку более легкой для поддержания веб-мастером.

В CSS3 Появилось 3 новых аттрибутивных селектора.

  • [att^=»value»]
    Выбирает элементы по атрибуту, который начинается с заданного значения.
  • [att$=»value»]
    Выбирает элементы по атрибуту, который заканчивается заданным значением.
  • [att*=»value»]
    Выбирает элементы по атрибуту, в котором содержится заданное значение.

Пример использования:

a[title$="rusdigi"] {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 140px;
    height: 140px;
    text-indent: -9999px;
}

В данном случае атрибутивный селектор используется для целевых ссылок, которые имеют атрибут title, заканчивающийся словами «rusdigi». Это означает, что CSS свойства заданные таким образом будут использоваться для всех ссылок, title которых будет заканчиваться словом «rusdigi».

На данный момент почти все браузеры поддерживают данные селекторы, за исключением Internet Explorer 6.

—>В начало

 

Комбинаторы.

В CSS3 добавлен один комбинатор — это главный селектор одноуровневых элементов. Служит он для выбора всех элементов, имеющих одного родителя.
Рассмотрим пример:

< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

 

К этому параграфу стиль не применяется.

 

Первый заголовок

 

Второй заголовок

К этому параграфу стиль применяется.

К объекту div стиль не применяется.

К этому параграфу стиль применяется.

В коде, представленном выше, используется комбинатор (~). Задается стиль для всех объектов P, которые находятся после объекта H1 в иерархии документа.

На данный момент комбинатор поддерживают все браузеры, кроме Internet Explorer 6.

—>В начало

 

Псевдо-классы.

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

В CSS3 набор псевдо-классов значительно расширен. Но многие новые псевдо-классы так и не поддерживаются Internet Explorer’ом, включая и девятую версию.

Приведем наиболее интересные псевдо-классы, которые появились в CSS3.

  • :nth-child(n)

Позволяет отобрать элементы, на основе их позиции в родительском списке дочерних элементов. Можно использовать номер элемента, выражение или ключевые слова odd и even (для таблиц в стиле зебры). Например, если вы хотите получить группу из трех элементов, после четвертого, то можно использовать такую конструкцию:

:nth-child(3n+4) { background-color: #ccc; }
  • :nth-last-child(n)

Работает по тому же принципу, что и предыдущий элемент, только выбирает последний дочерний элемент родителя. Например для получения последних двух параграфов в div, можно использовать следующий селектор:

div p:nth-last-child(-n+2)
  • :last-child

Получает последний дочерний элемент родителя, является эквивалентом:

:nth-last-child(1)
  • :checked

Получает отмеченные элементы, например чекбоксы.

  • :empty

Получает элементы, которые не имеют дочерних элементов, или пустые.

  • :not(s)

Получает все элементы, не содержащие объявленных условиий. Например, если нам нужно назначить черный цвет всем параграфам, не имеющим класса «lead», мы должны написать так:

p:not([class*="lead"]) { color: black; }
—>В начало

 

RGBA и прозрачность.

RGBA позволяет назначить не только цвет, но и прозрачность. Многие браузеры до сих пор не поддерживают этого, поэтому имеет смысл до назначения RGBA цвета назначить другой цвет, в обычном RGB формате, без прозрачности — для совместимости со старыми браузерами.

#networks li a:hover,
#networks li a:focus {
    background: rgba(164, 173, 183, .15);
 }

Пример использования кода приведенного выше можно посмотреть на сайте http://timvandamme.com/#networks.

При настройке RGBA цвета сначала указываются значения цветов: красный, зеленый, синий, либо целым числом от 0 до 255, либо в процентах. Значение прозрачности должно быть в пределах от 0.0 до 1.0. Например, 0.5 для прозрачности 50%.

Главное отличие RGBA от opacity в том, что RGBA применяется только к конкретному элементу, без наследования дочерними элементами.

Поддержка RGBA и opacity реализована на данный момент во всех браузерах, кроме IE, который вовсе не поддерживает эти конструкции.

—>В начало

 

Многоколоночная раскладка.

Новый селектор введенный в CSS3 позволит создать многоколоночный текст без использования нескольких div’ов. Браузер будет отображать текст в несколько колонок, автоматически интерпретируя код.

К примеру, такой код:

.index #content div {
    -webkit-column-count : 4;
    -webkit-column-gap : 20px;
    -moz-column-count : 4;
    -moz-column-gap : 20px;
}

выведет текст в 4 колонки, расстояние между колонками будет 20 пикселей.

Есть еще один параметр, column-width, который задает ширину колонки. Если вы хотите добавить вертикальный разделитель между колонками — используйте column-rule — синтаксис такой же как и border:

div {
    column-rule: 1px solid #00000;
}

Браузеры, которые не поддерживают эти свойства вернут текст в обычном формате.

—>В начало

 

Множественные фоны:

В CSS3 появлась возможность задать множественные фоны используя свойства background-image, background-repeat, background-size, background-position, background-origin и background-clip.

Обычно для задания множественного фона используют короткий код:

div {
    background: url(example.jpg) top left no-repeat,
        url(example2.jpg) bottom left no-repeat,
        url(example3.jpg) center center repeat-y;
}

Будьте осторожны используя данное свойство CSS3, т.к. далеко не многие браузеры его поддерживают, а отсутствие фона чаще всего может сильно испортить общий дизайн.

—>В начало

 

Word Wrap.

Word Wrap позволяет переносить длинные слова, если они не помещаются в заданную область. У него три возможных значения: normal, break-word и inherit.

  • normal — сообщает о том, что строки не переносятся или переносятся только в тех местах где явно задан перенос, например тэгом br.
  • break-word — перенос строк добавляется автоматически.
  • inherit — наследует значение родителя.
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  word-wrap

 


Cуществительное

высокопревосходительство

Одушевленное существительное

одиннадцатиклассница

Химическое вещество

метоксихлордиэтиламинометилбутиламиноакридин

 

В данном примере у длинных слов произойдет перенос нескольких букв на следующую строку.

На данный момент поддерживается всеми браузерами.

—>В начало

 

Text Shadow.

Text Shadow присутствовал в CSS2, но не приобрел широко использования, так как не поддерживался многими браузерами. На данный момент он имеет поддержку всеми браузерами. Позволяет выделить текст, сделать его объемным без использования изображений.

p {
    text-shadow: rgba(0,0,0,.8) 0 1px 0;
}

В коде приведенном выше, сначала задан цвет тени, с использованием RGBA, далее положение x (вправо), положение y (вниз) и радиус размытия.

Так же имеется возможность использовать множественные тени. Их нужно просто разделить запятой:

p {
    text-shadow: red 4px 4px 2px,
        yellow -4px -4px 2px,
        green -4px 4px 2px;
}

Тени поддерживаются во всех браузерах, кроме Internet Explorer.

—>В начало

 

Интервью с Эриком Мейером (Eric Meyer)

Ну а в конце статьи перевод интервью с Эриком Мейером (Eric Meyer). Он признанный эксперт в области CSS и HTML, автор нескольких книг по CSS, совладелец An Event Apart, владелец Complex Spiral Consulting.

Eric Meyer

Эрик Мейер был так же приглашенным экспертом в течении семи лет группы CSS Working Group — это те люди, которые отвечают за сохранение и развитие стандарта CSS.

Скорее всего, именно он будет тем человеком, у которого вы захотите узнать о CSS3.

В этом интервью Эрик Мейер ответит на шесть вопросов, главной темой которых будет CSS3.

Вопрос: Что по вашему является самым интересным нововведением в CSS3?
Ответ: Многие скажут, что я зациклен на коде, но честно говоря — специальные селекторы. Конечно, конечно, прозрачность, закругленные углы, несколько фоновых изображений и красивые штучки бла-бла-бла. Все это очень хорошо. Но возможность описания Web 2.0 дизайнов с помощью CSS3 меркнет на фоне того, что можно выбрать каждую третью строку таблицы начиная с пятой. Или возможность выбрать первый параграф внутри другого элемента, который может не быть первым дочерним объектом. Или выбрать последний пункт в списке.
Ну и вебшрифты это конечно круто. Я думаю вы согласитесь.

Вопрос: Давайте обсудим модуляризацию CSS3 спецификации. Спецификация CSS3 является модульной — как это сказывается на сроках и прогрессе в принятии спецификации CSS3?
Ответ: Это действительно говорит о том, что нет такого понятия как CSS3, например как было с CSS2. Нет большой, единой спецификации под названием CSS3. Мы имеем лишь кучу параллельных предложений, некоторые из которых продвигаются быстрее чем другие.
Я честно не знаю, что предпринимается для принятия стандарта. У нас была огромная длинная пауза в развитии CSS, которую я называю «IEnterregnum» (интеграция с Internet Explorer). И только в последнее время мы видим, что браузеры стали полностью поддерживать CSS2.

С другой стороны пауза была полезна тем, что производители браузеров смогли сосредоточится на исправлении ошибок и согласовании дальнейшего развития, а не убегать в разных направлениях. По-настоящему я не могу точно оценить степень принятия стандарта CSS3. Я думаю, что раскол был вызван общим спадом развития спецификации. Не то чтобы я собираюсь что-то вам доказать, просто я так чувствую. Это и послужило причиной почему я оставил рабочую группу по спецификации CSS3 и почему я принимаю участие только в некоторых предложениях от W3C.

Вопрос: Просто взглянув на технические спецификации новых CSS селекторов, кажется, что многие сложные выборки объектов и таргетинга в DOM, будут реализованы с помощью CSS, а не JavaScript.
Например, в рамках предлагаемой спецификации, вы можете выбрать первый элемент некоего класса и задать ему другие стили или выполнить зебра-разметку таблиц без использования JavaScript.
Как по вашему JavaScript влияет на CSS (или наоборот) и как в будущем они будут взаимодействовать — будут более разнесены либо наоборот — будут сильно смешаны.

Ответ: Из того, что я видел, мне кажется большее влияние было оказано на JavaScript со стороны CSS, на примере jQuery. Хотя последнее время мы замечаем влияние JS на CSS, например, конструкция «:contains» сначала была реализована в JS, теперь реализуется в CSS рабочей группой.
Я думаю, что гораздо большее влияние на CSS со стороны JS мы увидим благодаря людям, которые используют JavaScript для «тихого» (silent) добавления нововведений CSS в браузеры. Я писал об этом недавно и думаю что это лишь вопрос времени. Мы уже видим как использование JS превращает браузеры в «говорящие» и тем самым ломают барьеры доступности. Добавление поддержки HTML5 и CSS3 элементов посредствам JS уже не за горами.

Вопрос: какие ресурсы посоветуете для того, чтобы узнать больше о CSS3?
Ответ: http://css3.info/ — это хорошее начало. Я не могу вам посоветовать тонну ресурсов, наверное потому, что CSS3 не так широко поддерживается.

Вопрос: CSS становится все больше и комплексней. По вашему должны ли быть подверсии CSS3, например CSS3.1 CSS3.2, каждый раз когда большие модули будут закончены, в отличии от CSS1 и CSS2?
Ответ: Да, я думаю, что это было бы хорошей идеей. Но я не жду, что это произойдет, так как это не очень практично. Вам каждый раз приходилось бы брать те модули, которые являются стабильными, плюс брать как минимум 3 модуля, которые в перспективе станут стабильными. Я думаю шансы на это достаточно низкие.

Вопрос: Что по вашему мы (как разработчики и дизайнеры) смогли бы сделать дабы помочь развитию CSS3 и его скорейшему принятию как стандарта?
Ответ: Создавайте посты на блогах, в твиттере, на форумах о том что выхотите использовать, но сейчас не можете. Найдите способ сымитировать это и напишите об этом.
Отправляйте запросы разработчикам браузеров для принятия каких либо новых вещей. В файле ошибок вы наверняка найдете что-то связанное с CSS3, например специальные селекторы.
All that stuff is how we vote in our field, to the extent that we have a vote.
(Фразу не смог перевести — знаний не хватает на такие обороты ;))

—>В начало

CSS для начинающих.
На этом первую вводную часть заканчиваю. Готов выслушать любую критику, советы и пожелания. Подписывайтесь на RSS-ленту и фоловте меня в твиттере дабы узнать о выходе новых статей по CSS3 первыми.

Каким интернетом вы пользуетесь? ADSL, выделенная линия, оптоволокно? А тем временем активно развивается технология Wimax 4G. Эту технология продвигает компания Yota, которой первой удалось внедрить на территории Москвы и Санкт-Петербурга сеть Wimax 4G. Вы можете взглянуть на Wimax 4G Yota и выбрать оптимальные йота тарифы для себя. Стоит упомянуть о том, что технология Wimax 4G предоставляет доступ к беспроводному интернету на всей территории покрытия и обеспечивает скорость передачи данных до 10 Мбит/сек. Возьмите интернет с собой!


10 комментариев для “0

  1. Уведомление: CSS3 для начинающих. Часть 1. Введение в CSS3. Основные понятия. | Grabr
  2. Уведомление: CSS3 для начинающих | RusDigi.org Блог Гилязетдинова Руслана
  3. Уведомление: Новая мотивация для усердной работы. Заработок в сети Интернет. MFA, SEO, SMO, SMM.
  4. Уведомление: Маленький редизайн блога « RusDigi – Блог о блоге
  5. Уведомление: Маленький редизайн блога. | RusDigi.org Блог Гилязетдинова Руслана
  6. Уведомление: Градиенты CSS | RusDigi.org Блог Гилязетдинова Руслана
  7. Уведомление: Работаем с эффектом при наведении (hover) | RusDigi.org Блог Гилязетдинова Руслана
  8. Уведомление: 10 приемов CSS3, которые можно и нужно использовать | RusDigi.org Блог Гилязетдинова Руслана
  9. Ну до каких же пор opacity будут переводить как «прозрачность».
    Откройте же, наконец, словарь – это «непрозрачность».
    И значение 1 означает полностью непрозрачный цвет.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Предыдущая запись ВКонтакте: отчет за март
Следующая запись Видеосервис «В Контакте» будет работать по принципу торрентов