Abstracción jQuery CSS | Programar Plus

Debe decirse, ante todo, que debe tratar de mantener su estilo y su JavaScript alejados entre sí. Si desea cambiar el estilo de un elemento con JavaScript, agregue (o elimine) un nombre de clase del elemento. Luego use ese nombre de clase como su gancho en el CSS para afectar el estilo.

Sin embargo, hay momentos en los que necesita aplicar estilos dentro de JavaScript. jQuery tiene una función solo para eso:

$("#thing").css("margin-right", 0);

Incluso puede ser un poco atractivo, porque jQuery maneja algunas rarezas entre navegadores por ti. Por ejemplo, la opacidad es una de esas cosas que requiere una variedad de propiedades CSS para ser compatible con varios navegadores. Pero con jQuery, no necesita aplicarlos todos. Simplemente configurando la opacidad con la función CSS funciona. jQuery sabe en qué tipo de entorno de navegador se encuentra y aplicará la propiedad correcta.

// just works
// also alternate CSS syntax
$("#thing").css({
   opacity: 0.5
});

Por lo tanto, puede extender ese pensamiento y suponer que jQuery lo ayudará con otras cosas que requieren múltiples propiedades CSS para obtener el mismo efecto de navegador cruzado, como el ejemplo por excelencia de border-radius. Necesitamos -moz-border-radius para navegadores Mozilla, -webkit-border-radius para navegadores WebKit y border-radius para Opera (y el futuro). Pero jQuery no nos ayuda aquí.

// not gonna help in current Firefox or Safari/Chrome
$("#thing").css({
   "border-radius": "20px"
});

Para obtener CSS compatible con varios navegadores a través de jQuery, todavía tendremos que enumerar los tres:

$("#thing").css({
   "border-radius": "20px",
   "-moz-border-radius": "20px",
   "-webkit-border-radius": "20px"
});

Entonces, ¿qué pasa con eso? David Walsh piensa sería una gran biblioteca tener esta abstracción dentro de jQuery. Ben Alman piensa jQuery debe manejar propiedades CSS totalmente compatibles (la especificación del radio del borde no es oficialmente definitiva). maldito piensa que la única razón por la que se admite la opacidad de esa manera es porque se requiere para la animación (funciones básicas como fadeToggle).

No estoy seguro de lo que pienso al 100%. Por un lado, seguro que sería bueno tener eso manejado mágicamente para mí. Por otro lado, puedo entender la hinchazón y los argumentos de especificaciones no finales.

¿Qué piensas?

Si se ha dado cuenta de que necesita aplicar esquinas redondeadas a través de jQuery, puede ser inteligente abstraerlo en un pequeño complemento para usted.

$.fn.roundThis = function(radius) {
    return this.each(function(e) {
        $(this).css({
           "border-radius": radius,
           "-moz-border-radius": radius,
           "-webkit-border-radius": radius
        });  
    }); 
};

$(function() {

    // usage
    $("#thing-that-will-become-rounded").roundThis("20px");

});

Sin embargo, esto todavía no manejará IE, pero hay excelentes complementos que sí lo hacen.

En otras noticias: Felicitaciones a Brent Traut por ganar el boleto gratuito para la conferencia jQuery de mi pequeño concurso. Hubo diez personas que ingresaron y donaron un total de $ 115 a proyectos de código abierto. La generación de números pseudoaleatorios eligió al ganador. Si todavía estabas pensando en venir, ¡debes hacerlo! Y si todavía estaba pensando en donar al código abierto, ¡debería hacerlo!

(Visited 11 times, 1 visits today)