hacks CSS (trucos)

Question

A veces cuando veo a un sitio web o sitios que me gusta de las personas respetadas, veo los códigos fuente y tratar de entenderlos (como todos nosotros).

En Jeremy Keiths sitio que utiliza el siguiente código:

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

nunca he visto esto antes, y algunas otras veces vi código (que puede ser considerado como un "truco") que nunca había visto antes de.

Aparte de pedir lo que significa que el código anterior, mi pregunta es - ¿hay alguna documentación, libro o blogs que pasan por aprender acerca de los "trucos" avanzadas/menos conocidos CSS?

Answer 1

En este ejemplo, el <nav> se envuelve en un <div> y luego se le asigna un rol de navigation.El mismo se puede conseguir con sólo

nav a {} 

Una gran cantidad de sitios parecen mezclar un "pequeño" HTML5 con XHTML. Realmente no veo una razón por la cual no usan HTML5 "completamente". El objetivo de HTML5 es ser más semántico y escribir menos código que sea más significativo.

Algunos enlaces útiles.

http://html5doctor.com/

http://htmldog.com/

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

A partir de ahora, se necesita un poco de javascript para hacer que los elementos HTML5 funcionan en IE. Estos enlaces deben ayudar

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

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

Answer 2

Los elementos encima de los objetivos que tienen un atributo de papel, tales como:

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

Una clase tendría sentido aquí también, pero es sólo otra manera de hacerlo. Los selectores de atributos son una parte estándar de CSS2, pero en el momento IE6 didn't support them por lo que no se ha utilizado mucho hasta hace poco.

hay muchas otras tales selectores que han existido durante mucho tiempo, pero no podía ser utilizado debido a las limitaciones impuestas por IE. Ver Quirksmode para más ejemplos.

Answer 3

Ese es un selector de atributo CSS. Se dice "todos los <a> etiquetas que son descendientes de un elemento que tiene un atributo de role con un valor de navigation debe ser de estilo de la siguiente manera ..."

lo está usando para accessibility principally, y por styling only secondarily.

Si está buscando aprender algunas de las cosas más nuevas sobre CSS, recomiendo css3.info y css3please.com. El primero es una gran fuente de ejemplos de nuevos trucos, y el segundo te permite jugar con lo nuevo en el navegador. Aparte de eso ... He descubierto que la mejor manera de aprender es a responder a las preguntas aquí (mirando las cosas cuando no está seguro), combinada con la lectura - Eric Myers, Paul Irish, Quirksmode - todos estos son buenos recursos para aprendiendo cosas que son nuevas para ti

Answer 4

de rol es un nuevo atributo 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

fresca, el navegador no funciona en?

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

E [foo = "bar"]

un elemento E cuyo "foo" valor de atributo es exactamente igual a "bar"