Re: [Ovillo] Problema con :focus en WebKit (Safari y Chrome)
Yo, hasta ahora, sólo había utilizado :focus para elementos de formulario. En este caso si que se comportan igual en todos los navegadores. Entiendo que tú lo usas en enlaces, no? Quizá lo que buscas es una combinación entre active y visited?? No lo sé. El 04/08/2010 22:45, Hernán Beati - SaberWeb.com.ar escribió: Hola a todos! Recurro a los especialistas en CSS, ya que no encuentro pistas por Google: ¿alguien conoce alguna solución al modo en que Safari y Chrome manejan la seudo-clase :focus? Todos los demás navegadores, cuando uno pulsa un elemento con el mouse, consideran que el estado :focus permanece, sigue sucediendo, en tanto uno no pulse otra cosa distinta, lo cual permite soltar el dedo del botón del mouse mientras -por ejemplo- miramos varios segundos una foto que apareció al hacer foco en un elemento de una lista. Queda a la vista esa imagen que tuvo por última vez el foco. Pero WebKit (Safari, Chrome) parece que considera que el estado :focus sucede de manera momentánea, solo mientras permanecemos pulsando con el dedo el mouse; al parecer considera a :focus idéntico al estado :active. En cuanto soltamos el dedo, adiós foco... ¿Alguien conoce alguna solución que permita diferenciar estos dos estados en WebKit? Gracias de antemano! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problema con :focus en WebKit (Safari y Chrome)
Se me ocurre que en este caso, y si hernan esta utilizando :focus para mostrar fotos, podria tener las fontos como background de una textarea (lo cual seria un hack guarro), aunque el seguramente tiene la necesidad de que recoja el focus un UL o algo asi. El otro dia, buscando una forma de acelerar la web un 800% (aun creo que es posible, aunque no he encontrado la tecnica) encontre este artefacto: http://javascript.nwbox.com/NWEvents/tester.html MWEvents. Se trata de programacion, no CSS, pero permite aplicar efectos al HTML mediante selectores de CSS. 2010/8/5 Dani F. Serch daniou...@gmail.com: Yo, hasta ahora, sólo había utilizado :focus para elementos de formulario. En este caso si que se comportan igual en todos los navegadores. Entiendo que tú lo usas en enlaces, no? Quizá lo que buscas es una combinación entre active y visited?? No lo sé. El 04/08/2010 22:45, Hernán Beati - SaberWeb.com.ar escribió: Hola a todos! Recurro a los especialistas en CSS, ya que no encuentro pistas por Google: ¿alguien conoce alguna solución al modo en que Safari y Chrome manejan la seudo-clase :focus? Todos los demás navegadores, cuando uno pulsa un elemento con el mouse, consideran que el estado :focus permanece, sigue sucediendo, en tanto uno no pulse otra cosa distinta, lo cual permite soltar el dedo del botón del mouse mientras -por ejemplo- miramos varios segundos una foto que apareció al hacer foco en un elemento de una lista. Queda a la vista esa imagen que tuvo por última vez el foco. Pero WebKit (Safari, Chrome) parece que considera que el estado :focus sucede de manera momentánea, solo mientras permanecemos pulsando con el dedo el mouse; al parecer considera a :focus idéntico al estado :active. En cuanto soltamos el dedo, adiós foco... ¿Alguien conoce alguna solución que permita diferenciar estos dos estados en WebKit? Gracias de antemano! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo -- -- ℱin del ℳensaje. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problema con :focus en WebKit (Safari y Chrome)
He probado una pagina que utiliza esta idea (delegacion de eventos para capturar eventos que coinciden con expresiones de selectores CSS) y parece funcionar en Chrome. http://demos.flesler.com/jquery/listen/ La linea de Hover and click me. Esto deberia funcionar como lo que necesita Hernan, creo. 2010/8/5 Tei oscar.vi...@gmail.com: Se me ocurre que en este caso, y si hernan esta utilizando :focus para mostrar fotos, podria tener las fontos como background de una textarea (lo cual seria un hack guarro), aunque el seguramente tiene la necesidad de que recoja el focus un UL o algo asi. El otro dia, buscando una forma de acelerar la web un 800% (aun creo que es posible, aunque no he encontrado la tecnica) encontre este artefacto: http://javascript.nwbox.com/NWEvents/tester.html MWEvents. Se trata de programacion, no CSS, pero permite aplicar efectos al HTML mediante selectores de CSS. 2010/8/5 Dani F. Serch daniou...@gmail.com: Yo, hasta ahora, sólo había utilizado :focus para elementos de formulario. En este caso si que se comportan igual en todos los navegadores. Entiendo que tú lo usas en enlaces, no? Quizá lo que buscas es una combinación entre active y visited?? No lo sé. El 04/08/2010 22:45, Hernán Beati - SaberWeb.com.ar escribió: Hola a todos! Recurro a los especialistas en CSS, ya que no encuentro pistas por Google: ¿alguien conoce alguna solución al modo en que Safari y Chrome manejan la seudo-clase :focus? Todos los demás navegadores, cuando uno pulsa un elemento con el mouse, consideran que el estado :focus permanece, sigue sucediendo, en tanto uno no pulse otra cosa distinta, lo cual permite soltar el dedo del botón del mouse mientras -por ejemplo- miramos varios segundos una foto que apareció al hacer foco en un elemento de una lista. Queda a la vista esa imagen que tuvo por última vez el foco. Pero WebKit (Safari, Chrome) parece que considera que el estado :focus sucede de manera momentánea, solo mientras permanecemos pulsando con el dedo el mouse; al parecer considera a :focus idéntico al estado :active. En cuanto soltamos el dedo, adiós foco... ¿Alguien conoce alguna solución que permita diferenciar estos dos estados en WebKit? Gracias de antemano! -- Hernán Beati -- -- ℱin del ℳensaje. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problema con :focus en WebKit (Safari y Chrome)
El 05/08/2010 04:06 a.m., Dani F. Serch escribió:
Entiendo que tú lo usas en enlaces, no?
Quizá lo que buscas es una combinación entre active y visited?? No lo sé.
En realidad, Dani, uso una combinación de :active y :focus, y sí, lo uso
en enlaces.
Y gracias Tei por la sugerencia, pero justamente el desafío cuando
apliqué este código fue hacerla solo con CSS, sin scripts.
Les copio el código que uso a ver si alguien lo quiere probar:
div class=contenedorGaleria
ul class=galeria1
lia href=javascript:void(0);01img src=1.jpg alt=gato //a/li
lia href=javascript:void(0);02img src=2.jpg alt=perro //a/li
lia href=javascript:void(0);03img src=3.jpg alt=liebre
//a/li
lia href=javascript:void(0);04img src=4.jpg alt=conejo
//a/li
lia href=javascript:void(0);05img src=5.jpg alt=leon //a/li
lia href=javascript:void(0);06img src=6.jpg alt=tigre //a/li
lia href=javascript:void(0);07img src=7.jpg alt=pato //a/li
lia href=javascript:void(0);08img src=8.jpg alt=cisne
//a/li
lia href=javascript:void(0);09img src=9.jpg alt=caballo
//a/li
lia href=javascript:void(0);10img src=10.jpg alt=gallo
//a/li
/ul
/div
Y la parte CSS:
.contenedorGaleria {
width: 480px; /* el ancho total de la galería */
height: 400px; /* el alto total de la galería */
margin: 0px auto;
background: #EE url(1.jpg) no-repeat scroll 0px 0px; /* la imagen
que se verá por defecto, ubicada en el contenedor */
border: 1px solid #AA;
text-align: center;
}
.galeria1 {
position: relative; /* para que sirva de coordenada a los absolutos
internos que tenga */
width: 480px; /* el ancho de las imágenes */
margin: 360px 0px 0px 0px; /* el margen superior debe ser igual al alto
de la imagen, para que la lista baje */
padding: 0;
list-style-type: none;
}
.galeria1 img {
border: none;
}
.galeria1 li {
float: left;
}
/* estos son los enlaces con numeritos del menú inferior */
.galeria1 li a, .galeria1 li a:visited {
float: left;
width: 32px;
margin: 6px 2px 0px;
padding: 3px 0;
background-color: #FF;
border: 1px solid #44;
color: #00 !important;
text-decoration: none !important;
}
.galeria1 li a img {
position: absolute; /* para posicionarla con relación al contenedor */
visibility: hidden; /* las imágenes están ocultas */
left: 0px;
top: -360px; /* la imagen se sube, compensando el margin que había
bajado a todo el menú de numeritos */
border: none;
}
.galeria1 li a:hover {
background-color: #DD; /* efecto de rollover */
}
.galeria1 li a:active img, .galeria1 li a:focus img {
visibility: visible; /* se muestra la imagen al hacer click (foco o
pulsarla) */
}
.galeria1 li a:active, .galeria1 li a:focus {
background-color: #C2C4D0;
}
Las últimas dos declaraciones son las que tienen problemas en WebKit, ya
que usan :focus y :active (ya no sé cuál de los dos será el problemático).
¿Alguna pista?
Gracias!
--
Hernán Beati
http://www.saberweb.com.ar
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Duda General
En el mail anterior me olvide de adjuntar el link! Son tips tipo explicativos de buenas practicas. Yo los tome a algunos consejos para mantener una buena disciplina a la hora de escribir codigo html y css. http://www.pixelovers.com/css-consejos-buenas-practicas-11635 Saludos! El 04/08/2010, a las 16:16, Helmán escribió: Prueben esta pagina para los tips: http://www.htmldog.com/ El 4 de agosto de 2010 08:57, Walter Carlzon peixedopar...@gmail.comescribió: Aqui te paso un link que tengo hace tiempo, que tienes algunos tips de HTML y CSS en general, es bastante estricto pero me parecen buenas practicas. Saludos El 04/08/2010, a las 05:05, Nitos escribió: Buenas, me tengo una pregunta hace unos días y es: ¿Cuales serian los mejores tips de CSS para los principiantes? Saludos y Gracias! (mi primer pregunta en la lista) - Twitter: @josernitos Facebook: josernitos Flickr/Digg/Stumbleupon: nitos ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Duda General
http://www.librosweb.es ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
