Validando el CSS de Thickbox

9/jul/2007 18

Durante un proyecto en específico se deció utilizar jQuery como librería para todo lo que fuera JavaScript. Reticente (ya que en ese entonces me animaba con Prototype y Script.aculo.us), comencé a utilizarlo y me fascinó como tenía grandes prestaciones, al momento de modificar el código HTML antes de ser renderizado. Se podían inyectar classes, ID‘s y otros elementos dentro del código muy facilmente, lo que me hizo encariñarme con él. Para efectos, no se quedaba atrás (aunque en mi opinión, un poco toscos) y determinamos utilizar Thickbox para evitar los ya obsoletos pop-ups para abrir imagenes y nuevas ventanas dentro de la misma pagina (les había comentado hace mucho de lightbox, pero éste funciona con Prototype). Enfin, Thickbox es muy bueno para lo que hace, pero teníamos un pequeño gran problema: el cliente requería que todo el CSS validara. Y Thickbox tiene 3 propiedades que de por sí no validan y que son muy importantes: dan la trasparencia a la ventana. Ya las comentamos anteriormente en un artículo sobre transparencias: opacity, -moz-opacity y filter: alpha(). Opacity valida sólo en CSS3 (aún en desarrollo), -moz-opacity es propietario de Mozilla y no valida, y filter: alpha() es un invento de Microsoft y menos aún valida.

CSS no valida

Pequeño gran problema.

Bueno a pensar. Googleando, en los foros de Thickbox ya han posteado sobre el tema y no existe solución. Miré Lightbox y mi dí cuenta que no tiene esas propiedades en su CSS, y la transparencia es dada a través de JS pero, nuevamente, es através de Prototype y no soy un JS-Master como para hacerlo yo mismo con Jquery. No se me ocurrió nada mejor que sacar esas propiedades del CSS y meterlas dentro del thickbox.js, lo que hace que valide perfectamente el código. Total, cuando renderice el HTML recién aparecerán. Además, saqué un _hack para IE6 y lo puse en una nueva hoja de estilo, utilizando por supuesto comentario condicional.

Voilá. Funcionó.

#TB_overlay {
     position: absolute;
     top: 0;
     left: 0;
     z-index:100;
     width: 100%;
     height: 100%;
     background-color: #000;
     /* ———————————– comentado aquí y copiado al thickbox.js
     filter:alpha(opacity=60);
     -moz-opacity: 0.6;
     opacity: 0.6;
     —————————————————————————- */

}

.append("<div id=’TB_overlay’ style=’filter:alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6;’></div><div id=’TB_window’></div>");

CSS validando

La versión utilizada en ese entonces de Thickbox fue la 2.1. Actualmente está la 3, la que se hace muy difícil validar su CSS ya que rescata comandos JS dentro de las mismas propiedades CSS (principalmente parael alto y ancho de la ventana del browser).

Ver ejemplo funcionando.

Bajar este ejemplo (.zip).

Links:

Comentarios

  1. Buzu [#]

    bueno e articulo… yo en lo personal no uso frameworks aun que estoy con el desarollo de Obja decir verdad me e atorado por falta de tiempo… pero aun asi creo que el articulo es muy bueno para quien usa esos frameworks y efectos prefabricados.

  2. Buzu [#]

    por cierto… no eh podido contactarte via la sección de contacto, me interesaría contactar contigo para alguna entrevista para mi blog y me gustaría que tu sitio fuera un mirror del ultimo post que puse en mi blog Amo mis short cuts y de esa manera darle un poco de mas difucion a esta idea que planteo, la cual creo es una buena idea….
    Bueno gracias por tu tiempo y disculpa… se que este no es el lugar para este comentario pero como dije no eh podido hacerlo atravez de la sección de contacto

  3. CSSLab Admin [#]

    Buzu te felicito por OBJ de verdad se ve muy bueno, me encanta que sea una iniciativa de latinoamerica, estare atento a sus avances, y gustoso le hago un review cuando sea lanzado. Dificil competir si con los muchos ya existentes, pero le tengo fe. En cuanto al form de contacto, ya arregle el plugin y funciona perfect. escribeme desde ahi sin problemas, y te respondo ASAP. Salu2.

  4. isaacDM [#]

    SAludos jorge, buen punto, usualmente siempre es el mismo callejon sin salida, inyectar con JS para validar el código apriori…
    Hace rato encontre un link para un proyecto que se llama lightwindow, es como lightbox, pero permite mostrar SWFs, PDFs, Videos etc… checalo

    http://stickmanlabs.com/lightwindow/

    Salu2 queEstesBien

  5. CSSLab Admin [#]

    isacc, sconocia tb hace poco lightWindow y se ve bien interesante, aunq por principio es el mismo: abrir un iframe. a traves de el, puedes abrir practicamente cquier archivo. Gracias, y salu2.

  6. CSSLab Admin [#]

    Buzu interesante lo de accesskey… tienes ejemplos practicos??

  7. Buzu [#]

    claro, mi web es un ejemplo practico de ello…

  8. CSSLab Admin [#]

    no me funciona……. usando OSX, safari ni FF2……. has probado keywatcher.js??

  9. Buzu [#]

    Estas seguro? yo tengo OSX y me funciona de lujo en safari y en FF, quizá no estas presionando la tecla correcta, es CTRL + La letra del enlace, ejemplo

    CTRL+W

    A mi me funciona y se me haría raro que no funcionara en estos dos navegadores ya que es un estándar.

    El problema con keywatcher es que no agrega mucha usabilidad por ejemplo si el usuario no tiene activado el javascript.

    Tal vez valla a algún apple store a checar en otras OSX pero se me hace raro.

  10. fearlex [#]

    Aun no me animo a aprender Ajax, quizas mas adelante cuando domine mas Javascript 😀

  11. Rob Honig [#]

    Nice to see how you did it with version 2.1. Unfortunately it does not work with version 3.. but i have the idea..

    Saludos

  12. Fede [#]

    Buenísimo!!!!…hace tiempo que usaba thickbox y no tenía ni idea cómo hacer para validar dichas propiedades de la css. Yo venía de mootools y ahora me enganché con JQuery….lo que me encanta es que está hecho para desarrolladores y diseñadores! 😉

    Un abrazo y gracias por compartir tu conocimiento!.

  13. Antonio [#]

    Hola, estoy trabajando con lightwindow y me sale el mismo problema con opacity, la diferencia es que en el css no está una vez como en tu ejemplo sino muchas veces repetido el opacity, como se soluciona eso?? comentando todos o como

  14. Antonio [#]

    Hola, al buscar con dreamweaver me parecio que eran muchos, pero fue error mío. sin embargo lo que hice fue borrar el opacity y listo, ya me valida y funciona perfectamente

    La duda que me queda, es para que estaba si funciona bien igual….

  15. Jorge Epuñan [#]

    Antonio, la propiedad opacity hace parte de css3 y es la oficial segun la W3C. la incorpora Safari y Opera, Mozilla tiene el propio q es -mozz-opacity y Microsoft tb, filter: alpha(). si sacas opacity no se vera transparnte en safari, por ejemplo. para mas detalles, lease Transparencias a prueba de browsers

  16. Satowan [#]

    Se agradece la idea, como para concluir podriamos decir que cualquier codigo que no sea validado en el .css puede ser trasladado al .js correspondiente

  17. Jorge Epuñan [#]

    Asi es Satowan, es una manera de pasar la validación y hacerlo funcionar tal como debería. Eso implica sacarlo del CSS y del HTML para pasarlo por JS.

    Salu2.

  18. Ricardo [#]

    A mí lightbox me da errores en validación CSS. ¿Son solucionables?:
    URI : http://www.fernandobartomeo.com.ar/css/lightbox-es.css
    13 #prevLink, #nextLink Propiedad no válida : background-image Tentativa de encontrar un punto y coma antes del nombre de la propiedad. Añádalo
    0 #prevLink, #nextLink Propiedad no válida : background-image Error de análisis sintáctico null
    13 #prevLink, #nextLink La propiedad data no existe : image/gif
    13 #prevLink, #nextLink Error de análisis sintáctico base64,AAAA)

    Gracias!!

Responder a Fede ×

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab