CSS 3 – что нас ждет в ближайшем будущем? - Верстка HTML / CSS

Следующая статья: Как устроена web страница

Содержание

Что такое CSS - расшифровка
Основные нововведения
Фон, границы, градиенты
Позиционирование по сетке
CSS 3 селекторы
Media content теперь расширенная поддержка
Итог

Что такое CSS - расшифровка

CSS - Creating Style Sheets

Как всем web мастерам известно, что в наше время без CSS никуда. Вообще, это очень важное дополнение к HTML разметке. Как вы наверно уже знаете из новостей, в ближайшее время нас ожидает уже долгожданный HTML5 со своими примочками. CSS 3 будет идти рядом, поэтому постараемся рассмотреть его по ближе уже сейчас, а именно то, о чем нам сообщают разработчики.

Основные нововведения

Главное достоинство, теперь в CSS можно прописывать константы. Помните проблему с изменением путей к графике и так далее? Теперь при помощи констант это будет решаться за 5 сек.
column box новый вид контейнера. Разбивает информацию колонками. При этом, существенно сокращает количество писанного кода.
Template Based Positioning - Расширена система позиционирования блоков, так называемое шаблонное позиционирование. Очень удобная фишка, но сейчас ее описывать не буду, так как она заслуживает отдельной статьи. Вкратце же, это позволяет расположить элементы в ячейках условной сетки.
Tabbed Displays - отображение закладок. Тут я думаю комментарии излишне.

Фон, границы, градиенты

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

box-shadow – тени для элементов. Ой как сейчас этого не хватает. При помощи этой функции я думаю, мы сможем довольно близко и без проблем приблизиться к аналогам desktop приложений.
border-radius – позволяет закруглять границы (border) HTML элементов. Раньше это было уже, но под каждый браузер приходилось писать свои элементы, теперь это
border-break – заканчивает границу элемента, которая была расположена в точке разрыва. Очень полезная функция для составления красивых отчетов.
border-image – теперь границы можно будет задавать картинками, то есть если вы захотите супер навороченное обрамление, то тут вам полный разгул фантазии

Позиционирование по сетке

Цель этого модуля CSS - упрощение позиционирования элементов: мы создаем сетку и выравниваем элементы внутри ячеек.

Сетка может иметь один из следующих типов:

Явная сетка – сетка с явно заданными столбцами и строками.
Естественная сетка – создается автоматически, например в многоколоночных элементах (края с обеих сторон колонки создают границы сетки).
Сетка по умолчанию - элементы, которые не подходят под вышеперечисленные определения, рассматриваются как имеющие сетку с одной единственной ячейкой.

CSS 3 селекторы

В CSS 3 добавлены новые селекторы. Описание смотрим ниже:

E:only-of-type - выбирает элемент, который является ближайшим sibling элементом того же типа
E:not(s) - возвращает любой элемент, который не соответствует простому селектору s
E ~ F - возвращает элемент F, который следует после элемента E
E:nth-child(n) - возвращает элемент, который является n-ым по счету дочерным элементом исходного
E:nth-last-child(n) – выполняет то же, что и предыдущий селектор, но счет идет от последнего элемента
E:nth-of-type(n) - возвращает элемент, который является n-ым по счету sibling элементом того же типа

Новичку это явно ни о чем не скажет, но тем, кто работал с библиотекой jQuery, тем понятны эти селекторы и с облегчением скажут как этого не хватало.

Media content теперь расширенная поддержка

С появлением новых сервисов, например видео YouTube, потребовалось расширить возможности и поддержку различного медийного контента, не ограничиваясь только Flash или SilverLight. В CSS 3 теперь добавлена поддержка массы различных форматов, даже, я бы сказал, с запасом.

Итог

Конечно же, новые возможности CSS 3 в одной статье не расписать, да и не все еще открыто для тестов или не документировано, в момент когда мы увидим CSS 3, для меня ясно одно, очень многим придется переделывать сайты. А многие сами понимаете захотят, «чтобы было». Так что на мой век как разработчику, работенки хватит по самое «небалуйся». CSS 3 уже будет поддерживаться в Internet Explorer 9.0 и FireFox 4.0. К сожалению про оперу пока сказать ничего не могу, не имею информации.

P.S. За дополнительной информацией спецификаций CSS 3 можно обращаться на сайт w3c.org.