Ocultar algo con CSS sin pantalla: ninguno o JavaScript

Question

¿Cómo puedo ocultar el div sin usar display:none o JavaScript?

En mi país, muchos Blackberry vienen con el soporte de CSS deshabilitado (las empresas de telefonía móvil no son tan buenas para los desarrolladores). Tengo texto que dice

<div class="BBwarn"> 
please activate your css support and a link 
</div> 

Quiero ocultar que una vez que el usuario activa soporte CSS, pero no puedo utilizar display:none;, ya que sólo es compatible con el firmware 4.6 BB. Es un sitio público y no puedo hacer que todos mis visitantes se actualicen.

¿Alguien sabe una solución para esto? Espero que la pregunta sea más fácil de entender ahora.

Actualización: Gracias a todos por las respuestas pero no puedo utilizar

• position: absolute
• desbordamiento

porque están disponibles a partir del firmware de Blackberry 4.6 y hasta

Answer 1

Puede colocarlo completamente fuera de la pantalla.

Pero yo, además, no soy un desarrollador de dispositivos móviles.

Answer 2

Esta es una forma común:

margin-left: -9999;

Answer 3

visibility: hidden; va a funcionar, pero el espacio ocupado por ese particular div seguirán apareciendo. Si va a utilizar el método negativo left-margin, recuerde que deberá establecer el position del objeto en absolute.

Answer 4

<div style="height:0;width:0;overflow:hidden;"> 
<!-- content here --> 
</div> 

Por cierto, esto es lo que hago para precargar imágenes, lo cual es bueno porque no usa javascript.

Visibilidad: oculto no hará lo mismo porque algunos navegadores son inteligentes y no realizarán la solicitud a menos que piense que es realmente visible.

Answer 5

cosas para probar:

• uso el índice z para ponerlo detrás de algún otro elemento
• movimiento fuera de la pantalla mediante el posicionamiento absoluto
• visbility: oculto
• hacer que el contenido " invisible "al configurar el fondo en el color de primer plano (solo funciona para el texto)
• opacidad: 0

pero la verdadera pregunta es: ¿por qué?

Answer 6

por qué no probar la sencilla:

position: absolute; 
left: -1000px; 

No puedo ver por qué no iba a funcionar.

Answer 7

¿Qué tal:

visibility: hidden; 

Eso debería ocultar el DIV, (tenga en cuenta la forma en que todavía se representará pero que no lo puedan, eso significa que tendrá espacio en el documento como si fuera visible, pero ser invisible (a diferencia de display: none; donde el div no se representará)).

Answer 8

Supongo que no desea utilizar JavaScript porque los Blackberry no lo admiten.

¿Qué tal si hicieras lo contrario y mostraras el bloque de código con JavaScript, en lugar de tratar de ocultarlo?

<script type="text/javascript"><!-- 
document.open(); 
document.writeln('<div class="BBwarn">'); 
document.writeln('please activate your css support and a link'); 
document.writeln('</div>'); 
document.close(); 
//--></script> 

Esto es un poco de un truco, pero no mostraría el texto con JavaScript desactivado ...

Answer 9

no estoy seguro de los porcentajes que estamos hablando que están usando < 4.6, pero si es tan importante para ti, entonces puedo ver una razón para aceptar que no puedes complacer a todas las personas todo el tiempo, y que se puede lograr una solución en cascada aceptable para esto. Probablemente con un enlace para explicar los beneficios de actualizar y habilitar css.

height: 0; 
overflow: hidden; 
visibility: hidden; 
color: #fff; 
background: #fff; 

cierto - que es mejor que asegúrese de que usted es css es bueno si usted está diciendo a alguien para encenderlo ... :-)

Answer 10

¿Qué le hace pensar que no es compatible display: none antes de la versión 4.6? ¿Lo has probado o vas por su documentación?

Tampoco soy desarrollador de dispositivos móviles, así que estoy haciendo lo que obtuve de la documentación.

El BlackBerry Browser 4.6 CSS Reference hecho menciones "Disponibilidad: BlackBerry® Device Software versión 4.6 o posterior" para la propiedad de presentación, pero su BlackBerry Browser 4.3 Content Developer Guide indica que 4.3 ya se apoyaron una versión muy limitada de la propiedad display, incluyendo display: none. Las versiones anteriores a 4.3 no admiten la propiedad display (de nuevo, yendo por el BlackBerry Browser developer documentation).

¿Puede asumir que sus usuarios tienen al menos la versión de firmware 4.3, o es tan inaceptable como suponer que tienen 4.6?

¿Has intentado simplemente establecer el ancho y la altura en cero? No estoy familiarizado con el BlackBerry (navegador), pero asumo que su compatibilidad con CSS no es perfecta, ciertamente en las versiones anteriores. No me sorprendería si esto funcionó:

.BBwarn { 
    display: none; /* for 4.6 and up */ 
    width: 0px; /* for 4.3 */ 
    height: 0px; 
} 

Pero entonces width y height sólo se admiten en todos los elementos a partir de la versión 4.3. Antes de eso, solo podían aplicarse a las etiquetas <button> y <img> y algunos tipos de <input> (según la documentación).

Así que tal vez la forma más segura de realmente hacer que funcione en todas las versiones de firmware de BlackBerry es utilizar una imagen para la advertencia, y usar CSS para establecer su ancho y altura a cero.

Si una imagen no es una opción (debido a problemas de lozalización más o menos, tal vez), un feo truco podría ser especificar una fuente de imagen vacía/ilegal y poner el texto de advertencia en el atributo alt.No sé si establecer su ancho y alto a cero aún ocultaría ese texto alternativo.

Answer 11

¿Qué es exactamente malo (el anteriormente mencionado)

ancho: 0 altura: 0 visibilidad: oculto

Answer 12

Anchura: 0 Altura: 0 visibilidad: oculto

... ¿El no siempre funciona con firmware 2.2 y versiones anteriores. A veces puede hacer que un elemento se oculte, pero reaparecerá con ciertas pulsaciones de teclas (como el guión bajo, por ejemplo).

Answer 13

O usted podría utilizar Active JavaScript

Y el uso de una imagen que dice "Activar CSS" y el estilo es el uso de "display: none".

Para que cada vez que se habilite la función correspondiente, estas advertencias no se muestren.

Como alternativa, supongo que está utilizando algún código del lado del servidor? Puede tratar de detectar las plataformas conocidas más comunes que admiten versiones específicas de css/javascript y entregar contenido en consecuencia. Puede que incluso no tenga que escribirlo todo usted mismo.

Answer 14

Tuve un problema similar cuando estaba tratando de personalizar un cuadro de selección utilizando javascript en BlackBerry Curve 8530 (OS 5.0). Sin embargo, el menú creado no podía ser oculto porque el css siguientes propiedades todavía no funcionan:

display 
overflow 
position: absolute 
visibility 
z-index 

Y y vuelva a crear los elementos HTML no funcionaba bien, así que me dieron aquí y podría resolver mi problema . Sé que mi respuesta no es exactamente sobre la pregunta planteada aquí, pero una vez que llegué aquí cuando tuve problemas, creo que no soy el único con lo que sucedió y que va a suceder.

De todos modos, incluso si esas propiedades CSS funcionaban, lo que necesitaba era algún código que pudiera funcionar en la mayoría de los modelos BB.

Mi solución se realizó utilizando todas las respuestas que se encuentran aquí. Fue simple. Hice dos clases:

.element 
{ 
    width: 100px; 
    height: 100px; 
    font-size: 12px; 
    color: black; 
    background-color: transparent; 
    border: 1px solid black; 
} 
.element_hidden 
{ 
    width: 0px; 
    height: 0px; 
    font-size: 0px; 
    color: white; 
    background-color: white; 
    border: none; 
} 

Sí. Hice dos de ellos por cada tipo de elemento que tenía en mi página. Inicialmente, todas las clases se establecen en class = "element_hidden", por lo que cuando el mouse está sobre el menú de selección de cuadros, todas las clases se cambian a class = "element" y se muestran y ocultan como invisibles/visibles .

¡Espero que esto pueda ser útil para alguien! ; D

Answer 15

Usted puede hacer algo como sabia:

.class{ 
opacity:0; overflow:hidden; visibility: hidden; height:0; 
} 

por ser más preciso puede agregar:

color:transparent; background-color:transparent;