Artículos con la etiqueta 'Hoja de Estilo'

Personalizar un formulario de forma gráfica

Se me ha preguntado cómo personalizar una forma gráfica, en particular, una forma de investigación como este en este blog. La técnica utilizada, o más bien que yo uso, obviamente válido para cualquier tipo de formulario. Lo que cambia es sólo la complejidad del trabajo que debe llevarse a cabo en función de la complejidad de la forma misma.

Leer más ...

Muy corto truco: CSS condicional y optimización

El uso de las condiciones dentro del navegador se utiliza a menudo para decidir qué estilo de carga de hojas de acuerdo con el tipo de navegador. Por ejemplo, podemos usar este código para cargar una hoja de estilo en particular cuando el navegador es Internet Explorer 6:

Leer más ...

Muy corto truco: la versatilidad de clases CSS

nei fogli di stile CSS. La mayoría de los expertos sabrán ya, pero a menudo me preguntan cuál es la diferencia entre class y la id de las hojas de estilo CSS. , è la possibilità di usare classi multiple. Una visión general de algunas diferencias de las advertencias y que se puede encontrar en la clase y el ID de CSS , sin embargo, una característica útil que distingue a class de id , es la habilidad de usar múltiples clases.

Leer más ...

CSS3 ha visto a nadie de Internet Explorer?

Yo no hago ...

1
2
3
4
5
6
7
8
9
p {
/ * Esquinas redondeadas * /
; /* CSS 3 */ border-radius: 9px; / * CSS 3 * /
; /* Opera */ -O-border-radius: 9px; / * Opera * /
; /* iCab */ -Icab-border-radius: 9px; / * iCab * /
; /* Konqueror */ -KHTML-border-radius: 9px; / * Konqueror * /
; /* Firefox */ -Moz-border-radius: 9px; / * Firefox * /
; /* Safari */ -Webkit-border-radius: 9px; / * Safari * /
}

Leer más ...

Safari, retire la frontera azul en los campos de entrada

Safari, el navegador de Apple también está disponible para Windows, produce un borde azul (azul frontera) al hacer clic en el interior de un campo input . Si bien en algunos casos puede ser agradable, en otros se convierte en realmente molesto! Para borrar, introduce en nuestra hoja de estilo:

1
2
/ * ____________________________ Retire la frontera azul * /
: 0 none } input {outline: none} 0

O, en su defecto, directamente como un atributo en la etiqueta input :

1
"outline: 0 none" ... / > < input style = "esquema: 0 ninguno" ... />

Leer más ...

Accesibilidad y Usabilidad: discreta Javascript

Permitir a los usuarios interactuar con una página web se ha producido en los últimos años un aumento significativo en el uso de secuencias de comandos del lado del cliente: código Javascript puede responder en tiempo real y manipular una amplia gama de información. La Web 2.0 es la última expresión de esta capacidad de interacción, donde el usuario final - el navegador participa activamente en la construcción y a 'la evolución del sitio Web, interactuar con él y ayudarte a ti mismo. Se conoce como de contenido generado por el usuario (UGC o - el contenido generado por el usuario) que ve el "navegador" ciertamente menos pasiva!

Para lograr esta interacción, lo que permite al usuario final para agregar su aportación, hemos desarrollado una serie de técnicas que han alterado el aspecto y el comportamiento de las páginas web (estática hasta hoy, pero ahora similar a las aplicaciones tradicionales de escritorio) en los últimos años. Modificar el contenido de una página, enviar archivos, dar su voto a un vídeo o un documento, registrar o editar sus datos, son sólo algunas de las operaciones en muchos servicios de adaptaciones (2.0 beta) en la Web

Leer más ...

Software Net

Le pasó a encender la tele, Net TV, como había sucedido con el Radio Radio Net para convertirse, por no hablar de la música! Ahora bien, como se ha mencionado en otras críticas, es oficial para el software se convierta en breve en Software Net!

Adobe , que como sabemos ha adquirido recientemente Macromedia, oficialmente la Aplicación Web - Web 2.0 - en RIA real (Rich Internet Applications) con el anuncio de querer asumir el conocido software de edición web Photoshop. Es el último " acuerdo entre Adobe   y Photobucket   para hacer de la tecnología en línea disponible para remezclar y edición de vídeo. Gracias a la nueva tecnología desarrollada para Flash 9 con ActionScript 3.0 , Adobe apunta alto, anticipando que dentro de seis meses será la versión en línea disponible de Photoshop basada precisamente en la tecnología Flash.

De hecho, las nuevas capacidades de ActionScript 3.0 (que implican proyectos como Flex y Apollo - ver tambien Web2.0: Adobe intenta con Apolo y Ajax Rich Internet Application ) lo convierten en el candidato perfecto para la ejecución de bienes Ajax RIA en la Web , por otro lado, se ve expulsado de su trono en este nuevo escenario. A pesar de los innumerables Framework Ajax, algunos excelentes productos en los últimos años, Flash proporciona un entorno más avanzado y fácil de manipular. Además, podemos hablar de uno de los del mundo más ampliamente Plugin: Flash tiene de hecho detrás de un par de años más que el Ajax y derivados.

Además, es obvio que Adobe Flash elegir, que siendo ahora el productor. Sin embargo, hay cuestiones técnicas que pueden ser considerados - hasta la fecha - sólo para ser resueltos de una manera armoniosa que utilizan tecnologías como Flash. Echando un vistazo a la nueva ActionScript 3.0, te das cuenta inmediatamente del enorme potencial que ofrece esta nueva plataforma de desarrollo. El estándar ECMA de la lengua y los nuevos objetos proporcionados por el Marco, le permiten llegar a un nivel de detalle posible con las versiones anteriores de Flash: uno para todos, por ejemplo, la capacidad de acceder a los datos de una imagen cargada desde Bitmap disco!

El ataque de Adobe parece svolgerersi entonces en dos frentes distintos que tienen en común la tecnología Flash (que recuerde siempre ha sido la capacidad de interactuar activamente con el navegador y luego con JavaScript en el cliente y server-side scripting).

El primer ataque tiene lugar fuera, en el lado del navegador, donde la tecnología Apollo está realmente propone como una alternativa al núcleo habitual de diferente piattoforme disponibles en la actualidad (Windows, Mac OS, Linux, etc ...); utilizar Adobe Apollo , entonces, en lugar del navegador para un mejor rendimiento y aplicaciones (RIA) de bienes impensables, evitando así la incompatibilidad entre Internet Explorer, Firefox y el compañerismo. Además, Apollo ofrece una plataforma única para el desarrollo, como JavaScript-Ajax, pero sin problemas de compatibilidad. Este último punto es un importante revés a tecnologías como Ajax que todavía sufren en gran medida los problemas de compatibilidad entre navegadores; no olvidemos, también, toda la cuestión de la rentabilidad (render) CSS gráficos!

El otro ataque se produjo desde el interior, golpeando el marco Ajax con la tarjeta flash. El elemento ganador en esta estrategia es el uso de Flash, la tecnología Flash, que se utiliza tanto en Flex , tanto en Apollo , tanto en versión autónoma como ya estamos acostumbrados a ver (archivo SWF sencillo, por ejemplo)! No hay duda de que este escenario es muy atractivo para los desarrolladores, y la Web. Lo que se hace inmediatamente reutilizable flash de realización de diversas maneras, sin obligarme a cambiar una sola línea de código y, además, sin tener que preocuparse acerca de la compatibilidad!

Todo esto, en mi opinión, es un importante paso adelante, un avance de grandes proporciones que también involucra al mundo de los juegos y Marketing. Volveremos a hablar pronto, no se equivoquen!

Leer más ...

Escóndeme

Una característica de las hojas de estilos (los archivos. CSS) es que puede ser especificado de acuerdo con la media de salida. La hoja de estilo permiten especificar la misma clase, el mismo ID que el TAG, etc ... para los diferentes medios de comunicación. Por ejemplo, puedo escribir un archivo CSS con la siguiente sintaxis.:

1
2
3
4
5
6
7
@ Pantalla de Media {
display : none } Div # myBox {display: none}
}

@ Medios de impresión {
display : block } div # myBox {display: block}
}

non sarà visibile sul browser, sullo schermo, ma quando provo a stampare la pagina troverò un contenuto diverso da quello che mi aspettavo. El que viene al final, es que el contenido del DIV con id myBox no será visible en el navegador, en la pantalla, pero cuando intento imprimir la página encontrará un contenido diferente de lo que esperaba.
Los motores de búsqueda, arañas, rastreadores, o agregadores, normalmente (por ahora) no resuelven el archivo css. Ellos están interesados ​​en el contenido, no el formato visual. Sin embargo, esta técnica puede tener implicaciones interesantes, si no molestar. Debido a las características de los sistemas de indexación de una situación como la que se muestra a continuación sería por lo menos curiosa:

1
2
3
4
5
6
7
"visibile_a_video" > < div id = "visibile_a_video">
p > < p > El contenido visible en la pantalla </ p >
</ div >

"visibile_in_stampa" > < div id = "visibile_in_stampa">
p > < p > Contenido visible para imprimir </ p >
</ div >

Correlacionada con un archivo CSS como este.:

1
2
3
4
5
6
7
8
9
@ Pantalla de Media {
display : block } div # visibile_a_video {display: block}
display : none } # Visibile_in_stampa div {display: none}
}

@ Medios de impresión {
display : none } # Visibile_a_video div {display: none}
display : block } div # visibile_in_stampa {display: block}
}

Google, por ejemplo, indicizzerebbe tanto los contenidos de nuestro HTML, aunque en el video sería capaz de ver sólo una. Si imprimimos la página encontraría una sorpresa con nuevos contenidos. El truco, sin embargo, se dio a conocer mediante la eliminación de la aplicación de estilos en los navegadores que lo soportan. Normalmente nadie se realiza una operación de este tipo cuando se navega por Internet. Dicha encuesta haría bien sólo después de encontrar una contradicción entre lo que es visible en la pantalla y lo que está impreso!

Hasta la fecha no he visto casos sobresalientes de este tipo de manipulación a través de CSS. Hubo un tiempo en que estaban tratando de aumentar la visibilidad en Internet mediante la inserción de una serie de textos, palabras, del mismo color que el fondo de la página Web, a fin de hacer de este artificio ojos oscuros de los surfistas. Por el momento se advierte a los motores de indexación de éstos contra el "fraude". Tal vez es hora de anticipar un bromista antes de establecer un precedente?

Actualmente la hoja de estilos le permite especificar una serie de tipo de medio de salida. Para obtener una lista completa, vea el W3C .

Leer más ...

Las clases y los identificadores en CSS

nei fogli di stile. He aquí algunos consejos breves sobre cómo utilizar class y la id de las hojas de estilo. Tenga en cuenta que una vez que el uso de técnicas avanzadas de JavaScript, como el uso de motor de Ajax, puede entrar en conflicto con el consejo que figura aquí! Y vamos a ver por qué al final.

Leer más ...

Las maravillas de la CSS2.0 +

Debido a la incompatibilidad quizá estilística y de salida - todavía - entre los distintos navegadores, no todo el mundo sabe sobre el vasto potencial de hojas de estilo. Queremos mostrar, a continuación, algunas de las características de la sintaxis desconocida para la mayoría de la gente CSS y para recordarnos cuán poco - a menudo - para aprovechar al máximo las herramientas que tenemos disponibles.

Nota: Todas las muestras fueron probados en Firefox 1.5.0.5

Seleccionar por Atributos

1
2
3
4
5
"myInput" > < div id = "myInput">
"submit" value = "invia" / > < input type = "submit" value = "submit" />
"button" value = "Pulisci" / > < input type = "button" value = "Borrar" />
"button" value = "Annulla" / > < input type = "button" value = "Cancelar" />
</ div >
1
2
3
type = submit ] { color : #f00 } div # myInput input [type = submit] {color: # f00}
type = button ] { color : #0f0 } div entrada # myInput [type = botón] {color: # 0F0}
value = Annulla ] { color : #00f } div # myInput entrada [valor = Cancelar] {color: # 00f}

Esta función, que se refiere a menudo al cono CSS2 avanzada permite cosas strabiglianti, si reflexionamos por un momento. La mayor ventaja de la ottinene el lado HTML, donde no hay necesidad de distinguir entre clases o etiqueta de identificación en el CSS. Son precisamente los atributos - de lo contrario la actualidad - el TAG para indicar que se asocian estilo. Además, cualquier atributo de la etiqueta puede ser tomado como un selector de: alt, título, accesskey, etc ...

Selección para la profundidad

Este tipo de selección es nada menos que espectacular, si se tiene en cuenta que se puede agregar a la anterior. Esto le permite definir la jerarquía de los elementos. Mirando el ejemplo de abajo nos daremos cuenta inmediatamente del extraordinario alcance de este tipo de selección, lo que mantiene el código HTML limpio y sin indicadores innecesarios.

1
2
3
4
5
6
7
"myBox" > < div id = "myBox">
p > < p > El párrafo 1 </ p >
p > < p > Apartado 2 </ p >
p > < p > Apartado 3 </ p >
p > < p > El apartado 4 </ p >
p > < p > El apartado 5 </ p >
</ div >
1
2
3
p { color : #f00 } div # myBox> p {color: # f00}
p + p { color : #0f0 } div # myBox> p + p {color: # 0F0}
p :last-child { color : #00f } # MyBox div> p: last-child {color: # 00f}

e – fantastico – first-letter ! De hecho, acaba de concluir este sobrevuelo, así como last-child existe first-child y - fantástico - first-letter ! Pruébelo.
Por supuesto, apenas hemos tocado el tema, bastante extensa para decir la verdad, que ve el CSS se desarrolló como una herramienta para la definición de layput de páginas. Hay otros selectores y comportamientos, y una gran noticia para los archivos CSS específicos para la generación futura.

Leer más ...