Me preguntó cómo personalizar una forma gráfica, en particular, un cuadro de búsqueda como la que en este blog. La técnica utilizada, o mejor dicho, que yo uso, obviamente es válido para cualquier tipo de forma del módulo. Lo que cambia es sólo la complejidad del trabajo a realizar en función de la complejidad de la misma forma.
Artículos con la etiqueta 'hoja de estilo "
Personalización de un formulario de forma gráfica
Truco muy corto: condicional CSS y optimización
El uso de condiciones dentro del navegador se utiliza a menudo para decidir qué hoja de estilo para la carga en función del 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:
Truco muy corto: la versatilidad de clases CSS
nei fogli di stile CSS. Mayoría de los expertos ya saben, pero a menudo me preguntan cuál es la diferencia entre class y id de la CSS. , è la possibilità di usare classi multiple. Una visión general de algunas diferencias y las advertencias se pueden encontrar en la clase y la identificación de CSS , sin embargo, una característica útil que distingue a class de id , es la capacidad de utilizar varias clases.
CSS3: ¿alguien ha visto el Internet Explorer?
Sólo que no ...
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 * / } |
Safari, eliminar el borde azul en los campos de entrada
Safari, el navegador de Apple, disponible para Windows, produce un borde azul (borde azul) al hacer clic en un campo input . Si en algunos casos, puede ser agradable, los demás se convierte realmente molesto! Para borrar sólo tiene que enchufar en nuestra hoja de estilo:
1 2 | / * ____________________________ Quitar borde azul * / : 0 none } de entrada {outline: none} 0 |
O, alternativamente, directamente como un atributo en la etiqueta de input :
1 | "outline: 0 none" ... / > < entrada style = "esquema: 0 ninguno" ... /> |
Accesibilidad y Usabilidad: Javascript discreto
Permitiendo a los usuarios interactuar con una página Web en los últimos años se ha producido un aumento significativo en el uso de secuencias de comandos del lado del cliente: código Javascript se puede responder en tiempo real y manipular una gran variedad de información. La Web 2.0 es la última expresión de esta capacidad de interacción, en la que el usuario final - el usuario participa activamente en la construcción y de 'la evolución del sitio Web, interactuar con él y ayudarte a ti mismo. Se conoce como contenido generado por usuarios (UGC o - contenido generado por usuarios) que ve en el "navegador" definitivamente no pasivo!
Para lograr esta interacción, lo que permite al usuario final para añadir su aportación, hemos desarrollado una serie de técnicas que han cambiado el aspecto y el comportamiento de las páginas Web (estática hasta ahora, pero ahora es similar a las aplicaciones tradicionales de escritorio) en los últimos años. Cambiar el contenido de una página, enviar archivos, dar su voto a un video o un documento, registrar o cambiar sus datos personales, son sólo algunas de las más ricas en las operaciones de muchos servicios (2.0 beta) en la Web
Software Net
Le pasó a encender la tele, Net TV, como le había pasado a convertirse en Radio Net Radio, por no hablar de la música! Ahora, como se ha mencionado en otros posts, ya es oficial por el software para transformar a corto plazo Software Net!
Adobe , que sabemos que ha adquirido recientemente Macromedia, formaliza la solicitud Web - Web 2.0 - en reales RIA (Rich Internet Applications) con el anuncio de querer tomar en la popular web de software de edición de Photoshop. Es el último " acuerdo entre Adobe y Photobucket poner a disposición de una tecnología en línea para la edición y mezcla de video. Gracias a la nueva tecnología desarrollada para Flash 9 con ActionScript 3.0 , Adobe apunta alto, anticipando que en seis meses estará disponible la versión online de Photoshop basada precisamente en la tecnología Flash.
De hecho, las nuevas posibilidades de ActionScript 3.0 (que incluye proyectos tales como Flex y Apolo - véase también Web2.0: Adobe está tratando de Apolo y de aplicaciones Ajax Rich Internet ) hace que sea el candidato perfecto para la aplicación de la verdad en la Web RIA Ajax , por otro lado, vemos derrocado de su trono en este nuevo escenario. A pesar de las innumerables Marco Ajax, algunos excelentes, producidos durante los últimos años, Flash ofrece un entorno más avanzado y fácil de manipular. También se habla de uno de los plugins más populares del mundo: Flash tiene detrás unos cuantos años mayor que el Ajax y sus derivados.
Por otra parte, es obvio que el Adobe Flash elige, por ser el productor de hoy. Sin embargo, hay cuestiones técnicas que pueden ser considerados - hasta la fecha - sólo para ser resuelto en una aplicación armoniosa de tecnologías como Flash. Echando un vistazo a la nueva ActionScript 3.0 que inmediatamente se dan cuenta de las enormes posibilidades de desarrollo que ofrece esta nueva plataforma. La lengua estándar ECMA y los nuevos elementos puestos a disposición por el marco le permiten alcanzar un nivel de detalle posible con versiones anteriores de Flash: un lugar, por ejemplo, la posibilidad de acceder a los datos de una imagen cargada de mapa de bits duro!
El ataque de Adobe parece tener lugar en dos frentes tan distintos que tienen en común la tecnología Flash (que recuerdo siempre ha sido la posibilidad de interactuar activamente con el navegador y luego con el lado del cliente JavaScript y server-side scripting).
El primer ataque se lleva a cabo fuera, en el lado del cliente, donde la tecnología Apolo es realmente propuesto como una alternativa al núcleo habitual de las diferentes plataformas, disponible hoy en día (Windows, Mac OS, Linux, etc ...); el uso de Adobe Apolo , entonces, en lugar navegador para un mejor rendimiento y aplicaciones (RIAs real) impensable, evitando así la incompatibilidad entre Internet Explorer, FireFox y el compañerismo. Además, Apolo ofrece una sola plataforma de desarrollo, JavaScript, como Ajax, pero sin problemas de compatibilidad. Este último punto constituye un grave obstáculo a tecnologías como Ajax, que siguen siendo en gran medida los problemas de compatibilidad con los navegadores, no se olvide, por otra parte, hizo todo el tema (rendering) gráfica CSS!
El otro ataque es desde el interior, llegando a Ajax Framework con una tarjeta Flash. El elemento de la victoria en esta estrategia radica en el uso de Flash, la tecnología Flash, que es aplicable tanto en Flex , tanto en Apolo , tanto como una versión independiente que ya están acostumbrados a ver (simple archivo SWF, por ejemplo)! No hay duda de que este escenario es muy atractivo para los desarrolladores, y la Web. Lo que se hace inmediatamente realizable de Flash reutilizables de diversas maneras, sin que me obliga a cambiar una sola línea de código y, además, sin tener que preocuparse acerca de la compatibilidad!
Esto, en mi opinión, es un importante paso adelante, un cambio de proporciones considerables, que también involucra al mundo de los juegos y Marketing. Volveremos a hablar pronto, no te equivoques!
Escóndeme
Una característica de las hojas de estilo (CSS files.) se especificará en función del medio de salida. De hojas de estilo permiten especificar la misma clase, la misma etiqueta el mismo ID, etc ... para diferentes medios. Por ejemplo, puedo escribir un archivo CSS con la siguiente sintaxis.:
1 2 3 4 5 6 7 | @ Media screen { display : none } div # mi_maquina {display: none} } @ Media print { display : block } div # mi_maquina {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. Lo que viene al final, es que el contenido de la DIV con id myBox no será visible en la pantalla del navegador, pero cuando trato de imprimir la página encontrará un contenido diferente de lo que esperaba.
Los motores de búsqueda, arañas, rastreadores y los agregadores, por lo general (por ahora) no resuelven el archivo css. Ellos están interesados en ver el contenido, no el formato. Sin embargo, esta técnica podría tener implicaciones interesantes, si no inquietante. 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 |
Correlacionado con un archivo CSS de esta manera.:
1 2 3 4 5 6 7 8 9 | @ Media screen { display : block } # Visibile_a_video div {display: block} display : none } div # visibile_in_stampa {display: none} } @ Media print { display : none } div # visibile_a_video {display: none} display : block } # Visibile_in_stampa div {display: block} } |
Google, por ejemplo, tanto el índice de contenidos de nuestro HTML, incluso si la pantalla se puede ver sólo una. Si se imprime la página encontrará un contenido sorprendentemente nuevo. El truco, sin embargo, se reveló mediante la eliminación de la aplicación de estilos en los navegadores que lo soportan. Normalmente, nadie realiza una operación de este tipo cuando se navega por Internet. Esta encuesta sólo se produce cuando no coinciden entre lo que es visible en la pantalla y lo que se imprime!
Hasta la fecha no he visto casos de este tipo de manipulación descarada el uso de CSS. En un momento se trató de aumentar la visibilidad en Internet a través de una serie de textos, palabras, del mismo color que el fondo de la página Web, con lo que este artificio oscuro en los ojos de los navegantes. Por el momento los motores de indexación guardia contra estos "fraudes". Tal vez sea hora de anticipar algún bromista antes de sentar un precedente?
Actualmente, las Hojas de Estilo le permite especificar un rango de salida de tipo de medio. Para obtener una lista completa, vea el W3C .
ID de clase y en CSS
nei fogli di stile. Estos son 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 por ejemplo el uso de motores de Ajax, pueden entrar en conflicto con los consejos que se dan aquí! Y al final veremos por qué.
Las maravillas de la CSS2.0 +
Debido a las incompatibilidades de estilo y tal vez de salida - sin embargo - cross-browser, no todo el mundo sabe el gran potencial de hojas de estilo. Queremos mostrar, por lo tanto, algunas características de la sintaxis CSS desconocido para muchos y para recordarnos lo poco que - a menudo - que aprovechar al máximo las herramientas que tenemos disponibles.
Nota: Todos los ejemplos se han probado en Firefox 1.5.0.5
Selección por atributos
1 2 3 4 5 |
1 2 3 | type = submit ] { color : #f00 } div # entrada myInput [type = submit] {color: # f00} type = button ] { color : #0f0 } div # entrada myInput [type = botón] {color: # 0f0} value = Annulla ] { color : #00f } div # entrada myInput [= valor Cancelar] {color: # 00F} |
Esta característica, a menudo llamado cono de avanzada CSS2, permite que las cosas strabiglianti, si reflexionamos por un momento. La mayor ventaja que ottinene HTML lado, donde no hay necesidad de distinguir entre las clases o etiqueta de identificación en el CSS. Es precisamente de los atributos - aunque presente - en el TAG para indicar que el estilo asociado. Además, cualquier atributo de la etiqueta puede ser tomado como un selector: alt, título de acceso, etc ...
De selección de profundidad
Este tipo de selección es nada menos que espectacular, si se considera que puede ser añadido a la anterior. Que le permite definir la jerarquía de los elementos. Mirando el ejemplo de abajo, inmediatamente se dará cuenta de la extraordinaria importancia de este tipo de selección, que mantiene el HTML limpio y libre de indicadores innecesarios.
1 2 3 4 5 6 7 |
1 2 3 | p { color : #f00 } div # mi_maquina> p {color: # f00} p + p { color : #0f0 } div # mi_maquina> p + p {color: # 0f0} p :last-child { color : #00f } # Mi_maquina div> p: last-child {color: # 00F} |
e – fantastico – first-letter ! De hecho, sólo para concluir este sobrevuelo, así como last-child existe first-child y - increíble - first-letter ! Haga la prueba.
Apenas hemos tocado el tema, por supuesto, bastante amplio para decir la verdad, que ve CSS como instrumento avanzado para la definición de las páginas layput. Hay otros selectores y comportamientos, y una gran noticia para la especificación del archivo CSS para las generaciones futuras.
Últimos Comentarios
Simon : Se molesta perturbado de nuevo y utilizar ese espacio para estas cosas ... sin embargo, no funciona ...
Giovambattista Fazioli : @ Simon: ¿qué puede ser debido a la sintaxis que utiliza, específicamente para PHP 5 +,...
Simon : He probado la noche anterior poner todo en functions.php, formas bien, jQuery, y las fichas que jQueryUI ...
Giovambattista Fazioli : @ Simon: Yo recomiendo la limpieza de ingresar un código como el de ...
Simon : @ Giovambattista Fazioli: Gracias por su paciencia, todo está claro ... ahora me siento ahora, ...