Un pequeño plugin (jQuery) - CSS

eZakto · #1 (**permalink**) 26/11/2010, 05:40

Buenas!

Quería comentar acerca de un pequeño plugin para jQuery que hice.

Es una pequeñez, pero que puede resultar bastante útil a veces (a veces). Quizás ya haya algún script que haga lo mismo, pero lo he buscado y no lo he encontrado.

Bueno, al grano. El plugin consiste en cargar estilos css y aplicarlos al documento, pero a través de jQuery. ¿Cuál es la utilidad? Pues que se pueden aprovechar los selectores de jQuery, y se los puede aplicar directamente en el css y que se vean bien en todos los navegadores.

Por ejemplo, los selectores "div:odd" y "div:even" no serán interpretados por los navegadores, a menos que se apliquen con jquery. O quizás usar los selectores input:text, input:submit, etc. Sin preocuparse de la compatibilidad.

Ejemplo:
HTML:

Código HTML:

Ver original<html>
<head>...</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

CSS:

Código CSS:

Ver originaldiv:odd {
    width: 100px;
    height: 100px;
    background: red;
}
div:even {
    width: 200px;
    height: 100px;
    background: blue;
}

JS:

Código Javascript:

Ver original$(function($){
    $('body').css3lector('style.css');
});

Resultado:
Safari 3
Chrome 3
Firefox 2
IE 8
IE 7
IE 6

Un ejemplo en vivo & source: http://www.ezakto.com/css3lector/

Bueno, la verdad no sé qué tanta utilidad le puede dar cada uno, pero es un buen y simple método para olvidarse de algunos conflictos con el css (especialmente con el ie).

Saludos!

PD: Algún bug por ahí habrá, como que por ahora no funcionan los :hover..

mayid · #2 (**permalink**) 26/11/2010, 15:24

Bueno, la idea es muy util. Pero como lo logras? Inyectando el CSS en el <head>?

Hay por ahí un metodo para traer script y CSS "tardios". Pero esta bueno lo que hiciste. Es facil, no?

eZakto · #3 (**permalink**) 26/11/2010, 16:34

Lo que hace es fácil, pero no sé si sea lo más óptimo. Recorro el archivo css, separo cada regla y voy aplicando las propiedades con $.css().

Combinandolo con algunos condicionales puede ser útil más que nada para ie6, ie7, ff2, etc.

Saludos.