Leaderboard

Мой вольный перевод статьи молодого голландского блоггера Marco Kuiper С тех пор, как состоялся релиз Firefox 4, появилась возможность использовать множество разных новых CSS-фишек. Очень радует, что Firefox - 2-й по популярности браузер в мире. А это означает, что больше людей будут иметь возможность лицезреть все ваши модные штуки, которые вы будете создавать посредством CSS. Я недавно просматривал список CSS-селекторов, которые включены в Firefox 4 и нашел интересный селектор :any() (теперь он доступен и у Webkit). Сейчас мы с вами посмотрим, что может данный селектор и вообще, зачем нам с вами его использовать. Имейте в виду, что :any() не является частью спецификации CSS3 (пока). Но с тех пор, как Webkit стал поддерживать этот селектор, я уверен, что в скором будущем другие браузеры последуют его примеру. Да, и еще одна вещь: чтобы заставить его работать в Firefox, используйте -moz- префикс (-webkit- для webkit-браузеров). Меньше слов - больше дела, посмотрим, что эта штука умеет. Итак, у нас проблема: А проблема заключается в большом количестве вложенных элементов разных уровней глубины. Вот например: /* Общие ссылки на сайте */ /* Уровень 0 */ a { color:#eee; } /* Специфичные ссылки в списках, навигации, header'e и footer'е */ /* Уровень 1 */ li a, nav a, header a, footer a { color:#555; } /* Еще одни специфичные ссылки, следующий уровень вложенности */ /* Уровень 2 */ section li a, section nav a, section header a, section footer a, article li a, article nav a, article header a, article footer a, aside li a, aside nav a, aside header a, aside footer a { color:#000; } /* Уровень 3 */ /* Ну, придумайте там что-нибудь сами */ Как вы можете видеть, чем глубже по уровням мы продвигаемся, тем труднее читать/понимать наши CSS селекторы. Решение проблемы: Селектор :any() создавался для группирования нескольких таких вот вложенных селекторов вместе. Влияние селекторов на элементы остается тем же, единственное отличие: длинна и читабельность. Сравним: /*Общие ссылки на сайте */ /* Уровень 0 */ a { color:#eee; } /* Специфичные ссылки в списках, навигации, header'e и footer'е */ /* Уровень 1 */ :any(li, nav, header, footer) a { color:#555; } /* Еще одни специфичные ссылки, следующий уровень вложенности */ /* Уровень 2 */ :any(section, article, aside) :any(li, nav, header, footer) a { color:#000; } /* Следующий уровень, применим к заголовкам */ /* Уровень 3 */ :any(section, article, aside) :any(li, nav, header, footer) :any(h1, h2, h3) a { color:#aaa; } Я в курсе, что элемент hgroup больше подходит для последних элементов (вместо h1, h2, h3), но тут я предпочитаю использовать "старые" заголовки. Просто чтобы код был более понятным. Мысли в слух: Как можно видеть, вы можете группировать несколько специфичных селекторов вместе с помощью :any(). Так легче читать код, а значит легче вносить изменения в ваш HTML и CSS. Но существуют ли еще какие-либо причины использовать этот селектор? Этот селектор особо полезен при использовании его в HTML5 тегах section, header, footer, nav, aside и т.д Так как HTML5 пытается избавится от разделения (div) и сделать HTML5 более значимым, этот CSS селектор позволяет сделать следующий шаг в достижении этой цели. Чтобы решить задачу, описанную выше(с несколькими уровнями вложенности ), мы могли бы использовать определенные классы, которые сделали бы эту работу за нас. Но зачем нам это делать? Вывод: данный селектор особенно полезен когда у нас есть четкий, лаконичный HTML5 с вложенными элементами, и когда мы не хотим использовать селектор class (или id). Правда, честно сказать, я пока не видел такое большое количество вложенных элементов на вебсайтах, так что не знаю, нужен ли нам пока селектор :any()? А что вы думаете по этому поводу?

Я долго вынашивал коварные планы по реализации на яваскрипте кастомного селекта, который можно было бы легко стилизовать. И вот наконец я на все плюнул, сел и написал его в виде плагина для jQuery. Прошу потестить его на баги (хотя я уверен, что отловил их все). http://berezkin-r.narod.ru/select/ Что умеет: все, что должен уметь обычный <select>, за исключением того что его можно очень легко стилизовать Что не умеет: нет мультиселекта (мне по работе он не нужен, поэтому делать было влом), он вообще сильно нужен? Работоспособность проверена в: Google Chrome (последний) Apple Safari (последний) Mozilla Firefox 4 Opera 11.11 (редкое дерьмо, а не браузер) IE 9 IE 9 (в режиме IE8) IE 9 (в режиме IE7) IE 6 (виртуальная машина с XP SP1) В IE 6 имеется ровно один глюк, о котором я знаю и исправлять его не собираюсь, кто найдет его может взять с полки пирожок

Great Rash С Днём Рождения и с юбилеем тебя! Прими пои искренние поздравления

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

Бери идею отсюда http://psywalker.ru/Forum/Footer_bottom/main.html

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

Максим, мои поздравления! Я даже не предполагал, что ты мог не знать, что такое тег.. Мне всегда казалось, что ты в теге родился (перефраз. "в рубашке родился") Успехов тебе и - спасибо за помощь. P.S. Калькулируем - у меня стаж (2,7 года)

Ок! Спс Если я прошу примеров, тут нужно включить мозг, значить я учусь, и пытаюсь в чем-то разобраться! Думаю для среднестатистического ума это не сложно понять! Т.е., ты предлагаешь нам за тебя погуглить или написать тебе готовый код? Да, видимо человек именно этого хочет. Ну что, тогда кто будет писать, ты или я? Предоставляю тебе выбор. На форуме запрещено: 1. Игнорирование правил форума. 2. Нецензурные выражения, в том числе завуалированные. 3. Оскорбления участников форума. Админы, а НАРУШАЕТЕ! 4. Публикация персональных данных участников без их разрешения. 5. Реклама и спам во всех проявлениях. 6. Публикация темы с нарушением правил создания новой темы. 7. Сообщения, пропагандирующие тоталитарные религиозные секты и общества. 8. Публичное осуждение действий администрации, которые априори являются правильными. 9. Цитирование личной переписки (приватом или e-mail'ом) одних участников форума с другими без явного согласия обеих сторон. 10. Создание множественных учетных записей одной персоны. 11. Игнорирование просьб модераторов. 12. Неадекватное поведение "Помните, тут не делают работу за вас, тут помогают в изучении технологий и обмениваются опытом" Вот я как раз и хочу, что бы поделились опытом! Так что господа админы, нету опыта, разумно не соваться! Свою правоту я вам аргументировал! Теерь можете вполне воспользоваться своим правом "Администратор в праве удалять без предупреждения и обоснования любое сообщение на форуме." PS. на будущее, почаще перечитывайте, то, что сами же и установили!