Почему вообще рождаются новые спецификации? Класс в качестве селектора

Моя предыдущая статья «Чего я ждал от HTML5 и CSS3» затронула достаточно щекотливую тему, но не ответила на вполне резонный вопрос, а что я предлагаю взамен. Поэтому мне в голову пришла идея сделать общественную спецификацию CSS, которая будет отражать современные тенденции развития web-технологий и требования к будущему функционалу. Я приглашаю всех поучаствовать в разработке нашей собственной версии спецификации. Если популярность ее будет достаточно высокой, ее могут принять все разработчики браузеров, а от этого выиграют и web-разработчики, и пользователи.

Первый механизм, который я представляю вашему вниманию называется «направляющие»

Направляющие

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

Определение направляющих

Направляющие являются блочными элементами нулевой высоты или ширины, в зависимости от типа: горизонтальные или вертикальные. Нельзя управлять ни шириной, ни высотой направляющих, они занимают всегда 100% от ширины или высоты элемента. Направляющие могут иметь margin, padding, border, background, что позволит создавать определенные стилистические приемы.

Описание направляющих

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

$rule1 { /* rule preferences */ }
$rule2 { ... }

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

rule-type

Существуют два типа направляющих: горизонтальные (horizontal) и вертикальные (vertical) . По умолчанию направляющие имеют тип horizontal

Значения свойства: horizontal || vertical
Значение по умолчанию: horizontal

rule-repeat

Это свойство управляет повторением направляющих. По умолчанию для направляющих отключен механизм повторения.

Значения свойства: none || repeat
Значение по умолчанию: none

Механизм повторения необходим для того, чтобы автоматически формировать несколько направляющих с одинаковыми свойствами и идентификацией. Свойство repeat применяется только тогда, когда для горизонтального типа направляющих указан margin-top или margin-bottom или padding-top или padding-bottom , а для вертикальных направляющих, соответственно margin-left или margin-right или padding-left или padding-right .

Количество горизонтальных направляющих рассчитывается по формуле
kh = containerHeight / (ruleMarginTop + rulePaddingTop + rulePaddingBottom + ruleMarginBottom)

Количество вертикальных направляющих рассчитывается по формуле
kv = containerWidth / (ruleMarginLeft + rulePaddingLeft + rulePaddingRight + ruleMarginRight)

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

$myRule {
rule-type: vertical;
rule-repeat: repeat;
margin-right: 10px;
margin-left: 20px;
padding-right: 50px;
}

rule

Для использования направляющих в некотором блоке используется директива rule

Значения свойства: $ruleID[ $ruleID]
Значение по умолчанию: none

Можно использовать одну или две переменные с направляющими разного типа. При использовании двух одинаковых типов направляющих данная директива не применяется.

Использование направляющих

После определения направляющих необходим механизм управления блоками. Для этого необходимо еще одно свойство snap-to , которое будет рассказывать элементам внутри блока с направляющими, как они должны взаимодействовать между собой.

snap-to

Значения свойства: || || none
Значение по умолчанию: none

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

Прилипание к краю аналогично поведению элемента с position: relative.

Я специально опущу более детальное поведение, так как это займет не одну страницу текста, и перейду к примерам

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

Типичная задача - галлерея. Я знаю, что можно использовать inline-block, но добавив еще одну горизонтальную направляющую можно сделать аналог таблицы, что не получится сделать обычными средствами.

$rule1 { margin-top: 200px; rule-repeat: repeat; }
#gallery { rule: $rule1; }
#gallery div { snap-to: bottom }

…

Форма, у которой лейблы выровнены с формами по направляющей

$rule1 { margin-left; 150px; rule-type: vertical; }
#form { rule: $rule1; }
#form label { snap-to: right }
#form span { snap-to: left }

Label1

Label2

Label3

Трехколоночный макет можно сделать вот так:

$rule1 { margin-bottom; 100%; rule-repeat: repeat; }
#wrapper { rule: $rule1; }
#wrapper > div { snap-to: top($rule1) bottom($rule1) }

Заключение

У направляющих есть множество «белых пятен» в поведении, которые нужно исследовать, моделировать и изучать. Особенно это касается взаимоотношений прилипших элементов и обычного потока, прилипших и плавающих элементов, как должны себя вести элементы, если они прилипают к левому и нижнему краю сетки направляющих и так далее. Однако одно очевидно, что данный механизм не сильно изменяет уже действующие правила CSS2.1, а только дополняет их. Реализация направляющих, по моему мнению, гораздо более проста для разработчиков браузеров, чем реализация тех же темплейтов отображения в CSS3, а возможностей и динамики в моем способе больше.

Жду вашей критики, замечаний, дополнений.

Классы применяют, когда необходимо определить стиль для одного или нескольких элементов веб-страницы. Элементы при этом могут быть разными, но иметь частично или полностью похожие элементы оформления. В коде HTML имя класса определяется через атрибут class .

Синтаксис

E.<Имя класса> { Описание правил стиля } .<Имя класса> { Описание правил стиля }

Здесь E — обозначает любой элемент. Имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) и подчёркивания (_). Использование русских букв в именах классов недопустимо. Чтобы указать в коде HTML, что элемент используется с определённым классом, к тегу добавляется атрибут class .

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

×

Пример

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

Для исключения засветки экрана дисплея световыми потоками оконные проемы снабжены светорассеивающими шторами.

Результат примера показан на рис. 1.

Рис. 1. Вид текста, оформленного с помощью класса

Примечание

Internet Explorer до версии 7 понимает классы, имена которых начинаются с дефиса (-) или символа подчёркивания (_). Остальные браузеры таки имена игнорируют.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации ) - первая черновая версия стандарта.

×

Не читайте спецификации

Зайдите в комнату, наполненную веб-дизайнерами, и спросите их: «Кто любит читать спецификации?» Возможно, вы увидите одну поднятую руку. (Если этот человек – вы, то я горжусь вами и свободным временем, которое у вас есть, по всей видимости.) Пусть они и представляют собой важный справочник, я определенно не получаю удовольствия от чтения спецификаций целиком и не рекомендую заниматься этим, чтобы полностью постигнуть CSS3.

Хорошая новость заключается в том, что CSS3 – это на самом деле набор модулей, которые, согласно задумке, должны внедряться изолированно и независимо друг от друга. Это очень хорошо. Такой подход – дробление спецификации – позволяет одним фрагментам спецификации двигаться быстрее, чем другим, и подталкивает производителей браузеров к тому, чтобы они внедряли хорошо проработанные фрагменты до того, как спецификация CSS3 будет считаться целиком законченной.

W3C (World Wide Web Consortium. Прим. перев. ) объясняет модульный подход так:

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

Преимущество для нас, веб-дизайнеров, в том, что одновременно с экспериментированием и ускоренным циклом релизов приходит возможность использовать многие свойства CSS3, не дожидаясь, пока они получат статус кандидат в рекомендации (Candidate Recommendation. Прим. перев. ) – возможно, это произойдет годы спустя.

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

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

Из книги Журнал «Компьютерра» № 36 от 3 октября 2006 года автора Журнал «Компьютерра»

ЧИТАЙТЕ В СЛЕДУЮЩЕМ НОМЕРЕ: ЧИТАЙТЕ В СЛЕДУЮЩЕМ НОМЕРЕ Репортаж с крупнейшего IT-события осени: новейшие процессоры Intel и беспроводной USB, терабайтные суперкомпьютеры-на-чипе и забота о пожилых людях по-новому, PCI Epress 2.0, лазеры, топливные элементы и даже программируемая

Из книги Информационная технология ПРОЦЕСС СОЗДАНИЯ ДОКУМЕНТАЦИИ ПОЛЬЗОВАТЕЛЯ ПРОГРАММНОГО СРЕДСТВА автора Автор неизвестен

Из книги Справочное руководство по C++ автора Страустрап Бьярн

R.7.1 Спецификации В описании можно использовать следующие спецификации:спецификация-описания: спецификация-класса-памяти спецификация-типа спецификация-fct спецификация-шаблона-типа friend typedefспецификации-описания: спецификации-описания opt спецификация-описанияСамая

Из книги Журнал PC Magazine/RE №08/2009 автора Журнал «PC Magazine»

R.7.1.2 Спецификации функций Некоторые спецификации можно использовать только в описании функций.спецификация-fct: inline virtualСпецификация inline подсказывает транслятору, что необходимо произвести подстановку тела функции вместо обычной реализации вызова функции. Подсказка

Из книги Журнал PC Magazine/RE №10/2009 автора Журнал «PC Magazine»

R.7.4 Спецификации связи С помощью спецификации-связи можно связать (§R.3.3) фрагменты программ на C++ и на другом языке:спецификация-связи: extern строка-литерал { список-описаний opt } extern строка-литерал описаниесписок-описаний: описание список-описаний описаниеТребуемое

автора Реймонд Эрик Стивен

Из книги Искусство программирования для Unix автора Реймонд Эрик Стивен

Читайте в следующих номерах Гид покупателя: Выбираем коммуникаторСводный тест: Тестирование цветных лазерных МФУСделай сам: Строим собственную ферму рендерингаОперационные системы: Новые средства управления энергопотреблением в Windows 7PC Magazine/RE:

Из книги Основы объектно-ориентированного программирования автора Мейер Бертран

Читайте в следующих номерах Сводный тест: Тестирование неттоповЛучшие из лучших: Программы: коллекция 2009Разработка ПО: Темизация в CMS DrupalПроблемы и решения: Советы и секретыPC Magazine/RE:

Из книги TCP/IP Архитектура, протоколы, реализация (включая IP версии 6 и IP Security) автора Фейт Сидни М

Из книги XSLT автора Хольцнер Стивен

17.4. Спецификации - ДНК, код - РНК Даже в давние времена PDP-7 Unix-программисты всегда (больше чем их коллеги, работающие с другими системами) были склонны рассматривать старый код как непригодный к повторному использованию. Это, несомненно, было продуктом Unix-традиции,

Из книги C++ для начинающих автора Липпман Стенли

Опасность излишней спецификации Почему так плохо использовать конкретное представление в качестве спецификации?Можно напомнить результаты изучения Линцем (Lientz) и Свенсоном (Swanson) стоимости сопровождения. Было установлено, что более 17% стоимости ПО приходится на

Из книги автора

4.12 Сети по спецификации 802 После того как DIX Ethernet и другие технологии локальных сетей доказали на компьютерном рынке свою полезность, IEEE организовала комитет 802 по разработке и публикации стандартов для технологий локальных сетей.Стандарты из серии 802, объединяющие

Из книги автора

Из книги автора

Спецификации W3C W3C выпускает спецификации как для XML, так и для XSL, и именно с ними мы будем работать на протяжении всей книги. Спецификации W3C не называются стандартами, поскольку, по международным соглашениям, стандарты могут создаваться только уполномоченными

Из книги автора

Из книги автора

19.2.6. Спецификации исключений С помощью спецификации исключений (см. раздел 11.4) в объявлении функции указывается множество исключений, которые она может возбуждать прямо или косвенно. Спецификация позволяет гарантировать, что функция не возбудит не перечисленные в ней

Прежде чем преступить к изложению материала хотелось бы сказать пару тройку слов о том что вообще такое CSS 3 и чем оно отличается от того CSS что мы изучали ранее? Дело в том, что CSS точно так же как и HTML имеет свою техническую документацию, определённые стандарты по которым вебмастера должны разрабатывать свои веб документы, а разработчики браузеров писать свои программы и хотя эта документация имеет исключительно рекомендательный характер, всё же лучше её придерживаться чтобы разные браузеры и устройства смогли корректно отобразить Ваш сайт.

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

Почему вообще рождаются новые спецификации?

Да всё просто.. мир не стоит на месте всё меняется, появляются новые технологии, тенденции.. ну и конечно же веяния моды диктуют вебмастерам всё новые и новые требования к дизайну разрабатываемых ими сайтов.. так с течением времени вебмастерам перестаёт хватать тех инструментов которые есть у них в руках и они вынуждены идти на хитрости, придумывать нестандартные решения, перекладывать какие-то задачи на плечи скриптов или фотошопа. Вот например появилась мода скруглять углы у блоков сайта, а простого инструмента - свойства: border-radius в спецификации CSS 2.1 не было.. вот и приходилось тогда ради этой казалось бы мелочи из шкуры вон лезть делая целую кучу лишних "телодвижений" - посмотрите ради любопытства разве оправдан в этом уроке такой раздутый код? Вот и решили люди всё упростить придумав свойство border-radius которое без труда и велоизобретательства скругляет углы у блочных элементов. Так вот собственно и происходит эволюция CSS и думается мне, что появись повальная новая мода ну, например на вогнутые или ромбоподобные углы у блоков так в будущем в какой нибуть последующей спецификации появятся и соответствующие свойства.

Что позволяет делать CSS 3 ?

Помимо того что спецификация CSS 3 может скруглять углы она позволяет делать ещё целый ряд вещей: создавать градиенты, тени, анимацию на страницах сайта, задавать степень прозрачности тех или иных элементов, так же значительно расширяет набор инструментов при работе с фоном, цветом, текстом – в общем нам будет о чем поговорить в этом учебнике!

Какие браузеры поддерживают CSS 3 ?

Большинство новых свойств вошедших CSS 3 поддерживают все современные браузеры: IE9+, Opera 10+, Firefox 3.6+, Chrome 12+, Safari 5+ конечно без нюансов о которых в каждом конкретном случае мы поговорим отдельно не обошлось, однако в целом всё исправно работает.

P.S. Разговаривать в этом учебнике мы будем лишь о новых свойствах CSS 3 не вошедших в спецификою CSS 2.1, однако следует понимать, что CSS 3 помимо новых свойств включает в себя так же всё то, что содержит и CSS 2.1 так что если Вы здесь впервые и учите CSS "с нуля" то рекомендую Вам начать обучение с раздела .