У Вас в настройках PHP register_globals=ON? какеры идут к Вам!!!

Файловый Архив

  • Неограниченное количество категорий и суб-категорий
  • Настройки прав доступа по группам
  • Настройки прав доступа по каждой категории
  • Предпросмотр медиа файлов: FLV, IFLV, F4A, F4V, MP4, MP3, MOV и других...
  • Мультизагрузка файлов - SWFUploader
  • Добавление файлов с сервера
Подробности и история обновлений продукта в этой теме
Loading

Go Back   форум vBSupport.org > > >
Register Изображения Меню vBsupport Files Manager Аллея Звёзд Реклама на форуме Search Today's Posts Mark Forums Read
  • Мемберка
  • Администраторам
  • Premoderation
  • For English speaking users
  • Изменения в правах
  • Каталог Фрилансеров
Пароли на скачивание файлов в Member Area меняются автоматически каждый день
Если вам нужно скачать какой то скрипт, за паролем ко мне в ЛС
привет какирам kerk
Ещё раз обращаем Ваше внимание: всё, что Вы скачиваете и устанавливаете на свой форум, Вы устанавливаете исключительно на свой страх и риск.
Сообщество vBSupport'а физически не в состоянии проверять все стили, хаки и нули, выкладываемые пользователями.
Помните: безопасность Вашего проекта - Ваша забота.
Убедительная просьба: при обнаружении уязвимостей или сомнительных кодов обязательно отписывайтесь в теме хака/стиля
Спасибо за понимание
На форуме введена премодерация ВСЕХ новых пользователей

Почта с временных сервисов, типа mailinator.com, gawab.com и/или прочих, которые предоставляют временный почтовый ящик без регистрации и/или почтовый ящик для рассылки спама, отслеживается и блокируется, а так же заносится в спам-блок форума, аккаунты удаляются
for English speaking users:
You may be surprised with restriction of access to the attachments of the forum. The reason is the recent change in vbsupport.org strategy:

- users with reputation < 10 belong to "simple_users" users' group
- if your reputation > 10 then administrator (kerk, Luvilla) can decide to move you into an "improved" group, but only manually

Main idea is to increase motivation of community members to share their ideas and willingness to support to each other. You may write an article for the subject where you are good enough, you may answer questions, you may share vbulletin.com/org content with vbsupport.org users, receiving "thanks" equal your reputation points. We should not only consume, we should produce something.

- you may:
* increase your reputation (doing something useful for another members of community) and being improved
* purchase temporary access to the improved category:
10 $ for 3 months. - this group can download attachments, reputation/posts do not matter.
20 $ for 3 months. - this group can download attachments, reputation/posts do not matter + adds eliminated + Inbox capacity increased + files manager increased permissions.

Please contact kerk or Luvilla regarding payments.

Important!:
- if your reputation will become less then 0, you will be moved into "simple_users" users' group automatically.*
*for temporary groups (pre-paid for 3 months) reputation/posts do not matter.
Не можете скачать вложение?
Изменения в правах групп пользователей
внимательно читаем эту и эту темы
Короткая версия - тут
Уважаемые пользователи!

На форуме открыт новый раздел "Каталог фрилансеров"

и отдельный раздел для платных заказов "Куплю/Закажу"

 
 
Old  
uservb
Эксперт
Default Взгляд в будущее: CSS4 12


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

Мы все долго и упорно работали, и в конце концов дошли до использования CSS3 в реальных проектах, а теперь он просто устарел? «Конечно же нет!» — отвечу я. Всё это – результат эволюции, который только поможет всему CSS в целом, потому что и «Уровень 3», и «Уровень 4» — просто определения, скрывающие за собой набор документов спецификации.

Зачем нам 4 версия? Что слышно о CSS3?

«4 Уровень» – это просто номер документа W3C. Вы слышали что-нибудь о новых спецификациях «Фильтров с Эффектами, 1 Уровня»? Куда они подевались? В CSS3? Может, в CSS4? А может в CSS1, потому что там фигурирует «Уровень 1»? Всё это вообще не важно, потому что CSS – это просто CSS. Селекторы являются первым документом, для достижения четвертого уровня спецификации, который всё ещё находится в разработке. Каждый документ там — сам по себе, если дело касается номера спецификации. Они разрабатываются независимо друг от друга.

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

CSS3 постигнет учесть HTML5: и я имею ввиду не конкретную версию, а язык в целом. HTML5, по факту, просто следующая версия языка разметки, в которую добавили поддержку новых элементов. Но когда люди говорят о нем, они могут иметь ввиду всё, что угодно: начиная от аудио API и Веб Сокетов, и заканчивая геолокацией (которая, кстати, вообще не входит в HTML5 спецификацию).

То же самое касается и CSS3: для некоторых он выглядит как волшебство, которое мы применяем для создания современных демо страниц. Вы не обязаны знать к чему принадлежит спецификация border-radius или box-shadow, если умеете правильно их использовать. Аналогичная ситуация и с новыми селекторами, это просто другая (следующая) версия «Селекторной» спецификации.

Что же такое Селекторы?

В спецификации селекторы описаны как шаблоны, которые соответствуют элементам DOM дерева. Большинство селекторов из «4 Уровня» являются псевдо-классами. Селекторы появились с самого начала существования CSS, и продолжают успешно существовать на «4 Уровне», при этом получая множество новых интересных дополнений. Давайте же перейдем к практике и посмотрим, что там интересного. Я не буду описывать весь документ – только новшества «4 Уровня».

Логические комбинаторы: :matches, :not

Начнём, пожалуй, с логических псевдо-классов. Первый из них: :matches, скорее всего, известный тебе ранее как :-moz-any() от компании Mozilla , был внедрен ещё в Firefox 4. Благодаря этому селектору, мы можем группировать и находить элементы в CSS документе. Зачем это нужно? Ну, например, если нам необходимо собрать несколько ссылок «одним махом».
Вместо такого:
PHP Code:
ul.menu li a:link,
ul.menu li a:hover,
ul.menu li a:visited,
ul.menu li a:focus {
   
colorred;

можно написать так:
PHP Code:
ul.menu li a:matches(:link, :hover, :visited, :focus) {
   
colorred;

Просто, не правда ли? Несмотря на то, что этот пример выглядит простовато, он показывает потенциальные возможности псевдо-класса :matches и может быть использован в более сложных ситуациях:
PHP Code:
article:matches(.active, .visible#important) {
   
backgroundred;

Второй селектор, который мы рассмотрим, на самом деле, был введен ещё в CSS3, но по настоящему мощным стал на «4 Уровне». Я имею ввиду псевдо-класс :not, который теперь может принимать список селекторов в качестве параметра:
PHP Code:
p:not(.active, .visible) {
   
colorred;

Этот код будет делать красным все параграфы не имеющие классов: .active или .visible.

Псевдо-классы для обработки ссылок: :any-link и :local-link

Благодаря этим псевдо-классам, мы будем иметь больше контроля над стилями ссылок. Первый: :any-link (временное имя, может быть изменено) – объединяет определения a:link и a:visited в одно так, что вам не придется писать:
PHP Code:
a:link,
a:visited {
   
colorred;

Теперь не важно, является ли ссылка посещенной или нет. У неё будет стиль обычной ссылки:
PHP Code:
a:any-link {
   
colorred;

Второй псевдо-класс :local-link — более интересен. Им можно, к примеру, дать свой стиль ссылке, указывающей на вашу личную страницу, оставив все остальные ссылки нетронутыми:
PHP Code:
nav :local-link {
   
text-decorationnone;

Благодаря этому псевдо-классу, ссылки, указывающие на текущую страницу, не будут иметь подчеркивания, тем самым, отличаясь от стальных, находящихся в меню или пути.
Вот другой пример использования:
PHP Code:
:not(:local-link(0)) {
   
colorred;

Это правило будет применено ко всем внешним ссылкам. (Можно добавить к ним, скажем, иконку или фоновое изображение по вашему желанию)

Как можно видеть, в этом последнем примере :local-link используется с параметром. Число в скобках определяет часть в URL пути, по которому будут происходить сопоставление каждой найденной ссылки.
Звучит немного непонятно, но всё проще, чем кажется:
PHP Code:
nav :local-link(0) {
   
colorred;
}
nav :local-link(1) {
   
colorgreen;
}
nav :local-link(2) {
   
colorblue;
}
nav :local-link(3) {
   
coloryellow;
}
nav :local-link(4) {
   
colorgray;

Предположим, что текущий адрес страницы: http://end3r.com/2012/10/20/some-title/, и у вас есть следующие ссылки в меню:


Первая ссылка будет красной, вторая зеленой, третья синей, четвертая – желтой, а пятая – серой.

Время-определяющие псевдо-классы: :past, :current, :future

Эти псевдо-классы очень удобны для пользователей программ чтения текста с экрана. Всего лишь одной CSS строчкой могут быть оформлены отдельные, озвучиваемые в данный момент слова (почему то, сразу вспоминается караоке):
PHP Code:
p:current {
   
backgroundyellow;

Этот код подсвечивает озвучиваемые слова желтым фоном.
Второе применение – это оформление субтитров для WebVTT видео формата. Можно, например, менять цвет или любые другие свойства. Псевдо-классы :past и :future, как можно догадаться, относятся к элементам, которые были озвучены ранее, и которые будут озвучены следующими.

Псевдо-класс неопределенного состояния: :indeterminate


В то время, как к оформлению элементов форм может быть применено множество полезных псевдо-классов, таких как: :enabled, :disabled или :checked, есть один новый: :indeterminate. Как всем известно, флажки и переключатели могут иметь два состояния: установлен и не установлен. Каждое состояние может быть определено псевдо-классами :checked — для установленного и :not(:checked) — для не установленного. Но что, если вы хотите оформить элемент, который ещё не был использован. По факту, у него не может быть определено ни состояние установлен, ни состояние не установлен. В некоторых случаях это бывает полезным, например, чтобы напомнить пользователю, что он что-либо пропустил. Таким образом, мы может стилизовать элементы, которые ещё не использовались и не имеют состояния по умолчанию:
PHP Code:
input.checkbox:indeterminate {
   
background#ccc;

Аналогичным образом можно определить состояние прогресс-бара, если его текущий статус неизвестен:
PHP Code:
progress:indeterminate {
   
background#ccc;

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

Псевдо-классы для древовидных структур: :nth-match, :nth-last-match

Эти псевдо-классы впервые появились в «4 Уровне», и они очень интересны. Используя :nth-match, вы можете добиться намного больших возможностей, чем когда-либо ранее. Любопытно, как он работает? Окей, представьте, что я возьму псевдо-класс nth-child, который выбирает элементы и объединю его с мощью псевдо-класса :matches, и вы получите ответ на свой вопрос.

Пусть у вас есть список ссылок, некоторые из которых имеют класс .active, и вы хотите выбрать только четные ссылки с этим классом. Мы можем использовать nth-child(even) для выборки четных элементов, но этого недостаточно, ведь нам нужны ссылки с классом .active. Не подходит и :matches(.active), т.к. в этом случае мы выбираем вообще все ссылки с классом .active. В этом случае нам и поможет :nth-match:
PHP Code:
li a:nth-match(even of .active) {
   
colorred;

Да, теперь мы можем выбрать только четные ссылки с классом .active из всех элементов.
Это очень простой пример. Давайте немного усложним его использованием выражения An+B:
PHP Code:
p:nth-match(2n+1 of .active, .visible#important) {
   
colorred;

Эта комбинация селекторов ищет элементы, используя более сложное выражение. Псевдо-класс
PHP Code:
:nth-last-match 
работает так же, как и :nth-match, но начинает поиск с конца DOM дерева.

Псевдо-классы: :column, :nth-column, :nth-last-column

Давайте попробуем применить некоторые псевдо-классы для табличных данных. Все мы знаем, что использовать таблицы для разметки — не есть хорошо, но вот для данных они подходят отлично.
HTML таблицы являются строка-ориентированными, т.е. столбцы описываются внутри строк. Создание столбец-ориентированной таблицы возможно, но тогда у вас не будет единых строк, к тому же строка-ориентированные таблицы более популярны. Было бы полезно иметь возможность использовать CSS стили для оформления, например, отдельных колонок в такой таблице. Скажем, вы хотите задать четным и нечетным колонкам свой цвет фона. Конечно, мы можем использовать дополнительные классы, или усложнить разметку, но с помощью новых селекторов из «4 Уровня» мы сможем сделать это псевдо-классами в пару строк:
PHP Code:
:column(.total) {
   
backgroundred;
}
:
nth-column(even) {
   
backgroundblue;

Этот небольшой код устанавливает красный фон каждой ячейке с классом .total, находящейся в одной колонке, и синей каждой ячейке, находящейся в каждой четной колонке таблицы.
Теперь, мы можем выбирать столбцы точно так же, как и строки, даже используя безумные правила типа: :nth-column(3n+2). Только помните, что колонки оформляются на основе следования их в DOM дереве, а не так, как они отображаются на странице. Разумеется, не только таблицы, в конечном счете, выиграют от этих псевдо-классов, колоночные макеты уже на подходе.

Родительский (дочерний) селектор:

Этот селектор почти как Швейцарский Армейский нож, которого очень ждали, и вот он здесь. Самая обсуждаемая новинка в «Селекторной» спецификации «4 Уровня» даст вам невиданную ранее мощь в работе с CSS. Благодаря этому селектору, можно очень легко оформлять элементы, не добавляя им классы или идентификаторы. Такая особенность может быть супер-полезной при оформлении, например, меню, в котором нет никаких классов в разметке для идентификации элементов.

Давайте посмотрим на это в действии, используя некоторые базовые примеры. Пусть, у нас есть меню, состоящие из списка простых ссылок. Мы хотели бы оформить его, но оно полностью генерируется на серверной стороне на php, и у нас нет доступа к коду. Проблема возникнет, когда мы захотим оформить элемент li активного пункта меню, при том, что класс .active будет не у элемента li, а у самой ссылки. Известная проблема, не так ли? В такой ситуации самый просто путь – это перенести класс, отвечающий за активный пункт, с ссылки на элемент li. Но нам это не подходит, т.к. доступа к серверному коду у нас нет.

В нормальной структуре описания правил CSS, те или иные свойства применяются к последнему элементу. В правиле ul li a.active — это будет ссылка с классом .active, которая находится в элементе li, который находится в элементе ul. В правиле p span – это будет элемент span, который находится внутри элемента p, и т.д. Благодаря родительскому селектору, такой порядок может быть нарушен:
PHP Code:
ul lia.active {
   
colorred;

Теперь, мы можем оформить элемент li, даже если активный класс будет у его ребенка. При добавлении родительского сектора к элементу, мы говорим, что хотим оформить именно его, а не последний элемент.
Другой пример: можно изменить фон страницы, просто добавив ссылку с определённым классом в любое место:
PHP Code:
bodyheader a.styleSwitcher:hover {
   
backgroundred;

Этот код будет делать фон <body> (иначе говоря — страницы) красным при наведении курсора на ссылку с классом .styleSwitcher, находящуюся в хедере. Для достижения подобного эффекта, не используя родительский селектор, без JS не обойтись. Очевидно, что нативная поддержка подобных правил в CSS – наилучшее решение.

Примечание: Первая редакция спецификации (от 29 сентября 2011) определяла родительский селектор знаком доллара, стоящим перед элементом ($li). Текущая редакция (от 22 июня 2012) использует другой синтаксис, в котором используется восклицательный знак, стоящий после элемента (li!). Разумеется, всё может поменяться еще не раз. Важно то, что рано или поздно финальная спецификаций выйдет, и данный вопрос будет закрыт. А уж какой у неё будет синтаксис, по сути, не так важно, главное правильная работа.

Чтобы увидеть родительский селектор в действии, воспользуйтесь jQuery плагином cssParentSelector.

Резюме:

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

Текущее состояние документа

На данный момент, «4-му Уровню Селекторов» все ещё далеко до своей финальной точки. Одни правила постоянно меняются, другие добавляются, третьи убираются. Нет никакой возможности ориентироваться на этот документ сегодня, ибо он изменится ещё не один раз. Но есть и плюсы: вы можете принять участие в обсуждении и предлагать свои идеи уже сейчас. Любая интересная идея может быть добавлена в стандарт и, в итоге, стать частью финальной спецификации.

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

Другие спецификации «4 Уровня»

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

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

Ресурсы:

Первым и, безусловно, самым интересным является: официальная W3C документация для «Селекторов 4 Уровня». Только помните о том, что она всё ещё разрабатывается. Вы так же можете посмотреть несколько интересных статей от David Storey — члена рабочей группы W3C.

Что там в будущем?


Помощь с документацией, предложение своих идей, комментирование чужих идей – сейчас самое время, чтобы стать частью этого будущего. Кто знает? Может через пару лет вы станете членом Рабочей Группы, отвечающим за удивительные функции в CSS, которые будут использовать миллионы веб-сайтов каждый день? Это невероятная возможность: идти нога в ногу с разработчиками стандарта, или, что ещё лучше, принять участие, непосредственно, в процессе его разработки. Дерзайте, время ещё есть!

 
Bot
Yandex Bot Yandex Bot is online now
 
Join Date: 05.05.2005
Реклама на форуме А что у нас тут интересного? =)
Old  
Nevil
Знаток
 
Nevil's Avatar
Default 0

Quote:
Originally Posted by uservb View Post
Родительский (дочерний) селектор:
Вот это крутая тема.
 
 

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off




All times are GMT +4. The time now is 12:17 PM.


Powered by vBulletin® Version 3.5.9
Copyright ©2000 - 2016, Jelsoft Enterprises Ltd.