CSS hacks (трюки)

Question

Иногда, когда я вижу сайт, который мне нравится или сайты уважаемых людей, я вижу исходники и пытаюсь их понять (как и все мы).

На Jeremy Keiths сайте он использует следующий код:

[role="navigation"] a { 
font-weight: bold; 
text-decoration: none; } 

Я никогда не видел это раньше, и еще несколько раз я видел код (который можно рассматривать как «трюк»), что я никогда не видел до.

Помимо вопроса о том, что означает вышеуказанный код, мой вопрос: есть ли какая-либо документация, книга или блоги, которые проходят, чтобы узнать о продвинутых/менее известных CSS-трюках?

Answer 1

В этом примере <nav> обернута в <div>, а затем назначена роль navigation.То же самое может быть достигнуто только с

nav a {} 

Много сайтов, кажется, смешивать «маленький» HTML5 с XHTML. Я действительно не вижу причины, почему они не используют HTML5 «полностью». Весь смысл HTML5 состоит в том, чтобы быть более смысловым и писать меньше кода, более значимого.

Некоторые полезные ссылки.

http://html5doctor.com/

http://htmldog.com/

http://desizntech.info/2009/03/discover-the-cool-of-css-25-advanced-css-techniques/

В настоящее время, вам нужно немного JavaScript, чтобы сделать HTML5 элементы работают в IE. Эти ссылки должны помочь

http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/

http://remysharp.com/2009/01/07/html5-enabling-script/

Answer 2

Вышеуказанные целевые элементы, которые имеют атрибут роли, такие как:

<div role="navigation"> 
    <a href="...">...</a> 
</div> 

одном классе будет иметь смысл здесь, но это просто еще один способ сделать это. Селекторы атрибутов являются стандартной частью CSS2, но в то время IE6 didn't support them, поэтому он не использовался до недавнего времени.

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

Answer 3

Это селектор атрибутов CSS. Он говорит «Все <a> тегов, которые являются потомками элемента, который имеет атрибут role со значением navigation должны быть стилизованным следующим образом ...»

Он использует его для accessibility principally и для styling only secondarily.

Если вы хотите узнать некоторые из новейших вещей о CSS, я бы рекомендовал css3.info и css3please.com. Первый - отличный источник примеров новых трюков, а второй позволяет вам играть с новым материалом в браузере. Помимо этого ... Я нашел, что лучший способ узнать - это ответить на вопросы здесь (глядя вверх, когда вы не уверены) в сочетании с чтением - Eric Myers, Paul Irish, Quirksmode - все это хорошие ресурсы для изучение новых вещей, которые вам носят.

Answer 4

Роль - новый атрибут XHTML2.

http://www.wait-till-i.com/2009/05/16/pitching-a-hack-or-a-product-dos-and-donts/

http://www.w3.org/TR/2008/WD-xhtml-role-20080407/

Answer 5

Круто, какой браузер сделал это работает в?

http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#selectors

Е [Foo = "бар"]

Е элемент, "Foo" значение атрибута в точности равно "бар"