Foros del Web » Programación web » Javascript » Jquery »

Un pequeño plugin (jQuery) - CSS

Estas en el tema de Un pequeño plugin (jQuery) - CSS en el foro de Jquery en Foros del Web. 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). ...
  #1 (permalink)  
Antiguo 26/11/2010, 05:40
Avatar de eZakto  
Fecha de Ingreso: julio-2008
Mensajes: 214
Antigüedad: 6 años, 4 meses
Puntos: 5
Un pequeño plugin (jQuery) - CSS

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
  1. <head>...</head>
  2.     <div></div>
  3.     <div></div>
  4.     <div></div>
  5.     <div></div>
  6.     <div></div>
  7. </body>
  8. </html>
CSS:
Código CSS:
Ver original
  1. div:odd {
  2.     width: 100px;
  3.     height: 100px;
  4.     background: red;
  5. }
  6. div:even {
  7.     width: 200px;
  8.     height: 100px;
  9.     background: blue;
  10. }
JS:
Código Javascript:
Ver original
  1. $(function($){
  2.     $('body').css3lector('style.css');
  3. });
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..
__________________
eZakto™
  #2 (permalink)  
Antiguo 26/11/2010, 15:24
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.015
Antigüedad: 5 años, 8 meses
Puntos: 101
Respuesta: Un pequeño plugin (jQuery) - CSS

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?
  #3 (permalink)  
Antiguo 26/11/2010, 16:34
Avatar de eZakto  
Fecha de Ingreso: julio-2008
Mensajes: 214
Antigüedad: 6 años, 4 meses
Puntos: 5
Respuesta: Un pequeño plugin (jQuery) - CSS

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.
__________________
eZakto™

Etiquetas: css, plugin
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 11:01.
SEO by vBSEO 3.3.2