Ver Mensaje Individual
  #1 (permalink)  
Antiguo 26/11/2010, 05:40
Avatar de eZakto
eZakto
 
Fecha de Ingreso: julio-2008
Mensajes: 214
Antigüedad: 15 años, 8 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™