¿Es posible usar Javascript o JQuery dentro de CSS para un navegador Chrome y Safari?

Si es así, ¿puede dar un ejemplo simple en cada uno de estos casos?

Las respuestas anteriores a las que se hace referencia a continuación han abordado cómo se puede lograr esto con Internet Explorer o con Firefox con un enfoque en Javascript, pero no han abordado cómo hacerlos compatibles con Chrome o Safari, que son muy populares o posiblemente usando JQuery como solución alternativa.

¡Gracias por sus respuestas!

Las respuestas anteriores proporcionadas por @Zach aquí incluyen lo siguiente:

HTC con IE Use un CSS como:

 body { behavior:url(script.htc); }

y dentro de ese archivo script.htc tiene algo como:

 <PUBLIC:COMPONENT TAGNAME="xss"> <PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="main()" LITERALCONTENT="false"/> </PUBLIC:COMPONENT> <SCRIPT> function main() { alert("HTC script executed."); } </SCRIPT>

El archivo HTC ejecuta la función main() en el evento ondocumentready (refiriéndose a la preparación del documento HTC).

XBL con Firefox Firefox admite un truco similar de ejecución de secuencias de comandos XML, utilizando XBL.

Use una regla CSS como esta:

 body { -moz-binding: url(script.xml#mycode); }

y dentro de su script.xml:

 <?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml"> <binding id="mycode"> <implementation> <constructor> alert("XBL script executed."); </constructor> </implementation> </binding> </bindings> All of the code within the constructor tag will be executed (a good idea to wrap code in a CDATA section.)

En ambas técnicas, el código no se ejecuta a menos que el selector de CSS coincida con un elemento dentro del documento. Al usar algo como body , se ejecutará inmediatamente al cargar la página.