# Problemas de Amaya

En esta página se comentan algunos problemas de la edición de páginas web con Amaya. Hay que tener en cuenta que Amaya no aplica correctamente bastantes propiedades de las hojas de estilo, así que es necesario comprobar en Firefox que estamos obtenido el resultado esperado.

Faltan por poner bastantes cosas

## Hojas de estilo alternativas

Amaya no maneja las hojas de estilo alternativas:

- Si en una página hay enlaces a varias hojas de estilo sin atributo title, se aplican todas.
- Si en una página hay enlaces a varias hojas de estilo con atributo title y sin atribulo rel="alternate stylesheet" se aplica la última hoja enlazada.
- Si en una página hay enlaces a varias hojas de estilo, una con atribulo rel="stylesheet y el resto con atribulo rel="alternate stylesheet" se aplica la hoja con atribulo rel="stylesheet

Volver al principio de la página

## Alineación vertical: vertical-align

Amaya no aplica la propiedad vertical-align.

    Alineación:  sub,   bottom,  middle, text-bottom, baseline, text-top, top,    super.
    Ejemplo:    bq bq bq bq  bq  bq bq bq
    Alineación:  sub,      bottom,   middle, text-bottom, baseline, text-top,   top,      super.
    Ejemplo:

Volver al principio de la página

## Espaciado de letras y palabras: letter-spacing y word-spacing

Amaya no aplica las propiedades letter-spacing y word-spacing.

    p {
      letter-spacing: 10px;
    }
| Esto es un párrafo normal y corriente.
    p {
      word-spacing: 10px;
    }
| Esto es un párrafo normal y corriente.

Volver al principio de la página

## Decoración: text-decoration

Amaya no aplica el valor blink (parpadeo) a la propiedad text-decoration.

    p {
      text-decoration: blink;
    }
| Esto es un párrafo p normal y corriente.

Volver al principio de la página

## Mayúsculas / minúsculas: text-transform

Amaya no aplica la propiedad text-transform.

    p {
      text-transform: capitalize;
    }
| Esto es un párrafo normal y corriente.
    p {
      text-transform: uppercase;
    }
| Esto es un párrafo normal y corriente.
    p {
      text-transform: lowercase;
    }
| Esto es un párrafo normal y corriente.

Volver al principio de la página

## Sombreado: text-shadow

Amaya no aplica la propiedad text-shadow.

    p {
       text-shadow: grey 1px -1px
    }
| Esto es un párrafo con sombreado.
    p {
       text-shadow: grey 5px -5px 2px;
    }
| Esto es un párrafo con sombreado desenfocado.

Volver al principio de la página

## Colores de sistema

Amaya no reconoce los colores del sistema.

Color | Nombre | Concepto |
| ActiveBorder | Borde de la ventana activa |
| ActiveCaption | Título de la ventana activa |
| AppWorkspace | Color de fondo del interfaz de múltiplesdocumentos |
| Background | Color de fondo del escritorio |
| ButtonFace | Color frontal de los elementos 3D |
| ButtonHighlight | Sombra oscura de los elementos 3D (bordes opuestos a la fuente de luz) |
| ButtonShadow | Sombra de los elementos 3D |
| ButtonText | Texto de los botones |
| CaptionText | Texto en título, caja de tamaño y caja de flecha de desplazamiento |
| GrayText | Texto en gris (desactivado). Este color es #000000 si no se puede mostrar un colo gris sólido |
| Highlight | Elemento(s) seleccionado(s) en un control |
| HighlightText | Texto de (de los) elemento(s) seleccionado(s) en un control |
| InactiveBorder | Borde de la ventana inactiva |
| InactiveCaption | Título de la ventana inactiva |
| InactiveCaptionText | Texto de un título inactivo |
| InfoBackground | Color de fondo de los tooltips |
| InfoText | Texto de los tooltips |
| Menu | Fondo de los menús |
| MenuText | Texto de los menús |
| Scrollbar | Área gris de la barra de desplazamiento |
| ThreeDDarkShadow | Sombra oscura de los elementos 3D |
| ThreeDFace | Color frontal de los elementos 3D |
| ThreeDHighlight | Color brillante de los elementos 3D |
| ThreeDLightShadow | Color claro de los elementos 3D (bordes frente a la fuente de luz) |
| ThreeDShadow | Sombra oscura de los elementos 3D |
| Window | Fondo de la ventana |
| WindowFrame | Marco de la ventana |
| WindowText | Texto en las ventanas |

Volver al principio de la página

## Espacios en blanco: white-space

Amaya no aplica la propiedad white-space.

    pre {
      white-space: normal;
    }
    <pre>white-space: normal
            Espacios en blanco seguidos: (     ).
            Tercera línea.</pre>
    white-space: normal
         Espacios en blanco seguidos: ( ).
         Tercera línea.
    pre {
      white-space: pre;
    }
    <pre>white-space: pre
             Espacios en blanco seguidos: (     ).
             Tercera línea.</pre>
    white-space: pre
            Espacios en blanco seguidos: (     ).
            Tercera línea.
    pre {
      white-space: nowrap;
    }
    <pre>white-space: nowrap
             Espacios en blanco seguidos: (     ).
             Tercera línea.</pre>
    white-space: nowrap
            Espacios en blanco seguidos: ( ).
            Tercera línea.

Volver al principio de la página

## Pseudo-clases y pseudo elementos

### Pseudo-clase :hover

Amaya no reconoce la pseudo-clase :hover.

    p {
      background-color: white;
      color: black;
    }
    a:hover {
      background-color: black;
      color: white;
    }
| Este párrafo está escrito en negro sobre blanco, pero cuando se pasa el ratón por encima de este enlace, el enlace se muestra de color blanco sobre fondo negro.
    p {
      background-color: white;
      color: black;
    }
    p:hover {
      background-color: black;
      color: white;
    }
| Este párrafo está escrito en negro sobre blanco, pero cuando se pasa el ratón por encima del párrafo, se muestra de color blanco sobre fondo negro.

Volver al principio de la página

### Pseudo-clase :hover

Amaya no reconoce la pseudo-clase :active.

    p {
      background-color: white;
      color: black;
    }
    a:active {
      background-color: black;
      color: white;
    }
| Este párrafo está escrito en negro sobre blanco, pero cuando se hace clic en este enlace, el enlace se muestra de color blanco sobre fondo negro.
    p {
      background-color: white;
      color: black;
    }
    p:active {
      background-color: black;
      color: white;
    }
| Este párrafo está escrito en negro sobre blanco, pero cuando se hace clic en él, se muestra de color blanco sobre fondo negro.

Volver al principio de la página

### Pseudo-clase :focus

Amaya no reconoce la pseudo-clase :focus.

    input:focus {
      border: red 2px dotted;
      padding: 2px;
    }

Volver al principio de la página

### Pseudo-elementow :first-line y :first-letter

Amaya no reconoce el pseudo-elemento :first-line.

    p:first-line {
      text-transform: uppercase;
    }
| La primera línea de este párrafo se tiene que ver en mayúsculas. Modifica el tamaño de la fuente o el tamaño de la ventana para ver cómo se modifica el aspecto del párrafo.

Amaya no reconoce el pseudo-elemento :first-letter.

    p:first-letter {
      color: red;
    }
| La primera letra de este párrafo se tiene que ver en rojo. Y la primera de éste también.
    p:first-letter {
      color: red;
      float: left;
      font-family: monospace;
      font-size: 300%;
    }
| La primera letra de este párrafo es una letra capital, es decir, una letra más grande que ocupa varias líneas de texto. Para ello, en la hoja de estilo tienes que hacer la letra flotante y aumentar su tamaño. En este caso también he cambiado el color y el tipo de letra.

Volver al principio de la página

### Generar contadores: content, counter-increment y counter-reset

Amaya no aplica las propiedades content, counter-increment y counter-reset.

    pre {
      counter-reset: cuenta-parrafos;
    }

    p:before {
      content: counter(cuenta-parrafos);
      counter-increment: cuenta-parrafos;
    }
    Ejemplo de contadores
Este párrafo es un párrafo sin clase. Este párrafo es un párrafo sin clase. Este párrafo es un párrafo sin clase.
    Ejemplo de contadores
Este párrafo es un párrafo sin clase. Este párrafo es un párrafo sin clase.

    pre {
      counter-reset: cuenta-parrafos;
    }

    p:before {
      content: counter(cuenta-parrafos)". ";
      counter-increment: cuenta-parrafos;
    }
    Ejemplo de contadores
Este párrafo es un párrafo normal y corriente. Este párrafo es un párrafo normal y corriente. Este párrafo es un párrafo normal y corriente.
    Ejemplo de contadores
Este párrafo es un párrafo normal y corriente. Este párrafo es un párrafo normal y corriente.

Volver al principio de la página

## Fondos

### background y background-color

Al poner una propiedad background después de una background-color debería anularse la propiedad background-color, pero Amaya no lo hace.

    td {
      background-color: orange;
      background: url("gota.png");
    }
| Esta celda tiene color de fondo orange y la misma imagen con transparencia del ejemplo anterior, pero el color de fondo no es visible porque la imagen de fondo está establecida posteriormente con background en vez de background-image.
    td {
      background: url("gota.png");
      background-color: orange;
    }
| Esta celda tiene color de fondo orange y la misma imagen con transparencia del ejemplo anterior, pero el color de fondo sí es visible porquebackground-color está establecido posteriormente.

Volver al principio de la página

### Mezclar números y palabras en background-position

Amaya muestra la imagen de fondo abajo a la derecha, lo que es incorrecto puesto que la propiedad background-position del ejemplo no es válida.

    td {
      background-image: url("verde.jpg");
      background-position: bottom 100%;
      /* bottom 100% es incorrecto, lo correcto
         sería decir 100% bottom (primero la posición
         horizontal y luego la vertical)
      */
      background-repeat: no-repeat;
    }

Volver al principio de la página

## Tamaño

### Atributo height en porcentaje

Amaya aplica porcentajes en la propiedad height.

    p {
      border: black 1px solid;
      height: 50%; /* Ni FF ni IE hacen caso de esta propiedad */
    }
| Hola, mundo

Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.