http://wiki.linuxformat.ru/wiki/index.php?title=LXF85:WOA&feed=atom&action=historyLXF85:WOA - История изменений2024-03-29T15:43:38ZИстория изменений этой страницы в викиMediaWiki 1.19.20+dfsg-0+deb7u3http://wiki.linuxformat.ru/wiki/index.php?title=LXF85:WOA&diff=6598&oldid=prevCrazy Rebel: викификация, оформление2009-01-19T08:10:48Z<p>викификация, оформление</p>
<p><b>Новая страница</b></p><div>=Что за штука... CSS 3?=<br />
<br />
: Семантическая сеть норовит ободрать стили у Интернета, и '''Пол Хадсон''' спешит к ордам разработчиков, готовых к ответному удару.<br />
<br />
* '''Ну знаю я, что такое CSS: это насчет стилей, типа макияжа web-страниц, верно?'''<br />
<br />
Можно, конечно, и так сказать. Каскадные таблицы стилей (Cascading Style-Sheets), или же способ назначить стили элементам HTML. По крайней мере, все начиналось именно с этого...<br />
<br />
* '''Думаете, в CSS 3 будет иначе?'''<br />
<br />
Вообще-то, перемены уже идут. CSS позволяют разработчикам сократить объем кода HTML, дав<br />
возможность указать элементам страницы их цвет,<br />
используемый шрифт и т.п., не смешивая эту информацию со смысловой частью кода. Когда-то давно,<br />
семантические тэги, типа '''<nowiki><h1></nowiki>''' и '''<nowiki><p></nowiki>''', шли вперемешку с тэгами стиля, типа '''<nowiki><font></nowiki>''' и '''<nowiki><b></nowiki>'''. Семантические тэги описывают структуру документа – определяют части, которые должны быть заголовками, телом документа, вставками и прочее. Тэги стиля описывают стиль документа – например, размер шрифтов и цвета Если тэг '''<nowiki><font></nowiki>''' использовать для отделения различных частей страницы, то компьютерам не понять, где главный заголовок, где подзаголовок, а где тело документа. Структурные тэги вроде '''<nowiki><h1></nowiki>''' для определения<br />
заголовков первого уровня и '''<nowiki><p></nowiki>''' для параграфов помогают компьютерам разобраться в содержании web-страниц.<br />
<br />
* '''Надо полагать, именно отсюда пошел термин «семантическая сеть».'''<br />
<br />
Это верно: придать web-страницам смысл, а не стиль.<br />
<br />
* '''Как сюда вписывается CSS?'''<br />
<br />
Мы согласились, что CSS – это каскадные таблицы стилей; а точнее – это код, назначающий стили<br />
элементам страницы. В семантической сети у самих страниц нет стиля – они содержат только структуру<br />
документа. А потом применяется CSS, чтобы описать цвет, шрифт и так далее. Приятно то, что CSS обычно<br />
хранится в отдельном от HTML файле, и для переделки<br />
дизайна всего сайта – например, если ваша компания<br />
затеяла смену униформы – надо будет просто отредактировать один файл.<br />
<br />
* '''Значит, CSS даст дизайнерам возможность наводить лоск, а разработчикам маяться с HTML-кодом?'''<br />
<br />
Вы уверены, что так не было и раньше? Конечно, полный контроль дизайнеров над web-страницами вносит<br />
определенную долю проблем. Например, многие ранние (да и современные) сайты на основе CSS использовали фиксированные размеры шрифта, ради совершенства дизайна. При мониторе с большим разрешением, плохом зрении или желании, чтобы текст легко читался издалека, приходилось молча страдать – дизайнеры считали, что шрифт хорошо смотрится в выбранном размере, значит, нечего и менять его.<br />
<br />
* '''Вот и верь, что CSS делает мир лучше...'''<br />
<br />
Ну, история еще не закончена. Первые разработчики CSS исправлялись и учились использовать мощь CSS для улучшения сайтов, а не дешевого трюкачества. В CSS 2 добавили массу новых возможностей – в частности, селекторы, позволяющие указать, каким элементам нужно задать стиль: например, вы хотите, чтобы все<br />
ссылки внутри таблиц были одного цвета, а все остальные ссылки – другого. Там, где CSS 1 определяли высоту и ширину элементов, CSS 2 определяют минимальные и максимальные ширину и высоту элементов.<br />
<br />
* '''Итак, мы получаем больший контроль?'''<br />
<br />
Именно.<br />
<br />
* '''А CSS 3 даст еще больший контроль?'''<br />
<br />
Вы получаете кое-какие новые возможности, но это не главное в новой спецификации. Дело в том,<br />
что CSS 3 исправляет худшие дефекты предыдущих версий, которые дизайнерам приходилось обходить,<br />
используя всякие там танцы с бубном.<br />
<br />
* '''Становится уже интересно!'''<br />
<br />
Рассмотрим пример с окантовкой объектов. Как получить скругленные края? Раньше приходилось<br />
создавать изображения для углов и накладывать их на элемент, чтобы он хорошо выглядел ['''в браузерах Mozilla был специальный атрибут CSS, но он не являлся стандартным, – прим. ред.''']. Оно, конечно, работало, но отнимало уж больно много времени. С помощью CSS 3 вы можете указать радиус скругления, и все будет сделано за вас.<br />
<br />
* '''Те целых два парня, что действительно мечтали о закругленной окантовке, будут в экстазе. Как насчет чего-нибудь посерьезнее?'''<br />
<br />
Хорошо, а прозрачность? Раньше это приходилось делать с помощью либо альфа-канала PNG, интенсивно нагружающего CPU (причем без поддержки IE), либо чисто Microsoft’овских расширений, использовавших преимущества DirectX. А в CSS 3 для этого появилось два стандартных способа, одобренных W3C.<br />
<br />
* '''То вообще не было стандартов много лет, а то вдруг сразу два?'''<br />
<br />
Верно! Первый способ задать прозрачность состоит в задании цвета элемента как RGBA. Это означает<br />
Красный, Зеленый, Синий и Альфа, и вы можете определить каждое из первых трех значений в диапазоне<br />
от 0 (нет цвета в этом канале) до 255, а альфа определить в диапазоне от 0 до 1 (1 означает совершенно<br />
непрозрачный). Если у вашей страницы черный фон и вы помещаете на нее элемент '''<nowiki><div></nowiki>''' со значением цвета 255, 255, 255, 0.5, то он отобразится серым, потому что смешается в отношении 50% с черным цветом фона. Другой способ состоит в задании атрибута непрозрачности объекта между 0 и 1.<br />
<br />
* '''Какие же это стандарты, если их два?'''<br />
<br />
Ну, очевидно, атрибут «непрозрачность» (opacity) надо использовать, когда требуется, чтобы объект просвечивал, но не имел никакого специального цвета. Изображения, например, должны использовать opacity, а не значение RGBA. Они также имеют более тонкое отличие: установка цвета фона элемента '''<nowiki><div></nowiki>''' с помощью RGBA сделает его прозрачным, но не повлияет на объекты, которые он содержит, например, текст. Но если вы используете атрибут '''opacity''', то '''<nowiki><div></nowiki>''' будет прозрачным, как и все объекты внутри него.<br />
<br />
* '''Здорово! Почти рыдаю от счастья. Есть еще какие-нибудь чудеса?'''<br />
<br />
Например, вот это: несколько фоновых картинок для любого элемента.<br />
<br />
* '''Зачем это нужно?'''<br />
<br />
Ну, положим, вы делаете страничку о мореплавании. Вы хотите, чтобы на вашей страничке фоном были облака, а также, чтобы внизу экрана был океан, слева вверху располагался компас, а справа внизу пиратский флаг. С помощью CSS 2, вам пришлось бы определить несколько элементов и попытаться расположить их, отслеживая прокрутку экрана и изменение размеров. А с CSS 3 – уже догадались? – сделать это гораздо проще. Вы можете теперь определить много<br />
различных картинок, а также их положение на экране (абсолютное или относительное), и браузер автоматически расположит их для вас.<br />
<br />
* '''Благодаря CSS 3, ленивые разработчики станут еще ленивее?'''<br />
<br />
Нет – все эти примеры говорят о тех вещах, которые делают все в любом случае, но определение их как<br />
стандартных позволит а) работать им в любом браузере и б) для их кодирования потребуется намного<br />
меньше кода. Возьмите, например, столбцы – мы все читаем текст по колонкам в газетах и журналах (включая этот), а на web-странице мы читаем очень длинные строки текста, ограниченные только размером нашего<br />
экрана. До CSS 3 не было возможности создать непрерывный переход текста от одного столбца к другому – вам приходилось создавать все столбцы вручную,<br />
затем прикидывать, сколько текста умещается в каждом из них. Начиная с CSS 3, вы можете определить,<br />
на сколько столбцов вы хотите разбить элемент, а так-же размер интервалов между столбцами.<br />
<br />
* '''Но сеть-то выглядит намного лучше без столбцов?'''<br />
<br />
Эта статья отвечает на вопрос «что», а не «почему»: я не собираюсь судить о новых свойствах CSS 3! По мне,<br />
так больший выбор – это хорошо.<br />
<br />
* '''Хватит о примочках для дизайнеров. Вы сказали, что разработчики будут иметь больший контроль с CSS 3 – вот об этом я хочу услышать!'''<br />
<br />
Ладно, поговорим о селекторах. В CSS 3 вы можете выбирать элементы, к которым присоединены определенные атрибуты – строго соответствующие атрибуты (используя ~), соответствия подстрок (с помощью '''*'''), строки, начинающиеся с определенного шаблона (с помощью '''^''') или заканчивающиеся определенным шаблоном (с помощью '''$'''). Так, если вы хотите отобразить зеленым все ссылки на сайты Великобритании, то напишите следующее:<br />
<br />
a[href$=”.co.uk”]{color:green}<br />
<br />
Новые селекторы полезны также при отладке. Например, подразумевается, что все изображения на<br />
ваших страницах содержат альтернативный текст для целей общедоступности, но на большом сайте отследить все изображения довольно трудно. С помощью CSS 3 эта проблема решается следующим образом:<br />
<br />
img:not([alt]){border:3px solid red;}<br />
<br />
* '''Все, я подсел на CSS 3 – прямо сейчас за это и возьмусь!'''<br />
<br />
Не гоните коней: CSS 3 – отличная спецификация, но ее надо еще реализовать во всех браузерах.<br />
<br />
* '''То есть вы мне тут всякого наговорили, а пользоваться этим нельзя?'''<br />
<br />
Кое-что уже можно использовать прямо сейчас, но всеобщей поддержки пока нет. Некоторые браузеры<br />
поддерживают довольно большой набор, но по крайней мере один (Internet Explorer) из них не поддерживает CSS 3 совсем.<br />
<br />
* '''Какие браузеры уже используют CSS 3?'''<br />
<br />
''Konqueror'' – на данный момент – возглавляет список, имея полную поддержку всех новых селекторов, а также некоторые другие новые возможности. ''Mozilla Firefox'' наступает ему на пятки, как и ''Opera 9''.<br />
Приятно, что довольно большая часть новых функций реализуется в ''Internet Explorer 7'', поэтому к моменту<br />
выхода Vista все основные браузеры уже будут поддерживать CSS 3.<br />
<br />
* '''Журнальная площадь исчерпана, задаю обязательный финальный вопрос: на каких URL можно узнать побольше?'''<br />
<br />
Каких URL? А, хороший вопрос – я ж еще про них не сказал! Официальные спецификации – по адресу http://www.w3.org/Style/CSS/current-work, полезный сайт с предварительной информацией – http://www.css3.info, а о том, какие браузеры в каком объеме поддерживают селекторы CSS, можно узнать на странице http://dev.l-c-n.com/CSS3-selectors/browser-support.php. '''LXF'''</div>Crazy Rebel